/*
-------------------------------------------------------- 
Mobile Truck Accessories and Warehouse
01/11/08
Author: otis and huckleberry :: otishuck.com
-------------------------------------------------------- 
*/

/* PAGE ELEMENTS
-------------------------------------------------------------*/

body {
margin: 0 0 0 0;
padding: 0 0 0 0;
background: #131316 url(exports/bg_body.gif) top repeat-x;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}

div#wrap {
margin: 0 auto;
padding: 0 0 0 0;
width: 733px;
text-align: left;
}

div#header {
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 733px;
height: 112px;
background: url(exports/bg_header.gif) left no-repeat;
}

div#navbar {
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 733px;
height: 55px;
background: url(exports/bg_navbar.gif) top no-repeat;
}

div#content_top {
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 733px;
height: 51px;
/*background defined on each page*/
}

div#content {
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 733px;
background: url(exports/bg_content.jpg) center repeat-y;
}

div#left_top {
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 218px;
height: 51px;
background: url(exports/blank_top.jpg) left no-repeat;
float: left;
}

div#right_top {
margin: 0 0 10px 0;
padding: 0 0 0 0;
width: 515px;
height: 217px;
background: url(exports/bg_flash.jpg) top no-repeat;
float: right;
}

div#left{
margin: 0 0 0 0;
padding: 0 0 0 19px;
width: 173px;
float: left;
}

div#right {
margin: 0 0 0 0;
padding: 0 19px 0 0;
width: 497px;
float: right;
}

div#rightpad {
margin: 0 auto;
padding: 0 0 0 0;
width: 480px;
}

div#content_bottom {
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 733px;
height: 32px;
background: url(exports/bg_bottom.jpg) top no-repeat;
}

div.fixer {
clear: both;
}

div.center {
text-align: center;
}

.nobottom {
margin-bottom: 0;
}

/* NAV
-------------------------------------------------------------*/

ul#nav {
margin: 0 0 0 0;
padding: 0 0 0 0;
height: 55px;
position: relative;
}

ul#nav li {
margin: 0 0 0 0;
padding: 0 0 0 0;
height: 55px;
display: block;
position: absolute;
top: 0;
}

ul#nav li a {
margin: 0 0 0 0;
padding: 0 0 0 0;
height: 55px;
display: block;
}

ul#nav li#home { width: 88px; left: 22px; }
ul#nav li#about { width: 114px; left: 112px; }
ul#nav li#products { width: 123px; left: 228px; }
ul#nav li#contact { width: 125px; left: 353px; }

ul#nav li#home a { width: 88px; background: url(exports/btn_home.gif) no-repeat; background-position: 0 0; }
ul#nav li#about a { width: 114px; background: url(exports/btn_about.gif) no-repeat; background-position: 0 0; }
ul#nav li#products a { width: 123px; background: url(exports/btn_products.gif) no-repeat; background-position: 0 0; }
ul#nav li#contact a { width: 125px; background: url(exports/btn_contact.gif) no-repeat; background-position: 0 0; }

ul#nav li#home a:hover { background-position: 0 -55px; }
ul#nav li#about a:hover { background-position: 0 -55px; }
ul#nav li#products a:hover { background-position: 0 -55px; }
ul#nav li#contact a:hover { background-position: 0 -55px; }

/* CONTENT
-------------------------------------------------------------*/

img {
margin: 0 0 10px 0;
padding: 0 0 0 0;
border: none;
}

h1 {
margin: 0 0 10px 0;
padding: 0 0 0 0;
color: #c6cdd3;
font-size: 24px;
}

h2 {
margin: 0 0 0 0;
padding: 6px 0 0 0;
color: #fff;
font-size: 18px;
}

p {
margin: 0 0 10px 0;
padding: 0 0 0 0;
color: #9a9fa3;
font-size: 12px;
}

p.footer {
text-align: center;
color: #51545a;
font-size: 11px;
}

a {
color: #60cafe;
text-decoration: none;
}

a:hover {
color: #beeaff;
text-decoration: underline;
}

ul {
margin: 0 0 10px 25px;
padding: 0 0 0 0;
color: #9a9fa3;
font-size: 12px;
list-style: circle;
}

li {
margin: 0 0 5px 0;
padding: 0 0 0 0;
}

label {
width: 70px;
float: left;
}

input {
padding: 3px;
width: 290px;
color: #fff;
border: 1px solid #51545a;
background: #2a2c31;
}

textarea {
padding: 3px;
width: 290px;
color: #fff;
border: 1px solid #51545a;
background: #2a2c31;
}

dl {
margin: 0 0 10px 0;
padding: 0 0 0 0;
color: #9a9fa3;
font-size: 12px;
}

dt {
margin: 0 0 2px 0;
padding: 4px;
background: #2a2c31;
font-size: 14px;
text-transform: uppercase;
border-bottom: 1px solid #51545a;
border-right: 6px solid #51545a;
}

dd {
margin: 0 0 2px 0;
padding: 0 0 0 0;
}

dd a {
display: block;
padding: 4px;
border-bottom: 1px solid #51545a;
border-right: 6px solid #51545a;
}

dd a:hover {
text-decoration: none;
border-bottom: 1px solid #beeaff;
border-right: 6px solid #beeaff;
}

fieldset {
margin: 0 0 10px 0;
padding: 8px 6px 4px 6px;
background: #222429;
border: none;
border-top: 1px solid #51545a;
border-bottom: 1px solid #51545a;
}

/* PRODUCTS
-------------------------------------------------------------*/

div.product {
margin: 0 10px 10px 0;
padding: 0 0 0 0;
width: 228px;
height: 71px;
background: url(exports/products/bg_product.gif) top no-repeat;
float: left;
text-align: left;
}

div.product:hover {
background: url(exports/products/bg_product_hover.gif) top no-repeat;
}

div.product img {
margin: 6px 10px 6px 6px;
width: 55px;
height: 55px;
float: left;
}

div.product h2 a {
color: #fff;
}