/*CSS file containing the first design for our website. This design has fixed width, and automatically centers.*/
/*It is the easiest way to implement the website and will fit even on small displays (say 800*600 pixels).     */
/*However, it will not fill the navigator' sreen on large displays (is not dynamic) and will not look as good. */

/*CSS code is very different from XHTML, based entirely on ids and classes to which we can give attributes.    */
/*Every tag in the HTML code can be associated to a user defined class or id, and is also associated by default*/
/*with a class of the same name. Ex: <p> is associated with the generic class 'p'. Simple, isn't it?           */

/*Note that the code in a CSS file is not sequential, so the order matters little!*/

/*CODE START*/  


/**********GENERAL PROPERTIES**********/

body 
{
	background-color:#D0D0D0; /*Overall background; Light grey =D0D0D0*/
}


#Page /*Remember, this contains the entire page. Here I'm centering the design and fixing its width*/
{
	width: 780px; /*Fixed width*/
	margin: auto; /*Centred design*/
	margin-top: 0px; /*Top and bottom margin set so as not to stick page content to navigation bars*/
	margin-bottom: 18px;

}

ul
{
	padding: 3px;
	margin: 1px;
	padding-left: 1px;
	margin-left: 1px;
}

li
{
	padding: 5px;
}

/**********HEADER PROPERTIES**********/

#Header /* Note the # required to access a user-determined ID.*/
{
	width: 740px;
	height: 90px;
	background-color: #10253F;
	font-size:45px;
	font-family: Century Schoolbook ,Thames, Georgia, Arial,Sans-serif;
	padding:15px;
	padding-left: 20px;
	padding-right: 20px;
	text-align:center;
	color: white;
	border-bottom: 1px solid white;
}

#Header a
{
	color: white;
	text-decoration:none;
}

.sub_header
{
	font-size:30px;
}



/**********TOP MENU PROPERTIES**********/

#TopMenu 
{
	width: 764px;
	height: 220px;
	background-color: #10253F;/*3366CC*/
	padding:6px;
	padding-left:10px;
	font-size:14px;
	font-family: Constantia, Arial, Sans-serif;
	text-align:center;
}

#TopMenu b
{
	font-size: 20px;
}

#TopMenu img
{
border:none;
}


.tmtxt
{
	margin-top:5px;
	padding-bottom : 6px;
}

.sub_topmenu 
{
	float:left;
	width:140px;
	height:220px;
	padding: 6px;
}

.sub_topmenu a
{
	color: white;
	text-decoration:none;
}

#TopMenubtm
{
	background-color:#D0D0D0;
	width: 780px;
	height: 5px;
}

/**********BODY PROPERTIES**********/

#MainBody
{
	width: 780px;
	font-size:16px;
	font-family:Constantia, Arial, Sans-serif;
	color: black;
}
* html MainBody
{
	height:100%;
}

#MainBody img
{
	border: 1px;
	border-color:black;
}
	
/* LEFT BAR MENU*/
.menu	
{

	float:left;
	width: 122px;
	background-color: #607DCA;/*607DCA95B3D7*/
	padding:10px;
	border-right:4px solid #D0D0D0;
	
}     

.menu h3
{    
	margin-top:0px;
}

.menu ul
{
	padding-left:20px;
}
.menu li
{
	padding:4px;
}
.menu h3
{
	margin-bottom:0px;
	margin-top:4px;
}



.menu a /* All links contained in a sub_menu will have the following properties (default link color is blue) */
{
   	color: black;
	text-decoration:none;
}

.menu a:hover /*NOTE: this does not work properly in IE as only the first line of tewt will be overlined*/
{

	background-color: #FFFFFE;
}

/*PAGE BODY */
.contents
{
	width: 600px;
	min-height: 800px;
   	padding: 15px;
	background: #A4C4E8;
	float:right; 	
	/*background: url(images/fauxcolumn.jpg) 0;*/
	font-family: Constantia,Comic Sans MS, Arial, Sans-serif;

}

.contents h2
{
	margin-top:0px;
}

.contents ul
{
	padding-left: 30px;
}
/*ANCHORS*/
.quicklinks
{
	width:600px;
	background: #A4C4E8;
	font-size: 15px;
}
.quicklinks a
{
	color:black;
}

.quicklinks a:hover
{
	background-color: #FFFFFE;
}

.quicklinksspecial
{
	width:290px;
	background:#A4C4E8;
	font-size: 15px;
}

.quicklinksspecial a
{
	color:black;
}

.quicklinksspecial a:hover
{
	background-color:#FFFFFE;
}

.quicklinksspecial2
{
	width:350px;
	background:#A4C4E8;
	font-size: 15px;
}

.quicklinksspecial2 a
{
	color:black;
}

.quicklinksspecial2 a:hover
{
	background-color:#FFFFFE;
}


/**********PAGE SPECIFIC**********/