/* Lynx website additional CSS stylesheet
	29/06/07 CM
	Defines main banner menu, sidebar and main content using CSS-2, instead of images and nested tables
	Provides for easier addition of new pages and allows changes to links on main
	banner menu, and reduces size of each HTML page by removing much of the
	duplicated banner stuff.
	Also provides better support for printing - right-hand edge should no longer be clipped.
	Designed for CSS-2 compliant browsers, Firefox, Opera, MSIE7. MSIE6 works with hacks
	
	29/08/07 CM - Current status
	Full-height columns cause scrollbars to show on all CSS2 browsers (OK in MSIE6) - see
	comment further down
	Firefox 2.0.0.5 printing problems when image spans >1 page
	22/10/07 CM
	3-pixel jog text bug visible in MSIE6 - have not found a method of fixing this which has no side-effects,
	so we'll live with it for now.
	18/03/08 CM
	#div_header - removed background-color: rgb(153,153,153) - not required, and means page flickers less when loaded
*/

body {
	margin: 0px;
	font: 9pt Arial, Helvetica, sans-serif;
	color: black;
	background: white;
	background-image: url(../images/lynx-banner-bg.gif);
	background-repeat: repeat-x;
}

/*---------------------------------------------------------------*/
/* legacy styles */
select { /* combo-box */
	font: 8pt Arial, Helvetica, sans-serif;
}

H1 {
	font: bold 10pt Arial, Helvetica, sans-serif;
	color: black;
}

.copyright { /* maybe need to make text smaller */
	font: 8pt Arial, Helvetica, sans-serif;
	color: #0099FF; /* royal blue */
	text-align: left;
}

.sitedesign {
   color: #808080; /* dark grey */
	font-size: 8pt;
}

.sitedesign a {
	color: #808080; /* dark grey */
	text-decoration: none;
}

.sitedesign a:hover {
	color: black;
}

/*---------------------------------------------------------------*/
/* Lynx banner */
#div_header {
	margin: 0px;
	padding: 0px;
	height: 186px;
	width: 765px;
}

#div_header ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

#div_header img {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 186px;
	width: 765px;
}

#div_header a {
	text-decoration: none;
	font-weight: bold;
	font-family: Arial;
	font-size: 8pt;
	color: white;
	display: block;
	margin: 0px;
	padding: 2px 3px;
}

#div_header a:hover {
	color: black;
}

#div_header a#contact {
	position: absolute;
	top: 7px;
	left: 595px;
	width: 155px;
	padding-right: 0px;
	margin-right: 0px;
	text-align: right;
	color: rgb(0,153,255); /* royal blue */
}

#div_header a#contact:hover {
	color: black;
}

#div_header a#sitemap {
	position: absolute;
	top: 25px;
	left: 595px;
	width: 155px;
	text-align: right;
	padding-right: 0px;
	margin-right: 0px;
	color: rgb(0,153,255); /* royal blue */
}

#div_header a#sitemap:hover {
	color: black;
}

#div_header a#exsched {
	position: absolute;
	top: 60px;
	left: 595px;
	width: 155px;
	padding-right: 0px;
	margin-right: 0px;		
	text-align: right;
}

#div_header a#ukogl {
	position: absolute;
	top: 80px;
	left: 598px;
	width: 152px;
	padding-right: 0px;	
	margin-right: 0px;		
	text-align: right;
}

/*---------------------------------------------------------------*/
/* Drop-down menu in banner */
#div_menu {
	position: absolute;
	top: 80px;
	left: 160px;
	z-index: 100;
	min-width: 450px;
}

#div_menu ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	width: 150px;
	text-align: center;
	float: left;
}

#div_menu a {
	background-color: rgb(153,153,153); /* light grey */
}

#div_menu ul ul a:hover {
	color: black;
}

#div_menu li {
	position: relative;
}

#div_menu ul ul {
	position: relative;
	float: left;
	z-index: 500;
	border: none;
	border-bottom: thin solid yellow;
}

#div_menu ul ul a {
	border-top: thin solid yellow;
	border-left: thin solid yellow;
	border-right: thin solid yellow;
}

#div_menu ul ul {
	display: none;
}

/* sfhover class qualifier used with suckerfish script 
   for MS IE6 */
#div_menu ul li:hover ul,
#div_menu ul li.sfhover ul {
	display: block;
}

#div_menu ul li {
	float: left;
	width: 100%;
}

#div_menu ul li a {
	height: 1%;
}

/*---------------------------------------------------------------*/
/* 2 column layout is structured with 3 DIV elements.
   div_main must contain 2 other DIV elements:
   	div_sidebar: left-hand column contains menu/links
   	div_content: main page content
   
   It has to be structured this way (with containing element)
   to stretch both columns to the same height.
   
   There is no perfect browser-agnostic way of defining 2
   columns of the same height.
   The "cleanest" method (least HTML markup, simplest CSS), 
   tried first, was the 'OneTrueLayout Equal Height Columns' method 
   (http://www.positioniseverything.net/articles/onetruelayout/equalheight),
   basically use overflow: hidden on container #div_main,
   and add margin-bottom: -8000px; padding-bottom: 8000px to
   column divs #div_sidebar and #div_content).
   However, this has a major bug with linking to anchors
   which is visible in all browsers except MSIE6
   (http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems)   
   Tried using 'Companion Column Method' (http://www.satzansatz.de/cssd/companions.html)
   but could not get this to work.
   CM 28/08/07 
   Commented out #div_main overflow: hidden, as extra-long scrollbars are less of a bug
   than disappearing content.
	CM 22/10/07
	Removed fix for 3-pixel text jog, as cure is worse than bug when browser is too narrow
*/

#div_main {
	position: absolute;
	top: 186px;
	left: 0px;
	margin: 0px;
	padding: 0px;
	width: 100%;
	/*overflow: hidden;*/ /* CM 28/08/07 see comment above */
	background-color: white;
}

#div_sidebar {
	position: relative;
	float: left;
	width: 160px;
	background-image: url(../images/sidebar-bg.gif);
	background-repeat: repeat-y;
	margin-top: 0px;
	padding-top: 20px;
	padding-right: 10px;
	margin-bottom: -8000px;
	padding-bottom: 8000px;
}

#div_sidebar ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

#div_sidebar a {
	display: block;
	width: 90%; /* allows mouse-over to work in entire column width */
	padding: 5px 10px;
	margin: 0px;
	border-width: 0px;
	text-align: left;
	text-decoration: none;
	color: black;
}

#div_sidebar a:hover {
	/* mouse-over: blue fading to grey image */
	background-image: url(../images/sidebar-link-hover-bg.gif);
	background-repeat: repeat-y;
}

/* alternative sidebar */
#div_sidebar-thin {
	position: relative;
	float: left;
	width: 160px;	
	background-image: url(../images/sidebar-thin-bg.gif);
	background-repeat: repeat-y;
	margin-top: 0px;
	padding-top: 0px;
	padding-right: 10px;
	margin-bottom: -8000px;
	padding-bottom: 8000px;
}

/* main content column */
#div_content {
	margin-left: 10px;
	margin-right: 50px;
	padding-left: 165px;
}

/*
  22/10/07
  This fix for the 3-pixel text-jog bug causes the content to drop down
  below the floating left column when the browser width is too narrow.
  This is worse than the 3-pxiel jog, so I'm commenting-out the fix to remove it
*/
* html #div_content {
	/* CSS hack - these rules are only visible to MSIE6 (using star-html hack) */
	/* This is to counteract the so-called 3-pixel text-jog bug in MSIE6 */
	/*padding-left: 0px;
	float: left;*/
}

#div_main .italicleft {
	text-align: left;
	color:  #C0C0C0; /* light grey */
	font-style: italic;
	font-weight: bold;
	font-family: "Arial Black";
	font-size: 12pt;
   border-width: 0px 0px thin 0px; /* underline */
   border-style: solid;
   border-color: #C0C0C0;
}

#div_main .italicright {
	text-align: right;
	color:  #C0C0C0; /* light grey */
	font-style: italic;
	font-weight: bold;
	font-family: "Arial Black";
	font-size: 12pt;
   border-width: 0px 0px thin 0px; /* underline */
   border-style: solid;
   border-color: #C0C0C0;
}

#div_content hr {
	border-color: #C0C0C0;
	border-width: 0px 0px thin 0px;
	border-style: solid;
}

.hidden {
	display: none;
}

/*---------------------------------------------------------------*/
/* extra rules for printing (esp required for Firefox) */
@media print {
	#div_header {
		width: 100%;
	}
	
	/* banner menu links not displayed */
	#div_header a {
		display: none;
	}
	
	/* sidebar links not displayed */
	#div_sidebar {
		display: none;
	}
	
	#div_sidebar-thin {
		display: none;
	}
	
	#div_content {
		margin-left: 0;
		margin-bottom: 10;		
		padding-left: 0;
		padding-bottom: 10;
	}
}