/* ! All colors/images in associated stylesheet !*/

/* General */
html, body { height: 100%; }
body { font: 76%/1.4 arial, sans-serif; text-align: center; } 
* { margin:0; padding:0; outline: 0; }
/* Layout */
div#wrapper { width: 945px; height: 100%; position: relative; text-align: left; margin: 0 auto; }
div#container { height: 100%; padding-bottom: 3em; }
div#container-2col { min-height: 100%;  }
div#container-3col { height: 100%; padding-bottom: 3em; }
#col-nav { float: left; width: 230px; text-align: center; padding: 0 5px 10px 10px; overflow: hidden; }	
#col-single { float: right; width: 72%; position: relative; margin: 1% 0 3% 2%; }
#col-single a { font-weight: bold; }
#col-nav p { margin: 0; }
#col-nav p a { padding-left: 15px; margin-left: -3px; }
#col-nav p a:hover { padding-left: 15px; margin-left: -3px; }
.nav-group { text-align: left; padding: 0 .5em 1em 0; } /* Grouping container for nav text, menus, etc. */ 
.gutter { height: 100px; }
#bg-mask { background-color: #fff; min-height: 100%; padding: 1em; clear: both; }
#intro { height: 100px; }
.split { width: 47.9%; float: left; display: inline; margin: 1%; } /* Two-column split-screen */

/* Main Header */
#header { padding: 1%; margin-top: .5em; position: relative; height: 6em; overflow: hidden; }
h1#logo { width: 15em; font: bold 2em sans-serif; position: absolute; top:.2em; left: 0; overflow: hidden; max-height:100px; overflow: hidden; }
h1#logo img { border: 0; vertical-align: middle; padding-left: 1em; }
h1#logo a { display: block; text-decoration: none; outline: none; }
#login, .bc_banner { width: 468px; position: absolute; right: 0; height: 3em; text-align: right; }
#login { top: 2.5em; }
#login a { text-decoration: none; outline: none; }	
#login a:hover { text-decoration: none; outline: none; }
#login fieldset { border: 0; }
#login label { font-weight: bold; padding-left: .25em; }
#login input#username { padding: .2em; }	
#login input#password { padding: .2em; }
#login input { font-size: .95em; }

/* Nav Bar */
div#navbar { width: 100%; height: 2em; clear: both; border-bottom: 1px solid #ddd; }
ul#topnav { font: bold .90em arial, verdana, sans-serif; list-style: none; margin: 0; padding: 0;}
ul#topnav li { width: 9em; float: left; line-height: 2.2em; text-align: center; list-style: none; margin: 0; padding: 0;}
#topnav a { display:block; text-decoration: none; outline: none; }
#topnav a:hover, #topnav a:active { display: block; text-decoration: none; outline: none; }

/* General Styles */
a { text-decoration: none; outline: none; }
a:hover, a:active { text-decoration: none; outline: none; }
p { margin-top: 1em; }
ol, ul, blockquote { margin: 1em 0 1em 2em; }
li { padding-bottom: .5em; }
h1, h2, h3, h4, h5 { margin-top: 0; margin-bottom: .25em; font-family: 'Lucida Sans', Arial, serif; letter-spacing: -1px; }
h1 { font-size: 2em; }
h2 { font-size: 1.4em; }
h3 { font-size: 1.3em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1em; font-weight: bold; }
img { border: 0; }
address, pre { font-style: normal; text-align: left; margin: 1em 0 1em 0; }
hr { color: #ccc; background-color: #ccc; height: 1px; border: 0; margin: 1em 0 1em 0; }
hr.clear-floats { display: block; clear: left; height: 1px; margin: 0; padding: 0; visibility: hidden; }
.col-orderheader { width: 30%; margin: 1%; float: left; } /* Thanks.asp order headers */
.thanks-links { margin: 2em 1em; word-spacing: .2em; }
/*#brand { display: none; }*/

/* Message Boxes - http://www.alistapart.com/articles/customcorners	*/
div.box { width: 90%; margin: 1em 1em 1em 0; } 
div.box h3 { display: none; }
div.box-content { color: #eee; font-weight: bold; padding: 1em; text-align: center; }
div.box-foot { display: none; }
div.box .form, div.box fieldset { border: 0; padding: 0; }
#GuestForm { font: 2.5em "Lucida Sans", Times, serif; letter-spacing: -1px; padding-top: 1em;  }
#register a { line-height: 150%; font-size: 1.3em; color: #fff; text-align: left; }
#register .buyer { font-size: 2em; font-family: 'Lucida Sans', Arial, sans-serif; }

/* Menu Tree */
.tree { margin: 0 0 1em 0; padding: 0; }
.tree ul { background: transparent; margin: 0; padding: 0; text-align: left; }
.tree li { background: url(/site-images/menus/page.gif) no-repeat left center; list-style-type: none; padding-left: 22px; text-align: left; padding-top: 3px; }
.tree li.submenu { background: url(/site-images/menus/folder_closed.gif) no-repeat left 1px; cursor: hand !important; cursor: pointer !important; }
.tree li.submenu ul { padding-top: 2px;  }
.tree .submenu ul li{ cursor: default; }

/* Pop-ups */
body#pop { height: 100%; background: url("/site-images/border.gif") 28% 0 repeat-y #fff;  }
body#pop h1 { font-size: 1.2em; color: #fff; margin: 0 0 0 5px; float: left; }
#pop-wrapper { width: 100%; height: 100%; }
#pop-container { background-color: #fff; width: 100%; min-height: 100%; padding: 1em; clear: both; }
#pop-container2 { background: transparent; width: 100%; min-height: 100%; padding: 1em; clear: both; } /* prodDetail reveals body divider for menu */
#pop-menu { width: 22%; float: left; }
.pop-bar { height: 2.5em; line-height: 2em; clear: both; padding: .25em; border-bottom: 1px solid #eee; vertical-align: middle; }
.pop-bar img { vertical-align: middle; float: right; padding-top: 5px; }
body#pop h1 { font-size: 1.2em; color: #fff; margin: 0 0 0 5px; float: left; }

/* ----------------------------------------------------------------------------------- */
/* !CLEAR FIX! - http://www.positioniseverything.net/easyclearing.html				   */
/* ----------------------------------------------------------------------------------- */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

/* Buyers Instructions */
.instructions { width: 45em; font-weight: bold; margin: 0 auto 1em auto; }
.instructions label { color: #fff;  border: 1px solid #ccc; display: block; padding: .5em; margin: 0; }
.instructions textarea { font-size: 1.2em; padding: .5em; }

/* Product Listing */
ul.pgtitles { width: 99%; display: inline; list-style: none; clear: both; margin: 0; padding: 0; }
ul.pgtitles li { width: 29%; font-weight: bold; list-style: none; float: left; padding: 10px 0; }
ul.pgtitles li.last { width: 40%; font-weight: bold; list-style: none; float: left; text-align: right; }
ul.pgtitles p { margin: 0;  vertical-align: top; }

/* Cart Buttons */
ul.order-menu { display: inline; list-style: none; clear: both; }
ul.order-menu li { font-weight: bold; list-style: none; float: left; display: table-cell; text-align: center; margin-right: 1em; }
.add-to-cart a, .remove-from-cart a { width: 149px; height: 26px; display: block; cursor: pointer; }

/* Product Lists */
#qtyform { margin-top: 1em; }
ul#listproducts { display: inline; list-style: none; margin-top: 2%; margin-left: 0; padding-left: 0; clear: both; }
li.product { width: 17.5em; height: 12.5em; display: table-cell; list-style: none; float: left; border-top: 1px solid #ccc; margin: 1em 0 1em; padding-top: 1em; }
li.part-img { width: 72px; list-style: none; float: left; margin-right: 10px; text-align: center; voice-family: "\"}\""; voice-family:inherit; white-space: normal; }
li.part-img img { border: 0; }
li.partdesc { list-style: none; overflow: hidden; _height: 0; _overflow: visible; /* for IE */ padding: 0; }
.pagination { margin: 1em auto 2em auto; text-align: center; font-weight: bold; }
.pagination ul { margin: 0; padding: 0; display: inline; }
.pagination li { list-style-type: none; display: inline; padding-bottom: 1px; margin-right: 1px; }
.pagination a, .pagination a:visited { padding: 3px 5px; border: 1px solid #ddd; text-decoration: none;  color: #2e6ab1; }
.pagination a:hover { color: #000; background-color: #ffe; }
.pagination a.active { background-color: #900; color: #f7f7f7; border: 1px solid #111; }

/* Single Product Display */
#wrap2 { width: 680px; height: 100%; float: right; }
#details-info { float: left; width: 24%; padding: 10px; text-align: left; }
.datablock { padding-bottom: 1em; }
#digital-media { width: 53%; max-width: 53%; margin: 0 3% 0 3%; /*overflow: hidden;*/ float: left; text-align: center; }
#digital-media .photo { padding: 5px; margin-bottom: 1em; }
#digital-media p { margin-bottom: 0; }
#matrices { text-align: left; max-width: 800px; margin: 3% 0 3% 0; }
ul#specs { list-style: none; margin: 1em 0 1em 0; padding: 0; }
ul#specs li { list-style: none; text-decoration: none; padding: 0 0 0 15px; }
/*ul#swatches { width: 105px; }
 Controls Popovers of Full-sized Images 
a { cursor: pointer; }*/
/*a .popover { display: none; }
a:hover .popover { display: block; position: relative; top: -100px; left: 5px; z-index: 999;}
.popover { background: url() #fff; border: 3px solid #ddd; }*/

ul#swatches { width: 105px; cursor: default; clear: both;  }
ul#swatches li { width: 35px; max-width: 35px; height: 15px; margin: 0 4px 0 0; }
.hoverbox { display: block; margin: 1em auto; padding: 0; }
.hoverbox li { /*width: 48px; height: 48px;*/ list-style: none; display: block; float: left; }
/*.hoverbox .singleimage { width: 300px; display: block; float: none; text-align: center; }
.hoverbox .baseimage { display: block; margin: 0 auto; }*/
.hoverbox img, .hoverbox a:hover .preview { background: #fff; border-color: #aaa #ccc #ddd #bbb; border-style: solid; border-width: 1px;  }
.hoverbox a { cursor: default; }
.hoverbox a .preview { display: none; }
.hoverbox a:hover .preview { cursor: pointer; display: block; position: relative; top: -185px !important; left: -135px !important; z-index: 999; }

div#sidebar { width: 320px; margin-left: 10px; float: right; }
div#sidebar ul { list-style: none; margin: 0; padding: 0; }
div#sidebar li { list-style: none; float: left; width: 100px; height: 140px; text-align: center; margin: 0 8px 10px 0; }
div#sidebar ul li.feature { float: left; display: table-cell; width: 60px; height: 60px; line-height: 60px; vertical-align: middle; border: 1px solid #ddd; overflow: hidden; padding: 3px; }

div#complements, div#available { width: 20%; font-weight: bold; }
div#complements { float: right; }
div#available { float: left; }
div#complements img, div#available  img { margin-top: 3px; }
div#available p.item, div#complements p.item, div#available p.size, div#complements p.size { background: url() #f7f7f7; margin: 0; padding: 3px; vertical-align: middle; }
div#available p.item, div#complements p.item { border-bottom: 1px solid #ddd; margin: 0; }
div#available p.size, div#complements p.size { border-top: 1px solid #ddd; width: 94px; position: absolute; bottom: 0; left: 0; }
ul#avail, ul#comp { list-style: none; margin: 0; padding: 0; }
ul#avail li, ul#comp li { list-style: none; width: 100px; height: 160px; text-align: center; margin: 0 8px 10px 0; padding: 0; border: 1px solid #ddd; vertical-align: middle; position: relative; }

.thumb { border: 0; text-align: center; vertical-align: middle; }
.icon { vertical-align: middle;	padding: 0 3px 2px 2px; border: 0 !important; }

/* Alerts */
.alert { background-color: #f7f7f7; border: 1px solid #ddd; font-size: .95em; padding: 1em; margin: 0 auto 1em auto; }

/* Special Styles */
ul.menuitems  { list-style: none; margin: .5em 0 1em 0; }
ul.menuitems li { list-style: none; padding: .2em 0 .2em 0; }
ul.menuitems li a { text-decoration: none; padding-left: 15px; }
ul.menuitems li a:hover { text-decoration: none; padding-left: 15px; }
ul#selected { list-style: none; margin-left: 0; }
ul#selected li { list-style: none; background: url("/site-images/icons/minus.gif") 0 0 no-repeat; padding-left: 20px; }
ul#available { list-style: none; margin-left: 0; font-weight: normal; }
ul#available li { list-style: none; background: url("/site-images/icons/add.gif") 0 0 no-repeat; padding-left: 20px; }
.col-orderheader { width: 30%; margin: 1%; float: left; } /* Thanks.asp order headers */
.icon { vertical-align: middle;	padding: 0 3px 2px 2px; }
.az { text-align: center; font-size: .90em; font-weight: bold; text-transform: capitalize; color: #696; letter-spacing: .03em; }
.nodec { text-decoration: none; outline: none; }
a.industry { font-weight: bold; }
.error { font-weight: bold; }
.keywords { text-transform: capitalize;}
.subtotal { text-align: right; font-weight: bold; }
.grand-total { padding: .5em; text-align: right; font-weight: bold; }
.readonly { background: url() #dededf; }
.highlight { padding: 5px; background-color: #ffc; font-weight: bold; clear: both; }

/* Generic Floats and Alignment */
.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
.align-left { float: left; clear: left; }
.align-right { float: right; clear: right; }
.align-center { margin: 0 auto; }
.normal { clear: both; }
.clear-left { clear: left; }
.clearing { clear: both; }

/* Forms */
fieldset { clear: both; margin-bottom: 1em; border: 0; }
legend { font-weight: bold; color: #036; margin: 0; padding: 0; }
label { font-weight: bold;  margin-left: 0; }
#bg-mask textarea  { width: 45em; padding: .05em; vertical-align: middle; }
.searchbox { width: 12em; }
select  { vertical-align: middle; padding: .05em; }
option { padding-right: .5em; }
input { vertical-align: middle; }
.checkbox, .radio { vertical-align: bottom; margin-right: 5px; }
input:focus, textarea:focus { background: #eee; }
.required:first-letter { color: #f00; font-weight: bold;  }
.formcontainer, .wide { width: 70em; margin: 0 auto; text-align: left; } /* Single forms */
.formcontainer-small, .narrow { width: 47em; margin: 0 auto; text-align: left; }

/* Complex Forms */
.cpx { margin: 0 auto 3em auto; padding: 0; }
.cpx fieldset { margin-top: 1em; margin-bottom: 4em; }
.cpx legend { margin-top: -1.5em; }
.cpx label { width: 14em; font-weight: bold; display: block; float: left; text-align: right; padding-right: 5px; border-right: 1px solid #fff; }
.cpx label.inline { float: none; display: inline; }
.cpx .label_bs { width: 17em; }
.cpx input { max-width: 15em; margin-right: 3px; padding: 3px; display: inline; vertical-align: middle; }
.cpx select { margin-right: 3px; display: inline; vertical-align: middle; }
.cpx select.country { font-size: 9px; text-transform: lowercase; }
.cpx select.country option { text-transform: lowercase; }
.cpx option { padding: 0 3px 0 3px; }
.cpx textarea { width: 20em; text-indent: 0; display: inline; }
.cpx ol { list-style: none; margin: 0; padding: 0; border: 1px solid #ddd; }
.cpx li.clearfix { list-style: none; background-color: #f7f7f7; margin: 1px; padding: 5px; vertical-align: middle; }
.cpx img.icon { vertical-align: top; margin-left: 10px; display: inline !important; }
.cpx img#verify { vertical-align: middle; }
.cpx li span { display: inline; float: left; margin-left: 3px; }
/* Opera 6+ */
@media screen and (min-width: 0px) {
.cpx legend { position: relative; }
}

/* Listings	*/
table { width: 100%; border-collapse: collapse; margin-bottom: 1.5em; }
table.adjust, table.adjust caption { width: auto; margin: 0 auto; }
table.top td { vertical-align: top; }
caption { font-weight: bold; text-align: left; margin-left: -1px; padding: 5px; }
caption a { color: #eee; }
/* Opera 6+ - http://www.aurora-il.org/table_test.htm */
@media screen and (min-width: 0px) {
caption { margin-left: 0; margin-right: 0; }
ul.pgtitles li.last, li.product { padding-top: 0; }
}
th, td { border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; border-collapse: collapse; padding: 5px; text-align: left;}
th { font-weight: bold; margin: 0; }
tfoot { padding: 1em; }
tfoot td { vertical-align: middle; }
tfoot a { font-weight: bold; }
.ltrow { padding: .25em; }
.dkrow { padding: .25em; }

.bc_banner { top: 1em; }
.bc_banner img, .bc_banner a { width: 468px; height: 60px; }
.bc_banner a { display: block; }
.bc_sky_175 { width: 175px; margin-top: 2em; }
.bc_ft { width: 728px; margin: .5em auto 1em auto; }

/* Data Listings - Packing details, etc. */
.row {  margin: 1px; line-height: 1.5em; padding: .25em; clear: both;}
.label { float: left; font-weight: bold; text-align: right; width: 25%; padding-right: 1%;}
.data { float: left; max-width: 74%; text-align: left; }
/* Footer */
div#foot { text-align: center; padding: 1%; clear: both; }
div#foot a.top { height: 20px; padding: 5px; float: right; } /* return to top links */
div#foot p { margin: .25em;}
div#foot a { font-weight: bold; }
div#foot img { border: 0; vertical-align: middle; text-decoration: none;}