/* 
Copyright 2007 Total Bin Supplies. All Rights Reserved. 
Author of CSS: Tracey Tam, www.sevenzest.com
------------------------------------------------------

SECTIONS:
General Elements
Page Structure
Typography
Images
Links
Navigation
Table
Footer
Scroll
Forms

------------------------------------------------------ */
/* General Elements */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, select, textarea, p, a, span, blockquote, table, th, td {
margin: 0;
padding: 0;
}
body {
font: 11px/18px Verdana, Arial, Helvetica, sans-serif;
color: #555;
background: #322B2B;
}
/* Page Structure */
#wrap {
background: #fff url(images/bg.gif) 0 0 repeat-x;
width: 100%;
float: left;
}
#content {
width: 880px;
margin: 0 auto;
text-align: left;
}
#left {
width: 733px;
float: left;
padding: 0 0 20px 0;
display: inline;
}
#insideleft {
width: 200px;
float: left;
display: inline;
}
#middle {
width: 533px;
display: inline;
float: right;
}
#right {
width: 137px;
padding: 0 0 20px 0;
float: right;
color: #777; 
}
#footernav {
width: 502px;
margin: 10px 7px 0 7px;
display: inline;
float: left;
font-size: 10px;
}
#brochures {
background: url(images/downloadbg.gif) 0 0 no-repeat;
margin: 123px 0 0 0;
width: 137px;
height: 570px;
}
#gutter {
margin: 25px 0px 0 7px;
float: left;
display: inline;
}
#contentinside {
width: 502px;
padding: 10px;
margin: 0;
background: #fff;
}
.contactinfo {
width: 140px;
height: 90px;
padding: 5px 10px 5px 15px;
margin: 10px 5px;
float: left;
background: #d32a1c url(images/contactinfobg.gif) no-repeat;
}
/* Typography */ 
p {
padding: 6px 0; 
}
.contactinfo p, .contactinfo a{
color: #fff;
}
ul {
margin: 6px 0;
list-style: none;
display: block;
}
li {
padding: 0 0 0 20px;
}
ul.bulletlink {margin-left: 10px;
}
ul.bulletlink li {background: url(images/bullet_link.gif) 0 70% no-repeat; font-weight: bold; padding-top: 0.3em;}
ul.bulletlink li a {text-decoration: none; color:#3F3B3C;}
ul.bulletlink li a:hover {text-decoration: underline;}
#brochures ul {
margin: 3px 12px;
width: 113px;
}
#brochures li {
padding: 0;
margin: 0;
}
#footernav li {
display: inline;
padding: 0;
margin: 0 10px 0 0;
}
#contentinside p {
padding: 10px 0px 0 0px; 
width: 450px;
}
dl.item {
padding: 10px;
width: 502px;
float: left;
display: inline;
background: #fff url(images/dashed.gif) 0 100% repeat-x;
}
dl.itemfront {
padding: 10px;
width: 502px;
float: left;
display: inline;
border-top: 1px dotted  #BFBDA7;
background: #fff url(images/featured.gif) 100% 0 no-repeat;
}
dl.itemfront2 {
padding: 10px;
width: 502px;
float: left;
display: inline;
border-top: 1px dotted  #BFBDA7;
background: #fff url(images/newproduct.gif) 100% 0 no-repeat;
}
dl.itemfrontbrabantia {
padding: 10px;
width: 502px;
float: left;
display: inline;
border-top: 1px dotted  #BFBDA7;
background: #fff url(images/featured-brabantia.jpg) 100% 0 no-repeat;
}
dl.item dt {
float: left;
width: 108px;
}
dl.item dt img {
float: left;
}
dl.item dd {
margin-left: 128px;
}
dl.itemfront dt , dl.itemfront2 dt {
float: left;
width: 108px;
}
dl.itemfront dt img, dl.itemfront2 dt img {
float: left;
}
dl.itemfront dd, dl.itemfront2 dd  {
margin-left: 128px;
width: 300px;
}
dl.item db {
float: left;
width: 129px;
}
dl.item db img {
float: left;
}
dl.item dd {
margin-left: 128px;
}
dl.itemfront db , dl.itemfrontbrabantia db {
float: left;
width: 129px;
}
dl.itemfront db img, dl.itemfrontbrabantia db img {
float: left;
}
dl.itemfront dd, dl.itemfrontbrabantia dd  {
margin-left: 128px;
width: 274px;
}


h1 span, h3 span {
display: none;
}
h1 {
width: 177px;
height: 195px;
background: url(images/tbslogo.gif) 50% 50% no-repeat;
}
h2 {
font: bold 12px/18px Tahoma, Arial, Helvetica, sans-serif;
color: #fff;
padding: 6px 0px;
}
h2.header {
font: bold 14px/22px Arial, Helvetica, Verdana, sans-serif;
color: #fff;
margin: 37px 0px 0px 6px;
}
h3 {
font: bold 12px/18px Verdana, Arial, Helvetica, sans-serif;
color: #d11921;
margin: 12px 0 0 0;
}
h3.ourproducts {
background: #f5f4e6 url(images/ourproductsheader.gif) no-repeat;
height: 27px;
width: 522px;
}
h3.bins {
background:#f5f4e6 url(images/binsheader.gif) no-repeat;
height: 27px;
width: 522px;
}
h3.accessories {
background: #f5f4e6 url(images/accessories.gif) no-repeat;
height: 27px;
width: 522px;
}
h3.storage {
background: #f5f4e6 url(images/storageheading.gif) no-repeat;
height: 27px;
width: 522px;
}
h3.safety {
background: #f5f4e6 url(images/safetyheader.gif) no-repeat;
height: 27px;
width: 522px;
}
h3.recycling {
background: #f5f4e6 url(images/recycleheader.gif) no-repeat;
height: 27px;
width: 522px;
}
h3.about {
background: #f5f4e6 url(images/aboutheader.gif) no-repeat;
height: 27px;
width: 522px;
}
h3.enquiry  {
background: #f5f4e6 url(images/enquireheader.gif) no-repeat;
height: 27px;
width: 522px;
}
#brochures h3 {
height: 50px;
}
h4 {
font: bold 12px/18px Verdana, Arial, Helvetica, sans-serif;
color: #097F9F;
}
#header p {
font: normal 12px/18px Verdana, Arial, Helvetica, sans-serif;
color: #a3dbd8;
position: absolute;
bottom: 20px;
left: 130px;
}
/* Images */
#right img {
float: right;
margin: 0px 20px 0px 0;
background: #fff;
display: inline;
}
/* Links */
a {
color: #d32a1c;
text-decoration: underline;
}
#right a {
color: #555;
text-decoration: underline;
}
a:hover, a:active {
text-decoration: none;
}
.subnav a.current {
text-decoration: none;
}
a img {
border: none;
}
a#logo {
height: 163px;
width: 177px;
display: block;
}
a.more {
font: normal 9px/25px Verdana, Arial, Helvetica, sans-serif;
color: #d32a1c;
margin: 0 0 0 400px;
}
/* Navigation */
#nav {
width: 200px;
position: relative;
height: 307px;
float: left;
margin: 0 0 0 0px;
background: url(images/nav.gif) top left no-repeat;
}
#nav span { 
display: none; 
}
#nav ul {
margin: 0;
clear: both; 
}
#nav li { 
list-style: none;
}
#nav li, #nav a { 
width: 200px;
height: 28px;
display: block; 
position: absolute;
padding: 0;
}
#navhome {top: 9px;}
#navbins {top: 37px;}
#navaccessories {top: 65px;}
#navstorage {top: 93px;}
#navashtray {top: 121px;}
#navsafety {top: 149px;}
#navparts {top: 178px;}
#navrecycle {top: 206px;}
#navenquiry {top: 234px;}
#navabout {top: 261px;}
#navhome a:hover, #navhome.current { background:url(images/nav.gif) -200px -9px no-repeat;}
#navbins a:hover, #navbins.current { background:url(images/nav.gif) -200px -37px no-repeat;}
#navaccessories a:hover, #navaccessories.current { background:url(images/nav.gif) -200px -65px no-repeat;}
#navstorage a:hover, #navstorage.current { background:url(images/nav.gif) -200px -93px no-repeat;}
#navashtray a:hover, #navashtray.current { background:url(images/nav.gif) -200px -121px no-repeat;}
#navsafety a:hover, #navsafety.current { background:url(images/nav.gif) -200px -149px no-repeat;}
#navparts a:hover, #navparts.current { background:url(images/nav.gif) -200px -178px no-repeat;}
#navrecycle a:hover, #navrecycle.current { background:url(images/nav.gif) -200px -206px no-repeat;}
#navenquiry a:hover, #navenquiry.current { background:url(images/nav.gif) -200px -234px no-repeat;}
#navabout a:hover, #navabout.current { background:url(images/nav.gif) -200px -261px no-repeat;}
#nav li ul { display: none; position: absolute; top: 0; left: 132px; width: 150px; background: #fff; z-index: 99; border: 1px solid #E9E8E0; border-bottom: 0; }
#nav li ul li { border-bottom: 1px solid #E9E8E0; background: #fff; position: relative; width: auto; height: auto; }
#nav li ul li a {margin: 0; padding: 6px 10px; text-transform: none; text-decoration: none; position: relative; width: auto; height: auto; }
#nav li ul li a:hover { text-decoration: underline; background: none; }
#nav li:hover ul, #nav li.over ul { display: block; }
.subnav {
padding: 10px;
margin: 0;
background: #fff;
border-bottom: #ccc 1px solid;
width: 502px;
}
/* Table */
th {
font: bold 12px/20px Arial, Helvetica, sans-serif;
color: #221e1f;
background: #edeacf;
border: none;
width: 70px;
height: 25px;
text-align: center;
}
th.tablehead, {
background: #221e1f;
color: #ecebd3;
}
td.tablehead {
background: #edeacf;
}
td {
height: 25px;
text-align: center;
color: #251b11;
}
table.liners {
font: 11px/15px Arial, Helvetica, sans-serif;
color:#333333;
}
table.liners td {text-align: left; padding: 2px; border-bottom: 1px solid;  border-right: 1px solid;border-color: #ccc;}
table.liners tr.linerheader {background: #FFFBEF; font-style: italic;}

/* Footer */
#footer {
width: 100%;
clear: both;
text-align: center;
color: #555;
background: #322B2B;
border-top: 1px solid #333;
}
#footer p {
padding: 10px 0;
}
#footer a {
color: #999;
}
/* Slider */
#slider {
background: url(images/slidebg.gif) 0 0 repeat-x;
position: relative;
overflow: hidden;
width: 522px;
height: 164px;
color: #777;
float: left;
}
#controls {position: relative; }
#controls img {cursor: pointer; }
#previous {float: left; padding:0 0 0 10px; display: inline; background: #f5f4e6; margin: 130px 0 0 0; }
#next {float: right; padding:0 10px 0px 0; display: inline; background: #f5f4e6; margin: 130px 0 0 0;}
#binslide {
position: absolute;
top: 30px;
left: 0;
margin: 0 0 0 26px;
list-style: none;
padding: 0;
width: 6000px;
}
#slider ul li {
float: left;
margin: 0 2px 0 0;
display: inline;
padding: 0;
text-align: center;
}
#slider ul li img {
display: block;
}
#slider ul li a {
text-decoration: none;
padding: 5px 5px 12px 5px;
float: left;
display: block;
}
#slider ul li a:hover {
background: url(images/dot.gif) 50% 100% no-repeat;
}
/* Forms */
#form {
width: 422px;
padding: 10px;
margin: 0;
background: #fff;

}
label { 
width: 100px; 
float: left;
text-align: right;
display: block; 
font: normal 11px/18px Verdana, Helvetica, Arial, sans-serif;
color: #666;
}
input {
margin: 0 0 0 8px;
width: 200px;
border-style: double;
border-color: #ccc;
border-width: 1px;
background: #fff;
font: 12px/15px Verdana, Arial, Helvetica, sans-serif;
height: 18px;
padding: 2px;
}
select {
margin: 0 0 4px 10px;
border-style: double;
border-color: #ccc;
border-width: 2px;
background: #fff;
font: 10px/18px Verdana, Arial, Helvetica, sans-serif;
}
textarea { 
margin: 5px 0 0 8px;
width: 200px;
height: 150px;
border-style: double;
border-color: #ccc;
border-width: 1px;
background: #fff;
font: 12px/18px Verdana, Arial, Helvetica, sans-serif;
padding: 3px;
}
input.submit {
display: block;
margin: 0 0 0 108px;
width: 80px;
height: 25px;
background: #ed1c24;
color: #FFF;
font: bold 11px/18px Arial, Helvetica, sans-serif;
}