/*

==== 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/)*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, 
tfoot, thead, tr, th, td {
	border: 0;
	outline: 0;
}

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









/* 

-------  UPDATES OCT 2010 ----------------------
including NEW MAIN NAV - with MEGA MENU --------
  
*/


#header{
	width:990px;
	height: 135px;
	background: transparent url(../img/header-panel-bg-v.png) no-repeat;
	position: relative;
}

#branding p a{
	background: transparent url(../img/cp-logo.png) no-repeat;
	display:block;
	height:71px;
	overflow:hidden;
	text-decoration:none;
	text-indent:-999em;
	width:228px;
	position: relative;
	top: 18px;
	left: 24px;
}

body.home #splash{
	width: 990px;
	margin: 0;
	height: 290px;
	padding: 0;
}
#splash{
	margin:0 0 20px 20px; /* top margin of 20px is applied via secondaryNavigation due to floated elements "collapsing" the margin */
	width:725px;
}

#fauxColumns{
	background:#fff url(../img/faux_column2.png) 0 0 repeat-y;
	clear:left;
	color:#666;
	float:left;
	padding-top:20px;
	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 */
}

#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:0;
	width:244px;
}


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

div#cataloguePanel{
	width: 224px;
	height: 161px;
	padding-left: 10px;
	padding-top: 10px;
}

div#cataloguePanel img{
	margin-top: -6px;
}

div#newsHeadlines{
	margin: -10px 20px 2.0em;
	width: 204px;
}



/* -------- top corner nav + phone number ----------- */

#tcNav{
	float: right;
	position: relative;
	bottom: 55px;
	color: #fff;
	right: 20px;
}


#homeLink{
	width: 38px;
	height: 18px;
	float: left;
	padding-right: 10px;
}

#homeLink a{
	background: url(../img/home-icon.png) no-repeat;
	display:block;
	overflow:hidden;
	text-decoration:none;
	text-indent:-999em;
	margin: 0;
}

#phoneNumber{
	background: url(../img/phone-icon.png) no-repeat;
	padding-left: 25px;
	font-size: 14px;
	float: left;
}





/* ------------- SEARCH BOX ------- */

div#searchPanel{
}
form#searchForm{
	background: transparent url(../img/search-bg.png) no-repeat;
	/* width: 196px; */
	width: 199px;
	height: 25px;
	position:absolute;
	right: 12px;
	top:47px;
	padding-left: 4px;
}
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{
	border:none;
	color:#666;
	font-size:100%;
	padding:2px;
	/* width:153px; */
	width:148px;
}







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

#navigation{
	position: relative;
	top: 31px;
	color: #fff;
	height: 22px;
	width: 982px;
	padding-top: 7px;
	z-index: 100;
	padding-left: 8px;
}


/* ----  MEGA MENU --------- 
----------------------------*/

ul#topnav {
	z-index: 100;
	position: relative;
	padding: 0;
	width: 100%;
	list-style: none;
	color: #4C721A;
	margin: 0;
	height: 50% !important;
	float: left;
	bottom: 14px;
}
ul#topnav a{
	height: 50% !important;
}
ul#topnav a:hover{
	text-decoration: none !important;
}
ul#topnav li {
	float: left;
	margin: 0;
	/* padding: 0; */
	position: relative;
}
ul#topnav li a {
	/* text-indent: -9999px;  if using background images*/
	height: 44px;
	/* spacing between each menu item */
	padding-left: 29px; /* 26px if | used in li text */
	padding-right: 29px; /* 26px if | used in li text */
	color: #4C721A;
	padding-bottom: 0;
	font-size: 14px;
	line-height: 120%;
}
ul#topnav li:hover a, ul#topnav li a:hover {
	/* background-position: left bottom; */
	color: #fff;
	text-decoration: none;
}
ul#topnav li .sub, ul#topnav li .sub2 {
	position: absolute;
	top: 27px;
	left: 30px;
	/* background: url(../img/mega-bg.png) repeat-x; */
	background-color: #e8e8e8;
	padding: 5px 0 8px;
	float: left;
	display: none;
	border-left: 1px solid #999;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
}
/* -- for end of row items / to flip back in opposite direction -- (need to be specified in JS) -- */
ul#topnav li .sub2{
	/* left: -108px; */
	left: -118px;  /* adjusted for PC FireFox */
}

ul#topnav li .row {
	clear: both;
	float: left;
	width: 100%;
	margin-bottom: 10px;
}
ul#topnav li .sub ul, ul#topnav li .sub2 ul {
	list-style: none;
	margin: 0;
	padding: 0;
	/* width: 207px; */
	width: 228px; /* need additional width for PC FireFox */
	float: left;
}
ul#topnav li .sub2 ul {
	/* width: 211px; */
	width: 228px; /* need additional width for PC FireFox */
}


ul#topnav .sub ul li, ul#topnav .sub2 ul li {
	width: 100%;
	color: #999;
}
ul#topnav .sub ul li h2, ul#topnav .sub2 ul li h2 {
	padding: 7px 10px;
	margin: 0;
	font-size: 13px;
	font-weight: normal;
	color: #fff;
	background-color: #666;
	border-right: 1px solid white;
	bottom: 5px;
	position: relative;
}
.h2End{
	border-style: none !important; /* to remove white border from final RH column */
}
ul#topnav .sub ul li h2 a, ul#topnav .sub2 ul li h2 a {
	padding: 0 0 5px;
	background-image: none;
	color: #a6d3f2;
	font-size: 12px;
	font-weight: bold;
	line-height: 100%;
}
ul#topnav .sub ul li a, ul#topnav .sub2 ul li a {
	float: none;
	text-indent: 0; /*--Reset text indent--*/
	height: auto;
	/* background: url(../img/navlist_arrow.png) no-repeat 5px 12px; */
	padding: 7px 7px 7px 10px;
	display: block;
	text-decoration: none;
	color: #666;
	font-size: 12px;
}
ul#topnav .sub ul li a:hover, ul#topnav .sub2 ul li a:hover {
	color: #333;
	background-position: 5px 12px;
}


/* .topLevel{
	background: url(../img/down-arrow.png) no-repeat 100% 30%;
	padding-right: 12px !important;
} */






/* ------ NEWSLETTER sign-up panel ------- */

#newsLetterSignUp, body.requests #newsLetterSignUp{
	background: transparent url(../img/newsletter-bg.png) no-repeat 0 0;
	height:99px;
	/* line-height:1.4em; */
	overflow:hidden;
	padding: 0;
	margin-bottom: 18px;
}

body.requests #newsLetterSignUp{
	background: transparent none;
	/* height:110px; */
	height:195px;
}

.note{
	font-style: italic;
	font-size: 9px;
	color: #999;
	padding: 0;
	margin: 0;
	position: relative;
	bottom: 17px;
}

#newsLetterSignUp h2{
	font-size:14px !important;
	margin: 0;
	color: #fff;
	height: 21px;
	padding: 5px 5px 0 10px;
}
#newsLetterSignUp h2 span{
	font-weight: normal;
}
#newsLetterSignUp p{
	padding-left: 10px;
	margin: 0;
	padding-top: 3px;
	padding-bottom: 0;
}


#signUp{
	padding-left: 10px;
	position: relative;
	bottom: 10px;
}

form#signupForm input.signInput{
	color:#666;
	font-size:100%;
	padding:3px;
	width:160px;
	border: 1px solid #669c1f;
}

.signupGo{
	position: relative;
	top: 8px;
	padding-left: 5px;
}




/* --- BROCHURE REQUEST + STOCKIST LOCATOR + SUPPORT LOG IN - colorbox 'pop-up' pages ----- */

#container{
	width:430px;
	margin-left: auto;
	margin-right: auto;
	background-color: #fff;
}

#container2{
	width:430px;
	float:left;
	background-color: #fff;
	margin: 0;
}

#popForm{
	width: 410px;
	/* height: 360px; */
	height: 325px;
	border: 2px solid #4C721A;
	padding: 10px;
	margin: 0;
}


body.requests #popForm{
}



#popForm h2{
	background: url(../img/cpanel-bg.png) no-repeat;
	/* color: #fff;
	padding: 10px;
	margin-top: 0; */
	font-size:14px !important;
	margin: 0;
	color: #fff;
	padding: 7px 5px 6px 10px;
	height: 21px;
}


#popForm h2 span{
	font-weight: normal !important;
}


#popForm p{
	margin: 10px 0;
}


.continue{
	margin-top: 20px;
	/* border-top: 1px solid #4C721A; */
	padding: 20px 10px 20px 20px;
	text-align: right;
}

.continue a{
	background: url(../img/arrow-icon.png) no-repeat 100% 50%;
	color: #4C721A !important;
	font-weight: bold;
	padding: 6px 31px 6px 0;
}
.register a{
	color: #4C721A !important;
	font-weight: bold;
}

/* support log in form*/
body.supportLogin #popForm{
	width: 410px;
	height: 200px;
	border: 2px solid #4C721A;
	padding: 10px;
	margin: 0;
}
div#logIn{
	width:300px;
	position: relative;
	bottom: 10px;
}

form#logInForm input.loginInput{
	color:#666;
	font-size:100%;
	padding:3px;
	width:160px;
	border: 1px solid #669c1f;
	margin-bottom: 5px;
}

.loginGo{
	position: relative;
	top: 8px;
	padding-left: 5px;
}
table.loginTable td{
	width:80px;
}
.fields{
	margin-left: 10px;
	float:left;
	padding-top: 10px;
}
/* modal window - not used 
div#mask {
  	position:absolute;
  	left:0;
  	top:0;
	z-index:9000;
  	background-color:#000;
  	display:none;
} 
div#supportloginModal .window {
  	position:absolute;
  	left:0;
  	top:0;
  	width:350px;
  	height:103px;
  	display:none;
  	z-index:9999;
  	padding:20px;
}
div#supportloginModal div#supportLogin {
	background-color:#CCC;
	width:350px; 
	height:103px;
	padding: 10px 20px 20px;
	/*--Bottom right rounded corner--
	-moz-border-radius-bottomright: 10px;
	-khtml-border-radius-bottomright: 10px;
	-webkit-border-bottom-right-radius: 10px;
	/*--Bottom left rounded corner--
	-moz-border-radius-bottomleft: 10px;
	-khtml-border-radius-bottomleft: 10px;
	-webkit-border-bottom-left-radius: 10px;
	/*--Top right rounded corner--
	-moz-border-radius-topright: 10px;
	-khtml-border-radius-topright: 10px;
	-webkit-border-top-right-radius: 10px;
	/*--Top left rounded corner--
	-moz-border-radius-topleft: 10px;
	-khtml-border-radius-topleft: 10px;
	-webkit-border-top-left-radius: 10px;
	display: none;
	border: 1px solid #333;
}
div#supportLogin .fields {
	background-color:#CCC;
  	width:320px; 
  	height:30px;
}
div#supportLogin .fields input {
	float:right;
	font-size: 12px;
}
div#supportLogin .login {
  	float:left;
  	width:108px; 
  	height:53px;
}
*/







/*  ----  TOOL TIPS --------------  */

/* mark-up example:
<div id="tTip"><a class="tooltip" href="#">info<span class="classic">We will never release your personal details to any outside company for mailing or marketing purposes. However, we would like to keep you up to date with the range of products and services we offer by mail, telephone, email or otherwise. This includes news of special events, offers, promotions, catalogues and product launches.</span></a></div>
*/

#tTip{
	position: relative;
	top: 15px;
	margin: 0;
	left: 204px;
	width: 10px;
	z-index: 1;
	height: 10px;
	display: block;
}

#tTip a{
	color: #fff !important;
	text-decoration: none !important;
	font-size: 12px;
	display: block;
}

body.requests #tTip{
	top: 0;
	left: 0;
}

.tooltip {
	color: #000;
	outline: none;
	cursor: help;
	position: relative;
	text-decoration: none;
}
		
.tooltip span {
	margin-left: -999em;
	position: absolute;
	color: #4C721A !important;
}
		
.tooltip:hover span {
	border-radius: 5px 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px; 
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); 
	-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); 
	-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
	font-family: Calibri, Tahoma, Geneva, sans-serif;
	position: absolute; 
	/* left: 1em; */
	right: 1em; 
	top: 2em;
	/* z-index: 99; */
	z-index: 1000;
	margin-left: 0;
	width: 250px;
}
		
.tooltip:hover img {
	border: 0; 
	margin: -10px 0 0 -55px;
	float: left;
	position: absolute;
}
		
.tooltip:hover em {
	font-family: Candara, Tahoma, Geneva, sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	display: block;
	padding: 0.2em 0 0.6em 0;
}

.classic { 
	padding: 0.8em 1em;
	background: #f6fbe4; 
	border: 1px solid #999;
}

* html a:hover { 
	background: transparent; 
}

.custom { 
	padding: 0.5em 0.8em 0.8em 2em;
}	
.critical { 
	background: #FFCCAA; 
	border: 1px solid #FF3334;	
}
.help { 
	background: #9FDAEE; 
	border: 1px solid #2BB0D7;	
}
.info {
	background: #9FDAEE; 
	border: 1px solid #2BB0D7;	
}
.warning { 
	background: #FFFFAA;
	border: 1px solid #FFAD33;
}
		
/*  ---------------------------------------------------------------  */




/* ----  PRODUCT BREADCRUMBS - now outside Secondary Navigation  ----  */

div#productBreadcrumbs{
	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 */
	margin-bottom:20px;
	width:700px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 10px;
	margin-left: 20px;
}


div#productBreadcrumbs ul{
	/* padding-left: 20px; */
}

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

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

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#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;
	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 */
	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;
}
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;
	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;
	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 
	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{
	width: 400px;
	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.png) 0 0 no-repeat;
	height:107px; /* this is ugly but we are not left with a lot of choice due to the design */
	line-height:1.4em;
	overflow:hidden;
	padding:10px 10px 0 7px;
}

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

div#pageContent div#newProducts .highlight{
	color: #669c1f;
	margin-bottom: 2px;
	font-size: 100%;
	line-height: 100%; 
/*	line-height: 1.1em;
	font: bold 15px 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#newProducts .moreLink2{
	padding-top: 7px;
	background:url(../img/chevron_green_white_right.png) 53% 10px no-repeat;
	display: block;
}

.moreLink{
	background:url(../img/chevron_green_white_right.png) 100% 0 no-repeat;
}

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

p.highlightedParagrah{
	color:#669c1f;
	font-family: 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? */
}





/* -- SUPPORT SECTION ---------------*/

div#supportCol2{
	float:left;
	width: 461px;
	margin-left: 20px;
}
div#supportCol1, div#supportCol3{
	float:left;
	width: 221px;
}
div#supportCol3{
	margin-left: 20px;
}
body.support div#twoColumns div#supportCol2{
	float:left;
	width: 221px;
}

div#supportCol2, div#supportCol3 p{
	line-height: 150%;
}
div#supportHeader{
	float:left;
	width: 990px;
	min-height:20px;
}
div#supportTitle{
	float: left;
	width: 550px;
}
	
div#supportContact{
	width:400px;
	float: right;
	text-align:right;
	padding: 5px 25px 0 0;
	margin: 0;
}
.supportPhone{
	font-weight: bold;
	font-size: 140%;
}
body.support #fauxColumns{
	background:#fff url(../img/faux_column3.png) 0 0 repeat-y;
	clear:left;
	color:#666;
	float:left;
	padding-top:20px;
	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 */
}
body.support div#mainContent{
	float:left; 
	width:990px;
}
body.support div#pageContent{
	float:left;
	margin:0 0 0 0px;
	width:990px;
	/* hack to fix issue caused by having to apply absolute positioning to elements within secondary content */
	min-height:450px;
}
body.support div#pageContent div#twoColumns{
	float:left;
	margin:0 0 0 18px;
	width:972px;
	/* hack to fix issue caused by having to apply absolute positioning to elements within secondary content */
	min-height:500px;
	text-align:left;
}
div#twoColumns div#energyCalculatorForm{
	margin-left:200px;
}
p.padLeft{
	padding-left: 20px;
}
body.support div#col1{
	float:left;
	width:979px;
	margin-left: 20px;
}
body.support div#col1 h1{
	margin-left: 1px;
}



/* absence presence detection page */
div#supportWrapper2{
	float:left;
	clear:both;
	width: 960px;
}
div#supportWrapper2 p{
	margin-right: 320px;
}




/* downloads page */
div#supportWrapper{
	float:left;
	clear:both;
	width: 460px;
	min-height: 400px;
}
div#supportDownloadsWrapper{
	float:left;
	width: 500px;
	min-height: 400px;
}
/*
body.support div#col1 .supportDownloadsItem{
	float:left;
	width: 460px;
	margin-top: 10px;
	min-height: 150px;
}
.supportDownloadsItem h2{
	margin-bottom: 10px;
}
.supportDownloadsItem a{
	margin:0;
}
*/
body.support div#col1 .supportDownloadsIcon{
	float: left;
	width: 60px;
	margin-top: 10px;
}
body.support div#col1 .supportDownloadsIntro{
	float:left;
	width: 360px;
	margin-top: 10px;
	padding-right: 5px;
	height:auto;
}
body.support div#col1 .supportDownloadsIntro a{
	margin: 0;
}
div#supportDownloadsDivider{
	float: left;
	background-color:#CCC;
	width: 1px;
	margin-left: 10px;
	min-height: 400px;
}
/* replaced by modal login window
div#supportDownloadsLogin{
	float: left;
	width: 400px;
	margin-left: 20px;
}
*/


/* support page */
div#twoColumnTab, div#twoColumnTab2, div#twoColumnTab3{
	float:left;
	clear:both;
	width: 461px;
	min-height: 150px;
	margin-bottom:15px;
}
.padLeft{
	margin-left: 20px;
}
.padBottom{
	margin-bottom: 10px;
}
div#twoColumnTab .twoColumnTabHeader, 
div#twoColumnTab2 .twoColumnTabHeader, 
div#twoColumnTab3 .twoColumnTabHeader{
	background:transparent url(../img/support-bg01.png) 0 0 no-repeat;
	line-height:1.4em;
	overflow:hidden;
	padding:10px 10px 0 10px;
	min-height:20px;
}
div#twoColumnTab .twoColumnTabHeader h3, 
div#twoColumnTab2 .twoColumnTabHeader h3, 
div#twoColumnTab3 .twoColumnTabHeader h3{
	font-weight:normal;
	margin-bottom:2px;
	margin-top: -1px;
	color:#FFF;
	font-size: 120%;
}
div#twoColumnTab .twoColumnTabContent{
	width: 461px;
	background:transparent url(../img/support-bg03.png) 0 10px;
	background-repeat:repeat-y;
	min-height:132px; 
	padding: 0 10px 0 10px;
}
div#twoColumnTab2 .twoColumnTabContent{
	width: 461px;
	background:transparent url(../img/support-bg03.png) 0 10px;
	background-repeat:repeat-y;
	min-height:110px; 
	padding: 0 10px 0 10px;
} 
div#twoColumnTab3 .twoColumnTabContent{
	width: 461px;
	background:transparent url(../img/support-bg03.png) 0 10px;
	background-repeat:repeat-y;
	min-height:90px; 
	padding: 0 10px 0 10px;
}
div#twoColumnTab2 .twoColumnTabContent h3, 
div#twoColumnTab3 .twoColumnTabContent h3{
	font-weight: normal;
}
div#twoColumnTab .twoColumnTabContent p, 
div#twoColumnTab2 .twoColumnTabContent p, 
div#twoColumnTab3 .twoColumnTabContent p{
	font-weight: normal;
	color: #999;
	margin: 0;
}
div#twoColumnTab .twoColumnTabContent a{
	font-weight: normal;
	color: #999;
} 
div#twoColumnTab2 .twoColumnTabContent a, 
div#twoColumnTab3 .twoColumnTabContent a{
	font-weight: normal;
	color: #669C1F;
}

div#twoColumnTab .techGuideEntry{
	width: 440px;
	min-height:65px;
	border-bottom: #CCC 1px solid;
}
div#twoColumnTab .techGuideDescription{
	float:left;
	padding:24px 0 5px 10px;
	color: #666 !important;
	font-weight: bold !important;
}

div#twoColumnTab .techGuideLinks{
	float:right;
	padding:0;
	vertical-align: top;
	text-align:center;
}

div#twoColumnTab .twoColumnTabFooter, 
div#twoColumnTab2 .twoColumnTabFooter, 
div#twoColumnTab3 .twoColumnTabFooter{
	float: left;
	clear:both;
	background:transparent url(../img/support-bg05.png) 0 -29px no-repeat;
	width: 461px;
	height: 38px;
	margin: 0;
}
.arrowLink{
	background: url(../img/arrow-icon.png) no-repeat 100% 50%;
}


/* apps site cell */


div#oneColumnTab{
	float:left;
	width: 221px;
	min-height: 150px;
	margin:0 0 14px 0;
}
div#oneColumnTab2, div#oneColumnTab3{
	float:left;
	clear:both;
	width: 221px;
	min-height: 150px;
	margin:0 0 14px 0;
}
div#oneColumnTabEnd{
	float: left;
	position:relative;
	width: 221px;
	min-height: 260px;
	margin:0 0 10px 0;
}
div#oneColumnTab p a, div#oneColumnTab2 p a, div#oneColumnTabEnd p a, div#downloadsTab p a, div#calculatorTab p a{
	font-weight: normal;
	color:#666;
	letter-spacing: 0;
}
div#oneColumnTab p a:hover, div#oneColumnTab2 p a:hover, div#oneColumnTabEnd p a:hover, div#downloadsTab p a:hover, div#calculatorTab p a:hover{
	text-decoration: underline;
}
.oneColumnTabHeader{
	background:transparent url(../img/support-bg02.png) 0 0 no-repeat;
	line-height:1.4em;
	overflow:hidden;
	padding: 10px 10px 0 10px;
	min-height:20px;
}
.oneColumnTabHeader h3{
	font-weight:normal !important;
	line-height: 1.2em;
	margin-bottom: 2px;
	margin-top: -1px;
	color:#FFF;
	font-size: 120%;
}
.oneColumnTabContent{
	background:transparent url(../img/support-bg04.png) 0 10px repeat-y;
	float: left;
	clear:both;
	width: 201px;
	min-height: 45px;
	padding: 10px 10px 10px 10px;
}
.oneColumnTabContent h3{
	font-weight: bold;
	color:#669c1f;
	letter-spacing: 90%;
	margin-bottom: 2px;
	margin-top: -1px;
	font-size: 120%;
}
.oneColumnTabFooter{
	clear:both;
	float:left;
	min-height: 28px;
	background:transparent url(../img/support-footer.jpg) 0 -12px no-repeat;
	width: 221px;
}
div#oneColumnTab .moreLink{
	padding-top: 7px;
	background:url(../img/chevron_green_white_right.png) 100% 25px no-repeat;
	display: block;
}


/* apps, downloads and energy calc cells*/

div#appsTab{
	float:left;
	width: 221px;
	min-height: 150px;
	margin-bottom: 10px;
}
div#appsTabContent{
	background:transparent url(../img/support-apps.jpg) 0 -2px no-repeat;
	float: left;
	clear:both;
	width: 201px;
	min-height: 120px;
	padding: 10px 10px 10px 10px;
}

div#appsTabContent h3{
	font-weight: bold;
	color:#669c1f;
	letter-spacing: 90%;
	margin-bottom: 2px;
	margin-top: -1px;
	font-size: 120%;
}

div#downloadsTab{
	float: right;
	width: 221px;
	min-height: 150px;
	margin: 0 0 8px 0;
}
div#downloadsTabContent{
	background:transparent url(../img/support-downloads.png) 0 -4px no-repeat;
	float: left;
	clear:both;
	width: 111px;
	min-height: 120px;
	padding: 10px 100px 10px 10px;
}

div#calculatorTab{
	float: right;
	clear:both;
	width: 221px;
	min-height: 150px;
	margin: 0 0 10px 0;
}
div#calculatorTabContent{
	background:transparent url(../img/support-calculator.png) 0 -10px no-repeat;
	float: left;
	clear:both;
	width: 111px;
	min-height: 120px;
	padding: 10px 100px 10px 10px;
}
div#dataSheetTabContent{
	background:transparent url(../img/support-data.png) 0 -20px no-repeat;
	float: left;
	clear:both;
	width: 121px;
	min-height: 125px;
	padding: 10px 90px 10px 10px;
}


/* Support downloads page  */
div#centreColumn{
	width:470px;
	margin-left:240px;
}
div#centreColumn2{
	width:650px;
	margin-left:150px;
}
.downloadWrapper{
	float:left;
	clear:both;
	width: 100%;
	min-height: 90px;
	padding: 0 5px 0 5px;
	margin-bottom: 5px;
	border: #CCC solid 1px;
}
.downloadWrapper h2{
}
.downloadImage{
	float:left;
	width: 100px;
	min-height: 100px;
	text-align:left;
}
.downloadImage img{
	padding-left: 10px;
}

.downloadText{
	float:left;
	width: 370px;
}
.downloadText a{
	color:#669c1f;
	display:block;
	font-weight:bold;
	padding: 0;
}
.downloadText a:hover{
	text-decoration:none;
}

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

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

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



/* ==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#branding p a{
	background: transparent url(../img/cp-logo.png) no-repeat;
	display:block;
	height:71px;
	overflow:hidden;
	text-decoration:none;
	text-indent:-999em;
	width:228px;
	position: relative;
	top: 18px;
	left: 24px;
}
*/

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; */
	padding-bottom: 5px;
}

p.pdfDownloadSmall a{
	background:transparent url(../img/pdf.gif) 1px 0 no-repeat;
	color:#669c1f;
	display:block;
	font-weight: normal !important;
	/* padding: 0 0 0 27px; */
	padding: 0 0 0 29px;
}


/* ----  ZIP downoad link  ---------------------- */

p.zipDownload{
	/* padding-bottom: 0; */
	padding-bottom: 12px;
}

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

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

p.energyCalculator{
	padding-bottom: 5px;
	padding-top: 8px;
}

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






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:650px;
}
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.productImage,
th.codeBlank,
th.descBlank,
th.imageBlank,
th.loadRating{
	border-right: 1px solid #fff;
}

.productCode{
	border-left: 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;
	color: #666;
	font-size: 12px;
}
table.loginWidth td{
	text-align:left;
}
table.partners td{
	vertical-align:top;
}




.tableLocator{

}




/* ==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;
	padding:10px;
	margin: 2em 0 0;
}

body.support 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;
	padding:10px;
	margin: 2em 0 0;
	width: 350px;
}

div#pageContent legend{
	color:#ccc;
	font-size:140%;
	font-weight:bold;
}

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



/* Stockist Locator Forms -----------------------------*/

div#stockistLocator fieldset, div#stockistLocator2 fieldset{ /* we are specific about stlying the fieldset so the search form doesn't pick up the styling too */
	background:#eee;
	border:1px solid #ccc;
	padding:10px;
	margin: 2em 0 0;
	width: 290px;
}
div#stockistLocator fieldset{
	float: left;
	margin-right: 20px;
}
div#stockistLocator2 fieldset{ 
	margin-top: 30px;
}
div#stockistLocator input.textInput, div#stockistLocator2 input.textInput{
	border:1px solid #ccc;
	color:#000;
	font-size:120%;
	padding:0.2em;
	width:180px;
}
div#stockistLocator input.buttonInput, div#stockistLocator2 input.buttonInput{ 
	padding:3px;
	margin-left: 10px;
}

div#stockistResults{
	clear: both;
	float: left;
}


/* Footers -----------------------------*/

div#footer {
	position: relative;
	float: left;
	/* width: 990px; */
	width: 990px;
	/* padding-left: 10px; */
	margin-bottom: 0px;
	font-size: 11px;
	padding-top: 15px;
	margin-top: 5px;
}

.footerlink {
	font-size: 95%;
	text-decoration: none;
	color: #fff;
	text-align: left;
	font-weight: normal;
	}

.footer-list {
	list-style-position: inside;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.bottom-nav, .bottom-nav-start, .bottom-nav-end{
	float:left;
	border-right: 1px dotted #666;
	padding: 0 36px;
	line-height: 1.4em;
	height: 170px;
	/* width: 170px; */
}

.bottom-nav-start{
	border-right: 1px dotted #666;
	padding: 0 36px 0 40px;
}

.bottom-nav-end{
	border-right: none;
	padding-bottom: 20px;
	/* padding-right: 50px; */
	padding-right: 40px;
}
.bottom-nav-end p{
	color:#FFF;
}

#footer-centred {
	clear:both;
	text-align:center;
	height: 20px;
	width: 990px;
	display:block;
	}
	
.footer-header {
	font-size: 140%;
	text-decoration: none;
	color: #FFF;
	font-weight: normal;
	padding-top: 10px;
	}

.footer-header a {text-decoration: none; color:#FFF !important;}
.footer-header a:hover {text-decoration: none; color:#666;}

div#footer p{margin-bottom: 7px; margin-top: 0;}