@charset "utf-8";

/*
	Niko Distribution Ltd.
	VERSION 1.0  00/00/0000
	
	CONTENTS ----------
		
		1.BODY
		2.HEADINGS
		3.TEXT
		4.LINKS
		5.IMAGES
		6.TABLES
		7.LAYOUT
		8.MASTHEAD
		9.NAVIGATION
		10.HOME
		11.CATEGORIES
		12.FOOTER
		13.FORMS
	   
    -------------------
	
	COLOURS ----------
		
		TEXT DARK #444
		TEXT LIGHT #777
		DIESEL DARK #394a59
		DIESEL MED #5273
		DIESEL LIGHT #94989d
		BGD GREY DARK #d7d7d7
		BGD GREY LIGHT #f2f2f2
		BORDERS/LINES #ccc
		LINKS #0183d9

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


/* 1.BODY
---------------------------------------------------------------------- */

body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:0.75em /* 12px */; line-height:1.5; color:#444; background:#94989d; }

ul#nav-access { position:absolute; top:-9999px; left:-9999px; }



/* 2.HEADINGS
---------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 { font-weight:bold; color:#394a59; }
/* 0.92em - 11px, 1.08em - 13px, 1.17em - 14px, 1.33em - 16px, 1.5em - 18px, 1.67em - 20px, 2em - 24px, 3em - 36px */
h1 { font-size:3em; line-height:1em; margin-bottom:0.5em; }
h2 { font-size:2em; line-height:1em; padding-bottom:1em; margin-bottom:0.75em; border-bottom:1px dotted #d4d4d4; }
h3 { font-size:1.33em; line-height:1em; margin-bottom:1em; } */
h4 { font-size:1.17em; line-height:1.25em; margin-bottom:1.25em; }
h5 { font-size:1em; }
h6 { font-size:1em; }



/* 3.TEXT
---------------------------------------------------------------------- */

p { margin-bottom:1.5em; }

hr { display:none; }

blockquote { margin:1.5em; font-style:italic; }
blockquote p {  } 
blockquote cite {  }

abbr, acronym { border-bottom:1px dotted #777; }
address { margin:0 0 1.5em 0; font-style:italic; }
del { color:#777; }
dfn { font-weight:bold; }
em { font-style:italic; }
strong { font-weight:bold; color:#394a59; }
sup { font-size:0.75em; position:relative; top:-3px; }
sub { font-size:0.75em; position:relative; bottom:-2px; }

/* Lists */
ul, ol { margin: 0 1.5em 1.5em 1.5em; }
li ul, li ol { margin:0 1.5em; }

ul { list-style:disc; }
ol { list-style:decimal; }

dl { margin:0 0 1.5em 0; }
dl dt { font-weight:bold; }
dd { margin-left:1.5em;}

/* Misc Classes */
.small { font-size:.92em; margin-bottom:1.875em; line-height:1.875em; }
.large { font-size:1.17em; line-height:1.25em; margin-bottom:1em; }
.hide { display:none; }

.quiet { color:#666; }
.loud { color:#394a59; font-weight:bold; }
.warning { color:#0183d9; font-weight:bold; }
.enlarge { font-size:0.92em; padding:0.5em 0 0.5em 18px; background:url(../img/bullet-plus.gif) left 50% no-repeat; clear:left; }
.external { padding-right:10px; background:url(../img/icon-external.gif) no-repeat right 10%; }
.pdf { padding-right:15px; background:url(../img/icon-pdf.gif) right 50% no-repeat; }
.up { font-size:0.92em; text-align:right; padding-right:15px; background:url(../img/arrow-up.gif) right 50% no-repeat;  }

.first { margin-left:0; padding-left:0; }
.last { margin-right:0; padding-right:0; }
.top { margin-top:0; padding-top:0; }
.bottom { margin-bottom:0; padding-bottom:0; }



/* 4.LINKS
---------------------------------------------------------------------- */

a:link, a:visited { color:#0183d9; text-decoration:none; }
a:hover, a:active { color:#0183d9; text-decoration:underline; }

a:focus { outline:1px #999 dotted; }



/* 5.IMAGES
---------------------------------------------------------------------- */

img { border:none; }

img.fl { float:left; margin:0 40px 20px 0; border:1px solid #d4d4d4; }
img.fr { float:right; margin:0 0 40px 40px; }
img.detail { float:left; margin:0 8px 8px 0; }
img.last { float:left; margin:0 0 8px 0; }



/* 6.TABLES
---------------------------------------------------------------------- */

table { width:100%; background-color:#f2f2f2; }
th { font-weight:bold; text-align:left; padding:0.4em 0 0.4em 18px; border-bottom:1px solid #fff; background-color:#e9e9e9; }
td { color:#777; padding:0.4em 0 0.4em 18px; border-bottom:1px solid #fff; }
tr:hover { background-color:#e9e9e9; }
thead tr:hover { background-color:transparent; }



/* 7.LAYOUT
---------------------------------------------------------------------- */

div#wrapper { width:920px; margin:0 auto 20px auto; padding:0 20px 20px 20px; background:#fff; box-shadow:0 0 8px #394a59; -webkit-box-shadow:0 0 8px #394a59; -moz-box-shadow:0 0 8px #394a59; border-bottom-left-radius:6px; border-bottom-right-radius:6px; -webkit-border-bottom-left-radius:6px; -webkit-border-bottom-right-radius:6px; -moz-border-radius-bottomleft:6px; -moz-border-radius-bottomright:6px; }

div#masthead { width:920px; height:154px; position:relative; border-top:4px solid #394a59; background:#fff url(../img/logo-niko-wave.gif) no-repeat 838px 28px; }
div#breadcrumb { margin-bottom:20px; padding:7px 20px 8px 12px; width:888px; position:relative; background:#e0e0e0 url(../img/bgd-breadcrumb.gif) repeat-x 0 bottom; }

div#content { float:left; width:920px; }

/* One Column */
body.oneCol div#content-pri { float:left; width:920px; padding-bottom:20px; }
*:first-child+html body.oneCol div#content-pri { padding-bottom:10px;/*Fix IE 7 Double Padding bottom*/ }
body.oneCol div#content-sec { display:none; }
body.oneCol div#content-side { display:none; }

/* Two Columns */
body.twoCol div#content-pri { float:left; width:730px; margin-left:190px; margin-bottom:0; min-height:500px; height:auto !important; height:500px; }
body.twoCol div#content-sec { display:none; }
body.twoCol div#content-side { float:left; width:170px; margin-left:-920px; padding-top:18px; background:url(../img/bgd-divider-short.png) center 0 no-repeat; }

/* Three Columns */
body.threeCol div#content-pri { float:left; width:480px; margin-left:190px; margin-bottom:0; }
body.threeCol div#content-sec { float:right; width:230px; }
body.threeCol div#content-side { float:left; width:170px; margin-left:-670px; padding-top:18px; background:url(../img/bgd-divider-short.png) center 0 no-repeat; }

div#content-pri, div#content-sec, div#content-side { display:inline; } /* IE6 double margin fix */

div#footer { clear:both; width:920px; background:#394a59 url(../img/bgd-footer-top.gif) center 0 no-repeat; }
div#footer-inner { position:relative; padding:10px; color:#94989d; font-size:0.92em; line-height:1; background:url(../img/bgd-footer-bot.gif) center bottom no-repeat; }

/* Various column sizes with right margins */
div.span-168, div.span-170, div.span-215, div.span-240, div.span-293, div.span-294, div.span-470, div.span-920 { float:left; margin-right:20px; }

/* The last column in a row needs this class. */
.last, div.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-168 { width:64px; }
.span-170 { width:140px; }
.span-215 { width:140px; }
.span-240 { width:216px; }
.span-293 { width:292px; }
.span-294 { width:368px; }
.span-470 { width:444px; }
.span-920 { width:920px; margin:0; }

/* Border on right hand side of a column. */
div.border { padding-right:9px; margin-right:10px; border-right:1px solid #ccc; }

/* Add a gutter above/below an element */
.prepend-top { margin-top:1.5em; }
.append-bottom { margin-bottom:1.5em; }

/* Clearing floats without extra markup by PiE [http://www.positioniseverything.net/easyclearing.html] */
.clearfix:after, .container:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix, .container { display: block; }

/* Regular clearing */
.clear { clear:both; }



/* 8.MASTHEAD
---------------------------------------------------------------------- */

div#masthead h1 { margin:0; position:absolute; left:30px; top:40px; width:136px; text-indent:-9999px; overflow:hidden; background:url(../img/logo-niko.gif) 0 0 no-repeat;}
div#masthead h1 a { display:block; height:73px; background:url(../img/niko-logo.gif) 0 0 no-repeat; }
#home div#masthead h1 a { cursor:default; }

/*
div#masthead ul#contact { position:absolute; right:35px; bottom:62px; margin:0; list-style:none; text-align:right; color:#394a59; font-size: 1.33em; font-weight:bold; line-height:1.15em; }
div#masthead ul#contact span { color:#0183d9; }
div#masthead ul#contact a { color:#394a59; }
div#masthead ul#contact a:hover { text-decoration:none; color:#0183d9; }
*/

div#masthead ul#contact { display:none; }



/* 9.NAVIGATION
---------------------------------------------------------------------- */

/* Primary navigation */
ul#nav-pri { margin:0; width:920px; font-size:1em; line-height:1; font-weight:bold; position:absolute; left:0; bottom:0; overflow:hidden; background:url(../img/bgd-nav-pri.gif) right 10px no-repeat; }
ul#nav-pri li { margin:0; padding:0; display:block; float:left; border-right:1px solid #fff; background:#394a59 url(../img/bgd-tab-left.gif) no-repeat 0 0; }
ul#nav-pri li:hover { background-position:0 -40px; }
ul#nav-pri li a { padding:10px 15px; display:block; color:#fff; text-decoration:none; background:transparent url(../img/bgd-tab-right.gif) no-repeat right 0; }
ul#nav-pri li a:hover { color:#f2f2f2; }

/* currently selected nav-pri item */
ul#nav-pri li.here { background:#e2e2e2 url(../img/bgd-tab-left-here.gif) 0 0 no-repeat; }
ul#nav-pri li.here a, ul#nav-pri li.here a:hover { color:#394a59; background:transparent url(../img/bgd-tab-right-here.gif) right 0 no-repeat; }

/* Secondary navigation */
ul#nav-sec { margin:0; width:170px; border-top:1px dotted #d4d4d4; }
ul#nav-sec li { margin:0; display:block; list-style:none; font-weight:bold; }
ul#nav-sec li span { padding:5px 5px 5px 10px; display:block; color:#94989d; text-decoration:none; cursor:pointer; border-bottom:1px dotted #d4d4d4; background:url(../img/bgd-nav-sec.gif) 0 50% no-repeat; }
ul#nav-sec li a { padding:5px 5px 5px 10px; display:block; color:#94989d; text-decoration:none; border-bottom:1px dotted #d4d4d4; background:url(../img/bgd-nav-sec.gif) 0 50% no-repeat; }
ul#nav-sec li a:hover { text-decoration:none; color:#394a59; }

ul#nav-sec li ul { margin:0; font-size:0.92em; display:none;/* hide sub-lists in tree menu */ }
ul#nav-sec li ul li { margin:0; font-weight:normal; }
ul#nav-sec li ul li a { padding:4px 0 4px 20px; display:block; background:0; }
ul#nav-sec li ul li a:hover { text-decoration:none; color:#0183d9; }

/* currently selected nav-sec items */
ul#nav-sec li span.cur { padding-left:15px; color:#394a59; background:url(../img/bgd-nav-sec-cur.gif) 0 58% no-repeat; }
ul#nav-sec li ul.cur a { color:#394a59; }
ul#nav-sec li ul.cur li a.choice { color:#0183d9; }

/* breadcrumb */
div#breadcrumb a { padding:0 12px 0 8px; color:#777; font-size:0.91em; background:url(../img/arrow-breadcrumb.gif) no-repeat right 55%; }
div#breadcrumb a.last { color:#394a59; cursor:default; background:none; }
div#breadcrumb a:hover.last { text-decoration:none; }
div#breadcrumb span { display:none; }



/* 10.HOME
---------------------------------------------------------------------- */

div#slideshow { width:920px; margin-bottom:20px; padding:45px 0; position:relative; overflow:hidden; background:url(../img/bgd-slideshow.png) center bottom no-repeat; }

div#slideshow img { position:absolute; right:1px; bottom:1px; z-index:8; opacity:0.0; }
div#slideshow img.active { z-index:10; opacity:1.0; }
div#slideshow img.last-active { z-index:9; }

div#slideshow div#slideshow-top { position:absolute; left:0; top:0; width:920px; height:10px; z-index:20; background:url(../img/bgd-slideshow-top-trans.png) center top no-repeat; }

div#slideshow-text { position:relative; width:485px; margin-left:1px; padding:0; z-index:15; }

div#slideshow-text-top { width:485px; height:10px; background:url(../img/bgd-slideshow-txt-top-trans.png) 0 0 no-repeat; }
div#slideshow-text-mid { padding:25px 43px; background:url(../img/bgd-slideshow-txt-mid-trans.png) 0 0 repeat; }
div#slideshow-text-bot { width:485px; height:10px; background:url(../img/bgd-slideshow-txt-bot-trans.png) 0 0 no-repeat; }

div#slideshow-text h2 { margin:0; padding:0 0 0.15em 0; font-size:2em; line-height:1em; border:none; }
div#slideshow-text h2 span { display:block; margin:0 0 12px 0; padding:0; border:0; width:266px; height:51px; text-indent:-9999px; background:url(../img/bgd-h2-welcome.png) 0 0 no-repeat; }
div#slideshow-text p { margin:15px 0 0; font-size:1.08em; }

div.promos { float:left; width:920px;}
div.promos div.promo-box { float:left; position:relative; width:140px; height:13em; padding:20px 140px 20px 25px; border:1px solid #d6d6d6; border-left:none; overflow:hidden; background:#fff url(../img/bgd-promos.png) 0 bottom repeat-x; }
div.promos div.promo-box h3 { font-size:1.83em; line-height:1.1em; margin-bottom:0.5em; }
div.promos div.promo-box img { position:absolute; right:0; bottom:0; }

div.promos div.promo-box.first { width:141px; border-left:1px solid #d6d6d6; border-top-left-radius:6px; border-bottom-left-radius:6px; -webkit-border-top-left-radius:6px; -webkit-border-bottom-left-radius:6px; -moz-border-radius-topleft:6px; -moz-border-radius-bottomleft:6px; }
div.promos div.promo-box.last { border-top-right-radius:6px; border-bottom-right-radius:6px; -webkit-border-top-right-radius:6px; -webkit-border-bottom-right-radius:6px; -moz-border-radius-topright:6px; -moz-border-radius-bottomright:6px;  }
div.promos div.promo-box.last img { right:8px; bottom:6px;  }

/* Rounded Buttons */
div.more-btn a { padding:3px 11px; color:#fff; background:#0183d9 url(../img/bgd-more-btn.png) 0 50% repeat-x; border-radius:11px; -webkit-border-radius:11px; -moz-border-radius:11px; }
div.more-btn a:hover { background-color:#394a59; text-decoration:none; }

div.promos div.promo-box div.more-btn { position:absolute; left:25px; bottom:20px; }



/* 11.CATEGORIES
---------------------------------------------------------------------- */

h2.section { margin-bottom:0; padding:30px; clear:both; border:none; background:url(../img/bgd-divider-long.png) center top no-repeat; }

/* rounded 920px section boxes */
div.boxSection { position:relative; width:920px; min-height:240px; height:auto !important; height:240px; margin-bottom:20px; background:url(../img/bgd-mod920-bot.png) center bottom no-repeat; overflow:hidden; }
div.boxSection img { position:absolute; right:1px; bottom:1px; z-index:1; }
div.boxSection div.boxSectionTop { position:absolute; left:0; top:0; width:920px; height:5px; background:url(../img/bgd-mod920-top-trans.png) 0 0 no-repeat; z-index:2; }

div.boxSectionText { position:relative; width:525px; margin-top:30px; padding:0 0 10px 40px; z-index:3; }
div.boxSectionText h2 {  }
div.boxSectionText p { font-size:1.08em; }

/* rounded 920px standard boxes with header options */
div.box920 { float:left; position:relative; width:920px; margin-bottom:0; background:url(../img/bgd-mod920-bot.png) center bottom no-repeat; }
div.box920 h2 { padding:30px 40px 0 40px; border:0; background:url(../img/bgd-mod920-top.png) center top no-repeat; }
div.box920 h3 { margin-bottom:0; padding:0.7em 30px; font-size:1.1em; line-height:1em; background:#c0c0c0 url(../img/bgd-h3-round.png) center 0 no-repeat; }

div.box920inner { float:left; position:relative; width:840px; padding:30px 40px 20px 40px; }

/* sub category lists */
div.subCat { float:left; width:180px; min-height:38em;/*Originally 48em*/ height:auto !important; height:38em; margin:0 40px 5px 0; padding:0; }
div.subCat.last { margin-right:0; }
div.subCat h4 { font-size:1.1em; margin-bottom:12px; padding:0.4em 0; border-top:1px dotted #d4d4d4; border-bottom:1px dotted #d4d4d4; }
div.subCat h4 a { color:#394a59; }
div.subCat h4 a:hover { color:#0183d9; text-decoration:none; }
div.subCat img { margin-bottom:10px; padding:0; border:1px solid #d4d4d4; }
div.subCat img:hover { border:1px solid #0183d9; }
div.subCat p { margin-bottom:0.75em; }
div.subCat ul { margin:0 0 20px 0; padding:0; width:180px; }
div.subCat ul li { margin:0; padding:0; list-style:none; border-bottom:1px dotted #d4d4d4; }
div.subCat ul li:first-child { border-top:1px dotted #d4d4d4; }
div.subCat ul li a { padding:4px 0; display:block; }

/* sub category pages */
div.boxCat { float:left; width:348px; font-size:1.08em; line-height:1.6em; }
div.boxCat ul { margin:0 0 20px 0 }
div.boxCat ul li { margin:0; list-style:none; }
div.boxCat ul li:first-child { border-top:1px dotted #d4d4d4; }
div.boxCat ul li a { padding:0.4em 0; display:block; border-bottom:1px dotted #d4d4d4; }

div.boxCatNav { float:right; width:140px; padding:0 20px 10px 20px; font-size:0.92em; background:#f2f2f2; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; }
div.boxCatNav h4 { width:140px; margin:0 0 0 -20px; padding:20px 20px 10px 20px; font-size:1.2em; }
div.boxCatNav ul { margin:0 0 1.5em 0; padding:0; }
div.boxCatNav ul li { list-style:none; }
div.boxCatNav ul li a { padding:3px 0; display:block; color:#394a59; font-weight:bold; text-decoration:none; border-bottom:1px dotted #d4d4d4; }
div.boxCatNav ul li a:hover { color:#0183d9; }
div.boxCatNav ul li ul li a { padding-left:10px; color:#777777; font-weight:normal; }
div.boxCatNav ul li ul li a:hover { color:#0183d9; }

/* split page into sections */
div.subSection { float:left; width:694px; margin-bottom:20px; padding:10px 0; border-bottom:1px dotted #d4d4d4; }
div.subSection img.fr { margin-bottom:20px; }



/* 12.PRODUCTS
---------------------------------------------------------------------- */

div.intro { margin-bottom:2em; padding:20px 18px 0 18px; background:url(../img/bgd-divider-med.png) center top no-repeat; }
div.intro h2:first-child { margin-bottom:0.2em; text-transform:uppercase; color:#94989d; font-size:1.2em; border:none; }
div.intro h2 { margin-bottom:0.75em; padding-bottom:0.9em; }
div.intro p { font-size:1.08em; }

div.box { margin-bottom:18px; padding:0 18px 0 18px; font-size:0.92em; border-bottom:1px solid #fff; background:#f2f2f2; }
div.box-outer { padding:0 18px 0 18px; }

div.box h3 { margin:0 -18px; padding:0.7em 18px; font-size:1.08em; line-height:1em; border-bottom:1px solid #fff; background:#e6e6e6 url(../img/bgd-h3.gif) 0 bottom repeat-x; }
div.box p { margin:1em 0; }
div.box a { color:#444; }
div.box img { margin:0.4em 2em 1em 0.2em; }

div.box ul { margin:1.1em 0; background-color:#f2f2f2; }
div.box ul li { margin:0; padding:0.2em 22px; list-style:none; background:url(../img/bullet-arrow.gif) left 0.4em no-repeat; }
div.box ul li.first { padding:0; background:none; }
div.box ul li ul li { margin:0 0 0 1.1em; padding:0.2em 0; list-style: disc; background:none; }

div.box table { margin-left:-18px; padding-bottom:0; width:480px; background:#f2f2f2; }

div.thumbnails ul { margin-bottom:20px; float:left; }
div.thumbnails ul { margin:0 0 0 -10px; list-style:none; float:left; }
div.thumbnails ul li { margin:0 0 10px 10px; padding:0; float:left; border-bottom:1px dotted #d4d4d4; }
div.thumbnails ul li:hover { border-bottom:1px solid #0183d9; }
div.thumbnails ul li img { display:block; }
div.thumbnails ul li a:focus { outline:none; }

div#content-side h4 { margin-bottom:1em; padding-left:12px; }

body#information div.intro { background:url(../img/bgd-divider-med2.png) center top no-repeat; }
body#information div.box { font-size:1em; background:#f2f2f2; }
body#information div.box  h3 { margin-bottom:1.5em; }
body#information div.box a { color:#0183d9; }
body#information div.box img { margin:0 3em 1.5em 100px }

.eco { background-color:#ecfde8; margin-left:-20px; margin-right:-20px; padding:15px 20px; }



/* 13.FOOTER
---------------------------------------------------------------------- */

div#footer ul { margin:0; list-style:none; }
div#footer ul li { margin:0 0 0 10px; padding:0 0 0 10px; display:inline; border-left:1px solid #94989d; }
div#footer ul li.first { margin-left:0; padding-left:5px; border:none; }

div#footer p { position:absolute; right:10px; top:10px; margin:0; color:#94989d; }
div#footer p a { margin:0 0 0 10px; padding:0 0 0 12px; border-left:1px solid #94989d; }
div#footer br { display:none; }
div#footer a { color:#fff; }



/* 14.FORMS
---------------------------------------------------------------------- */

form { width:100%; }

fieldset { float:left; width:480px; margin-bottom:20px; border-bottom:1px dotted #d7d7d7; }
legend { font-weight: bold; font-size:1.2em; }
label { float:left; width:110px; margin-right:20px; font-weight:bold; color:#394a59; }

/* For text fields, use class .title or .text */
input.text, input.title, textarea, select { margin-bottom:0.2em; border:1px solid #d7d7d7; }
input.text:focus, input.title:focus, textarea:focus, select:focus { border:1px solid #0183d9; }
input.radio {  }
input.submit { margin-left:130px;  }
input.submit:hover {  }

input.text, input.title { width: 200px; padding:5px; }
input.title { font-size:1.5em; }
textarea { width: 335px; height: 12em; padding:5px; }