/* UKOGL 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
	
	19/10/07 BS - Stolen and adapted from Lynx Website for UKOGL Website
*/

body {
	margin: 0px;
	font: 9pt Arial, Helvetica, sans-serif;
	color: black;
	background: white;
	background-image: url(../images/rep.png);
	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;
	text-align: center;
}

H2 {
	font: bold 9pt Arial, Helvetica, sans-serif;
	color: black;
	text-decoration: underline;
}
H4 {
	text-decoration: underline;
}

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

.attn { /* maybe need to make text smaller */
	font: 12pt Arial, Helvetica, sans-serif;
	color: #FF3333; /* teal */
	text-align: center;
	
}

.legalstuff { 
	font: bold 9pt Arial, Helvetica, sans-serif;
	color: #000000; /* black */
	text-align: center;
}

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

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

.sitedesign a:hover {
	color: black;
}

/*---------------------------------------------------------------*/
/* UKOGL Banner */
/* #div_header {
	margin: px;
	padding: 0px;
	height: 85;
	width: 865px;
	background-color: #339999;
} */

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

#div_header img {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 113px;
	width: 800px;
}

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

#div_header a:hover {
	color: #339999;
}

#div_header a#contact {
	position: absolute;
	top: 10px;
	left: 550px;
	width: 120px;
	padding-right: 0px;
	margin-right: 0px;
	text-align: center;
	background-color: #666666; /* Medium Grey*/
	color: rgb(255,255,255); /* white */
}

#div_header a#contact:hover {
	color: #339999; /* Teal*/
}


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

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

#div_menu a {
	background-color: #666666; /* Teal rgb(51,153,153)*/
}

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

#div_menu li {
	position: relative;
}

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

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

#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: 10%;
}

/*---------------------------------------------------------------*/
/* 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_amin overflow: hidden, as extra-long scrollbars are less of a bug
   than disappearing content.
  
*/

#div_main {
	position: absolute;
	top: 150px;
	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: 10px;
	padding-top: 30px;
	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;

}

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

* 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_main .linktotop {
	text-align: right;
	color:  #666666; /* medium grey */
	font-style: italic;
	font-family: "Arial";
	font-size: 9pt;
}

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

#div_content a {
	color: #666666; /* medium grey */
}

#div_content a:hover {
	color: #339999;
}

#div_content table {
     font-family:arial;
     font-size:10pt;
     background-color:#FFFFFF;
     width:90%;
     border-style:solid;
     border-color:#339999;
     border-width:2px;
  }
  img.borderless {

  border-color:white;
}

#caption { font-size: 110%;
  font-family: Verdana, Arial, sans-serif;
  text-align: right;
  color: #FF3333;
  font-weight: bold;
  
  }
.major {   float: left;
  margin-right: 10em;
  border-color:white;}
  
#nav {
     font-family:arial;
     font-size:10pt;
     background-color:#FFFFFF;
     width:30%;
     border-color:#FFFFFF;
     border-width:2px;
	 text-align: center;
  }
                  
.thidden {
 overflow: hidden;
 background-color: #FFFFFF;
 font-size: small;
}
.hiddennote {
 border-width: 1px;
border-style: dashed;
 padding: 1px;
 color: #000000;
 background-color: #ffffff;
 font-size: 8pt;
}
.nameof {
 margin: 5px 2px 5px 2px;
 text-align: right;
 font-weight: bold;
 font-size: small;
}

/* Advanced CSS hover styles */
a.feature01 
{
	display: block;
	border: 1px solid #dfd0cb;
	border-width: 0 1px 1px 0;
	margin: 20px 20px 1em 20px;
	float: left;
	position: relative;
	text-decoration: none;
}
a.feature01:hover { border-color: #000; }
	a.feature01:hover .overlay01
	{
		position: relative;
		z-index: 3;
		width: 182px;
		height: 259px;
		border: 3px solid #fff;
	}
		a.feature02:hover .overlay01 { border-color: #ccc; }
		
		a.feature01 .overlay01 .caption01
		{
			position: relative;
			height: 30px;
			line-height: 30px;
			width: 100%;
			z-index: 3;
			text-indent: -9999em;
			color: #000;
			font-size: 11px;
			bottom: 0;
			overlay: hidden;
		}	
		
		
		a.feature01:hover .caption01
		{
			text-indent: 10px;
			background: rgb(255,255,255);
			background: rgba(255, 255, 255, 0.75); /* for browsers that know rgba */
		}
		a.feature02:hover .caption01 { top: 0; background: rgb(204,204,204); background: rgba(204, 204, 204, 0.75); }
		
			
		a.feature01 img { display: block; }
			




/*---------------------------------------------------------------*/
/* 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;
	}
}