/*====================================================================== Nicholas Sebastian Hair Salon: Screen CSS ----------------------------------------------------------------------*/ * { margin: 0; padding: 0; } body { font: 81.25% Times, "Times New Roman", Georgia, Serif; color: #fff; background: #f1f1f1 url(../img/bg_body.jpg) 0 0 repeat-x; } /*====================================================================== STRUCTURE ----------------------------------------------------------------------*/ #wrap { width: 100%; background: transparent url(../img/bg_lights.jpg) center top no-repeat; } #header { position: relative; margin: 0 auto; width: 780px; height: 143px; } #body-outer { margin: 14px auto 20px; padding-top: 14px; width: 768px; clear: both; background: transparent url(../img/bg_content.png) left top no-repeat; } #body-inner { padding-bottom: 14px; width: 768px; background: transparent url(../img/bg_content.png) right bottom no-repeat; } #content { margin: 0 auto; padding: 0 14px; width: 740px; height: 1%; background: transparent url(../img/bg_content.png) center top repeat-y; overflow: hidden; } #contact { margin: 0 auto; padding: 30px 120px 0; width: 720px; min-height: 185px; clear: both; text-align: center; color: #333; background: transparent url(../img/bg_contact.png) 0 0 no-repeat; overflow: hidden; } * html #contact { height: 185px; } #footer { margin: 0 auto; width: 740px; } /*====================================================================== GENERAL ----------------------------------------------------------------------*/ h1 { margin-bottom: 0.246em; font-size: 2.462em; font-weight: normal; font-style: italic; text-align: center; letter-spacing: -0.045em; color: #fff; } h2 { margin-bottom: 0.3em; font: normal 1.385em "Trebuchet MS", Verdana, Arial, Helvetica, Sans-serif; color: #be6551; } h3 { margin-bottom: 0.167em; font-size: 1.385em; font-weight: normal; font-style: italic; } h4 { font-size: 0.923em; font-weight: normal; text-transform: uppercase; } h4 strong { font-size: 1.167em; font-weight: bold; } h5 { margin-bottom: 0.3em; font-size: 1.167em; font-weight: normal; color: #231f20; } h6 { margin-bottom: 0.3em; font-size: 1em; font-weight: bold; color: #231f20; } a, a:visited { color: #1a93b5; text-decoration: underline; overflow: hidden; } a:hover { color: #f79238; } a img { border: none; } p { margin: 1em 0; line-height: 1.385; } ul { margin: 1.538em 0 1.538em 2em; list-style: circle; } li { margin: 0.5em 0; } address { font-style: normal; } abbr { cursor: help; border-bottom: 1px dotted #333; } .flourish { position: absolute; left: 0; top: 0; width: 740px; height: 278px; background: transparent url(../img/sprite_gallery.png) 0 0 no-repeat; } /*====================================================================== HEADER ----------------------------------------------------------------------*/ #logo { position: absolute; left: 10px; top: 34px; } #logo a { outline: none; } /*====================================================================== NAVIGATION ----------------------------------------------------------------------*/ /*--------------------------------- ACCESSIBILITY NAV ---------------------------------*/ #accessibility-nav { position: absolute; left: -9999px; top: -9999px; } /*--------------------------------- PRIMARY NAV ---------------------------------*/ #primary-nav { position: absolute; right: 0; top: 72px; margin: 0; list-style: none; } #primary-nav li { margin: 0 0 0 4px; float: left; } * html #primary-nav li { display: inline; } #primary-nav li a { display: block; float: left; height: 22px; font-size: 1px; text-indent: -9999px; background: transparent url(../img/bg_primary-nav.png) 0 0 no-repeat; } /*-- SERVICES --*/ #primary-nav li.nav-services a { width: 96px; background-position: 0 0; } #primary-nav li.nav-services a:hover { background-position: 0 -22px; } #primary-nav li.nav-services a.current, #primary-nav li.nav-services a:hover.current { background-position: 0 -44px; } /*-- PRODUCTS --*/ #primary-nav li.nav-products a { width: 107px; background-position: -100px 0; } #primary-nav li.nav-products a:hover { background-position: -100px -22px; } #primary-nav li.nav-products a.current, #primary-nav li.nav-products a:hover.current { background-position: -100px -44px; } /*-- TEAM --*/ #primary-nav li.nav-team a { width: 69px; background-position: -211px 0; } #primary-nav li.nav-team a:hover { background-position: -211px -22px; } #primary-nav li.nav-team a.current, #primary-nav li.nav-team a:hover.current { background-position: -211px -44px; } /*-- TEAM --*/ #primary-nav li.nav-gallery a { width: 96px; background-position: -284px 0; } #primary-nav li.nav-gallery a:hover { background-position: -284px -22px; } #primary-nav li.nav-gallery a.current, #primary-nav li.nav-gallery a:hover.current { background-position: -284px -44px; } /*====================================================================== FORMS ----------------------------------------------------------------------*/ .input-text, .input-password, textarea { padding: 4px 6px; font-size: 0.917em; color: #666; border-top: 2px solid #848484; border-right: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5; border-left: 2px solid #848484; } /*====================================================================== HOMEPAGE ----------------------------------------------------------------------*/ #callouts { margin: 1em auto; width: 780px; height: 248px; list-style: none; overflow: hidden; } #callouts li { margin: 0 6px; padding: 14px; width: 220px; height: 220px; float: left; background: transparent url(../img/bg_callout.png) 0 0 no-repeat; } * html #callouts li { display: inline; } #callouts li span { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; } #callouts li img { display: block; position: absolute; left: 0; top: 0; } #promos { margin: 0; min-height: 65px; list-style: none; background: #7b2d22 url(../img/bg_promos.png) right bottom no-repeat; } * html #promos { height: 65px; } #promos li { margin: 0 64px 0 12px; padding-top: 25px; font-size: 1.385em; } #promos li a { color: #fff; text-decoration: underline; } #promos li a:hover { color: #fff; text-decoration: none; } /*====================================================================== PRODUCTS ----------------------------------------------------------------------*/ #products { position: relative; background: #030301 url(../img/bg_products.jpg) 0 0 repeat-x; } #products h1 { padding-top: 50px; min-height: 108px; _height: 108px; font-size: 1.2em; letter-spacing: 0.045em; color: #ccc; } #products .product h2 { position: absolute; left: -9999px; top: -9999px; } #products .product a, #products .product a:hover, #products .product img { display: block; text-decoration: none; } /*====================================================================== SERVICES ----------------------------------------------------------------------*/ #services { padding: 75px 175px; background: #5c0202 url(../img/bg_services.jpg) 0 0 no-repeat; } #services .service { margin-bottom: 50px; padding-bottom: 30px; height: 1%; background: transparent url(../img/bg_flourish.png) center bottom no-repeat; overflow: hidden; } #services .last { margin-bottom: 0; background: none; } /*--------------------------------- PRICE LIST ---------------------------------*/ #services .service ul.price-list { margin: 1.5em auto; width: 280px; height: 1%; list-style: none; overflow: hidden; } #services .service ul.price-list li { margin: 0.25em 0; width: 100%; float: left; clear: both; font-size: 0.923em; background: transparent url(../img/bg_dotted-line.gif) left bottom repeat-x; } #services .service ul.price-list li span.name { padding-right: 3px; float: left; font-style: italic; background: transparent url(../img/bg_dotted-line-mask.gif) left bottom repeat-x; } #services .service ul.price-list li span.separator { display: none; } #services .service ul.price-list li span.price { padding-left: 3px; float: right; background: transparent url(../img/bg_dotted-line-mask.gif) left bottom repeat-x; } /*--------------------------------- EXTENDED PRICE LIST ---------------------------------*/ #services .service ul.extended-price-list { margin: 0; list-style: none; } #services .service ul.extended-price-list li { margin-bottom: 1.846em; } #services .service ul.extended-price-list li h2 { position: relative; padding-right: 40px; } #services .service ul.extended-price-list li h2 span { font-size: 0.6em; text-transform: uppercase; } #services .service ul.extended-price-list li h2 span.separator { display: none; } #services .service ul.extended-price-list li h2 span.price { position: absolute; right: 0; top: 0; font-size: 1em; text-transform: none; } #services .service ul.extended-price-list li p { font-size: 1.077em; } #services .service ul.extended-price-list li p span.note { display: block; margin: 3em 0 1em; font: 0.714em "Trebuchet MS", Verdana, Arial, Helvetica, Sans-serif; } /*====================================================================== TEAM ----------------------------------------------------------------------*/ .team #members { position: relative; float: left; background: #5c0202 url(../img/bg_team.png) 0 0 repeat; } .team #members ul.member-list { margin: 0; padding: 60px 0 160px 162px; width: 578px; float: left; list-style: none; background: transparent url(../img/bg_members.png) 0 0 repeat-x; } .team #members ul.member-list li.member { margin: 0 16px 28px 0; float: left; } .team #members ul.member-list li.last { margin-right: 0; } .team #members ul.member-list li.single { margin-left: 151px; } * html .team #members ul.member-list li.single { display: inline; } .team #members ul.member-list li.member .photo { position: relative; width: 135px; height: 170px; } .team #members ul.member-list li.member .photo img { display: block; padding: 25px 0 0 29px; } .team #members ul.member-list li.member .photo .frame { display: block; position: absolute; left: 0; top: 0; width: 135px; height: 170px; background: transparent url(../img/bg_photo-frame.png) 0 0 no-repeat; } .team #members ul.member-list li.member .info-container { display: none; position: absolute; left: 215px; top: 65px; padding-bottom: 86px; width: 308px; background: transparent url(../img/bg_modal.png) right bottom no-repeat; z-index: 3000; } .team #members ul.member-list li.member .info-container .photo-matte { position: absolute; left: 115px; top: 31px; z-index: 1000; } .team #members ul.member-list li.member .info-container .photo-matte img { display: block; } .team #members ul.member-list li.member .info-container a.close { position: absolute; left: 34px; bottom: 0; width: 240px; height: 80px; font-size: 1px; text-indent: -9999px; background: transparent url(../img/bg_modal.png) -358px -236px no-repeat; z-index: 4000; } .team #members ul.member-list li.member .info-container a:hover.close, .team #members ul.member-list li.member .info-container a:active.close, .team #members ul.member-list li.member .info-container a:focus.close { background-position: -358px -396px; outline: none; } .team #members ul.member-list li.member .info { position: relative; width: 258px; padding: 156px 25px 0; float: left; color: #333; background: transparent url(../img/bg_modal.png) left top no-repeat; z-index: 2000; } .team #members ul.member-list li.member .info h1 { margin: 0; font-size: 1.385em; font-weight: normal; font-style: normal; color: #333; } .team #members ul.member-list li.member .info h2 { font: normal 0.846em Times, "Times New Roman", Georgia, Serif; text-transform: uppercase; text-align: center; letter-spacing: 0.05em; color: #333; } .team #members ul.member-list li.member .info ul.attributes { margin: 1em 0; list-style: none; } .team #members ul.member-list li.member .info ul.attributes li { margin: 0 0 6px; } .team #members ul.member-list li.member .info ul.attributes li strong { margin: 0 5px 6px 0; font: normal 1em "Times New Roman", Times, Georgia, Serif; text-transform: uppercase; color: #666; } .team #members ul.member-list li.member .info ul.attributes li strong.more-info { display: block; margin: 12px 0 0 0; } .team #members ul.member-list li.member .info ul.attributes li p { margin: 0 0 0.5em; } /*====================================================================== GALLERY ----------------------------------------------------------------------*/ .gallery .flourish { display: none; } .gallery .with-flourish .flourish { display: block; } .gallery #image-container { position: relative; height: 489px; background-color: #413437; } .gallery #image-container #image img { display: block; margin: 0 auto; } .gallery #image-container #image p { margin: 0 auto; padding: 160px 0 0 20px; width: 450px; font-size: 1.8em; } .gallery #image-container #image p span { display: block; } .gallery #image-container .divider { position: absolute; left: 0; bottom: -5px; width: 740px; height: 15px; background: transparent url(../img/sprite_gallery.png) left -295px no-repeat; } .gallery .loader { display: none; position: absolute; left: 340px; top: 210px; width: 60px; height: 60px; background: transparent url(../img/sprite_gallery.png) left -328px no-repeat; } .gallery .loader img { display: block; margin: 21px 0 0 22px; } .gallery .loading .loader { display: block; } .gallery #gallery-container { padding: 20px 0 40px; background-color: #5d4b4f; } .gallery #gallery-list { margin-bottom: 20px; padding: 0 105px; text-align: center; } .gallery #gallery-list h2 { margin-right: 3px; display: inline; font: normal 0.923em Times, "Times New Roman", Georgia, Serif; text-transform: uppercase; letter-spacing: 0.075em; color: #241d1f; } .gallery #gallery-list ul { margin: 0; display: inline; list-style: none; } .gallery #gallery-list ul li { margin: 0; display: inline; } .gallery #gallery-list ul li a { color: #ccc; padding: 5px 10px; text-decoration: none; outline: none; } .gallery #gallery-list ul li a:hover { color: #fff; } .gallery #gallery-list ul li a.current-gallery { text-decoration: none; background-color: #45383b; cursor: default; } .gallery #gallery-list ul li a:hover.current-gallery { color: #ccc; } .gallery #thumbs-container { position: relative; height: 79px; clear: both; overflow: hidden; } .gallery .thumbs { position: absolute; left: 0; top: -80px; width: 740px; } .gallery .current-gallery { top: 0; } .gallery .carousel-images { margin-left: 103px; } .gallery .carousel-images ul { margin: 0 0 0 12px; list-style: none; } .gallery .carousel-images ul li { margin: 0 12px 0 0; float: left; } .gallery .carousel-images ul li a { display: block; background-color: #000; border: 3px solid #dbd7d8; outline: none; } .gallery .carousel-images ul li a.current { border-color: #ffd08c; cursor: default; } .gallery .carousel-images ul li a img { display: block; opacity: 0.5; } .gallery .carousel-images ul li a.current img { opacity: 1; } .gallery .carousel-controls a { display: block; position: absolute; width: 69px; height: 69px; font-size: 1px; text-indent: -9999px; background-color: transparent; background-image: url(../img/sprite_gallery.png); background-repeat: no-repeat; outline: 0; } .gallery .carousel-controls .prev a { left: 22px; top: 10px; background-position: -60px -328px; } .gallery .carousel-controls .prev a:hover { background-position: -129px -328px; } .gallery .carousel-controls .prev a.disabled, .gallery .carousel-controls .prev a:hover.disabled { background-position: -198px -328px; cursor: default; } .gallery .carousel-controls .next a { right: 22px; top: 10px; background-position: -267px -328px; } .gallery .carousel-controls .next a:hover { background-position: -336px -328px; } .gallery .carousel-controls .next a.disabled, .gallery .carousel-controls .next a:hover.disabled { background-position: -405px -328px; cursor: default; } /*====================================================================== CONTACT ----------------------------------------------------------------------*/ #contact p { margin: 0; font-size: 1.077em; font-style: italic; text-transform: lowercase; color: #666; } #contact a { text-decoration: underline; color: #666; } #contact a:hover { color: #333; } #contact #phone { margin-right: 20px; width: 220px; float: left; } #contact #hours { margin-right: 20px; width: 240px; float: left; } #contact #hours ul { margin: 0; list-style: none; } #contact #hours ul li { margin: 0 0 0.2em; font-size: 0.923em; text-transform: uppercase; } #contact #address { width: 220px; float: left; } /*====================================================================== FOOTER ----------------------------------------------------------------------*/ #footer { position: relative; margin: -0.769em auto 40px; clear: both; } #footer a { text-decoration: underline; color: #818181; } #footer a:hover { color: #333; } #footer ul { margin: 0; list-style: none; text-align: center; } #footer ul li { margin: 0 6px 0 0; padding-right: 6px; display: inline; font: 0.846em "Trebuchet MS", Verdana, Arial, Helvetica, Sans-serif; color: #818181; border-right: 1px solid #dadada; } #footer ul li.last { margin: 0; padding: 0; border: none; } #footer ul li.last span { font-family: Times, "Times New Roman", Georgia, Serif; }