/* Reset CSS */
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 {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
:focus {outline:0;}
ins {text-decoration:none;}
del {text-decoration:line-through;}
table {border-collapse:collapse;border-spacing: 0;}

/*----------------------------*/
body {
	font-family: Arial, Helvetica, sans-serif;
	color:#666666;
	font-size:12px;
	line-height:1.6em;
	background:url(img/bg.png) repeat-x left top;
	background-color:#e0eaf0;
}
h1 {
	color:#ff6600;
	font-size:20px;
	text-transform:uppercase;
}
h2{color:#0e88bd;font-size:15px;text-transform:uppercase;}
h2 span{padding-right:16px; font-size:16px; color:#ff6600;}
h3{color:#333333;font-size:16px;}
h5{color:#0e88bd; font-size: 12px; font-weight: normal; cursor:pointer;}
h5:hover {text-decoration:underline;}
ul.bullet li{background: transparent url(img/bg_bullet.png) no-repeat scroll 0 0.65em !important;}
a{color:#0e88bd; text-decoration:none;}
a:hover, a:focus, a:active{text-decoration:underline;}


#content{
	width:1024px;
	height:900px;   /* remove!!! */
	margin-left:auto;
	margin-right:auto;
}
#main{
	width:1000px;
	height:100%;   /* remove!!! */
	display:block;
	float:left;
	background:url(img/bg-content.png) repeat-x left top;
	background-color:#fff;
}
#shade-left{
	width:12px;
	height:100%;
	float:left;
	display:block;
	background:url(img/shade-left.png) repeat-y;
}
#shade{
	width:12px;
	height:100%;
	float:right;
	display:block;
	background:url(img/shade.png) repeat-y;
}

#header{
	width:100%;
	height:61px;
	float:left;
}
#energy-efficience-centre{
	margin-top:8px;
	margin-left:128px;
	float:left;
	width: 318px;
	height:41px;
	background:url(img/energy-efficiency-centre.png) 0 0 no-repeat;	
}
#energy-efficience-centre a{display:block;width:100%;height:100%;}
#phone {
	width: 222px;
	height:41px;
	float:right;
	margin-top:8px;
	margin-right:20px;
	background:transparent url(img/energy-efficiency-centre.png) -315px 0 no-repeat;		
}
/* MENU */
#menu {
	width:100%;
	height:42px;
	margin-bottom:10px;
	float:left;
}
#navigation {list-style: none;}
#navigation li {float: left;}
#navigation a * {display: none;}
#navigation a, #navigation a .hover {
    height: 42px;
	position: relative;
	cursor:hand;
	display: block;
	background:transparent url(img/menu.png) 0 0 no-repeat;
}
#navigation .selected a{
	height: 49px;
	position:relative;
	top:-7px;
}
/* individual navigation items */
#navigation a.home{
	width:84px;
	height:98px;
	margin-left:24px;
	margin-right:4px;
	position:relative;
	top: -37px;
	left:-4px;
	background: url(img/EECentre-logo.png) 0 0 no-repeat;
}
#navigation .highlight a.home:hover, #navigation a.home .hover {
	width:84px;height:98px;
	background: url(img/EECentre-logo.png) -84px 0 no-repeat;
}
#navigation a.insulation {
  	background-position: 0 0;
  	width: 111px;
}
#navigation .highlight a.insulation:hover, #navigation a.insulation .hover {
	background-position: 0 -41px;
}
#navigation .selected a.insulation {
  background-position: 0 -82px;
  width:123px;
}

#navigation a.window-films {
  background-position: -112px 0px;
  width: 139px;
}
#navigation .highlight a.window-films:hover,
#navigation a.window-films .hover {
  background-position: -112px -41px;
}
#navigation .selected a.window-films{
  background-position: -123px -82px;
  width:146px;
}
#navigation a.skylights {
  background-position: -251px 0px;
  width: 103px;
}
#navigation .highlight a.skylights:hover,
#navigation a.skylights .hover {
  background-position: -251px -41px;
}
#navigation .selected a.skylights{
  background-position: -269px -82px;
  width:112px;
}
#navigation a.ventilation {
  background-position: -356px 0px;
  width: 119px;
}
#navigation .highlight a.ventilation:hover,
#navigation a.ventilation .hover {
 	background-position: -356px -41px;
}
#navigation .selected a.ventilation {
 	background-position: -381px -82px;
	width:128px;
}
#navigation a.power-savings {
  background-position: -476px 0px;
  width: 145px;
}
#navigation .highlight a.power-savings:hover,
#navigation a.power-savings .hover {
  background-position: -476px -41px;
}
#navigation .selected a.power-savings{
  background-position: -509px -82px;
  width:153px;
}
#navigation a.energy-rating {
  background-position: -621px 0px;
  width: 138px;
}
#navigation .highlight a.energy-rating:hover,
#navigation a.energy-rating .hover {
  background-position: -621px -41px;
}
#navigation .selected a.energy-rating{
  background-position: -662px -82px;
  width:147px;
}
#navigation a.contact-us {
  background-position: -759px 0px;
  width: 116px;
}
#navigation .highlight a.contact-us:hover,
#navigation a.contact-us .hover {
  background-position: -759px -41px;
}
#navigation .selected a.contact-us {
  background-position: -809px -82px;
  width:125px;
}
/*  BANNER */
#banner {
	float:left; width: 740px; height:200px;  margin-left:10px;
}
/* GET A QUOTE */
#quote {
	float:right; width: 250px; height:200px; 
	cursor:hand;
}

/* individual navigation items */
div#getaquote{
	cursor:pointer;
	margin-top: 30px;
	margin-left:16px;
	width: 200px;
	height:136px;display: block;
	background: transparent url(img/get-a-quote.png) 0 0 no-repeat;
}
div#getaquote span{
	float:left;
	cursor:pointer;
	width: 200px;
	height:136px;
	background:  url(img/get-a-quote.png) -198px 0 no-repeat;	
}

/*  GET A QUOTE OVERLAY FORM */
/* the overlayed element */ 
#getaquote-overlay, #book-assessment-overlay { 
    display:none; 
    background-image:url(img/quote-overlay.png);  
    /* place overlay on top of other elements */ 
    z-index:10000;    
    width:656px;     
    height:670px; 
	position:relative;
} 
 
/* close button positioned on upper right corner */ 
#getaquote-overlay .close, #book-assessment-overlay .close { 
	position:absolute;
    right:31px; 
    top:27px; 
    cursor:pointer; 
    height:50px; 
    width:65px; 
}
#getaquote-overlay h1, #book-assessment-overlay h1{
	margin: 50px 100px 20px 50px;
	border-bottom: 3px solid #0291D0; 
	padding-bottom:10px;
}
#getaquote-overlay p, #book-assessment-overlay p{
	margin: 10px 50px 0 50px;x;
}
#getaquote-overlay div#quoteform, #book-assessment-overlay div#quoteform{
	margin: 0 90px 0 50px;
	height:520px;
	width:570px;
}

/*  TAG CLOUD */
#tags{
	margin-top:60px;
	padding-top:26px;
	float: right;
	width:230px;
	height:300px;
	background: url(img/bg-tagcloud.png) no-repeat;	
	background-position: top center;
}
#tags div{
	width:230px;
	height:300px;
}
/*  FOOTER */
#footer {
	width:1024px;
	height:154px;
	margin: 0 auto 0 auto;
}
#footer-main {
	width:1000px;
	height:100%;
	float:left;
}
#footer-shade-left{
	width:12px;
	height:124px;
	float:left;
	display:block;
	background:url(img/shade-left.png) repeat-y;
}
#footer-shade{
	width:12px;
	height:124px;
	float:right;
	display:block;
	background:url(img/shade.png) repeat-y;
}
#footer-bar {
	height: 54px;
	width: 100%;
	background-color: #0693d1;
}
#footer-left{
	height:78px;
	width: 50px;
	float:left;
	position:relative;
	top: -11px;
	left: -7px;
	background: url(img/footer.png) 0 0 no-repeat;	
}
#footer-text{
	float:left;
	margin-top:16px;
	margin-left:140px;
	height:20px;
	width: 700px;
	color:#fff;
}
#footer-text span {margin-left:10px}
#footer-text a{margin-left:20px; color:#fff}
#footer-right{
	height:78px;
	width: 50px;
	float:right;
	position:relative;
	top: -11px;
	right: -7px;
	background: url(img/footer.png) -50px  0 no-repeat;	
}

#logos {list-style: none;
	width:1000px;
	height:70px;
	background-color:#fff;
}
#logos li {float: left;}
#logos a{
	margin-top:16px;
	margin-left:32px;
	height: 52px;
	display: block;
	background: url(img/EECentre-partners.png) 0 0 no-repeat;
	opacity:0.5;
}
#logos a:hover{
	opacity:1;
}
#logos li a#csr-logo {
	margin-left:28px;
	width:33px;
}
#logos li a#bradford-logo {
  	background-position: -34px 0;
	width:80px;
}
#logos li a#kingspan-logo {
  	background-position: -115px 0;
	width:63px;
}
#logos li a#hpwf-logo {
  	background-position: -180px 0;
	width:49px;
}
#logos li a#enerlogic-logo {
  	background-position: -230px 0;
	width:96px;
}
#logos li a#smartbreeze-logo {
  	background-position: -326px 0;
	width:107px;
}
#logos li a#edmonds-logo {
  	background-position: -433px 0;
	width:115px;
}
#logos li a#velux-logo {
  	background-position: -548px 0;
	width:68px;
}
/* 	TABS AREA  */
#tabs-frame {
	float:left;
	width: 750px;
	height: 400px;
}
div#tabs-frame {
	margin: 10px 0 20px 8px;
}
ul.tabs { 
	list-style:none; 
	margin:0 !important; 
	padding:0;	
	height:87px;
	background: url(img/bg-tabs.png) repeat-x 0 0;
}
ul.tabs li { 
	float:left;	 
	text-indent:0;
	padding:0;
	margin:0 !important;
	list-style-image:none !important; 
}
ul.tabs a { 
	background: url(img/tabs.png) no-repeat -144px 0;
	display:block;
	height: 53px;  
	width: 133px;
	text-align:center;	
	text-decoration:none;
	color:#2ea5d9;
	padding: 34px 0 0 0;
	margin:0px;	
	font-size:14px;
	font-weight:bold;
	text-transform:uppercase;
}
ul.tabs a:active {
	outline:none;		
}
ul.tabs a:hover {
	background-position: -277px 0;	
	width:133px;
	color:#0e88bd;	
}
ul.tabs a.first {
	margin-left:28px;
}
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
	background-position: 0 0;
	padding-top: 32px;		
	cursor:default !important; 
	color:#d77d15 !important;
	height:55px;
	width:140px;
}
div.panes div.pane {
	display:none;		
}
div.panes div.pane {
	display:none;		
	padding:15px 10px;
	height:900px; /* remove!!*/
	background-color:#fff;
	background: url(img/bg-tab-pane.png) repeat-x 0 0;	
}

/* GREEN TABS */
ul.tabs-green { 
	list-style:none; 
	margin:0 !important; 
	padding:0;	
	height:87px;
	background: url(img/bg-tabs-green.png) repeat-x 0 0;
}
ul.tabs-green li { 
	float:left;	 
	text-indent:0;
	padding:0;
	margin:0 !important;
	list-style-image:none !important; 
}
ul.tabs-green a { 
	background: url(img/tabs-green.png) no-repeat -144px 0;
	display:block;
	height: 53px;  
	width: 133px;
	text-align:center;	
	text-decoration:none;
	color:#6DAF15;
	padding: 34px 0 0 0;
	margin:0px;	
	font-size:14px;
	font-weight:bold;
	text-transform:uppercase;
}
ul.tabs-green a:active {
	outline:none;		
}
ul.tabs-green a:hover {
	background-position: -277px 0;	
	width:133px;
	color:#314F0A;	
}
ul.tabs-green a.first {
	margin-left:28px;
}
ul.tabs-green a.current, ul.tabs-green a.current:hover, ul.tabs-green li.current a {
	background-position: 0 0;
	padding-top: 32px;		
	cursor:default !important; 
	color:#1E2F09 !important;
	height:55px;
	width:140px;
}
div.panes div.pane.green {
	background: url(img/bg-tab-pane-green.png) repeat-x 0 0;	
}

/* PAGE: WIndows Films */
div.Group{display:block; float:left; width:210px; height:250px; background-color:#88c4ff;  color:#fff; margin: 10px 0px 0px 30px; -moz-border-radius:4px; -webkit-border-radius:4px;}
div.Group p{margin-top:12px !important; font-size:16px; font-weight:bold; text-align:center;}	
div.Group:hover{background-color:#FFA200}
div.Group a.Pic { display:block; float:left; width:200px; height:200px; margin: 13px 5px 5px 5px; background-image: url(img/hpwf-products.jpg); background-position: 0px 0px;}
div.Group a.Pic.energy{background-image: url(img/hpwf-products.jpg);background-position: 0 0;}
div.Group a.Pic.designer{background-image: url(img/hpwf-products.jpg);background-position: -200px 0;}
div.Group a.Pic.security{background-image: url(img/hpwf-products.jpg);background-position: -400px 0;}
div.Group div.info p{margin:16px 16px; font-size:14px; text-align:left; line-height:24px;}
/* the tooltip */
div.Group div.info {
    float:none;
    background:#333;
    color:#fff;
    font-size:12px;
    margin-top:-87px;
    padding:0px 0px;
    height:100px;
    width:200px;
	display:none;
    margin-left:5px;
}

/* WINDOW FILMS page */
div.pane-left{float:left; width:490px; display:block; }
div.pane-right{float:right; width:230px;display:block;  }
div.pane-left .desc {display:none; margin-left:15px;}
div.pane h2 {margin:10px 0 10px 16px;}					
div.pane h5.more {margin: 0 10px 5px 420px;  }					
div.pane p {margin: 0 12px 0 16px; }					
div.desc h3 {padding:8px 0 10px 20px;}
div.pane li{background: transparent url(img/bg_bullet.png) no-repeat scroll 0 0.65em;	margin-left: 30px; padding: 0 8px 2px 20px; }
div.pane-col-left{float:left; width:48%; display:block;}
div.pane-col-right{float:right; width:48%; display:block; margin-left:16px;}

/* general settings for both scrollables */
div.items {height:20000em;position:absolute;clear:both;}

/* the action buttons above the scrollable */
#actions {width:212px;}
#actions a {cursor:pointer; color:#0e88bd}
#actions a.prevPage{float:left;display:inline}
#actions a.prevPage{float:nextPage;display:inline}
#actions a:hover, #actions a:focus, #actions a:active {text-decoration:underline;}

/* the thumbnail scrollable */
#thumbnails, #thumbnails1, #thumbnails2 {
	position:relative;
	overflow:hidden;	 	
	float:left;	
	width: 212px;	
	height:810px;	
}
#thumbnails div.items, #thumbnails1 div.items, #thumbnails2 div.items  {
	float:left;	
	cursor:pointer;
	margin:0;
	padding:0;
}

#thumbnails div.items div, #thumbnails1 div.items div, #thumbnails2 div.items div {
	float:left;	
	cursor:pointer;
	width:200px;
	height:140px;
	border: 6px solid #88c4ff;
	margin-top:10px;
	-moz-border-radius:4px; -webkit-border-radius:4px; 
}

#thumbnails div.items div:hover, #thumbnails1 div.items div:hover, #thumbnails2 div.items div:hover {
	border: 6px solid #FFA200;	
}
/* gallery box styling */
#box, #box1, #box2, #boxvelux {
	background-image:url(img/gallery-overlay-black.png);
	width:656px;
	height:524px;
	position:absolute;
	display:none;
}
#box div.close, #box1 div.close, #box2 div.close, #boxvelux div.close {
    background-image:url(img/close-button.png);
	position:absolute;
	left:568px;
	top:16px;
	cursor:pointer;
	height:48px;
	width:64px;
}
/* overlay scrollable */
#images, #images1, #images2, #imagesvelux {	
	position:absolute;
	overflow:hidden;
	margin:50px;
	width:557px;
	height:400px;	
}
#images div.items div, #images1 div.items div, #images2 div.items div, #imagesvelux div.items div {
	float:left;
	width:557px;
	height:400px;
	margin-right:30px;
}
/* the image tooltip */
#images div.items div.info, #images1 div.items div.info, #images2 div.items div.info, #imagesvelux div.items div.info {
	float:none;
	background:#333;
	color:#fff;
	font-size:13px;
	margin-top:-137px;
	padding:5px 75px;
	height:125px;
	display:none;
	width:490px;
}
#images div.items div.info h3, 
#images1 div.items div.info h3, 
#images2 div.items div.info h3, 
#imagesvelux div.items div.info h3 {color:#cde; margin-top:10px; }
/* override button style on the overlay */
#box div.navi, #box1 div.navi, #box2 div.navi, #boxvelux div.navi {	position:absolute; bottom:33px; left:50px; }
#box div.nextPage, #box1 div.nextPage, #box2 div.nextPage, #boxvelux div.nextPage {left:580px;}
/* next/prev buttons for the image gallery */
.disabled {	visibility:hidden;	}
.nextPage {	float:right;}	
div.navi {	background-image:url(img/hori_large.png);width:30px;	height:30px;float:left;	margin-top:55px;}
div.navi:hover  	{background-position:-30px 0; }
div.navi:active  	{background-position:-60px 0; }
div.nextPage 		{background-position: 0 -30px; clear:right; }
div.nextPage:hover 	{background-position:-30px -30px; }
div.nextPage:active {background-position:-60px -30px; } 
div.navi.disabled   {visibility:hidden;	}


/* PAGE: Skylights & Roof Windows */
/* group images */
div.Group a.Pic { display:block; float:left; width:200px; height:200px; margin: 13px 5px 5px 5px; background-image: url(img/velux-products.jpg); background-position: 0px 0px;}
div.Group a.skylights{background-position: 0px 0px; }
div.Group a.roof-window{background-position: -200px 0px; }
div.Group a.sun-tunnel{background-position: -400px 0px; }
div.Group div.info p { margin: 16px 16px; font-size:14px; text-align:left; line-height:24px; }

div.section {display:block;  float:left; width:100%; margin-top:20px;}

/* house picture and question marks */
div#solutions {position: relative; width: 561px; height: 288px; margin-top:20px; background-image: url(img/velux.png); }
div#solutions div.mark:hover{background-image: url(img/mark.png)}   
div#solutions div.mark{ position: absolute; width: 18px; height: 17px;  cursor:pointer;}
/* question marks */ 
div#skylight-1 {top:32px; right:59px;}
div#skylight-2 {right:113px; top:14px;}
div#skylight-3 {right:147px; top:55px;}
div#skylight-4 {right:181px; top:23px;}
div#skylight-5 {right:208px; top:55px;}
div#skylight-6 {right:300px; top:62px;}
div#skylight-7 {right:326px; top:155px;}
div#skylight-8 {right:361px; top:3px;}
div#skylight-9 {right:389px; top:43px;}
div#skylight-10{right:423px; top:45px;}
div#skylight-11{right:507px; top:76px;}
/* tooltips for question marks */
div.tooltips {display:none;background:transparent url(img/white_arrow.png); height:88px; width:176px;padding:16px 16px;}
div.tooltips h3{color: #FF6600; font-size:14px; text-transform:uppercase; margin: 0 0 3px 0; padding: 0 0;}
div.tooltips p{margin: 0; padding: 0 0; line-height: 1.4em;}

/* Product Listings */
ul.Listing {float: left;width: 100%; padding: 0 0 16px;	border-bottom: 1px solid #ebebeb; margin-top:16px;	 }
ul.Listing li{padding:0 !important;margin:0 !important; background-image:none;}
ul.Listing li.column-left  {float:left;	width:50%; }
ul.Listing li.column-right {float:right;width:50%;}
ul.Listing a img {border: 5px solid #88c4ff; float: left; margin-right:10px; margin-bottom:18px; -moz-border-radius:4px; -webkit-border-radius:4px;}
ul.Listing a:hover img {border: 5px solid #FFA200;text-decoration:none;}
ul.Listing li a p {color:#666666; margin-right:15px;text-decoration:none !important;}
ul.Listing li:hover a p, ul.Listing li:target a p {color:#333;text-decoration:none !important; }
ul.Listing li:hover a h3, ul.Listing li:target a h3 {color:#FF6600;text-decoration:none !important;}
ul.Listing li a h3, ul.Listing h3 {color: #0e88bd; font-size:15px; line-height:1.2; margin-bottom: 8px; text-transform:uppercase; }
ul.Listing h4 {color:#0e88bd; font-weight: normal; text-align:right; margin-right:30px; }
ul.Listing h4:hover {color:#0e88bd; text-decoration:underline;}
ul.Listing a, ul.Listing a:hover, ul.Listing a h3, ul.Listing p{text-decoration:none !important;}
/* Sun Tunnels transformation section */
div#sun-tunnel{
	float:left;
	border: 5px solid #88c4ff;
	margin: 20px 0 0 82px;
	-moz-border-radius:4px; -webkit-border-radius:4px;
}
div#sun-tunnel:hover {border: 5px solid #FFA200;}
div#sun-tunnel-transform {
	width:272px; 
	height:362px; 
	background:url(img/sun-tunnel-transform.jpg) no-repeat scroll top left;
	display:block;
	position:relative;
}
div#sun-tunnel-transform span {
	background:url(img/sun-tunnel-transform.jpg) no-repeat scroll top left;
	display:block;
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	z-index:100;
	background-position:0px -362px;
}
div#sun-tunnel-transform span:hover {
	cursor:pointer;
}	
/* Product Overlay box */ 
div.ProductPopup { 
    background-image:url(img/overlay.png); 
    width:600px; 
    height:470px;         
    display:none; 
    padding:46px; 
} 
 /* default close button positioned on upper right corner */ 
div.ProductPopup div.close, div.close { 
    position:absolute; 
    display:block;
    right:31px; 
    top:27px; 
    cursor:pointer; 
    height:50px; 
    width:65px; 
    font-size: 500px; /* ie fix */
    line-height:50px;/* ie fix */
} 
div.ProductPopup h1{
	margin: 0 0 20px 0;
	border-bottom: 3px solid #0291D0; 
	padding-bottom:10px;
}
div.ProductPopup h2{
	margin: 15px 0 8px 0;
	font-size:16px; color:#333333;
	text-transform:none; 
}
div.ProductPopup ul {margin-left:20px;}
div.ProductPopup li{
	background: transparent url(img/bg_bullet.png) no-repeat scroll 0 0.65em;
	padding-left: 1em; margin-right:160px;
}
div.ProductPopup li span{ color:#0e88bd;}
div.ProductPopup .ProductContent{
 	float:left;
	width:100%;
	height:630px;
	background-repeat:no-repeat;
	background-attachment:scroll;
	background-position: top right;
 }
 div.ProductPopup .ProductContent p{margin-right:160px;}
/* root element for accordion */
div.VentColors {height:36px;	width:435px;	float:left;}
div.VentColors h4 {	float:left;	height:40px;	width:26px;	}