/* 

Vanner - 64.28.36.40
Last edits: Roy 1-14-08

DESIGN NOTES:

Colors can be skinned in this layout for the following:

- Leftside Sublinks buttons on/off states
- borders around leftside sublinks and rightside grate boxes
- footer redline
- Page Background color

Images can be changed out for:

- header
- toolbar background
- gratebox background

*/


/* ::::::: Genereal Elements ::::::: */

* { /* Global Reset */
margin: 0px;
padding: 0px;
}

body { /* blue backgrd color: #0458A */
margin: 0px auto;
background: #999;
}

h1 {
font: bold 16px/22px Arial, Helvetica, sans-serif;
color: #666;
padding: 5px 10px;
}

h2 {
font: bold 14px/20px Arial, Helvetica, sans-serif;
color: #003366;
padding: 5px 10px;
}

h3 {
font: bold 12px/18px Arial, Helvetica, sans-serif;
color: #666;
padding: 5px 10px;
}

p {
font: normal 12px/18px Arial, Helvetica, sans-serif;
color: #333;
padding: 5px 10px 7px 10px;
}

ul {
list-style-position: outside;
padding: 0px 10px 10px 25px;
}

li {
font: normal 12px/18px Arial, Helvetica, sans-serif;
color: #333;
}

a {
font: normal 12px/18px Arial, Helvetica, sans-serif;
color: #d81e30;
text-decoration: none;
}
a:hover {
font: normal 12px/18px Arial, Helvetica, sans-serif;
color: #003366;
text-decoration: none;
}

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



/*  ::::::: Main Wrap  ::::::: */

.MainBody {
background: #FFFFFF url(/client/images/mainbody.gif) top left repeat-y;
width: 800px;
margin: 0px auto;
border: 2px solid #ebebeb;
border-bottom-width: 0px;

}

/* ::::::: Header ::::::: */

.TopOfPage {
background: url(/client/images/header.gif) top left  no-repeat;
width: 800px;
height: 61px;
}

.HomeLink {
width: 178px;
height: 61px;
display: block;
}

.HomeLink span {
display: none;
}

/* ::::::: Modified Suckerfish CSS Dropdown ::::::: */

.ToolBar {
background: url(/client/images/toolbar.gif) top left repeat-x; 
width:800px;
text-align: center;
}

.ToolBar img {
margin: 20px 0px;
}

ul#nav {
height: 43px;
list-style: none;
text-align: center;
padding: 0;
margin: 0;
}

ul#nav li ul { /* all lists */
list-style: none;
text-align: left;
text-indent: 3px;
padding: 0;
margin: 0;
}

ul#nav li a { /*main links*/
color: #ffffff;	
height: 43px;
line-height: 43px;
text-decoration: none;
padding: 0px 18px;
}

ul#nav li a:hover {
color: #ffffff;	
height: 43px;
line-height: 43px;
text-decoration: none;
padding: 0px 18px;
}

ul#nav li { /* all list items */
float: left;
position: relative;
}

ul#nav li ul { /* second-level lists */
background: transparent;
display: none;
position: absolute;
border-bottom: 1px solid #666;
border-left: 1px solid #666;
width: 160px;
text-indent: 15px;
}

ul#nav li ul li {
width: 100px;
height: 24px;
line-height: 24px;
float: left;
position: relative;
border-top: 1px solid #666;
border-right: 1px solid #666;
width: 160px;
}

ul#nav li ul li a { /*sub links */
background: #dbdcdd;
height: 24px;
line-height: 24px;
color: #003366;
width: 160px;
padding: 0px;
display: block;
}

ul#nav li ul li a:hover {
background: #ebebeb;
height: 24px;
line-height: 24px;
color: #d81e30;
width: 160px;
padding: 0px;
display: block;
}

ul#nav li>ul#nav ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}

ul#nav li:hover ul, ul#nav li.over ul { /* lists nested under hovered list items */
display: block;
}

/* ::::::: Inner/Right Wrap ::::::: */

.Wrap {
float: right;
width: 560px;
}

/* ::::::: Main Content Area ::::::: */

.InnerBody {
float: left;
width: 360px;
padding: 0px 0px 20px 0px;
}


html>body .InnerBody {
float: left;
width: 380px;
padding: 0px 0px 20px 0px;
}
.InnerBody p {
text-align: justify;
}

/* ::::::: Right Column  ::::::: */

.RightMargin {
float: right;
width: 180px;
margin-top: 4px;
}

.grate-box {
background: url(/client/images/grate-bg.jpg) repeat;
float: right;
width: 156px;
border: 1px solid #999;
border-bottom-width: 3px;
margin: 10px;
text-align: center;
}

.grate-box h3 {
font: bold 14px/18px Arial, Helvetica, sans-serif;
color: #eb292a;
}

.grate-box p {
color: #333333;
}

/* ::::::: Left Column ::::::: */

.LeftMargin {
background: #ddd;
float: left;
width: 214px;
border: 1px solid #999;
border-bottom-width: 3px;
margin: 10px 10px 30px 10px;
}

.LeftMargin img {

}

.SubMenuTitle {
width: 212px;
height: 25px;
background: #ccc; /*alternate gray #999 */
border:1px solid #ebebeb;
font: bold 14px/25px Arial, Helvetica, sans-serif;
text-indent: 6px;
color: #fff;
}

.sublinks {
margin: 0px 0px;
}

.sublinks a { /* use background img button-bk-gray.jpg to switch look on button off state*/
font: bold 12px/25px Arial, Helvetica, sans-serif;
color: #003366;
text-decoration: none;
text-indent: 6px;
display: block;
height: 25px;
width: 212px;
background: #D6E1F1;
border: 1px solid #ebebeb;
border-top-width: 1px;
}

.sublinks a:hover {
font: bold 12px/25px Arial, Helvetica, sans-serif;
color: #d81e30;
text-decoration: none;
text-indent: 6px;
display: block;
height: 25px;
width: 212px;
background: url(/client/images/sublink.gif) bottom left no-repeat;
}

.sublinks a.blue, .sublinks a.blue:hover {
color: #2263b0;
}

.form input {
vertical-align: middle;
margin: 0px;
padding: 0px;
}

 /* ::::::: Bottom Links ::::::: */
 
.SiteFooter {
border-top: 3px solid #d81e30;
clear: both;
}

.SiteFooter p {
color: #003366;
padding: 10px;
text-align: center;
}

.SiteFooter a {
font: normal 11px/14px Verdana, Helvetica, sans-serif;
color: #003366;
margin: 0px 10px;
text-decoration: none;
}
.SiteFooter a:hover {
font: normal 11px/14px Verdana, Helvetica, sans-serif;
color: #d81e30;
margin: 0px 10px;
text-decoration: none;
}
/* ::::::: Copyright Area ::::::: */

.Footer {
background: #FFFFFF url(/client/images/mainbody.gif) top left repeat-y;
width: 800px;
height: 10px;
margin: 0px auto;
border: 2px solid #ebebeb;
border-top-width: 0px;
}

.Footer p {
font: normal 12px/18px Arial, Helvetica, sans-serif;
text-align: center;
height: 20px;
}

/* ::::::: Catalog Section ::::::: */
.CategoryWrap {
width: 760px;
height: 30px;
}
.CategoryHeading {
width: 360px;
height: 30px;
float: left;
padding-top:10px;
}
.SecureLogin {
width: 170px;
height: 30px;
float: right;
padding-top: 10px
}
.ProductWrap {
width: 760px;
padding: 0px 0px 10px 0px;
clear: both;
display: block;
overflow: hidden;
}
.ProductWrap img {
margin-right: 10px;
margin-bottom: 10px;
float: left;
}
/* ::::: Catalog Product Tables - Alternating Colors ::::::: */

table {
width: 750px;
font: normal 11px verdana, Arial, sans-serif;
color: #333;
padding: 2px;
}

table a {
color : #004080;
}

table a:hover {
color : #FFFFFF;
}
th {
background: #ccc;
height: 24px;
text-transform: uppercase;
text-align: left;
text-indent: 6px;
color: #003366
}
tr.RowOverOdd {
background-color : #ebebeb;
}
tr.RowOverEven {
background-color : #ebebeb;

}
tr.RowOverSelected {
color : #FFFFFF;
background-color : #D6E1F1;
}

th {
}

td {
font: normal 11px/18px Verdana, Helvetica, sans-serif;
color: #333;
height: 22px;
padding: 2px 2px 2px 6px;

}

/* ::::::: class for thumbnail hover preview ::::::: */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #fff;
padding: 2px;
left: -1000px;
border: 1px solid #ccc;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -150px;
left: -220px; /*position where enlarged image should offset horizontally */
}