/* * * @Id: core.css * @Description: CSS used for rusk1.com * @Author: Tony Collings, Loukas Williams, Hayley King * @Version: 1.0 * @Date: Mar 2009 * */ /* HTML OVERRIDES ------------------------------------------------------------------------------------------ */ body { background:#000; height: 100%; width: 100%; font-family: Helvetica, Arial, sans-serif; font-size: 12px; text-align: center; color: #2f2f2f; } a {color: #619590; text-decoration: none; } a:hover {color: #3d7e75; text-decoration: none;} noscript {color: #fff; padding: 10px; z-index: 20000; position: absolute; top: 0px; left: 50%; text-align: center; background-color: #b31c63; width: 650px; margin-left: -325px; } /* MODIFIERS ------------------------------------------------------------------------------------------ */ .lgrey_txt {color: #cacaca; } .clear { line-height: 1px; height: 1px; font-size: 1px; clear: both; } .bold {font-weight:bold;} .bolder {font-weight: bolder; } img.icon {vertical-align: middle; } .whiteFont {color: #fff; } .purple {color: #961541; } .green {color: #619590;} .darkGrey {color: #4f4f4f; } .grey { color: #868888; } .centered { padding: 0px; margin: 0px; text-align: center; } /* FORMS ------------------------------------------------------------------------------------------ */ div.errors { margin-top: 2px; } img.formError { vertical-align: middle; margin-left: 5px; } img.errorIcon { vertical-align: middle; margin-top: -2px; } .left_col_content form p { margin: 10px 0px; padding: 0px; } .left_col_content form { margin: 0px 0px 0px 10px; } /* GLOBAL LAYOUT ------------------------------------------------------------------------------------------ */ #main_wrapper {text-align: left; /*background:url(../images/back_image2.jpg) no-repeat 0px 0px;*/ position:relative; margin: 1% auto auto auto; _margin: auto auto auto auto ;width:1047px; height:695px; top: 70px; /* Make room for banner "ad" */ } /* Fading Background Effect... Increase number of div's if necessary to accomodate more colors (remember to alter javascript.tpl to reflect the new number of divs in the mootools script) */ #background1{background: #000 url("img/fade_elements/back_image1.jpg") 0px 0px no-repeat; } #background2{background: #000 url("img/fade_elements/back_image2.jpg") 0px 0px no-repeat; } #background3{background: #000 url("img/fade_elements/back_image3.jpg") 0px 0px no-repeat; } #background4{background: #000 url("img/fade_elements/back_image4.jpg") 0px 0px no-repeat; } /* #background5{background: #F5AFD9 url("img/back_image2.jpg") 0px 0px no-repeat; } #background6{background: #F9AF77 url("img/back_image2.jpg") 0px 0px no-repeat; } #background7{background: #CAF4FD url("img/back_image2.jpg") 0px 0px no-repeat; } #background8{background: #F4F1A5 url("img/back_image2.jpg") 0px 0px no-repeat;} */ #background1, #background2, #background3, #background4 {width:1047px; height:695px; margin-top: 1px; } /* #background5, #background6, #background7, #background8 */ #masthead_wrapper {position:relative; top:55px; left:35px; width:860px; height:76px;margin:0px; padding:0px 0px 0px 0px;} #loginLinks {float: right; position: relative; color: #fff; margin-right: -32px; /*Compensate for padding and #masthead_wrapper.width for flush edge */ } #main_logo { float:left;} /* HEADER */ #top_nav_wrapper { float:right; width:373px; height:18px; margin: 57px -128px 0px 0px; } /* Negative margin is to compensate for double float:right (#loginLinks and this), originally 0px */ #top_nav_wrapper, x:-moz-any-link { margin: 57px -124px 0px 0px; } /* FF2 hack */ #top_nav_wrapper, x:-moz-any-link, x:default { margin: 57px -128px 0px 0px; } /* Reset for FF3 - needed because we used FF2 hack */ #top_nav_wrapper { *margin: 57px -124px 0px 0px; _margin: 57px -121px 0px 0px; } /* IE7/6 don't change order of hacks plz! */ #top_nav {list-style:none; float:left; margin:0px; padding:0px; /*margin-left: 5px;*/ } #top_nav li{display:inline;padding:0px;margin:0px; text-align: center; } @media screen and (-webkit-min-device-pixel-ratio:0){ #top_nav_wrapper { margin: 57px -133px 0px 0px; } /* Safari hack */ } /* #top_nav li.locate {} #top_nav li.contact {} #top_nav li.style_src {} */ /* a.locate_btn {float:left;border-left:#fff 1px solid;padding:0px auto; margin:0px;width:90px;height:18px;display:block;background:url('../images/top_nav/locate_btn.jpg') no-repeat 0px 0px;} a.contact_btn {float:left;border-left:#fff 1px solid;width:116px;height:18px;padding:0px;margin:0px;display:block; background:url('../images/top_nav/contact_btn.jpg') no-repeat 0px 0px;} a.style_src_btn {float:left;border-left:#fff 1px solid;width:138px;height:18px;padding:0px;margin:0px;display:block; background:url('../images/top_nav/style_src_btn.png') no-repeat 0px 0px;} */ a.locate_btn {float:left;padding:0px auto; margin:0px;width:100px;height:18px;display:block; /*background:url('../images/top_nav/locate.png') no-repeat 0px 0px; */} a.contact_btn {float:left;width:105px;height:18px;padding:0px;margin:0px;display:block; /* background:url('../images/top_nav/contact_us.gif') no-repeat 0px 0px;*/} a.style_src_btn {float:left;width:168px;height:18px;padding:0px;margin:0px;display:block; /* background:url('../images/top_nav/style_source.png') no-repeat 0px 0px;*/} .bot_nav_end, .top_nav_end, .locate_btn {float:left;padding:0px;margin:0px;} /* BREADCRUMB */ div.breadcrumb { clear: both; font-size: 10px; padding: 3px 0px 0px 17px; _padding: 1px 0px 0px 17px; color: #619590; } div.breadcrumb span.crumbEnd { font-weight: bold; color: #3d7e75; } /* FOOTER */ #bot_nav_wrapper {width:578px; height:28px; margin:13px 0px 0px 0px; } #bot_nav {list-style:none; float:left; margin:0px; padding:0px;} #bot_nav li{display:inline;padding:0px;margin:0px;} a.fashion_btn {float:left;padding:0px;margin:0px;width:128px;height:28px;display:block;background:url('../images/bot_nav/fashion_btn.png') no-repeat 0px 0px;} a.fashion_btn:hover{background:url('../images/bot_nav/fashion_btn-on.png') no-repeat 0px 0px;} a.culture_btn {float:left;border-left:#fff 1px solid;width:118px;height:28px;padding:0px;margin:0px;display:block; background:url('../images/bot_nav/culture_btn.png') no-repeat 0px 0px;} a.culture_btn:hover{background:url('../images/bot_nav/culture_btn-on.png') no-repeat 0px 0px;} a.attitude_btn {float:left;border-left:#fff 1px solid;width:125px;height:28px;padding:0px;margin:0px;display:block; background:url('../images/bot_nav/attitude_btn.png') no-repeat 0px 0px;} a.attitude_btn:hover{background:url('../images/bot_nav/attitude_btn-on.png') no-repeat 0px 0px;} a.rusk_ed_btn {float:left;border-left:#fff 1px solid;width:158px;height:28px;padding:0px;margin:0px;display:block;background:url('../images/bot_nav/rusk_ed_btn.png') no-repeat 0px 0px;} a.rusk_ed_btn:hover{background:url('../images/bot_nav/rusk_ed_btn-on.png') no-repeat 0px 0px;} /* CONTENT */ /* NOTES: #page_body controls positioning of the menu and also the Fashion/Culture/Attitude Elements. */ #page_body { position:relative; top:57px; left:36px; width:890px;} /* Top was 61px tcollings Apr 23rd 2009 */ #page_body, x:-moz-any-link { top: 60px; } /* FF2 hack */ #page_body, x:-moz-any-link, x:default { top: 57px; } /* FF3 hack needed because we used FF2 hack */ #page_body { *top:60px; _top: 57px; } /* IE6/7 don't change order of hacks plz! */ @media screen and (-webkit-min-device-pixel-ratio:0){ #page_body { top:60px; } /* Safari hack */ } #page_right {float:left; height:410px; width:580px; z-index:0; padding:0px 0px 0px 0px;} /* holds the main stage and bottom nav */ #page_left {float:left; width:306px; height:410px; padding: 2px 0px 0px 0px;} /* holds the tagline and main navigation */ .tagline {float:right;} #main_stage_wrapper {width:582px; height:365px; margin:0px 0px 0px 0px;/*background:url(../images/main_area.jpg) no-repeat 0px 0px;*/} /* For Missing Content */ .fpoWarning {display: block; font-size: 12px; padding: 0px; margin: 0px; } /* STAGE LEFT ------------------------------------------------------------------------------------------------ */ .main_stage_left { width:205px; height:363xpx; float:left; padding:0px; margin:0px; } .transparent_corner { width:205px; height:61px; margin:0px; clear: both; } /* Height is height of transparent corner piece */ div.left_col_content { background-color: #000; _margin-top: -3px; height: 282px; padding: 10px; color: #fff; font-size: 11px; } /* 300px - 20px padding + 2px (border-width?) */ div.title_graphic { padding: 0px 0px 10px 8px; _padding: 0px 0px 5px 8px; height: 30px; } div.left_cat_graphic { text-align: center; } /* STAGE RIGHT ------------------------------------------------------------------------------------------------ */ .main_stage_right { width:377px; height:363px; padding:0px; margin:0px; float:right; background:#000;} /* NOTE: Width = 377px and Height = 363px */ .decoration_top { height: 14px; background: #000 url('img/main_stage/top_right_decoration.jpg') top right no-repeat; clear: both; margin-top: 6px; width: 377px; } .decoration_bottom { height: 17px; background: #000 url('img/main_stage/bottom_right_decoration.jpg') top right no-repeat; clear: both; margin-bottom: 6px; } .desc_content { /**margin-top: -5px; _margin-top: 0px;*/ background-image: none; background-color: #fff; position:relative; top:0px; left:0px; width: 363px; height: 320px; color: #2f2f2f; } .desc_content .categoriesWrapper {overflow: auto; height: 320px; color: #2f2f2f; width: 363px; padding: 0px; clear: both; top: 0px; font-size: 12px; } /*.desc_content { width:377px; height:188px; padding:0px; margin:0px; background:url('../images/mainstage/mainstage_top.gif') no-repeat 0px 0px; position:relative; top:0px; left:0px;} NOTE: this is for the dark/scroll pages. fewer of these so moving overrides into specific css files */ .desc_content .banner { position:relative; top: 2px; width:363px; padding:0px; height: auto; margin:0px; background-color:#ececec; } .desc_content .bannertext { color: #8b1b43; text-transform: uppercase; font-size: 15px; padding: 7px 10px 4px 17px; _padding: 5px 10px 4px 17px; } .desc_content .banner_following_text { font:14px Helvetica, Arial, sans-serif; color: #9b9b9c; position:relative; padding:10px 10px 10px 0px; text-transform: none; } .desc_content .categoriesWrapper {overflow: auto; height: 320px; color: #2f2f2f; width: 363px; padding: 0px; clear: both; top: 0px; font-size: 12px; } /* NOTE: Only used on category pages */ .desc_content .text { width:335px; /* +27px padding */ color:#2f2f2f; font:12px Helvetica, Arial, sans-serif; line-height:14px; padding:15px 10px 0px 17px; position:relative; top:0px; margin-top: 2px; } /* This area is slightly different for each section */ /*.desc_content .learn_more{ position:relative; top:22px; left:260px; width:100px;} .desc_content .learn_more a{ font:12px Helvetica, Arial, sans-serif; color:#1B7D73; text-decoration:none;} .desc_content .learn_more a:hover{ color:#FF33CC;} NOTE: No longer using - category descriptions must be trimmed to fit */ /* FLASH SCROLLER ---------------------------------------------- */ .flash_slider { width:369px; height:170px; margin:0px; padding:0px; position:relative; top:0px; left:0px; background: #000 url('../images/mainstage/mainstage_bottom.jpg') top right no-repeat; } /* HEADER ---------------------------------------------- */ /* FOOTER ---------------------------------------------- */ .ticker {position:relative;top:50px;height:19px;} #ticker_content div {float: left; width: 572px; height: 19px; margin: 0px; padding: 0px; } /* Dimensions should reflect image size */ #ticker_wrapper { float: left; width: 925px; margin-top:32px; } /*#ticker_wrapper { float: left; width: 925px; margin-top:45px; } -- pre bkgn resize --*/ .ticker_left {float: left;} #ticker {width: 572px; height: 19px; overflow: hidden; float: left; } #ticker_content {width: 1144px;} div#being-sexy-banner {display: block; clear: both; width: 728px; height: 110px; position: absolute; top: -85px; left: 150px; z-index: 200; } /* PAGE SPECIFIC LAYOUT This should be modular. Each 'page' has it's own CSS file (i.e. events.tpl, contact.tpl etc... ) -------------------------------------------------------------------------------------------------- */ /* Nancy Odell Promo */ div.nancy-odell-strapline {position: absolute; top: 65px; margin-left: 20px; z-index: 1000; } div.learn-more-link {position: absolute; top: 175px; margin-left: 20px; z-index: 1000; color: #cacaca; font-size: 11px; } div.learn-more-link a {color: #fff; text-decoration: none; font-size: 12px; } div.learn-more-link a:hover {color: #fff; text-decoration: underline; } div#social-networks {position: absolute; left: 565px; top: 17px; z-index: 200; color: #fff; font-size: 12px; font-weight: bolder; } div#social-networks a {color: #fff; text-decoration: none; } div#social-networks a:hover {color: #fff; text-decoration: none; } div#social-networks img {display: inline-block; vertical-align: middle; margin-left: 8px; width: 20px; height: auto; } div#social-networks img#twitter-logo {margin-left: 0px; } /* Deepshine Oil Contest */ div#ds-contest {z-index: 10000; position:absolute; top: 280px; left: 50%; margin-left: 360px; } /* Content Category Page */ /* Product Category Page */ img.category_image { /*border: 5px solid #000;*/ padding: 0px 0px 5px 5px; background-color: #000; border-top: none; border-right: none; height: 297px; width: 205px; _width: 200px; _height: 297px; /* _margin-top: -4px;*/ /* IE6 sux!! */ }/* Height and width is to ensure image is always the correct size */ span.fpoWarning.category_image {padding: 20px; border: 5px solid #000; background-color: #000; border-top: none; border-right: none; height: 257px; width: 165px; _width: 205px; _height: 303px; _margin-top: -4px; /* Adjusted for IE6 */ } div#copyright {clear: both; color: #989a9a; text-align: right; padding-top: 50px; *padding: 0px; *margin-top: 50px; font: 11px Helvetica, Arial, sans-serif; } div#copyright a {color: #989a9a; text-decoration: none; } div#copyright a:hover {color: #989a9a; text-decoration: underline;} div#copyright ul {margin: 0px; padding: 0px; display: block; list-style-type: none; } div#copyright ul li {display: inline; padding: 0px 5px; border-right: 1px solid #989a9a; } div#copyright ul li.lastitem {border-right: none; } /* -------------------------------- LEGACY ----------------------------------------------------------------------- */ /* LEGACY (Loukas Williams) NOTE: This is needed but should be tidied up!!! ---------------------------------------------------------------------------------------------------------------- */ .designer_collection_image {width:205px; height:307px; padding:0px; margin:0px;} /*.flash_slider { width:369px; height:170px; margin:0px; padding:0px; position:relative; top:0px; left:0px; background:#000;} --- */ /* shiny str8 */ .str8_image { background:url(../images/mainstage/famglam_thrmshinest.jpg) no-repeat 0px 0px; width:205px; height:307px; padding:0px; margin:0px;} .desc_content_str8 { width:377px; height:190px; padding:0px; margin:0px; background:url(../images/mainstage/mainstage_Str8_top-ct.jpg) no-repeat 0px 0px; position:relative; top:0px; left:0px;} .desc_content_str8 .breadcrumb { color:#1B7D73; font:10px Helvetica, Arial, sans-serif; position:relative; top:10px; left:18px;} .desc_content_str8 .text{ width:335px; height:100px; color:#fff; font:12px Helvetica, Arial, sans-serif; line-height:18px; position:relative; left:17px; top:77px;bottom:17px;} .flash_slider_str8 { width:369px; height:170px; margin:0px; padding:0px; position:relative; top:0px; left:0px; background:#202428;} /* --- */ /* what's new */ .hotNew_image { background:url(../images/mainstage/hotNew.jpg) no-repeat 0px 0px; width:205px; height:307px; padding:0px; margin:0px;} .hotNewTitle { margin:0px 0px 0px 0px; padding:0px; font:11px Helvetica, Arial, sans-serif; font-weight: bold; color:#1B7D73; position:relative; top:67px; left:17px;} .hotNewText { margin:0px 0px 0px 0px; padding:10px 45px 0px 0px; font:10px Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 14px; color:#fff; position:relative; top:67px; left:17px;} .hotNewText_learn_more{ position:relative; top:10px; left:90px; width:100px;} .hotNewText_learn_more a{ font:11px Helvetica, Arial, sans-serif; color:#1B7D73; text-decoration:none;} .hotNewText_learn_more a:hover{ color:#FF33CC;} .deepblue_content { width:377px; height:362px; padding:0px; margin:0px; background:url(../images/mainstage/deepshineblueright_bkgn.jpg) no-repeat 0px 0px; position:relative; top:0px; left:0px;} /*.deepblue_content { width:377px; height:376px; padding:0px; margin:0px; background:url(../images/mainstage/deepshineblueright_bkgn.jpg) no-repeat 0px 0px; position:relative; top:0px; left:0px;}*/ .deepblue_content .deepblue_left { width:155px; height:362px; padding:0px; margin:0px 0px 0px 0px; position:relative; float:left;} .deepblue_content .deepblue_left .textBold{ color:#00a3da; font:11px Helvetica, Arial, sans-serif; line-height:16px; font-weight: bold; margin:92px 10px 0px 23px; } .deepblue_content .textItalic{ color:#666; font:11px Helvetica, Arial, sans-serif; line-height:16px; font-style: italic;font-weight: normal;} .deepblue_content .deepblue_right { width:222px; height:362px; padding:0px; margin:0px; position:relative; float:left;} /* --- */ .expert1_image { background:url(../images/expert/famglam_expert.jpg) no-repeat 0px 0px; width:205px; height:307px; padding:0px; margin:0px;} .expert1_content { width:377px; height:363px; padding:0px; margin:0px; background:url(../images/expert/expert_right_bkgn.jpg) no-repeat 0px 0px; position:relative; top:0px; left:0px;} .expert1_content .expert1_left { width:155px; height:363px; padding:0px; margin:0px 0px 0px 0px; position:relative; float:left;} .expert1_content .expert1_right { width:222px; height:363px; padding:0px; margin:0px; position:relative; float:left;} .expert1_content .breadcrumb { color:#1B7D73; font:10px Helvetica, Arial, sans-serif; position:relative; top:10px; left:10px;} .expert1_content .banner { position:relative; top:10px; left:0px; width:345px; height:21px; border-top:#BCBDC1 1px solid; border-bottom:#BCBDC1 1px solid; border-right:#BCBDC1 1px solid; background:#EAEFEF; margin:7px 0px 0px 0px; padding:3px 0px 0px 17px;} .expert1_content .title { font:17px Helvetica, Arial, sans-serif; color:#ab2760; margin:0px; padding:0px; display:block;} .expert1_content .lineart1 { position:relative; top:10px; left:10px; width:10px; height:21px; border-bottom:#BCBDC1 1px solid; border-left:#BCBDC1 1px solid;} .expert1_content .large_image_container { position:relative; float:left; top:0px; left:10px; width:104px; height:265px; padding:10px 7px 10px 13px;} .expert1_content .pick_text_right { position:relative; float:left; top:10px; left:0px; width:205px; height:170px; padding:6px 6px 6px 6px;margin:6px 6px 6px 6px; border-top:#BCBDC1 1px solid; border-bottom:#BCBDC1 1px solid; border-right:#BCBDC1 1px solid; border-left:#BCBDC1 1px solid;font:12px Helvetica, Arial, sans-serif; display:block; color:#676767; line-height: 16px; overflow-y:auto; overflow-x:none; } .expert1_content .title_larger{font-size: 13px;} .expert1_content .added_info_button_container { position:relative; float:left; top:14px; left:3px; width:100px; height:25px;} .expert1_content .banner_1a { position:relative; top:19px; left:0px; width:345px; height:21px; border-top:#BCBDC1 1px solid; border-bottom:#BCBDC1 1px solid; border-right:#BCBDC1 1px solid; background:#EAEFEF; margin:0px 0px 0px 0px; padding:3px 0px 0px 17px; } .expert1_content .lineart2 { position:relative; top:19px; left:10px; width:10px; height:36px; border-bottom:#BCBDC1 1px solid; border-left:#BCBDC1 1px solid; float:left;} .expert1_content .pick_text_right_1a { position:relative; top:19px; left:15px; width:305px; height:130px; padding:10px 6px 10px 6px; font:11px Helvetica, Arial, sans-serif; display:block; color:#676767; line-height: 15px; overflow-y:auto; overflow-x:none; } .expert1_content .banner_1b { position:relative; top:6px; left:0px; width:345px; height:21px; border-top:#BCBDC1 1px solid; border-bottom:#BCBDC1 1px solid; border-right:#BCBDC1 1px solid; background:#EAEFEF; margin:7px 0px 0px 0px; padding:3px 0px 0px 17px; _padding:3px 0px 0px 7px;} .expert1_content .lineart3 { position:relative; top:6px; left:10px; width:10px; height:21px; border-bottom:#BCBDC1 1px solid; border-left:#BCBDC1 1px solid;} .expert1_content .small_image_container { position:relative; float:left; top:-5px; left:21px; width:40px; height:120px; padding:2px 5px 2px 2px;} .expert1_content .small_sidetext_container{ position:relative; float:left; display:block; top:5px; left:27px; width:80px; height:40px; color:#1B7D73; font:11px Helvetica, Arial, sans-serif; padding:2px 5px 2px 2px;} .expert1_content .view_detail_button_container { position:relative; float:left; top:55px; left:-62px; width:100px; height:25px;} .expert1_content .tips_container { position:relative; float:left; top:-42px; left:45px; width:180px; height:auto; font:11px Helvetica, Arial, sans-serif; line-height: 11px; color:#1B7D73; } /*top:-42px;*/ .expert1_content .tips_container a{ color:#1B7D73; text-decoration:none;} .expert1_content .tips_container a:hover{ color:#FF33CC;}/*#a11c47*/ .expert1_content .lineart4 { position:relative; width:0px; top:0px; left:0px; height:54px; _left:3px; border-bottom:#BCBDC1 1px solid; border-left:#BCBDC1 1px solid; float:left;} .expert1_content .shim1 {position:relative; top:6px; left:0px;} .green_link{ font:10px Helvetica, Arial, sans-serif; color:#1B7D73; text-decoration:none;} .green_link:hover{ color:#FF33CC;} /* OVERLAYS ------------------------------------------------------------------------------------------- */ /* .outer_corner_top { background:url("../images/shadow/top_corner.png") right top no-repeat; width:728px; margin:0px;} .outer_corner_bottom {background:url("../images/shadow/bot_corner.png") left bottom no-repeat ; padding:10px 0px 0px 9px;} .shadowbox { background:url("../images/shadow/shadowbox.png") bottom right no-repeat; } .mainbox { position:relative; top:-9px; left:-10px; margin:0px; height:100%; width: 100%; } */ #overlay{ position: absolute; top: 0px; left: 0px; z-index: 3000; background-color: #000; filter:alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; width: 100%; height: 100%; } /* AJAX CONTENT */ #ajaxWrapper { position: absolute; top: 50px; left: 0px; width: 100%; z-index: 3001; text-align: center; } /* Don't mess with this please ! */ #ajaxContent{ /*width: 728px;*/ text-align: left; margin: 0px auto; background-color: #fff; } span.ajaxError {display: block; padding: 20px; font-size: 11px; } /* FORMS ------------------------------------------------------------------------------------------ */ ul.forms {margin: 0px; padding: 0px; list-style-type: none; } ul.forms label { text-align: left; margin-right: 0.5em; float: left; display: block; font-size: 11px; color: #2f2f2f; } ul.forms li { margin: 5px 0px; text-align: left;} legend {display: none; visibility: hidden;} input, select, textarea { font-family: Helvetica, Arial, sans-serif; padding: 2px; font-size: 11px; } /*option{background:black;}*/ /* LINKS ------------------------------------------------------------------------------------------ */