/* Guernsey Electricity Main Template Stylesheet */


/* ------------------- Body and Font Definitions ------------------------- */

html { margin: 0; padding: 0; }

body {
	margin: 0; 
	padding: 0; 
	width: 100%;
	font-size: 11px;
	font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
	color:#000000;  
}

a { text-decoration: none; }
a img {	border: 0;}			/* removes the border and normal link effects applied to an image */
p, h2, pre { margin: 0px; padding: 0; }		/* If vertical margin is applied here, browsers may vary. */

pre { 
	color: #564b47;
	font-size: 11px;
	background-color:transparent;
	font-family: Courier, Monaco, Monospace;
}

/* ---------------------- Column Layouts ---------------------------- */
	 
/*** Must enclose one of the two (or two of the three) if three - must include center col. ***/
.float-wrapper {float: left; width: 1%; } 

.leftmenu {
	float: left; 
	width: 186px; 
	border-right: 1px dashed #8B8B8B;
	border-bottom: 1px dashed #8B8B8B;
}

.content {
	margin-left: 187px;
	padding: 0;
}

/* To eliminate the "3-pixel text jog" in IE 
	- http://nemesis1.f2o.org/aarchive?id=11 */
	
/* hide from MacIE - only IE/Win can see \*/ 
* html .leftmenu { margin-right:0px; } 
* html .content { float:right; margin-left:0; } 
/* end hide */

/* not used for now */
.third-col { margin-left: 66%; }


/*  ---------------------- Banner Elements ---------------------------- */

#banner {
    text-align: right;
	height: 60px;
	padding: 0;
	margin:0;
}

.logo {	float: left; margin: 3px 0 0 5px; }

/* ----- Shortcut icons ----- */

#icons {
	position: absolute;				/* fixed position - no re-size */
	right: 1em;	
	margin: 9px 10px 0 0;
	width: 23%;
	height:30px;
}

#icons ul {
	vertical-align: top;
	list-style: none;				/* removes the bullets that normally mark each list item */
	display: block;
	margin: 0px 0px 40px 0px;
}
	
#icons ul li {
	padding-left: .01em;
	margin-right: .01em;
	vertical-align: middle;
	display: inline;				/* not supported in IE 5.0 */
}


/*  ---------------------- Main Navigation ---------------------------- */

/* Examples viewed& modified from:
	- http://www.alistapart.com/articles/taminglists/
	- http://builder.com.com/5100-6371-5153115.html
	- http://css.maxdesign.com.au/listamatic/horizontal13.htm
*/
#mainnav {
	height: 22px;					/* height of the navigation bar */
	background-color: #537798;
	margin: 0;						/* removes indent IE and Opera*/
	padding: 0 0 0 0;				/* removes indent Mozilla and NN7*/
	font-family: Arial, Helvetica, sans-serif;
	font-size:11px;
	text-transform: capitalize;
}

#mainnav ul	{
	list-style: none;				/* removes the bullets that normally mark each list item */
	padding: 0;						/* removes indent Mozilla and NN7*/
	margin: 0;						/* removes indent IE and Opera*/
	text-align: center;				/* Places button text in the centre */
	white-space: nowrap;			/* keeps the list on one horizontal line, even if the browser window is too narrow to display the whole line. */
	line-height: 16px;				/* deliberately less than navcontainer height so that it vertically aligns in the middle */
}

#mainnav li {
	display: block;					/* keeps it as a block level element and inline */
	float: left;					/* allows it to tollerate HTML elements next to it */					
	border-left: 1px solid #fff;	/* creates the white 'pipe' divider */
	border-right: 1px solid #003A71;	/* creates the bevel effect - blue 'pipe' divider */
	margin-top: 3px;				/* aligns button text ( inc. pipe) to be aligned in the middle */
}

#mainnav li a {
	display: block;					/* keeps it as a block level element and inline - allows clickable "button" area rather than just text */
	padding: 0;
	padding-left: 15px;				/* tells the whole "button" to be clickable (fixed pixel widths) */
	padding-right: 15px;			/* tells the whole "button" to be clickable (fixed pixel widths) */
	color: #fff;
	text-decoration: none;
}

#mainnav li.first {					/* seperate rule for the first item in the list (no left pipe) */
	border-left: none;
	border-right: 1px solid #003A71;
}

#mainnav li.last {         		    /* seperate rule for the last item in the list (pipe 1) */
   border-right: 1px solid #fff;
}

#mainnav li.last div {           	 /* seperate rule for the last item in the list (pipe 2) */
   border-right: 1px solid #003A71;
}

body>#mainnav li a { width: auto; }		/* for floated elements which don't have explicit width */

#mainnav li a:hover, #mainnav li#active a:hover {	/* Creates the hover over javascript effect on each "button" */
	color: #FFF;
	background-color: #859FB8;
}

/*  ---------------------- Left Menu Elements ---------------------------- */

/* ----- Online Service Buttons ----- */

.servicebuttons {				
	border-top: 1px solid #CCCCCC;
	background-color: #A1BAD3;
  	font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
}

.servicebuttons ul { margin: 0; padding: 0; }
.servicebuttons li { list-style: none; }
.servicebuttons ul li.first { margin-left: 9px; margin-bottom: 4px; padding-top: 4px }

/* ----- Header Bars ----- */

.leftmenu .headerbar {
	height: 21px;
	width: 186px;				
	background-image: url(../images/leftmenu_header.gif);
	background-repeat: no-repeat;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666666;
	line-height: 20px;
	text-indent: 15px;
}

/* ---------- Drop-Down Selection Box (Quick Links) ------------ */

/* Modified from following examples:
	- http://www.mako4css.com/cssforms.htm
	- http://www.outfront.net/tutorials_02/adv_tech/funkyforms5.htm
	- http://www.mako4css.com/cssforms.htm
*/

#drop-down {
	padding: 6px;
	padding-bottom: .7em;	
	font-size: 8px;
}

.drop-downform {
	padding: 0px;
	margin: 0px;
}

#drop-down select, option {
	font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
	padding: 0px;
	margin: 0px; 
	font-size: 10px;
	background-color: #FFFFFF;
	text-indent: 5px; 				/* distance away from left margin - drop-down items */
}

#drop-down .head {
	background-color: #34628D;
	font-weight: bold;
	font-size: 10px;
	color: white;
}

#drop-down .submit {
	padding: 1px;
	width: 23px;
	height: 20px; 
	margin-top: -1px;				/* perfectly aligns top of button with top of drop-down */
	background-color: #366496;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 8px;
	vertical-align:top;
	border: 1px single #ECECEC;		/* 'single' not seen in IE5 but used in firefox/IE6, etc */
}

/* ----- Navigation 'Buttons' ----- */

/* example modified from "A List Apart"
	- "http://www.alistapart.com/articles/taminglists/" 
*/

#button {					
	width: 186px;			
	padding: 0 0 0 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	line-height: 12px; 				/* for firefox's benefit so it stays a similar size to IE */
	background-color: #FFFFFF;
	color: #003A71;
	margin-bottom: 5px;			/* space between buttons and next header bar */
}

#button ul { margin: 0;	padding: 0; }
#button li { border-bottom: 1px solid #E2E2E2; }

#button li a {
	display: block;					/* display: block makes the entire width of the button clickable [IMPORTANT!] */
	padding: 5px 0px 3px 18px;		/* [top][right][bottom][left] */
	background-color: #FFFFFF;
	color: #003A71;
	text-decoration: none;
}

#button li a:hover {
	border-right: 6px solid #A1BAD3;
	background-color: #E4E9EE;
	color: #003A71;
}

/* ----- Compliancy ----- */

#compliant {				
	width: 186px;			
	padding: 0 0 0 0;				/* padding AFTER all the list elements [top][right][bottom][left] */
	background-color: #FFFFFF;
	margin: 10px 0 0 0;				/* sets space between header and first list item */
}

#compliant ul {
	margin: 0;
	border: 0;
	list-style: none;
}

#compliant li {
	text-align: center;				/* aligns centrally in IE */
	padding-bottom: 3px;
}

html>body #compliant li {			/* NOT seen by Opera 6 (and below) or by IE6/win */
	margin-left: -40px;				/* rule for the likes of firefox - compensates to align items centrally */
}


/*  ---------------------- Main Content Elements ---------------------------- */

#content-wrapper {				/* wraps content section only to limit width to 700px */
	max-width:700px;																/* invisible to IE */
	/*width:expression(document.body.clientWidth > 900? "700px": "auto" );*/		/* alternative for IE */
		/* This statement basically looks to see if the body is wider than 900 pixels,
		   if so, set the width to 700 pixels, otherwise just let it size itself (auto). 
		   - ian's float wrap hack ?? ;)  */
	float:left;		/* necessary to get it to float next to a float */
	margin:0 0 20px 8px;
}

html>body #content-wrapper {		/* NOT seen by Opera 6 (and below) or by IE6/win */
	margin-left: 18px;				/* rule for the likes of firefox - compensates to align items centrally */
}

#stockImage {
	padding: 0;
	margin: 0;
	height: 108px;
	/* change image here to change stock image - allows resizing */
	/*
	background-image:url(../images/turbines.jpg);		
	background-image:url(../images/flowerstation.png);		
	background-image:url(../images/stock_image.gif);
	background-image:url(../images/powertops.png);
	background-image:url(../images/seaspider.png);
	background-image:url(../images/bordeaux.png);		
	background-image:url(../images/daffodils.png);			
	background-image:url(../images/cows.png);			
	background-image:url(../images/cows2.png);			
	background-image:url(../images/firestation.png);			
	background-image:url(../images/town.png);			
	background-image:url(../images/town2.png);			
	background-image:url(../images/stpeterport.png);			
	background-image:url(../images/stpeterport2.png);			
	*/		
	background-image:url(../images/bordeaux.png);		
	background-repeat:no-repeat;
	border-top: 1px solid #CCCCCC;
}

/* ----- Crumb Bar ----- */

.crumb {
	height: 20px;
	background-image:url(../images/crumbBar.gif);
	background-repeat: repeat-x;
	font-size: 11px;
	color: #666666;
	line-height: 20px;
	text-transform: capitalize;
}

.crumb ul {
	margin-left: 0;
	padding-left: 0;
	display: inline;
	border: none;
} 

.crumb ul li {
	border: none;
	list-style: none;			/* remove default bullet points */
	display: inline;			/* not liked by IE5 but necessary to display the crumbs horizontally */
}

.crumb ul li.first {
	margin-left: 14px;			/* just to push the first item in from the edge a bit */
}

.crumb ul li a {
	color: #666666;
	text-decoration: none;		/* remove default hyperlink styles */
}

.crumb ul li a:hover {
	color: #A4BE2F;				/* green mouseover effect */
}


/* ----- News Ticker ----- */

.newsTicker {
	font-family: Verdana,Arial,Helvetica,sans-serif;
	width: 500px;				/* change here and in iframe to resize to either 500 or 700 pixels */
	padding: 10px 0 0 0;
}


/*  ---------------------- Footer Elements ---------------------------- */

#footcase { height: 49px; margin:0; clear: both; }

#nv { 
	float: left; 	
	width: 26px; 
	background-image:url(../images/footer_bg2.gif); 
	background-repeat:no-repeat; 
	height: 49px; 
	border-top: 1px dashed #6C6C6C; 
}

#footer {
	margin-left: 26px;
	height: 49px;
	font-size: 9px;
	text-transform: capitalize;
	color: #6C6C6C;
	background-image:url(../images/footer_bg2.gif);
	background-repeat:repeat-x;
	padding:3px 1px;
	margin:0;
	border-top: 1px dashed #6C6C6C;
}

/* To eliminate the "3-pixel text jog" in IE 
	- http://nemesis1.f2o.org/aarchive?id=11 */
	
/* hide from MacIE - only IE/Win can see \*/ 
* html #nv { margin-right:0px; } 
* html #footer { float:right; margin-left:0; } 
/* end hide */

#nv #icon { margin-left: 5px; vertical-align:middle; }
/*#nv #icon a:link span { display: none; }
#nv #icon a:visited span { display: none; }
#nv #icon a:hover span { display:block; }*/

.legal { float: right; margin-right: .8em; }
.copyright { float: left; }
.legal a { text-decoration: none; color: #666666; }
.legal a:hover { text-decoration: underline; color: #666666; }