/*
* 
* Crib:
* 
* CSS and style sheets are complex and this needs futher work
*
* <element style=" color: black; " >
* <element class=name > css .class does not need to be unique</element> 
* <element id=name > css #id - should be unique </element>
* CSS list of elements : BODY, FONT, H1, H2, H3, H4, { color: black; }
* CSS elements separated by space:-
* .className p { 
* <div class=className><p> paragraphs within div tags </p></div>	
*
* Absolute / relative links and sub-directories:- 
*   <link rel="stylesheet" type="text/css" href="common.css">
*   href="common.css"   from same directory as page. 
* 	
*   If you use href="/common.css" so the CSS are in the root directory, opening pages in a local folder is not found  
*   href="/common.css"  from root directory. Tip: use "subst M ." 
*
* The CSS Box Model:-
* margin
*  border
*   padding
*     content
* 
*/

/* --- Sec 1.0 Common menu styles ---------------- */
/* All elements */

* { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;  }

pre {
	font-family: "Lucida Console", "Courier New", monospace;
	COLOR: #111; 
	background-color: #FFF8DC;
	
	padding: 15px;
	border: 2px  #cba;
	border-left-style: solid;
	border-top-style: solid;
	border-bottom-style: solid;
	overflow-wrap: break-word;
}

/* -- horizontal --*/
/*
* Usage example:-
* <div id=navcontainer><UL><LI></LI><UL></div>
*
*/
#navcontainer UL LI {
	MARGIN-TOP: 0px; 
	MARGIN-LEFT: 5%; 
	
	PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; 
	WIDTH: 90%;  
	COLOR: #333333; 
	LINE-HEIGHT: 18px; 
	FONT-FAMILY: Arial,Helvetica,sans-serif; 
	BACKGROUND-COLOR: #cccccc; 
	TEXT-ALIGN: center;
}

#navcontainer UL LI {
	DISPLAY: inline;
	PADDING-RIGHT: 5px;  PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px;	
}

#navcontainer UL LI A {
	BORDER-RIGHT: #fff 1px solid; 
	PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; 
	COLOR: black;
	TEXT-DECORATION: none;
	FONT-SIZE: large;  HEIGHT: 20px;
	
}
#navcontainer UL LI A:hover {	COLOR: white; BACKGROUND-COLOR: #369; }

#navcontainer #active { BORDER-LEFT: #fff 25px solid; }
/* */
#navcontainer TABLE {   width: 90%; }
#navcontainer TR {	/* BACKGROUND-COLOR: #FF0 */ }
#navcontainer TD { 	PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; }

/* ---------------------------------------------------------------- */
BODY {
/*	BACKGROUND-COLOR: #ffffcc; */
	BACKGROUND-COLOR: #ffffEE;
	margin-left: 7%;
	margin-right: 7%;
	}
 
/* div class=c4 */
DIV.c4 {	TEXT-ALIGN: left 	}
P.c7 {		TEXT-ALIGN: left	}
DIV.c9 {	TEXT-ALIGN: right	}

TABLE.c1 {	WIDTH: 100%	}
TD {		PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; }
TD.c12 { 	WIDTH: 156px; HEIGHT: 20px; }
TD.c13 {	HEIGHT: 15px; TEXT-ALIGN: right; }
TD.c15 {	WIDTH: 50px; BACKGROUND-COLOR: #ff9900; }
TD.c3 { 	WIDTH: 149px; HEIGHT: 50px; BACKGROUND-COLOR: #ff9900; TEXT-ALIGN: center; }
TD.c5 {		WIDTH: 726px; BACKGROUND-COLOR: #ff9900;	}
TD.c8 {		WIDTH: 149px; BACKGROUND-COLOR: #ff9900;	}
TR.c10 {	BACKGROUND-COLOR: #990000;	}
TR.c11 {	BACKGROUND-COLOR: #ffcc66;	}
TR.c2 {		BACKGROUND-COLOR: #006600;	}

/* class= */
.c14 {		COLOR: white;	}
.c16 {		FONT-FAMILY: arial; }
.c17 {		COLOR: black; FONT-FAMILY: arial;	}
.c18 {		FONT-FAMILY: arial;	}
.c6  {		FONT-SIZE: large; COLOR: white; FONT-FAMILY: arial; }

/* --- Sec 2.0 Common  styles  used in end.js ---------------- */
.endjs {	FONT-SIZE: x-small; COLOR: #999999; FONT-FAMILY: arial; }
.cen1	 { text-align: center; }

/* For Top menu */
#topmenu  table { padding:10px;	  }
#topmenu  td {  	background-color: #FFFFCC;  text-align: left;  padding:10px; }
#topmenu  A  {  	TEXT-DECORATION-COLOR: #ddd; padding:10px;   }
A  {  	TEXT-DECORATION-COLOR: #ddd; }
#topmenu A:hover {	COLOR: white; BACKGROUND-COLOR: #369; }


/* Add a more obvious background as the little hand was difficult*/
A:hover {	COLOR: white; BACKGROUND-COLOR: #369; padding:2px; }