/*
URL: http://dev.cpelectronics.co.uk
LAST MODIFIED: 14 Oct 07 
AUTHOR: John Oxton

==== CONTENTS 
	==YUI RESET
	==GENERAL SETTINGS
	==DIVS
		=layout divs
	==HEADINGS
	==PARAGRAPHS
	==IMAGES
	==BLOCKQUOTE & CITE
	==SPANS
	==LISTS
	==ANCHORS
	==TABLES
	==FORMS
	==b

*/

/* ==YUI RESET (see: http://developer.yahoo.com/yui/reset/)*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { 
	border:0;
}
/* ==GENERAL SETTINGS */
body{
	background:#b0b0b0;
	font:75%/1.7em Helvetica, Arial, sans-serif; /* precentages on fonts so that IE can resize them */
}
/* ==DIVS */
div.alignRight{
	text-align:right; /* see forms.php and the submit button for an example of how this can be used in conjuction with other classes */
}
/* =layout divs */
div#wrapper{
	margin:20px auto;
	width:990px;	
}
div#header{
	background:transparent url(../img/grass_banner.jpg) 245px 0 no-repeat;
	clear:left;
	float:left;
	overflow:hidden; /* fixes a wee glitch with Safari 2*/
	position:relative; /* this alows me to position the search box to the right without floating everything */
	width:100%;
}
div#fauxColumns{
	background:#fff url(../img/faux_column.png) 0 0 repeat-y;
	clear:left;
	color:#666;
	float:left;
	padding-bottom:20px; /* this gives a "margin" to the top of the siteInfo div whislt preserving the faux coulmn */
	width:990px; /* IE won't work without this */
}
div#mainContent{
	float:right; /* floating right instead of left solves a problem in IE and makes sense anyway because the content is on the right */
	width:745px;
}
div#mainNavigation{
	background:#999;
	border-color:#666 transparent #fff transparent;
	border-style:solid;
	border-width:1px 0;
	_display:inline; /* TODO fixes IE bug, add to IE style sheet */
	float:left; /* we need this because the acutal list within this div is floated too and it all goes a bit wrong if we don't */
	width:745px;
}
div#secondaryNavigation{
	background:#999;
	border-color:#666 transparent #fff transparent;
	border-style:solid;
	border-width:1px 0;
	border-top:1px solid #666;
	float:left; /* we need this because the acutal list within this div is floated too and it all goes a bit wrong if we don't */
	min-height:30px; /* to make the bar work if there is no navigation as per designs 30px relates to anchor line-heights for this. we use min height so the navigation is not cut off if a text resize happens but IE needs a fix because it doesn't support this and treats height as kind of like min-height anyway */
	_height:30px; /* TODO fix for IE, add to IE stylesheet */
	margin-bottom:16px;
	width:745px;
}
div#splash{
	margin:0 0 20px 20px; /* top margin of 20px is applied via secondaryNavigation due to floated elements "collapsing" the margin */
	width:725px;
}
div#pageContent{
	margin:0 20px;
	width:705px;
}
body.singleProduct div#designerWrap{ /* we need to add this simply to position the PDF on the bottom left as per the comps add border:1px solid red; to see how it works */
	clear:left;
	float:left;
	_height:100%; /*TODO an IE fix, put in IE stylesheet */
	position:relative;
}
div#col1{
	float:left;
	width:443px;
}
div#col1 h2{
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	margin-top: 25px;
}
div#col1 h5{
	font: 14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
body.singleProduct div#col1{
	padding-bottom:60px; /* this stops the text (if it gets really long) overflowing the PDF download button positioned bottom left */
}
body.singleProduct div#col1,
body.products div#col1{
	width:344px;
}






/* ----  to style space between text lines on downloads.php ---- */

body.index div#col1 p{
	margin-top: -6px;
}


body.literature div#col1{
	width: 600px;
	margin-bottom: 50px;
}



div#LinkPanels{
	width: 620px;
	margin-top: 10px;
	margin-right: 0;
}

div#LinkPanels p{
}

.LinkPanel{
	float:left;
	width: 220px;
	margin: 0 30px 0 0;
	border: 1px solid #ccc;
	padding-left: 20px;
}


.LinkPanel a{
	text-decoration: none;
	color: #333;
}

.LinkPanel a:hover{
	color: #cc3333;
}

.LinkPanel img{
	border-bottom: 1px solid #333;
	padding-bottom: 10px;
}

.LinkPanel h4{
}


.pdfDownloadLit{
	padding-left: 50px;
}

.pdfDownloadLit a{
	background: transparent url(../img/pdf.png) no-repeat 0 90%;
	color:#669c1f;
	display:block;
	font-weight:bold;
	padding: 15px 0 0 54px;
	height: 30px;
}




/* ----   LINK panels with Stockist Logos ---- */

body.stockists div#col1{
	/* width: 600px; */
	width: 720px;
}

body.stockists div#col1a{
	width: 355px;
	float: left;
	border-right: 1px solid silver;
}

body.stockists div#col1b{
	width: 330px;
	float: right;
	padding-left: 15px;
	padding-right: 10px;
	/* border-left: 1px solid silver; */
}

body.stockists .storeLinx{
	margin-bottom: 20px;
	text-align: center;
}



div#LinkPanelsStockists{
	/* width: 720px; */
	width: 355px;
	margin-left: 80px;
	margin-right: 0;
	float: left;
}

.LinkPanelLogo{
	float:left;
	width: 189px;
	margin: 0 30px 0 0;
	padding-left: 20px;
}







/* ----  individual GREEN-i Product Pages ---- */

.singleD{
	color: #339933;
}
.doubleD{
	color: #00cccc;
}
.singleDrem{
	color: #cccc33;
}
.doubleDrem{
	color: #c13e96;
}
.mSensSw{
	color: #645ca8;
}
.dtDelaySw{
	color: #d73d3e;
}





div#specPanels{
	width: 680px;
	margin-top: 30px;
	margin-right: 0;
}

.specPanel{
	float:left;
	width: 144px;
	height: 144px;
}

.specPanelText{
	float: left;
	width: 500px;
	padding-left: 20px;
}

.specPanelItems{
	float:left;
	width: 700px;
}


table.spec{
	margin: 25px 15px;
}

table.spec td{
	vertical-align: top;
	padding-left: 10px;
}

table.spec img{
	padding: 0 10px 3px 3px;
}






/* ----  col1 width energy_calculator.php ---- */
body.calculator div#col1{
	width: 700px;
}


table.elc-table{
	width: 100%;
	margin-bottom: 25px;
}

.td-title{
	
}

.tr-info{
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

.tr-info-average{
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	color: #669c1f;
	font-weight: bold;
}

.info-subtitle{
	color: #669c1f;
}



/* ----  col1 width easy_reference_guide.php ---- */
body.efg div#col1{
	width: 700px;
}


table.erg-table{

}

table.erg-table h4{
	margin: 1px 0 -10px;
	font-weight: bold;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #669c1f;
}


table.erg-table p{
	margin: 0;
}


table.erg-table td{
	border: 1px solid #ccc;
	padding: 4px 5px 0px;
}


.subTitleTd{
	font-weight: bold;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #669c1f;
	padding-bottom: 3px;
}


.sdmsTd{
	background-color: #339933;
	color: #fff;
	text-align: center;
	padding: 4px;
	width: 50px;
}
.ddmsTd{
	background-color: #00cccc;
	color: #fff;
	text-align: center;
	width: 50px;
}
.sdrcTd{
	background-color: #cccc33;
	color: #fff;
	text-align: center;
		width: 50px;
}
.ddrcTd{
	background-color: #c13e96;
	color: #fff;
	text-align: center;
		width: 50px;
}
.mssTd{
	background-color: #645ca8;
	color: #fff;
	text-align: center;
		width: 50px;
}
.tdsTd{
	background-color: #d73d3e;
	color: #fff;
	text-align: center;
		width: 50px;
}







div#col2{
	float:right;
	width:222px;
}
body.singleProduct div#col2,
body.products div#col2{
	width:342px;
}

div#col3{
	clear:both; 
	float:left; /*float and clear to make it play nicely with the columns above */
	margin:10px 0;
	width:100%;
}
div#secondaryContent{
	background:#ccc; /* it would have been easier to apply now background here and have the faux_column deal with the border detail that runs up the entire page but had we done this and a user arrived at the site with images off all the white headings that may be present would be invisible so we had to go with this method */
	border-right:1px solid #fff;
	float:left;
	padding-top:60px; /* this simply pushes the content below the absolutley positioned .treeview the figure is based on the line-height:30px give to each list item in .treeview */
	width:244px;
}
div#newsHeadlines{
	margin:2.3em 20px; /* I have specified top margin to match the line height of the h1 in the main content in an (probably futile) attempt to line them up. a left and right margin also to keep it in line with the design I have done this rather than a specific width because if, for some reason, we adjust the width of the parent #secondaryContent above then this will adjust automagically with it */
}




/* -----

addition for www.green-iswitches.co.uk -----
JW 16Dec08  --------------------------------

*/

div#greeniProductNav{
	text-align: center;
	margin: -45px 20px 2.3em 30px;
}

div#greeniProductNav h2{
	color: #669c1f;
	margin-left: -13px;
	margin-bottom: 13px;
	font: 17px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

div#singleDimmer{
	width: 160px;
	margin-left: 10px;
}
div#singleDimmer h2{
	height: 55px;
	font-size: 13px;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	margin: 0;
	background: url(../img/green-tab-160x45.jpg) no-repeat;
	padding: 4px 2px 2px;
}
div#singleDimmer h2 a{
	display: block;
}


div#doubleDimmer{
	width: 160px;
	margin-left: 10px;
	margin-top: -10px;
}
div#doubleDimmer h2{
	height: 55px;
	font-size: 13px;
	padding: 4px 2px 2px;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	margin: 0;
	background: url(../img/blue-tab-160x45.jpg) no-repeat;
}
div#doubleDimmer h2 a{
	display: block;
}




div#singleRemoteDimmer{
	width: 160px;
	margin-left: 10px;
	margin-top: -10px;
}
div#singleRemoteDimmer h2{
	height: 55px;
	font-size: 13px;
	padding: 4px 2px 2px;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	margin: 0;
	background: url(../img/yellow-tab-160x45.jpg) no-repeat;
}
div#singleRemoteDimmer a{
	display: block;
}




div#doubleRemoteDimmer{
	width: 160px;
	margin-left: 10px;
	margin-top: -10px;
}
div#doubleRemoteDimmer h2{
	height: 55px;
	font-size: 13px;
	padding: 4px 2px 2px;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	margin: 0;
	background: url(../img/pink-tab-160x45.jpg) no-repeat;
}
div#doubleRemoteDimmer a{
	display: block;
}



div#movementSensor{
	width: 160px;
	margin-left: 10px;
	margin-top: -10px;
}
div#movementSensor h2{
	height: 55px;
	font-size: 13px;
	padding: 4px 2px 2px;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	margin: 0;
	background: url(../img/purple-tab-160x45.jpg) no-repeat;
}
div#movementSensor a{
	display: block;
}



div#timeDelay{
	width: 160px;
	margin-left: 10px;
	margin-top: -10px;
}
div#timeDelay h2{
	height: 55px;
	font-size: 13px;
	padding: 4px 2px 2px;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	margin: 0;
	background: url(../img/red-tab-160x45.jpg) no-repeat;
}
div#timeDelay a{
	display: block;
}



div#cpSiteLink{
	width: 160px;
	margin-left: 10px;
	border-top: 2px solid gray;
	padding-top: 20px;
}

div#cpSiteLink h2{
	height: 55px;
	font-size: 13px;
	padding: 4px 2px 2px;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	margin: 0;
	background: url(../img/cpgreen-tab-160x45.jpg) no-repeat;
}

div#cpSiteLink a{
	display: block;
}



div#issuuLink{
	width: 160px;
	margin-left: 10px;
	margin-top: -10px;
}

div#issuuLink h2{
	height: 55px;
	font-size: 13px;
	padding: 4px 2px 2px;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	margin: 0;
	background: url(../img/cpgreen-tab-160x45.jpg) no-repeat;
}

div#issuuLink a{
	display: block;
}



/* ------------------------------------------------------------- */







div#siteInfo{
	background:#b0b0b0;
	clear:left; /* this pushes this div down as the page expands */
	color:#fff;
	float:left;
	padding:10px 20px;
	position:relative; /* so we can position #siteMeta to the right easily */
	width:950px;
}
div#siteMeta{
	position:absolute;
	right:20px; /* note that this ignores the fact that there is padding on the right of the siteInfo div so we have to do 20px here too */
	text-align:right;
	top:10px; /* see note above */
	width:360px;
}

div.productSummary{
	background:#d1e1bb;
	float:left;
	margin:0 20px 10px 0;
	_margin-left:-3px; /* TODO IE FIX http://www.positioniseverything.net/explorer/dup-characters.html */
	width:161px;
	min-height:240px;
	_height:240px; /*TODO IE FIX */
}


div.evenFloat{
	margin-right:0; /* this is a multiple class trick and works with .productSummary above. Working on the principal that every second floated div will end up on the right hand side any right-hand margin will break the layout so we must remove it. Would could just have easily added margin-left here and left .productSummary with no right margin but as we are applying a margin bottom to the .productSummary anyway it seemed like the better choice */
}

div.contentSummary{
	background:transparent url(../img/content_summary_border.png) 0 0 repeat-y;
	margin-bottom:20px;
	margin-top: 15px;
}


div.alert{
	background:#eee;
	border:1px dashed #c00;
	color:#c00;
	padding:0.5em;
}

span.alert{ /* doesn't really belong here but it's close to it's brother which makes it happy */
	color:#c00;
	font-weight:bold;
}

/* ==HEADINGS */
h1,h2,h3,h4,h5,h6{
	font-family:"Trebuchet MS",Helvetica, Arial, sans-serif;
	font-weight:bold;
}
h1{
	color:#669c1f;
	font-size:165%;
	line-height:1.4em;
	margin:0 0 0.8em 0;
}
body.index h1{
	margin-bottom:0;
}
h2{
	font-size:135%;
	margin:0.7em 0 0.5em 0;
}
div#newsHeadlines h2{
	color:#fff;
	line-height:1.6em;
	margin-bottom:10px;
}
div.productSummary h2{ /* replicated to some extenet within ==ANCHORS for those headings with a link */
	background:#669c1f;
	border-bottom:1px solid #fff;
	color:#fff;
	font-size:100%;
	margin:0;
	padding:5px;
}

div.contentSummary h2{
	background:#669c1f url(../img/heading_back.png) 0 0 no-repeat;
	font-size:120%;
	margin:0;
	padding:0;
}

div.alert h2{
	margin:0.2em 0;
}

h3,h4,h5,h6{
	font-size:120%; /* TODO if these are required at different sizes we need to work out margins and font-sizes */
	margin:0.5em 0 0.5em 0;
}

h3{
	text-transform:capitalize;
}

div#newsHeadlines h3{
	margin:5px 0;
}

h3.colorBack{
	background:#b2cd8f;
	color:#fff;
	font-weight:normal;
	padding:2px 5px;
}
div.contentSummary h3{
	font-size:100%;
	margin:2px 0 0 0;
	padding:0 10px;
}
/* ==PARAGRAPHS */
div#pageContent p{
	margin:1.2em 0 1.2em 0;
}
div#branding p{
	width:245px;
}

div#newsHeadlines p,
div#caseStudies p{
	line-height:1.4em;
	margin-bottom:20px;
}

div#pageContent div.productSummary p{
	margin:0;
	/*margin-right:-20px;*/
	padding:2px 5px;
	line-height:1.2em;
	width:141px;
}

.searchResult div#pageContent div.productSummary{
	width:150px;
	overflow:hidden;
}
div#pageContent div.productSummary p.productThumb{
	margin:0;
	padding:0;
}

div#pageContent div.contentSummary p{
	margin:0;
	padding:0 10px;
}

div#pageContent div#newProducts p{
	background:transparent url(../img/new_products_back_greeni_2.png) 0 0 no-repeat;
	height:131px; /* this is ugly but we are not left with a lot of choice due to the design */
	line-height:1.4em;
	overflow:hidden;
	padding:7px 10px 0 10px;
}

div#pageContent div#newProducts .highlight{
	color: #669c1f;
	font: bold 15px "Trebuchet MS",Helvetica, Arial, sans-serif;
}

div#pageContent div#newProducts .moreLink{
	padding-top: 7px;
	background:url(../img/chevron_green_white_right.png) 100% 25px no-repeat;
	display: block;
}


div#pageContent div.contentSummary p.bannerImage{
	margin:0;
	padding:0;
}

p.highlightedParagrah{
	color:#669c1f;
	font-family:"Trebuchet MS",Helvetica, Arial, sans-serif;
	font-size:125%;
	/* margin-top: 0; */
	padding-top: 10px;
}

div#pageContent p.excerpt{
	margin:0;
}

div#pageContent p.readMore{
	margin:0 0 0.6em 0;
}

p.contentExcerpt{
	/* margin-bottom:1em !important; /*TODO why is this !important needed? */\
	margin-bottom:2px !important;
}
/* ==IMAGES */
div#pageContent div.productSummary p.productThumb img{
	border-bottom:1px solid #fff;
}

div.contentSummary img{
	border-color:#999;
	border-style:solid;
	border-width:1px 0;
	
}

/* ==BLOCKQUOTE & CITE */
blockquote{
	border-left:5px solid #669c1f;
	color:#333;
	margin-left:20px;
	padding:0 40px 0 20px;
}

blockquote cite{
	font-style:italic;
}

/* ==SPANS */
div#newsHeadlines h2 span,
div.contentSummary h2 span{
	font-weight:normal;
}
div#secondaryContent ul.treeview li span{
	font-weight:normal;
}
/* ==LISTS */
div#pageContent ul{
	list-style:square;
	margin:0 0 1.6em 20px;
	padding-left:5px;
}

div#pageContent ol{
	list-style:decimal;
	margin:0 0 1.6em 20px;
	padding-left:5px;
}

div#pageContent ul.address{
	list-style:none;
	margin-left:0;
	padding-left:0;
}

div#pageContent ul.address li{
	margin:0;
}

div#mainNavigation ul li,
div#secondaryNavigation ul li{
	display:inline; /* TODO: this fixes a problem with IE, move to IE stylesheet */
	font-size:115%;
}

ul.treeview{ /* this class is not camelCase because it is taken from the pre-made script */
	background:#669c1f;
	border-right:1px solid #fff;
	font-size:110%;
	font-weight:bold;
	position:absolute;
	top:100px; /* 100px moves this UL to just below the logo, we are using positioning because the designer wants the navigation to overlap content below not push it down -- see margin applied to #secondaryContent */
	width:244px;
	z-index:1000;
}

/* simple tree menu */
ul.treeview ul{
	list-style-type:none;
	margin:0;
	padding:0;
}

ul.treeview li{ /* style for <li> elements in general (excludes an <li> that contains sub lists) */
	border-color:#666 transparent #fff transparent;
	border-style:solid;
	border-width:1px 0; /* the border doesn't work exactly as the designs specify but this is the most practical soltuion I can find */
	text-transform:lowercase; /* personally I prefer to capitalise in the HTML and then transform with CSS if the designer demands it */
}
ul.treeview li.submenu ul{
	display:none;
	padding-bottom:5px;
}

ul.treeview li.submenu ul li{ /* style for lis of uls that are children of lis (submenu) */
	border:0 !important;
	text-transform:capitalize;
}


/* ==ANCHORS */
a:link,
a:visited{
	color:#fff;
	text-decoration:none;
}

a:hover{
	text-decoration:underline !important;
}

/* TODO not all anhcor hovers are in place */
div#pageContent a{
	color:#669c1f;
	font-weight:bold;
}
div#pageContent a:hover,
div#pageContent a:active{
	text-decoration:underline;
}


div#branding p a{
	background:transparent url(../img/logo.jpg) 50% 50% no-repeat;
	display:block;
	height:80px;
	overflow:hidden;
	text-decoration:none;
	text-indent:-999em;
	width:245px;
}

div#mainNavigation ul li.activeLink a,
div#secondaryNavigation ul li.activeLink a{
	color:#d7df22 !important;
}

div#mainNavigation ul li a{
	background:#999 url(../img/chevron_grey.png) 100% 52% no-repeat;
	display:block;
	float:left;
	line-height:30px;
	padding:0 12px 0 20px;
}

div#mainNavigation ul li a:hover,
div#secondaryNavigation ul li a:hover{
	text-decoration:none !important;
}

div#secondaryNavigation ul li a{
	display:block;
	float:left;
	line-height:30px;
	padding:0 12px 0 20px; /* note that this and mainNav li a above have shared declerations, if we were optimising this file we might bunch them together */
}

ul.treeview li a{
	background:#669c1f url(../img/chevron_green.png) 218px 50% no-repeat;
	display:block;
	_height:1px; /* TODO: this fixes a common problem with IE. move to IE style sheet */
	line-height:30px;
	padding:0 0 0 20px; /* 20px left keeps it in lined up with the grid */
}

ul.treeview li ul li a{ /* this is just another way of writing ul.treeview li.submenu ul li a but did it this way to show you the relationship between the two and the list style applied in ==LISTS */
	background:transparent; /* removes the chevron inherited from above */
	font-weight:normal;
	line-height:20px;
}


div#newsHeadlines h3 a{
	color:#669c1f;
}

div#newsHeadlines p a{
	background:transparent url(../img/white_chevron_grey.png) 100% 97% no-repeat; /* positioning done with percentages because we can't know the absolute height of the news item */
	color:#666;
	display:block;
}

div#newsHeadlines h3 a:hover,
div#newsHeadlines p a:hover{
	text-decoration:underline;
}



/* ----  PDF download links  ---------------------- */


body.singleProduct p.pdfDownload{
	bottom:0;
	position:absolute; /* this works because of div#designerWrap and it's relative position */
}

body.singleProduct p.pdfDownload a{
	background: transparent url(../img/pdf.png) no-repeat 0 100%; /* the 100% put's the image at the bottom and works in conjuction with the top padding of 48px, which is the height of the image */
	color:#669c1f;
	display:block; /* this gives a nice click area AND it makes sure IE plays along as a bonus */
	font-weight:bold;
	padding:48px 0 0 55px;
}



p.pdfDownloadSmall{
	padding-bottom: 12px;
}

p.pdfDownloadSmall a{
	background:transparent url(../img/pdf.gif) 0 90% no-repeat;
	color:#669c1f;
	display:block;
	font-weight:bold;
	padding: 0 0 0 27px;
}



p.viewOnline{
	padding-left: 50px;
}

p.viewOnline a{
	background: transparent url(../img/icons/view-online-icon-48.png) no-repeat 0 90%;
	color:#669c1f;
	display:block;
	font-weight:bold;
	padding: 15px 0 0 54px;
	height: 30px;

}





p.viewOnlineSmall{
	padding-bottom: 12px;
}

p.viewOnlineSmall a{
	background: transparent url(../img/icons/view-online-icon-30.gif) no-repeat 0 90%;
	color:#669c1f;
	display:block;
	font-weight:bold;
	padding: 0 0 0 34px;
	height: 30px;
}






/* ----  Firmware download links  ---------------------- */


p.fwareDownloadSmall{
	padding-bottom: 12px;
}

p.fwareDownloadSmall a{
	background: transparent url(../img/floppy_icon.png) no-repeat 0 90%;
	color:#669c1f;
	display:block;
	font-weight:bold;
	padding: 0 0 0 29px;
}




div#col1 h3{
	margin-bottom: -10px;
}



div#pageContent div.productSummary a{
	color:#666;
	display:block;
	font-weight:normal;
	text-decoration:none;
}

div#pageContent div.productSummary h2 a{
	background:transparent url(../img/chevron_green_right.png) 100% 50% no-repeat;
	color:#fff;
	font-weight:bold;
}
div#pageContent div.contentSummary a{
	font-weight:normal;
	text-decoration:none;
}
div#pageContent div.contentSummary h2 a{
	color:#fff;
	display:block;
	font-weight:bold;
	line-height:30px;
	padding:0 10px;
}

div#pageContent div.contentSummary h3 a{
	color:#669c1f;
}

div#pageContent div.contentSummary h3 a:hover{
	text-decoration:underline;
}

div#pageContent div.contentSummary p a{
	color:#666;
}

div#pageContent div.contentSummary p.contentExcerpt a{
	background:transparent url(../img/lightgreen_chevron_white.png) 100% 97% no-repeat; /* positioning done with percentages because we can't know the absolute height of the news item */
	display:block;
}

div#pageContent div.contentSummary p.contentExcerpt a:hover{
	text-decoration:underline;
}

/* ==TABLES */

table.dataTable{
	background:#d1e1bb;
	border-collapse:collapse;
}
div#col3 table.dataTable{
	width:705px;
}

table.absencePresenceData{
	width:90%;
}
table.dataTable thead tr th{
	background:#669c1f;
	color:#fff;
	font-weight:bold;
	padding:5px 10px 0 10px;
	text-align:center;
	text-transform:uppercase;
}

th#resistive,
th#inductive,
th#incandescent,
th#flourescent,
th#compactFlourescent{
	border:1px solid #fff;
}
table.dataTable thead tr th.alignLeft,
table.dataTable tbody tr td.alignLeft{
	text-align:left;
}

table.dataTable thead tr#secondaryHeadings th{
	font-size:10px;
	font-weight:normal;
	line-height:1.4em;
	padding:0 5px 5px 5px;
	text-align:center;
}

table.dataTable tbody th{
	border-top:1px solid #fff;
	font-weight:bold;
	padding:10px;
}
table.dataTable tbody tr{
	/* TODO border-top:1px solid #fff; is more elegant here so do we hack IE and move borders for tbody th and td to an ie file or just go with it as is? */
}

table.dataTable tbody td{
	border-top:1px solid #fff;
	padding:10px;
	text-align:center;
}
table.dataTable tbody td.productCode{
	text-align:left;
}
table.absencePresenceData tbody th{
		border:1px solid #fff;
		padding:3px 5px;
		text-align:right;
		vertical-align:top;
}

table.absencePresenceData tbody td{
	border:1px solid #fff;
	padding:3px 5px;
}

table.absencePresenceData tbody  td.fauxHeader{
	text-align:right;
}
td.tableBorder{
	border:1px solid #fff;
	border-bottom:0;
}

table.formPresentation td{
	padding:0.3em;
	text-align:right;
}
table.partners td{
	vertical-align:top;
}


/* ==FORMS */
form#searchForm{
	position:absolute;
	right:20px;
	top:35px;
	_width:160px; /* TODO fixes a positioning problem with IE */
}
form#searchForm fieldset legend{
	display:none;
}
form#searchForm label{
	position:absolute;
	left:-999px;
	top:-999px;
}



form#searchForm input{
	vertical-align:middle; /* fixes problem with input and submit button not lining up nicely */
	color:black;
}
form#searchForm input.textInput{
	background:#fff;
	border:1px solid #999;
	color:#666;
	font-size:100%;
	font-weight:bold;
	padding:2px;
	width:130px;
}


div#pageContent fieldset{ /* we are specific about styling the fieldset only for #pageContent so the search form doesn't pick up the styling too */
	background:#eee;
	border:1px solid #ccc;
	margin:0.8em 0 0 0;
	padding:10px;
	_padding-top:20px;
	_position:relative; /* TODO fixes IE bug, add to IE style sheet */
}

div#pageContent legend{
	color:#666;
	font-size:140%;
	font-weight:bold;
	_position:absolute;
	_top:-10px;
	_left:-5px;/* TODO fixes IE bug, add to IE style sheet */
}

div#pageContent label{
	font-weight:bold;
	margin:0.8em 0 0 0;
}

/* div#pageContent label.requiredField{
	color:#000; see input.requiredField below for usasge in conjuction with multiple fields but also note how we can use one class names with different HTML tags to do different things. Using this method is useful to make clear that there is a relationship */
}
div#pageContent label.inlineLabel{ /* this might seem a little odd to make an inline element display:block and then turn it back to inline again using a class. I usally do this is having display:block by default makes it easier to mark-up forms without adding tables and divs, so it depends on requirements really */
	display:inline;
}
div#pageContent div.formElement{ /* okay so it's a div but we keep it here because it is specifically for forms */
	margin:0.8em 0 0 0;
}

/* we use a class here rather than styling the input directly so as to avoid later problems with submit buttons etc. In more advanced browsers we could use attribute selectors in conjuction with the inputs type but alas IE! */
input.textInput{
	border:1px solid #ccc;
	color:#000;
	font-size:120%;
	padding:0.2em;
	width:230px;
}

div#pageContent input.buttonInput{ /* how much should we style form buttons? I suggest  very little or not at all and if you must have a styled button use type="image" */
	padding:3px;
}

div#pageContent textarea{ /* note that there are rows and cols attributes hardwired into the html, this is so that if CSS is disabled the textarea is still useable */
	border:1px solid #ccc;
	color:#000;
	font-family:helvetica, arial, sans-serif;
	font-size:130%;
	padding:5px;
	height:200px;
	width:70%;
}

/* ==b (we use b because it's a small meaningless tag that deserves all the horrible things we are going to do to it) */
b.csCorners{
	background:transparent url(../img/content_summary_corners.png) 0 0 no-repeat;
	display:block;
	height:20px;
}


/* ----  Energy Calculator links  ---------------------- */

.energyCalculator{
	background: transparent url(../images/energy_calculator.jpg) no-repeat 0 30%; /* the 30% aligns the image with the middle x-height of the text and works in conjuction with the top padding of 48px, which is the height of the image */
	padding: 10px 10px 10px 30px;
/*	padding:48px 0 0 55px;
	bottom:0;
	position:absolute; /* this works because of div#designerWrap and it's relative position */
	display:block; /* this gives a nice click area AND it makes sure IE plays along as a bonus */
}

.energyCalculator a{
	color:#669c1f;
	font-weight:bold;
	text-decoration:none;
}