/*--------------------------------------- RESET, BODY -----------------------------------------*/ * { margin: 0; padding: 0; } body { background: url(../img/bg.jpg) center top repeat-x; font-size: 62.5%; font-family: verdana, helvetica, arial, sans-serif; padding-bottom: 20px; } /*--------------------------------------- MAIN WRAPPER -----------------------------------------*/ #container { position: relative; margin: 0 auto; width: 990px; padding-bottom: 43px; background: url(../img/container-bg.png) bottom left no-repeat; height: 1%; } /*--------------------------------------- HEADER -----------------------------------------*/ #header { position: relative; width: 990px; height: 110px; background: url(../img/hd-bg.png) repeat-y; } #logo { position: absolute; left: 166px; top: 33px; display: block; width: 140px; height: 65px; background: url(../img/logo.png) no-repeat; text-indent: -9999px; } #header ul { list-style: none; position: absolute; top: 87px; left: 340px; width: 500px; } #header ul li { display: inline; margin-right: 24px; font-size: 1em; } #header ul li a:link, #header ul li a:visited { color: #808285; text-decoration: none; } #header ul li a:hover, #header ul li a:active, #header ul li#current a { color: #FFF; text-decoration: none; } #newsletter { position: absolute; top: 20px; right: 80px; width: 320px; } #newsletter p { color: #FFF; font-size: 1em; margin-bottom: 5px; } #name-wp { float: left; width: 160px; } #email-wp { float: left; width: 160px; } #newsletter .fld input { width: 140px; padding: 2px; background: #FFF; border: none; outline: none; font-family: verdana, helvetica, arial, sans-serif; } #subscribe { padding-top: 5px; clear: both; width: 304px; text-align: right; } /*--------------------------------------- CONTENT -----------------------------------------*/ /* Column Structure */ #content-wp { position: relative; width: 990px; padding: 16px 0; background: url(../img/ct-bg.png) repeat-y; } #content { position: relative; margin: 0 auto; width: 680px; padding: 50px 78px 57px 100px; background: url(../img/book-home.jpg) no-repeat; overflow: hidden; } #sub-page #content { background: url(../img/book.jpg) no-repeat; } #content-lt { float: left; width: 300px; height: 467px; border-bottom: 1px solid #2D1D10; } #content-rt-wp { float: right; width: 300px; height: } #content-rt { float: right; width: 300px; height: 467px; border-bottom: 1px solid #2D1D10; margin-bottom: 4px; } /* Headers */ h1 { padding-right: 26px; height: 95px; border-bottom: 1px solid #2D1D10; margin-bottom: 14px; font-weight: normal; font-size: 1em; } h1#home span { display: block; margin: 0 auto 10px auto; width: 223px; height: 42px; background: url(../img/bumpology.png) no-repeat; text-indent: -9999px; } h1#philosophy span { display: block; margin: 0 auto 10px auto; width: 219px; height: 42px; background: url(../img/philosophy.png) no-repeat; text-indent: -9999px; } h1#clothing span { display: block; margin: 0 auto 10px auto; width: 168px; height: 42px; background: url(../img/clothing.png) no-repeat; text-indent: -9999px; } h1 p { text-align: center; font-family: "Hoefler Text", "Palatino", times new roman, serif; font-size: 1.2em; color: #000; line-height: 130%; } h1 p strong { display: block; width: 274px; } h2 { border-top: 1px solid #2D1D10; border-bottom: 1px solid #2D1D10; margin-bottom: 4px; font-weight: bold; font-size: 1.2em; text-align: center; padding: 4px 0; font-family: "Hoefler Text", "Palatino", times new roman, serif; font-style: italic; } /* Copy */ #copy { height: 230px; padding-right: 0; margin-bottom: 25px; } #philosophy-copy { height: 320px; overflow: auto; padding-right: 30px; margin-bottom: 25px; } #copy p, #philosophy-copy p { color: #333; font-size: 1em; line-height: 130%; margin-bottom: 10px; } /* Call Outs */ #call-outs { list-style: none; border-top: 1px solid #2D1D10; padding: 5px 0; width: 300px; overflow: hidden; } #call-outs li { float: left; width: 140px; padding-right: 9px; margin-right: 9px; border-right: 1px solid #2D1D10; } #call-outs li.last { float: left; width: 140px; padding-right: 0; margin-right: 0; border: none; } #call-outs li a { display: block; width: 140px; height: 89px; } #call-outs li a img { display: block; width: 140px; height: 89px; } #slideshow-wp { position: relative; width: 220px; height: 330px; padding: 10px 10px 16px 10px; margin: 0 auto; overflow: hidden; background: url(../img/slideshow-bg.png) no-repeat; } #slideshow { width: 220px; height: 330px; margin: 0 auto; overflow: hidden; } #slideshow img { display: block; width: 220px; height: 330px; } #corners { position: absolute; left: 0px; top: 0px; width: 240px; height: 356px; background: url(../img/corners.png) no-repeat; } #thumbwrapper { width: 300px; height: 85px; } #thumbarea { position: relative; overflow: hidden; height: 85px; width: 300px; } #thumbs { position: absolute; list-style: none; padding: 12px 0; width: 10000px; overflow: hidden; border-top: 1px solid #2D1D10; } #thumbs li { float: left; margin-right: 12px; width: 60px; cursor: pointer; } #thumbs li img { display: block; width: 60px; height: 60px; } .nav-tip { text-align: right; font-family: "Hoefler Text", "Palatino", times new roman, serif; font-size: 1.1em; color: #000; } .test { height: 200px; background: red; } .ui-tabs-hide { display: none; } /*--------------------------------------- CLOTHING -----------------------------------------*/ #clothing-range { position: absolute; left: 100px; top: 50px; width: 680px; height: 482px; } #clothing-range h5 { position: absolute; left: 0px; top: 107px; width: 300px; height: 13px; background: url(../img/before-after.png) 5px 0px no-repeat; text-indent: -9999px; } #clothing-range ul#with-nv { list-style: none; position: absolute; left: 0px; top: 100px; width: 320px; height: 380px; padding: 0; background: url(../img/clothing-nv-bg.png) 0px 180px no-repeat; } #clothing-range ul#with-nv-new { list-style: none; position: absolute; left: 0px; top: 120px; width: 320px; height: 380px; padding: 0; } #clothing-range ul.clothing-nv-new li { float: left; margin: 0 12px 8px 0; width: 60px; height: 120px; } #clothing-range ul.clothing-nv-new li p { text-align: center; font-family: "Hoefler Text", "Palatino", times new roman, serif; font-size: 1.1em; color: #000; padding-top: 3px; } #clothing-range ul.clothing-nv-new li a img { display: block; width: 60px; height: 90px; } #clothing-range ul.clothing-nv-new li a { display: block; width: 60px; height: 90px; } #clothing-range ul.clothing-nv li { float: left; margin: 0 12px 8px 0; width: 50px; height: 85px; } #clothing-range ul.clothing-nv li.first { margin: 0 12px 8px 186px; display: inline; /* IE6 */} #clothing-range ul.clothing-nv li.ninth { margin: 0 186px 8px 0; } #clothing-range ul.clothing-nv li p { text-align: center; font-family: "Hoefler Text", "Palatino", times new roman, serif; font-size: 1.1em; color: #000; padding-top: 3px; } #clothing-range ul.clothing-nv li a img { display: block; width: 50px; height: 68px; } #clothing-range ul.clothing-nv li a { display: block; width: 50px; height: 68px; } #clothing-range ul.clothing-nv li a:link, #clothing-range ul.clothing-nv li a:visited { } #clothing-range ul.clothing-nv li a:hover, #clothing-range ul.clothing-nv li a:active { } #clothing-range ul.clothing-nv li.ui-tabs-selected a { } #clothing-range h2#with-bump { position: absolute; top: 120px; left: 36px; width: 104px; height: 46px; border: none; margin: 0; padding: 0; background: url(../img/with-bump.png) no-repeat; text-indent: -9999px; } #clothing-range h2#before-after-bump { position: absolute; top: 293px; left: 166px; width: 102px; height: 73px; border: none; margin: 0; padding: 0; background: url(../img/before-after-bump.png) no-repeat; text-indent: -9999px; } .item-wp { position: absolute; top: 0px; right: 0px; width: 300px; height: 466px; } .item-slideshow-wp { position: relative; width: 220px; height: 330px; padding: 11px 10px 15px 10px; margin: 0 auto; overflow: hidden; background: url(../img/slideshow-bg.png) no-repeat; } .item-slideshow { position: relative; width: 220px; height: 330px; margin: 0 auto; overflow: hidden; z-index: 500; } .item-slideshow img { display: block; width: 220px; height: 330px; } .corners { position: absolute; left: 0px; top: 0px; width: 240px; height: 356px; background: url(../img/corners.png) no-repeat; z-index: 1000; } .item-desc { border-top: 1px solid #2D1D10; padding-top: 6px; } .item-desc h3 { color: #000; font-size: 1.1em; line-height: 130%; font-family: "Hoefler Text", "Palatino", times new roman, serif; margin-bottom: 2px; } .item-desc p { color: #333; font-size: 0.9em; line-height: 130%; margin-bottom: 12px; } .item-colour-nv { position: absolute; right: 0px; top: 260px; height: 100px; width: 28px; } .item-colour-nv h4 { color: #000; text-transform: uppercase; font-size: 7px; margin-bottom: 8px; font-family: "Hoefler Text", "Palatino", times new roman, serif; } .item-colour-nv ul { list-style: none; } .item-colour-nv ul li { width: 20px; height: 20px; margin-bottom: 8px; } .item-colour-nv ul li a { display: block; width: 20px; height: 20px; } .item-colour-nv ul li img { display: block; width: 18px; height: 18px; border: 1px solid #000; } #buy-link { position: absolute; right: 0px; bottom: 0px; padding-top: 4px; width: 300px; border-top: 1px solid #2D1D10; text-align: right; font-family: "Hoefler Text", "Palatino", times new roman, serif; font-size: 1em; text-transform: uppercase; } #buy-link a { color: #000; font-weight: bold; } #buy-link a:link, #buy-link a:visited { text-decoration: none; } #buy-link a:hover, #buy-link a:active { text-decoration: underline; } /*--------------------------------------- FOOTER -----------------------------------------*/ #footer { position: relative; width: 990px; padding: 9px 0 0 0; background: url(../img/hd-bg.png) repeat-y; height: 1%; } #footer ul { position: relative; list-style: none; width: 990px; text-align: center; } #footer ul li { display: inline; font-size: 1em; color: #FFF; /* margin-right: 4px; padding-right: 6px; border-right: 1px solid #FFF; */} #footer ul li a:link, #footer ul li a:visited { color: #FFF; text-decoration: none; } #footer ul li a:hover, #footer ul li a:active { color: #FFF; text-decoration: underline; } /*--------------------------------------- MISC -----------------------------------------*/ img { border: none; } a { outline: none; }