/********************************************
   AUTHOR:          http://www.ambitiouswebdesign.com 
   WEBSITE:     http://www.iouinc.com/
   TEMPLATE NAME:  Industrial Oils Unlimited, Inc.
   DATE:           Nov-10th-2008
 *******************************************/ 
 
/********************************************
   HTML ELEMENTS
********************************************/ 
 
* { margin: 0; padding: 0px; }

html, body { 
margin: 0;
padding: 0px;
height: 100%; 
background-color: #908981;
}

/* --------------------------------------TABLES-------------------------------------------------- */

#mytable{
border-collapse: collapse;
font-size: 1.1em;
text-align: center;
width: 97%
}

#mytable tr img {
border: none;
margin: 0 auto;
padding: 0px;
float: none;
}

#mytable th {
background: #9d2232 url(/images/tablehead.gif) repeat-x;
color: #fff;
padding: 15px;
border-right: 1px solid #fff;
border-bottom: 1px solid #870000;
font: “Lucida Sans Unicode”, sans-serif;
font-size: 11px; 
font-weight: bold;
}

#mytable .desc {
text-align: left;
font-family: “Lucida Sans Unicode”, sans-serif;
font-size: 10px;
}

#mytable .rowone {
background: #fff url(/images/tablerowone.gif) repeat-x;
}

#mytable td {
padding: 6px 11px;
vertical-align: top;
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #6a6a69;
border: 1px solid #e4e4e4;
width: 33%;
background: #fff url(/images/tablerowone.gif) repeat-x;
}

#mytable a {
padding: 0px;
margin: 0px;
}

#mytable td * {
padding: 6px 11px;
}

#mytable tr.alt td {
background: #fff url(/images/tablerowtwo.gif) repeat-x;
}



/* ----------Centered Container Or the Layout--------------------- */


#holder {
width: 988px;
background: url(/images/mainbg.gif) repeat-y; /* Main DIV Background Img */
margin: 0 auto;
height: auto !important; 
}

#container { 
width: 960px;
margin: 0 auto -4em; /* make sure this matches in the body footer DIV */
min-height: 100%; 
height: auto !important; 
height: 100%; 
} 


/* --------------LABELS BUTTONS & FORMS-----------*/
 
label {
font: bold 10pt 'Trebuchet MS', Arial, Sans-serif;
color: #777;
}
 
.input, textarea {
width: 22em;
border: 1px solid #b5b4ae;
font-family: “Lucida Sans Unicode”, sans-serif;
background: #f0f0f0 url(/images/inputbg.gif) repeat-x;
font-size: 11px;
color: #262425;
padding: 4px;
}

textarea { height: 8em;}

.buttontwo {
width: 6em;
font-family: “Lucida Sans Unicode”, sans-serif;
font-size: 11px;
color: #fff;      
background: #6f232d;
padding: 3px;
border: 1px solid #6f232d;
float: left
}
 
/* --------------HEADER------------- */

#header {
height: 126px;
background: url(/images/headbg.gif) repeat-x;
}



/* --------------TOPNAV------------------------------------------------------------- */


.suckertreemenu {
height: 60px;
width: 600px;
float: right;
padding-left: 10px;
padding-top: 60px;
overflow: visible;
}

.suckertreemenu ul{
margin: 0;
padding-left: 0px;
list-style-type: none;
letter-spacing: 0px;
z-index: 5;
}

/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
padding-right: 35px;
z-index: 5;

}

/*Top level menu link items style*/
.suckertreemenu ul li a{
display: inline;
font-family: “Lucida Sans Unicode”, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: bold;
color: #6f232d;
text-decoration:none;
cursor: auto;
z-index: 5;
cursor: pointer
}


/*1st sub level menu*/
.suckertreemenu ul li ul{
left: 0em;
top: 0em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
text-decoration: none;
overflow: visible;
position: absolute;
z-index: 5;

}

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
float: none;
z-index: 5;

}

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{ 
left: 159px; /* no need to change, as true value set by script */
border: 1px solid #fff;
overflow: visible;
z-index: 5;

}

/* Sub level menu links style */
.suckertreemenu ul li ul li a {
top: 0px;
display: block;
overflow: visible;
text-align: left;
font-family: “Lucida Sans Unicode”, sans-serif;
font-size: 11px;
font-weight: normal;
width: 110px; /*width of sub menu levels*/
text-decoration: none;
padding: 5px;
border-bottom: 1px solid #fff;
top: -12em;
background-color: #6f232d;
color: #fff;
z-index: 5;
}

.suckertreemenu ul li ul li a:hover{
background-color: #3b3b3b;
color: #fff;
z-index: 5;

}

* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
	
/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
/* End */


/* --------------IMGRTR------------- */

#imgrtr {
height: 204px;
position: relative;
z-index: 0;
}



/* --------------LOGO IN HEADER *always use this*------------- */

.logolink, #swap {
height: 110px;
width: 288px;
float: left;
}

.logolink {
background-image: url('/images/logo.gif');
background-repeat: no-repeat;
}
 
.logolink a { float: left;  }
 
#swap {
background-image: url(/images/logo.gif);  
}
 
.rollover { display: block; } /* Allow setting widths and heights */
.rollover img { width: 100%; height: 100%; border: 0; } /* only set width and height once */
.rollover:hover { visibility: visible; /* for IE */ } /* sets any property for the :hover state */
.rollover:hover img { visibility: hidden; } /* 'rolls over' the image */


/* --------------THREEBLOCKS------------- */

#threeblocks {
background: #aba39a url(/images/threeblocksbg.gif) repeat-x;
padding: 20px 0px 0px 15px;
font-family: “Lucida Sans Unicode”, sans-serif;
font-size: 11px;
color: #fff;
height: 100%;
height: auto;
min-height: 250px;
clear: both;
text-align: justify

}

#threeblocks .hold {
background: url(/images/threeblock_water.gif) no-repeat top right;
width: 295px;
height: 230px;
position: absolute;
margin: 0px;
padding: 0px;
}

#threeblocks a {
color: #6f232d;
float: right;
padding-right: 20px;
}

#threeblocks h3 {
font-family: “Lucida Sans Unicode”, sans-serif;
font-size: 18px;
text-transform: uppercase;
font-style: normal;
font-weight: bold;
color: #6f232d;
padding: 12px 15px 8px 13px;
}

#threeblocks p {
padding: 0px 15px 0px 13px;
color: #343334;
font-family: “Lucida Sans Unicode”, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
letter-spacing: normal;
line-height: 1.5em;
}

#threeblocks .commitment {
float: left;
width: 295px;
background: #f0f0f0 url(/images/threeblock_bg.gif) repeat-x;
margin-right: 20px;
height: 230px;
padding: 0px;
clear:right;
}

#threeblocks .commitment {
float: left;
width: 295px;
height: 230px;
padding: 0px;
background: #f0f0f0 url(/images/threeblock_bg.gif) repeat-x;
margin-right: 20px;
clear:right;
}

#threeblocks ul {
color: black; margin: 7px 5px 0px 40px	
}




/* --------------redbar------------- */

.redbar {
background-color: #6f232d;
height: 21px;
}


/* --------------MAIN CONTENT, LEFT NAVIGATION----------------*/

#main {
min-height: 100%; 
height: auto !important; 
height: 100%; 
padding: 18px;
}

#main .content {
padding: 0px;
margin: 0px;
margin-left: 306px;
margin-right: 0px;
min-height: 170px; /* Height of Background Img */
height: auto;
text-align: justify;
margin-bottom: 30px;
font-family: “Lucida Sans Unicode”, sans-serif;
font-size: 11px;
}

.subbg {
background: #fff url(/images/submain_bg.gif) repeat-x;
}

#main h1 {
font-family: “Lucida Sans Unicode”, sans-serif;
font-size: 24px;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
padding-bottom: 12px;
letter-spacing: -1px;
color: #908981;
}

#main b, #main strong {
font-family: “Lucida Sans Unicode”, sans-serif;
font-weight: bold;
font-size: 11px;
color: #6f232d;
}

#main h3 {
font-family: “Lucida Sans Unicode”, sans-serif;
font-size: 22px;
font-style: normal;
font-weight: bold;
padding-bottom: 3px;
margin: 0px;
color: #6f232d;
}


#main h4 {
font-weight: bold;
font-size: 14px;
color: #6f232d;
font-family: “Lucida Sans Unicode”, sans-serif;
}


#main ul {
margin: 0px 0px 26px 16px;
}

#main li {
display: block;
font-family: “Lucida Sans Unicode”, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
letter-spacing: normal;
line-height: 1.5em;
color: #343334;
list-style-type: none;
background: url(/images/icon_dot.gif) no-repeat left top;
padding-left: 20px;
}

#main a {
color: #6f232d;
}

#line {
width: 100%;
border: none;
background: url(/images/hr.gif) repeat-x;
height: 2px;
border: none;
margin-bottom: 16px;
}

#main h2 {
font-family: “Lucida Sans Unicode”, sans-serif;
font-size: 24px;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
padding-bottom: 12px;
letter-spacing: -1px;
color: #6f232d;
}

#main p, #contact {
font-family: “Lucida Sans Unicode”, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
letter-spacing: normal;
line-height: 1.5em;
padding-bottom: 20px;
color: #343334;
}

#main .img {
float: right;
margin: 0px 0px 16px 26px;
border: 6px solid #605e5f;
}


/* --------------LEFTNAV------------- */


#main .navleft {
float:left; 
width: 285px;
min-height: 450px;
margin: 0px;
padding: 0px;
}

#main .navleft h3 {
font-family: “Lucida Sans Unicode”, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
padding-bottom: 12px;
color: #343334;
}

#main .navleft input {
width: 22em;
border: 1px solid #b5b4ae;
font-family: “Lucida Sans Unicode”, sans-serif;
background: #fff url(/images/inputbg.gif) repeat-x;
font-size: 11px;
color: #262425;
padding: 4px;
}

#main .navleft .button {
width: 6em;
font-family: “Lucida Sans Unicode”, sans-serif;
font-size: 11px;
color: #fff;      
background: #6f232d;
padding: 3px;
border: 1px solid #6f232d;
}


#main .navleft .top {
height: 15px;
width: 285px;
background: url(/images/navleft_top.gif) no-repeat;
}

#main .navleft .text {
background: url(/images/navleft_bg.gif) repeat-x;
min-height: 171px;
padding: 0px 15px 0px 11px
}

#main .navleft .text a{
font-family: “Lucida Sans Unicode”, sans-serif;
font-size: 12px;
}

#main .navleft .key {
margin-bottom: 15px;
padding: 0px;
}

#main .navleft .login {
margin-bottom: 60px;
}

#main .navleft .key h1 {
background: url(/images/lefthead_links.gif) no-repeat;
width: 261px;
height: 30px;
}

#main .navleft .key ul {
margin: 0px 15px 0px 15px;
}

#main .navleft .key li {
display: block;
padding-left: 26px;
list-style-type: none;
background: url(/images/icon_clip.gif) no-repeat left top;
font-family: “Lucida Sans Unicode”, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: bold;
padding-bottom: 15px;
letter-spacing: normal;
line-height: 1.5em;
color: #6f232d;
}

#main .navleft .key li a { color: #6f232d; text-decoration: none;}
#main .navleft .key li a:hover { text-decoration: underline;}


#main .navleft .login h1 {
background: url(/images/lefthead_clientlogin.gif) no-repeat;
width: 261px;
height: 30px;
}

#main .navleft .login b {
font-size: 13px;
}

#main .navleft .login p, #main .navleft .login a {
color: #6f232d;
margin: 0px;
padding-bottom: 12px;
}

h4 {
}


/* --------------CONTACT------------- */

#contact { margin: 0px; padding: 0px;}
#contact strong { background: url(/images/bullet_arrowtwo.gif) no-repeat left top; padding-left: 11px;}


/* --------------FOOTER------------- */

.clear {
clear: both;
}

#footer, .push { 
clear: both;
width: 960px;
height: 4em; /* make sure this matches in the body container DIV */
bottom: 0;
left: 0;
margin: 0 auto; 
position: relative;
} 

#footer {
background-color: white;
height: 100px;
height: auto;
font-family: “Lucida Sans Unicode”, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: 500;
letter-spacing: normal;
line-height: 1.5em;
}

#footer .content { 
width: 940px; 
height: 66px;
margin: 0 auto; 
position: relative; 
background: url(/images/footerbg.gif) repeat-x;
}

/* --------------FOOTER LINKS------------- */

#footer ul {
padding: 0px;
}


#footer .links {
float: right;
width: 500px;
text-align: right
}

#footer .links ul {
margin: 0px;
padding: 10px;
}

#footer .links li {
display: inline;
list-style-type: none;
}

#footer .links li a {
color: #fff;
text-decoration: none;
padding: 0px 10px 0px 10px;
}

#footer .links li a:hover {
text-decoration: underline;
}

#footer .asc {
float: left;
width: 420px;
padding: 10px;

}

#footer .asc ul {
margin: 0px;
padding: 0px;
}

#footer .asc li {
display: block;
list-style-type: none;
}

#footer .asc li a {
color: #fff;
text-decoration: none;
padding: 0px 10px 0px 10px;
}

#footer .links li a:hover {
text-decoration: underline;
}

#footer .w3 ul {
margin: 0px;
padding: 10px;
}

#footer .w3 li {
display: inline;
list-style-type: none;
}

#footer .w3 li a {
color: #000;
text-decoration: none;
border-right: 1px solid;
padding: 0px 10px 0px 10px;
font: 10pt Arial, 'Trebuchet MS', Sans-Serif;
}

#footer .w3 li a:hover {
text-decoration: underline;
}



/* --------------PAGE BOTTOM------------- */

#pagebottom {
height: 173px;
width: 988px;
background: url(/images/pagebottom.gif) no-repeat;
margin: 0 auto;
}