/*---------------------------------------- Name: styles.css Developed by:Josh Hamilton ----------------------------------------*/ /* Imports ----------------------------------------*/ @import url("reset.css"); /* === === === === === === === === === === =STRUCTURE === === === === === === === === === === */ html { width: 100%; } body { font: 62.5%/1.5 Helvetica, sans-serif, serif; background-color: #7E9096; color:#4A5051; position: relative; width: 100%; } #page-wrap { width: 820px; margin: 0 auto ; position: relative; padding-bottom:45px; } #page-wrap-inner { background-color:#E9E2CE; padding-bottom:0; overflow:hidden; height:620px; !important} #lshadow { background: transparent url(../images/general/left-shadow.png) no-repeat left 0; position:absolute; top:0; left:200px; z-index:10; width:13px; height:670px; } #rshadow { background: transparent url(../images/general/right-shadow.png) no-repeat right 0; position:absolute; top:0; right:0; z-index:10; width:13px; height:670px; } /* === === === === === === === === === === =COMMON === === === === === === === === === === */ a { color:#4A5051; text-decoration: none; } a:hover { text-decoration: none; } h1,h2 { font-weight: bold; color: #4A5051; font-family:'lucida Grande', Helvetica, sans-serif; letter-spacing: -.01em; word-spacing:-0.1em;} h3,h4,h5,h6 { font-weight: normal; color: #7E9096; font-family:'lucida Grande', Helvetica, sans-serif; } h1 { font-size: 22px; line-height:1.2em; margin-bottom: .5em;} h2 { font-size: 13px; margin-bottom:2em; text-align:right;} h3 { font-size: 12px; margin-bottom:.5em; } #cufon { font-size: 22px; margin-bottom:5px; color:#7E9096; } h4 { font-size: 12px; margin-bottom:.3em; color: #4A5051;} h5 { font-size: 11px; margin-top:-10px; } h6 { font-size: 9px; margin-bottom: 0; } blockquote { padding-left:1.5em; margin: 1.5em; border-left:3px solid #ccc; font-style:italic; } strong { font-weight: bold; } em { font-style: italic; } /*=TYPE === === === === === === === === === === */ p { padding:0 0 1.0em 0; color:#958C7D; font-size:11px; } .large { font-size:13px; color: #4A5051;} /*=STANDARD CLASSES === === === === === === === === === === */ .left {float:left;} .right {float:right;} .clear {clear:both;} .hide {display:none; text-indent:-99999px;} .cap {text-transform:uppercase; } .underline, .underline a {text-decoration:underline;} /*=LEFT-SIDEBAR === === === === === === === === === === */ #left-sidebar { background-color:#E9E2CE; width:200px; float:left; height:620px; !important } #left-sidebar-inner { padding:15px 8px 0 8px; overflow:hidden; } /*==LOGO==*/ #logo { width:162px; margin:0 auto; } h2#tagline { display:block; width:178px; height:16px; padding-top:10px; margin-left:-5px; } /*==PATTERN PICKER==*/ #pattern-picker { text-align:right; } .find, .reset, .submit, button { margin:3px 0; cursor: pointer; font-size:9px;} .reset { margin-right:5px;} #pattern-picker form { font-size:9px; } #pattern-picker li { line-height:18px; } #pattern-picker input { border:1px solid #958C7D; color:#4A5051; } #pattern-picker option, #pattern-picker select { font-size:9px; z-index:9; position:relative;} /*==DEALER PICKER==*/ #dealer-picker { text-align:left; overflow:hidden; } #dealer-picker li { list-style-type:none; display:inline-block; } .find, .reset, .submit { cursor: pointer; font-size:9px; !important padding:2px;} .button {padding:0;} #dealer-picker form { font-size:9px; } #dealer-picker li { line-height:18px; } #dealer-picker input { border:1px solid #958C7D; color:#4A5051; } #dealer-picker option, #dealer-picker select { font-size:9px; z-index:9; position:relative;} ul#dealer-picker li.zip {width:140px;} ul#dealer-picker li.city {width:115px;} ul#dealer-picker li.state {width:310px;} ul#dealer-picker li.or {margin: 0 10px;} ul#dealer-zip, ul#dealer-state { float:left; } ul#dealer-zip li label, ul#dealer-state li label { display:block; } ul#dealer-zip li { display:inline; float:left; text-transform:uppercase; } ul#dealer-state li { display:inline; float:left; text-transform:uppercase;}*/ .or { margin:30px 20px 0 20px; text-transform:uppercase; float:left;} .instate { position:relative; clear:left; padding:2px 0;} /*==MAIN NAV ===============================*/ ul#brand-nav { padding:0 0 5px 0; font-size:9px; line-height:14px; text-transform:uppercase; text-align:right; margin-top:-16px; } ul#brand-nav li a { background:url(../images/general/nav-bullet.gif) no-repeat right 0; padding-right:12px; font-weight:normal; } ul#brand-nav li a:hover { color:#7E9096;} ul#brand-nav a:hover { color:#7E9096;} ul#brand-nav li ul { padding-left:12px;} ul#brand-nav li ul span.nav-headline { background-image:none; padding-left:12px; font-weight:bold; font-size:10px;} #easy-logos { padding-bottom:0px; overflow:hidden; } #easy-logos li { float:left; display:inline; } #easy-logos li.easy-walls { margin-right:4px; } /*==STATIC NAV ===============================*/ ul#static-nav { font-size:9px; line-height:13px; text-transform:uppercase; text-align:right; padding-top:6px; float:right; } ul#static-nav li a { background:url(../images/general/nav-bullet.gif) no-repeat right 0px; padding-right:12px; font-weight:normal; color:#4A5051; } ul#static-nav li a:hover { color:#7E9096;} .retail-button { display:inline; clear:both; font-size:9px; padding:2px 8px; text-transform:none; border:1px solid #7E9096; color:#fff; margin-bottom:5px; background-color:#4A5051; } .retail-button p, .retail-button p a { padding:0; font-size:9px; color:#fff;} /*=CONTENT AREA === === === === === === === === === === */ #content { width:620px; height:620px; !important position:relative; float:right; background:#E9E2CE url(../images/general/container-bkd.gif) repeat-y right 0; } #content-inner { padding:0; overflow:hidden; } #content-inner-static { padding:25px; height:445px; position:relative; overflow:auto; font-weight:bold; clear:both;} #content-inner-static-full { padding:25px; height:570px; position:relative; overflow:hidden; font-weight:bold;} #main-content { float:left; overflow:hidden;} /*==RIGHT BRANDS NAV==*/ #right-nav { float:right; width:195px; } #right-nav-inner { padding:14px 25px 0 15px; float:right;} #right-nav-inner li { float:right;} #right-nav-inner li a { text-indent:-99999px; display:block; } #right-nav-inner li#warner a img { display:block; width:152px; height:50px; margin-bottom:40px; margin-top:60px;} #right-nav-inner li#ches a img { display:block; width:152px; height:31px; margin-bottom:40px; } #right-nav-inner li#pattymaddenecology a img { display:block; width:152px; height:62px; margin-bottom:40px; } #right-nav-inner li#belair a img { display:block; width:152px; height:73px; margin-bottom:40px; } #right-nav-inner li#hw a img { display:block; width:152px; height:61px; margin-bottom:40px; } #_d { z-index:99999;} /*=INTERIOR PAGES COLLECTIONS === === === === === === === === === === */ /*header-nav*/ #interior-head-nav { margin:0 25px 0 25px ; padding:25px 0 0 0; border-bottom:1px solid #F6F4EC; color:#958C7D; } #interior-head-nav { font-size:10px; font-weight:bold;} #interior-head-nav a { color:#958C7D; font-weight:bold;} #interior-head-nav a:hover { color:#4A5051; } /*collection page div tag*/ #collection { margin:0 25px 0 25px; padding:15px 0 25px 0; border-top:1px solid #B8B2A8; overflow:hidden; position:relative; z-index:9;} #collection h2 { text-align:left; margin-bottom:1em; color:#4A5051; } #collection h3 { margin:10px 0 0 0; font-weight:bold; } #collection ul { font-size:11px; line-height:14px; } ul#books-container { float:left; width:400px; height:445px; text-align:center; padding-top:15px; overflow:auto; position:relative;} ul#books-container li { float:left; display:inline; margin:0 40px 40px 0; position:relative; font-weight:bold; width:86px; height:110px; } ul#books-container li a { display:block; width:86px; height:110px; !important} ul#books-container li a span.collection-img img { position:absolute; bottom:0; left:0; display:block; } ul#books-container li a p.caption { display:block; color:#958C7D; position:relative; top:115px; line-height:12px; text-align:center; z-index:99;} ul#books-container li a:hover p.caption, #right-nav-inside a:hover { color:#4A5051;} /*side-navigation for interior pages*/ #right-nav-inside {float:right; font-size:10px; text-align:right; width:153px;} #right-nav-inside h4 {font-weight:bold; text-transform:uppercase; padding-top:12px; border-top:1px solid #B8B2A8; font-size:10px; } #right-nav-inside h4.no-border {border:none; } #right-nav-inside li { line-height:12px; padding-bottom:5px; font-weight:bold; } #right-nav-inside li a { color:#958C7D; } #collection-logo { padding-bottom:12px; border-bottom:1px solid #F6F4EC; } #collection-logo-patterns { padding-bottom:6px; border-bottom:1px solid #F6F4EC; } ul.pattern-border { padding-top:10px; border-top:1px solid #B8B2A8; } /*=INTERIOR PAGES PATTERNS === === === === === === === === === === */ ul#pattern-container { float:left; display:inline; width:400px; height:445px; text-align:center; padding-top:15px; overflow:auto; position:relative; } ul#pattern-container-search { width:100%; height:445px; text-align:center; padding-top:15px; overflow:auto; position:relative; } ul#pattern-container.color-pick { width:570px; } ul#pattern-container li, ul#pattern-container-search li { float:left; display:inline; margin:0 25px 50px 0; border:1px solid #333333; position:relative; font-weight:bold; width:100px; height:100px; } ul#pattern-container li a, ul#pattern-container-search li a { float:left; display:block; height:100px; } ul#pattern-container li a span.collection-img img, ul#pattern-container-search li a span.collection-img img { position:absolute; bottom:0; left:0; } ul#pattern-container li a p.caption, ul#pattern-container-search li a p.caption { display:block; color:#958C7D; position:relative; top:105px; line-height:12px; text-align:center;} ul#pattern-container li a:hover p.caption, #right-nav-inside a:hover , ul#pattern-container-search li a:hover p.caption { color:#4A5051;} #notice { position: absolute; top:585px; left:225px; width:450px; } #notice p { font-size:9px; color:#4A5051; } p.hint { padding-bottom:0; font-style:italic; } #notice2 { position: absolute; top:575px; left:225px; width:570px; } #notice2 p { font-size:9px; color:#4A5051; } /*=INTERIOR PAGES DETAIL === === === === === === === === === === */ #detail-img-container { float:right; } #detail-specs { width:220px; float:left; padding-top:15px;} #detail-specs ul { border-top:1px solid #B8B2A8; padding-top:12px; } #detail-specs ul li, ul#search-specs li { line-height:12px; padding-bottom:5px; color:#958C7D; font-weight:bold; } #detail-specs ul li strong, ul#search-specs li strong { color: #4A5051; } #detail-specs ul li a:hover { text-decoration:underline; } #detail-thumbs { width:270px; position:relative; } #detail-thumbs-inner { position:relative; overflow:auto; margin-top:290px; height:180px;} #detail-thumbs-inner li { float:left; display:inline; text-align:center; width:75px; height:90px; margin:0 8px 12px 0; color:#958C7D; } #detail-thumbs-inner li img { margin-bottom:3px; border:1px solid #333333;} #detail-thumbs-inner li a { display:block; float:left; color:#958C7D; } #detail-thumbs-inner li a:hover, #detail-thumbs-inner li a:hover .block { color:#4A5051; } .block { display:block; font-weight:bold; } #detail-thumbs-inner.border-thumb { margin-top:0; float:right; height:145px;} #detail-thumbs h2.border-head { margin-top:290px; text-align:right; } #large-swatch { position:absolute; top:65px; right:0; border:1px solid #333333; } #large-stickers { position:absolute; top:40px; right:0; } .sticker-caption {text-align:right;} #tech-specs-list {padding-top:25px; font-size:10px; } /*search page div tag*/ #search{ width:400px; height:300px; position:absolute; top:103px; margin:0 auto; margin-left:400px; z-index:10; } #right-nav-inside-search { font-size:10px; } #right-nav-inside-search li { float:left; display:inline; margin-right:3px; } p.search-results { padding-bottom:0; font-weight:bold; } /*==Easy-Match Pag=====*/ #content-inner-ematch { background-color:#000000; text-align:center; overflow:hidden; height:570px; padding:25px; position:relative; } #content-inner-ematch p { color:#5e7dbd; padding-bottom:5px; } #content-inner-ematch h1 { text-align:center; color:#84b94f; font-size:36px; line-height:30px; margin:0;} #content-inner-ematch h1 span { font-size:14px; } #content-inner-ematch h2 { text-align:center; color:#fee100; font-size:20px; line-height:20px; margin:0; padding:5px 0;} #content-inner-ematch h2 span { color:#fd8000;} #content-inner-ewalls { background-color:#000000; text-align:center; overflow:hidden; height:570px; padding:25px; position:relative; } #content-inner-ewalls p { color:#5e7dbd; padding-bottom:5px; clear:both; } #content-inner-ewalls h1 { text-align:center; color:#d8af67; font-size:24px; line-height:22px; margin:0;} #content-inner-ewalls h1 span { font-size:14px; } #content-inner-ewalls h2 { text-align:center; color:#fee100; font-size:20px; line-height:20px; margin:0; padding:5px 0;} #content-inner-ewalls h2 span { color:#fd8000;} #em-image {margin:0 auto;} .center {width:345px; margin:0 auto; overflow:hidden;} .push {margin-right:25px;} p.fb-button a {display:block; } p.fb-button { background-color:#c0c0c0; border:1px solid #918d84; color:#4b4f50; width:125px; text-align:center; margin:15px auto ; position:relative; padding:2px 0; } #em-box { overflow:hidden; position:relative; } .em-main {width:375px; } .em-main li {float:left; display:inline; padding-right:4px; line-height:0; } .hw-video {padding:4px 4px 0 0; clear:left;} .em-articles li {line-height:0; padding:4px 0 0 0; } .em-articles {margin-top:-4px;} /*=Stickers ===================================== .stickers { height: 269px; overflow:hidden; position:relative; border:3px solid #b6a77b; float:right;} .stickers li {float:left; display:block; overflow:hidden; width:65px; height: 269px;} /*.stickers li a { display:block; width:65px; height: 269px; }*/ /*=FOOTER === === === === === === === === === === */ #footer { margin:0 auto; width:820px; clear:both; } #footer-inner { padding:10px 0; color:#E9E2CE; list-style:none; overflow:hidden; } #footer-inner p { color:#E9E2CE; text-transform:uppercase; font-size:9px; } #footer-legal { float:left; color: #333333; width:820px; text-align:left; padding-top:4px; } #footer-legal p { color: #333333; } #footer-legal p a { color: #333333; text-transform:uppercase; } #footer-legal p a:hover { text-decoration:underline; } #copy-info { color: #333333; float:left; margin:0 40px 0 15px; clear:right; padding-top:4px; } #copy-info p { color: #333333; } #copy-info p a { color: #333333; text-transform:uppercase; } #copy-info p a:hover { text-decoration:underline; } #footer-logos { float: right; width:235px; } #footer-logos li { float: left; display:inline; } #footer-logos li a { display:block; margin-right:3px;} #footer-seo { color:#E9E2CE; font-size:12px; } #footer-nav { float:left; font-size:11px; font-weight:normal; color: #E9E2CE; width:820px; text-align:left; padding-top:4px; } #footer-nav p { font-size:11px; text-align:left; font-weight:normal; color: #E9E2CE; text-transform:uppercase; } #footer-nav p a { font-size:11px; text-align:left; font-weight:normal; color: #E9E2CE; text-transform:uppercase; } #footer-nav p a:hover { text-decoration:underline; } /*=SEND PAGE === === === === === === === === === === */ .sendpagebanner { font-size:23px; text-align:left; font-weight:bold; color: #E9E2CE;} .sendpagetext { font-size:13px; text-align:left; font-weight:normal; color: #E9E2CE;} .sendpagehead { font-size:17px; text-align:left; font-weight:normal; color: #E9E2CE;} .sendpagerequired { font-size:13px; text-align:left; font-weight:normal; color: #FF0000;} /*=MISC === === === === === === === === === === */ .invbanner { font-size:13px; font-weight:bold; color: #333333;} .invhead { font-size:11px; font-weight:bold; color: #333333;} .invdetail { font-size:11px; font-weight:normal; color: #333333;} .footerlinks { font-size:11px; font-weight:normal; color: #E9E2CE;" } .footerlinks a:hover { text-decoration:underline; } .shadow { -moz-box-shadow: 3px 3px 4px #333; -webkit-box-shadow: 3px 3px 4px #333; box-shadow: 3px 3px 4px #333; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333'); }