/* custom styles and development by MATT ROCK c/o Spelunking Web Design (SWD) http://www.swd.ca */ html { background:#e7e7e7 url(../images/my-images/bgBody.jpg) repeat-x; } body { background:url(../images/my-images/bgMasthead.jpg) top center no-repeat; font:12px/1.5 Tahoma, Arial, Helvetica, sans-serif; color:#000; text-align:center; } body.page-popup { background-color:#fff; background-image:none; } a {color:#3749a3;} a:hover {text-decoration:none;} a:visited {color:#5f73d2;} :focus { outline: 0; } /* Layout ================================================================================= */ .wrapper {} .page { width:930px; margin:0 auto; padding:0; text-align:left; } /* Base Columns */ .col-left { float:left; width:180px; border:none; padding:0; } .col-main { float:left; width:736px; background:#fff; border:none; padding:15px; border-radius:10px; } .col1-layout .col-main { background:#fff url(../images/my-images/bgCol-main1.gif) top no-repeat; } /* for 1 column display */ .col-right { float:right; width:230px; border:none; padding:0; } /* 2 Columns Layout */ .col2-left-layout .col-main {width:660px; float:right; } .col2-right-layout .col-main {width:660px; background:#fff url(../images/my-images/bgCol-main2.gif) top no-repeat!important;} /* 3 Columns Layout */ .col3-layout .col-main { width:470px; margin-left:10px; } /* Header ================================================================================ */ .header-container { position:relative; } .header { padding:0; border:none; position:relative; } #logo { float:left; width:348px; height:133px; position:relative; left:-2px; margin-top:45px; background-position:0 0; background-repeat:no-repeat; text-indent:-999em; overflow:hidden; cursor:pointer;} /********** < Navigation */ #nav { height:25px; font-size:14px; text-transform:uppercase; border:none; padding:4px 10px; margin:17px 0 10px 0;} /* All Levels */ #nav li { position:relative; text-align:left; margin-right:3px;} #nav li.over { z-index:999; } #nav a, #nav a:hover { display:block; line-height:1.3em; text-decoration:none; } #nav span { display:block; cursor:pointer; white-space:nowrap; } #nav li ul span {white-space:normal; } #nav li li.parent {} /* 0 Level */ #nav li { float:left; } #nav li:first-child a { border-radius:10px 0 0 10px; } #nav li.active a { color:#2a2824; } #nav a { float:left; border:1px solid #f9e7a4; padding:3px 18px; color:#262007; font-weight:normal; background:url(../images/my-images/bgNavButton.gif) repeat-x;} #nav li.over a, #nav a:hover { color:#2a2824; background:#f7e37a;} /* 1st Level */ #nav ul li, #nav ul li.active { float:none; margin:0; padding-bottom:0; background:#ddd;} #nav ul li.over {} #nav ul li.last { background:#656461; padding-bottom:0; } #nav ul a, #nav ul a:hover { float:none; padding:0; background:none; } #nav ul li a { font-weight:normal !important; font-size:11px; color:#2a2824;} /* 2nd leven */ #nav ul { position:absolute; width:15em; top:25px; left:-10000px; border:none; } /* 3rd+ Level */ #nav ul ul { top:5px; } /* Show Menu */ #nav li.over > ul { left:0; } #nav li.over > ul li.over > ul { left:100px; } #nav li.over ul ul { left:-10000px; } #nav ul li a { background:#f6f6f6; color:#2a2824; } #nav ul li a:hover { background:#f5da52; color:#2a2824 !important; } #nav ul span, #nav ul li.last li span { padding:3px 22px; border:none;} /********** Navigation > */ /* ======================================================================================= */ /* social media link */ .social-media ul { position:absolute; right:30px; top:193px; margin: 0 ; padding: 0 ; list-style-type:none; } .social-media ul li { display:inline-block; } .social-media ul li a { height:30px; text-decoration:none; border:none; display:block; text-indent:-9999px; } li#icon-facebook a { background:transparent url('../images/my-images/social-icons.png') 0 0 no-repeat ; width:31px; } li#icon-facebook a:hover { background-position: 0 -32px ; } li#icon-twitter a { background:transparent url('../images/my-images/social-icons.png') -31px 0 no-repeat ; width:31px; } li#icon-twitter a:hover { background-position: -31px -32px ; } li#icon-rss a { background:transparent url('../images/my-images/social-icons.png') -62px 0 no-repeat ; width:28px; } li#icon-rss a:hover { background-position: -62px -32px ; } /* vertical catalog - added 7/29/09 by MATT. ref: http://www.lotusseedsdesign.com/blog/magento-vertical-categorymenu */ ul#side-nav li.subcat {border-bottom:1px solid #ddd; margin:0 -5px; display: block;} ul#side-nav li.subcat a {display: block; padding:0 5px; text-transform:uppercase;} ul#side-nav li.subcat:hover {} ul#side-nav li.subcat ul li {padding-left:8px;} ul#side-nav li.subcat ul li a {text-transform:capitalize;} ul#side-nav li.subcat ul li:hover {} ul#side-nav li.subcat a , ul#side-nav li.subcat ul li a:hover {} /* end vertical catalog */ /* added 7/29/09 by MATT */ .page .links, .header-container .links { margin-bottom:8px; } .page ul.links a, .header-container ul.links a { font-size:12px; color:#000; text-decoration:none; text-transform:uppercase; } .page ul.links a:hover, .header-container ul.links a:hover { text-decoration:underline; } .page ul.links li, .header-container ul.links li { display: inline; padding:0 10px; border-right:#000 1px solid; } .page ul.links li.first, .header-container ul.links li.first { padding-left:5px; } .page ul.links li.last, .header-container ul.links li.last { border-right:none; } h3.product-name { font-size:14px; } .col-main h1, .col-main h2, .col-main h3 { margin:1em 0; } .col-main h1 { margin:.5em 0; font-size:2em; } .col-main p { margin:1em 0; } .col-main ul li { list-style:disc url('../images/my-images/bullet.gif'); margin-left:14px; padding-left:4px; } /* Sidebar =============================================================================== */ .col-right h1 { font-size:12px; color:#262007; font-weight:normal; text-transform:uppercase; line-height:1.5; padding:5px 10px 4px 12px; background:url(../images/my-images/bgBlock-title.png) no-repeat; } .col-right .static { padding:10px; margin-bottom:10px; background:#fff; border-radius:0 0 10px 10px; } .sidebar .block { border:none; margin:0 0 10px; } .sidebar .block .block-title { background:url(../images/my-images/bgBlock-title.png) no-repeat; padding:5px 10px 4px 12px; } .sidebar .block .block-title h2, .block-title strong span { font-size:12px; color:#262007; font-weight:normal; text-transform:uppercase; line-height:1.5; } .sidebar .block h3 { font-size:14px; line-height:1.5; } .sidebar .block .block-content { padding:10px; background:#fff; border-radius:0 0 10px 10px; } .sidebar .block .actions { text-align:right; } .sidebar .block .actions a { float:left; } .col-left .sidebox .block .block-title, .col-left .block .block-title { background:url(../images/my-images/bgBlock-titleLeft.png) no-repeat; padding:5px 10px 4px 12px; } /* added to accomodate variable column width - matt 9/10/09 */ .block input { width:200px; } /* added this class to lenghten the input fields - matt 7/30/09 */ /* Block: Related */ .sidebar .block-related {} .sidebar .block-related li { padding:0; margin-top:8px;} .sidebar .block-related .checkbox { float:right; margin:0 0 0 4px;} .sidebar .block-related .item { margin-left:0; } .sidebar .block-related .item .product-image { float:left; margin:0;} .sidebar .block-related .item .product-details { margin-left:58px; } .block-content .search-autocomplete { z-index:999; } .block-content .search-autocomplete ul { border:1px solid #999; background-color:#f9f5f0; } .block-content .search-autocomplete li { text-align:left; border-bottom:1px solid #f4eee7; padding:2px; cursor:pointer; list-style:none!important; font-size:1em; } .block-content .search-autocomplete li .amount { float:right; font-weight:bold; } .block-content .search-autocomplete li.odd { background-color:#f6f6f6!important; } .block-content .search-autocomplete li.selected { background-color:#e2e3e2!important; } /* Global Styles ========================================================================= */ /* Form Elements */ form { display:inline; } fieldset { border:0; } legend { display:none; } button.button {border:1px solid #e2bf3d; color:#262007; font-weight:normal!important; background:url(../images/my-images/bgNavButton.gif) repeat-x;} button.button:hover { color:#2a2824; background:#f7e37a;} input.input-text, textarea { padding:2px; margin-bottom:3px; } /* Form Highlight */ input.input-text:focus,select:focus,textarea:focus { background-color:#f5f5f5; } /* Form lists */ /* Grouped fields */ /*.form-list { width:535px; margin:0 auto; overflow:hidden; }*/ .form-list li { margin:0 0 8px; } .form-list label { float:left; color:#111; font-weight:bold; position:relative; z-index:0; } .form-list label.required {} .form-list label.required em { float:right; font-style:normal; color:#eb340a; position:absolute; top:0; right:-8px; } .form-list li.control label { float:none; } .form-list li.control input.radio, .form-list li.control input.checkbox { margin-right:6px; } .form-list li.control .input-box { clear:none; display:inline; width:auto; } /*.form-list li.fields { margin-right:-15px; }*/ .form-list .input-box { display:block; clear:both; width:260px; } .form-list .field { float:left; width:275px; } .form-list input.input-text { width:254px; } .form-list textarea { width:254px; height:10em; } .form-list select { width:260px; } .form-list li.wide .input-box { width:width:389px; } .form-list li.wide input.input-text { width:389px; } .form-list li.wide textarea { width:389px; } .form-list li.wide select { width:389px; } .form-list li.additional-row { border-top:1px solid #ccc; margin-top:10px; padding-top:7px; } .form-list li.additional-row .btn-remove { float:right; margin:5px 0 0; } .form-list .input-range input.input-text { width:74px; } /* Customer */ .form-list .customer-name-prefix .input-box, .form-list .customer-name-suffix .input-box, .form-list .customer-name-prefix-suffix .input-box, .form-list .customer-name-prefix-middlename .input-box, .form-list .customer-name-middlename-suffix .input-box, .form-list .customer-name-prefix-middlename-suffix .input-box { width:auto; } .form-list .name-prefix { width:65px; } .form-list .name-prefix select { width:55px; } .form-list .name-prefix input.input-text { width:49px; } .form-list .name-suffix { width:65px; } .form-list .name-suffix select { width:55px; } .form-list .name-suffix input.input-text { width:49px; } .form-list .name-middlename { width:70px; } .form-list .name-middlename input.input-text { width:49px; } .form-list .customer-name-prefix-middlename-suffix .name-firstname, .form-list .customer-name-prefix-middlename .name-firstname { width:140px; } .form-list .customer-name-prefix-middlename-suffix .name-firstname input.input-text, .form-list .customer-name-prefix-middlename .name-firstname input.input-text { width:124px; } .form-list .customer-name-prefix-middlename-suffix .name-lastname { width:205px; } .form-list .customer-name-prefix-middlename-suffix .name-lastname input.input-text { width:189px; } .form-list .customer-name-prefix-suffix .name-firstname { width:210px; } .form-list .customer-name-prefix-suffix .name-lastname { width:205px; } .form-list .customer-name-prefix-suffix .name-firstname input.input-text, .form-list .customer-name-prefix-suffix .name-lastname input.input-text { width:189px; } .form-list .customer-name-prefix-suffix .name-firstname { width:210px; } .form-list .customer-name-prefix-suffix .name-lastname { width:205px; } .form-list .customer-name-prefix-suffix .name-firstname input.input-text, .form-list .customer-name-prefix-suffix .name-lastname input.input-text { width:189px; } .form-list .customer-name-prefix .name-firstname, .form-list .customer-name-middlename .name-firstname { width:210px; } .form-list .customer-name-suffix .name-lastname, .form-list .customer-name-middlename .name-firstname, .form-list .customer-name-middlename-suffix .name-firstname, .form-list .customer-name-middlename-suffix .name-lastname { width:205px; } .form-list .customer-name-prefix .name-firstname input.input-text, .form-list .customer-name-suffix .name-lastname input.input-text, .form-list .customer-name-middlename .name-firstname input.input-text, .form-list .customer-name-middlename-suffix .name-firstname input.input-text, .form-list .customer-name-middlename-suffix .name-lastname input.input-text { width:189px; } .form-list .customer-dob .dob-month, .form-list .customer-dob .dob-day, .form-list .customer-dob .dob-year { float:left; width:85px; } .form-list .customer-dob input.input-text { display:block; width:74px; } .form-list .customer-dob label { font-size:10px; font-weight:normal; color:#888; } .form-list .customer-dob .dob-day, .form-list .customer-dob .dob-month { width:60px; } .form-list .customer-dob .dob-day input.input-text, .form-list .customer-dob .dob-month input.input-text { width:46px; } .form-list .customer-dob .dob-year { width:140px; } .form-list .customer-dob .dob-year input.input-text { width:134px; } .fieldset { border:1px solid #ddd; background:#fefefe; padding:22px 25px 12px 33px; margin:28px 0; } .fieldset .legend { float:left; font-weight:bold; font-size:13px; border:1px solid #fefefe; background:#dedede; color:#333; margin:-33px 0 0 -10px; padding:0 8px; position:relative; } /* BreadCrumbs */ .breadcrumbs { padding:5px 15px; margin:0 0 10px; border:none; background:#7c8edb; font-size:12px; border-radius:10px; } .breadcrumbs li { display:inline; } .breadcrumbs a { color:#000; } .breadcrumbs a:hover { text-decoration:none; } /* Category Page ========================================================================= */ /* View Type: Grid */ .products-grid { width:100%; } .products-grid tr.odd {} .products-grid tr.even { background-color:#f6f6f6; } .products-grid li.item { width:31%; border:1px solid #ddd; padding:5px; display:table-cell; list-style:none; } .cart ul li, #checkoutSteps ul li, .account-login ul li, #contactForm ul li, .add-to-box ul li, .products-grid ul li { list-style:none; margin-left:0; } .products-grid ul { margin:10px 0; } .products-grid li.item h2 { font-size:1em; font-weight:bold; line-height:1.5; } .products-grid td.empty {} /* View Type: List */ .products-list .item { border:1px solid #ddd; padding:5px; margin:0 0 5px; } .products-list .product-image { float:left; margin-right:-150px; } .products-list .product-shop { float:right; width:260px;} /* ======================================================================================= */ /* Product View ========================================================================== */ /* Product Images */ .product-view .product-img-box { float:left; width:205px; } .product-view .product-img-box .product-image { border:1px solid #ddd; } .product-view .product-img-box .product-image-zoom { position:relative; width:200px; height:200px; overflow:hidden; z-index:9; } /* Product Shop */ .product-view .product-shop { float:right; width:200px; } .product-view .product-name {} .product-view .short-description {display:none;} /* Rating */ /* Availability */ /********** < Product Prices */ .price { white-space:nowrap !important; } .price-box {margin-bottom:10px;} .price-box .price { font-weight:bold; } .price-box-bundle {} /* ======================================================================================= */ .featuredTable TD { padding:10px; } /* footer =========================================================================== */ .footer .bugs { display:none; margin:0; color:#293907; } /* Clears ================================================================================ */ .form-list li:after,