html, body
{
background-color: #f2efd3;
}
body, #pageContainer
{
text-align: center;
margin: 0;
font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif;
font-size: 14px;
padding: 0;
}
/**
* pageContainer surrounds all elements in
*/
#pageContainer
{
background-color: #fffcdf;
text-align: left;
width: 970px;
margin: 0 auto;
position: relative;
padding: 0;
border-left: 3px solid #012f0b;
border-right: 3px solid #012f0b;
}
/**
* header
* (containing logo and top navigation)
*/
#header
{
height: 60px;
width: 970px;
background-image: url('../images/layout/nav_bg.jpg');
background-repeat: repeat-x;
background-position: 0 19px;
}
/**
* logo
*/
#logo
{
width: 165px;
height: 135px;
background-image: url('../images/layout/logo.jpg');
background-repeat: no-repeat;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
#logo a
{
width: 165px;
height: 135px;
display: block;
}
#logo span
{
position: absolute;
left: -9999px;
}
/**
* top and bottom navigation
*/
#navTop,
#navBottom
{
position: absolute;
top: 19px;
left: 0;
z-index: 1;
padding: 0;
margin: 0 6px 0 2px;
margin-left: 170px;
height: 39px;
}
#navBottom
{
top: 0;
left: 185px;
}
ul#navTop li,
ul#navBottom li
{
display: inline;
float: left;
margin-right: 1em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
ul#navTop li a,
ul#navBottom li a
{
color: #fffde0;
display: block;
float: left;
margin-top: 10px;
padding: 3px;
text-decoration: none;
}
ul#navTop li a:hover,
ul#navTop li a:active,
ul#navTop li a:focus,
ul#navBottom li a:hover,
ul#navBottom li a:active,
ul#navBottom li a:focus
{
color: #ffff00;
}
ul#navTop li a.active,
ul#navBottom li a.active
{
color: #ffff00;
}
/**
* middle container
* (containing left and content)
*/
#middle
{
padding: 10px 0;
width: 970px;
}
/**
* left container
* (containing sub navigation)
*/
#left
{
width: 170px;
float: left;
margin-top: 77px;
}
/**
* sub navigation
*/
ul#subNav
{
margin: 0 25px 0 20px;
}
ul#subNav li
{
color: #01562c;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 1em;
}
ul#subNav li.shopCart
{
margin-top: 3em;
}
ul#subNav li.shopCart a
{
color: #01562c;
}
ul#subNav a
{
color: #70706e;
text-decoration: none;
}
ul#subNav a:hover,
ul#subNav a:active,
ul#subNav a.active
{
color: #01562c;
}
ul#subNav li ul
{
margin: 0.5em 1em;
}
ul#subNav li ul li
{
margin-bottom: 0.5em;
}
ul#subNav li ul li a
{
color: #999;
}
/**
* content
*/
#contentContainer
{
overflow: auto;
float: left;
margin: 0;
padding: 0;
width: 800px;
}
#content
{
width: 770px;
}
/**
* footer
* (containing bottom navigation)
*/
#footer
{
position: relative;
clear: both;
height: 90px;
width: 970px;
background-image: url('../images/layout/footer_bg.jpg');
background-repeat: no-repeat;
}
#footer .orderHotlineInfo
{
position: absolute;
top: 13px;
left: 0;
z-index: 1;
padding: 0;
margin: 0 6px 0 2px;
margin-left: 170px;
color: #fffde0;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
}
.clear
{
clear: both;
}