/***************************************************************** * * Endeavour * Master Stylesheet * * Author: Frederik Krautwald * Version: 2008.08 * *****************************************************************/ /***************************************************************** * ===================[CSS_C Common Elements]=================== * *****************************************************************/ /* * =Grid *****************************************************************/ /* =All */ .column { float: left; } .grid2col, .grid2cola, .grid2colb, .grid2colc, .grid2cold, .grid2cole, .grid2colf, .grid3col, .grid3cola, .grid4col, .grid5col, .grid6col { width: 100%; } /* =Grid2col */ .grid2col .column { width: 49%; } .grid2col .grid2col .column { width: 47.8%; } /* =Grid2cola */ .grid2cola .column.first { width: 66%; } .grid2cola .column.last { width: 32%; } /* =Grid2colb */ .grid2colb .column.first { width: 74.9%; } .grid2colb .column.last { width: 23%; } .grid2colb .grid2col .column { width: 49%; } /* =Grid2colc */ .grid2colc .column.first { width: 32%; } .grid2colc .column.last { width: 66%; } /* =Grid2cold */ .grid2cold .column.first { width: 23%; } .grid2cold .column.last { width: 74.9%; } .grid2cold .grid2col .column { width: 49%; } /* =Grid2cole */ .grid2cole .column.first { width: 79%; } .grid2cole .column.last { width: 19%; } /* =Grid2colf */ .grid2colf .column.first { width: 19%; } .grid2colf .column.last { width: 79%; } /* =Grid2colg */ .grid2colg .column.first { width: 66%; } .grid2colg .column.last { width: 32%; } /* =Grid3col */ .grid3col .column { width: 32%; margin-left: 2%; } .grid3col .grid2col .column { width: 46%; } .grid2col .grid3col .column { width: 31%; } /* =Grid3cola */ .grid3cola .column { width: 58%; margin-left: 2%; } .grid3cola .column.first, .grid3cola .column.last { width: 19%; } /* =Grid4col */ .grid4col .column { width: 23%; margin-left: 3%; } .grid4col .grid2col .column { width: 45%; } /* =Grid5col */ .grid5col .column { width: 18.4%; margin-left: 2%; } /* =Grid6col */ .grid6col .column { width: 15%; margin-left: 2%; } /* =Common */ .column.first, .column.last { margin-left: 0 !important; } .column.last { float: right !important; } /* * =Forms *****************************************************************/ /* =Form Elements */ input.input-text, select, textarea { border: 1px solid #b6b6b6; } input.input-text:focus, select:focus, textarea:focus { border-color: #8ad3ff; border-top-color: #009fff; } input.input-text, textarea { padding: 2px; } input.radio { margin-right: 3px; } input.checkbox { margin-right: 3px; } input.qty { width: 2.5em; } textarea { overflow: auto; } button.button { background: url(../images/btn_std_grey_l.png) no-repeat 0 center; border: none; text-align: center; padding: 0; margin: 0; cursor: pointer; } button.button span { background: url(../images/btn_std_grey_r.png) no-repeat right 0; font: bold 12px/16px Arial, Helvetica, sans-serif; color: #666666; display: block; cursor: pointer; position: relative; white-space: nowrap; height: 28px; line-height: 28px; margin-left: 1px; padding: 0 15px 0 9px;} /* padding-left = (padding-right - margin-left) NOTE: Firefox renders this different */ button.button:hover { background: url(../images/btn_std_grey_l.png) no-repeat -255px center; } button.button:hover span { background: url(../images/btn_std_grey_r.png) no-repeat right 100%; } button.button.green { background-image: url(../images/btn_std_green_l.png); } button.button.green span { background-image: url(../images/btn_std_green_r.png); color: #ffffff; } button.disabled {} button.disabled span {} .buttons-set { clear: both; margin: 4em 0 0; padding: 5px; border-top: 1px solid #b6b6b6; } .buttons-set .back-link { float: left; } .buttons-set .button { float: right; } .buttons-set2 { clear: both; margin: 5px 0 0; padding: 5px; border: 1px solid #b6b6b6; text-align: right; } /* =Form Lists */ .form-list li { margin: 0 0 5px; } .form-list li .input-box {} .form-list li input.input-text, .form-list li textarea { width: 250px; } .form-list li select { width: 256px; } .form-list li.add-row { border-top: 1px solid #b6b6b6; margin-top: 10px; } .form-list label {} .group-select {} .group-select label {} .group-select .legend {} .group-select li { margin: 0 0 5px; } .group-select li .input-box { float: left; width: 260px; } .group-select li input.input-text, .group-select li textarea {width: 510px; } .group-select li select { width: 516px; } .group-select li .input-box input.input-text, .group-select li .input-box textarea { width: 250px; } .group-select li .input-box select { width: 256px; } .group-select.wide input.input-text, .group-select.wide textarea { width: 510px; } /* =Form Messages */ .validation-advice { clear: both; min-height: 13px; margin: 3px 0 0; padding-left: 17px; font-size: 10px; line-height: 13px; background: url(../images/validation_advice_bg.gif) 2px 1px no-repeat; color: #eb340a; } .validation-failed { border: 1px dashed #f16048 !important; background: #faebe7 !important; } .validation-passed {} .required { color: #eb340a; } p.required { font-size: 10px; text-align: right; } /* =Expiration date and cvv number validation fix */ .v-fix { float: left; } .v-fix .validation-advice { float: left; width: 12em; margin-right: -12em; display: inline; position: relative; } /* * =Messages *****************************************************************/ .success { color: #3d6611; font-weight: bold; } .error { color: #eb340a; font-weight: bold; } .notice { color: #e26703; } .messages { width: 100%; overflow: hidden; } .messages li { margin: 0 0 10px; } .messages li li { margin: 0 0 3px; } .error-msg, .success-msg, .note-msg, .notice-msg { border-style: solid !important; border-width: 1px !important; background-position: 10px 10px !important; background-repeat: no-repeat !important; min-height: 24px !important; padding: 8px 8px 8px 32px !important; font-size: 10px !important; font-weight: bold !important; } .error-msg { border-color:#f16048; background-color:#faebe7; background-image:url(../images/error_msg_icon.gif); color:#df280a; } .success-msg { border-color:#446423; background-color:#eff5ea; background-image:url(../images/success_msg_icon.gif); color:#3d6611; } .note-msg, .notice-msg { border-color:#fcd344; background-color:#fafaec; background-image:url(../images/note_msg_icon.gif); color:#3d6611; } /* * =Headers *****************************************************************/ .head, .head-alt, .head-alt2, .head-alt3 { text-align: right; line-height: 1.25em; } .head .title, .head-alt .title, .head-alt2 .title, .head-alt3 .title { margin: 0; float: left; } .head a, .head-alt a, .head-alt2 a, .head-alt3 a { font-size: 85%; text-transform: uppercase; } .head-alt2 { border-bottom: 1px solid #b6b6b6; /*background:#f1f1f1;*/ padding:2px 0; margin-bottom: 12px } .head-alt2 .title { font-size: 1.1em; } /* =Page Title */ .page-title { text-align: right; line-height: 4em; } .page-title h2 { font-weight: normal !important; text-align: left; } .button-level h2, .button-level h3 { /* heading level with buttons */ float: left; width: 60%; } /* * =Tables *****************************************************************/ /* =Data Table */ .data-table { width: 100%; } .data-table th { padding: 2px 8px 2px 0; white-space: nowrap; font-size: 85%; font-weight: bold; text-transform: uppercase; } .data-table td { padding: 2px 8px; font-size: 85%; } .data-table th.label, .data-table td.label { font-weight: bold; } /* * =Images *****************************************************************/ img.left { float: left; margin: 2px 20px 16px 0; } img.right { float: right; margin: 2px 0 16px 20px; } img.across { margin: 2px 0 16px 0; } img.flushleft { margin-left: -20px; } img.flushright { margin-right: -20px; } img.border { border: 1px solid #939397; } /***************************************************************** * =======================[CSS_D Layout]======================== * *****************************************************************/ /* * =Base Layout *****************************************************************/ /* =Structure */ #container { width: 980px; margin: 0 auto; position: relative; } #main { width: 100%; } #content { /* padding: 18px 20px; */ } #info-wrapper { padding: 18px 20px; } .width-780 { margin: 0 auto; width: 780px; } /* * =Header *****************************************************************/ #globalheader { width: 984px; height: 94px; margin: 0 auto 14px auto; position: relative; z-index: 9998; /*overflow: hidden;*/ } #globalheader #globalnav { margin: 0; padding: 0; width: 984px; height: 54px; clear: both; } #globalheader #globalnav li { display: inline; } #globalheader #globalnav li a { float: left; height: 0; padding-top: 50px; overflow: hidden; } #globalheader #globalnav, #globalheader #globalnav li a { background-image: url(../images/globalnav.png); } /* =Buttons */ #globalheader #globalnav li#gn-endeavour a { width: 171px; background-position: 0 0; } #globalheader #globalnav li#gn-products a { width: 116px; background-position: -171px 0px; } #globalheader #globalnav li#gn-about a { width: 116px; background-position: -287px 0px; } #globalheader #globalnav li#gn-kirk-maarbjerg a { width: 116px; background-position: -403px 0px; } #globalheader #globalnav li#gn-mundus a { width: 116px; background-position: -519px 0px; } #globalheader #globalnav li#gn-press a { width: 116px; background-position: -635px 0px; } #globalheader #globalnav li#gn-gifts a { width: 116px; background-position: -751px 0px; } #globalheader #globalnav li#gn-contact a { width: 116px; background-position: -867px 0px; } /* =Hover States */ #globalheader #globalnav li#gn-endeavour a:hover { background-position: 0 -54px; } #globalheader #globalnav li#gn-products a:hover { background-position: -171px -54px; } #globalheader #globalnav li#gn-about a:hover { background-position: -287px -54px; } #globalheader #globalnav li#gn-kirk-maarbjerg a:hover { background-position: -403px -54px; } #globalheader #globalnav li#gn-mundus a:hover { background-position: -519px -54px; } #globalheader #globalnav li#gn-press a:hover { background-position: -635px -54px; } #globalheader #globalnav li#gn-gifts a:hover { background-position: -751px -54px; } #globalheader #globalnav li#gn-contact a:hover { background-position: -867px -54px; } /* =Active States */ /* =On States */ /* =Worldwide */ #globalheader #worldwide { width: 230px; margin: 10px 0; float: right; } #globalheader #worldwide select { margin-top: 4px; } #globalheader #worldwide img.left { margin: -1px 0 0 0; padding: 0; } #globalheader #worldwide form#worldwidelinks { padding: 2px 0 0; float: left; width: 196px; height: 19px; margin: 0 0 0px 8px; background: #fff url(../images/worldwide_grey.png) no-repeat 0 100%; color: #fff; } #globalheader #worldwide form#worldwidelinks select { width: 196px; margin-top: -2px; opacity: 0; } /* =User Menu */ #user-menu { float: right; margin-top: -74px; } #user-menu .links { margin-right: 240px; } #user-menu .links li { display: inline; } #user-menu .links li a { float: left; margin-right: 1em; color: #666; font-size: 11px; } /* =Search Mini Form */ #search_mini_form { float: left; margin-left: 30px; } #search_mini_form .form-search legend, #search_mini_form .form-search label, #search_mini_form .form-search button { display: none; } #search_mini_form .form-search #search { width: 150px; height: 13px; font-size: 11px; border: none; background: transparent; } #search_mini_form .search-autocomplete { border: 1px solid #5c7989; background: #f9f5f0; position: absolute; left: 0px; top: 22px; width: 176px !important; } #search_mini_form .search-autocomplete li { border-bottom: 1px solid #f4eee7; padding: 2px 8px 1px 8px; } #search_mini_form .search-autocomplete li.odd { background: #fffefb; } #search_mini_form .search-autocomplete li.selected { background: #e5ebf0; } /* * =Sidebars *****************************************************************/ .sidebar .block { } .sidebar .block-content { } /* =Block Base */ .block-base * { margin-top: 0; } /* margins will blow out backgrounds, leaving whitespace. */ .block-base { position: relative; margin-left: 11px; margin-bottom: .5em; } .block-base .block-content { position: relative; } .block-base .block-content, .block-base .block-top, .block-base .block-top div, .block-base .block-bottom { background: transparent url(../images/block.png) no-repeat bottom right; } .block-base .block-content { padding: 0 11px 0 0; zoom: 1; } /* some weird behavior with padding-bottom happens here. */ .block-base .block-top { width: 100%; background-position: top right; } .block-base .block-top div { width: 11px; margin-left: -11px; background-position: top left; } .block-base .block-top, .block-base .block-top div { position: relative; height: 8px; font-size: 1px; } .block-base .block-bottom { position: absolute; bottom: 0; left: 0; width: 11px; margin-left: -11px; height: 100%; background-position: bottom left; } .block-base .block-head, .block-base .block-body, .block-base .block-foot { position: relative; clear: both; } .block-base .block-head { padding-top: 4px; } .block-base .block-body { } .block-base .block-foot { padding: 1px 0; } .block-base .block-head { text-align: center; } .block-base .title { color: #406e80; border-bottom: 1px solid #b6b6b6; width: 100%; text-align: left; padding: 0 0 2px 0; } .block-base .block-head .title { font-size: 16px; font-weight: normal; margin: 0; line-height: 18px; float: left; } .block-base .block-foot .actions { padding: 15px 0; } /* =Block: Cart */ .block-cart .subtotal { border-top: 1px solid #b6b6b6; font-size: 85%; text-align: right; margin: 0; padding: 0; } .block-cart .subtotal .label { float: left; } .block-cart .est-total { border-top: 1px solid #b6b6b6; font-size: 95%; text-align: right; margin: 0; padding: 0; } .block-cart .est-total .label { float: left; font-weight: bold; } .block-cart .mini-products-list li { padding: 5px 0; } .block-cart .actions .button { width: 70%; } .block-cart .block-head { } .block-cart .block-head .actions { padding-bottom: 2em; } .block-cart .title { border: none; } .block-cart .block-foot { text-align: center; } /* =Block: Subscribe */ .block-subscribe .form-content { padding: 0 0 15px 0; } /* =Block: Poll */ .block-poll .form-content { padding: 0 0 15px 0; } /* =Block: Account */ .block-account .block-foot { padding-bottom: 15px; } /* * =Footer *****************************************************************/ #footer { width: 980px; margin: 50px auto 50px; text-align: center; font-size: 10px; } #footer a { margin: 0 2px; } #footer p { font-size: 10px; color: #828282; } #footer p.left a { margin-right: 0; } #footer p.left { width: 50%; float: left; text-align: left; text-indent: 10px; } #footer p.right { width: 50%; float: right; text-align: right; } #footer p.right a.last { margin-right: 10px; } #footer p.links { border: 1px solid #e6e5e5; border-width: 1px 0; padding: .5em 0; margin: 1.5em 0 2em; } #footer .endnotes p { margin-bottom: 0; } #worldwide { width: 230px; margin: 1.5em auto 10em; } #worldwide select { margin-top: 4px; } #worldwide img.left { margin: -1px 0 0 0; padding: 0; } #worldwide form#worldwidelinks { padding: 2px 0 0; float: left; width: 196px; height: 19px; margin: 0 0 50px 8px; background: #fff url(../images/worldwide_grey.png) no-repeat 0 100%; color: #fff; } #worldwide form#worldwidelinks select { width: 196px; margin-top: -2px; opacity: 0; } /***************************************************************** * ====================[CSS_E Shop Elements]==================== * *****************************************************************/ .availability { font-size: 90%; } .out-of-stock { color: #D83820; font-weight: bold; } /* * =Rating *****************************************************************/ .ratings { } .rating-box { position: relative; float: left; width: 120px; height: 24px; background: transparent url(../images/product_rating_blank_star.gif) repeat-x; } .rating-box .rating { position: absolute; top: 0; left: 0; height: 24px; background: transparent url(../images/product_rating_full_star.gif) repeat-x; } .rating-links { clear: both; } /* * =Prices *****************************************************************/ .price { white-space: nowrap !important; } /* =Regular Price */ .regular-price .price { font-size: 125%; font-weight: bold; } /* =Old Price */ .old-price .price { font-size: 100%; font-weight: normal; } /* =Special Price */ .special-price { font-size: 125%; font-weight: bold; } .special-price .price-label { } .special-price .price { color: #df280a; } /* * =Catalog Listing *****************************************************************/ /* * =Layered Navigation *****************************************************************/ /* * =Tool Tips *****************************************************************/ /***************************************************************** * ====================[CSS_F Shop Pages]==================== * *****************************************************************/ /* * =Product View *****************************************************************/ /* =Product Detail */ .product-detail * { margin-top: 0; } /* margins will blow out backgrounds, leaving whitespace. */ .product-detail { position: relative; margin-left: 11px; margin-bottom: .5em; } .product-detail .product-content { position: relative; } .product-detail .product-content, .product-detail .product-top, .product-detail .product-top div, .product-detail .product-bottom { background: transparent url(../images/product-details.png) no-repeat bottom right; } .product-detail .product-content { padding: 0 11px 15px 0; zoom: 1; } /* some weird behavior with padding-bottom happens here. */ .product-detail .product-top { width: 100%; background-position: top right; } .product-detail .product-top div { width: 11px; margin-left: -11px; background-position: top left; } .product-detail .product-top, .product-detail .product-top div { position: relative; height: 8px; font-size: 1px; } .product-detail .product-bottom { position: absolute; bottom: 0; left: 0; width: 11px; margin-left: -11px; height: 100%; background-position: bottom left; } /* =Product Essential */ .product-essential { position: relative; float: left; width: 72.4%; margin: 1em 0 0 11px; } .product-essential .product-head .title { font-size: 16px; line-height: 18px; } .product-essential .short-description { float: left; width: 59%; } .product-essential .product-rating { position: absolute; bottom: 0; left: 0; } /* =Product Shop */ .product-shop { position: relative; float: right; width: 163px; margin: 1em 0 0 0; } .product-shop .price-info-box { border-bottom: 1px solid #b6b6b6; padding: 0 0 1em 0; } .product-shop .add-to-cart button.button { background-image: url(../images/btn_std_green_l.png); } .product-shop .add-to-cart button.button span { background-image: url(../images/btn_std_green_r.png); color: #ffffff; } .product-content .actions { position: absolute; bottom: 6px; right: 0; width: 185px; height: 39px; background: url(../images/btn_product_details_actions_bg.png) no-repeat; } /* =Main Product Image */ .product-img-box { float: right; width: 200px; } /* =Product Primary */ .product-primary * { margin-top: 0; } /* margins will blow out backgrounds, leaving whitespace. */ .product-primary { position: relative; margin-left: 11px; margin-bottom: .5em; } .product-primary .product-content { position: relative; } .product-primary .product-content, .product-primary .product-top, .product-primary .product-top div, .product-primary .product-bottom { background: transparent url(../images/product-primary.png) no-repeat bottom right; } .product-primary .product-content { padding: 20px 22px 15px 11px; zoom: 1; } /* some weird behavior with padding-bottom happens here. */ .product-primary .product-top { width: 100%; background-position: top right; } .product-primary .product-top div { width: 11px; margin-left: -11px; background-position: top left; } .product-primary .product-top, .product-primary .product-top div { position: relative; height: 8px; font-size: 1px; } .product-primary .product-bottom { position: absolute; bottom: 0; left: 0; width: 11px; margin-left: -11px; height: 100%; background-position: bottom left; } .product-primary .product-head .title { font-size: 18px; line-height: 18px; margin:0 0 20px 0; font-weight: normal; } .product-primary .product-additional-data { clear: both; } /* =Customer Reviews */ #customer-reviews { clear: both; } #customer-reviews .reviews-header { background-color: #e6e6e6; width: 100%; } #customer-reviews .reviews-header h3, #customer-reviews .reviews-header .rating-box, #customer-reviews .reviews-header .amount { float: left; margin-left: 15px; } #customer-reviews .reviews-header h3 { font-size: 117%; } #customer-reviews .reviews-header .rating-box { border: 1px solid #b6b6b6; } #customer-reviews .review-lists { width: 100%; } #customer-reviews .review-list { float: left; width: 49.9%; } #customer-reviews .review-list.last { float: right; } #customer-reviews .review-list h4 { background-color: #b6b6b6; padding:14px 16px 16px 16px; } /* * =Create Account *****************************************************************/ body.customer-account-create #main #content { background: url(../images/main_bgtop.gif) no-repeat 50% 0; width: auto; padding: 30px 50px 2em; } body.customer-account-create #main #regintro { margin-bottom: 30px; border-bottom: 1px solid #b6b6b6; } body.customer-account-create #main .page-title { text-align: left; } body.customer-account-create #main h1 { font-size: 16px; margin: 0 0 20px 0; padding: 0; color: #999; font-weight: normal; } body.customer-account-create #main h2 { font-weight: bold; font-size: 18px; margin: 0 0 20px 0; padding: 0; } .create-account-page { background: transparent url(../images/main_bgtop_stroke_inset.gif) no-repeat scroll 0 0pt; width: 710px; padding: 60px 80px 20px 80px; } .create-account-page p.info { margin-bottom: 20px; font-size: 95%; } .newsletter-sign-up { border-top: 1px solid #b6b6b6; margin: 20px 0; padding-top: 10px; } body.customer-account-create .buttons-set { /*width: 710px; padding: 5px 80px 5px 80px;*/ } /* * =Login *****************************************************************/ body.customer-account-login #main #content { background: url(../images/main_bgtop.gif) no-repeat 50% 0; width: auto; padding: 30px 50px 2em; } body.customer-account-login #main #regintro { margin-bottom: 10px; } body.customer-account-login #main .page-title { text-align: left; } body.customer-account-login #main h1 { font-size: 16px; margin: 0 0 20px 0; padding: 0; color: #999; font-weight: normal; } body.customer-account-login #main h2 { font-weight: bold; font-size: 18px; margin: 0 0 20px 0; padding: 0; } .login-page { background: transparent url(../images/main_bgtop_stroke_inset.gif) no-repeat scroll 0 0pt; width: 710px; padding: 60px 80px 20px 80px; } .login-page .content { min-height: 220px; } .login-page .new-users .content { border-right: 1px solid #b6b6b6; } .login-page .buttons-set { border: none; } /* * =Dashboard *****************************************************************/ .dashboard .welcome-msg h4 { font-weight: normal !important; } .dashboard .account-box h3 { font-weight: normal !important; } /* =Account Addressbook */ .primary-address-list li, .address-list li { margin-bottom: 1.2em; } /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* * =Types *****************************************************************/ .endnotes { font-size: 10px !important; color: #828282; } /* * =Overrides *****************************************************************/ /* Apple CSS */ /* !!!! CHECK IF THIS IS IMPORTANT FOR OUR STYLES !!!! */ p.last, ul.last, ol.last, li.last { _width: auto !important; _float: none !important; } /* =Alignment */ .v-top { vertical-align: top !important; } .v-middle { vertical-align: middle !important; } .v-bottom { vertical-align: bottom !important; }