@charset "utf-8";
@import url("reset.css");

/* GLOBAL CLASSES */
.cboth {clear:both;}
.hide {display:none;}
.clear:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
.clear {display:inline-block;}
* html .clear {height:1%;}
.clear {display:block;}

.checkbox { width:13px; height:13px; margin:0}

body {font: 62.5% Arial, Helvetica, sans-serif;background: #fff url(../imgs/grad-bg.jpg) repeat-x left top; color:#707070;}

h1,h2,h3,h4,h5,h6 { color:#00576e}
input, select, textarea {font-family:Arial, Helvetica, sans-serif}

#wrapper { width:962px; margin:0 auto 30px}

/* HEADER */
#header { background:url(../imgs/panel/header-bg.png) no-repeat 0 0; height:116px; position:relative}
#header .logo,
#header h1,
#header .email,
#header .tel-num {display:block; text-indent:-9999px; position:absolute;}
#header .logo {background:url(../imgs/header/bx-logo.png) no-repeat 0 0;width:241px;height:66px;top:16px;left:26px}
#header h1 { background:url(../imgs/header/title.png) no-repeat 0 0; width:299px; height:17px;  top:0; left:-9999px}
#header .email { background:url(../imgs/header/email-ad.png) no-repeat 0 0; width:229px; height:20px;  top:43px; left:510px}
#header .tel-num { background:url(../imgs/header/tel.png) no-repeat 0 0; width:166px; height:17px;  top:43px; left:756px}

#header #global-search { padding-right:40px; margin-top:10px; position:relative; float:right}
#header #global-search p,
#header #global-search input,
#header #global-search img { float:left;}
#header #global-search .but { margin-left:10px}
#header #global-search p label { position: absolute; top:4px; left:5px; font-size:1.1em; font-weight:bold; color:#00576e;}
#header #global-search p input{ width:150px; background:#efefef; padding:4px; border:none; font-size:1.1em; font-weight:bold; color:#00576e; /*margin: 0 10px 0 0*/}


	/* MAIN NAVIGATION*/
	#header ul#main-nav { width:778px; height:40px; position:absolute; top:76px; left:158px; background:url(../imgs/header/main-nav.png) no-repeat 0 0}
	#header ul#main-nav li {float:left;}
	#header ul#main-nav a { float:left; display:block; text-indent:-9999px; background:url(../imgs/header/main-nav.png) no-repeat; height:40px; margin-right:9px; display:inline}
	#header ul#main-nav li.nav1 a { width:138px; background-position: -4px 0; margin-left:4px}
	#header ul#main-nav li.nav2 a {width:107px; background-position: -151px 0; }
	#header ul#main-nav li.nav3 a {width:204px; background-position: -267px 0;}
	#header ul#main-nav li.nav4 a {width:117px; background-position: -480px 0;}
	#header ul#main-nav li.nav5 a {width:80px; background-position: -606px 0;}
	#header ul#main-nav li.nav6 a {width:80px; background-position: -695px 0; margin-right:3px;}
	
	#header ul#main-nav li.nav1 a:hover { background-position: -4px -40px}
	#header ul#main-nav li.nav2 a:hover { background-position: -151px -40px}
	#header ul#main-nav li.nav3 a:hover { background-position: -267px -40px}
	#header ul#main-nav li.nav4 a:hover {background-position: -480px -40px}
	#header ul#main-nav li.nav5 a:hover {background-position: -606px -40px}
	#header ul#main-nav li.nav6 a:hover {background-position: -695px -40px}
	
	#urban-jungle #header ul#main-nav li.nav1 a { background-position: -4px -80px}
	#eco-jungle #header ul#main-nav li.nav2 a { background-position: -151px -80px}
	#latest-products ul#main-nav li.nav3 a {background-position: -267px -80px}
	#experts ul#main-nav li.nav4 a {background-position: -480px -80px}
	#about-bx ul#main-nav li.nav5 a { background-position: -606px -80px}
	#contact ul#main-nav li.nav6 a {background-position: -695px -80px}

/* FOOTER */
#footer {width:908px; height:100px; background:url(../imgs/panel/footer-bg.png) no-repeat left bottom; padding: 0 28px 0 26px; clear:both}
#footer li.link { float:left; margin: 6px 10px 8px 0; padding-left:10px; border-left: solid 1px #969696}
#footer li.link.first {padding-left:0; border-left: none}
#footer li.link a { font-size:1.2em; color:#707070; text-decoration:none}
#footer li.link a:hover { color:#707070; text-decoration: underline}
#footer a.akiko { display:block; width:110px; height:19px; text-indent:-9999px; background:url(../imgs/panel/akiko-logo.png) no-repeat 0 0; clear:both}

/* GLOBAL PANEL STYLES */
.panel-top {width:908px;background:url(../imgs/panel/top-panel-bg.png) no-repeat center bottom;padding: 0 28px 17px 26px; overflow:hidden}
.panel-bottom { width:908px; background:url(../imgs/panel/bot-panel-bg.png) no-repeat left top; padding: 0 28px 40px 26px}

	.panel-bottom a { color:#00576e; font-weight:bold; text-decoration:none}
	.panel-bottom a:hover { color:#669aa8; text-decoration:none}


/* CATS */
.panel-top ul#cats { margin-top:10px}
.panel-top ul#cats li { float:left; margin:0 10px 0 0; padding-right:10px; /*text-transform:uppercase;*/ font-weight:bold; line-height:20px; white-space:nowrap}
#wrapper .panel-top ul#cats li.last { background:none; margin-right:0; padding-right:0}
.panel-top ul#cats li a { font-size:1.5em; text-decoration:none;}
.panel-top ul#cats li a:hover {text-decoration:none}

	/* current state */
	#wrapper .panel-top ul#cats li.current a,
	#wrapper .panel-top ul#cats li.current a:hover {color:#00576e;}
	
	#eco-jungle .panel-top ul#cats li{background:url(../imgs/banner/eco-sn-divide.png) no-repeat right 4px}
	#eco-jungle .panel-top ul#cats li a {color:#8ac600;}
	#eco-jungle .panel-top ul#cats li a:hover {color:#b9dd66;}
	
	#urban-jungle .panel-top ul#cats li{background:url(../imgs/banner/jungle-sn-divide.png) no-repeat right 4px}
	#urban-jungle .panel-top ul#cats li a {color:#ef9605;}
	#urban-jungle .panel-top ul#cats li a:hover {color:#f5c069;}

/* SUB NAV */
.panel-top #sub-nav { clear:both; padding: 10px 0}
.panel-top #sub-nav ul { float:left; width:25%}
.panel-top #sub-nav ul li { padding: 0 10px 0 0; list-style:disc inside;}
.panel-top #sub-nav ul li a { text-decoration:none; font-size:1.2em; color:#00576e;}
.panel-top #sub-nav ul li a:hover { text-decoration:underline}

#eco-jungle .panel-top #sub-nav ul li a { }
#eco-jungle .panel-top #sub-nav ul li {color:#8ac600}

#urban-jungle  .panel-top #sub-nav ul li a { }
#urban-jungle  .panel-top #sub-nav ul li {color:#ef9605}



/* HOME */
#home .panel-top { height:475px; padding-bottom:0}
#home .panel-top p { background:url(../imgs/header/title.png) no-repeat top center; width:100%; height:17px; text-indent:-9999px; text-align:center; clear:both;}
#home .panel-bottom {  padding-bottom:0}
#home .panel-bottom .left { float:left; width:454px; height:179px; background:url(../imgs/panel/catalogues.png) no-repeat top right; position:relative}
#home .panel-bottom .left a.catalogue { display:block; height:150px; width:130px; position:absolute; top:5px; right:35px;}
#home .panel-bottom .right { float:left; width:430px; height:179px; padding-left:18px; /*background:url(../imgs/panel/question.png) no-repeat 3px 6px*/ position:relative}
#home .panel-bottom .right img { position:absolute; top:0; right:0}
#home .panel-bottom h2 { font-size:2em; margin: 20px 0 5px; text-transform:uppercase; width:200px}
#home .panel-bottom p { font-size:1.1em; margin: 0 175px 0 0}
#home .panel-bottom p.more { font-size:12px; margin: 10px 0 0;width:200px}

#home-flash { height:311px; background:#eee}
#home-links { background:url(../imgs/panel/splat-1.png) no-repeat 217px 0; padding:14px 0 0;}
#home-links ul.left { width:442px;  float:left; margin: 0 0 15px 0}
#home-links ul.right { width:412px; float:right; margin: 0 23px 20px 0}

#home-links ul.left li,
#home-links ul.right li {float:left; font-size:14px; line-height:20px; padding-right:10px; margin-right:10px; font-weight:bold}
#home-links ul.left li {background:url(../imgs/banner/jungle-sn-divide.png) no-repeat right 4px}
#home-links ul.right li {background:url(../imgs/banner/eco-sn-divide.png) no-repeat right 4px}

#home-links ul.left li a,
#home-links ul.right li a {float:left;display:inline;text-decoration:none; white-space:nowrap}
#home-links ul.left li a {color:#EF9605;}
#home-links ul.left li a:hover {color:#f5c069;}
#home-links ul.right li a {color:#8AC600;}
#home-links ul.right li a:hover {color:#b9dd66;}

	/* Left links 
	#home-links ul.left li a {background:url(../imgs/home-left-links.png) no-repeat;}
			
	#home-links ul.left li.nav1 a { width:105px; background-position: 0 0; margin:0 21px 0 0}
	#home-links ul.left li.nav2 a { width:238px; background-position: -126px 0;}
	
	#home-links ul.left li.nav3 a { width:111px; background-position: 0 -17px; margin:5px 21px 0 0}
	#home-links ul.left li.nav4 a { width:126px; background-position: -132px -17px; margin:5px 21px 0 0}
	#home-links ul.left li.nav5 a { width:108px; background-position: -279px -17px; margin:5px 0 0 0}
	
	#home-links ul.left li.nav6 a { width:144px; background-position: 0 -35px; margin:6px 21px 0 0}
	#home-links ul.left li.nav7 a { width:126px; background-position: -165px -35px; margin:6px 20px 0 0}
	#home-links ul.left li.nav8 a { width:113px; background-position: -311px -35px; margin:6px 0 0 0}
	
	#home-links ul.left li.nav9 a { width:118px; background-position: 0 -52px; margin:5px 29px 0 0}
	#home-links ul.left li.nav10 a { width:142px; background-position: -147px -52px; margin:5px 0 0 0}
	
	#home-links ul.left li.nav1 a:hover { background-position: 0 -64px; }
	#home-links ul.left li.nav2 a:hover { background-position: -126px -64px;}
	
	#home-links ul.left li.nav3 a:hover { background-position: 0 -81px; }
	#home-links ul.left li.nav4 a:hover { background-position: -132px -81px; }
	#home-links ul.left li.nav5 a:hover { background-position: -279px -81px;}
	
	#home-links ul.left li.nav6 a:hover { background-position: 0 -99px;}
	#home-links ul.left li.nav7 a:hover { background-position: -165px -99px; }
	#home-links ul.left li.nav8 a:hover { background-position: -311px -99px;}
	
	#home-links ul.left li.nav9 a:hover { background-position: 0 -116px;}
	#home-links ul.left li.nav10 a:hover { background-position: -147px -116px;}*/
			
	/* Right links 
	#home-links ul.right li a {background:url(../imgs/home-right-links.png) no-repeat;}
	
	#home-links ul.right li.nav1 a { width:129px; background-position: 0 0; margin:0 21px 0 0}
	#home-links ul.right li.nav2 a { width:262px; background-position: -150px 0;}
	
	#home-links ul.right li.nav3 a { width:294px; background-position: 0 -17px; margin:5px 0 0 0}
	
	#home-links ul.right li.nav4 a { width:276px; background-position: 0 -35px; margin:6px 0 0 0}
	
	#home-links ul.right li.nav5 a { width:160px; background-position: 0 -52px; margin:5px 21px 0 0}
	#home-links ul.right li.nav6 a { width:162px; background-position: -181px -52px; margin:5px 0 0 0}
	
	#home-links ul.right li.nav1 a:hover { background-position: 0 -64px; }
	#home-links ul.right li.nav2 a:hover { background-position: -150px -64px;}
	
	#home-links ul.right li.nav3 a:hover { background-position: 0 -81px;}
	
	#home-links ul.right li.nav4 a:hover { background-position: 0 -99px;}
	
	#home-links ul.right li.nav5 a:hover { background-position: 0 -116px;}
	#home-links ul.right li.nav6 a:hover { background-position: -181px -116px;}*/


/* PRODUCT LISTING PAGES */
#eco-jungle .panel-bottom,
#urban-jungle .panel-bottom,
#latest-products .panel-bottom {width:919px; padding: 20px 21px 40px 22px}

#eco-jungle .inside,
#urban-jungle .inside,
#latest-products .inside { width:100%; background:url(../imgs/panel/splat-2.png) no-repeat 185px 105px}

#intro {}
#intro p { font-size:1.2em; padding-top:10px}

.page-controls { padding: 0 0 12px}
.page-controls p { float:left; font-size:1.6em ; margin-right:30px; font-weight:bold; color:#000}
.page-controls ul { float:left; background:url(../imgs/product/next-previous-buttons.png) no-repeat 0 0}
.page-controls ul li { float:left;}
.page-controls ul li a { float:left; display:block; height:29px; background:url(../imgs/product/next-previous-buttons.png) no-repeat; text-indent:-9999px; display:inline}
.page-controls ul li.previous a { width:195px;  background-position: 0 0; margin-right:18px;}
.page-controls ul li.next a {width:162px;  background-position: -213px 0;}
.page-controls ul li.previous a:hover { background-position: 0 -29px;}
.page-controls ul li.next a:hover {background-position: -213px -29px;}

.pagination { margin-top:-3px; float:left}
.pagination a { font-size:1.6em; float:left; display:block; padding:3px 8px  }
.pagination a.current { background:#00576E; color:#fdd100}

.product-row {position:relative; width:100%; margin-top:20px; clear:both}
.product-row.top {margin-top:0}
.product { float:left; width:223px; margin-left:9px; padding-bottom:40px; display:inline;}
.product.first { margin-left:0}
.product .thumb {width:214px; height:113px; background:url(../imgs/product/thumb-bg-trans.png) no-repeat 0 0; margin-bottom:5px; padding: 7px 0 0 9px}
.product .desc { margin-left:5px; width:200px}
.product .desc h3 { font-size:1.4em; color:#008fc5; margin-bottom:7px; text-transform:uppercase}
.product .desc p { font-size:1.1em;}
.product .desc a.more-1 {position:absolute; bottom:0;left:5px}
.product .desc a.more-2 {position:absolute; bottom:0;left:237px}
.product .desc a.more-3 {position:absolute; bottom:0;left:469px}
.product .desc a.more-4 {position:absolute; bottom:0;left:701px}

/* PRODUCT DETAIL */
.detail .panel-bottom { position:relative; }
.detail .panel-bottom .left { width:365px; float:left; margin-right:30px }
.detail .panel-bottom .right { width:365px; float:left }
.detail .panel-bottom h3 { font-size:2em; margin-bottom:15px; clear:both}
.detail .panel-bottom h4 { font-size:1.2em; margin-bottom:3px}
.detail .panel-bottom h4.line, .detail .panel-bottom h3.line { border-top: dashed 1px #b2b2b2; padding-top: 5px}
.detail .inside { width:100%; background:url(../imgs/panel/splat-2.png) no-repeat 200px 100px;}
.detail .chars { position:absolute; top:50px; right:28px}
.detail .panel-bottom p { font-size:1.4em; margin-bottom:15px;}

.detail .panel-bottom .quote-form { padding:10px; background:#cccccc; border-top: dashed 1px #b2b2b2; margin-bottom:15px; margin-top:30px}
.detail .panel-bottom .quote-form div.pfield {margin-bottom:5px; clear:both; width:100%; overflow:hidden; height:22px}
.detail .panel-bottom .quote-form div.pfield label {font-size:1.1em; font-weight:bold; color:#00576e; float:left; width:125px}
.detail .panel-bottom .quote-form div.pfield input { background:#fff; padding:4px; border:none; font-size:1.1em; font-weight:bold; color:#00576e; width:50px; float:left;}
.detail .panel-bottom .quote-form div.pfield.check input { width:13px; height:13px;}
.detail .panel-bottom .quote-form input.but { float:right; margin-top:10px}

.detail .panel-bottom .right img.pic { border: solid 1px #9b9b9b; margin-bottom:10px}

/* GENERIC HEADINGS */
#about-bx .panel-bottom h3,
#experts .panel-bottom h3,
#contact .panel-bottom h3,
#request-cat .panel-bottom h3,
#basket .panel-bottom h3,
#sample-request .panel-bottom h3{ font-size:2em; margin-bottom:15px; text-transform:uppercase}

/* ABOUT BX */
#about-bx .panel-bottom { position:relative; padding-top:20px }
#about-bx .inside { width:100%; background:url(../imgs/panel/splat-2.png) no-repeat 200px 100px}
#about-bx .chars { position:absolute; top:50px; right:9px}
#about-bx .panel-bottom p { font-size:1.1em; margin-bottom:15px; width:40% }

/* ASK THE EXPERTS */
#experts .panel-bottom {  position:relative; padding-top:20px }
#experts .inside { width:100%; background:url(../imgs/panel/splat-2.png) no-repeat 200px 100px; padding-bottom:50px}
#experts .chars { position:absolute; top:50px; right:9px}
#experts .panel-bottom p { font-size:1.4em; margin-bottom:15px; width:475px }
#experts .panel-bottom p.intro {font-size:1.6em; color:#AACF38; font-weight:bold}
#experts .panel-bottom h4 { font-size:1.5em; margin-bottom:15px;}
#experts .inside input.but { margin: 10px 0 0 416px}

#experts div.field { position:relative; margin-bottom:5px}
#experts div.field label { position: absolute; top:4px; left:5px; font-size:1.1em; font-weight:bold; color:#00576e;}
#experts div.field input,
#experts div.field textarea { width:475px; background:#efefef; padding:4px; border:none; font-size:1.1em; font-weight:bold; color:#00576e}
#experts div.field textarea {height:60px}

#experts div.field-set { position:relative; margin: 0 0 10px;}
#experts div.field-set legend { font-size:1.1em; font-weight:bold; color:#00576e; padding:0 0 5px;}
#experts div.field-set label { font-size:1.1em; float:left; padding: 0 0 0 8px; margin: 0 40px 0 0}
#experts div.field-set input {float:left}

/* CONTACT */
#contact .panel-bottom { position:relative; padding-top:20px }
#contact .inside { width:100%; background:url(../imgs/panel/splat-2.png) no-repeat 200px 100px; padding-bottom:200px}
#contact .chars { position:absolute; top:50px; right:9px}
#contact .map-but {position:absolute;top:131px;left:205px}
#contact .panel-bottom p { font-size:1.4em; margin-bottom:15px; width:40% }
#contact .panel-bottom p.nums { font-size:2em; color:#00576e}
#contact .panel-bottom h4 { font-size:1.5em; margin-bottom:10px;}

/* REQUEST CATALOGOUE */
#request-cat .panel-bottom {  position:relative; padding-top:20px }
#request-cat .inside { width:100%; background:url(../imgs/panel/splat-2.png) no-repeat 200px 100px; padding-bottom:50px}
#request-cat .chars { position:absolute; top:50px; right:14px}
#request-cat .panel-bottom p { font-size:1.4em; margin-bottom:15px; width:475px }
#request-cat .inside input.but { margin: 10px 0 0 416px}

#request-cat div.field { position:relative; margin-bottom:5px}
#request-cat div.field label { position: absolute; top:4px; left:5px; font-size:1.1em; font-weight:bold; color:#00576e;}
#request-cat div.field input,
#request-cat div.field textarea { width:475px; background:#efefef; padding:4px; border:none; font-size:1.1em; font-weight:bold; color:#00576e}
#request-cat div.field textarea {height:60px}

#request-cat div.field-set { position:relative; margin: 0 0 10px;}
#request-cat div.field-set legend { font-size:1.1em; font-weight:bold; color:#00576e; padding:0 0 5px;}
#request-cat div.field-set label { font-size:1.1em; float:left; padding: 0 0 0 8px; margin: 0 40px 0 0}
#request-cat div.field-set input {float:left}

/* BASKET */
#basket .panel-bottom { position:relative; padding-top:20px }
#basket table {margin-bottom:2.7em; width:908px}
#basket table th {font-size:1.4em; font-weight:bold; color:#00576E; border-bottom:2px solid #BFBFBF; padding-bottom:0.6em; text-align:left}
#basket table td {vertical-align:top; padding-bottom:1em; border-bottom:1px solid #ccc;}
#basket table td.image {width:245px; padding-top:2em;}
#basket table td.desc {width:335px; padding-top:2.9em;}
#basket table td.info {width:245px; padding-top:2.9em;}
#basket table td.action {width:83px; padding-top:2.9em;}
#basket table td h4 {font:1.1em Verdana,Arial, sans-serif; font-weight:bold; color:#00ADEF; margin-bottom:0.1em;}
#basket table td p {font-size:1.1em; line-height:1.2em; color:#898989; margin-bottom:1.15em;}
#basket table td img {border:1px solid #F5F5F5;}
#basket p.update {float:left; clear:both}
#basket p.submit {float:right;}
p.cost { float:left; margin:-20px 0 5px 0; font-weight:bold; font-size:1.1em}
input#Cost { float:right; margin:-20px 0 5px 15px}


/* SAMPLE REQUEST */
#sample-request .panel-bottom {  position:relative; padding-top:20px }
#sample-request .inside { width:100%;}
#sample-request .panel-bottom p { font-size:1.4em; margin-bottom:15px; width:475px }
#sample-request .inside input.but { margin: 10px 0 0 416px}
#sample-request .panel-bottom em { color:#F00}
#sample-request div.field { position:relative; margin-bottom:5px}
#sample-request div.field label { position: absolute; top:4px; left:5px; font-size:1.4em; font-weight:bold; color:#00576e;}
#sample-request div.field input,
#sample-request div.field textarea { width:475px; background:#efefef; padding:4px; border:none; font-size:1.1em; font-weight:bold; color:#00576e}
#sample-request div.field textarea {height:60px}
#sample-request div.field-select { margin-bottom:5px }
#sample-request div.field-select label {font-size:1.1em; font-weight:bold; color:#00576e; display:block; margin-bottom:4px}
#sample-request div.field-select select {font-size:1.1em; font-weight:bold; color:#00576e; margin-bottom:5px; width:475px; background:#efefef;}

#sample-request td label { font-size:1.4em}

/* SITEMAP */
.sitemap .maincat { font-size: 1.5em }
.sitemap .maincat li { padding-bottom: 4px }
.sitemap .maincat .subcat li { padding-bottom: 2px }
.sitemap .maincat li.eco a { color: #8AC600 }
.sitemap .maincat li.urban a { color: #EF9605 }
.sitemap .subcat { font-size: 12px; padding-left: 20px; padding-bottom: 10px }