/* Page layout classes */

/*
container
	header
	menu_wrapper	menu
	banner_wrapper	banner
	main_wrapper	main	  right
	divider
	box_wrapper		box_left  box_center  box_right
	footer_wrapper	footer
*/

body {
	background-color: #fff;
	margin: 0px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 80%;
	text-decoration: none;
}

div#container {
	padding: 0px;
}

div#header {
	background-image: url(graphics/header_graphic.gif);
	background-repeat: no-repeat;
	background-position: left top;
	height: 86px;
}

div#header_print {
	display: none;
}

div#menu, div#banner, div#main_wrapper, div#box_wrapper, div#footer_wrapper {
	width: 770px;
    margin-left: auto;
    margin-right: auto;
	display: block;
}

div#menu_wrapper {
	border-bottom: 2px solid #f00;
	background-color: #ffae00;
    /* height: 30px; */
}

div#menu {
	padding-top: 3px;
}

div#banner_wrapper {
    background-image: url(graphics/banner_background.gif);
	background-repeat: repeat-x;
	background-color: #ffdb11;
    height: 245px;
}

div#banner {
	padding-top: 10px;
}

div#breadcrumb {
	padding: 8px;
	background-color: #ffdd1a;
	color: #000;
	font-style: italic;
	font-size: 85%;
}

/* main content is 500px wide, right column 250px wide */

div#main_wrapper {
	padding-top: 10px;
}

div#emergency {
	float: left;
	width: 200px;
}

div#link_bar {
	float: left;
	width: 200px;
	margin: 20px 10px 20px 0px;
	padding: 6px 20px 20px 20px;
	background-color: #ebf5f6;
	font-size: 88%;
	line-height: 160%;
	text-align: left;
	color: #555;
}

div#main {
	float: right;
	width: 500px;
	margin: 0 0 20px 0;
	font-size: 90%;
	line-height: 180%;
	color: #333;
}

div#main_wide {
	width: 740px;
	margin: 0 0 100px 30px;
	font-size: 90%;
	line-height: 180%;
	color: #333;
}

div#headline_special {
    margin-top: -15px;
    margin-bottom: -20px;
    text-align: center;
    font-size: 150%;
    color: #f00;
    font-weight: lighter;
}

div#divider {
	clear: both;
	display: block;
	background-image: url(graphics/boxes_top_border.gif);
	background-repeat: repeat-x;
	height: 20px;
}

div#box_wrapper {
	padding-top: 10px;
	font-size: 88%;
	line-height: 160%;
	color: #666;
}

div#box_left, div#box_center, div#box_right {
	float: left;
	width: 200px;
	padding: 10px 18px 18px 18px;
	border: thin solid #cce;
	background-color: #f6f6f6;
}

div#box_left, div#box_center {
	margin-right: 25px;
}

div#footer_wrapper {
	clear: both;
	padding: 20px 20px 20px 20px;
}

div#footer {
	font-size: 78%;
	color: #666;
	text-align: center;
	line-height: 160%;
}

/* Element Styles */

/*
a.image {text-decoration: none;}
a, a:link, a:visited {color: #24B4D3; background-color: inherit;}
a:hover {text-decoration: underline; color: #069;}
a:active {text-decoration: underline;}
*/

/*
RECOMMENDED LINKING PROCEEDURE - http://dbaron.org/css/1999/09/links
:link, :visited { text-decoration: underline overline; }
:link:focus, :visited:focus { color: green; }
:link { color: red; }
:visited { color: yellow; }
:link:hover, :visited:hover { color: blue; }
:link:active, :visited:active { color: fuchsia; }
*/

a.image {text-decoration: none;}
:link, :visited {color: #4e6ddf; background-color: inherit;}
:link:hover, :visited:hover {color: #2ad8ff; text-decoration: underline;}
:link:active, :visited:active {text-decoration: underline;}

/* Breadcrumb links */
div#breadcrumb :link, div#breadcrumb :visited {width: auto; height: auto; margin: 0; font-style: italic; text-decoration: underline; color: #000; border: none; font-size: 90%; background-color: #ffdd1a;}
div#breadcrumb :link:hover, div#breadcrumb :visited:hover {color: #000bff;}

/* Menu links with roll-over effect */
div#menu a { display: inline-block; text-align: center; font: 14px Verdana, sans-serif; padding: 4px 0 2px 0; 
	margin:0 1px -2px 1px; width: 104px; background-color: #ffae00; color: #fff; text-decoration: none; }
div#menu a:hover {background-color: #ffdd1a; color: #000; }
div#menu a:active {background-color: #ff0;}

/* highlights the currently selected tab in the menu bar */
div#menu a.selected, div#menu a.selected:link, div#menu a.selected:visited {background-color: #ffdd1a; border-bottom: 2px solid #ffdd1a; color: #000; padding-bottom: -2px; }

#link_bar ul, #link_bar ol, #link_bar dl { list-style-image: url(http://www.solarguys.com.au/graphics/arrow.gif); line-height: 180%; }
#link_bar li { margin-left: -1.5em; margin-bottom: 0.5em; }

dt { margin-left: 1.2em; line-height: 150%; font-weight: bold; color: #555; }
dd { margin-bottom: 0.8em; }

ul.sunBullet { list-style-image: url(graphics/sun_bullet_colour.gif); line-height: 180%; }
td.mapBullet { width: 60px; }

div.quote {
	font-family: Times New Roman, serif;
	font-size: 120%;
	text-align: justify;
	margin: 10px 40px 10px 40px;
	color: #222222;
	display: block;
}

div#header img { float: right; }

img.left { margin-left: 1.2em; margin-bottom: 1.2em; margin-right: 1.2em; float: left; }
img.right { clear: left; float: right; margin: 1.2em; }
img.center { display: block; margin-left: auto; margin-right: auto; }
img.indent { margin-left: 43px; margin-top: 15px; border: 0px; }

div#main h1+h2 { margin-bottom: 25px; }
div#main table { margin-left: auto; margin-right: auto; margin-top: 4px; }
div#main table+h5 { margin-top:20px; }
div#main table.data { width: 500px; margin-top: 10px; margin-bottom: 30px; border: 1px solid #ccc; border-spacing: 0; border-collapse: collapse; }
div#main table.data thead { background-color: #fffea4; font-weight: bold; text-align: center; }
div#main table.data td { margin: 0; padding: 10px; border: 1px solid #ccc; }
div#main table.datasmall { width: 500px; margin-top: 10px; margin-bottom: 30px; border: 1px solid #ccc; border-spacing: 0; border-collapse: collapse; font-size: 90%; }
div#main table.datasmall thead { background-color: #fffea4; font-weight: bold; text-align: center; }
div#main table.datasmall td { margin: 0; padding: 10px; border: 1px solid #ccc; }
div#main p+ul, p+ol { margin-top: -10px; }
div#main li { padding: 2px; }

/* Class Styles */

h1, h2, h3, h4, link_bar_heading { font-family: "Lucida Sans", "Lucida Grande", Verdana, sans-serif; display: block; }
h1 { font-size: 250%; color: #ff7700; font-weight: lighter; }
h2 { font-size: 180%; color: #ff7700; font-weight: lighter; line-height: 150%; }
h3 { font-size: 140%; color: #444; margin-top: 16px; margin-bottom: 6px; }
h4 { font-size: 120%; color: #555; margin-top: 6px; margin-bottom: 4px; }
h5 { font-size: 110%; color: #444; margin-top: 4px; margin-bottom: 3px; }

form+h5 { margin-top: 45px;}

div.center { display: block; margin-left: auto; margin-right: auto; }
div.float {	float: left; }
div.float img { display: block; margin-left: auto; margin-right: auto; }
div.float p { text-align: center; margin-top: 10px; }
div.float+div.float { margin-left: 20px; }
div.float+p, div.float+h1, div.float+h2, div.float+h3 { clear: left; }

.link_bar_heading { font-size: 100%; text-transform: uppercase; text-align: left; color: #555; display:block; }

.boxHeading { font-size: 100%; text-transform: uppercase; text-align: left;	color: #555; }

div.formrow { clear: both; padding-top: 6px; }
div.formrow span.formlabel { float: left; width: 30%; text-align: right; }
div.formrow span.formlabelshort { float: left; width: 62px; text-align: right; }
div.formrow span.formlabelleft { float: left; width: 30%; text-align: right; }
div.formrow span.formlabelright { float: right; width: 30%; text-align: right; }
div.formrow span.formw { float: left; margin-left: 5px; text-align: left; }
div.formrow span.formwleft { float: left; width: 19%; text-align: left; }
div.formrow span.formwright { float: right; width: 19%; text-align: left; }
div.formrow+h5 { clear: both; margin-top: 15px; }
div.formrow input+input { margin-left: 20px; }
div.formrow textarea { width: 90%; height: 6em; }

form#frmSHW div.formrow { margin-bottom: 10px; }

div#profit { clear: both; margin: 40px 20px 10px 20px; display: none; margin-left: auto; margin-right: auto; }
div#profit h1, div#profit h2 { color: red; }
div#profit h2 { text-decoration: blink; }

.key_phrase { color: #338; font-size: 140%; font-style: italic; font-family: "Zapf Chancery", "Comic Sans MS", cursive, Times, serif; text-align: center; }
.serifText { font-family: Times, serif; font-size: 100%; color: #222; }
.serifBold { font-family: Times, serif; font-size: 1.1em; color: #222; font-weight: bold; }
.smallText { font-size: 80%; color: #222222; }
.boldText { font-weight: bold; }
.italicText { font-style: italic; }
.centerText { text-align: center; }
.justifyText { text-align: justify; }
.redText { color: red; }
.strikeText { text-decoration: line-through; }
.greyBorder { border: 1px solid #FFCC33; }

address { font-style: normal; }



/* ==== Lightbox ==== */

#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../graphics/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../graphics/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../graphics/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%	
	}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}