/* Site Layout Styles * Updated: Date @ Time * Author: Firstname Lastname * ---------------------------------------------*/ @import "thickbox.css"; /* -- TOC --------------------------------------- 1. Colors 2. Reset 3. Fix Floats 4. Links 5. Typography 6. Structure */ /* -- COLORS ---------------------------------------*/ /* blue = #057ed0 green = #5da845 orange = #ff8b00 */ /* -- RESET ---------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, 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; outline: 0; font-size: inherit; font-family: inherit; list-style: none; } table { border-collapse: collapse; border-spacing: 0; } /* -- FIX FLOATS ---------------------------------------*/ .clearfix:after { display: block; clear: both; height: 0; content: "."; visibility: hidden; } * html .clearfix { height: 1%; } *+ html .clearfix { height: 1%; } /* -- LINKS ---------------------------------------*/ a { color: #057ed0; } a:hover { text-decoration: none; } /* -- TYPOGRAPHY ---------------------------------------*/ h2 { font-size: 1em; } h3 { margin: 0 0 .5em; color: #057ed0; font-size: 1.4em; } p { margin: 0 0 .5em; } /* -- STRUCTURE ---------------------------------------*/ body { margin: 70px 0; background: url(../images/body.gif) repeat-x; color: #666666; font: 62.5%/1.6 "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; } /* -- container */ #container { width: 980px; margin: 0 auto; } /* header ------------------------------------- */ #header { position: relative; height: 112px; padding: 0; margin: 0; z-index: 99; } /* logo */ #header h1 { float: left; padding: 20px 0 0 30px; } /* login */ #header .logout { position: absolute; top: 33px; right: 265px; padding: 0; margin: 0; } #header .login { position: absolute; top: 33px; right: 265px; padding: 0; margin: 0; } /* search */ #header form { float: right; width: 222px; height: 34px; margin: 25px 25px 0 0; background: url(../images/search.gif) no-repeat; } #header form input, #header form button { float: left; } #header form input { width: 168px; margin: 0; padding: 10px 5px 0; border: 0; background: none; color: #057ed0; font-size: 11px; font-weight: bold; font-style: italic; } #header form button { width: 43px; height: 34px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; text-indent: -999em; } /* navigation */ #header ul { float: right; clear: right; width: 450px; height: 37px; margin: 16px 15px 0 0; } #header li { position: relative; float: left; height: 37px; z-index: 99; } #header li a { display: block; height: 37px; background-image: url(../images/btn-nav.gif); text-indent: -999em; } #header ul.sf-menu ul { position: absolute; top: -999em; width: 231px; height: auto; margin: 0; padding: 0 0 7px; background: url(../images/bg-menu.png) left bottom no-repeat; } #header ul.sf-menu li:hover ul, #header ul.sf-menu li.sfHover ul { top: 37px; left: 0; z-index: 99; } #header ul.sf-menu li li:hover ul, #header ul.sf-menu li li.sfHover ul { top: 0; left: 231px; } /* off state */ #header li a.home { width: 71px; background-position: 0 -37px; } #header li a.aboutus { width: 98px; background-position: -71px 0; } #header li a.products { width: 101px; background-position: -169px 0; } #header li a.news { width: 69px; background-position: -270px 0; } #header li a.contactus { width: 111px; background-position: -339px 0; } /* over state */ #header li a.home:hover { width: 71px; background-position: 0 -37px; } #header li a.aboutus:hover, #header li a.aboutus-on { width: 98px; background-position: -71px -37px; } #header li a.products:hover, #header li a.products-on { width: 101px; background-position: -169px -37px; } #header li a.news:hover, #header li a.news-on { width: 69px; background-position: -270px -37px; } #header li a.contactus:hover, #header li a.contactus-on { width: 111px; background-position: -339px -37px; } /* hover state */ #header li:hover a.aboutus, #header li.sfHover a.aboutus { background-position: -71px -37px; } #header li:hover a.products, #header li.sfHover a.products { background-position: -169px -37px; } #header ul.sf-menu li li { width: 231px; height: auto; border-bottom: 1px solid #808080; background: #000; } #header ul.sf-menu li li a { float: none; height: auto; padding: 6px 13px; color: #fff; font-size: 1.1em; background: #000; text-decoration: none; text-indent: 0; } #header ul.sf-menu li.end { border-bottom: none; } #header ul.sf-menu li li span.sf-sub-indicator { display: block; position: absolute; top: 1em; right: 1em; width: 5px; height: 9px; text-indent: -999em; overflow: hidden; background: url(../images/white-icon-arrow.gif) no-repeat; } /* -- banner */ #banner { position: relative; height: 228px; background: url(../images/bg.gif) 0 0 no-repeat; z-index: 1; } #welcome { float: left; width: 259px; padding: 25px 30px 0; } #welcome h2 { position: relative; width: 78px; height: 13px; margin: 0 0 1.5em; } #welcome h2 span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/h2-welcome.gif) no-repeat; } #welcome p { color: #fff; font-size: 1.1em; } #welcome a { color: #fff; } #banner #flash { position: absolute; top: 0; right: -34px; width: 695px; height: 249px; overflow: hidden; z-index: 99; } /* -- content */ #content { margin: 0 0 15px; background: url(../images/bg.gif) 0 -228px no-repeat; font-size: 1.1em; } #content .col { float: left; width: 276px; padding: 25px 25px 0; } /* headings */ #content h2 { position: relative; width: 226px; height: 16px; margin: 0 0 1em; } #content h2 span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #content .occassional h2 span { background: url(../images/h3-occassional-furniture.gif) no-repeat; } #content .cabinets h2 span { background: url(../images/h3-display-cabinets.gif) no-repeat; } #content .product h2 span { background: url(../images/h3-featured-product.gif) no-repeat; } #content .occassional a { color: #ff8b00; text-decoration: none; } #content .cabinets a { color: #5da845; text-decoration: none; } #content .occassional img, #content .cabinets img { float: left; padding: 0 5px 10px 0; } #content .product img.product_thumb { float: right; padding: 0 0 5px 10px; } p.more { text-align: right; } p.more a { background: url(../images/black-icon-arrow.gif) 0 3px no-repeat; padding: 0 0 0 12px; color: #057ed0; text-transform: uppercase; text-decoration: none; } #welcome p.more a { background: url(../images/white-icon-arrow.gif) 0 3px no-repeat; color: #fff; } #content .occassional ul, #content .cabinets ul { padding: 10px 0 0; } #content .occassional ul li, #content .cabinets ul li { padding: 0 0 10px; } #content .occassional ul li h4, #content .cabinets ul li h4 { font-size: 1.2em; } #content .occassional ul li a, #content .cabinets ul li a { color: #ff8b00; text-decoration: none; } #content .cabinets ul li a { color: #5da845; } #content .occassional ul li img, #content .cabinets ul li img { float: left; padding: 0 8px 0 0; } /* -- footer */ #footer { height: 35px; background: url(../images/bg.gif) 0 -2165px no-repeat; color: #fff; font-size: 1.1em; } #footer a { color: #fff; } #footer p { padding: 9px 15px; } #footer p#developed { float: right; } /* thickbox for members login */ #TB_window div div { position: relative; width: 430px; height: 288px; background: #fff url(../images/bg-login.jpg) no-repeat; } #TB_window div div form { position: absolute; top: 120px; left: 40px; } #TB_window div div form ol li { list-style: none; margin: 0 0 .75em; padding: 0; } #TB_window div div form ol li label { float: left; display: block; width: 70px; margin: 0 10px 0 0; font-size: 1.3em; text-align: right; } #TB_window div div form input { width: 230px; border: 1px solid #ddd; padding: 1px 0; height: 15px; } #TB_window div div form button { width: 140px; margin: 0 0 0 75px; border: 0; background: none; cursor: pointer; } #TB_window div div a { position: absolute; top: 256px; left: 0; width: 146px; height: 32px; margin: 0; padding: 0; display: block; text-indent: -999em; }