/* myatomic 2010 css, copyright 2010 atomic enterprises inc */
/* We use Arial because Helvetica on Windows XP ClearType has too much overshoot on lowercase letters with bowls (e.g. n). So we use Arial. Deal with it. */
/* background-position has to be separate for ie7 */
body { width: 100%; margin: 0; background: #FFF url('g/pagehead2010.jpg') no-repeat; color: #000; font-family: "Liberation Sans", Arial, Helvetica, sans-serif; background-position: center top; font-size: 14px }
img { vertical-align: text-bottom }
a img { border: 0 none }
form { margin: 0 } /* because ie 7 disagrees */

a:visited { color: #0A769D }
a.comingsoon:link, a.comingsoon:visited { color: #CC0000 }
del, s, strike { color: #777 }


strong { color: #900 }
/* openpage */
#h1bar { width: 750px; margin: 0 auto; height: 90px; position: relative }
#h1bar .notuserrelated a { font-weight: bold }
#h1bar strong { color: #FC0 }
h1 { margin: 0 }
h1 img { display: block; float: left; margin: 0 auto }
#h1bar .rpart { clear: right; float: right; text-align: right; font-size: 12px; margin: 0.9em 0; line-height: 1.5em }
/* ie 7 doesn't support color: inherit */
#h1bar .rpart, #h1bar .rpart a { color: #DDD }

#h1bar .rpart img { vertical-align: baseline }

.crnr8, .crnr8gg { position: relative }
.crnr8 .tl, .crnr8gg .tl { position: absolute; left: 0; top: 0; background: url('g/crnr8.png') no-repeat left top; width: 8px; height: 8px }
.crnr8 .tr, .crnr8gg .tr { position: absolute; right: 0; top: 0; background: url('g/crnr8.png') no-repeat right top; width: 8px; height: 8px }
.crnr8 .bl, .crnr8gg .bl { position: absolute; left: 0; bottom: 0; background: url('g/crnr8.png') no-repeat left bottom; width: 8px; height: 8px }
.crnr8 .br, .crnr8gg .br { position: absolute; right: 0; bottom: 0; background: url('g/crnr8.png') no-repeat right bottom; width: 8px; height: 8px }
.crnr8 .top, .crnr8gg .top { margin: 0 8px; height: 8px; background: #424646 }
.crnr8 .middle, .crnr8gg .middle { border-left: 1px solid #424646; padding: 8px 16px 0 16px; border-right: 1px solid #424646; background: white; font-size: 14px }
.crnr8 .bottom, .crnr8gg .bottom { margin: 0 8px; height: 7px; border-bottom: 1px solid #424646; background: white }

.crnr8gg { position: relative }
.crnr8gg .bl { position: absolute; left: 0; bottom: 0; background: url('g/crnr8gg.png') no-repeat left bottom; width: 8px; height: 8px }
.crnr8gg .br { position: absolute; right: 0; bottom: 0; background: url('g/crnr8gg.png') no-repeat right bottom; width: 8px; height: 8px }
.crnr8gg .bottom { background: #424646 }

/* IE 7 z-index works only among sibling elements; an element can't be elevated above an uncle. In addition, it's ignored unless pos:abs or rel. Make sure this z-index is less than that for #quickview_outer. */
#catbar { z-index: 3; font-size: 14px; margin: 0 auto; width: 750px; height: 39px; background: #DDD url('g/catbarbg.png'); position: relative; }
#catbar a img { border: none; vertical-align: middle }
#catbar .crnr8 { position: absolute; top: 32px; left: 5px; width: 730px; display: none }
#catbar .crnr8 p { margin: 0.5em 0; font-size: 12px }
#catbar .crnr8 p a:link, #catbar .crnr8 p a:visited { color: #363535 }
#catbar .crnr8 strong { color: #828181 }
#catbar .crnr8 .middle { padding-right: 4px }
#catbar a:link.catmenu, #catbar a:visited.catmenu { color: #424646; padding: 5px 3px 9px 3px; text-decoration: none; font-weight: bold; outline: none }
#catbar a:link.catmenu.open, #catbar a:visited.catmenu.open { color: #FFF; background: #424646 }
#catbar .rpart { position: absolute; top: 0; right: 0}
#catbar .rpart #catbarsearchcover { position: absolute; top: 11px; left: 10px; z-index: 3; color: #828181; font-size: 12px; display: block }
ul.catbartree { padding-left: 0; margin: 0; font-size: 14px; font-weight: bold; color: #398ecd }
/* 2010-04-01: Brandon wanted them on a grid */
ul.catbartree li { list-style-type: none; border-top: 1px solid #dedede; display: inline-block; vertical-align: top; padding: 0.5em 0.5em 0.5em 0; width: 165px }
/* to get inline-block to work in IE 7, you have to first give it inline-block then give it inline */
* + html ul.catbartree li { display: inline }

ul.catbartree li a:link, ul.catbartree li a:visited { text-decoration: none }
ul.catbartree li a:active, ul.catbartree li a:hover { text-decoration: underline }
/* 2010-04-01: Brandon wanted subcats not indented */
ul.catbartree li ul { margin: 0; padding-left: 0 } 
ul.catbartree li ul li { margin: 0; padding: 0; border-top: 0; display: list-item; font-size: 12px; font-weight: normal; color: #000 }
ul.catbartree li ul li a { color: #000 }
/* 2010-04-12: Be more explicit about lack of support for older IE */
#end6warning { text-align: center; font-size: 12px; color: #555; font-weight: bold; margin: 0.5em auto; width: 740px; padding: 0.5em 0; border: 1px solid #A00 }


/* closepage */
#bottombar1 { clear: both; width: 100%; clear: both; border-spacing: 0; margin: 0 auto; font-size: 12px; line-height: 15px; height: 60px; padding: 28px 0; background: url('g/behindbb1.png') center no-repeat; color: #333 }
#bottombar1 td.c, #bottombar1 td.c1 { vertical-align: top; padding: 0 0 0 2em; width: 14em }
#bottombar1 td.c { border-left: 1px solid #666 }
#bottombar2 { border-spacing: 0; margin: 0 auto; font-size: 12px; width: 100% }
#bottombar2 th { background: #E9E9E9; color: #000; border-top: 1px solid #C3C3C3; border-bottom: 1px solid #C3C3C3; text-align: left }
#bottombar2 td.c { width: 8em }
#bottombar2 td { margin: 0 }
#bottombar2 a:link { color: #444 }
#copr { text-align: center; background: #FFF; color: #777; font-size: 12px }

#bottombar2010 { clear: both; width: 750px; margin: 0 auto; padding: 8px 5px; background: #FFF url('g/bottombg.png') repeat-x; border: 1px solid #444; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; font-size: 12px }
#bottombar2010 strong { color: #444 }
#bottombar2010 td { padding: 0 8px; vertical-align: top; background: url('g/bottombgpipe.png') no-repeat }
#bottombar2010 td:first-child { background: none }

/* index */
#hpsocialbar { width: 750px; text-align: right; margin: 0.5em auto }

#homespecial { width: 750px; margin: 0.5em auto 0 auto }
#homespecial.crnr8gg .middle { padding: 0 }
#homespecial #homerotation { display: block; float: right }
#homespecial ul { position: relative;  margin: 0 560px 0 0; padding: 0; list-style-type: None; font-size: 12px; background: #FFF; color: #222 }
#homespecial ul li { height: 96px; position: relative }
#homespecial ul li a { text-decoration: none; display: block; color: #c00; font-weight: bold; font-size: 16px; height: 20px; padding: 10px 0 0 12px; text-wrap: none }
#homespecial ul li.lit { background: #EEE }
#homespecial ul li .hsarrow { display: block; position: absolute; right: -16px; top: 32px; visibility: hidden }
#homespecial ul li.lit .hsarrow { visibility: visible }

#homespecial ul li div { margin-left: 1em; margin-right: 1em }

#home2 { width: 750px; height: 50px; margin: 0 auto }
#home34 { width: 750px; height: 150px; margin: .5em auto; clear: both }
#home34 img { margin-right: 6px }
#home34:first-child img { margin-right: 20px }

div.fullfeatbox { width: 750px; font-size: 12px; margin: 0 auto }
div.crnr8gg div.featlist { height: 200px; padding: 0 }
div.featlist.short { width: 500px }
div.fullfeatbox div.featlist>div.featscroll { width: 560px; height: 200px }
div.featlist>h2 { clear: left; float: left; width: 140px; height: 200px; margin: 0; padding: 0; background: #CBA }
/* ie 7 failed at of:hidden until I added pos:rel to both the scroll pane div and the scrolled document div */
div.featlist>div.featscroll { position: relative; overflow: hidden; float: left }
div.featlist>div.featscroll>div { width: 8191px; position: relative }
div.featlist>div.featscroll.short { width: 300px }
div.featlist div.pr { width: 140px; padding: 0; height: 200px; position: relative; float: left }
div.featlist a.btn { display: block; float: left; width: 24px; height: 200px }
div.featlist a.btn.prev { cursor: w-resize }
div.featlist a.btn.next { cursor: e-resize; float: right }
div.featlist div.pr img { display: block; margin: 0 auto 1em auto; max-height: 120px }
div.featlist div.pr div { width: auto; background: none; position: absolute; bottom: 6px; left: 6px; right: 6px; padding: 0; margin: 0; clear: left }

/* viewcat no items */
.catcrumbs { font-size: 14px }
#resultsmain, #productmain { margin: 1em auto; width: 751px; position: relative}
/*
#resultsmain #catpromo { width: 739px; margin: 0 auto }
*/
#resultsmain .besidebanner1 { float: right; margin-bottom: 8px; clear: right }
#resultsmain .catbanner { display: block }

div.noitcatbrands { background: #FFF url('g/vc_bybrand_back.png') top repeat-x; font-size: 14px; margin: 1em 0; border: 1px solid #CCC; border-top: 0 none }
div.noitcatbrands h3 { color: #FFF; padding: 0 1em; text-align: left; font-size: 100%; margin: 0 0 0.5em 0; min-height: 18px }
div.noitcatbrands h3 a { color: #FFF }
div.noitcatbrands table { clear: left; width: 96%; margin: 0 auto }
div.noitcatbrands th { text-align: left; border-top: 1px solid #999 }

div.noitcatsubs { float: left; border: 1px solid #444; width: 178px; margin-left: 10px; font-size: 14px; margin-top: 1em; border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -webkit-border-radius: 5px }
div.noitcatsubs .sampleimg { height: 60px; line-height: 60px; text-align: center; overflow: hidden }
div.noitcatsubs img { vertical-align: middle }
div.noitcatsubs h3 { text-align: left; background: #444; padding: 0; font-size: 117%; margin: 0.2em 0; color: #FFF }
div.noitcatsubs h3 a { display: block; padding: 1px 1em; color: inherit; text-decoration: none; min-height: 21px }
div.noitcatsubs ul { margin: 0.2em 0; padding: 0.5em 0.5em 0.5em 2em }
div.noitcatsubs ul li { margin-left: 0; font-size: 11px }
div.noitcatsubs ul a { margin-left: 0; font-size: 13px }
div.noitcatsubs ul ul { background: none; padding-left: 1em }
div.noitcatsubs.newrow { clear: left; margin-left: 0 }

/* search, viewsku */
div.itcat { margin: 0.5em 0; font-size: 14px }
div.itcatsubs { font-size: 12px; float: left; width: 150px; border: 1px solid #828181; border-top-width: 8px; border-bottom-width: 8px; margin: 0; background: #FFF; padding: 0 12px 8px 12px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px; overflow: hidden }
div.itcatsubs .withinForm input[name="q"] { width: 144px }
div.itcatsubs .withinForm strong { color: #000000 }
div.itcatsubs .omdilimittype, div.itcatsubs .matchcount { color: #828181 }
div.itcatsubs .withinForm li a:link, div.itcatsubs .withinForm a:visited { color: #E55; text-decoration: underline; font-weight: normal }
div.itcatsubs h3 { margin: 0.5em -12px; padding: 0.2em 1em; font-size: 100%; color: #444; background: #E3E3E3; border: 1px solid #444; border-left: none; border-right: none }
div.itcatsubs h3.existingfilters { margin-top: 0; padding-top: 0; background: #828181; color: #FFF; border: none }
div.itcatsubs ul { margin: 0.5em 0; padding: 0; list-style-type: none }
div.itcatsubs ul ul { list-style-type: none; padding-left: 0.5em }
div.itcatsubs li { margin-left: 0 }
div.itcatsubs li a { color: #398ecd; font-weight: bold; text-decoration: none }
div.itcatsubs li a:hover,div.itcatsubs li a:active { text-decoration: underline }
div.itcatsubs li li a { color: #000 }
div.itcatsubs li li:before { content: '-' }
div.itcatsubs p { margin: .5em 0 }

div.itcatitems { border: 1px solid #828181; border-top-width: 8px; border-bottom-width: 8px; margin-left: -5px; padding: 0 0 0 5px; float: right; width: 564px; border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -webkit-border-radius: 5px }
div.itcatitems .pr { position: relative; float: left; width: 171px; height: 300px; border-left: 1px solid #999; border-bottom: 1px solid #999; padding: 1em 8px; background: #FFF }
div.itcatitems .pr.left { clear: left; border-left: none }
div.itcatitems .pr .instock { float: right }
div.itcatitems .pr .quickview_open { float: left }
div.itcatitems .pr .photoholder { height: 120px; clear: both }
div.itcatitems .pr .mfnsku, div.itcatitems .pr .priceblock .msrp { font-size: 12px; color: #444 }
div.itcatitems .pr img { margin: 0 auto; display: block }
div.itcatitems .pr .priceblock { padding-left: 8px; width: auto; position: absolute; bottom: 0; left: 0; right: 0 }
div.itcatitems .pr strong, div.itcatitems .prl strong { color: #57ba4a }

div.itcatitems .prl { position: relative; float: left; width: 550px; height: 60px; border: 1px solid #999; margin-top: -1px; margin-right: -1px; padding: 3px; background: #FFF }
div.itcatitems .prl .photoholder { width: 70px; height: 60px; float: left; overflow: hidden }
div.itcatitems .prl img { margin: 0 auto; display: block }
div.itcatitems .prl .infoholder { margin-left: 80px; font-size: 12px }
div.itcatitems .prl .infoholder a { font-size: 14px }
div.itcatitems .prl form { text-align: center; width: auto; position: absolute; bottom: 0; left: 70px; right: 0; padding: 0; margin: 0; min-height: 20px; background: none }
div.itcatitems .prl form div.ll { text-align: left }
div.itcatitems .prl form.lr { left: auto; text-align: right; max-width: 50% }

div.itcatitems .pager, div.itcatitems .pager2 { text-align: center; clear: left; font-size: 13px; min-height: 1em; line-height: 1.25em }
div.itcatitems .pager { background: #828181; color: #E3E3E3; margin-left: -5px; padding: 0 5px 3px 5px }
div.itcatitems .pager .nresults { float: left }
div.itcatitems .pager .pageno { float: right }
div.itcatitems .pager strong { color: #FC0 }
div.itcatitems .pager a { color: #E3E3E3 }

/* quickview */
/* filter:alpha is IE's version of opacity */
div#quickview_outer { position: fixed; z-index: 4; left: 0; top: 0; height: 100%; width: 100%; color: #FFF; background: #000; opacity: 0.50; filter:alpha(opacity=50) }
div#quickview_inner { position: fixed; border: 0.2em solid #000; z-index: 5; left: 50%; top: 4em; margin-left: -15.2em; width: 30em; color: #000; background: #FFF }
div#quickview_inner a.winctl { display:block;float:right; margin: 4px 0 }
div#quickview_inner h2 { margin: 0 0 0.5em 0; background: #444; color: #FFF; min-height: 24px; font-size: 18px; padding: 4px }
div#quickview_inner div#qvmain { margin: 1em }
div#quickview_inner img.thumb { width: 120px; height: 120px; float: left; margin: 0 1em 1em 0 }
div#quickview_inner div.mfrName { font-size: 12px; color: #444; margin: 0 0 0.5em 150px }
div#quickview_inner div.msrp { font-size: 12px; color: #444; margin-left: 150px }
div#quickview_inner div.price { font-size: 14px; font-weight: bold; color: #57ba4a; margin-left: 150px }
div#quickview_inner div.freeShipping { font-size: 12px; font-weight: bold; color: #C44; margin-left: 150px }
div#quickview_inner form.addbuttons { font-size: 12px; font-weight: bold; color: #000; margin: 0.5em 1em 0.5em 150px}
div#quickview_inner h3 { font-size: 16px; clear: left }


/* viewsku */

/* must use 2 divs because IE can't use both left: and right: on one div */
.viewbigwrap { position: absolute; left: 0; right: 0; visibility: hidden }
.viewbig { border: 2px solid #000; background: #FFF; position: relative; width: 600px; margin: 0 auto; z-index: 1; visibility: hidden }
.viewbig img.productshot { display: block; margin: 1em auto }
.viewbig a { text-decoration: none }
#productmain .itcatitems h2, #productmain .itcatitems h3 { background: #eee; border: 1px solid #999; padding: 4px 6px; font-size: 14px; margin: -1px -1px .5em -6px }

/* mfrlogo and priceblock should have same margin-right */
#productmain .itcatitems { font-size: 16px } 
#productmain .mfrlogo { display: block; float: right; margin: 0 1em 0.5em 1em }
#productmain .box3 { clear: left; border: 1px solid black }
#productmain .priceblock { border: 1px solid #999; background: #EEE; padding: 0.5em; margin: 0.5em 1em 0.5em 125px; line-height: 1.5em; clear: right }
#productmain .priceblock small { color: #444 }

#productmain .warningblock { clear: left; margin: 1em 1em 1em 1em; border: 1px solid #800; padding: 0.5em 1em 0.5em 2em }
#productmain .warningblock li { margin-bottom: 0.25em }
#productmain pre, #resultsmain pre, #productmain .unicat {
  font-family: monospace;
  font-size: 14px;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;  /* for Fx 2 */
  word-wrap: break-word;  /* for ie 6 */
} /* per https://developer.mozilla.org/en/CSS/white-space */

/* quick view */

/* policies, shipping */
#infomain, #custconnmain { margin: 1em auto; width: 750px; position: relative; font-size: 14px }
#infomain h2, #infomain h3, #custconnmain h2, #custconnmain h3 { margin: 1em 0 0.5em 0; color: #39c; background: #eee; border: 1px solid #999; clear: both }
#infomain h2, #custconnmain h2 { font-size: 114%; padding: 0.2em 1.6em }
#infomain h3, #custconnmain h3 { font-size: 100%; padding: 0.2em 2em }
#infomain p { padding: 0 1.5em 0 2em }
#infomain table.datatable { margin: 0 2em 1em 3em; float: right }

/* orderinfo, policies, shipping, cart */
table.datatable { border: 1px solid #555; border-collapse: collapse; border-spacing: 0; font-size: 14px }
table.datatable tr.totals { border-top: 3px solid #CBA; font-weight: bold }
table.datatable tr.attention { background: #FC9 }
table.datatable th, table.datatable tr.giftoptions { text-align: left; background-color: #555; padding: 0.2em 0.4em; color: #FFF }
table.datatable tr.giftoptions strong { color: #FFF }
table.datatable td { border: 1px solid #555; padding: 0.2em 0.4em }
table.giftwrappreview td { text-align: center }
table.giftwrappreview td img { display: block; margin: 0 auto }
table.datatable td strong { color: #000 }
table.datatable td.required strong { color: #900 }

table.formtable { border-collapse: collapse; border-spacing: 0 }
table.formtable th { padding: 0.1em 0.3em; vertical-align: top }
table th.required, table td.required { background-color: #FDD }
table.formtable td { padding: 0.1em 0.3em; vertical-align: top }
td.numalign, input.numalign, td.numalign input { text-align: right }

/* customerconnection */
#custconnmain h2 { margin-bottom: 0; color: #000 }
#custconnintro { height: 119px; background: #A3A3A3 url('g/connectedplug.jpg') right no-repeat; color: #FFF; font-size: 14px; padding: 10px 0; border: 1px solid #999 }
#custconnintro p { width: 420px; padding: 0 2em }
#custconnintro p a { color: #EE8 }

/* gallery */
table.gallerymain { margin: 1em auto }
table.gallerymain td { text-align: center; vertical-align: middle }
table.gallerymain img { display: block }

.withinForm { margin: 0.5em 0 }
.withinForm ul { margin: 0.5em 0 }

.floatythumb {
  clear: left; float: left; width: 120px; max-width: 120px; max-height: 180px; margin: 0 0.5em 0.5em 0
}
.floatythumb img { display: block; margin: auto }

.contactinfo {
  clear: both; font-size: 80%; background: #EEE; margin: 1em auto; border: 1px solid #999; border-spacing: 1em
}
.contactinfo td { vertical-align: top }