/********************************************************************************************** CSS on Sails Title: Threadless Author: XHTMLized (http://www.xhtmlized.com/) Date: August 2009 *********************************************************************************************** 1. BASE 1.1 Reset 1.2 Accessibility Navigation & Hide 1.3 Clearfix 1.4 Default Styles 2. LAYOUT 2.1 Structure 2.2 Image Replacement 2.3 Header 2.4 Navigation 2.5 Content 2.6 Sidebar 2.7 Footer ***********************************************************************************************/ /* 1. BASE ----------------------------------------------------------------------------------------------- ===============================================================================================*/ /* 1.1 Reset -----------------------------------------------------------------------------------------------*/ html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, samp, small, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; background: transparent; } /*removed: vertical-align: baseline; */ q { quotes: none; } q:before, q:after { content: ""; content: none; } .contentMain a, ins, del { text-decoration: none; } table { border-collapse: collapse; border-spacing: 0; } th { text-align: left; } /* 1.2 Accessibility Navigation & Hide -----------------------------------------------------------------------------------------------*/ ol#accessibility-nav, .hide, .structural, .browse-products h2, .product-listing .product-listing1 .product-listing-outros .info dt { position: absolute; top: -999em; left: -999em; height: 1px; width: 1px; } /* 1.3 Clearfix -----------------------------------------------------------------------------------------------*/ .browse-products:after, .paging:after, .product-navigation li:after, .product-listing:after, .product-listing1:after, .product-listing-outros:after, .product-collections:after, .product-awesomeness:after, .product-categories:after, .products-per-page:after, .product-navigation .dropdown ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* 1.4 Default Styles -----------------------------------------------------------------------------------------------*/ body { background: #fff; color: #333; font-size: 62.5%; text-align: left; } hr { display: none; } strong { font-weight: bold; } em { font-style: italic; } del { text-decoration: line-through; } th { font-weight: normal; } address, cite, dfn { font-style: normal; } li { list-style: none; } abbr, acronym { border-bottom: 1px dotted #999; cursor: help; } input, textarea, select { font-family: Arial, Helvetica, sans-serif; } a, a:visited { color: #3d89c8; text-decoration: none; } a:hover, a:active { color: #3d89c8; text-decoration: underline; } /* 2. LAYOUT ----------------------------------------------------------------------------------------------- ===============================================================================================*/ /* 2.1 Structure -----------------------------------------------------------------------------------------------*/ .contentMain, #footer .container { position: relative; } #contentMain { padding-bottom: 60px; overflow: hidden; clear: both; font-size: 1.2em; text-align: left;} .primary-content { width: 800px; float: right; border-top: 3px solid #cfe2f1; padding-top: 10px;} .secondary-content { width: 144px; float: left; border-top: 3px solid #cfe2f1; } #header .container { position: static; } #toolbar { height: 39px; width: 100%; background: #666 url(../../../imgs/def/bg_toolbar.png) repeat-x left bottom; } #toolbar .container { width: 990px; z-index: 99; position: relative; } /* 2.2 Image Replacement -----------------------------------------------------------------------------------------------*/ #contentMain h1, .secondary-content h2, #footer h3 { position: relative; overflow: hidden; height: 17px; } #contentMain h1 span, .secondary-content h2 span, #footer h3 span { display: block; overflow: hidden; width: 100%; height: 100%; background: url(../../../imgs/def/txt_ui_titles.png) no-repeat 0 0; position: absolute; top: 0; left: 0; } #contentMain h1 span { background: url(../../../imgs/def/txt_ui_titles.png) no-repeat -210px 0; } #contentMain h1.hoodies span { background: url(../../../imgs/def/txt_ui_titles.png) no-repeat -210px -40px; } #contentMain h1.prints span { background: url(../../../imgs/def/txt_ui_titles.png) no-repeat -210px -80px; } #contentMain h1 { height: 40px; width: 402px; } #contentMain h1.hoodies { width:426px; } #contentMain h1.prints { width:407px; } .secondary-content .guys h2 span{ width: 36px; } .secondary-content .girls h2 span { width: 34px; } .secondary-content .color h2 span { width: 39px; } .secondary-content .price h2 span { width: 38px; } .secondary-content .shop h2 span { width: 35px; } .secondary-content .size h2 span { width: 29px; } .secondary-content h2 { position:relative; } .secondary-content h2 a { position:absolute; right:1px; top:3px; font-weight:normal; font-size:85%;} #footer .shop h3 { width: 35px; } #footer .participate h3 { width: 78px; } #footer .community h3 { width: 85px; } #footer .info h3 { width: 29px; } #footer .newsletter h3 { width: 79px; } #footer .retail h3 { width: 42px; } #footer .offices h3 { width: 50px; } .secondary-content .guys h2 span { background-position: 0 0; } .secondary-content .girls h2 span { background-position: -36px 0; } .secondary-content .color h2 span { background-position: -70px 0; } .secondary-content .price h2 span { background-position: -109px 0; } .secondary-content .size h2 span { background-position: -181px 0; } .secondary-content .shop h2 span { background-position: -146px 0; } #footer .shop h3 span { background-position: 0 -17px; } #footer .participate h3 span { background-position: -35px -17px; } #footer .community h3 span { background-position: -113px -17px; } #footer .info h3 span { background-position: 0 -34px; } #footer .contact h3 span { background-position: -29px -34px; width: 79px; } #footer .retail h3 span { background-position: -108px -34px; } #footer .offices h3 span { background-position: -150px -34px; } /* 2.3 Header -----------------------------------------------------------------------------------------------*/ #header .container { height: 10.5em; } #header h2 { position: absolute; left: -999em; } /* logo */ #header .threadless, #header .threadless span { display: block; overflow: hidden; width: 159px; height: 70px; } #header .threadless { position: relative; top: 22px; float: left;} #header .threadless span { background: url(../../../imgs/def/logo.png) no-repeat; position: absolute; top: 0; left: 0; z-index: 10; } #header a.threadless span { cursor: pointer; } /* cart */ .cart { position: relative; color: #1b325f; float: right; margin-top: 20px; } .cart dt { position: absolute; left: -999em; } .cart dd { text-align: center; } .cart dd.cart-status { position: absolute; right: 7.8em; display: block; height: 34px; width: 37px; overflow: hidden; } .cart dd.cart-status span { background: url(../../../imgs/def/btn_ico_ui.png) no-repeat 0 -52px; display: block; height: 34px; width: 37px; position: absolute; top: 0; left: 0; overflow: hidden; } .cart dd.cart-status.not-empty span { background-position: 0 -52px; } .cart dd.cart-status.empty span { background-position: 0 -87px; } .cart dd.view-cart a, .cart dd.view-cart a span { position: relative; display: block; height: 17px; width: 88px; overflow: hidden; } .cart dd.view-cart a span { background: url(../../../imgs/def/btn_ico_ui.png) no-repeat 0 -35px; position: absolute; top: 0; left: 0; cursor: pointer; } /* search */ .search { clear: right; float: right; margin-top: 14px; } .search fieldset { width: 210px; height: 25px; position: relative; background: url(../../../imgs/def/bg_textfields_and_dropdowns.png) no-repeat 0 -46px; } .search fieldset input#search { border: 0; background: none; width: 155px; padding: 5px 0 3px 8px; overflow: hidden; color: #7d7d7d; font-size: 1em; line-height: 17px; min-height: 17px; } .search fieldset .search-button { position: absolute; right: 0; top: 0; } /* 2.4 Navigation -----------------------------------------------------------------------------------------------*/ #site-navigation { margin: 57px 0 0 3px; float: left; display: inline; } #site-navigation li { margin-right: 6px; display: inline; position: relative; } #site-navigation li, #site-navigation li a, #site-navigation li a span { float: left; position: relative; background: url(../../../imgs/def/bg_network-site-nav.png) no-repeat 0 -70px; height: 31px; z-index: 101; } #site-navigation li a, #site-navigation li a span { overflow: hidden; } #site-navigation li.shop a, #site-navigation li.shop a span { width: 89px; } #site-navigation li.shop a span { position: absolute; top: 0; left: 0; z-index: 10; cursor: pointer; background-position: 0 -70px; } #site-navigation li.shop:hover a span, #site-navigation li.shop-hover a span, #site-navigation li.shop a:hover span { background-position: 0 -101px; } #site-navigation li.participate a, #site-navigation li.participate a span { width: 147px;} #site-navigation li.participate a span { position: absolute; top: 0; left: 0; z-index: 10; cursor: pointer; background-position: -95px -70px; } #site-navigation li.participate:hover a span, #site-navigation li.participate-hover a span, #site-navigation li.participate a:hover span { background-position: -95px -101px; } #site-navigation li.commmunity a, #site-navigation li.commmunity a span { width: 157px; } #site-navigation li.commmunity a span { position: absolute; top: 0; left: 0; z-index: 10; cursor: pointer; background-position: -248px -70px; } #site-navigation li.commmunity:hover a span, #site-navigation li.commmunity-hover a span, #site-navigation li.commmunity a:hover span { background-position: -248px -101px;} #site-navigation li.info a, #site-navigation li.info a span { width: 81px; } #site-navigation li.info a span { position: absolute; top: 0; left: 0; z-index: 10; cursor: pointer; background-position: -411px -70px; } #site-navigation li.info:hover a span, #site-navigation li.info-hover a span, #site-navigation li.info a:hover span { background-position: -411px -101px; } /* site navigation: dropdown */ #site-navigation li .dropdown { position: absolute; left: -999em; top: 30px; width: 166px; padding: 4px 0; background: url(../../../imgs/def/bg_dropdown-bottom.png) no-repeat 0 100%; } #site-navigation li:hover .dropdown, #site-navigation li.hover .dropdown { left: 0; } #site-navigation li .dropdown ul { width: 164px; overflow: hidden; margin: -1px 0 0 0; padding: 6px 0 0 0; border-left: 1px solid #e7e7e7; border-right: 1px solid #e7e7e7; background: #fff; } #site-navigation li .dropdown li { width: 146px; margin: 0; padding: 0 9px 5px 9px; } #site-navigation li .dropdown li, #site-navigation li .dropdown a { background-image: none; height: auto; } #site-navigation li .dropdown a { display: block; width: 146px; } #site-navigation .dropdown .tc { display: block; width: 166px; height: 3px; position: absolute; left: 0; top: 0; background: url(../../../imgs/def/bg_dropdown-top.png) no-repeat; } /* 2.5 Content -----------------------------------------------------------------------------------------------*/ #contentMain h1 { float: left; margin: 2px 0 11px; } /* browse products */ .browse-products { float: right; margin-top: 17px; } .browse-products a { float: left; } .browse-products .view-all { display: inline; margin: 0 12px 0 0; padding: 0 13px 0 0; background: url(../../../imgs/def/border_paging.png) no-repeat 100% 0; } .browse-products .view-photos, .browse-products .view-photos span { float: left; position: relative; font-style: normal; } .browse-products .view-photos span { text-indent: -999em; width: 15px; height: 11px; background: url(../../../imgs/def/ico_camera.png) no-repeat; margin: 2px 2px 0 0; } /**/ .product-navigation, .product-listing dl, .product-listing1 dl, .product-listing-outros dl, .contentMain .section, .browse-products, .back-to-top { font-family: Arial, Helvetica, sans-serif; } .product-listing, .product-listing1, .product-listing-outros, .browse-products { line-height:1.3; } /* browse products: paging */ .paging { float: left; padding-top:4px; } .paging li { float: left; padding: 0 3px 0 7px; background: url(../../../imgs/def/border_paging.png) no-repeat 0 -87px; } .paging .previous.prev-inactive { color:#c4c4c4; background: url(../../../imgs/def/ico_prev-inactive.png) no-repeat 0 50%; padding: 0 7px 0 8px; } .paging .previous a { background: url(../../../imgs/def/ico_prev-active.png) no-repeat 0 50%; padding: 0 7px 0 8px; } .paging .current { color:#7d7d7d; } .paging .first { background: none; } .paging .next { padding: 0 5px 0 0; background: none; padding-right: 0px; } .paging .next a { background: url(/imgs/def/ico_next-active.png) no-repeat 100% 50%; padding: 0 8px 0 8px; } .paging .next.next-inactive { background: url(/imgs/def/ico_next-inactive.png) no-repeat 100% 50%; padding: 0 8px 0 8px; } /* product navigation */ .product-navigation { float: left; width: 800px; margin: 0 0 20px 0; padding: 0 0 10px 0; background: url(../../../imgs/def/border_dots.png) repeat-x left bottom; color: #7d7d7d; } .product-navigation a { display: block; float: left; width: 105px; } .product-navigation .product-categories a { width: 80px; } .product-navigation .products-per-page a { width: 37px; } .product-navigation a:hover { color: #1b325f; } .product-navigation h2, .product-navigation em { display: block; padding: 0 9px; font-weight: normal; font-style: normal; background-image: url(../../../imgs/def/bg_textfields_and_dropdowns.png); background-repeat: no-repeat; cursor: pointer; } .product-navigation h2 { width: 107px; background-position: 0 -23px; } .product-navigation em { width: 39px; } .product-navigation li { float: left; position: relative; line-height: 23px; } .product-navigation li li { float: left; line-height: normal; padding:0px 3px;} .product-collections, .product-awesomeness, .product-categories { display: inline; float: left; width: 125px; margin-right: 10px; background-position: 0 -23px } .products-count { width: 57px; background-position: 0 0; } .products-count, .products-per-page { float: right; } .products-per-page { width: 216px; } .products-per-page h2, .product-navigation h2.title { text-align: right; width: 153px; float: left; margin: 0 6px 0 0; padding: 0; background-image: none; cursor: auto; line-height: 24px; font-weight: normal; } .product-navigation h2.title { width: auto; text-align: left; } /* product navigation: dropdown */ .product-navigation .dropdown { position: absolute; left: 0; top: 21px; z-index: 99; width: 125px; overflow: hidden; padding: 0 0 3px 0; } .product-collections .dropdown, .product-awesomeness .dropdown { background: url(../../../imgs/def/bg_dropdown-bottom-product-navigation-125.png) no-repeat 0 100%; } .products-per-page .dropdown { width: 57px; background: url(../../../imgs/def/bg_dropdown-bottom-product-navigation-57.png) no-repeat 0 100%; } .product-categories .dropdown { float: left; width: 287px; background: url(../../../imgs/def/bg_dropdown-bottom-product-navigation-287.png) no-repeat 0 100%; } .product-navigation .dropdown ul { float: none; overflow: hidden; width: 123px; padding: 7px 0 2px 0; border-left: 1px solid #c4c4c4; border-right: 1px solid #c4c4c4; background: #fff; } .products-per-page .dropdown ul { width: 55px; } .product-categories .dropdown ul { border: none; width: 93px; } .product-categories .dropdown { padding: 0 0 2px; } .product-categories .dropdown .multi-column { width: 287px; float: left; overflow: hidden; padding: 0; background: #fff url(../../../imgs/def/bg_dropdown-top-product-navigation-287.png) no-repeat; } .product-categories .dropdown .multi-column ul { float: left; margin: 3px 1px 0; } .product-navigation li { position: relative; } .product-navigation li .dropdown { left: -999em; position: absolute; } .product-navigation li:hover .dropdown, .product-navigation li.hover .dropdown { left: 0; } .product-navigation li .dropdown a { display: block; padding:2px; padding:2px 6px 3px 6px; } .product-navigation li .dropdown a:hover { background:#3D89C8; color:#FFF; text-decoration:none; } /* product listing */ .product-listing { clear: both; } .product-listing h3, .product-listing .designed-by { font-family: Verdana, Georgia, Times, serif; font-weight:normal; } .product-listing h3 { font-size: .9em; } .product-listing h3 a { color: #0068B4; }/*COR DO TITULO DA FIGURA - 1c3360*/ .product-listing h3 a:hover { color: #000; }/*COR DO TITULO DA FIGURA - 1c3360*/ .product-listing h3 a span { font-size: 1.2em; position: absolute; padding: 13px 0 0;} .product-listing .designed-by { font-size: .85em; font-style: italic; color:#666; } .product-listing .designed-by a { font-size: 1em; font-style: normal; } .product-listing img { position: absolute; left: 0; top: 0; z-index: 1; } .product-listing li { float: left; position: relative; width: 226px; margin: 0 0 37px 20px; padding: 305px 0 0; }/*********ALTURA ENTRE AS FOTOS*********/ .product-listing .first { margin-left: 0; clear: left; } /* product listing: price info */ .product-listing .info { position: absolute; left: 0; top: 286px; z-index: 2; height: 21px; padding: 2px 2px 2px 6px; background-color: #3d89c8; } /*********ALTURA QUADRADO PREÇO EM CIMA DA CAMISA*********/ .product-listing .info dl { display: inline; padding-top:1px; float: left; margin-right: 0px; font-size: 1.2em; font-weight: bold; color: #fff; } .product-listing .new .style dd { text-transform: uppercase; } .product-listing .info dl dd { display: inline; float: left; margin-right: 4px; } .product-listing .sale { background:#F63B8A; } .product-listing .sale dl { color: #fff; } .product-listing .info dl .fullPrice { color:#500000; text-decoration:line-through; font-weight:normal; } /* back to top */ .back-to-top { float: left; margin-top: 17px; } /* product listing1 */ .product-listing1 { clear: both; } .product-listing1 h3, .product-listing1 .designed-by { font-family: Verdana, Georgia, Times, serif; font-weight:normal; } .product-listing1 h3 { font-size: .9em; padding-bottom:10px;} .product-listing1 h3 a { color: #ff0000; }/*COR DO TITULO DA FIGURA - 1c3360*/ .product-listing1 h3 a:hover { color: #000; }/*COR DO TITULO DA FIGURA - 1c3360*/ .product-listing1 h3 a span { font-size: 1.2em; position: absolute; padding: 13px 0 0;} .product-listing1 .designed-by { font-size: .85em; font-style: italic; color:#666; } .product-listing1 .designed-by a { font-size: 1em; font-style: normal; } .product-listing1 img { position: absolute; left: 0; top: 0; z-index: 1; } .product-listing1 li { float: left; position: relative; width: 144px; margin: 0 0 27px 20px; padding: 191px 0 0; }/*********ALTURA ENTRE AS FOTOS*********/ .product-listing1 .first { margin-left: 0; clear: left; } /* product listing: price info */ .product-listing1 .info { position: absolute; left: 0; top: 178px; z-index: 2; height: 16px; padding: 2px 2px 2px 6px; background-color: #3d89c8; } /*********ALTURA QUADRADO PREÇO EM CIMA DA CAMISA*********/ .product-listing1 .info dl { display: inline; padding-top:1px; float: left; margin-right: 0px; font-size: .9em; font-weight: bold; color: #fff; } .product-listing1 .new .style dd { text-transform: uppercase; } .product-listing1 .info dl dd { display: inline; float: left; margin-right: 4px; } .product-listing1 .sale { background:#F63B8A; } .product-listing1 .sale dl { color: #fff; } .product-listing1 .info dl .fullPrice { color:#500000; text-decoration:line-through; font-weight:normal; } /* product listing outros produtos*/ .product-listing-outros { clear: both; } .product-listing-outros h3, .product-listing-outros .designed-by { font-family: Verdana, Georgia, Times, serif; font-weight:normal; } .product-listing-outros h3 { font-size: .9em; } .product-listing-outros h3 a { color: #ff0000; }/*COR DO TITULO DA FIGURA - 1c3360*/ .product-listing-outros h3 a:hover { color: #000; }/*COR DO TITULO DA FIGURA - 1c3360*/ .product-listing-outros h3 a span { font-size: 1.2em; position: absolute; padding: 13px 0 0;} .product-listing-outros .designed-by { font-size: .85em; font-style: italic; color:#666; } .product-listing-outros .designed-by a { font-size: 1em; font-style: normal; } .product-listing-outros img { position: absolute; left: 0; top: 0; z-index: 1; } .product-listing-outros li { float: left; position: relative; width: 226px; margin: 0 0 0 20px; padding: 195px 0 0; }/*********ALTURA ENTRE AS FOTOS*********/ .product-listing-outros .first { margin-left: 0; clear: left; } /* product listing: price info */ .product-listing-outros .info { position: absolute; left: 0; top: 286px; z-index: 2; height: 21px; padding: 2px 2px 2px 6px; background-color: #3d89c8; } /*********ALTURA QUADRADO PREÇO EM CIMA DA CAMISA*********/ .product-listing-outros .info dl { display: inline; padding-top:1px; float: left; margin-right: 0px; font-size: 1.2em; font-weight: bold; color: #fff; } .product-listing-outros .new .style dd { text-transform: uppercase; } .product-listing-outros .info dl dd { display: inline; float: left; margin-right: 4px; } .product-listing-outros .sale { background:#F63B8A; } .product-listing-outros .sale dl { color: #fff; } .product-listing-outros .info dl .fullPrice { color:#500000; text-decoration:line-through; font-weight:normal; } /* 2.6 Sidebar -----------------------------------------------------------------------------------------------*/ .secondary-content .section { width: 144px; overflow: hidden; background: #fff url(../../../imgs/def/border_dots.png) repeat-x left bottom; padding: 9px 0 11px;} .secondary-content .section h2 { margin-bottom: 8px; } .secondary-content .section ul { margin-left: -5px; width: 149px; overflow: hidden;} .secondary-content .section li { float: left; margin-bottom: 5px; } .secondary-content .section li a { float: left; background: url(../../../imgs/def/btn_ico_ui.png) no-repeat 0 -120px; width: 32px; height: 23px; position: relative; overflow: hidden; text-align: center; line-height: 23px; margin-left: 5px; } .secondary-content .section li a:hover, .secondary-content .section li.active a {background-position: 0 -143px; color: #fff; text-decoration:none; } .secondary-content .section li.unavailable a { color: #d2d2d2; text-decoration:none; background-position: -32px -120px; } .secondary-content .section li.unavailable.active a { color:#666; background-position: -32px -143px; } .secondary-content .section li.salePrices a { color: #ed3587; background-position: -64px -120px; } .secondary-content .section li.salePrices a:hover, .secondary-content .section li.active.salePrices a { color: #ed3587; background-position: -64px -143px; } .secondary-content .section.shop li.active a, .secondary-content .section.shop li.active a:hover { color: #293f69; } .secondary-content .section li a span, .secondary-content .section li a em { width: 24px; height: 15px; display: block; overflow: hidden; position: absolute; top: 3px; left: 3px; cursor: pointer; border:1px solid #fff; } .secondary-content .section li.black a span { background-color: #000; } .secondary-content .section li.greys a span { background-color: #c1c1c1; } .secondary-content .section li.creams a span { background-color: #edebd6; } .secondary-content .section li.white a span { background-color: #f5f5f5; } .secondary-content .section li.blues a span { background-color: #3c89c8; } .secondary-content .section li.purples a span { background-color: #662d90; } .secondary-content .section li.reds a span { background-color: #cc242a; } .secondary-content .section li.greens a span { background-color: #048844; } .secondary-content .section li.browns a span { background-color: #885533; } .secondary-content .section li.oranges a span { background-color: #ff7722; } .secondary-content .section li.pinks a span { background-color: #ff98c8; } .secondary-content .section li.yellows a span { background-color: #faef2f; } .secondary-content .section.price { border-top: 3px solid #cfe2f1; } .secondary-content .section.size, .secondary-content .section.color, .secondary-content .section.girls { padding-bottom: 25px; background: none; } .secondary-content .section.shop { border-top: 3px solid #cfe2f1; padding-bottom: 5px; } .secondary-content .section.prints { border-top: 0px solid #cfe2f1; padding-bottom: 5px; } .secondary-content .section.shop ul { margin: 0; padding: 8px 0 0px; width: 144px; font-family: Georgia, Times, serif; background: #fff url(../../../imgs/def/border_dots.png) repeat-x left top; } .secondary-content .section.shop li { float: none; margin: 0; } .secondary-content .section.shop li a { float: none; background: none; margin: 0; line-height: 1.5; } .secondary-content .section.shop li a:hover { color: #3d89c8; text-decoration:underline; } .secondary-content .section.shop li.sale a { color: #ff0e77; text-transform: uppercase; } .secondary-content .section.ad { background: none; padding: 30px 0 0; } /* 2.7 Footer ----------------------------------------------------------------------------------------------- MOVED TO def.css */ /* 2.7 Toolbar -----------------------------------------------------------------------------------------------*/ /* network links */ .network-links, .network-links li { float: left; height: 35px;} .network-links { margin-top: 4px;} .network-links li a, .network-links li a span { position: relative; float: left; height: 35px; overflow: hidden; } .network-links li a span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; cursor: pointer; background: url(../../../imgs/def/bg_network-site-nav.png) no-repeat 0 0; } .network-links li.threadless a, .network-links li.threadless a span { width: 107px; } .network-links li.threadless a span { background-position: 0 0; } .network-links li.typetoes a, .network-links li.typetoes a span { width: 104px; } .network-links li.typetoes a span { background-position: -107px -35px; } .network-links li.select a, .network-links li.select a span { width: 75px; } .network-links li.select a span { background-position: -212px -35px; } .network-links li.kids a, .network-links li.kids a span { width: 70px; } .network-links li.kids a span { background-position: -287px -35px; } /* site utilities */ .site-utilities { float: right; margin-top: 4px; } .site-utilities li, .site-utilities a, .site-utilities a:link, .site-utilities a:visited, .site-utilities a:active { float: left; color: #d1d1d1; line-height: 35px; position: relative; } .site-utilities a { margin-left: 17px; display: inline; } .site-utilities li#join-us { width: 127px; position: relative; z-index: 99; } .site-utilities li#join-us a { width: 127px; height: 35px; position: relative; text-align: center; overflow: hidden; } .site-utilities li#join-us a span { position: absolute; top: 0; left: 0; z-index: 10; cursor: pointer; background: url(../../../imgs/def/btn_ico_ui.png) no-repeat; width: 127px; height: 35px; } .site-utilities strong { font-weight: normal; } /* site utilities: language options */ .site-utilities li.language-options { padding-right: 10px; background:url(../../../imgs/def/ico_arrow-down.png) no-repeat 100% 50%; } .site-utilities li.language-options ul { position: absolute; left: -999em; top: 2.8em; background: #595959; width: 66px; padding-bottom: 8px; } .site-utilities li.language-options:hover ul, .site-utilities li.language-options.language-options-hover ul { left: -8px; } .site-utilities li.language-options a, .site-utilities li.language-options a:link, .site-utilities li.language-options a:visited, .site-utilities li.language-options a:active { margin-left: 0; float: none; line-height: 1.8; line-height: 2; padding: 0 10px; display: block; } /* join us dropdown message*/ .site-utilities li#join-us div { position: absolute; left: -999em; top: 35px; font-family: Georgia, Times, serif; width: 127px; line-height: 1.4; font-size: 1.083em; background-color: #d33a7c; color: #fff; } .site-utilities li#join-us:hover div, .site-utilities li#join-us.join-us-hover div { left: 16px; } .site-utilities li#join-us p { padding: 10px 8px; background: url(../../../imgs/def/bg_join-us-dropdown.png) no-repeat bottom left; } .selected { color: #3D89C8; }