/*
URL: http://dev.cpelectronics.co.uk
CREATED: 14 Oct 07 
AUTHOR: John Oxton
LAST MODIFIED: 8 Dec 2009 
AUTHOR: Jason Sinfield


==== 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,strong,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;
	/* margin-bottom: 20px; */
	margin-left: auto;
	margin-right: auto;
}



div#header{
	/* background:transparent url(../img/grass_banner.jpg) 245px 0 no-repeat; */
	background:transparent url(../img/header-green-bg-esc.png) 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_column2.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:#e2e2e2;
	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:#e2e2e2;
	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;
	/* hack to fix issue caused by having to apply absolute positioning to elements within secondary content */
	min-height:800px;
	_height:800px;
}
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;
}

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;
}
/* adds spacing after paragraphs but only category, products and new products pages with the 'products' class assigned in php */
body.products div#col1 p{
	margin-bottom:6px; /* amend to 2px when working correctly*/
}




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

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




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:#c5c5c5; /* 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#colImage{
	/* in Firefox if the user zoomed out (complaint by client so daft as it is) then the image of the girl at the top of the LH column was forced down to the very bottom of the page - pushing content below with it. This is to fix that bug */
	position: absolute;
	top: 144px;
}
div#newsHeadlines{
	margin:2.0em 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 */
	
/* in Firefox if the user zoomed out (complaint by client so daft as it is) then the image of the girl at the top of the LH column was forced down to the very bottom of the page - pushing content below with it. This is to fix that bug */
	position: absolute;
	top: 510px;
/* which then introduces the need for a width to be specified */
	width: 204px;
	
}
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:#fff;
	/* background:#fff; */
	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; */ /* min-height is needed to retain layout on category pages */
	min-height:203px; /* min-height is needed to retain layout on category pages */
	/* _height:240px; /*TODO IE FIX */
}

.productSummaryText{
	/* min-height:48px; */
}



/* ----  PRODUCT BREADCRUMBS - in place of Secondary Navigation  ----  */

div#productBreadcrumbs{
	background:#e2e2e2;
	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#productBreadcrumbs ul{
	padding-left: 15px;
}

div#productBreadcrumbs ul li{
	display:inline; /* TODO: this fixes a problem with IE, move to IE stylesheet */
	font-size:95%;
	font-weight:normal;
}

div#productBreadcrumbs ul li a{
	color:#525252;
	display:block;
	float:left;
	line-height:30px;
	padding: 0 5px;
}

div#productBreadcrumbs ul li.activeLink a{
	color:#669c1f !important;
}

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

div#productBreadcrumbs ul li.active a{
	/*color:#d7df22 !important;*/
	color:#669c1f !important;
}

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


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

/* URL links on literature page */

div#urlLink{
	margin-left:60px;
	margin-top: -12px;
}

div#urlLink img{
	margin-right: 8px;
}

/* CATALOGUE link panel (above 'News headline') ------------------------- */

div#cataloguePanel{
	/* width: 244px; */
	width: 224px;
	height: 161px;
	padding-left: 10px;
	padding-top: 10px;
		/* in Firefox if the user zoomed out (complaint by client so daft as it is) then the image of the girl at the top of the LH column was forced down to the very bottom of the page - pushing content below with it. This is to fix that bug */
	position: absolute;
	top: 375px;
}
div#cataloguePanel img{
	margin-top: -6px;
}

/* ----- Presence Detectors panels 
--------------- */

.pdPanel{
	float: left;
	width: 163px;
	min-height: 218px;
	margin-right: 8px;
	margin-bottom: 10px;
}
.pdPanelTop {
	float:left;
	width:163px;
	min-height:20px;
	background: url(../img/product_panel_top_blank.png) no-repeat 0 0;
}
.pdPanelTop h3{	
	padding-top: 6px;
	padding-left: 10px;
	padding-right: 15px;
	padding-bottom: 2px;
	color: #666;
	font-weight: bold;
	font-size: 95%;
	line-height: 120%;
	text-decoration: none;
}
div.pdPanelTop h3 a{
	color: #666 !important;
	text-decoration: none;
}
.productPanel {
	float:left;
	width:161px;
	height:138px;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
}
.pdPanelBase {
	float:left;
	width:163px;
	min-height:12px;
	background: url(../img/product_panel_bottom2.png) no-repeat bottom;
}
.pdPanelBase p{
	padding-top: 2px;
	padding-left: 10px;
	padding-right: 15px;
	padding-bottom: 2px;
	color:#666;
	font-weight: normal;
	font-size: 95%;
	line-height: 120%;
	text-decoration: none;
}
	






/* ==HEADINGS */
h1,h2,h3,h4,h5,h6{
	font-family: Helvetica, Arial, sans-serif;
/*	font-family:"Trebuchet MS",Helvetica, Arial, sans-serif; */
	font-weight:bold;
}
h1{
	color:#666;
/*	color:#669c1f; */
	font-size:165%;
	line-height:1.4em;
	margin:0 0 0.8em 0;
}
body.index h1{
	margin-bottom:0.5em;
}
h2{
	font-size:135%;
	margin:0.7em 0 0.3em 0;
}
div#newsHeadlines h2{
	color:#fff;
	line-height:1.6em;
	margin-bottom:10px;
}

/* old h2 styly with Green bg

div.productSummary h2{ /* replicated to some extent within ==ANCHORS for those headings with a link 
	background:#669c1f;
	/* border-bottom:1px solid #fff; *
	border-bottom:2px solid #fff;
	color:#fff;
	font-size:100%;
	margin:0;
	padding: 5px;
	}
*/

div.productSummary h2{ /* replicated to some extent within ==ANCHORS for those headings with a link */
	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 100px 0 0;
}


/*--Key Icons ---------------*/
div#keyIconWrapper{
	float: left;
	width: 343px;
	min-height: 50px;
}
div#keyIconWrapper p, div#keyIconWrapper2 p{
	font-weight: bold;
}
div#keyIconWrapper2{
	float: left;
	width: 343px;
	min-height: 50px;
}
.keyIconLighting{
	float:left;
	background: url(../images/key_back1.png) 0 0 no-repeat;
	width: 117px;
	height: 50px;
	padding: 10px 9px 0 41px;
	font-size: 95%;
	line-height:110%;
	margin-right: 4px;
}
.keyIconHeating{
	float:left;
	background: url(../images/key_back2.png) 0 0 no-repeat;
	width: 117px;
	height: 50px;
	padding: 10px 9px 0 41px;
	font-size: 95%;
	line-height:110%;
	margin-right: 4px;
}
.keyIconVentilation{
	float:left;
	background: url(../images/key_back3.png) 0 0 no-repeat;
	width: 117px;
	height: 50px;
	padding: 10px 9px 0 41px;
	font-size: 95%;
	line-height:110%;
	margin-right: 4px;
}
.keyIconLux{
	float:left;
	background: url(../images/key_back4.png) 0 0 no-repeat;
	width: 108px;
	height: 50px;
	padding: 10px 8px 0 51px;
	font-size: 95%;
	line-height:110%;
	margin-right: 4px;
}
.keyIconNoLux{
	float:left;
	background: url(../images/key_back5.png) 0 0 no-repeat;
	width: 108px;
	height: 50px;
	padding: 10px 8px 0 51px;
	font-size: 95%;
	line-height:110%;
	margin-right: 4px;
}
.keyIconDirectDim{
	float:left;
	background: url(../images/key_back6.png) 0 0 no-repeat;
	width: 114px;
	height: 50px;
	padding: 10px 2px 0 51px;
	font-size: 95%;
	line-height:110%;
	margin-right: 4px;
}

/*-- Icons within paragraphs ---------------*/

.basicIcon{
	float:left;
	background: transparent url(../img/basic_icon.png) 0 0 no-repeat;
	width: 44px;
	height: 40px;
	margin-right: 10px;
}
.prmIcon{
	float:left;
	background: transparent url(../img/prm_icon.png) 0 0 no-repeat;
	width: 44px;
	height: 40px;
	margin-right: 10px;
}
.noLuxIcon{
	float:left;
	background: transparent url(../img/nolux_icon.png) 0 0 no-repeat;
	width: 44px;
	height: 40px;
	margin-right: 10px;
}
.luxIcon{
	float:left;
	background: transparent url(../img/lux_icon.png) 0 0 no-repeat;
	width: 44px;
	height: 40px;
	margin-right: 10px;
}
.directDimIcon{
	float:left;
	background: transparent url(../img/direct_dim_icon.png) 0 0 no-repeat;
	width: 44px;
	height: 40px;
	margin-right: 10px;
}




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;*/
/*	background:#666;*/
	color:#666;
	font-weight: bold;
	padding:4px 5px 0 0;
}

div.contentSummary h3{
	font-size:100%;
	margin:2px 0 0 0;
	padding:0 10px;
}
/* ==PARAGRAPHS */
div#pageContent p{
	margin:0.6em 0 0.6em 0;
}
div#branding p{
	width:245px;
}

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

div#caseStudies h3{
	line-height: 1.2em;
	margin-bottom:2px;
}

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

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;
	background-color: white;
	width: 161px;
}

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

div#pageContent div#newProducts p{
	background:transparent url(../images/new_products_back_vitm.png) 0 0 no-repeat;
	height:110px; /* 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;
}
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? */
}

/* ==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:#a2a2a2;
	border-right:1px solid #fff;
	font-size:110%;
	font-weight:bold;
	position:absolute;
	/* top:100px; */
	top:80px; /* 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:#c2c2c2 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;
}

/*-- key feature panels within paragraphs ---------------*/

div#keyFeaturesDescription{
	float:left;
	width: 100%;
	margin: 1em 0 1.5em 0;
}

div#keyFeaturesDescription h3{
	background-color: #99B851;
	color: #fff;
	font-size: normal;
	border-top: #fff solid thin;
	line-height: 150%;
	list-style-type:none;
	padding: 0.3em 0 0.3em 0.3em;
	margin: -6px;
}

div#keyFeaturesDescription ul{
	padding: 0;
	margin: 0 !important;
}
div#keyFeaturesDescription ul li{
	background-color: #D8E4BE;
	color: #666;
	font-size: normal;
	border-top: #fff solid thin;
	line-height: 150%;
	list-style-type:none;
	padding: 0.3em 0 0.3em 0.3em;
	margin: -6px;
}

/**/




/* ==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{
	color:#669C1F!important;
}

div#secondaryNavigation ul li.activeLink a{
	color:#669C1F !important;
}

div#mainNavigation ul li a{
	background:#e2e2e2 url(../img/chevron_white.gif) 100% 52% no-repeat;
	color:#525252;
	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{
	color:#525252;
	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:#a2a2a2 url(../img/chevron_white.gif) 218px 50% no-repeat;
	/*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/chevron_white_right.gif) 100% 97% no-repeat; 
	/* positioning done with percentages because we can't know the absolute height of the news item */
	color:#525252;
	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/pdficon_large.gif) 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/pdficon_small.gif) 0 90% no-repeat;
	color:#669c1f;
	display:block;
	font-weight: normal !important;
	padding: 0 0 0 27px;
}

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

p.energyCalculator{
	padding-bottom: 0;
}

p.energyCalculator a{
	background:transparent url(../img/energy_calculator_tiny.png) 5px 0 no-repeat;
	color:#669c1f;
	display:block; 
	font-weight: normal !important;
	padding: 0 0 0 29px;
}

/* ----  Technology Guide link  ---------------------- */
p.technologyGuide{
/*	background:transparent url(../images/technology_guide_grn.png) 0 0 no-repeat; */
	padding-top: 20px;
	width: 342px;
	height: 85px;
}

/* ----  Detection Information Link  ---------------------- */

div#detectionInfo{
	clear:both;
	float:left;
	width:343px;
}

/* ----  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#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; */
	background: transparent url(../img/chevron_green_right.png) no-repeat 142px 50%;
	color:#fff;
	font-weight:bold;
	padding-right:10px;
}

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:#e2e2e2;
	border-collapse:collapse;
}
div#col3 table.dataTable{
	width:705px;
}

table.detectorType{
	width:705px;
	padding: 0;
}


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

th.productCode,
th.productDesc,
th.codeBlank,
th.descBlank,
th.loadRating{
	border-right: 1px solid #fff;
}

th.borderRight{
	border-right: 1px solid #fff;
	text-align:left;
}

th.resistive,
th.inductive,
th.incandescent,
th.flourescent,
th.compactFlourescent{
	border:1px solid #fff;
}

th.borderAllRound{
	border:1px solid #fff;
	text-align: center;
}

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:4px 5px 5px 3px;
	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{
	color: #525252;
	border-top:1px solid #fff;
	padding:10px;
	text-align:center;
	line-height: 120%;
}
table.detectorType tbody td{
	border-bottom:1px solid #fff;
	text-align:center;
	line-height: 120%;
}
table.dataTable tbody td.productCode{
	text-align:left;
	border-right:1px solid #fff;
}
table.dataTable td.tableDarkHeader{
	background-color:#a2a2a2;
	color:#FFF;
	font-weight:bold;
	text-align:left; 
	padding: 8px 0 4px 8px;
	border-bottom:1px solid #fff;
}
table.detectorType td.tableDarkHeader{
	background-color:#a2a2a2;
	color: #FFF;
	height: 18px;
	font-weight: bold;
	text-align: left; 
	padding: 8px 0 0 8px;
	border-bottom:1px solid #fff;
}

table.detectorType tbody td.tableDarkHeaderBasic{
	background: #a2a2a2 url(../img/basic_icon.png) 17px 4px no-repeat;
	color: #FFF;
	height: 34px;
	font-weight: bold;
	text-align: left; 
	padding: 8px 0 0 75px;
}

table.detectorType tbody td.tableDarkHeaderPRM{
	background: #a2a2a2 url(../img/prm_icon.png) 17px 4px no-repeat;
	color: #FFF;
	height:34px;
	font-weight:bold;
	text-align:left; 
	padding: 8px 0 0 75px;
}

table.detectorType tbody td.tableDarkHeaderDirectdim{
	background: #a2a2a2 url(../img/direct_dim_icon.png) 17px 2px no-repeat;
	color: #FFF;
	height:36px;
	font-weight:bold;
	text-align:left; 
	padding: 12px 0 0 75px;
}

table.detectorType tbody td.tableDarkHeaderNoLux{
	background: #a2a2a2 url(../img/nolux_icon.png) 17px 4px no-repeat;
	color: #FFF;
	height: 34px;
	font-weight: bold;
	text-align: left; 
	padding: 8px 0 0 75px;
}

table.detectorType tbody td.tableDarkHeaderLux{
	background: #a2a2a2 url(../img/lux_icon.png) 17px 4px no-repeat;
	color: #FFF;
	height: 36px;
	font-weight: bold;
	text-align: left; 
	padding: 8px 0 0 75px;
}

table.detectorType tbody td.tableHeaderNoLux{
	background: #f0f0f0 url(../img/nolux_icon.png) 17px 4px no-repeat;
	width: 50px;
}

table.detectorType tbody td.tableHeaderLux{
	background: #f0f0f0 url(../img/lux_icon.png) 17px 4px no-repeat;
	width:50px;
}

table.detectorType tbody td.tableHeaderBlank{
	background: #f0f0f0;
	width:50px;
}

table.detectorType tbody td.tableHeaderIconBlank{
	background-color: #f0f0f0;
	width: 50px;
}

table.detectorType tbody td.tableHeaderDescription{
	background-color: #f0f0f0;
	vertical-align: top;
	margin-right: 20px;
	text-align: left;
	width: 210px;
}

table.detectorType tbody td.tableHeaderKeyFeatures{
	background-color: #f0f0f0;
	vertical-align: top;
	text-align:left;
	width: 405px;
	height: auto;
	margin: 4px 4px 4px 0px;
}

table.detectorType tbody td.tableHeaderKeyFeatures div.keyFeatures{
	float:left;
	padding:0;
	margin:0;
	vertical-align: top;
	text-align:left;
	width: 390px;
}

table.detectorType tbody td.tableHeaderKeyFeatures ul li{
	background-color: #D8E4BE;
	color: #666;
	font-size: normal;
	text-align:left;
	border-top: #fff solid thin;
	line-height: 150%;
	list-style-type:none;
	list-style-position:outside;
	padding: 0.3em 0 0.3em 0.8em;
	margin: -6px;
}

table.detectorType tbody td.tableHeaderKeyFeatures li.keyFeaturesHeader{
	background-color: #99B851;
	color: #fff;
	font-size: normal;
	text-align:left;
	border-top: #fff solid thin;
	padding: 0.3em 0 0.3em 0.3em;
	margin: -6px;
}

table.dataTable td.loadRatingLegend{
	background-color: #a2a2a2;
	color: #FFF;
	height:10px;
	text-align: center; 
}

table.datatTable tbody td.productIconBasic{
	background: transparent url(../img/basic_icon.png) 0 0 no-repeat;
	border-top: 1px solid #fff;
}
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 stlying 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:#ccc;
	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;
}