/******************************************************************************************************

BTW, yes, you can use words for colours - They have an advantage of being 'safe', as all browsers are
supposed to be able to see them !!
Copyright, blood, sweat and tears - D. P. Whiteside 2009
Under GPL you may use and alter this to your hearts content for personal use.
You may not on-sell this code and must pass it on under the GPL.
For commercial use, you need my permission.
Either way, an e-mail to me at the address a bit further down would be nice - let me know how you get on.
This is my MY BABY .... My CSS that I love and cherish - the thank-you list is too long to start
Those people explained the whys and hows & then gave me the confidence to go and do it !!
I have put a load of comments in, along the way, please don't just copy it, learn how it works
Email = phillw@uk.vpolink.com  - I'm usually kicking around on the site vpolink.com as it hosts
forums, blogs, general information, Live Chat, etc.. The Site Owner lets people use a section of his server
with 450GB hard disk area and 'fair-play' Bandwidth for just $15 / year. My usual 'play' area is
phillw.vpolink.com although I also have several sub-domains in the test areas such as
mgjuddltd.phillw.vpolink.com   - These areas can be linked to what ever domain you have registered,
oh, and yeah, there's no additional charge for that either.
*********************************************************************************************************/

/*** Start off Gently ..... I've put so many comments in here, but for the actual techiniques, you need 
just to ask & I will point you to the tutorials that I learned from ***/

/*** BTW, yes, you can use words for colours - They have an advantage of being 'safe', as all browsers are
supposed to be able to see them !!  (Aincient days of 8 bit displays) don't be off-put when you see 
#fff as a color definition, it is 'legal short hand for #ffffff, and shorter than white - lol 
you can use #000 for black, by the same rule ***/



p { text-align: justify; font-family: Verdana, Arial, sans-serif; }


.searchdisable {color: gray;}  /** yeah, we have to set that up here - It appears in the Search routine **/

h1 { margin-top: 0px; margin-bottom: 0px; color: red; font-size: 50px; }
h2 { margin-top: 0px; margin-bottom: 0px; color: red; font-style: italic; }
h3 { margin-top: 10px; margin-bottom: 10px; text-align: center;}
h4 { margin-top: 0px; margin-bottom: 0px; }
h5 { margin-top: 0px; margin-bottom: 0px; color: gray;} /*** I'm using this in the table for the Search bit **/
/*** from h1 - h6 ..... do with them as you wish !!!  ***/

/**** LINKS ... Yeah, Buttons are just fancy Links *******/

/****** MY N Class - (  Not underlined  )
 Please remember that people expect to see a normal link in Blue, underlined - Don't confuse them 
 < a href ..........>   becomes
 < a class = 'N' href .........> to use the class 'N', below - see the difference !!!!
 
*****/
a.N {line-height: 100% ; color: blue; text-decoration: none;}
a.N:active {color: green; }
a.N:visited {color: purple; }
a.N:hover {color: red; font-size: 100%; text-decoration: none;}

/***** class DS --- for Displaying Search results in the table ***/
a.DS {line-height: 100%; color: blue; text-decoration: none;}
a.DS:active {color: green; }
a.DS:visited {color: blue; }  /*** paging back & forth should leave it as blue ***/
a.DS:hover {color: red; font-size: 100%; text-decoration: none;}


/****************************************************************************************
 Buttons... Well, you can java roll over buttons, or you can use this neat trick from CSS using a GIF
 On mouse this, on mouse off that .... tsk ..... Meet the new pseaudo class HOVER ;-)
 To do this, you need to create your button as normal & rollover (hover) - only works with GIF
 Each button must have identical sizes, in pixels for width & height
 The tricky bit is to get the highlighted image positioned EXACTLY below the normal image
 Then save the file, in my example, as TB2.gif  -- When the CSS reads the file, it reads the width
 that you stipulate in the width command and the height of the NORMAL button.
 And, the fun bit is, that on 'HOVER', it scrolls by that height to show the lower half of your
 button. - It's such a neat trick, needing no Java, etc !!!
 
 LBH ? it changes the text color in the button from yellow to white 
 as part of the navigation section, when a button is on the page it points to, u simply change its 
 type from LB  to LBH ..... simples ;-)
*****************************************************************************************/

/************************** Long Button Class **********/

a.LB
{
  display: block;
  width: 210px;
  height: 50px;
  background: url("../img/buttons/Jay3.gif") no-repeat 0 0;
	color: yellow;
	text-align: center;
	vertical-align: middle;
	line-height: 150%;
	font-weight: bold;
	text-decoration: none;
}

a.LB:hover { background-position: 0 -50px; }

a.LH
{
  display: block;
  width: 210px;
  height: 50px;
  background: url("../img/buttons/Jay3.gif") no-repeat 0 0;
	color: white;
	text-align: center;
	vertical-align: middle;
	line-height: 150%;
	font-weight: bold;
	text-decoration: none;
}

a.LH:hover { background-position: 0 -50px; }

/**************************Short Button Class ***********/
/**** Just in case I want a little button for something ********/

a.SB
{
  display: block;
  width: 40px;
  height: 24px;
  background: url("./Buttons/ShortButton.gif") no-repeat 0 0;
	color: yellow;
	text-align: center;
	vertical-align: middle;
	line-height: 150%;
	font-weight: bold;
	text-decoration: none;
}

a.SB:hover { background-position: 0 -24px; }

/**************************  Hidden Button Class, to trap naughty spiders   *********************/
/**************************  And Project Honey Pot **********************************************/
a.H
{
	width: 0px;
	height: 0px;
	display: none;
}

a.machep{color:#FFF;font:bold 10px arial,sans-serif;text-decoration:none;}


/************************* ID's aka <divs> .. A bit like using tables  *************************

Site, sets the background colour for the entire site, thus heading, & navigation both share this,
In the case of Doc, I over-ride it to be white. The advantage of this is that it removes the need 
to put -25px in as top & left margins (otherwise you get a white border showing round your pages)

***************************************************************************************************/ 

#Site 

html
{
  height: 100%;
  width: 100%;
}

body
{
  background: center #e0e0e0;
}

/*****  Sets the attributes for the heading that I use on each page to provide uniformity
The beauty being, you change it here - u change it on every page :-)
*****/

#Heading {

color: red;

background: center #d0d0d0;

position: absolute;

margin: -7px 0 0 -7px; /* top right bottom left */

padding: 0 12px 0 0; /*top right bottom left*/

width: 99%;

height: 107px;

font-weight: bold;

text-align: center;

border-bottom: 5px solid #c6ec8c; 
}

#navigation {

position: absolute;

margin: 100px 0 0 -7px; /* top right bottom left */

padding: 5px 0 0 0;

border-right: 5px solid #C6EC8C; 

font-weight: normal;

}

#Doc {

position: absolute;

padding: 0 10px 0 23px; /*top right bottom left*/

margin: 105px 0 0 203px;

width: 78%;

} 

#DocCenter {

position: absolute;

padding: 0 10px 0 23px; /*top right bottom left*/

width: 78%;

text-align: center;

} 



/*** Hmmmm.... Search  this is an odd one, as it only applies to one small, but critical section,
however - 'font' in html is being phased out, so we'd better get used to defining things here in CSS ***/

#Display {

position: absolute;

width: 99%;

padding: 0px 0px 0 0px; /*top right bottom left*/

margin: 105px 0px 0px 0px;

background: #e0e0e0;

} 

#display-table {

position: absolute;

width: 82%;

margin: 150px 0px 0px 227px;  /*top right bottom left*/

background: #e0e0e0;

} 


#FindIt {

position: absolute;

padding: 0 0 0px 0px; /*top right bottom left*/

margin: 200px 0px 0px 25%;

text-align: center;

/** background-color: #e0e0e0; **/

} 

#FindItRules {

position: absolute;

padding: 0 0 0px 0px; /*top right bottom left*/

margin: 125px 0px 0px 50px;

text-align: center;
} 

#Construct {

text-align: center;

}

/*** Tables .... Well, this site has plenty, so best to define the styles here ***/
/** Owing to IE6 having problems with some CSS, the 1st one keeps it safe (people do still use it?) **/

#Headed-table
.headed-table { border-collapse: collapse; } /** Resets border & keeps IE6 happy **/
.headed-table { border: 2px solid black; }  /** Border Around Table **/
.headed-table { border-spacing: 0; } /** padding between all cells **/
.headed-table th, .headed-table td { border: 1px solid black; } /** Border around EACH Cell **/
.headed-table th, .headed-table td { padding: 5px; }  /**Padding WITHIN Each Cell **/
.headed-table th, .headed-table td { text-align: center; }  /**align text WITHIN Each Cell **/
.headed-table { background-color:white; }
.headed-table {width: 98% }

.center { text-align: center; } /*** IE6 happiness .... ***/
.center table {margin: auto; }


/** Now, as with all things CSS, we can make this into a 'pretty-table' - But this is an engineering site
Styling Tables with CSS has all that fancy stuff in it **/


/*** Copyright Positioning, yeah, sad, I know ***/
#copy { position: relative; text-align: center; bottom: 10px; }
#copy-search { position: relative; text-align: center; background-color: #e0e0e0}