@charset "utf-8"; /* --------------------------------------------------------------------------------------- [Catalog Stylesheet] Project: Netrostar Ecommerce Template Version: 1.0 Date created: 6 October, 2008 Table of Contents: Common Parts ( imported ) Overwite content styles Sidebar Login Panel Pages Catalog ( catalog.aspx ) Product list ( catalog.aspx ) Product details ( product.aspx ) Quick Cart Product Reviews Add Product Review Related Products Product Search (CatalogWithSearch.aspx) @Single product box --------------------------------------------------------------------------------------- */ /* common parts */ @import url(../Common/masters_common.css); /* OVERWRITE "CONTENT" CLASSES FROM MASTERS_COMMON.CSS --------------------------------------------------------------------------------------- */ #content { float: left; background: #e7f0f5; margin-top: 1px; width: 790px; } #content .page { float: left; padding: 15px; min-height: 400px; width: 760px; } #content h1.page-title { width: 740px; } #content h2.page-subtitle { width: 740px; } /* SIDEBAR (catalog.master) --------------------------------------------------------------------------------------- */ #sidebar { background: #084970; width: 200px; float: left; } #sidebar .catalog {padding-bottom: 10px;} #sidebar .catalog-list { margin: 10px 5px 0px 5px; list-style: none; } #sidebar .catalog-list a { border-bottom: 1px solid #205b7e; display: block; font-weight: normal; color: #fff; padding: 3px 0px 3px 15px; } #sidebar .catalog-list a:hover { background: #125b86; } /* LOGIN --------------------------------------------------------------------------------------- */ .panel-not-logged { padding: 10px; float: left; background: url(../../Images/sidebar_bottomGray_bg.jpg) no-repeat bottom right; } .ie .panel-not-logged { padding-bottom: 15px !important; } .panel-not-logged .login-data { float: left; } .ie .panel-not-logged .login-data { padding-top: 25px !important; } .panel-not-logged .login-data .row { float: left; } .panel-not-logged .login-data .row { float: left; margin: 2px 0px 0px 0px; width: 180px; } .panel-not-logged .login-data .forgot-password { text-align: right; } .panel-not-logged .login-data .login-button { text-align: right; padding-bottom:5px; } .panel-not-logged .login-data .row .forgot-password a { font-weight: normal !important; color: #393939 !important; padding: 3px 3px 3px 0px; display: block; } .panel-not-logged .login-data .row .lbl { float: left; display: block; text-align: left; color: #393939; padding: 2px; } .panel-not-logged .login-data .row .rev { float: left; text-align: left;padding: 2px; } .panel-not-logged .login-data .row .rfv { float: left; text-align: left; padding: 2px; } .panel-not-logged .login-data .row .textbox { width: 177px; float: left; height: 15px; } .panel-not-logged .forgot-data { float: none; } .ie .panel-not-logged .forgot-data { padding-top: 25px !important; } .panel-not-logged .forgot-data .row { float: none; padding-bottom:4px; } .panel-not-logged .forgot-data .row { float: left; margin: 2px 0px 0px 0px; width: 180px; } .panel-not-logged .forgot-data .row .lbl { float: none; display: block; text-align: left; color: #393939; width: 170px; padding: 2px; } .panel-not-logged .forgot-data .row .textbox { width: 170px; height: 15px; } .panel-not-logged .forgot-data .row .txt { width: 100px; height: 15px; } .panel-not-logged .forgot-data .row .btn {} .panel-not-logged .forgot-data .row .back {} .panel-not-logged .forgot-data .row .send {} .panel-not-logged .vs ul { list-style: none; float: left; } .panel-not-logged .vs ul li { padding: 3px 0px; } /* _CATALOG (catalog.aspx) --------------------------------------------------------------------------------------- */ #_catalog .catalog { background: #fff; float: left; width: 120px; height: 240px; border: 1px solid #e5e5e5; padding: 12px; margin: 3px; } #_catalog .catalog h3 { clear: right; display: block; text-align: left; font-size: 14px; text-transform: uppercase; color: Gray; margin-bottom: 5px; } #_catalog .catalog-description { float: none; } #_catalog .catalog-image { float: left; padding: 0px 0px 10px 0px; } #_catalog .catalog-image table { border: 1px solid #ececec !important; } /* _PRODUCT LIST (catalog.aspx) --------------------------------------------------------------------------------------- */ #_product-list { float: left; width: 740px; position: relative; } #_product-list h1.page-title { margin-top: 0px; } #_product-list a.back-to-product-types { position: absolute; z-index: 300; top: 10px; right: 20px; } #_product-list .sort-by { position: absolute; z-index: 3; top: 8px; right: 150px; } #_product-list .quantity .btn { width: 100px; font-size: 10px; text-transform: uppercase; height: 24px; background: transparent url(../../Images/add-to-cart-btn.jpg) no-repeat; } /*Catalog - panel Compare*/ #_product-list .panel-compare { border: 1px solid #97C4E3; margin-top: 0px; width:740px; background-color: #D2E5F5; float: left; margin-bottom: 5px; } #_product-list .panel-compare span.title {float: left;padding: 10px; min-height:15px; color:#084971;font-weight: bold; } #_product-list .panel-compare .title img { vertical-align: middle; } #_product-list .panel-compare span.title span { cursor:pointer;} #_product-list .panel-compare .minimize { cursor:pointer; float: right; padding: 10px;color:#084971;font-weight: bold;} #_product-list .panel-compare .compare-image {background-color: White; margin-left: 7px; margin-bottom: 7px; margin-right: 7px; height: 120px; width: 722px;} #_product-list .panel-compare .box-image{float: left; width: 110px; height:120px; overflow: hidden; } #_product-list .panel-compare .box-image img{ width: 70px; height:70px;padding-left:20px; padding-top:20px;padding-right:20px;} #_product-list .panel-compare .remove{ } #_product-list .panel-compare .box-image .image{height:75px;} #_product-list .panel-compare .compare-image .btn { float: right; padding: 2px 15px; margin:50px 0px; margin-right:-1px; background: transparent url(../../Images/btn_bg.jpg) repeat-x; background-position:center; border: 1px solid #172026; color: #fff; font-weight: normal; } #_product-list .panel-compare .compare-image .btn:hover { text-decoration:none;} /* Status compare */ #_product-list .panel-compare .status-compare {margin-left:20px;width:600px;float:left;} #_product-list .panel-compare .status-compare img{display:block;float:left;} #_product-list .panel-compare .status-compare .lStatus{padding: 5px 5px 5px 10px; font-weight:bolder; color:Black; display:block;float:left;} /* _PRODUCT DETAILS (product.aspx) --------------------------------------------------------------------------------------- */ #_product-details { position: relative; } .container { float: left; width: 770px; min-height: 450px; } /* product name */ #_product-details .product-name { border: 0px; float: right; width: 475px; font-size: 18px; margin: 10px 20px 65px 0px; padding: 0px; } /* product description */ #_product-details .desc { float: right; width: 475px; margin-right: 20px; } /* features list */ #_product-details .features-list { float: right; width: 475px; margin-right: 20px; } #_product-details .features-list .feature-group { float: left; width: 475px; margin-bottom: 10px; } /* title */ #_product-details .features-list .group { float: left; font-weight: bold; width: 475px; margin-bottom: 5px; font-size: 11px; color: #0b547f; border-bottom: 3px solid #618ca5; padding-bottom: 3px; } #_product-details .features-list .feature { float: right; padding-left: 10px; text-align: left; width: 410px; margin: 5px 0px 5px 5px; padding: 0px 0px 5px 0px; } /* feature name */ #_product-details .features-list .feature .feature-name { font-weight: bold; float: left; margin-left: 10px; color: #616161; font-size: 11px; } #_product-details .features-list .feature img { float: left; margin-left: 5px; } #_product-details .features-list .feature .feature-description { float: right; width: 300px; } /* product price */ #_product-details .price { position: absolute; z-index: 3; top: 115px; left: 280px; } #_product-details .price span { float: left; color: #5e5e5e; padding-right: 5px; } #_product-details .price span.price { position: static; color: #1c6e9f; font-size: 15px; font-weight: bold; } /* photo */ #_product-details .photo { float: left; width: 250px; height: 250px; background: #fff; border: 1px solid #e5e5e5; margin-top: 10px; } #_product-details .bImageBorder { float: left; width: 250px; height: 250px; } #_product-details .bImageBorder div { text-align: center !important; } /* small photos */ #_product-details .photo .small-photos { float: left; width: 250px; margin-top: 50px; height:125px; overflow:hidden; } #_product-details .photo .small-photos .photo { float: left; background: none; margin: 1px; padding: 0px; border: none; width: 60px; height: 60px; } #_product-details .photo .small-photos .photo img { border: 1px solid gray !important; } /* rating */ #_product-details .rating { width: 420px; position: absolute; z-index: 3; top: 95px; left: 280px; } #_product-details .rating img { float: left; margin-right: 3px; } #_product-details .rating .txt-rating { display: none; } #_product-details .rating .point { display: none; } #_product-details .rating .txt-5 { display: none; } #_product-details .rating a { display: none; } #_product-details .rating a.how-many-reviews { display: block; float: left; } /* QUICK CART (product details) (product.aspx) --------------------------------------------------------------------------------------- */ #_product-details .quick-cart-control { position: absolute; z-index: 3; top: 85px; right: -80px; width: 300px; } /* quantity */ #_product-details div fieldset.quantity { float: left; width: 303px; } #_product-details .quantity .row { float: left; margin: 0px 0px 0px 5px; } #_product-details .quantity .row.tb { float: left; margin-left: 5px; } .ie #_product-details .quantity .row.tb { margin-left: 5px; } #_product-details .quantity .row.bn { float: left; margin-right: 5px; } #_product-details .quantity .row.bn .view-cart { position: absolute; z-index: 3; top: -83px; left: 20px; width: 195px; height: 35px; background: transparent url(../../Images/view-cart-button.jpg) no-repeat; } #_product-details .quantity .row.bn .view-cart:hover { background: transparent url(../../Images/view-cart-button.jpg) no-repeat 0px -35px; } #_product-details .quantity .row.bn .view-cart span { display: none; } #_product-details .quantity .row .lbl { float: left; padding-top: 2px; } #_product-details .quantity .row .textbox { float: left; width: 20px; margin-left: 5px; background: #fff; } #_product-details .quantity .btn { width: 80px; border: 1px solid gray; font-size: 9px; text-transform: uppercase; height: 20px; float: left; } .fx #_product-details .quantity .btn { padding-bottom: 2px; float: left; } #_product-details .quantity .product-added { left: -515px; top: 50px; position: absolute; background-color: black; filter: alpha(opacity=90); opacity:0.9; color: #fff; padding: 10px; } #_product-details .quantity .prd-added { } #_product-details .quantity .prd-added .txt { float: left; padding-right: 20px; } #_product-details .quantity .prd-added .txt2 { } #_product-details .quantity .overweight { position: absolute; z-index: 3px; top: 30px; left: 0px; width:250px; margin-left: -90px; border: 1px solid black; background-color:black;filter:alpha(opacity=60);opacity:0.6; color: #fff; display: block; padding: 10px; } /* validators */ .rfv, .rv { padding: 2px 0px 0px 5px; } #_product-details .view-cart { float: left; } #_product-details .quantity .btn { width: 100px; font-size: 10px; text-transform: uppercase; height: 24px; background: transparent url(../../Images/add-to-cart-btn.jpg) no-repeat; } /* PRODUCT REVIEW (product details) (product.aspx) --------------------------------------------------------------------------------------- */ #_product-details .product-review { float: left; width: 740px; } /* reviews header + add new + sort */ #_product-details .product-review .write-new { float: left; width: 700px; padding: 10px 20px; background: #e5e5e5; margin: 0px 0px 10px 0px; } #_product-details .product-review .write-new a { float: left; } #_product-details .product-review .write-new .ddl { float: right; } #_product-details .product-review .reviews { float: left; width: 740px; } /* single review */ #_product-details .product-review .review { float: left; width: 700px; padding: 20px; background: transparent url(../../Images/bg_reviews.jpg) no-repeat; } #_product-details .review .rating-image { float: right; } #_product-details .review .meta { float: left; width: 680px; } #_product-details .review .title { float: left; width: 630px; margin-bottom: 2px; font-weight: bold; font-size: 14px; } #_product-details .review .date { float: left; font-size: 11px; margin-right: 5px; } #_product-details .review .txt-author { float: left; font-size: 11px; font-weight: bold; color: #0b4e78; margin-right: 3px; } #_product-details .review .author { float: left; } #_product-details .review .content { float: left; width: 680px; margin-top: 6px; } #_product-details .review .content-more { float: left; width: 740px; } /* helpful */ #_product-details .review .helpful { float: left; width: 680px; position: relative; } #_product-details .review .helpful .question { font-weight: bold; padding: 15px 10px 0px 0px; float: left; width: 195px; } #_product-details .review .helpful img { vertical-align: middle; } #_product-details .review .helpful .up { position: absolute; z-index: 3; top: 18px; left: 257px; } #_product-details .review .helpful .down { position: absolute; z-index: 3; top: 18px; left: 29 4px; } #_product-details .review .helpful span { display: none; } /* ADD PRODUCT REVIEW (product details) (product.aspx) --------------------------------------------------------------------------------------- */ #_product-details .add-product-review { float: left; width: 740px; } #_product-details .add-product-review .add-review { float: left; width: 740px; } #_product-details .add-review .form-normal { float: left; width: 740px; } #_product-details .add-review .form-normal .row { float: left; width: 740px; } #_product-details .add-review .form-normal .row .lbl { float: left; width: 120px; text-align: left; padding-top: 2px; } #_product-details .add-review .form-normal .row .textbox { float: left; width: 520px; } #_product-details .add-review .form-normal .row.name { width: 380px; } #_product-details .add-review .form-normal .row.name .lbl { } #_product-details .add-review .form-normal .row.name .textbox { width: 220px; } #_product-details .add-review .form-normal .row.location { width: 300px; } #_product-details .add-review .form-normal .row.location .lbl { width: 75px; text-align: right; padding-right: 5px; } #_product-details .add-review .form-normal .row.location .textbox { width: 180px; } /* status label + buttons (save, preview) */ #_product-details .add-review .form-normal .lbl-status { float: left; width: 700px; padding: 20px; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; } #_product-details .add-review .form-normal .btn { margin-top: 10px; } /*review popup*/ .reviewBackground { background-color:Gray; } .review-panel { background-color:#ffffdd; border: 1px solid Gray; padding:3px; width:700px;} /* print buttons */ #_product-details .print-up { cursor: pointer; position: absolute; z-index: 3; top: 320px; left: 15px; width: 240px; background: #e0e0e0; padding: 5px; text-align: right; } #_product-details .print-up img { vertical-align: middle; } #_product-details .print-down { display: none; } /* back to category / see all from this category ---> now it looks like main header */ #_product-details .back-to-category { float: left; color:#274770; font-size: 16px; font-weight: bold; font-family: "Myriad Pro", Arial; border-bottom: 1px solid #59a2cb; width: 750px; margin-bottom: 10px; padding: 0px 0px 5px 0px; } /* RELATED PRODUCTS (product details) (product.aspx) --------------------------------------------------------------------------------------- */ #_product-details .related-product { float: left; width: 730px; margin: 0px 0px 15px 0px; } #_product-details .related-product .product { height: 150px !important; float: left; width: 100px; text-align: center; margin: 0px 5px; } #_product-details .related-product .photo { height: 100px; width: 100px; border: 0px; background: none; padding: 0px 0px 5px 0px; margin: 0px; float: none; } #_product-details .related-product .product-name { width: 120px; float: none; font-weight: bold; font-size: 11px; margin: 0px; padding: 0px 0px 0px 0px; } /* _ PRODUCT SEARCH (CatalogWithSearch.aspx) --------------------------------------------------------------------------------------- */ #_advanced-search .featured-search { float: left; width: 730px; background: #fff; padding: 15px; } #_advanced-search .featured-search .criteria { float: left; width: 360px; } #_advanced-search .featured-search .features { float: left; width: 360px; } #_advanced-search .featured-search .row { width: 360px; } #_advanced-search .featured-search .features h2 { width: 360px; } #_advanced-search .featured-search .features .group { float: left; margin-right: 35px; } #_advanced-search .featured-search .features .group .group-name { padding-bottom: 5px; } #_advanced-search .featured-search .btn { float: right; margin: 10px; } /* result */ #_advanced-search .product-list { float: left; margin-top: 10px; } #_advanced-search .product-list .product { margin-top: 2px; } /* @SINGLE PRODUCT BOX this styles are using in more then one page. (eq. CatalogWithSearch.aspx, Catalog.aspx) --------------------------------------------------------------------------------------- */ .product { background: #fff; float: left; width: 150px; margin: 15px 5px 10px 0px; position: relative; height: 285px; padding: 15px; } .product .product-image { width: 120px; overflow: hidden; margin: 35px 0px 0px 0px; padding: 15px; border: 1px solid #e5e5e5; } .product .product-title { position: absolute; z-index: 300; top: 15px; left: 15px; text-transform: uppercase; color: #aab0b2; width: 150px; font-size: 14px; font-weight: bold; padding: 0px 0px 2px 0px; text-align: center; overflow: hidden; } .product .product-title a:hover { text-decoration: none; color: #006da9; } .product .product-description { } /* products features NOTE: features are HIDDEN now! */ .product .product-features { width: 150px; margin-top: 45px; display: none; } .product .feature { float: left; width: 150px; text-align: center; } .product .feature-name { float: left; font-weight: bold; padding: 1px 3px; text-align: left; font-size: 11px; color: Gray; } .product .feature-value { float: left; text-align: left; padding: 1px 3px; } /* product price */ .product .product-price { font-weight: bold; color: gray; position: absolute; z-index: 300; top: 205px; left: 15px; width: 150px; text-align: center; } .product .product-price span { color: #084971; } /* product compare */ .product .product-compare { width: 150px; font-size:10px; position: absolute; z-index: 300; left: 15px; top: 260px; text-align: center; } .product .product-compare a { } /* rating */ .product .rating { width: 150px; position: absolute; z-index: 300; left: 15px; top: 235px; text-align: center; } /* quantity NOTE: quantity are HIDDEN now! */ .product div fieldset.quantity { } .product .quantity .row { } .product .quantity .row.tb { display: none; } .ie .product .quantity .row.tb { display: none; } .product .quantity .row .lbl { display: none; } .product .quantity .row .textbox { display: none; } .product .quantity .row.bn { position: absolute; z-index: 3; top: 285px; left: 15px; width: 150px; text-align: center; } .product .quantity .btn { width: 80px; border: 1px solid gray; font-size: 9px; text-transform: uppercase; height: 20px; } /* validators and info */ .product .quantity .product-added { width: 150px; text-align: center; position: absolute; z-index: 3; top: 50px; left: 15px; border: 1px solid black; background-color: #0a4d77; filter: alpha(opacity=80); opacity:0.8; color: #fff; display: block; } .product .quantity .prd-added { } .product .quantity .prd-added .txt { margin: 100px 0px 0px 0px; float: left; width: 10px; padding: 10px; } .product .quantity .prd-added .txt2 { background: #0a4d77; color: #fff; float: left; margin-top: 100px; color: #fff; width: 100px; padding: 10px; } .product .quantity .overweight { width: 130px; text-align: center; position: absolute; z-index: 3px; top: 50px; left: 15px; border: 1px solid black; background-color: #fff; filter: alpha(opacity=90); opacity:0.9; color: red; display: block; padding: 60px 10px 60px 10px; } .product .quantity .rfv { width: 130px; text-align: center; position: absolute; z-index: 3px; top: 50px; left: 15px; border: 1px solid black; background-color: #fff; filter: alpha(opacity=90); opacity:0.9; color: red; display: block; padding: 60px 10px 60px 10px; } .product .quantity .rv { width: 130px; text-align: center; position: absolute; z-index: 3px; top: 50px; left: 15px; border: 1px solid black; background-color: #fff; filter: alpha(opacity=90); opacity:0.9; color: red; display: block; padding: 60px 10px 60px 10px; } /*Modal Popup*/ .reviewBackground {background-color:Gray;filter:alpha(opacity=70);opacity:0.7;} /* Rating */ .ratingStar {font-size: 0pt;width: 13px;height: 12px;margin: 0px;padding: 0px;cursor: pointer;display: block;background-repeat: no-repeat;} .filledRatingStar {background-image: url(../../Images/Star/FilledStar.png);} .emptyRatingStar {background-image: url(../../Images/Star/EmptyStar.png);} .savedRatingStar { background-image: url(../../Images/Star/SavedStar.png);} /* Product Comparison */ #_product-comparison{ background-color:White;} #_product-comparison span.ExpandAll{ font-weight:bolder ;width:760px; display:block; border-bottom:1px solid #e5e5e5; color:#6B9CBD; font-size:10px; font-weight:bolder; cursor:pointer; margin-bottom:20px; margin-top:10px;} /* print buttons */ #_product-comparison .print{width:760px; } #_product-comparison .print-up {display:block; cursor: pointer; float:right; width: 40px; padding: 5px; text-align: right; } #_product-comparison .print span.back{display:block;float:right;padding-top:10px; font-weight:bolder;color:#084971; padding-right:5px;} #_product-comparison .print span.back a{padding-right:10px;} #_product-comparison .print-up img { vertical-align: middle; } #_product-comparison .print-down { display: none; } #_product-comparison .product-images {float:right; width: 630px;} #_product-comparison .product-image {position: relative; float: left; width: 120px; border-left:1px solid #e5e5e5; padding: 7px; height: 210px; margin-left: 10px;margin-right: 10px;} #_product-comparison .product-image .image {text-align: center; width: 100px; height: 100px; overflow: hidden; margin: 5px 0px 0px 0px; padding: 20px; border: 1px solid #e5e5e5;} #_product-comparison .product-image h3{display:block; height:15px;text-align: center;} /* add buttons */ #_product-comparison .quantity .row.tb { display: none; } #_product-comparison .quantity .row .lbl { display: none; } #_product-comparison .quantity .row .textbox { display: none; } #_product-comparison fieldset.quantity{padding-left:20px;} /* product add info*/ #_product-comparison .quantity .product-added { width: 140px; text-align: center; position: absolute; z-index: 1001px; top: 22px; left: 7px; border: 1px solid black; background-color: #0a4d77; filter: alpha(opacity=80); opacity:0.8; color: #fff; display: block; } #_product-comparison .quantity .prd-added { } #_product-comparison .quantity .prd-added .txt { margin: 50px 0px 0px 0px; float: left; width: 10px; padding: 10px; } #_product-comparison .quantity .prd-added .txt2 { background: #0a4d77; color: red; float: left; margin-top: 50px; color: #fff; width: 90px; padding: 10px; } /* product price */ #_product-comparison .product-price { font-weight: bold; color: gray; height:20px; width: 150px; text-align: center; } #_product-comparison .product-price span.price span{ color: #084971;} /* product features */ #_product-comparison .product-features{width:100%; margin:0px; padding:0px;} #_product-comparison .product-features a {color:#6B9CBD; text-decoration:none; display:block; margin-top:15px; vertical-align:middle;} .product-features .featureGroupName{padding-left:5px;} .product-features .divFeature {display:none; width: 760px; float: left; margin-top:0px; text-align: center; } .product-features .divFeature table { width: 760px; margin-bottom:15px;} .product-features .divFeature .alt th { background: #DBE9F6; text-align:center; } .product-features .divFeature .itm th { background: #EFEFEF; text-align:center; } .product-features .divFeature th span { display: block; font-weight: bold; color: #22688C; padding: 5px 5px 5px 5px; text-align: left; } .product-features .divFeature .itm td {background: #EFEFEF; text-align: center; } .product-features .divFeature .alt td { background: #DBE9F6; text-align:center; } .divFeature td a, td span {text-decoration: none; display: block; color: #4a4a4a; padding: 3px 5px 3px 5px; }