#spp-productview .dotted-y-r { background: url(http://www.ojon.co.uk/images/css/dotted_y.gif) repeat-y top right; margin-top: 0; } #spp-productview .dotted-y-l { background: url(http://www.ojon.co.uk/images/css/dotted_y.gif) repeat-y top left; margin-top: 0; } #navigation { margin-bottom: 15px; } #breadcrumb { top: 0; } .shade-range-header { border-bottom: 1px solid #CCCCCC; padding: 0 0 3px 0; } .shade-range-header h2 { color: #000; font-size: 13px; float:left; margin:0 } #product-title-container h2 { color: #000; font-size: 13px; margin:0 } .shade-range-header a { float:right } .shade-range-container { margin: 15px 0 15px 0 } .shade-range-container td.shade-table-cell {padding: 0} .shade-range-container td.shade-table-cell a { font-size: 12px; background: none; padding: 5px 5px 5px 0; } .shade-range-container td.active a, td.over a { background:transparent url(http://www.ojon.co.uk/images/css/hover-gradient.gif) repeat-x scroll center bottom; color:#326445; } td.shade-table-cell .undertone {font-size: 11px} #foundation-finder-btns {margin: 10px 0 20px 0;} #foundation-finder-btns a {margin: 0 5px 0 0;} #mens #header { margin: 0; padding: 20px 5px 8px 0; background: transparent url(http://www.ojon.co.uk/images/mens/mens-header-bg.jpg) no-repeat; } #mens #header h2 a { background: url(http://www.ojon.co.uk/images/mens/mens-logo.gif) no-repeat; } #mens #header #accountbar li a { color: #f5f5ef; } #mens #header #alt-nav li a { background: url(http://www.ojon.co.uk/images/mens/orange-arrow.gif) no-repeat left 45%; color: #f5f5ef; } #mens #header #accountbar li a:hover, #mens #header #alt-nav li a:hover { color: #F59103; } #mens #search-content {border: 4px solid #6F6F6F;} #mens .searchbar-active {background: transparent url(http://www.ojon.co.uk/images/mens/mens-nav-bg-on.gif) repeat-x scroll 0 0; margin: -1px 0 0 0;} #mens #navigation #searchbar .button { width:30px; height:16px; margin: 0 15px 4px 3px; padding: 0 0 2px 0; background: url(http://www.ojon.co.uk/images/global/buttons/go_btn_org.gif); cursor:pointer; *cursor:hand; border:none; vertical-align:middle;} /* IMPORTANT NOTE : global menu Item - "Whitening" has added to this Mockup for CLJP. item Numbers for following css selectors has increased with this change. item1 : 3step item2 : skincare item3 : whitening item4 : makeup item5 : fragrance item6 : sun item7 : men's item8 : offers item9 : my skin consultation */ #mens #navigation { background: url(http://www.ojon.co.uk/images/mens/mens-nav-bg.gif) repeat-x; margin: 0 0 15px 0; padding: 1px 0 0 0; } #mens #navigation ul#navlist li.item1 a.item1, #mens #navigation ul#navlist li.item2 a.item2, #mens #navigation ul#navlist li.item3 a.item3, #mens #navigation ul#navlist li.item4 a.item4, #mens #navigation ul#navlist li.item5 a.item5, #mens #navigation ul#navlist li.item6 a.item6, #mens #navigation ul#navlist li.item7 a.item7, #mens #navigation ul#navlist li.item8 a.item8{ background: url(http://www.ojon.co.uk/images/mens/mens-nav-sprite.gif) no-repeat 0 0; height: 30px; } #mens #navigation ul#navlist li.item1 a.item1 { width: 68px; background-position: 0 0; } #mens #navigation ul#navlist li.item2 a.item2 { width: 70px; background-position: -68px 0; } #mens #navigation ul#navlist li.item3 a.item3 { width: 89px; background-position: -138px 0; } #mens #navigation ul#navlist li.item4 a.item4 { width: 52px; background-position: -227px 0; } #mens #navigation ul#navlist li.item5 a.item5 { width: 79px; background-position: -279px 0; } #mens #navigation ul#navlist li.item6 a.item6 { width: 101px; background-position: -358px 0; } #mens #navigation ul#navlist li.item7 a.item7 { width: 51px; background-position: -459px 0; margin-right:0;} #mens #navigation ul#navlist li.item8 a.item8 { width: 89px; background-position: -510px 0;margin-right: 27px; } #mens #navigation ul#navlist li.item9 a.item9 { width: 167px; background-position: -626px 0; display: none;} #mens #navigation #searchbar {margin-left: 167px;} #mens #navigation .submenu-content { border: 4px solid #6f6f6f; } #mens #navigation ul#navlist li.item1 a.item1:hover, #mens #navigation ul#navlist li.item1:hover a.item1, #mens #navigation ul#navlist li.item1.sfhover a.item1 { background-position: 0 -30px; } #mens #navigation ul#navlist li.item2 a.item2:hover, #mens #navigation ul#navlist li.item2:hover a.item2, #mens #navigation ul#navlist li.item2.sfhover a.item2 { background-position: -68px -30px; } #mens #navigation ul#navlist li.item3 a.item3:hover, #mens #navigation ul#navlist li.item3:hover a.item3, #mens #navigation ul#navlist li.item3.sfhover a.item3 { background-position: -138px -30px; } #mens #navigation ul#navlist li.item4 a.item4:hover, #mens #navigation ul#navlist li.item4:hover a.item4, #mens #navigation ul#navlist li.item4.sfhover a.item4 { background-position: -227px -30px; } #mens #navigation ul#navlist li.item5 a.item5:hover, #mens #navigation ul#navlist li.item5:hover a.item5, #mens #navigation ul#navlist li.item5.sfhover a.item5 { background-position: -279px -30px; } #mens #navigation ul#navlist li.item6 a.item6:hover, #mens #navigation ul#navlist li.item6:hover a.item6, #mens #navigation ul#navlist li.item6.sfhover a.item6 { background-position: -358px -30px; } #mens #navigation ul#navlist li.item7 a.item7:hover, #mens #navigation ul#navlist li.item7:hover a.item7, #mens #navigation ul#navlist li.item7.sfhover a.item7 { background-position: -459px -30px; } #mens #navigation ul#navlist li.item8 a.item8:hover, #mens #navigation ul#navlist li.item8:hover a.item8, #mens #navigation ul#navlist li.item8.sfhover a.item8 { background-position: -510px -30px; } /* #mens #navigation ul#navlist li.item9:hover a.item9, #mens #navigation ul#navlist li.item9.sfhover a.item9 { background-position: -626px -30px; } */ #mens #navigation .submenu-content { border: 4px solid #6f6f6f; } #mens #header #accountbar li #cart-bag { background: transparent url(http://www.ojon.co.uk/images/mens/mens-bag-icon.gif) no-repeat; width: 11px; height: 15px; float:left; margin: 0 5px 0 0;} #mens #header #accountbar li a.active { color: #f5f5ef; background: transparent url(http://www.ojon.co.uk/images/mens/mens-grey-grad.gif) repeat-x; } #mens #signin-content, #mens #email-content, #mens #cart-content, #mens #help-content { border: 4px solid #6f6f6f; } .colorfinder-container { width: 616px; padding: 20px; } div#colorfinder-table-container table { border-collapse: collapse; min-height: 0 } td.colorfinder-cell { vertical-align: top; padding: 0; margin: 0; width: 88px; height: 23px} div.colorfinder-swatch { width: 82px !important; height: 17px !important; margin: 0; border: 3px solid transparent; _border: 3px solid white; overflow: visible; position: relative; } div.swatch-container div.onstate, div.swatch-container div.onstate { left: 0; top: 0; position: absolute; border: 3px solid #85a095; z-index: 50; display: none; } td.active div.onstate, td.over div.onstate { display: block !important; } td.active a.colorfinder-link, td.over a.colorfinder-link { background: transparent; } div.colorfinder-swatch div { margin-top: -3px !important; margin-left:-3px !important} div#colorfinder-detail-container { display: none; left: 0; position: absolute; top: 0; width: 320px; z-index: 100; margin-bottom: 20px; } div.colorfinder-detail-content { background-color: #f5f5ef; border: 1px solid #CCC; padding: 10px; } .colorfinder-detail-wrapper { background: url(http://www.ojon.co.uk/images/css/dotted_y.gif) repeat-y; background-position: 150px 0%; } div.colorfinder-detail-content div.left-panel { float: left; margin: 0; width: 150px; } div.colorfinder-detail-content div.left-panel div#smoosh_container { margin: 0 0 10px 0; } div.colorfinder-detail-content div.left-panel h2 { font-size: 12px; font-weight: normal; } div.colorfinder-detail-content div#sku-details-container { float: left; padding-left: 10px; width: 130px; } div#sku-details-container #shade_price { margin-top: 5px; margin-bottom: 15px; font-weight: bold; } div#colorfinder-detail-content h2 { font-size: 18px; } div#colorfinder-detail-content h3 { color: black; } div#colorfinder-detail-container div#window-tail-bottom { margin: -2px 0 0 0; padding: 0 0 0 22px; } div#colorfinder-detail-container div#window-tail-top { margin: 0 0 -2px 0; padding: 0 0 0 22px; } div#colorfinder-filter-container .filter-options { border-right: 1px dotted #ccc; } div#colorfinder-filter-container .filter-options { display: block; } /* Favorites Messaging ---------------------------- */ #favorites-message { width: 300px; height: 80px; padding: 5px 5px 5px 8px; background-color: #f5f5ef; } #favorites-message p { margin: 12px 0 20px; } #favorites-message .continue-shopping { margin-left: 8px; float: none; } /* Reviews & Social Networking ------------------------------*/ #BVReviewsContainer { clear:both; display: none; padding: 20px; padding-top:0px; margin-bottom: 46px; width: 850px; background: url("../../../images/products/spp/spp_content_bg.png") repeat scroll 0 0 transparent; } #BVCustomerRatings { clear: both; padding-top:10px; margin-left:7px; min-height: 60px; } .ie6 #BVCustomerRatings { height: 60px; } #BVFrame { visibility: hidden; width: 1px; height: 1px; position: absolute; left: -999px; top: -999px; overflow: hidden; } /* HACK hidding Reviews & Social Networking ------------------------------*/ .BVRROverallRatingContainer { visibility: hidden; } .BVRRRatingsHistogramButton { visibility: hidden; } #BVRRRatingSummaryLinkReadID { visibility: hidden; } .BVRRSocialBookmarkingLinks { visibility: hidden; } #BVRRRatingSummaryLinkWriteID { font-size: 12px; background: url("http://reviews.ojon-na.esteeonline.com/bvstaging/static/2466-en_us/translucent.gif") no-repeat; text-indent:90px; position:relative; left:-210px;} .BVPageBody BVBody { padding-top: 25px; background: url("../../../images/global/review_tnx062411.png") no-repeat;} #BVSubmissionContainer { padding-top: 25px; background: url("../../../images/global/review_tnx062411.png") no-repeat;} .BVMEContentHeaderSentence { padding-bottom: 125px; background: url("../../../images/global/review_tnx062411.png") no-repeat;} /* HACK hidding Reviews & Social Networking ------------------------------*/ .BVCreate-Body { background: url("../../../images/global/common_bg.jpg") no-repeat scroll center top #0A0A0A; padding-bottom: 150px;} #BVCreate-Header img#bv_header_image {margin-top: 48px;} #BVSubmissionContainer {margin-top: 8px; margin-bottom: 50px; width: 850px; background: url("../../../images/global/ds_bg.png") repeat scroll 0 0 transparent;} .BVModuleFooterLinks { margin-bottom: 40px; }