/* lets reset things here via those friendly chaps at yahoo */
@import url('reset.css');
/* lets import our other stylesheets here */
@import url('colour.css');
@import url('type.css');

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 Body, Containers and Headings    */

body{
width: 100%;
}
html{overflow-y:scroll;}
#container{
width: 100%;
margin: auto;
margin-top: 0;
position:relative;
}
#branding{width:960px; margin:auto;position:relative; height:172px;}

#content-main{
position:relative;
}
#content{
clear: both;
padding-top: 23px;
padding-left: 10px;
}
#content p{
margin-bottom: 16px;
}
#content h1{
margin-left: -1px;
margin-bottom: 12px;
}
#content h2, #content h3, #content h4, #content h5, #content h6{
margin-bottom: 8px;
}
h6{
float: left;
padding-top: 0px;
padding-right: 3px;
}
#content-main.products h1{ margin:0px 0px 14px 0px }
#content-main.products h1 span{ display:block;}
.one p:first-child{margin:-10px 0px 23px 0px;}
.one p{padding-right:60px;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 Main Content List-items    */
 
#content li{
display: inline;
padding: 0px 10px 0px 10px;
}
#content li a{
display: inline;
height: 12px;
}
#content li a:hover{
padding-bottom: 10px;
}



/*~~~~~~~~~~~~~~~~~~~~~~~~
 Logo and Positioning   */

#logo{
width: 196px;
height: 172px;
position: relative;
display: block;
margin-left:-20px;
float:left;
}
#logo span{
width: 100%;
height: 100%;
position: absolute;
}

#finishoff{
width: 97px;
height: 34px;
top:1px;
right:0px;
position: absolute;}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~
 Navigation Positioning   */

#nav-main{
float:left;
width:780px;
padding:27px 0 2px 3px;
}
#nav-main li{
float: left;
display: block;
padding: 0px;
}
#nav-main li a{
display: block;
position:relative;
padding: 0px 60px 18px 50px;
}

#nav-main span{
width: 100%;
height: 100%;
position: absolute;
}
#nav-main #products a{width:66px; height:63px;}
#nav-main #about a{width:79px; height:63px;}
#nav-main #features a{width:112px; height:63px;}
#nav-main #contact a{width:78px; height:63px;}
#finishoff{ width:111px; height:34px; display:block; position:absolute; top:1px; right:0px;}
#product-intro, .one h2{}
.one h2{width:250px; margin-bottom:5px; padding-bottom:10px;}
#nav-sub li{float:left; display:block; padding:8px 20px 20px 28px}
#nav-sub{}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 Home Page Specific           */

#content-main{
clear:both;
width:960px;
margin:auto;
padding-top:2px;
}

/*~~~~~~~~~~~~~
 Products    */
/*#content-main.products h2{width:100%; margin-top:12px; padding:3px 0px 3px 10px; margin-left:-10px;}*/
#content-main.products .one{margin-right:60px; width:294px; padding:8px 0px 0px 20px;}
#content-main.products .two{width:570px; margin-top:-18px;}
#productlist li{float:none; padding:15px 0 18px 0; }
#productlist img{display:block; width:96px; height:96px; background:#000; margin-right:9px; }
#nav-supp{ height:25px; margin-left:-14px;}
#nav-supp li{ float:left; padding:0px 12px 8px 0px}
#nav-supp li a{ display:block; padding:5px 0px 5px 14px}
#main-images img{margin:3px 0px 18px 0px; display:block; width:580px; height:387px; background:#000; margin-right:9px;}
#main-images{ clear:left;}
/*#main-images li{ float:left;}*/
#product-intro li h3 a{display:block;}
#info-overview, #info-details, #info-instructions, #info-background{clear:both; padding-top:3px;}
#info-overview{}
#info-details ul li{display:block; float:left; padding:0 10px 13px 0;}
#info-details ul li a img{display:block;}
#info-details ul li a .zoom{width:24px; height:24px; position:absolute; bottom:0px; right:0px; display:block; z-index:3;}
#info-details ul li a{display:block; position:relative; margin-top:3px;}
#info-details, #info-instructions, #info-background, #info-download{ display:none; clear:both;}
#nav-supp li:focus, #nav-supp li a:focus, #nav-main li:focus, #nav-main li a:focus{ outline:none;}
#info-overview h3{}
#info-overview ul li ol li{padding:0; margin-left:18px;}
#info-details ol {padding:10px 0px 20px 0px;}
#info-details ol li{padding:0; margin-left:18px;}

#info-instructions h3{padding-bottom:6px;}
#order{width:132px; height:18px; position:relative; display:block; padding-top:12px; margin-left:-4px;}
#order span{ background:url(../media/images/order.png) no-repeat; position:absolute; width:100%; height:100%;}
#steps{ height:298px;  position:relative; border-bottom: solid 1px #BFEAED; margin-bottom:17px}
#steps.earloop{ height:256px;}
#steps img, #steps p{position:absolute;}
#steps img{top:23px;}
#step1 img{left:-10px;}
#step2 img{left:126px;}
#steps.earloop #step2 img{left: 140px;}
#step3 img{left:289px;}
#steps.earloop #step3 img{left:284px;}
#step4 img{left:430px;}
#steps p{top:132px; width:100px;}
#step1 p{left:0px;}
#step2 p{left:134px;width:128px;}
#steps.earloop #step2 p{left: 147px; width:100px;}
#step3 p{left:297px;}
#steps.earloop #step3 p{left:293px;}
#step4 p{left:436px;}


/*~~~~~~~~~~~~~~~~~~~
 Columns           */
.one {width:316px; padding:8px 18px 0px 20px; float:left;}
.two{width:600px; float:left;padding-top:11px;}
.two p{padding-bottom:18px;}
top:12px; margin-bottom:4px; }
.two > #info-instructions h3:first-child{margin-top:0px}
.two > #info-instructions h3:first-child{margin-top:0px}
#product-intro ul li {
padding-left:20px;
}

#info-overview, #info-overview ul{clear:both;}
#info-overview ul li, 
#info-instructions ul li, #info-background ul li{padding:0 0 6px 20px; margin-left:-20px;}
#info-overview ul#main-images li{ padding-bottom:0;}
#product-intro li{clear:left; padding:18px 0px 12px 0px;}
#product-intro li img{float:left; margin-right:14px;}
#product-intro li h3{display:block; float:left; width:160px;margin-top:-3px; padding-left:10px;}
#product-intro li ul{float:left; width:160px; padding-top:7px;}
#product-intro li ul li{float:left; width:160px; padding:0px 0px 0px 10px;}
#productlist img{float:left;}
#productlist li h3{float:left; width:150px;margin-top:-3px; padding-left:10px;}
#productlist li{clear:both;}

#international-orders{clear:both; margin-top:0px; margin-left:-20px;}
#international-orders h3{width:311px; height:146px; position:relative; }
#international-orders h3 span{
width: 100%;
height: 100%;
position: absolute;
}
#international-orders ul{
padding:30px 30px 10px 36px;
margin-top:-10px;
width:240px;
}
#international-orders ul li{
margin:11px 0px 11px 0px;
padding:0 20px 7px 5px;
display:block;
}
.bottom-cap{width:311px; height:11px; display:block;}

/* column2 */
#mainpic{position:relative; width:625px;}
#mainpic h1{
width:293px;
height:160px;
display:block;
position:absolute;
top:35px;
left:20px;
text-indent:-9999px;
z-index:9;
}
#mainpic h1 span{
display:block;
width: 100%;
height: 100%;
position: absolute;}
#mainpic img{float:left;  }
#mainpic ul{ float:left;display:block; width:605px; height:54px; padding-left:20px; margin-top:2px;}
#mainpic ul li{float:left; width:191px; padding-right:10px; line-height:1.3em;}
#mainpic ul h4{ position:relative; padding-top:9px;}
#mainpic ul li img{float:left; margin-top:-39px; position:relative; padding-right:8px; width:79px; height:79px;}
.article{width:270px; float:left; padding:0px 20px 0px 20px;}
.last{padding:0px 0px 0px 20px;}
.article h2{padding-top:41px;padding-bottom:13px;}
.article p{}

#content-main.contact .one img{padding-top:30px;}

/* uNIQUE Features */
#news{width:230px;}
#news li{ padding:12px 0px 6px 18px;}

.unique-pic{float:left; margin-left:-15px; padding-top:10px;}
#info-details .unique-pic{float:left; margin-left:-25px; padding-top:10px;}
#info-overview, #info-details{position:relative;}
#info-overview ul.special-info li{float:left;}
#info-overview ul.special-info, #info-details ul.special-info{
 clear:none;
 width:180px;
 float:left;
 padding:12px 0 0 0;
}

#info-overview ul.special-info li, #info-details ul.special-info li{padding-left:40px; display:block;}
#info-overview ul.special-info li:hover, #info-details ul.special-info li:hover{cursor:pointer;}
#info-overview ul.special-info li.first span{
display:block;
width:300px;
height:116px;
position:absolute;
top:75px;
left:80px;
}
#info-overview ul.special-info li.second span{
display:block;
width:298px;
height:68px;
position:absolute;
top:168px;
left:82px;
display:none;
}

#info-overview ul.special-info li.third span{
display:block;
width:300px;
height:60px;
position:absolute;
top:213px;
left:210px;
display:none;
}
/* hygienic spiel */
#hygienic-info{
display:none;
}
#hygienic-info img{float:right; padding-left:12px;}
p.hygienic{ cursor:pointer; height:19px; width:480px; display:block; margin-bottom:16px; padding:0 18px 0 0; overflow:hidden; }

/* info details */
h2.eco{clear:both; display:block;padding:5px;}
.eco span{padding:4px; white-space:pre;}
#info-details ul.special-info{width:210px;}
#info-details ul.special-info li{margin-left:-20px; padding:0px 0px 6px 60px;}
#info-details ul.special-info li.first span{
display:block;
width:221px;
height:87px;
position:absolute;
top:70px;
left:159px;
}

#info-details ul.special-info li.second span{
display:block;
width:294px;
height:264px;
position:absolute;
top:73px;
left:84px;
display:none;
}

#info-details ul.special-info li.third span{
display:block;
width:105px;
height:39px;
position:absolute;
top:253px;
left:263px;
display:none;
}
/*~~~~~~~~~~~
 Tables    */
 
fieldset{
padding: 14px;
margin-bottom:20px;
}
div.two > fieldset + fieldset{
margin-bottom:40px;
}
legend{
margin-left: -2px;
}
label{
display: block;
}
.col1{
width: 12%;
vertical-align: top;
}
.col2{
vertical-align: top;
}
table{ width:100%;  border-collapse:collapse;}
table td, table th{padding:2px 6px;}
table th{ font-weight:bold;}
/*~~~~~~~~~~~~~~~~~~
 Sitemap Page     */
 
#sitemap ul{
margin-bottom: 20px;
}
#sitemap ul li{
float: none;
display: block;
margin: 8px;
}
#sitemap ul li ul li{
display: block;
}
#sitemap ul li ul{
margin-left: 20px;
display: block;
float: none;
}
.clearfix{
clear: both;
display: block;
}


/*~~~~~~~~~~~~~~~~~~~~~
 SiteInfo/ Footer    */
 
#site-info{
clear: both;
width:100%;
margin:auto;
padding: 8px 0px 18px 0px;
margin-top: 35px;
height:100px;
}
#site-info ul{width:960px; margin:auto;}
#site-info li{
float: left;
padding:0px 12px 0px 0px;
}
#site-info li a{padding:0px 12px 0px 0px;}
#site-info li.right{
float: right;
}

/* misc styles */
.clearfix{
clear: both;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
ol.number{ list-style-type:decimal; margin:0 0 20px 20px}
img.test{display:block; margin-bottom:20px; margin-top:-4px;}
#about-intro{border-bottom: 1px solid #BFEAED; padding-bottom:4px; margin-bottom:14px; height:130px;}
#about-intro img{ float:left;}
#about-intro p{float:left; width:400px; padding:0px 0px 0px 24px}
/*#content-main.about{width:540px}
#content-main.about .one {margin-top:172px;}*/
#content-main.about .one ol li{padding-right:30px; list-style-type:decimal; margin-bottom:8px; padding-top:10px;}
.part1{float:left; width:45%; padding-right:68px;}
.part2{float:left; width:40%;}
.part2 img{padding:6px 0px 10px 0px;}