/* Home Solar Power CSS file
Created 16-06-2008
White Ht Web Design - http://www.white-hat-web-design.co.uk/ */

/* Base typography styles begin ---------------------------------------- */
a:hover
{
	color: #00F;
	text-decoration: underline;
}

a
{
	color: #006;
	text-decoration: none;
	text-transform:capitalize;
}

b, strong
{
	font-weight: bold;
	text-decoration: none;
}

body, td
{
	font-family: Verdana, Tahoma, Geneva, Helvetica, Arial, Trebuchet, Sans-Serif;
	font-size: 12px;
	font-weight: normal;
	color: #222;
	text-decoration: none;
	margin: 0px;
	text-align:center;
}

img /* turn off borders around images just to be safe */
{
	border: 0px;
}

div, p, th, li, dd, dl, dt, h1, h2, h3, h4, h5, h6 /* redundant selectors to help NS4 not forget */
{
	font-family: Verdana, Tahoma, Geneva, Helvetica, Arial, Trebuchet, Sans-Serif;
}


input, select, textarea /* fix form styles to use suitable fonts etc*/
{
	font-family: Verdana, Tahoma, Geneva, Helvetica, Arial, Trebuchet, Sans-Serif;
	font-size: 11px;
}
/* Base typography styles end ---------------------------------------- */
/* Clearfix hack begin ----------------------------------------------*/
.clearfix:after 
{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

.clearfix 
{
	display: inline-table;
}

/* Hides from IE-mac \*/
* html .clearfix
{
	height:1%;
}

*+html .clearfix 
{
	height:1%;
}
.clearfix
{
	display:block;
}

/* Clearfix hack end --------------------------------------------------*/

#container /* the main container for the site, defines the width etc */
{
	width: 760px;
	margin-left:auto;
	margin-right:auto;
	margin-top:0px;
	margin-bottom:auto;
	float:none;
	clear:both;
	text-align:left;
	/*background-color:#00FF00;*/
	
}

#logo-banner
{
	width:760px;
	height:80px;
	/*background-color:#996600;*/
	float:left;
	clear:both;
}

#left
{
	width:565px;
	/*background-color:#FF00FF;*/
	float:left;
	clear:left;
	display:inline;
	margin:0px;
	padding:0px;
}

#left h1
{
	color:#FF9900;
	text-transform:capitalize;
	font-size:200%;
	margin:20px 0px 10px 10px;
	padding:0px;
	float:left;
	clear:both;
	width:526px;
}

#left p
{
	float:left;
	clear:both;
	width:526px;
	margin:0px 0px 10px 15px;
	line-height:150%;
	padding:0px;
}

#right /* styles for the right column container */
{
	width:186px;
	/*background-color:#0033FF; */
	float:right;
	clear:none;
	display:inline;
	margin:0px;
	padding:0px;
}

#right-nav /* styles for the right navigation container */
{
	border: 1px solid #CCC;
	margin: 4px 0px 4px 0px;
	padding: 20px 0px 20px 0px;
	clear:both;	
}

#right ul /*styles for the right navigation */
{
	clear:both;
	text-align:right;
	list-style:none;
	margin:0px 0px 0px 0px;
	padding:0px;
}

#right li /*styles for the right navigation */
{
	line-height:200%;
	margin-right:15px;
	background-image:url(../images/right_nav_bullet.gif);
	background-position:right;
	background-repeat:no-repeat;
}

#right a
{
	color:#000;
	margin-right:13px;
}

#right h4/* style for the headers in the right hand column */
{
	height:33px;
	width:186px;
	background-image:url(../images/right_nav_header_bg.jpg);
	float:left;
	clear:both;
	color:#FFF;
	font-weight:bold;
	text-transform:capitalize;
	font-size:130%;
	text-align:center;
	padding:12px 0px 0px 0px;
	margin:0px 0px 4px 0px;
}

.thumb /* style for the square thumbnails in the left column */
{
	margin: 0px;
	padding:0px;
	float:left;
	clear:none;
}

.thumb-middle /* special style for the center thumbnail in the left column which has different margins */
{
	margin:0px 10px 0px 10px;
	padding:0px;
	float:left;
	clear:none;
}

.right-thumb /* style for the thumbnail in the right column */
{
	float:left;
	clear:both;
	border: 1px solid #CCC;
	margin: 0px 0px 4px 0px;
}

#top-nav-container/* container for the top navigation panel */
{
	margin:0px;
	padding-left:10px;
	padding-right:10px;
	width:760px;
	height:42px;
	background-image:url(../images/top_nav_background.jpg);
	background-repeat:no-repeat;
	text-align:center;
}

#top-nav-container ul /* the styles for the top level unordered list. strip padding and margin to fix firefox problem */
{
	padding:0px;
	margin:0px;
	list-style:none;
}

#top-nav-container li
{
	margin:8px 0px 0px 0px;
	display:inline;
	border-left: 1px solid #514f4f;
	border-right: 1px solid #e3e3e3;
	width:147px;
	height:20px;
	float:left;
	clear:none;
	padding-top:3px;
}

#top-nav-container a /* styles for the links in the top navigation panel */
{
	color:#FFF;
	font-size:120%;
	margin:0px;
	padding:0px;
}

#banner /*style for the main page banner */
{
	width:760px;
	height:140px;
	background-image:url(../images/banner.jpg);
	background-repeat:no-repeat;
	display:block;
	float:left;
	clear:both;
	padding:0px;
	margin:0px 0px 0px 0px;
}

#banner p/* the styles for the strapline in the top banner */
{
	padding:0px;
	margin:0px;
	font-weight:normal;
	font-size:200%;
	color:#FFF;
	position:relative;
	left:395px;
	top:37px;
	text-transform:capitalize;
	width:350px;
	line-height:35px;
}

.grey-rule /* the styles for the grey horizontal rule */
{
	padding:0px;
	float:left;
	clear:both;
	height:8px;
	width:100%;
	background-color:#ccc;
	margin:4px 0px 4px 0px;
	display:block;
	}

#top-nav-container ul li.nav-first
/* different border for the first item in the list */
{
	border-left: none;
}

#top-nav-container ul li.nav-last
/* different border for the last item in the list */
{
	border-right: none;
}

#logo /* the styles for the main logo on the page*/
{
	margin: 31px 0px 0px 36px;
	float:left;
	cear:right;
}

#logotext
{
	margin:24px 0px 0px 5px;
	padding:0px;
	display:block;
	color:#666;
	font-size:230%;
	text-transform:uppercase;
	float:left;
	clear:right;
}

#tagline
{
	position:relative;
	left:81px;
	top:-12px;
	padding:0px;
	margin:0px;
	display:inline;
	float:left;
	clear:both;
	font-size:110%;
	color:#666;
}

.orange /* class for making text orange */
{
	color:#FF9900;
}

.embolden /*style for making things bold */
{
	font-weight:bold;
}

.grey-border /*atyle for putting a single pixel gey border around things */
{
	border: 1px solid #ccc;
	width:563px;
	float:left;
	clear:both;
	padding:0px 0px 20px 0px;
	margin:0px;
	display:block;
}

#footer
{
	margin:4px 0px 10px 0px;
	padding:13px 0px 0px 0px;
	width:760px;
	height:42px;
	background-image:url(../images/top_nav_background.jpg);
	background-repeat:no-repeat;
	text-align:center;
	clear:both;
	color:#FFF;
}

#footer a
{
	color:#FFF;
	padding:0px;
	margin:0px;
}

