/* ----- body & background ----- */ body{ background:#fff7ff url(../images/grey_background.gif); color:#666; font:70% Verdana, Arial, Helvetica, sans-serif; text-align:center; line-height:150%; margin:0; padding:0;} /* ----- tables ----- */ li{ font: 100% Arial, Helvetica, sans-serif; color:#666; } select{ font: 100% Arial, Helvetica, sans-serif; color:#666; } textarea{ font: 100% Arial, Helvetica, sans-serif; color:#666; } input{font: 100% Arial, Helvetica, sans-serif; color:#666;} td{ font: 100% Arial, Helvetica, sans-serif; color:#666; } table{font: 100% Arial, Helvetica, sans-serif; color:#666; } th{ background:#ddd; padding:5px;} td{padding:5px;} /* ----- global links ----- */ a:active{ color:#f00681; text-decoration:none;} a:visited{color:#f00681; text-decoration:none;} a:link{ color:#f00681; text-decoration:none;} a:hover{color:#666;} /* ----- global paragraphs, headers & horizontal rules ----- */ h6, h5, h4, h3, h2, h1, p {margin:1em 0;} h1 {font-size:140%;} h2{font-size:130%;} h3{font-size:120%;} h4, h5{font-size:100%;} hr{display:none;} /* ----- global images ----- */ img{border:none;} /* ----- hidden items ----- */ #skip{display:none;} .hidden{display:none;} /* ----- float left / right classes ----- */ .left{float:right;margin-right:.3em;} .right{float:right;margin-left:.3em;} /* ----- company contact details ----- */ address{ font-style:normal; margin:1em 0;} #frmContact{margin-bottom:1em;} /* ----- container size & positioning ----- */ #container{margin:0 auto;width:900px;text-align:left;padding:10px 0 0 0;background:#fff; border:#CBCBCB 1px solid; border-top:none;} /* ----- header area ----- */ #header{background:#fff repeat-y 0 0; margin:0; padding: 0 15px;} #headerdepts{height:85px; background:#fff; margin:0; padding:0 15px;} #header_alt{height:136px; background:transparent;margin:0;} #header_sale{ height:435px; background:#fff; margin:0;} /* ----- Javascript image rotator #header_img {} #header_img li{ margin:0; padding:20px 0 0 0; list-style:none;left:10px;clear:both;} #header_img{ margin:0; padding:0; list-style:none; clear:both; left:10px;} ----- */ /* ----- Flash image rotator ----- */ #header_img {margin:0 auto;width:860px;padding:0 0 3px 0;clear:both;background:#fff url(/images/flash/DoNotDelete.jpg) no-repeat; height:348px; border-bottom: #F00681 10px solid;} /* ----- company logo & strapline ----- */ #logo{ margin:30px 0 20px 0;padding:0; display:block;background:url(../images/justbeautydirectlogo.gif) no-repeat 0 0; text-indent:-9999px; height:93px; width:187px; float:left;} #logo a{display:block; height:90px;} #tagline{display:none;} /* ----- phone number, toptools and shopping basket info ----- */ #toptools ul, #toptools li{ list-style:none; margin:0; padding:0;} #toptools li{display:inline; margin-left:5px; border-left:1px solid #e9f3d1; padding-left:8px;} #toptools a.tt{color:#aaa;} #toptools a.tt:hover{color:#666;} #toptools .first{ margin-left:0; border-left:none; padding-left:0;} #info{margin:0; padding:0 5px 0 0; color:#aaa;display:block;float:right;text-align:right;} /* ----- optional mid div (useful for more complex backgrounds) ----- */ #mid{background:transparent;} /* ----- breadcrumb trail ----- */ #breadcrumbs{ float:right; display:inline; width:650px; margin-right:20px; color:#aaa; padding-top:19px; padding-bottom:10px; margin-bottom:18px; margin-top:0;} #breadcrumbs2 {float:left;display:inline; width:530px; margin-right:20px; color:#aaa; padding-top:13px; padding-bottom:10px; margin-bottom:18px;} /* ----- search box ----- */ #search{ width:190px; padding:22px 0 13px 0; margin:0;} #search label{display:none;} #searchKeyword{ border:1px solid #ddd; font-size:95%; padding:3px 0 3px 5px; width:140px;} #searchSubmit{background:#fff; text-indent:-9999px;line-height:200px;font-size:0;border:0;margin-left:5px;margin-bottom:3px; padding:0;display:inline;width:14px;height:14px;} #searchSubmit:hover{cursor:pointer;} /* ----- main navigation ----- */ #topNav li{} #topNav{/* position:absolute; top:125px; height:10px;width:99%; margin:0;*/ text-align:center; z-index:99; margin:20px 0 0 60px;list-style:none;clear:both;} #topNav li{ padding:0;list-style:none;float:left;display:inline;/* height:10px; */margin-left:3px;} #topNav li a{ display:block;font-weight:bold;font-size:18px;color:#999; /* height:10px; */outline:none;} #topNav li span{font-weight:bold;font-size:20px;color:#999;} #topNav li a span{} /* ------------------------------------- Menu -------------------------------------*/ #navigation{ width:860px; height:21px; background:#5E5E5D; margin:0 auto 3px auto; padding:3px 0 0 0; clear:both; } #navigation ul{ list-style-type:none; /*removes bullets from the list*/ margin:0; padding:0; font-size:small; } #navigation ul li{ float:left; margin:0;padding:0 11px 0 11px; } #navigation ul li a{ display:block; /*makes the anchor fill the list item so clicking any part of the graphical button will work, also allows the anchor to take a width*/ position:relative; line-height:21px; /*set equal to the height of the navbar image. Using line-height, rather than height, will get the text aligned to the vertical centre of the button*/ height:21px; overflow:hidden; color:#FFF; text-align:center; } #navigation ul li a:hover{ color:#f00681; } #navigation ul li a span { position:absolute; left:0px; top:0px; display:block; height:21px; background-repeat: no-repeat; background-position:0 0; overflow:hidden; } /* Set width on each anchor (if all equal set width on generic anchor instead). Make sure the combined width doesn't exceed the total width of the menu bar */ #navigation ul li a#home{ width:50px; } #navigation ul li a#new{ width:43px; } #navigation ul li a#giftwp{ width:160px; } #navigation ul li a#specials{ width:72px; } #navigation ul li a#about{ width:78px; } #navigation ul li a#blog{ width:44px; } #navigation ul li a#customer{ width:124px; } #navigation ul li a#contact{ width:99px; } #navigation ul li a#home span{ background-image:url(../images/menu/menu_home.gif); width:50px; } #navigation ul li a#new span{ width:43px; background-image:url(../images/menu/menu_new.gif); } #navigation ul li a#giftwp span{ width:160px; background-image:url(../images/menu/menu_gift.gif); } #navigation ul li a#specials span{ width:72px; background-image:url(../images/menu/menu_specials.gif); } #navigation ul li a#about span{ width:78px; background-image:url(../images/menu/menu_aboutus.gif); } #navigation ul li a#blog span{ width:44px; background-image:url(../images/menu/menu_blog.gif); } #navigation ul li a#customer span{ width:124px; background-image:url(../images/menu/menu_customer.gif); } #navigation ul li a#contact span{ width:99px; background-image:url(../images/menu/menu_contact.gif); } #navigation ul li a:link span, #navbar ul li a:visited span{ background-position: 0 0;} /* image in base position */ #navigation ul li a:hover span, #navbar ul li a:focus span, #navbar ul li a:active span { background-position: 0 -21px;} /* shift image up to selected position */ /* ----- side navigation ----- */ #navDept li{ margin:0; padding:0; list-style:none;} #navDept{ margin:0; padding:0; list-style:none;} #navDept{ margin:0; padding:0; /* background:#fafafa; */ color:#666; display:inline;} #navDept li{border-bottom:1px solid #eee;} #navDept li.first{display:none;} #navDept li a{ display:block; width:100%; color:#666;} #navDept li a:hover{color:#f08;} #navDept li a.selected{ /* background:url(/graphics/plain/bullet.gif) no-repeat 1px .8em; padding-left:10px;*/ color:#f08;} #navDept li a span{ display:block; padding:6px 0;} /* ----- subdepartment navigation ----- */ #navSubDept li {margin:0;padding:0;list-style:none;} #navSubDept {margin:0;padding:0;list-style:none;} #navSubDept li{border-bottom:1px solid #eee;} #navSubDept li a{display:block;color:#f39;padding:0;margin:0;} #navSubDept li a:hover{color:#666;} #navSubDept li a.selected{/*background:url(/graphics/plain/bullet.gif) no-repeat 1px 55%;padding-left:10px;*/color:#666;} #navSubDept li a span{display:block;padding:6px 0;margin:0;} /* ----- SUB subdepartment navigation ----- */ #navSubSubDept li { margin:0; padding:0; list-style:none;} #navSubSubDept { margin:0; padding:0; list-style:none;} #navSubSubDept{ margin:1em 0; padding:8px 10px; background:#fff7ff; border:1px solid #e9f3d1; color:#aaa; width:628px; display:inline; float:left;} #navSubSubDept li{ margin:.2em 10px .2em 0; line-height:150%; padding:0; padding-left:20px;list-style:none; display:block; float:left; width:280px;} #navSubSubDept li a{color:#f08;} #navSubSubDept li a.selected{color:#f68;} #navSubSubDept li a:hover{color:#666;} /* ----- customer tool list ----- */ #navTools li{ margin:0; padding:0; list-style:none;} #navTools{ margin:0; padding:0; list-style:none;} #navTools{display:none;} #navTools li{border-bottom:1px solid #eee;} #navTools li a{ display:block; width:100%; color:#aaa;} #navTools li a:hover{color:#666;} #navTools li a.selected{ /* background:url(/graphics/plain/bullet.gif) no-repeat 1px .8em; padding-left:10px;*/ color:#666;} #navTools li a span{ display:block; padding:6px 0;} /* ----- nav static menu items ----- */ .navStatic{ margin:0px; padding:0px; list-style:none;} .navStatic li{margin:0; list-style:none;border-bottom:1px solid #eee;} .navStatic li a:link{ display:block; width:100%; color:#666;} .navStatic li a:visited{ display:block; width:100%; color:#666;} .navStatic li a:active{ display:block; width:100%; color:#666;} .navStatic li a:hover{color:#f4d;} .navStatic li a span{ display:block;padding:6px 0 6px 20px;} /* ----- nav titles ----- */ #navDeptTitle{display:none;} #navToolsTitle{display:none;} .navStaticTitle {margin:9px 0 6px 0; font-size:100%; text-transform:uppercase; font-size:110%; color:#666; border-bottom:1px solid #eee; font-weight:normal;} /* ----- side navigation column ----- */ #side{ float:left; display:inline; width:190px; margin-left:20px; padding-bottom:10px;} /* ----- main content area ----- */ #main{float:left;display:inline;width:650px;margin-left:20px;} * html #main{margin-left:0;} #main h2{ font-weight:normal; padding:0; color:#333; font-size:130%; font-weight:normal; clear:both; } #main h2#pageTitle{font-weight:normal; padding:0; margin:0; margin-bottom:1em; color:#666; font-size:160%; font-family:Georgia, "Times New Roman", Times, serif;} .note{font-size:110%;} .highlight{ font-size:140%; color:#F00681;} .module1{ float:left; width:250px;} .module2{ float:right; width:250px;} /* ----- homepage promotion ----- */ .promo{ margin:1.5em 0;} .promo li{ margin:0; padding:0; list-style:none;} .promo ul{ margin:0; padding:0; list-style:none;} .promo li{ margin-bottom:1em; padding:0; color:#666;} .promo li h3{ margin-top:.5em;margin-bottom:1em;padding:0;background:none;color:#0af;font-size:140%;font-weight:normal;} .promo .image{float:left;margin:0;margin-right:15px;margin-bottom:10px;border:1px solid #e5e5e5;} .promo .desc{line-height:150%;} .promo .more{margin:0;text-align:left;line-height:180%;color:#666;font-size:100%;} .promo p.more a{padding-left:10px;/*background:url(/graphics/plain/more_bullet.gif) no-repeat 0 45%;*/} /* ----- footer area ----- */ #footer{ background:#F3F4EA; padding:20px 0; text-align:center;} #footer p{margin:0;padding:0; font-family: Arial, Helvetica, sans-serif;} #footer li{ margin:0; padding:0; list-style:none;} #footer ul{ margin:0; padding:0; list-style:none;} #footer li{ padding-left:5px; border-left:1px solid #e9f3d1;} #footer li.first{ margin-left:0; border-left:0;padding-left:0;} #footer li{display:inline;margin-right:3px;} #footer a{color:#f08;} #footer a:hover{color:#666;} #footer #credits{display:none;} #footer a.web{color:#666;} #footer a.web:hover{color:#f08;} /* ----- pagination (page 1/2 etc.) ----- */ .pagination{margin:0;padding:0;display:block; float:right; width:180px; margin-right:3px;} .pagination .pag_text{display:block; float:left; text-align:right; margin:0; padding-top:1px; color:#aaa;} .pagination .links{ display:block; width:94px; float:right; margin:0; padding:0;} .pagination li{ margin:0; height:16px; line-height:16px; float:left;} .pagination a{ display:block; float:left; width:16px; height:16px; margin-left:5px; text-indent:-8000px; overflow:hidden;} .pagination a.firstPage{background:url(/graphics/plain/ico_first.gif) no-repeat 0 0;} .pagination a.firstPage:hover{background:url(/graphics/plain/ico_first.gif) no-repeat 0 -16px;} .pagination a.prevPage{background:url(/graphics/plain/ico_prev.gif) no-repeat 0 0;} .pagination a.prevPage:hover{background:url(/graphics/plain/ico_prev.gif) no-repeat 0 -16px;} .pagination a.nextPage{background:url(/graphics/plain/ico_next.gif) no-repeat 0 0;} .pagination a.nextPage:hover{background:url(/graphics/plain/ico_next.gif) no-repeat 0 -16px;} .pagination a.lastPage{background:url(/graphics/plain/ico_last.gif) no-repeat 0 0;} .pagination a.lastPage:hover{background:url(/graphics/plain/ico_last.gif) no-repeat 0 -16px;} /* ----- product thumbnail list ----- */ .products{margin:1em 0; width:650px;} *html .products{width:655px;} .products h2{ width:350px; float:left; margin:0.5em 0 1.3em 0;} .products li{ margin:0; padding:0; list-style:none;} .products ul{ margin:0; padding:0; list-style:none;} .products ul{ clear:both;} .products li{ margin-bottom:2em; margin:0 13px 2em 13px; padding:5px 3px; color:#777; display:block; width:180px; float:left; text-align:center; background-color: #F8F8F8; border: 1px solid #E5E5E5; height: 210px; } .products li:hover{} *html .products li{margin-right:10px;} .products li h3{padding:0;margin:0;background:none;font-size:100%;font-weight:normal;height:45px;} /* .products li h3{ padding:0; margin:0; background:none; font-size:100%; font-weight:normal;} */ .products li h3 a:active{color:#f39;} .products li h3 a:visited{color:#f39;} .products li h3 a:link{color:#f39;} .products li h3 a:hover{color:#666;} .products .image{ clear:both; margin:0 0 1em 0;} .products .image a img{border:1px solid #e5e5e5;} .products .image a:hover img{border:1px solid #d5d5d5;} .products p.desc{display:none;} .products .price{ clear:both; margin:.5em 0 0 0; line-height:180%; color:#666;} .products .price span{color:#e00;} .products .quantity{ clear:both; margin:1em 0; text-align:right; line-height:180%;} /* ----- individual products ----- */ #product{ margin:1em 0; } #product .image{ float:left; margin-bottom:1em;} #product .image p{margin:.5em 0;} #product .image img{border:1px solid #e1e1e1;} #product .info{ float:left; width:300px; padding-left:90px;} #product .price{color:#666; font-size:120%;} #product .info p{ margin:0; margin-bottom:.2em;} #product .info h3{margin:0; margin-bottom:.2em;} #product .actions{border-top:1px solid #e1e1e1; clear:both;} #product #addBasket{border-top:1px solid #e1e1e1; padding-top:1em; clear: both;} #product #addWishlist a{} .sizingLink{border:1px solid #eee; display:block; width:70px; padding-top:35px; padding-bottom:.5em; text-align:center; /* background:url(/graphics/plain/sizing_icon.gif) no-repeat center .8em;*/} .sizingLink:hover{border:1px solid #ddd;} /* ----- featured articles ----- */ #articles{} #articles img { background: #F8F8F8; padding: 5px; border: 1px solid #E5E5E5; } #articles li {display:block;float:left; margin:0; padding:0; list-style:none;} #articles ul { margin:0; padding:0; list-style:none;} #articles ul{ margin:0 0 1em 0; padding:3px 10px; color:#777;} #articles ul li{ margin:0 0 .5em 0; line-height:150%; padding:0; padding-left:15px; list-style:none;} #articles ul li a{color:#aaa;} #articles ul li a:hover{color:#666;} /* ----- customer reviews ----- */ #reviews{} #reviews li { margin:0; padding:0; list-style:none;} #reviews ul { margin:0; padding:0; list-style:none;} #reviews ul{ margin:1em 0; padding:3px 10px; background:#f1f1f1; border:1px solid #eee; color:#777;} #reviews ul li{ margin:.5em 0; line-height:150%; padding:0; padding-left:15px; list-style:none; background:url(/graphics/plain/arrow3.gif) no-repeat 0 .6em;} #reviews ul li a{color:#777;} #reviews ul li a:hover{color:#777;text-decoration:underline;} /* ----- site map ----- */ #sitemap li{ margin:0; padding:0; list-style:none;} #sitemap ul{ margin:0; padding:0; list-style:none;} #sitemap{ margin:0; padding:0; list-style:none;} #sitemap{margin:1em 0;} #sitemap li{margin:.5em 0;} #sitemap li h3{margin:.2em 0;} #sitemap ul{padding-left:20px;} /* ----- tables and forms ----- */ fieldset{border:none; padding:0; margin:1em 0;} legend{font-weight:normal; padding:0; margin:0; color:#333; font-size:130%; clear:both;} fieldset h3{margin:1em 0 0 0;} fieldset h3{margin:1em 0 0 0;} #content table{width:100%; margin:.5em 0; border-collapse:collapse; line-height:150%;} th{border:0; background:#ededed; padding:5px;} td{background:#fff; border:0; padding:5px; vertical-align:top;} p span{color:#e00;} label span{color:#e00; font-size:100%; font-weight:bold;} .formSelect{background:#fff; border:1px solid #e1e1e1; width:200px; padding:2px 0 2px 4px;} .formField{background:#fff; border:1px solid #e1e1e1; width:200px; padding:2px 0 2px 4px;} .formFieldMedium{background:#fff; border:1px solid #e1e1e1; width:20px; margin-right:5px; padding:2px 0 2px 4px;} .formFieldShort{background:#fff; border:1px solid #e1e1e1; width:20px; margin-right:5px; padding:2px 0 2px 4px;} .formFieldMedium{width:96px;} table .price{color:#666; font-size:110%; font-weight:bold;} .formFieldProduct{width:250px; color:#666; background:#fff; border:1px solid #e1e1e1; margin:.5em 0; padding:3px 0 3px 4px;} table .price{color:#666; font-size:110%; font-weight:bold;} .formRadio{vertical-align:middle;} checkbox{ border:1px solid #999;} .formButton{ background:#F00681;color:#fff; border:none; padding-top:3px; padding-bottom:3px;} .formButton:hover{cursor:pointer; background:#666;} label span{ color:#e00; font-size:110%; font-weight:bold;} #quantity:focus {background: #fff; border: 1px solid #bbb;} textarea:focus {background: #fff; border: 1px solid #bbb;} formFieldMedium:focus {background: #fff; border: 1px solid #bbb;} formFieldShort:focus {background: #fff; border: 1px solid #bbb;} input.formField:focus {background: #fff; border: 1px solid #bbb;} /* ----- shopping cart ----- */ #total{margin:1em 0; padding:0; width:295px; font-size:110%;} #total dt{width:200px; float:left; font-weight:bold;} #total dd{margin-left:201px; text-align:right;} .actions{clear:both; margin:0; padding:.5em 0;} .global-form{margin-bottom:1em;} /* ----- first table data style ----- */ td.first{width:40%;} /* ----- float fix ----- */ #navSubSubDept li:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} #navSubSubDept:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} .modules:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} #total:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} #pagination:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} .products li:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} .products:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} .promo:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} .inner:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} #navSubSubDept li {display:block;} #navSubSubDept {display:block;} .modules {display:block;} #total {display:block;} #pagination {display:block;} .products li {display:block;} .products {display:block;} .promo {display:block;} .inner {display:block;} .inner1 {display:inline;} /* \*/ #navSubSubDept li {min-height:1%;} #navSubSubDept {min-height:1%;} .modules {min-height:1%;} #total {min-height:1%;} #pagination {min-height:1%; text-align: right; margin:0.5em 0 0 0;} #pagination p {margin : 2px 20px 2px 0; padding: 0;} #pagination p.links {margin-bottom: 10px;} .products li {min-height:1%;} .products {min-height:1%;} .promo {min-height:1%;} .inner {min-height:1%;} * html #navSubSubDept li {height:1%;} * html #navSubSubDept {height:1%;} * html .modules {height:1%;} * html #total {height:1%;} * html #pagination {height:1%;} * html .products li {height:1%;} * html .products {height:1%;} * html .promo {height:1%;} * html .inner {height:1%;} /* */ /* ----- end float fix ----- */ /* JBV added stuff */ .warning {font-weight:bold; color:#666;} .optionimages {display:block;width:520px;clear:both;margin:10px 0 10px 0;} .bigpink {font-weight:bold; color:#f00681; margin-top:40px;} .icons img { margin-right: 10px; }