/* specimen css file for example web site ... */

/*
The 'Forward slash and star' code that 'wraps' this set of paragraphs allows you to
put comments into your stylesheet to remind you how it works when you return to it.
Everything else here is the stylesheet itself.

The stylesheet contains 'Rules' - sets of instructions in a particular format that
control presentation of an HTML element (and possibly its children)

CSS Rules consist of two parts:

The 'Selector' - the HTML element in question

The 'Declaration' - instructions as to the display of
the particular element.

Stylesheets are simple, but very particular about syntax - the declaration being 
enclosed in curly brackets, different parts of the declaration separated 
by colons or semicolons. If something's not working and you've worked on the 
stylesheet by hand, check the punctuation ...
*/

/* You can set margins and a background for page elements, including the body of the page.
   ie6 has bugs when dealing with negative margin settings - avoid them. */
   
/* FrontPage isn't good at handling the pasting of stylesheet fragments - it
mistakes the file for an HTML file and surrounds that which is pasted with 
inappropriate HTML code - remove this by editing it out ... */

/*body         {  font-size: 14px;
				font-family: Trebuchet MS, arial, sans-serif;
			    }*/
			   
/* Set specific qualities for links ...                 */
				  
A:link          { color: #000000;
                  background: transparent;
                  text-decoration: underline   }
				  
A:visited       { color: #000000;
                  background: transparent;
                  text-decoration: underline     }

A:active        { color: #000000;
                  background: transparent;
                  text-decoration: none     }
				  
/* Stylesheets allow you to include effects that otherwise need
ponderous programming or worse. This one highlights links when your visitors' mouse
is over them.  */
				  
A:hover	        { color: #0000ff;
                     background: transparent;
                     text-decoration: underline;}
				  
/* You can instruct that certain paragraphs display in a different way to the rest */
				  
/* Font sizes. You can set these in absolute terms using 'px' (for pixels)
   but it's much better to use relative units such as 'em' (stands for ... em!)
   This paragraph's right aligned and again calls for maroon text. */
				  
/* A very pale paragraph used as an end-quote */
				  
p.wash          { color: #CCCCCC;
                  background: transparent;
				  font-style: italic;
                  font-weight: normal;
				  margin-top: 0em; }
				  
p.footermenu    { margin-bottom: 0em;
                  color: #cc3366;
                  background: transparent;
                  text-align: right;}

/* Control the appearance of headings ...
   ... eg H1 has a largish, bold font, using Arial if available or any san serif font
   the margins are set at top, bottom and left, and there is a one pixel wide black border
   The 'padding' is the space surrounding the heading outside the border and this
   is also set explicitly */
                


H1                { font-size: 16px;
                    font-family: Verdana, Arial, Helvetica, sans-serif;
                    font-weight: bold;
                    margin-top: 0em;
                    margin-bottom: 0em;
                    margin-left: 0;
                    color: #000000;
					   background: transparent;
                    border-width: 0px 0px 0px 0px;
                    border-style:solid;
                    border-color: #000000;
                    padding: 0% 0% 0% 0%;
                    }
                    

H2  	     	{ font-size: 16px;
                    font-family: Verdana, Arial, Helvetica, sans-serif;
                    font-weight: normal;
                    font-style: italic;
                    margin-top: 0em;
                    margin-bottom: 0em;
                    margin-left: 0;
                    color: #000000;
					background: transparent;
                    border-width: 0px 0px 0px 0px;
                    border-style:solid;
                    border-color: #000000;
                    padding: 0% 0% 0% 0%;
  			      }
                                               
H3  	     	{ font-size: 10px;
                    font-family: Verdana, Arial, Helvetica, sans-serif;
                    font-weight: bold;
                    font-style: normal;
                    margin-top: 0em;
                    margin-bottom: 0em;
                    margin-left: 0;
                    color: #000000;
					background: transparent;
                    border-width: 0px 0px 0px 0px;
                    border-style:solid;
                    border-color: #000000;
                    padding: 0% 0% 0% 0%;
  			      }
  			      				  
H4                { font-size: 10px;
                    font-family: Verdana, Arial, Helvetica, sans-serif;
                    font-weight: normal;
                    font-style: normal;
                    margin-top: 0em;
                    margin-bottom: 0em;
                    margin-left: 0;
                    color: #000000;
					background: transparent;
                    border-width: 0px 0px 0px 0px;
                    border-style:solid;
                    border-color: #000000;
                    padding: 0% 0% 0% 0%;
  			      }                    

/* Control things like the margins around images       */
                    
IMG             { margin-left: 0em;
                  margin-bottom: 0em;
                  border-width: 0 0 0 0;
                  background: transparent;
                  margin-top: 0em; }
                 
.blah     	    { border-style:solid; margin-left: 0em;
                  margin-bottom: 0em;
                  border-width: 1px;
                  /*background: transparent;*/
                  margin-top: 0em; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px }


/* Influence the presentation of lists                 */

/*DL              { margin-left: 5em; }

DT              { color: #cc3366;
                  background: transparent;
                  font-style: italic;
                  font-weight: bold;
                  margin-top: 0.8em }

DD              { font-style: normal;
                  margin-bottom: 0.8em }
				  
LI              { list-style-type: circle;
                  margin-bottom: 0.4em;
                  margin-top: 0.4em;  }*/

/* Control the appearance of portions of text using spans */
				  
/*SPAN.ghost	    { color: #DDDDDD;
                  background: transparent;
	              font-style: italic;   }
				  
SPAN.important   { /* Great emphasis   */ 
                   color: #666666; background: #ffdddd; .main_menu {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #333333;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
}
.login {
	border: thin groove #000099;
	padding: 3px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-style: normal;
	font-weight: normal;
	color: #000000;
	float: none;
	clear: none;
	width: 100px;
}
.section_head {
	background-color: #33CC33;
	border: thin none #000066;
}


span.important-text   
                 { /* Great emphasis   */ 
                    color: #cc3366; 
				      background: transparent; }*/
                  
/* This seems to work for IE, and Gecko ... which treats them as boxes with a fill ...
the width: 103% addresses ill behaviour in ie without messing things up in Gecko ... */
			   
/*HR              { height: 3px;
                  border-style: solid;
                  color: #cc3366;
                  background-color: transparent;
                  width: 103%;  }*/

/* Influence blocks of text by wrapping them in a 'DIV'. This one creates a
   text box with a thin grey border and a pale background */
				  

/*DIV.box         { padding: 1% 4% 1% 4%;
                  width: 500px;
				    color: #666666; 
                  background-color: #ffeeee;
                  margin: 0% 0% 0% 0%;
                  margin-right: 0%;
                  border-style: solid;
                  border-width: 1px;
                  border-color: #999999; }*/
                 
				  
/* ... and this one a plain box the same width and offset as the page heading ...
   ... it's been used to contain the links.  */
				  
/*DIV.menubar     { font-size: 0.88em;
                  text-align: left;
                  
                  color: #cc3366;
				  background-color: #ffeeee;
                  border-width: 1px 1px 0px 1px;
                  border-style:solid;
                  border-color: #000000;
				  margin-left: 5%;
                  padding-top: 0em;
				  padding-right: 0em;
				  padding-bottom: 0.072em;
				  padding-left: 0.6em;}
				  
P.header        { margin-top: 0em;
                  margin-bottom: 0em;
                  }
				  
p.footernav     { margin-bottom: 0em;
                  color: #cc3366;
                  background: transparent;
                  text-align: right;}
				  
DIV.pagecontent { margin-left: 15%; }*/
				  
/* Simplify things by setting one style for several
page elements - separate the selectors with a comma. Here, both preformatted and
text bracketted by the 'code' tag are set to appear in a green 'typewriter' sort of font */
                  
/*pre,code     { font-family: monospace; 
               font-size: 0.97em; 
               color: #cc3366;
			   background-color: #ffffff;}*/

/* That's the lot. A good starting point for style sheets is to borrow one.
   Feel free to borrow this one, alter the contents, and use it in your work */main_menu {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #000000;
}
.maintable {

	border: thin solid #000000;
	padding: 6px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-style: normal;
	font-weight: normal;
	color: #000000;
	float: none;
	clear: none;
}
.main_page_header {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
}
.main_page_text {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: normal;
	text-align: justify;
}

.main_page_SubHeader {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	text-align: justify;
}

li {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: normal;
	text-align: justify;
}

ul {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: normal;
	text-align: justify;
}

.RelatedHeaders
	{
	.font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	font-style: italic;
	background-color: #eeeeee;
	}