﻿
/*********************common***********************/

* { margin: 0; padding: 0; }


body { margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.7em; line-height: 1.4em; background-color: #000000; background-image: url('../layout/gradient_background.jpg'); background-repeat: repeat-x; }
.clear { clear: both; height: 0; font-size: 1px; line-height: 0px; }
.clear-right { clear: right; }

h1, h2, h3, h4, h5, h6 { font-size: 1.5em; font-family: Tahoma, Arial, Helvetica, sans-serif; line-height: 1.5em; margin: 0; }
h1 {margin: 0px 20px 10px 20px; font-size: 1.5em; border-bottom: solid 2px #c0c0c0; padding-top:15px;}
h2 { font-size: 1.3em; margin-bottom: 10px; }
h3 { font-size: 1.1em; }
h4 { font-size: 1.0em; }
h5 { font-size: 0.7em; }
h6 { font-size: 1em; }
p { font-size: 11px; line-height: 1.5em; margin: 0; padding: 5px 0; }

img { border-style: none; border-color: inherit; border-width: 0; }

/*******************
Links
*******************/
a:link { color: #000; text-decoration: none; font-weight: bold; }
a:visited { color: #000;}
a:hover { text-decoration: underline; font-weight: bold; }
a:focus { outline: none; }


#wrapper-page { margin: 0 auto; width: 980px; border: 2px solid #000000; margin-top: 20px; /*background-color: #FFFFFF;*/ margin-bottom:20px; }
#header { height: 150px; background: #333333 url('../layout/header-winter.jpg') no-repeat; }
#headerp {margin-left:-9999;display:none;}
/*~~~~Search~~~~*/
#search { border: 10px solid #333333; margin: 90px 8px 0px 0px; background-color: #FFFFFF; width: 210px; float: right;}
.searchbox { border-width: 0px; width: 190px; font: 11px Verdana, Arial, Helvetica, sans-serif; float: left; margin-top: 2px; }
.searchbutton { float: right; }

#topmenu { width: 100%; border-bottom: 1px solid #666666; height: 30px; background-image: url('../layout/menu_u.gif'); background-repeat: repeat-x; z-index:100; }
#topmenu ul { margin: 0; padding: 0; list-style-type: none; width: auto; float:left; }
#topmenu ul li { display: block; float: left; margin: 0; /*line-height:30px;*/ }
#topmenu ul li a {   display: block; float: left; padding: 0px 15px 0px 15px; /*height: 24px;*/ text-decoration: none; color: #fff; border-right: 1px solid #444; font-size: 1.0em; line-height:30px;     }
#topmenu ul li a:hover { color: #fff; background: #fff url(../layout/menu_o.gif) repeat-x; }





/*******************
Footer
*******************/
#footer { background-color: #333; color: #fff; height: 120px; /*margin-bottom: 20px;*/ padding: 10px 0px 5px 0px; }
#footer a { color: #fff; font-weight:normal; display:block; }
/*******************
Containers
*******************/

#content-wrapper { width: 100%; /*background-image: url('../layout/content_bkgd.gif');*/ background-color:#fff; min-height:350px; }
.contentright { /*margin: 10px 0px 10px 20px;*/ padding: 0px; margin-left: 200px; border-left:1px solid #c0c0c0; min-height:400px; }
.contentright h1 { margin: 0px 20px 10px 20px; font-size: 1.5em; border-bottom: solid 2px #c0c0c0; padding-top:15px; }

/*******************
Left Navigation
*******************/
.leftnav { width: 200px; float: left; padding-top: 0px; }
.leftnav a, .leftnav h2 { color: #666; display: block; padding: 4px; font-weight: bold; line-height: 20px; margin: 0px; border-bottom:1px solid #c0c0c0; }
.leftnav a:hover { text-decoration: none; color: #fff; display: block; background-color: #4AA615; }
.leftnav .navselected { background-color:#eee;}
.leftnav h2 { background-color:#000; color:#fff; display: block; font-size:12px;}
.leftnav a span   {font-size:9px; line-height:10px;}

#content-2col-l { width: 200px; float: left; background-color: #222222; }
#content-2col-r { margin-left: 200px; padding: 10px 20px 10px 20px; background-color: #fff; }
.breadcrumb { color: #000; font-weight: bold; font-size: 11px; padding-top: 8px; width: auto; height: 22px; background-image: url('../layout/menu_o.gif'); background-repeat: repeat-x; padding-left: 10px; }
.breadcrumb a { background-position: right; color: #000; text-decoration: none; background-image: url('../layout/arrow.gif'); background-repeat: no-repeat; padding-right: 20px; margin-right: 8px; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }



.cont_l, .cont_r { margin-right: 10px; }
.cont_l { width: 450px; margin-bottom: 20px; }
.cont_r { width: 180px; float: right; }
.cont_l h2, .cont_r h2 { background-color: #7cbf4d; padding-top: 4px; font: bold 13px/20px Verdana, Arial, Helvetica, sans-serif; border-bottom: 2px solid #666666; background: #7cbf4d; color: #000000; }
.cont_l h3, .cont_r h3 { font: bold 11px/20px Verdana, Arial, Helvetica, sans-serif; color: #CC0000; margin-top: 15px; }
.cont_l li, .cont_r li { list-style: disc outside; line-height: 18px; color: #000; margin-left: 20px; }

.pod { margin: 4px; padding: 4px; border: solid 1px #FFF; display: inline-block; width: 150px; vertical-align: top; height: 100%; }
.contentdetail { margin: 0px 20px 20px 20px; vertical-align: top; display: block; }
.contentdetail ul { padding: 0; margin-left: 25px; }
.contentdetail li { list-style: none; list-style-image: url('../layout/bullet.gif'); list-style-position: outside; font-size: 11px; line-height:18px; }

/*******************
Categories / Sub Categories
*******************/
.cat { width: 165px; height: 180px; border: 2px solid #C0C0C0; margin: 0px 0px 10px 20px; float: left; text-align: center; }
.cat a { margin: 0 auto; color: #000; font-size: 10px; width: 100%; display: block; text-decoration: none; }
.catsub { margin: 0px 0px 6px 20px; width: 300px; line-height: 36px; border: 2px solid #C0C0C0; }
.catsub a { padding: 0px 8px; color: #000; font-size: 10px; width: auto; display: block; text-decoration: none; }
.catsub a:hover { background-color: #4AA615; color:#fff; }
.catsubimg { float: right; margin-right: 40px; }


.catitem, .specitem, .viditem { border: 2px solid #C0C0C0; margin: 0px 0px 6px 20px; float: left; width: 230px; }
.viditem { width: 226px; margin: 0px 0px 20px 20px; }
.viditem a { text-decoration:none;}
.catitem img, .specitem img { float: left; margin: 5px; width:110px; height:110px;  }
.catitem h3, .specitem h3 { padding: 4px 4px 4px 10px; color: #fff; font-size: 12px; background-color: #4AA615; height: 16px; display: block; white-space: nowrap; }
.viditem h3 { padding: 4px; color: #fff; font-size: 12px; background-color: #4AA615; height: 32px; line-height:16px; display: block; }

.catitem p, .specitem p { margin-left: 120px; font-size: 10px; padding-right: 10px; padding-left: 10px; }
.catitem { height: 150px; }
.specitem { height: 150px; width:295px; }
.cat:hover, .catitem:hover, .viditem:hover { border: solid 2px #4AA615; }
.specitem .soldimg { width:92px; height:44px; }



/*******************
Product Page
*******************/


.red { color: #aa0000; font-weight: bold; font-size:120%; }
.photo-prod { max-height: 450px; max-width: 450px; margin-left: 10px; float: right; }
.disclaimer { padding: 5px; font-size: 9px; }
.smallimg { max-width: 40px; max-height: 40px; }
#pics p { font-size: 11px; font-weight: normal;  }



/*Part Numbers Table *******************/
.table-prod-listing { width: 100%; border-collapse: collapse; border-spacing: 0px; font-size: 11px; }
.table-prod-listing td { border-style: solid none solid none; border-width: 1px 0px 1px 0px; vertical-align: top; border-top-color: #bbb; padding: 4px; border-bottom-color: #bbb; }
.table-prod-listing tr:nth-child(2n+1) { background-color: #fcfcfc; }
.table-prod-listing tr:nth-child(2n) { background-color: #f1f1f1; }
.table-prod-listing tr:last-child td { border-bottom: none; }
.table-prod-listing tr:hover td { background: #555; color: #fff; }
.table-prod-listing th { padding: 4px; background: #444; border-bottom: 1px solid #bbb; color: #fff; text-align: left; }
.table-prod-listing th.tx-r { text-align: right; }
.td-sku { white-space: nowrap; width: 100px; font-weight: bold; }
.td-price { text-align: right; white-space: nowrap; font-weight: bold; }
/*Specification Table *******************/
.table-prod-specs { width: 100%; border-collapse: collapse; border-spacing: 0px; font-size: 11px; }
.table-prod-specs td { border-style: solid none solid none; border-width: 1px 0px 1px 0px; vertical-align: top; border-top-color: #bbb; padding: 4px; border-bottom-color: #bbb; width: 50%; }
.table-prod-specs tr:nth-child(2n+1) { background-color: #fcfcfc; }
.table-prod-specs tr:nth-child(2n) { background-color: #f1f1f1; }
.table-prod-specs tr:last-child td { border-bottom: none; }
.table-prod-specs tr:hover td { background: #555; color: #fff; }
.table-prod-specs th { padding: 4px; background: #444; border-bottom: 1px solid #bbb; color: #fff; text-align: left; }
.table-prod-specs th.tx-r { text-align: right; }
/*Additional Info Table *******************/
.table-prod-info { width: 100%; border-collapse: collapse; border-spacing: 0px; font-size: 11px; }
.table-prod-info td { border-style: none none none none; border-width: 1px 0px 1px 0px; border-top-color: #bbb; padding: 4px; border-bottom-color: #bbb; width:50%; vertical-align:middle;  }
.table-prod-info tr:nth-child td { background-color: #fcfcfc; }
.table-prod-info tr:last-child td { border-bottom: none; }
.table-prod-info img { max-width:350px; max-height:300px;  }
.table-prod-info p { margin:5px 15px 5px 15px;  }


/*******************
Jquery Tabs
*******************/
/* tab pane styling */
.panes div { display: none; padding: 0px; border: 1px solid #4AA615; border-top: 0; height: auto; font-size: 12px; background-color: #fff; }
/* root element for tabs  */
ul.tabs { list-style: none; margin: 0 !important; padding: 0; border-bottom: 5px solid #4AA615; height: 29px; margin-bottom:5px; }
/* single tab */
ul.tabs li { float: left; text-indent: 0; padding: 0; margin: 0 !important; list-style-image: none !important; }
/* link inside the tab. uses a background image */
ul.tabs a { border-style: solid; border-width: 1px; border-color: #4AA615 #4AA615 #999 #4AA615; font-size: 11px; display: block; height: 27px; line-height: 27px; width: auto; text-align: center; text-decoration: none; color: #000; padding: 0px 15px 0px 15px; margin: 0px 2px 0px 0px; position: relative; top: 1px; -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; background-color: #eee; background-image: url('../layout/tab-u.gif'); background-repeat: repeat-x; }
ul.tabs a:active { outline: none; }
/* when mouse enters the tab move the background image */
ul.tabs a:hover { color: #fff; background-image: url('../layout/tab-o.gif'); background-repeat: repeat-x; }
/* active tab uses a class name "current". its highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a { cursor: default !important; color: #fff !important; background-color:#4AA615; background-image:none;  border-bottom:1px solid #4AA615; }
/* initially all panes are hidden */
.panes .pane { display: none;}


/*******************
Home Page
*******************/
.col700 { width: 700px; float: left; padding: 0px 0px 10px 0px; background-color: #fff; }
.col280 { width: 260px; float: right; padding: 0px 10px 10px 10px; background-color: #eee; }
.col280 img { margin-top:15px;}
.navGroup { width:33%; font-size: 13px; font-family: Tahoma, Arial, Helvetica, sans-serif;  }
.navGroup a { display: block; padding: 10px; border-bottom: 1px solid #999; font-weight: normal; margin-right: 10px; margin-left: 10px; color:#000; }
.navGroup a:hover { background-color:#4AA615; text-decoration:none; color:#fff;}
.pod { width: 240px; margin: 15px 0px 0px 0px; border: 1px solid #999; background-image: url('../layout/pod-back.jpg'); background-repeat: repeat-x; background-color:#fff; padding: 10px 10px 0px 10px; }
.pod h3, .col700 h3 { font-family:"Arial Black", Arial, sans-serif; font-size: 18px; line-height: 24px; font-weight:900; text-transform: uppercase; letter-spacing: 0px; }
.col700 h3 { margin: 40px 10px 0px 10px; border-bottom: 1px solid #999; }
.pod p { margin:0px 0px 10px 0px;}
.pod img { float:right; }
.pod a { margin:10px 0px;}
a.specbutton, .leftnav a.specbutton { color: #000; border: 1px solid #000000; color: #000; font-weight: bold; font-size: 11px; padding: 5px 10px 5px 10px; background-image: url('../layout/menu_o.gif'); background-repeat: repeat-x; text-decoration:none; display:inline-block; }
.leftnav a.specbutton { border:none; width: 186px; padding: 5px 10px 5px 4px; }
a.specbutton:hover, h1 a.specbutton:hover  { color: #fff; text-decoration: none; cursor:pointer; }


/*******************
Search results 
*******************/
.hilite { background-color:#ffff80;}
.srchcont { /*width:800px;*/ border-top: 1px solid #ccc; padding: 5px 15px 5px 15px; margin-right: 25px; }
.srchcont img {float:left; margin-right:15px; margin-bottom:10px; }
.srchcont p { font-size:10px; line-height:12px; margin-bottom:0px; margin-left:100px; }
.srchtitle a  { font-size:12px;  font-weight:bold; /*margin-bottom:4px;*/ color:#444 }
.srchdesc {  font-size:10px;  font-weight:bold; font-style:italic; /*margin-bottom:4px;*/ }
.pgbtn, .pgcurrent { border: 1px solid #000; padding: 3px 8px 3px 8px; }
.pgbtn a {display:block;}
.pgbtn a:hover { background-color:#4AA615;}
.pgcurrent { color:#aa0000; font-weight:bold;}

/*******************
Misc
*******************/
.col180 {width:180px;}
.col200 {width:200px;}
.col250 {width:250px;}
.col300 {width:300px;}
.col350 {width:350px;}
.col400 {width:400px;}
.col170 {width:170px;}
.col150min { min-width:150px;}
.left { float: left; }
.right { float: right; }
.pad10LR { padding: 0px 10px 0px 10px; }
.pad20LR { padding: 0px 20px 0px 20px; }
.pad30 { padding: 0px 30px 10px 30px; }
.m30L { margin-left:30px;}
.m30R { margin-right:30px;}
.m10b { margin-bottom:10px;}
.m15b { margin-bottom:15px;}
.m10t { margin-top:10px;}
.m10LR { margin: 0px 10px 0px 10px; }
.m10 { margin: 10px; }
.m10l { margin-left: 10px; }
.m20 { margin: 20px; }
.m20b { margin-bottom: 20px; }
.m20t { margin-top:20px; }
.m20LR { margin: 0px 20px 0px 20px; }
.padded20 { padding: 20px; }
.padded10 { padding: 10px; }
.p20l { padding-left: 20px; }
.border-r-gray { border-right:1px solid #444;}

.max250 { max-height:250px; max-width:250px; }
.max200 { max-height:200px; max-width:200px; }
.max320 { max-width:320px; max-height:320px;}
.textl  { text-align: left; }
.textr  { text-align: right; }
.textc { text-align: center; }
.error { color: #aa0000; font-size: 12px; font-weight: bold; }
.p10 { font-size: 10px:; }
.p9 { font-size: 0.9em; }
.p85 { font-size: 0.85em; }
.p8 { font-size: 8px; }
.p12 { font-size: 12px; }
.p16 { font-size: 16px; }
.pBold { font-weight: bold; }
.pBoldI { font-weight: bold; font-style: italic; }
.red { color: #aa0000; }
.p10 { font-size: 10px; font-weight: normal; }
.b { font-weight: bold; }
.rct5 {-moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px;}
.width45 { width: 45%; }
.width300 { width: 300px; }
/*******************
JQuery Tooltip
*******************/
.tooltip { display: none; border: 5px solid #999; background: #e1e1e1; cursor: default; padding: 10px; max-width:350px; }
.tooltip h2 { padding: 6px 0px 0px 4px; background: #000; color: #fff; width: 176px; }
.tooltip a { width:176px; margin-left: 0px; display: block; height: 20px; padding-top: 6px; border-bottom: 1px solid #ccc; padding-left: 4px; color:#000; background-image: url('layout/mnu-u.jpg');}
.tooltip a:hover { background-color:#e1e1e1;  background-image: url('layout/mnu-o.jpg'); color:#fff;}
.tooltip img { max-width: 300px; max-height: 300px; background-color: #fff; padding: 4px; text-align:center; }
