body { margin: 0; padding: 0; font: 62.5%/1.26 'Trebuchet MS', Arial, sans-serif; text-align: center; background: #251c37 url('../images/layout/body.gif') no-repeat center -200px; color: #919BA4; } body#country-select, body#language-select { background: #221b32 url('../images/layout/language-select.gif') no-repeat center top; } body.popup { background: #fbf9ec; text-align: left; } a { color: #738ec8; text-decoration: none; } a:hover { text-decoration: underline; } input, textarea, select { margin: 0; padding: 0; font-size: 100%; font-family: Arial, Helvetica, sans-serif; } fieldset { margin: 0; padding: 0; border: none; } legend { margin: 0; padding: 0; } img { margin: 0; border: 0; } form { margin: 0; } p, h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; } ul.reset, ul.reset li { margin: 0; padding: 0; } ul.reset li { list-style: none; } table { border-collapse: collapse; } table, th, td { margin: 0; padding: 0; } .hr hr { display: none; } pre { margin: 1.5em; padding: 1em; background-color: #ffeeee; border: 1px solid red; font-family: 'Courier New', Courier, monospace; font-size: 120%; color: #333; } .error { color: red; } /* center */ .center { position: relative; margin: 0 auto; width: 1000px; overflow: hidden; text-align: left; z-index: 2; } /* content-container*/ #content-container { position: relative; height: 460px; /*538*/ background-color: #fbf9ec; } body#country-select #content-container, body#language-select #content-container { background-color: transparent; } /* content */ #content-left, #content-right { float: left; position:relative; z-index: 2; overflow: hidden; } /* content-left */ #content-left { width: 396px; min-height: 460px; } /* content-right */ #content-right { width: 504px; /*764*/ } /* flash-container */ #flash-container { height: 460px; } /* footer */ #footer { position: relative; z-index: 4; height: 280px; /*280-61*/ } #footer a.logo img { position: absolute; top: 7px; left: 354px } #footer .center { overflow: visible; overflow: hidden; } /* too small background fix */ #content-container, #footer { min-width: 1000px; } body.popup #content-container { width: 100%; min-width: 100%; } /* about pages layout */ body.about #content-left, body.about #content-left div { width: 396px; /*556*/ overflow: hidden; } body.about #content-left .aboutpage-1-image { background: url('../images/content/about_02.jpg') no-repeat 0 10px; } body.about #content-left .aboutpage-2-image { background: url('../images/content/about_02.jpg') no-repeat 0 10px; } body.about #content-left .aboutpage-3-image { background: url('../images/content/about_03.jpg') no-repeat 0 10px; } body.about #content-left .aboutpage-4-image { background: url('../images/content/about_04.jpg') no-repeat 0 10px; } body.about #content-right { width: 600px; /*664*/ } /* find nydj */ body.find-nydj #content-left { float: left; padding-top: 10px; width: 260px; min-height: 348px; /*538*/ } body.find-nydj #content-right { float: right; width: 730px; /*978*/ height: 460px; } /* collection categories */ body.collection-categories #content-container .center { width: 100%; } body.collection-categories #content-left { display: none; } body.collection-categories #content-right { width: 100%; overflow: hidden; /* min-height: 460px; /* */ text-align: center; } /* collection subcategories */ body.collection-subcategories #content-container .center { width: 100%; } body.collection-subcategories #content-left { float: none; width: 100%; height: 70px; min-height: 70px; } body.collection-subcategories #content-right { width: 100%; overflow: hidden; /* min-height: 390px; /* 460 - 70 */ text-align: center; } /* news-campaign-overview */ body.news-campaign-overview #content-container .center { width: 100%; } body.collection-subcategories #content-left { float: none; width: 100%; height: 70px; min-height: 70px; } body.news-campaign-overview #content-right { width: 100%; overflow: hidden; /* min-height: 390px; /* 460 - 70 */ text-align: center; } /* collection detail */ #collection-detail #content-left { width: 650px; /*860*/ } #collection-detail #content-right { float: right; width: 340px; } #collection-detail #content-right .paragraph-container { width: 330px; /*340*/ padding: 50px 0 0 0; } /* try your jeans */ body#try-ndyj #content-left { display: none; } body#try-ndyj .paragraph-container { width: 385px; /*385*/ padding: 165px 0 0 210px; } body#try-ndyj #content-right { width: 891px; height: 460px; background: url('../images/content/try-your-jeans.jpg') no-repeat right 20px; } /* country select */ body.country-select, body.language-select { background: #221b32 url('../images/layout/gradient-selectpage.jpg') center center no-repeat; } body.country-select #content, body.language-select #content { width: 100%; text-align:center; } /* reset headers */ h1, h2, h3, h4, h5, h6, p.header1, p.header2 { font-size: 100%; margin: 0; padding: 0; font-weight: normal; } h1 { font-family: 'Times New Roman', serif; color: #352a4e; font-size: 20px; } h2 { font-size: 13px; font-weight: bold; } /* headers */ .header1 { margin: 0 0 10px 0; font-family: 'Times New Roman', serif; font-size: 200%; text-transform: uppercase; color: #352a4e; } .header2 { margin: 0 0 15px 0; font-family: 'Times New Roman', serif; font-size: 120%; text-transform: uppercase; color: #352a4e; } .header2 a:hover { text-decoration: none; } /* paragraph container */ .paragraph-container { padding-top: 100px; width: 378px; } #contact .paragraph-container { padding-top: 20px; } #newsletter .paragraph-container { padding-top: 58px; } /* paragraph */ .paragraph-container p { margin: 0 0 25px 1px; padding: 0; font-size: 140%; line-height: 20px; color: #919ba4; } #contact .paragraph-container p { font-size: 130%; } .paragraph-container p.error { color: red; } /* tables */ table { margin: 5px 0px 0px 0px; font-size: 120%; } /* lists */ .paragraph-container ul, ol { padding-left: 20px; padding-bottom: 20px; } .paragraph-container ul li, .paragraph-container ol li { font-size: 140%; line-height: 18px; padding: 3px 0 2px; margin-left: 30px; } /* button */ .button a { display: block; float: left; clear: both; margin-top: 5px; height: 20px; line-height: 20px; padding: 0 8px 0 16px; font-size: 120%; text-transform: uppercase; text-decoration: none; color: #feffff; background: #919ba4 url('../images/form/button-arrow.gif') no-repeat 9px 50%; cursor: pointer; } .button a cufon { position: relative; top: -1px; } .button a:hover { text-decoration: none; } /* view buttons */ .button a.view { float: left; margin: 0 6px 22px 0; } /* back to overview button */ .button a.back { margin-top: 45px; background-image: url('../images/form/button-arrow-left.gif'); background-position: 8px 50%; } /* about pages */ .about div.paragraph-container { padding-left: 36px; padding-top: 60px; /*245*/ width: 500px; } img.lift-tuck-logo { display: block; margin: -40px 0 20px 0; } /* compensate for image size */ .about div.about-2 { padding-top: 100px; } /* terms and conditions */ body.popup .paragraph-container { padding: 30px 38px 30px 38px; width: 456px; } body.popup .header1 { font-size: 240%; } body.popup .paragraph-container p, body.popup .paragraph-container ul li, body.popup .paragraph-container ol li { color: #352a4e; font-size: 120%; line-height: 17px; } /* Contact pages */ #address-container { position: absolute; left: 125px; top: 56px; width: 200px; } #address-container p { font-size: 110%; line-height: 17px; } #contact .paragraph-container p { margin: 0px 0px 10px 0px; } /* Newsletter */ #newsletter .paragraph-container p { margin: 0px 0px 10px 0px; } /* Where to find */ #find-nydj div.paragraph-container { padding: 0px; margin: 0 0 0 30px; width: 236px; } #find-nydj div.paragraph-container p { padding: 2px 0; font-size: 130%; line-height: 18px; } /* Where to find - search results */ .search-results { margin: 0 0 0 30px; position: relative; width: 190px; overflow: hidden; visibility: hidden; } .search-results p { font-size: 120%; line-height: 17px; margin: 0 0 20px 0; } .search-results p span.title { display: block; font-weight: bold; } /* article detail page */ .collection .paragraph-container { width: 280px; } .article-details p { margin: 0; } .article-details p.article-info { margin: 0 0 10px 0; } .article-details div.colors { margin: 0 0 8px 0; } .article-details div.page-nav { padding-top: 30px; clear: both; } /* collection detail page - content left */ #collection-detail #content-left { text-align: right; } /* country & language select page */ .country-select .header1, .language-select .header1 { color: #faf9ec; font-size: 160% ; } .country-select .logo, .language-select .logo { margin: 100px 0 33px 0; } /* siblings */ #siblings-container { position: absolute; bottom: 30px; left: 20px; width: 190px; z-index: 100; } /* alternatives list */ ul.siblings { width: auto; overflow: hidden; } ul.siblings li { float: left; margin-bottom: 4px; } ul.siblings li a { display: block; width: auto; height: 153px; text-align: center; border: 1px dashed #FAF9EC; } ul.siblings li a img { margin: 5px 2px 0; } ul.siblings li a:hover { text-decoration: none; color: #919BA4; } ul.siblings li.sel a { border: 1px dashed #CCCCCC; } /* scroll */ #collection-scroller { display: block; position: relative; margin: 10px auto; width: 1000px; height: 9px; z-index: 20; } #collection-scroller #track { position: absolute; height: 6px; top: 0; z-index: 26; } #collection-scroller #track img { display: block; height: 6px; } #collection-scroller #drag { position: absolute; top: 0px; z-index: 27; cursor: pointer; } #collection-scroller #drag img { display: block; } /* js-slider-bar */ .js-scrollable-content { position: relative; padding: 0 0 0 0; width: 100%; overflow: hidden; } body.collection-subcategories .js-scrollable-content { padding: 0; } body.find-nydj .js-scrollable-content { height: 220px; } .js-slider-bar { position: relative; margin: 0 auto; width: 496px; height: 9px; overflow: hidden; background: url('../images/content/slider-horizontal-bar.gif') no-repeat; text-align: left; } .js-slider-bar .js-slider-knob { position: absolute; left: 0; top: 0; width: 218px; height: 9px; overflow: hidden; background: url('../images/content/slider-horizontal-knob.gif') no-repeat; cursor: pointer; } /* js-vertical-slider-bar */ .js-vertical-slider-bar { position: absolute; right: 15px; width: 9px; /* old?! height: 210px; */ height: 248px; overflow: hidden; background: url('../images/content/slider-vertical-bar.gif') no-repeat; } .js-vertical-slider-bar .js-slider-knob { position: absolute; left: 0; top: 0; width: 9px; height: 87px; overflow: hidden; background: url('../images/content/slider-vertical-knob.gif') no-repeat; cursor: pointer; } /* google-maps-container */ .google-maps-container { width: 730px; /*978*/ height: 460px; } .google-maps-hover { position: absolute; } .google-maps-hover p { padding: 0 7px; border-left: 1px dotted #514c68; background: #34294d; white-space: nowrap; font-size: 12px; line-height: 16px; color: #faf9ec; } .google-maps-hover p span.title { display: block; padding: 0 10px; font-size: 13px; line-height: 29px; text-transform: uppercase; } .google-maps-hover p span.text { display: block; padding: 4px 10px 10px 10px; } .google-maps-hover p span.text a { display: block; padding: 4px 0 0 0; } .google-maps-hover a.close { position: absolute; top: 0; right: -15px; display: block; width: 15px; height: 15px; background: #34294d; border-left: 1px dotted #514c68; text-align: center; font-size: 13px; line-height: 14px; color: #faf9ec; text-decoration: none; } /* article-detail-image */ #article-detail-image { position: relative; height: 460px; overflow: hidden; } #article-detail-image img { position: absolute; top: 40px; right: 0px; } /* tooltip */ span.tooltip { position: absolute; z-index: 200; visibility: hidden; padding: 3px 10px; background-color: #faf9ec; font-size: 12px; color: #352a4e; text-transform: uppercase; } /* multi page nav about */ a.slider-arrow, .about a#nav-next, .about a#nav-prev { display: block; float: left; width: 21px; height: 460px; background-repeat: no-repeat; background-position: 0 -460px; background-image: url('../images/content/arrow-left.gif'); text-indent: -9999px; overflow: hidden; outline: 0; } a.slider-arrow { height: 395px; } .about a#nav-next { float: right; margin-left: 30px; background-image: url('../images/content/arrow-right.gif'); } a.slider-arrow:hover, .about a#nav-next:hover, .about a#nav-prev:hover { background-position: 0 0; } /* slider-arrows */ a.slider-arrow { position: absolute; top: 0; float: none; width: 33px; z-index: 100; } a.slider-arrow-left { left: 0; background-image: url('../images/articles/arrow-left.png'); } a.slider-arrow-right { right: 0; background-image: url('../images/articles/arrow-right.png'); } /* dealer-message-lightbox */ #dealer-message-lightbox { padding: 10px; width: 400px; text-align: center; border: 1px solid #FBF9EC; } #dealer-message-lightbox .message-container { margin: 40px 0 55px 0; } #dealer-message-lightbox p { font-size: 12px; color: #919BA4; margin: 0 0 20px 0; } #dealer-message-lightbox a.js-lightbox-close { position: absolute; top: -9px; right: -9px; display: block; width: 18px; height: 18px; overflow: hidden; outline: 0; text-indent: -999em; text-decoration: none; background: transparent url('../images/lightbox/close.gif') no-repeat 0px 0px; } a:hover.js-lightbox-close { text-decoration: none; } .message-container a { padding: 0 0 0 20px; background: transparent url('../images/content/icoon-pdf.gif') no-repeat 0px 0px; } /* social media */ .facebook-like { float: left; position: relative; top: 0; width: 100px; height: 27px; overflow: hidden; } .facebook-like iframe { position: absolute; top: -44px; left: -58px; width: 292px; height: 255px; overflow: hidden; border: none; } ul#nav-footer li.social-media a { float: left; position: relative; top: 0; padding: 2px 2px 0 0; } ul#nav-footer li.social-media .wrapper { padding: 0 0 0 7px; float: left; } .addthis_toolbox { padding: 20px 0 0 0; } .addthis_counter addthis_pill_style { margin: 0 4px 0 0; } .addthis_button_facebook_like { padding-left: 6px !important; } .addthis_counter.addthis_pill_style, .atc_s, .addthis_counter a.atc_s { background-image: url(../images/layout/share.gif) !important; background-repeat: no-repeat !important; } #home_buy_header_de { background-image: url(../images/content/btn_wheretobuy_de.jpg); background-repeat: no-repeat; position: absolute; z-index: 99; top: 154px; right: 100px; height: 36px; width: 224px; } #home_buy_button_de { background-image: url(../images/content/btn_wheretobuy_bg_de.jpg); background-repeat: no-repeat; position: absolute; z-index: 99; top: 190px; right: 0; height: 150px; width: 425px; } #home_buy_button { display: none; } #home_buy_button_de img { float: left; } html, body { height: 100%; } #home body { background-position: center top; } /* set home message (no flash) */ #home #flash-container .header1 { color: white; } #home #flash-container .paragraph-container { width: auto; padding: 125px 250px; } #home #flash-container .paragraph-container p.button a { font-size: 100%; } /* set logo with message */ #home #flash-container { background: url('../images/layout/message.gif') no-repeat center 630px; } body#home.javascript #flash-container { background: none; } #home #flash-container { height: 1000px; } #home #content-container { height: 559px; background: transparent; } #home #footer { background: transparent; } /* layout */ #home #main-wrapper { margin: 0 0 -40px; min-height: 100%; } #home #navigation-container { background: url('../images/menu/navigation-container-home.png') no-repeat center top; } #home #main-wrapper #push { clear: both; height: 40px; min-height: 40px; } #home #footer, #home #footer .center.footer { height: 40px; } #home #footer .center.footer a.logo img { position: absolute; visibility: hidden; } #home #footer ul#nav-footer { padding-top: 15px; } /* slider */ ul.slider { position: absolute; overflow: hidden; } ul.slider li { float: left; position: relative; } li a.slider-element { display: block; padding: 0 20px; width: 200px; outline: 0; text-align: center; } li a.slider-element:hover { text-decoration: none; } /* image */ li a.slider-element img { display: block; margin: 0 auto; } /* texts */ li a.slider-element span { display: block; } /* title */ li a.slider-element span.title { font-family : 'Times New Roman', serif; font-weight: bold; color: #352a4e; text-transform: uppercase; } /* description */ li a.slider-element span.description { display: none; padding-top: 5px; font-size: 120%; line-height: 14px; color: #919ba4; } /* show description on hover */ li a.slider-element:hover span.description { display: block; } /* collection-categories */ .collection-categories ul.slider { height: 395px; /*border: 1px solid purple;*/ } .collection-categories ul.slider li a.slider-element { padding-top: 15px; height: 380px; } /* title */ .collection-categories ul.slider li a.slider-element span.title { padding-top: 5px; font-size: 180%; } /* collection-subcategories */ .collection-subcategories ul.slider { height: 325px; /*border: 1px solid purple;*/ } .collection-subcategories ul.slider li a.slider-element { height: 325px; /*border-right: 1px solid white;*/ /*background-color: pink;*/ } /* title */ .collection-subcategories ul.slider li a.slider-element span.title { padding-top: 0px; font-size: 140%; } /* rollover details */ ul.slider li .rollover-details { /*border: 1px solid white;*/ position: absolute; top: 30px; right: 0px; visibility: hidden; width: 56px; height: 240px; z-index: 100; } /* hover state */ ul.slider li:hover .rollover-details, ul.slider li.sel .rollover-details { visibility: visible; } /* detail-overlay AND detail-image */ ul.slider li .rollover-details a.detail-image, ul.slider li .rollover-details .detail-overlay { position: relative; z-index: 10; display: block; padding: 3px 0 0 0; width: 56px; height: 56px; /*overflow: visible;*/ /*background: #fbf9ec;*/ } /* = ul.slider li .rollover-details .detail-overlay.sel */ ul.slider li .rollover-details div.sel { z-index: 20; } ul.slider li .rollover-details a.detail-image:hover, ul.slider li .rollover-details div.sel { /*background: white;*/ } /* border */ ul.slider li .rollover-details span.border { position: absolute; top: 0; left: 0; display: block; padding: 1px; background: transparent url('../images/content/category-detail-mask.gif') repeat; border: 1px solid #FBF9EC; } /* border hover state */ ul.slider li .rollover-details a.detail-image:hover span.border, ul.slider li .rollover-details div.sel span.border { top: -28px; left: -28px; z-index: 100; } /* mask */ ul.slider li .rollover-details span.border span.mask { position: relative; display: block; border: 1px solid #fbf9ec; width: 50px; height: 50px; overflow: hidden; } /* mask hover state */ ul.slider li .rollover-details a.detail-image:hover span.border span.mask, ul.slider li .rollover-details div.sel span.border span.mask { width: 106px; height: 106px; background: red; } /* image */ ul.slider li .rollover-details span.border span.mask img { position: absolute; left: -28px; top: -28px; display: block; } /* image hover state */ ul.slider li .rollover-details a.detail-image:hover span.border span.mask img, ul.slider li .rollover-details div.sel span.border span.mask img { left: 0; top: 0; } /* colors labels */ div.colors { padding: 2px 0 0 3px; width: 52px; overflow: hidden; } div.colors a { display: block; margin-right: 2px; float: left; width: 10px; height: 10px; overflow: hidden; } /* add extra border on light colors */ div .colors a.border { border: 1px solid #ccc; width: 8px; height: 8px; } /* reset */ ul li a { outline: 0; } /* navigation-container */ #navigation-container { position: relative; background: url('../images/menu/navigation-container.gif') repeat-x 0 0; z-index: 10; height: 32px; } #navigation-container .center { overflow: hidden; } /* nav-main */ ul#nav-main { position: relative; float: left; left: 50%; margin: 0 auto; } ul#nav-main li { position: relative; float: left; right: 50%; } ul#nav-main li a.main { float: left; display: block; padding: 0 9px 0 8px; height: 32px; line-height: 32px; font-family: 'Times New Roman', Serif; font-size: 16px; color: #919ba4; text-transform: uppercase; } ul#nav-main li a.main:hover { color: #faf9ec; text-decoration: none; } ul#nav-main li.sel a.main { color: #faf9ec; background: url('../images/menu/nav-main-arrow.gif') no-repeat center top; } /* dotted border reset */ ul#nav-main li a { outline: 0; } /* navigation logo */ ul#nav-main li.home { background: url('../images/menu/navigation-logo.gif') no-repeat 0 6px; padding-left: 35px; /*27+8*/ } /* nav-sub-container */ #navigation-sub-container { position: absolute; width: 100%; bottom: 0; left: 0; z-index: 10; height: 0; overflow: hidden; } #navigation-sub-container.active { height: 29px; background: url('../images/menu/nav-sub.gif') repeat-x; } /* nav-sub */ ul.nav-sub { margin: 0 auto; width: 1000px; overflow: hidden; text-align: center; } ul.nav-sub li { display: inline; float: none; } ul.nav-sub li a { display: inline; margin: 0 0 0 1px; padding: 0 7px; font-family: 'Times New Roman', serif; line-height: 28px; font-size: 16px; font-weight: normal; color: #919ba4; text-transform: uppercase; text-decoration: none; cursor: pointer; } ul.nav-sub li a:hover, ul.nav-sub li.sel a { color: #352a4d; font-weight: normal; } ul#nav-main li.sel li a { background: none; } .news-campaign-overview .nav-sub, .news-campaign-detail .nav-sub, .press-overview .nav-sub, .press-detail .nav-sub { position: absolute; left: 353px; } .collection-detail .nav-sub, .collection-subcategories .nav-sub { position: absolute; left: -25px; } .article-overview .nav-sub, .article-detail .nav-sub { position: absolute; left: 20px; } /* nav-footer */ /* auto center footer */ #nav-footer-wrapper { float: right; position: relative; left: -50%; text-align: left; } #nav-footer-wrapper ul#nav-footer { position: relative; left: 50%; } #nav-footer-wrapper ul#nav-footer li { float:left; position:relative; } /* normal styles */ ul#nav-footer { padding: 126px 0 0 0; text-align: center; } ul#nav-footer li { /*display: inline;*/ margin-top: 9px; border-right: 1px solid #544d61; } ul#nav-footer li.social-media { margin: 0; border-right: 0; } ul#nav-footer li a { padding: 0 7px; font-family: Verdana, sans-serif; font-size: 10px; line-height: 10px; color: #534b5f; } ul#nav-footer li a:hover { text-decoration: none; color: #999; } ul#nav-footer li.sel a { color: #999; } /* nav-sub */ #content-left ul.nav-sub { margin: 20px 0 0 80px; width: 100%; clear: both; } #content-left ul.nav-sub li { float: left; font-size: 250%; } #content-left ul.nav-sub li a { padding-right: 18px; display: block; font-size: 24px; color: #919ba4; font-family : 'Times New Roman', serif; text-transform: uppercase; } #content-left ul.nav-sub li a:hover, #content-left ul.nav-sub li a:active, #content-left ul.nav-sub li.sel a { text-decoration: none; color: #352a4e; } /* nav-lang */ #nav-lang-container { float: left; width: 100%; position: relative; border-bottom: 1px dotted #504b67; border-top: 1px dotted #504b67; height: 29px; margin: auto; z-index: 10; } #nav-lang-container ul { position: relative; left: 50%; float: left; clear: left; text-align: center; } #nav-lang-container ul li { position: relative; right: 50%; float: left; font-size: 16px; } #nav-lang-container ul li a { display: block; margin: 0 0 0 1px; padding: 0 10px; color: #919ba4; font-family: Times New Roman, Serif; line-height: 29px; font-weight: bold; text-transform: uppercase; text-decoration: none; } #nav-lang-container ul li a:hover, #nav-lang-container ul li a.active, #nav-lang-container ul li a.active:hover, #nav-lang-container ul li.sel a { color: #fff; font-weight: bold; } #nav-lang-container ul li.sel a { background: url('../images/menu/nav-main-arrow.gif') top center no-repeat; } /* form */ form { width: 600px; } form legend{ display: none; } form .fieldcontainer{ clear: both; margin: 0 0 6px 0; overflow: hidden; width: 600px; } form .fieldcontainer label { float: left; width: 217px; font-size: 130%; line-height: 18px; padding-top: 2px; } form .fieldcontainer input { float: left; width: 165px; /* 168px */ height: 20px; /* 20px */ font-size: 140%; padding: 2px 0 0 4px; } /* textarea */ form .textarea label { float: none; display: block; padding: 2px 0 4px 0; } form .fieldcontainer textarea { width: 385px; height: 77px; font-size: 140%; float: left; } form input, form select, form textarea { border-color: #adb4bb; border-style: solid; border-left-width: 2px; border-top-width: 2px; border-right-width: 0px; border-bottom-width: 0px; } /* checkbox */ form .fieldcontainer.singlecheckbox input { height: 13px; width: 13px; margin: 3px 7px 0 0; border: 0px; } form .fieldcontainer.singlecheckbox label { width: 365px; font-size: 110%; line-height: 14px; } /* select */ form .fieldcontainer select { width: 168px; height: 20px; font-size: 140%; } /* button versie 1 .submit-container { background: #919ba4 url('../images/form/button-arrow.gif') no-repeat 9px 6px; width: 71px; height: 20px; } .button { background: transparent; border: 0px; padding: 2px 0 0 14px; font-size: 120%; line-height: 20px; color: #fff; } */ /* button */ .submit-container { width: 385px; overflow: hidden; padding: 0 0 26px 0; } .submit-container .button-submit { float: right; background: transparent url('../images/form/button-submit.gif') no-repeat 0 0; width: 71px; height: 20px; text-indent: -9999px; cursor: pointer; border: 0; } /* errors */ form p.error { float: left; padding-left: 10px; line-height: 20px; font-size: 11px; } /* misc */ .mandatory { width: 385px; font-size: 110%; color: #c4cacf; text-align: right; margin: 0 0 5px 0; } /* where to find form */ #find-nydj form { width: 236px; margin: 0 0 0 30px; } #find-nydj .fieldcontainer { width: 100%; } #find-nydj .fieldcontainer.search_str { margin: 0; } #find-nydj input { color: #919ba4; font-size: 130%; height: 20px; } #find-nydj select { width: 228px; color: #919ba4; } #find-nydj select option { color: #919ba4; } #find-nydj .submit-container { float: left; width: 54px; } #find-nydj .submit-container .button-find { float: right; margin-top: 1px; width: 50px; height: 20px; background: url('../images/form/button-find.gif') no-repeat 0 0; border: none; text-indent: -9999px; cursor: pointer; } #find-nydj p.error { clear: left; float: none; padding: 0; line-height: 18px; } /* other buttons */ .button-submit, .button-find-nydj, .button-view-the-collection, .button-print-voucher, .button-collection, .button-back-to-overview { height: 20px; text-indent: -9999px; } .button-submit { width: 71px; background: url('../images/form/button-submit.gif') no-repeat 0 0; } .button-find-nydj { width: 123px; background: url('../images/form/button-find-nydj.gif') no-repeat 0 0; } .button-view-the-collection { width: 206px; background: url('../images/form/button-view-the-collection.gif') no-repeat 0 0; } .button-print-voucher { width: 100px; background: url('../images/form/button-print-voucher.gif') no-repeat 0 0; } .button-collection { width: 106px; background: url('../images/form/button-collection.gif') no-repeat 0 0; } .button-back-to-overview { width: 147px; background: url('../images/form/button-back-to-overview.gif') no-repeat 0 0; } p a.button-link { display: block; height: 20px; } .contact .button-view-the-collection, .newsletter .button-view-the-collection { padding-top: 6px; background: url('../images/form/button-view-the-collection.gif') no-repeat 0 6px; } /* javascript select field */ div.js-select { float: left; display: block; height: 20px; background: url('../images/form/selectbox.gif') no-repeat top left; } div.js-select.js-select-disabled { border-color: #cccccc; color: #cccccc; } div.js-select.js-select-expanded { border-bottom-color: transparent; } div.js-select a { display: block; width: 100%; text-align: left; } div.js-select a:hover { text-decoration: none; } div.js-select a span { padding: 0 8px; line-height: 154%; font-size: 130%; color: #919ba4; } .js-select-options { text-align: left; } .js-select-options .js-country-select-options-top, .js-select-options .js-select-options-top { height: 25px; background: transparent url('../images/form/options-top.png') no-repeat; } .js-select-options .js-article-select-options-top { height: 25px; background: transparent url('../images/form/model-options-top.png') no-repeat; } .js-select-options .js-country-select-options-wrapper, .js-select-options .js-select-options-wrapper { padding: 0 22px 33px 22px; width: 210px; background: transparent url('../images/form/options-bottom.png') no-repeat bottom; } .js-select-options .js-article-select-options-wrapper { padding: 0 22px 33px 22px; height: 250px; overflow: hidden; width: 288px; background: transparent url('../images/form/model-options-bottom.png') no-repeat bottom; } .js-select-options .js-country-select-options-hover, .js-select-options .js-select-options-hover { background: url('../images/form/option.gif') no-repeat 0 -24px; } .js-select-options .js-article-select-options-hover { overflow: hidden; position: relative; } .js-select-options a { display: block; width: 100%; } div.js-select-options a:hover { background-position: 0 0; color: #ffffff; text-decoration: none; } div.js-select-options a span { display: block; padding: 0 5px 0 16px; line-height: 161%; font-size: 130%; color: #919ba4; } div.js-select-options a:hover span { color: #ffffff; } div.js-select-options .js-article-select-options-hover a:hover span:hover { color: #000000; } /* country select submit */ #country-select-form { width: 260px; margin: 4px auto 0; } body.javascript #country-select-form { width: 225px; } #country-select select { font-size: 120%; height: 20px; width: 225px; color: #adb4bb; } body#country-select select { } body#country-select button { float: right; height: 20px; background: #919ba4; border: none; color: #ffffff; line-height: 18px; } body.javascript form#country-select-form button { display: none; } /* spam-wall */ .spam-wall { display: none; } /* slider models */ .js-models-slider { padding: 0; overflow: hidden; position: relative; width: 100%; } .js-models-slider .js-vertical-slider-bar { z-index: 200; left: 270px; height: 248px; } /* news & campaign */ /* detail */ .news-campaign-detail-container { position: relative; margin: 0 auto; padding: 30px 0 0 0; width: 917px; overflow: hidden; } .news-campaign-detail-container.single-page { width: 609px; /* 917-308=609 */ } .news-campaign-detail-container img { display: block; float: left; } .news-campaign-detail-container .column { position: relative; margin: 0 10px 0 0; float: left; overflow: hidden; } .news-campaign-detail-container .column-1 { width: 89px; } .news-campaign-detail-container .column-2 { margin: 0 5px 0 0; /* width: 303px; */ max-height: 382px; } .news-campaign-detail-container .column-3 { /* width: 303px; */ max-height: 382px; } .news-campaign-detail-container .column-4 { margin: 0; width: 197px; height: 382px; } .news-campaign-detail-container .button-container { position: absolute; bottom: 0; left: 0; width: 197px; overflow: hidden; } /* overview */ .news-campaign-overview-container { position: relative; margin: 0 auto; } .news-campaign-overview-container ul.reset { position: absolute; padding: 100px 0 0 0; overflow: hidden; } .news-campaign-overview-container li { float: left; padding: 150px 0 0 0; position: relative; } .news-campaign-overview-container a { display: block; padding: 0 10px; width: 144px; overflow: hidden; outline: 0; text-align: center; } .news-campaign-overview-container a:hover { text-decoration: none; } .news-campaign-overview-container a span { padding: 12px 0 0 0; display: block; } .news-campaign-overview-container a span.title { font-family : 'Times New Roman', serif; font-size: 180%; font-weight: bold; color: #352a4e; text-transform: uppercase; cursor: pointer; } /* js-slider-bar */ .js-newsslider-bar { margin: 15px auto 0 auto; width: 496px; height: 9px; overflow: hidden; background: url('../images/content/slider-horizontal-bar.gif') no-repeat left top; text-align: left; } .js-newsslider-bar .js-slider-knob { position: absolute; left: 0; top: 0; width: 218px; height: 9px; overflow: hidden; background: url('../images/content/slider-horizontal-knob.gif') no-repeat left top; cursor: pointer; } /* press */ /* detail */ .press-detail-container { padding: 30px 0 0 0; margin: 0 auto; width: 702px; overflow: hidden; } .press-detail-container .content-left { width: 265px; height: 390px; float: left; } .press-detail-container .content-right { position: relative; top: -14px; width: 419px; height: 390px; float: right; } .press-detail-container .paragraph-container { position: absolute; top: 0; left: 0; padding: 0; width: 400px; /*height: 270px;*/ overflow: hidden; visibility: hidden; } .press-detail-container .paragraph-container h1 { padding: 10px 0 0 0; } .press-detail-container .js-vertical-slider-bar { top: 15px; right: 4px; } .press-detail-container .button-container { position: absolute; bottom: -14px; left: 0; overflow: hidden; } .press-detail-container .button-container .back-to-overview { margin-top: 14px; } .press-detail-container .addthis_toolbox { padding: 12px 0 0 0; } /* overview */ .press-overview-container { position: relative; padding: 30px 0 0 0; margin: 0 auto; } ul.press-overview { margin: 0 auto; display: block; width: 376px; overflow: hidden; } ul.press-overview h1 { text-transform: uppercase; } ul.press-overview a { display: block; padding: 18px 0 0 0; color: #919ba4; font-size: 140%; text-decoration: underline; } ul.press-overview a:hover { text-decoration: none; } .press-overview-container .js-vertical-slider-bar { margin: 54px 0 0 0; } .js-lightbox-canvas { padding: 10px; background: #faf9ec; border: 2px solid #352a4e; } /*--------------------------------------*/ /* DO NOT EDIT STYLES BELOW */ /*--------------------------------------*/ .js-lightbox-preload-container { position: absolute; left: -10px; top:-10px; width: 1px; height: 1px; overflow: hidden; } .js-lightbox-preload-container .js-lightbox-content-wrapper { position: absolute; display: block; } .js-image-lightbox, .js-gallery-lightbox, .js-lightbox { position: absolute; top: 0; left: 0; display: none; } .js-lightbox-canvas { position: absolute; overflow: visible; text-align: left; } .js-lightbox-next, .js-lightbox-previous { position: absolute; top: 20px; display: block; overflow: hidden; text-indent: -9999px; } .js-lightbox-previous { left: 0; } .js-lightbox-next { right: 0; } .js-lightbox-previous, .js-lightbox-next { background-repeat: no-repeat; } /* stores */ /* detail */ .online-store-container { margin: auto 250px; } .online-store-container .paragraph-container { padding-top: 10px; } .online-store-container ul { list-style-type: none; list-style: none; padding: 0px; margin: 0px; text-decoration: underline; width: 576px; } .online-store-container ul li { list-style-type: none; list-style: none; padding: 0px; margin: 0px; text-decoration: underline; font-size: 140%; } .online-store-container ul li a { color: #919BA4; display: block; padding: 0 0 18px 0; text-decoration: underline; } /* bar */ .online-store-container .js-vertical-slider-bar { margin: 0 0 0 0; } /* overview */ .store-overview-container { margin: 0 auto; width: 444px; /* Original is 404px*/ } .store-overview-container .paragraph-container { width: 100%; padding-top: 130px; } .store-overview-container .paragraph-container ul { list-style-type: none; list-style: none; } /* collection */ /* content container */ .article-overview #content-container, .jeansguide-overview #content-container, .article-detail #content-container, .jeansguide-detail #content-container { height: 550px; } .article-overview #content-container .center, .jeansguide-overview #content-container .center, .article-detail #content-container .center, .jeansguide-detail #content-container .center { width: auto; } /* articles top */ .articles-campaign-overview-top { height: 73px; background-image: url(../images/articles/top_categories.png); background-repeat: no-repeat; background-position: center; background-color: #FDFBF3; } .articles-campaign-overview-top .center-top { margin: 0 auto; width: 1000px; } .articles-campaign-overview-top .center-top .header1 { padding: 18px 0 0 0; float: left; } .item-description .buttons-share { padding: 20px 0; clear: both; } /* collection menu */ #collection-menu, #fitguide-menu { position: absolute; margin: 0 auto; text-align: center; top: 53px; width: 950px; clear: both; } ul.collection-menu, ul.fitguide-menu { list-style: none outside none; float: left; left: 50%; height: 22px; position: relative; margin: 0 auto; z-index: 60; } ul.collection-menu li, ul.fitguide-menu li { float: left; position: relative; right: 50%; border-right: 1px solid #E5E4E2; background-image: url(../images/menu/collection-menu.png); } ul.collection-menu li.last, ul.fitguide-menu li.last { border: none; background-position: right; } ul.collection-menu li a, ul.fitguide-menu li a { display: block; padding: 2px 15px 0 15px; height: 20px; color: #778089; font-size: 12px; text-transform: uppercase; } ul.collection-menu li a.hovered, ul.collection-menu li:hover a.hovered, ul.fitguide-menu li a.hovered, ul.fitguide-menu li:hover a.hovered, ul.collection-menu li a, ul.fitguide-menu li a { color: #778089; } ul.collection-menu li a:hover, ul.collection-menu li.sel a, .back-overview:hover span.text, ul.fitguide-menu li a:hover, ul.fitguide-menu li.sel a { color: #FFFFFF; text-decoration: none; } ul.collection-menu li:hover, ul.fitguide-menu li:hover, ul.collection-menu li.sel:hover, ul.fitguide-menu li.sel:hover { background-position: bottom; color: #FFFFFF; background-image: url(../images/menu/collection-menu.png); } ul.collection-menu li.sel, ul.fitguide-menu li.sel { background-position: center; color: #FFFFFF; background-image: url(../images/menu/collection-menu.png); } ul.collection-menu li.first, ul.fitguide-menu li.first { background-position: left top; background-image: url(../images/menu/collection-menu-left.png); } ul.collection-menu li.first a, ul.fitguide-menu li.first a { padding: 2px 15px 0 20px; } ul.collection-menu li.first:hover, ul.fitguide-menu li.first:hover, ul.collection-menu li.first.sel:hover, ul.fitguide-menu li.first.sel:hover { color: #FFFFFF; background-position: left bottom; background-image: url(../images/menu/collection-menu-left.png); } ul.collection-menu li.first.sel, ul.fitguide-menu li.first.sel { color: #FFFFFF; background-position: left center; background-image: url(../images/menu/collection-menu-left.png); } ul.collection-menu li a, ul.fitguide-menu li a { color: #778089; } ul.collection-menu li a:hover, ul li.sel a, ul.collection-menu li:hover a, ul.fitguide-menu li a:hover, ul.fitguide-menu li:hover a { color: #FFFFFF; } ul.collection-menu li:hover ul, ul.fitguide-menu li:hover ul { display:block; } ul.collection-menu li.last, ul.fitguide-menu li.last { background-position: top right; background-image: url(../images/menu/collection-menu-right.png); } ul.collection-menu li.last:hover, ul.fitguide-menu li.last:hover, ul.collection-menu li.last.sel:hover, ul.fitguide-menu li.last.sel:hover { background-position: bottom right; background-image: url(../images/menu/collection-menu-right.png); background-repeat: no-repeat; } ul.collection-menu li.last.sel, ul.fitguide-menu li.last.sel { background-position: right center; background-image: url(../images/menu/collection-menu-right.png); background-repeat: no-repeat; } ul.collection-menu li.last a, ul.fitguide-menu li.last a { padding: 2px 20px 0 15px; } #collection-menu a.back-overview { float: left; position: absolute; right: 40%; padding-top: 2px; height: 20px; font-size: 12px; color: #778089; text-transform: uppercase; } #collection-menu a.back-overview span.left { background-image: url(../images/menu/collection-menu-left.png); background-position: top left; display: block; width: 18px; height: 20px; padding-top: 2px; float: left; } #collection-menu a.back-overview span.text { background-image: url(../images/menu/collection-menu.png); background-position: top left; padding-top: 2px; height: 20px; float: left; } #collection-menu a.back-overview span.right { background-image: url(../images/menu/collection-menu-right.png); background-position: top right; display: block; float: left; width: 18px; height: 20px; padding-top: 2px; } #collection-menu a:hover.back-overview span.left { background-image: url(../images/menu/collection-menu-left.png); background-position: bottom left; } #collection-menu a:hover.back-overview span.text { background-image: url(../images/menu/collection-menu.png); background-position: bottom left; color: #FFFFFF; } #collection-menu a:hover.back-overview span.right { background-image: url(../images/menu/collection-menu-right.png); background-position: bottom right; } /* submenu */ .nav-sub-container { position: absolute; left: -9999px; margin-top: -2px; z-index: 1000; } ul.collection-menu li:hover .nav-sub-container { left: 0px; margin-top: -1px; } ul.collection-menu-sub { position: relative; z-index: 2000; border: 1px solid #E4E4E0; background-color: #FDFBF3; list-style: none outside none; padding: 9px 0 5px 0; margin: 0; } ul.collection-menu-sub li { float: none; border: none; white-space: nowrap; background-image: none; right: 0; margin: 0; padding: 0; } ul.collection-menu-sub li:hover { background-image: none; } ul.collection-menu li ul.collection-menu-sub li a { display: block; background-image: none; padding: 1px 25px 2px 0;; margin-left: 15px; text-align: left; text-transform: none; color: #A8A7AD; } ul.collection-menu li ul.collection-menu-sub li a:hover { color: #3A2F52; } ul.collection-menu li.last ul.collection-menu-sub a:hover { background: none; } /* articles overview */ .articles-jeansguide-overview-container { margin: 0 20px; height: 435px; z-index: 100; overflow: auto; } .articles-jeansguide-overview-container .js-newsslider-bar { margin: 15px auto 0; } .articles-jeansguide-overview-container ul.reset { /* position: absolute; padding: 13px 60px 0 0; height: 530px;*/ padding: 13px 0 0 0; margin: 0 5px 0 30px; position: relative; display: block; overflow-y: hidden; overflow-x: auto; float: left; } .jeansguide-overview .articles-jeansguide-overview-container ul.reset { margin: 0 auto; float: none; } .articles-jeansguide-overview-container li.slider { float: left; width: 165px; } .articles-jeansguide-overview-container li.slider.articles { padding: 0 17px 0 20px; width: 173px; } .articles-jeansguide-overview-container a { display: block; overflow: hidden; outline: 0; } .articles-jeansguide-overview-container a:hover { text-decoration: none; } .articles-jeansguide-overview-container a span { display: block; } .articles-jeansguide-overview-container a span.title { font-family : 'Times New Roman', serif; font-size: 180%; font-weight: bold; color: #352a4e; text-transform: uppercase; cursor: pointer; margin: 0 0 25px 25px; } .articles-jeansguide-overview-container a span.description { color: #352A4D; font-size: 12px; margin: 10px 10px 5px 10px; } .articles-jeansguide-overview-container a span.description img { vertical-align: text-bottom; } .articles-jeansguide-overview-container a span.subtitle { font-family : 'Times New Roman', serif; color: #352a4e; font-size: 180%; padding: 10px 0 5px 0; } #guide-description { margin: 42px auto; height: 38px; width: 970px; } #guide-description h2 { color: #302752; } #guide-description p { padding: 7px 0; color: #302752; font-size: 12px; } ul.article-info { margin: 0 7px; padding: 0; display: block; } ul.article-info li { list-style: none outside none; font-size: 11px; margin: 2px 0; color: #919BA4; } ul.article-info li a { display: block; color: #919BA4; } ul.jeansguide-info { margin: 0; padding: 0 0 0 0px; display: block; } ul.jeansguide-info li { list-style: none outside none; font-size: 11px; margin: 2px 0; } span.listitem { display: block; float: left; margin: 0 5px; } span.url { display: block; margin-left: 15px; cursor: pointer; } a span.url { text-decoration: underline; } a:hover span.url { display: block; text-decoration: none; } /* Article detail */ .article-detail-container { margin: 20px auto 0 auto; width: 1000px; position: relative; } .article-detail-container .item-image-gallery { float: left; width: 90px; } .article-detail-container .item-image-gallery img { margin: 1px 0; } .article-detail-container .item-image { float: left; margin-right: 22px; display: block; text-align: center; } .article-detail-container .item-image .image-wrapper { background-color: #FFFFFF; border: 1px solid #E2E3DE; display: block; padding: 10px 15px; } .article-detail-container .item-image .image-wrapper img { padding: 40px auto; } .article-detail-container .item-image .image-wrapper #image-large { position: absolute; overflow: hidden; top: 0; left: 323px } article-detail-container .item-image #image-wrap { position: relative; } .article-detail-container .item-image .image-wrapper .cloud-zoom { } .article-detail-container .item-image .rollover-info { display: block; margin: 2px 0; text-align: left; font-size: 11px; } .article-detail-container .article-color { display: block; float: left; width: 10px; height: 10px; margin: 1px; } .article-detail-container .item-description { float: left; width: 410px; } .article-detail-container .item-description h1 { font-size: 270%; text-transform: uppercase; } .article-detail-container .item-description p { font-size: 15px; padding: 13px 0 0px 0; line-height: 22px; } .article-detail-container .article-siblings { float: left; width: 200px; margin: 20px 0 0 0; } /* detail image gallery image */ .cloud-zoom-gallery { display: block; background-color: #FFFFFF; width: 75px; height: 75px; border: 1px solid #E2E3DE; text-align: center; padding: 5px; margin-bottom: 3px; } /* Jeansguide detail */ .jeansguide-detail-container { margin: 43px auto 0 auto; width: 1000px; } .jeansguide-detail-container .item-image { float: left; width: 250px; } .jeansguide-detail-container .item-image img { margin: 0 40px; height: auto; } .jeansguide-detail-container .item-description { float: left; width: 430px; } .jeansguide-detail-container .item-description a { font-weight: bold; text-decoration: underline; color: #919BA4; } .jeansguide-detail-container .item-description h1 { font-size: 250%; text-transform: uppercase; } .jeansguide-detail-container .item-description p { font-size: 12px; padding: 20px 0; line-height: 15px; margin-left: 2px; } .jeansguide-detail-container .article-siblings { float: left; margin: 25px 0 0 0; width: 270px; } .article-siblings h2 { font-size: 130%; text-transform: uppercase; } .vertical-line { float: left; margin: 0 20px; height: 380px; width: 5px; background-image: url('../images/articles/vertical-line.png'); } .sibling { float: left; text-align: center; } .sibling a { display: block; margin: 25px 10px; } .sibling a:hover { text-decoration: none; } .sibling .title { display: block; font-size: 120%; white-space:nowrap; } /* CLOUD ZOOM STYLES */ /* This is the moving lens square underneath the mouse pointer. */ .cloud-zoom-lens { border: 2px solid #888; margin:-2px; /* Set this to minus the border thickness. */ background-color:#fff; cursor:move; } /* This is for the title text. */ .cloud-zoom-title { font-family:Arial, Helvetica, sans-serif; position:absolute !important; background-color:#000; color:#fff; padding:3px; width:100%; text-align:center; font-weight:bold; font-size:10px; top:0px; } /* This is the zoom window. */ .cloud-zoom-big { border:1px solid #ccc; overflow:hidden; width: 420px; height: 390px; position: absolute; background-color: #FFFFFF; } /* This is the loading message. */ .cloud-zoom-loading { color:white; background:#222; padding:3px; border:1px solid #000; } /* * CSS Styles that are needed by jScrollPane for it to operate correctly. * * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane * may not operate correctly without them. */ .jspContainer { overflow: hidden; position: relative; } .jspPane { position: absolute; } .jspVerticalBar { position: absolute; top: 0; right: 0; width: 16px; height: 100%; background: red; } .jspHorizontalBar { position: absolute; bottom: 0; left: 0; width: 100%; height: 13px; } .jspVerticalBar *, .jspHorizontalBar * { margin: 0; padding: 0; } .jspDragLeft { background-image: url('../images/menu/slider-left.png'); display: block; width: 8px; height: 18px; float: left; margin-left: -8px; } .jspDragRight { background-image: url('../images/menu/slider-right.png'); display: block; width: 8px; height: 18px; float: right; margin-right: -8px; } .jspCap { display: none; } .jspHorizontalBar .jspCap { float: left; } .jspTrack { background: #daddd6; position: relative; } .jspDrag { background-color: #a8a7ad; position: relative; top: 0; left: 0; cursor: pointer; } .jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { float: left; height: 100%; } .jspArrow { position: relative; z-index: 20; text-indent: -20000px; display: block; cursor: pointer; } .jspArrowLeft { background-position: left top; background-image: url('../images/menu/knob-left.png'); } .jspArrowRight { margin-right: -3px; background-image: url('../images/menu/knob-right.png'); background-position: right top; } .jspArrow.jspDisabled { cursor: default; } .jspArrowLeft.jspDisabled { background-image: url('../images/menu/knob-left.png'); background-position: left 13px; } .jspArrowRight.jspDisabled { background-image: url('../images/menu/knob-right.png'); background-position: right 13px; } .jspVerticalBar .jspArrow { } .jspHorizontalBar .jspArrow { width: 17px; float: left; height: 100%; } .jspVerticalBar .jspArrow:focus { } .jspCorner { background: #eeeef4; float: left; height: 100%; } /* Yuk! CSS Hack for IE6 3 pixel bug :( */ * html .jspCorner { margin: 0 -3px 0 0; }