/* screen styles from template version 1.0 */ /* NOTE: any * > selector rules are for standards-compliant browsers. The rule before will have a style that works in IE6. */ /* Table of Contents Non-displaying Elements Layout Page Specific Layout Typography and Inline Elements Page Specific Typography Navigation Specific Nav Button Styling Forms Paypal Forms */ /* Non-displaying Elements*/ /* *************************************************************************************** */ #foo { display:none; } #bar { text-indent:-9999px; overflow:hidden } /* moves text inside menu anchors off screen. Remove if not using graphics for menu links. */ /* Layout */ /* *************************************************************************************** */ html { background-image: url(../images/bg.png); background-repeat: repeat-x; background-position: center top; } body { font-size:1em; text-align:center; background: #FFF url(../images/bg.png) repeat-x center top; } #container { height:auto; margin:0 auto; position:relative; text-align:left; width:960px; } #branding { height: 246px; margin-bottom: 50px; position:relative; float:none; background: url(../images/branding.png) no-repeat 712px top; } #branding img { margin-top:52px } #content { position:relative; float:none; margin-bottom:2em; } #content .main { float:left; width:640px; margin-right:40px } #content .sidebar { float:right; width:280px; margin-bottom:1em; } #footer { position:relative; float:none; clear:both; font-size: 0.8em; margin-bottom: 2em; border-top-width: 1px; border-top-style: dotted; border-top-color: #00A9CC; background: #E5F5FE url(../images/corner-blue-sockdot.png) no-repeat right bottom; padding:.25em 20px 0 1em; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } .info_box { float:left; width:44%; padding:2% 2% 0; margin-right:4%; margin-bottom:1em; height:8em; background-color:#EDFAFF; -khtml-border-radius:.25em; border-radius:.25em; -moz-border-radius:0.25em; -webkit-border-radius:.25em; } .info_box + .info_box { float:right; clear:right; margin-right:0; } * html .info_box { width: 44%; margin-right:2%; } .info_box:hover { background-color:#F7F089 } .extra_info { float:right; width: 30%; padding:2% 2% 0; margin-left:4%; margin-bottom:1em; background-color:#EDFAFF; -khtml-border-radius:.25em; border-radius:.25em; -moz-border-radius:0.25em; -webkit-border-radius:.25em; } .column { width:46%; float:left; } .left { margin-right:4%; } .right { margin-left:4%; clear:right } a.help {cursor:help} #dev-server_message { position:absolute; width:100%; z-index:100; left:0; top:0; padding-top:1em; padding-bottom:1em; } * > #dev-server_message { position:fixed; } #dev-server_message:hover { background-color:transparent; border-bottom:none; } #solid-color, #combo-color { padding:20px; width:420px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #ebf6fc url(../images/corner-blue-sockdot.png) no-repeat right top; } #solid-color { float:left; } #combo-color { float:right; } .videos {margin:0 0 1em -40px} .video {margin-left:40px; float:left} /* Page Specific Layout */ /* use a class on the body to change specific parts of the layout based on portions of the website (e.g. user vs. admin) */ #product-images { width:468px; float:left; margin-bottom:2em; } #product-images img { float:left } #product-images .thumbnails { float:right; width:116px; line-height:28px; } #product-images .thumbnails .note { line-height:1.1em; margin-top: 1em; } #product-images .thumbnails img { margin-right:8px; float:none; } #product-info { width:460px; float:right } #purchase-options { clear:both; margin:2em 0 1em } .layout-help-page { padding:30px; background:white none; text-align:left } /* Typography and Inline Elements */ /* *************************************************************************************** */ h1 { } h2 { } h3 { } p { } /* Page Specific Typography */ /* use a class on the to change specific typographic elements (e.g.

backgrounds) */ .layout-home h1 { } .products { margin-left:-20px; width:660px; overflow:hidden; margin-bottom:1em } .products .product { width:200px; margin:0 0 20px 20px; float:left; height: 12em; } .products .product img { width:200px; height:110px; display:inline-block; background-color:#B98CBF } .products .product p { margin:0; line-height:1em; } .products .product h2 a { text-decoration:none; } .products .product .details { font-size:.8em; line-height:1em; } a.blocklink { line-height:1.2em; font-size:1em; font-weight:bold; text-decoration:none; display:inline-block; padding:.5em 2em .5em .5em; background:url(../images/blocklink.png) no-repeat right center; margin-bottom:1em; margin-right:.5em } p a.blocklink { line-height:1em; margin-bottom:0 } h2 + p a.blocklink { margin-top:1em } .sidebar a.blocklink { font-size:.8em } a.blocklink:link, a.blocklink:visited { background-color:#8DC63F; color:white; } a.blocklink:focus, a.blocklink:hover, a.blocklink:active { color:white; background-color:#00A9CC } /* Navigation */ /* placement of navigation */ /* *************************************************************************************** */ #nav-main { position:absolute; top:221px; left:0px; width:800px; } #nav-main ul { } #nav-main a, #nav-main label { margin:0 .5em 0 0; padding:.25em .75em; background-color:#9B5BA4; color:#fff; text-decoration:none; -khtml-border-radius:.25em; border-radius:.25em; -moz-border-radius:.25em; -webkit-border-radius:.25em;} #nav-main a:hover, #nav-main label:hover { background-color:#00A9CC; color:#fff } #nav-main label { width:auto; display:inline; float:none; cursor: pointer; } #nav-main input { margin:0; padding:0; width:auto; height:auto; } #nav-main ul, #nav-main li, #nav-main form {/* fix IE6 and IE7 List bug */ display: inline; } #add-to-cart * { border:none; } /* Forms */ /* some of these classes and styles are applied during validation. .validation_error gets applied by the JavaScript validation or by the PHP validation. */ /* *************************************************************************************** */ form { width:auto; margin: 0 0 1em 0; } form .row { clear:both; } #content form .row { margin:0 0 .5em; padding:0 } label { display:block; cursor:pointer } label input {cursor:pointer} textarea, input { width:100% } textarea, input, select { margin:0 .25em 0 0; border:solid 1px #D6D6D6; padding:0.25em; } form div.buttons { text-align:left; display:block; float:none; clear:both; } form div.buttons input { background-color:#9B5BA4; color:#fff; cursor:pointer; height:auto; line-height:normal; text-transform:lowercase; font-weight:bold; width:auto; padding: .25em 2em; border:solid 1px #9B5BA4 } form div.buttons input:hover, form div.buttons input:active, form div.buttons input:focus { background-color:#8DC63F; color:#fff; border:solid 1px #8DC63F; } form .row .note { display:block; } p.validation_error { text-align:center; color:#EE2E24; } form .row .validation_error { display:block; color:#EE2E24; font-size:.9em; padding-left: 20px; background: url(../images/validationErrorArrow.png) no-repeat 0 10px; } form .row label .note { display:inline; padding:0 } /* PayPal Forms */ form.paypal label { width: 120px; text-align:left; float:left; display:block; } form.paypal input { width:auto; } form.paypal fieldset { float:left; width:30%; } form.paypal input.add-to-cart { margin-top:2em; border:none } form.paypal legend { color:#48A9CC; font-weight:bold;} #solid-color-error {margin-left:30%} #combo-color-error {margin-left:60%}