html,body {min-height:101%}
/*****************************
TEXT STYLES
*****************************/
a {text-decoration:none; color:#67676b;}
a:hover{color:#000;}
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; color:#434344; line-height:1.3em;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color:#434344;}
h1 {
font-size:16px;
color: #D9AD34;
font-weight: bold;
}
h2 {font-size:23px;}
h3 {font-size:18px;}
h4 {font-size:16px;}
h5 {font-size:14px;}
h6 {font-size:12px;}
p {margin-bottom:10px; margin-top:10px; }
/*****************************
0 - Run
*****************************/
body {font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #4b4b4b; font-weight: 300; line-height: 1.5em; background-color: #ededed;}
/*****************************
1 - Base
*****************************/
#mainContainer {margin: 0 0 0 0; width: 100%; background-color: #ededed; position: absolute;}
#center {margin: auto; padding: 0px; width: 850px; height: auto; text-align: left; position: relative;}
/*****************************
2 - Logo
*****************************/
#logoContainer {width: 850px; height: 95px; background-color: #ededed; float: left;}
#logoContainer a { margin: 15px 0 0 10px; width: 218px; height: 57px; background: transparent url(../img/logo.png) no-repeat; display: block; position: relative;}
#headerContainer {width: 850px; height: 105px; background-color: #ededed; float: left;}
#headerContainer .logo { margin: 25px 0 0 10px; width: 218px; height: 57px; background: transparent url(../img/logo.png) no-repeat; display: block; float: left;}
#headerContainer .details { margin: 15px 50px 0 10px; width: 260px; float: right; color: #656565; }
#headerContainer .item { width: 225px; font-size: 12px; margin-left: 5px; }
#headerContainer .left { width: 90px; float: left; font-weight: bold}
#headerContainer .right { width: 135px; float: left;}
#headerContainer .full { padding-left: 90px; width: 165px; float: left;}
#headerContainer .phone { margin: 15px 0 0 10px; width: 150px; float: right; }
#headerContainer .lineDiv {width: 150px; height: 5px; }
#headerContainer .line {text-align: left; width: 150px; }
/*****************************
3 - Menu
*****************************/
#navContainer {width: 850px; height: 64px; background: #ededed url(../img/navBG.png) repeat-x; float: left;}
#navLeft {width: 14px; height: 64px; background-image: url(../img/navLeft.png); display: block; float: left;}
#navRight {width: 14px; height: 64px; background-image: url(../img/navRight.png); display: block; float: right;}
#menu {height: 64px; margin: 0 0 0 5px; float: left;}
#menu ul {margin: 20px 0 0 0;}
#menu ul li {display: inline;}
#menu ul li a {padding: 0 11px 0 11px; float: left; text-decoration: none; color: #656565; font-size: 13px; display: block;}
#menu ul li a:hover{color: #313131;}
#menu ul li.selected a {color: #313131; font-weight: bold;}
/*****************************
4 - Divider
*****************************/
#dividerContainer {width: 850px; height: auto; background: transparent url(../img/bodyBG.png) repeat-y; float: left;}
#dividerBody {margin: -5px 0 0 3px; width: 844px; height: 12px; background: transparent url(../img/dividerBG.png) repeat-x; float: left;}
/*****************************
6 - Content
*****************************/
#bodyContainer {position:relative; width:850px; float:left; background: transparent url(../img/bodyBG.png) repeat-y;}
#bodyContents {margin: 15px 30px 10px 30px; height: auto; float: left;}
#bodyContentsDuo {margin: 15px 20px 10px 20px; width: 530px; height: auto; float: right;}
/*****************************
7 - Image Carousel
*****************************/
#carouselContainer {background: transparent url(../img/bodyBG.png) repeat-y; width: 770px; float: left; padding: 10px 10px 0 70px; height:320px;}
.bigImgBorder {padding: 3px; background-color:#FFFFFF; border:1px solid #DADADA; position:absolute;}
/****************************
8 - Base
****************************/
#baseContainer {height:16px; width:850px; background-image:url(../img/baseBG.png); float: left;}
#leftCorner {display:block; background-image:url(../img/baseLeft.png); height:16px; width:17px; float:left;}
#rightCorner {display:block; background-image:url(../img/baseRight.png); height:16px; width:17px; float:right;}
/****************************
9 - Footer
****************************/
#footer {height: 75px; width: 100%; display: block; float: left;}
#footer p {color: #666666; font-size: 12px; float: right;margin-top: 10px; margin-right: 20px;}
#footerMenu {float: left; margin-left: 15px;}
#footerMenu ul {margin-top: 10px; text-align: left; font-size: 12px; color: #656565;}
#footerMenu ul li {float: left; text-decoration: none; padding-left: 15px; list-style: none;}
#footerMenu ul li a {color: #656565; text-decoration: none; font-size: 13px;}
#footerMenu ul li a:hover{color: #000;}
/****************************
10 - Side Nav
****************************/
#sidebar {margin: 15px 0 10px 30px; width: 240px; min-height: 530px; float: left; border-right:#e3e3e3 1px solid;}
#categories {margin: 0px 0 0 0px; width: 86px; height: 19px; background: transparent url(../img/headers/categories.png) no-repeat; display: block; position: relative;}
#subMenu { margin: 15px 15px 0 0; width: 230px; float: left;}
#subMenu ul.navigation, ul.navigation ul {list-style-type: none;}
#accordion a {display: block; text-decoration: none;}
#accordion li {margin-top: 1px;}
#accordion li a {padding: 5px 0 5px 5px; color: #656565; font-size: 14px; font-weight: bold; border-bottom:#e3e3e3 1px solid;}
#accordion li a:hover {background: #ffffff; color: #313131;}
#accordion li ul li {margin-left: 20px;}
#accordion li ul li a {padding: 5px 0 5px 20px; color: #656565; font-size: 14px; font-weight: normal; border-bottom: 0px;}
#accordion li ul li a:hover {color: #d9ad34; border-left: 5px #aaa solid; padding-left: 15px;}
/****************************
11 - Products
****************************/
#categoryTitle {padding-bottom: 20px;}
#title {padding: 0 0 2px 0; margin: 0 0 10px 0; color: #d9ad34; border-bottom: #d9ad34 1px solid; width: 530px; float: left;}
#categoryText {padding: 0 0 10px 5px;}
#productItem {width: 530px; float: left; border: #999 solid 1px; background-color: #EAEAEA; padding: 5px 0 5px 0; margin-bottom: 30px;}
#productItem .imageContainer{ width:175px; margin: 6px 0 0 10px; float: left; border: #CCC solid 1px; background-color: #FFF;}
#productItem .image {display: block; margin: auto;}
#productItem .contentContainer {width: 320px; float: right; padding-left: 10px; margin-right: 5px;}
#productItem .title {padding: 0 0 2px 0; margin: 0 0 10px 0; color: #d9ad34; border-bottom: #d9ad34 1px solid;}
#productItem .body {padding: 0 0 10px 5px;}
#productItem .link a {padding: 0 0 0 5px; color: #d9ad34;}
#productItem .link a:hover {text-decoration:underline;}
#productItem .bulletPoints {padding: 10px 0 10px 35px; list-style-type: circle;}
#productItem .subBulletPoints {padding: 0px 0 0px 30px; list-style-type: circle;}
#productItem .bulletPoints ul {list-style-type: disc;}
#productItem .imageContainerDuo {width: 175px; margin: 0 0 0 10px; float: left;}
#productItem .imageSingle {width: 175px; margin-top: 6px;float: left; border: #CCC solid 1px; background-color: #FFF;}
/****************************
12 - Contact Us Page
****************************/
#bodyContactUsForm {margin: 15px 0 10px 30px; width: 520px; height: auto; float: left;}
#bodyContactUsImages {margin: 55px 20px 10px 30px; width: 250px; float: right;}
#bodyContactUsForm .left {width: 220px; padding-right: 30px; float: left;}
#bodyContactUsForm .right {width: 250px; float: left;}
#bodyContactUsForm .full {width: 500px; float: left; padding-top: 15px}
#bodyContactUsForm .center {text-align: center;}
#bodyContactUsForm .title {color: #656565; font-weight: bold}
#bodyContactUsForm .input {width: 220px; height: 20px; border: 1px solid #ccc; background-color: #fff; padding-top: 6px;}
#bodyContactUsForm .textArea {height: 85px; width: 220px; padding-top: 0px; font-family: Arial; font-size: 12px; padding-top: 8px; padding-bottom: 8px;}
#bodyContactUsForm .textAreaQuery {height: 100px; width: 470px; padding-top: 0px; font-family: Arial; font-size: 12px; padding-top: 8px; padding-bottom: 8px;}
#bodyContactUsForm .errorMessage {color: #cc0000; font-size: 10px; padding-bottom: 2px}
#hideForm {width:520px; min-height: 390px; border-right:#e3e3e3 1px solid;}
#successEmail {width: 300px; text-align: center;}
#successEmail .message {background-color: #ffe6a3; padding: 15px; border: #d9ad34 solid 1px; font-weight: bold;}
#bodyContactUsImages .details {margin: 0 0 0 10px; width: 250px; float: right; color: #656565;}
#bodyContactUsImages .item {width: 245px;; margin-left: 5px;}
#bodyContactUsImages .left {width: 80px; float: left; font-weight: bold}
#bodyContactUsImages .right {width: 160px; float: left;}
#bodyContactUsImages .full {padding-left: 80px; width: 160px; float: left;}
#bodyContactUsImages .paddingBottom {padding-bottom: 40px;}
/****************************
13 - Item
****************************/
#itemContainer{position:relative; width:840px; float:left; background-color: #fff;}
#itemImage {margin: 10px 0 10px 10px; width: 300px; float: left;}
#itemImage .imageContainer{border: #CCC solid 1px; background-color: #FFF;}
#itemImage .image {display: block; margin: auto; padding: 10px 0 10px 0;}
#itemTable {margin: 10px 10px 10px 10px; width: 500px; float: left;}
#itemTable .titleRow {text-align:center;}
#itemTable .row {text-align:center;}
#itemTable .header {background-color: #CCC; font-weight: bold}
#itemTable .left {padding: 5px 0 5px 0; width: 50%; float: left; height: 20px;}
#itemTable .right {border-left: #666 thin solid; padding: 5px 0 5px 0; width: 49%; float: left; height: 20px;}
#itemTable .odd {background-color:#F0F0F0;}
#itemTable .even {background-color:#EBEBEB;}
#itemFeature {margin: 10px 10px 10px 10px; width: 500px; float: left;}
#itemFeature .header {background-color: #CCC; font-weight: bold; padding-left: 5px; }
#itemFeature .bulletPoints {padding: 10px 0 10px 35px; list-style-type: circle;}
#itemFeature .subBulletPoints {padding: 0px 0 0px 30px; list-style-type: circle;}
#itemFeature .bulletPoints ul {list-style-type: disc;}
#itemFeature .heavy {font-weight: bold;}
#detailContainer{position:relative; width:820px; height: 280px; float:left; background-color: #fff;}
#detailsLeft {margin: 10px 0 10px 10px; width: 300px; float: left;}
#detailsLeft .row {width: 300px; float: left;}
#detailsLeft .left {padding: 5px 0 5px 0; width: 100px; float: left; background-color:#1f3775; text-align: center;}
#detailsLeft .right {padding: 15px 0 5px 10px; width: 190px; float: left; text-align: left;}
#detailsRight {margin: 10px 0 10px 40px; width: 450px; float: left;}
#detailsRight .row {width: 450px; float: left;}
#detailsRight .first {width: 100px; padding: 5px 0 5px 5px; float: left; text-align: left; height: 20px; }
#detailsRight .column {width: 80px; padding: 5px 0 5px 0; float: left; text-align: center; height: 20px; }
#detailsRight .odd {background-color:#dddddd;}
#detailsRight .even {background-color:#efefef;}
/****************************
Tonnage Calculator
****************************/
#tonnageCalcContainer {position:relative; width:500px; float:left; background-color: #fff;}
#tonnageCalcContents {text-align: center;}
#tonnageCalcContents .header {margin-top: 10px; }
#tonnageCalcContents .shapeForm {min-height: 40px;}
#tonnageCalcContents .break {background-color: #d9ad34; border: #d9ad34; height:2px; }
#tonnageCalcContents .imageContainer {padding-bottom:10px; background-color: #FFF;}
#tonnageCalcContents .image {display: block; margin: auto; padding: 10px 0 10px 0; border: #000 solid 1px;}
#tonnageCalcContents .left {padding: 5px 10px 5px 0; width: 240px; float: left; height: 30px; text-align: right;}
#tonnageCalcContents .right {padding: 5px 0 5px 10px; width: 240px; float: left; height: 30px; text-align: left;}
#tonnageCalcContents .button {padding: 10px 0 10px 0; text-align: center;}
#tonnageCalcContents .center {padding: 10px 0 10px 0; text-align: center;}
/****************************
Extra
****************************/
.smallSubtitle {color: #999999; font-size: 14px; margin-top: 0px;}
.caption-top, .caption-bottom {color: #ffffff; padding: 6px 10px 6px 10px; padding-right: 20px; font-weight: bold; font-size: 13px; font-family: arial; cursor: default; background: #000000;}
.caption-top {border-width: 0px 0px 8px 0px;}
.caption-bottom {border-width: 8px 0px 0px 0px;}
.caption-wrapper {float: left;}
/****************************
9 - Footer
****************************/
#quick_links {
height: 75px;
width: 100%;
display: block;
float: left;
font-size: 0.85em;
}
#quick_links ul {
width: 96%;
display: block;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 2%;
padding-bottom: 0px;
padding-left: 2%;
text-align: center;
}
#quick_links ul li {
display: inline;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 5px;
list-style-image: none;
list-style-type: none;
}