/*
Author: Greg Pullman 
Nov 2005 - Feb 2006

===========

Contents:

STRUCTURE - page-wide settings, e.g. wrapper, h1, body
TOPBAR - top header bar with logos
MAIN NAVIGATION - main navigation bar with Home, The School etc buttons and associated shading
SIDENAV - all the navigation down the left side
CONTENT - page content
IMAGE - thumbnail image
DATESTAMP - last updated text
BREADCRUMB TRAIL - the breadcrumb trail
FOOTER - page footer

=============

Known Issues:
* IE doesn't underline links in breadcrumb or footer
* IE's 'dotted' underline appears as 'dashed'
* Non-content elements overlay others when magnification too great (Firefox only, but only because IE doesn't allow magnification that strong)
* If side menu is longer than page content and approaches the bottom of the page, the bottom of menu hides behind compliance images. Doesn't hide menu items though.



*/


/*
---------
STRUCTURE
---------
*/

/* First two elements force page to be at least one screen long (100% of viewport) so footer sits at bottom of screen */

html, body, #wrapper { 
	min-height: 100%;

	height: 100%;
}

html>body, html>body #wrapper {
	height: auto;
}

/* Site-wide settings */

#wrapper { 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 76%;
	position: absolute;
	top: 0;
	left: 0;
}

body { /* Body default parameters */
	margin: 0;
}

p {
	margin-top: 0;
	margin-bottom: 0;
}

h1 {
	font-size: 1.9em;
	font-weight: bold;
	color: #369;
	background-color: #fff;
}

h2 {
	font-size: 1.4em;
	font-weight: bold;
	color: #369;
	background-color: #fff;
}

h3 {
	font-size: 1.25em;
	font-weight: bold;
	color: #369;
	background-color: #fff;
}

h4 {
	font-size: 1.1em;
	font-weight: bold;
	color: #369;
	background-color: #fff;
}

h5 {
	font-size: 1.0em;
	font-weight: bold;
	color: #369;
	background-color: #fff;
}

h6 {
	font-size: 1.0em;
	font-weight: normal;
	color: #369;
	background-color: #fff;
}

.redtext {
	color: #c00;
}

.footnote {
	font-size: 0.8em;
}

.smallcaps {
	font-variant: small-caps;
}

.floatright {
	float: right;
}

.floatleft {
	float: left;
}

.clearleft {
	clear: left;
}

.clearright {
	clear: right;
}

/*
---------
TOPBAR
---------
*/

#topbar	{
	position: relative;
	top: 0;
	left: 0;
}


#topbar1 { /* First row in header with links */
	background-color: #000;
	height: 20px;
	color: #FFF;
	font-weight: bold;
	font-size: 0.9em;
}

#topbar1 .align-left { /* Left-aligned text - absolute positioning magnifies better, but text disappears in IE when mouseover in body links! */
	float: left;
	margin-left: 20px;
	margin-top: 3px;
}

#topbar1 .align-right { /* Right-aligned text */
	float: right;
	margin-right: 20px;
	margin-top: 3px;
}


#topbar1 a:link {
	text-decoration: none;
	color: #FFF;
	background-color: #000;
}

#topbar1 a:visited {
	text-decoration: none;
	color: #DDD;
	background-color: #000;
}

#topbar1 a:hover, #topbar1 a:active {
	color: #CC3;
	background-color: #000;
}


#topbar2 { /* Second row of header with logos */
	height: 85px;
	color: #369;
	background-color: #369;
	font-size: 0.001em;
}

#topbar2 .align-left { /* Location of left logo */
	float: left;
	margin-left: 20px;
}

#topbar2 .align-right { /* Location of right logo */
	float: right;
	margin-right: 20px;
}

#topbar2 .align-right-logo { /* Right-aligned text */
	display: none;
}

#topbar2 img {
	border: none;
}

#topbar2 h1 {
	display: none;
}


/*
-------------------
MAIN NAVIGATION BAR
-------------------
*/


#mainnav {
	position: absolute;
	left: 0;
	top: 105px;
	height: 37px;
	width: 100%;
	background-color: #eee;
	color: #000;
}

#mainnav img { /* Properties for the buttons in the top nav bar */
	float: left;
	margin-left: 8px; /* Spacing between each button */ 
	margin-top: 6px; /* Spacing above buttons */
}

#mainnav .compact { /* Properties for little 'go' arrows in main nav bar */
	margin-left: 0px; 
}

#mainnavleftcorner { /* The left corner of the shading under the nav bar and the grey panel to its left */
	position: absolute;
	top: 141px;
	left: 0px;
	width: 306px;
}


#mainnavrightcorner { /* The right corner of the shading under the nav bar */
	position: absolute;
	top: 105px;
	right: 0px;
}


#mainnavshading { /* Drop shadow under the nav bar */
	position: absolute;
	height: 23px;
	top: 141px;
	left: 0;
	width: 100%;
	background-image: url(../../images/topnav-shadow-1px.jpg);
	background-repeat: repeat-x;
}



/*
---------------
SIDE NAVIGATION
---------------
*/


#sidenav {
	float: left;
	margin-top: 35px;
	width: 245px;
	padding: 40px 25px 0px 10px;
	background-color: #eee;
	color: #000;
	background-image: url(../../images/sidenav-shadow-1px.jpg);
	background-position: right;
	background-repeat: repeat-y;
}

#sidenav ul  { /* Any items in the menu which aren't links */
	font-size: 1.0em;
	font-weight: bold;
	color: #000;
	background-color: #eee;
	list-style: none;
	margin: 10px 0 10px -5px; 
	padding: 0 0 1px 0; /* If bottom element is 0px, the underlining of the last link is obscured in FireFox */
}

#sidenav ul ul { /* Second level menu items */
	margin: 0 0 20px 10px;
	font-size: 0.9em; /* 0.9em down from the size in #sidenav ul */
	font-weight: normal;
	color: #333;
	padding: 0px 0px 2px 8px;
	background-image:url(../../images/nav-line.gif);
	background-repeat: repeat-y;
}

#sidenav ul ul ul { /* Third to fifth level menu items */
	font-size: 0.8em;  /* 0.8em down from the size in #sidenav ul ul */
}

#sidenav ul ul ul ul { /* Fourth and subsequent level menu items */
	font-size: 1.0em;  /* Same size as size specified in #sidenav ul ul ul*/
}

#sidenav li {
	margin-top: 5px;
}

#sidenav a:link, #sidenav a:visited { /* Any items in the menu which are links */
	padding-left: 8px; 

	text-decoration: none;
}

#sidenav a:link {
	color: #036;
	background-color: #eee;
}

#sidenav a:visited {
	color: #769;
	background-color: #eee;
}

#sidenav ul a:hover, #sidenav ul a:active { /* The arrow next to the item on mouseover */
	background-image: url(../images/arrow_b.gif);
	background-repeat: no-repeat;
	background-position: left;
	border-bottom: 1px dotted #660;
	color: #000;
	background-color: #eee;
}

#sidenav .selected { /* The menu item currently selected */
	background-image: url(../images/arrow_b.gif);
	color: #660	!important;
	background-color: #eee;
	background-repeat: no-repeat;
	background-position: left;
}



#sidenav .bottom {
	position: absolute;
	left: 0;
	width: 282px;
}

#sidenav img {
	border: none;
}


/*
-------
CONTENT
-------
*/


#content { /* Where the page content goes */
	margin-left: 285px;
	margin-right: 5em;
	margin-top: 85px;
	margin-bottom: 50px;
	font-size: 1.0em;
	width: 45%;
/*	position: relative;
	top: 100px;
	left: 0;  */
}

#content p, #content li, #fullcontent p, #fullcontent li {
	line-height: 120%;
}

/* Don't use for now as it displays incorrect in Contribute edit mode
#content p:first-letter {
	color: #369;
	background-color: #fff;
	font-size: 1.5em;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
}
*/



#content a:link img, #fullcontent a:link img {
	border: 2px solid #369;
}

#content a:hover img, #fullcontent a:hover img {
	border: 2px solid #660;
}

#content a:link, #fullcontent a:link {
	text-decoration: underline;
	color: #369;
	background-color: #fff;
}

#content a:visited, #fullcontent a:visited {
	color: #969;
	background-color: #fff;
}

#content a:hover, #content a:active, #fullcontent a:hover, #fullcontent a:active {
	text-decoration: none;
	border-bottom: 1px dotted #660;
	color: #660;
	background-color: #fff;
}

#content .noborder, #content a:link .noborder, #content a:hover .noborder {
	border: none;
}

#content td {
	padding: 3px;
}

#content dd {
	margin-left: 20px;
}

#content .indent {
	text-indent: 30px;
}

#fullcontent { /* Full width screen with no side navigation */
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 85px;
	margin-bottom: 50px;
	font-size: 1.0em;
}

#sitemap .floatleft {
	padding: 0 10px;
	border-right: 2px solid #999;
}

#sitemap {
	height: 600px;
}


#sitemap ul { /* Creates a bit of space between the end of one nested list and the start of outer one following */
	list-style: none;
	margin: 10px 0 10px -5px; 
	padding: 0 0 1px 0; /* If bottom element is 0px, the underlining of the last link is obscured in FireFox */
	font-size: 1.0em;
	font-weight: bold;
}

#sitemap ul ul {
	font-weight: normal;
	margin: 0 0 0 10px;
	padding: 0px 0px 2px 8px;
	font-size: 0.9em;
	background-image:url(../../images/nav-line.gif);
	background-repeat: repeat-y;	
}

#sitemap ul ul ul { /* Third to fifth level menu items */
	font-size: 0.8em; 
}

#sitemap ul ul ul ul { /* Fourth and subsequent level menu items */
	font-size: 1.0em; 
}

#sitemap li {
	margin-top: 5px;
}

#sitemap ul a:link, #sitemap ul a:visited { /* Any items in the menu which are links */
	padding-left: 8px;
	text-decoration: none;
}

#sitemap a:link {
	color: #036;
	background-color: #fff;
	text-decoration: none;
}

#sitemap a:visited {
	color: #769;
	background-color: #fff;
	text-decoration: none;
}

#sitemap ul a:hover, #sitemap ul a:active { /* The arrow next to the item on mouseover */
	background-image: url(../images/arrow_b.gif);
	background-repeat: no-repeat;
	background-position: left;
	border-bottom: 1px dotted #660;
	color: #000;
	background-color: #fff;
}


/*
-----
IMAGE
-----
*/


#image {
	position: absolute;
	top: 180px;
	right: 20px;
	width: 135px;
	font-size: 0.8em;
	text-align: right;
	margin-right: 5px; 

/*	position: relative;
	top: 0px;
	right: 0px;
	width: 135px;
	font-size: 0.8em;
	text-align: right;
	margin-right: 5px; */
}

#image img	{
	border: 5px double #630;
}

#image p {
	margin: 5px -10px 0px -5px;
}




/*
---------
DATESTAMP
---------
*/


#datestamp {
	position: relative;
	bottom: 20px;
	text-align: right;
	font-size: 0.8em;
	color: #666;
	background-color: transparent;
	margin-left: 205px;
	width: 50%;
}


/*
----------------
BREADCRUMB TRAIL
----------------
*/


#breadcrumb	{
	position: absolute;
	top: 163px; /* Can be made to 160 but then gets partially hidden by C3 in edit mode */
	left: 287px;
	color: #00f;
	background-color: #fff;
	font-size: 0.75em;

}

#breadcrumb a:link, #breadcrumb a:visited {
	color: #00f;
	background-color: #fff;
	text-decoration: none; 
}


#breadcrumb a:hover, #breadcrumb a:active {
	border-bottom: 1px dotted #660;
	color: #660;
	background-color: #fff;
}




/*
------
FOOTER
------
*/

#compliance {
	position: absolute;
	left: 0;
	bottom: 17px;
	font-size: 0.9em;
}

#compliance img {
	margin-bottom: 1px;
	border: none;
}

#footer {
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 1.6em;
	background-color: #666; 
	color: #FFF;
	text-align: center;
	padding-top: 2px;
	font-size: 0.9em;
}

#footer .align-right {
	right: 20px;
	bottom: 3px;
	position: absolute;
	font-size: 0.8em;
}

#footer a:link, #footer a:visited, #footer a:active {
	color: #fff;
	background-color: #666;
	text-decoration: none;
}

#footer a:hover {
	border-bottom: 1px dotted #FFF;
}

#clearfooter	{ /* content will push down, but forces footer to wait for menu to finish before drawing the footer. Has a height property to prevent it overlaying the bottom of the menu */
	clear: left;
	height: 60px;
}