/* CSS Document */ /* Citywizz Design, graphic designer Stéphane ARRAMI - www.citywizz.com */ /* Couleurs du site: Synergy Blue B9C9FC, Teal 6D929B, Brown A19787, Light Green C1DAD6*/ /* Global reset */ /* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */ *, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h5, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 } table { border-collapse:collapse; border-spacing:0 } fieldset, img { border:0 } address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal } ol, ul, li { list-style:none } caption, th { text-align:left } h1, h2, h3, h5, h5, h6 { font-size:100% } q:before, q:after { content:''} ol, ul, li { list-style:none } * a { position:relative } /* Gets links displaying over a PNG background */ a { outline:none } /* Gets rid of Firefox's dotted borders */ a img { border:none } /* Gets rid of IE's blue borders */ /* Body Settings and Background */ html,body{margin:0; padding:0; border:0; font-size:14px; font-family: Helvetica, "Trebuchet MS", "Lucida Grande","Lucida Sans Unicode", Verdana, "sans serif"; color:#000;} html{background:#FFF url(../img/BG.jpg) top left repeat-x} a {color: #A19787; text-decoration: none;} a:hover {color: #6D929B; text-decoration: none} body{width:100%; margin:0 auto;background:#FFF url(../img/BG.jpg) top left repeat-x} *{margin:0; padding:0} #maincontainer{ width: 950px; /*Width of main container*/ margin: 0 auto; /*Center container on page*/ } #header{ height: 130px; /*Height of top section*/ } #logo { width: 329px; float: left; padding-top: 10px; } /********Header Links Section********/ #toplinks {padding-top: 35px;} .block {font-size: .95em; border-left: 1px dashed #A19787; float: right; width: 200px} .block ul {margin: 0; list-style-type: none;} .block ul li {padding: 3px 0 3px 20px; display: block; border-bottom: 1px dashed #A19787; color: #B7AFA3; line-height: 1.5em; text-decoration: none; background: url(../img/arrow2.gif) no-repeat 0px 2px } .block ul li:hover {padding: 3px 0 3px 20px; display: block; border-bottom: 1px dashed #A19787; color: #6D929B; line-height: 1.5em; text-decoration: none; background: url(../img/arrow1.gif) no-repeat 0px 2px} .block ul li a:hover {color: #6D929B;} .block ul a{text-decoration: none; color:#A19787} .block ul li.active a{color:#6D929B;} /********Content Info********/ #contentwrapper{ float: left; width: 100%; padding-bottom: 1.4em } #contentcolumn{ margin-right: 300px; /*Set right margin to RightColumnWidth*/ padding-left: 25px; color: #666; padding-bottom: 1.4em; padding-top: 25px; font-size: 1.2em; line-height:1.5em } #contentcolumn p {padding-bottom: 1.2em} #contentcolumn img {float: left; border: 1px solid #6D929B; margin-right: 10px;} /******** Rotating Images ********/ #rotatewrapper {overflow: hidden;} #rotateleft { float: left; margin-left: 5px; width:285px; height: 218px; background: url(../img/image1.jpg) top left no-repeat; } #rotateleft img {} #rotatecenter { float: left; margin-left: 35px; width:285px; height: 218px; background: url(../img/image4.jpg) top left no-repeat; } #rotatecenter img {} #rotateright { float: left; margin-left: 30px; width:285px; height: 218px; background: url(../img/image7.jpg) top left no-repeat; } #rotateright img {} /********About section for Frontpage********/ #about { float: left; width: 415px; margin-left: 20px; line-height: 1.4em; } #about p {padding-bottom: 1.4em; padding-left: 10px; color: #666} /********Gift Certificate Section for Frontpage and Right Column********/ #giftcert { float: left; width: 225px; margin-left: 1px; padding-left:20px; line-height: 1.4em; } #giftcert p {padding-bottom: 1.4em; color:#666} /********Latest News Section for Frontpage********/ #latestnews { float: left; width: 225px; margin-left: 20px; line-height: 1.4em; } #latestnews p {padding-bottom: 1.4em; color: #666} .learnmore a {padding-left: 15px;background: url(../img/arrow2.gif) no-repeat -5px -3px;} .learnmore a:hover {padding-left: 15px;background: url(../img/arrow1.gif) no-repeat -5px -3px;} .learnmore2 a {padding-left: 15px;background: url(../img/arrow2.gif) no-repeat -5px -3px; color: #666;} .learnmore2 a:hover {padding-left: 15px;background: url(../img/arrow2.gif) no-repeat -5px -3px; color:#6D929B;} /********Right Column********/ #rightcolumn{ float: left; width: 300px; /*Width of right column*/ margin-left: -300px; /*Set left margin to -(RightColumnWidth) */ } .rightinner { margin: 10px;} .rightcolwrap {padding: 15px 0 0 35px;} /********FOOTER********/ #footer{ clear: left; width: 950px; color: #6D929B; padding: 23px 10px; border-top: 3px dashed #B9C9FC; border-bottom: 5px solid #B9C9FC; overflow: hidden;} #footer a {color: #6D929B} #footer a:hover {color: #666} #footerlinks{ float: left; width: 650px; font-size: .9em; } #footercontact{ float:right; width: 250px; text-align: right; font-size:1.0em; line-height: 1.3em; } #footercontact p{ font-size:.9em; text-align: right; color:#666;} #siteInfo {float: left;padding-top: 25px; padding-bottom: 5px; color: #6f94a5; font-size: .85em;} #siteInfo a {color: #A19787} #siteInfo a:hover {color: #B9C9FC} .innertube{ margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/ margin-top: 0; } .clear {clear: left;} /********* Accordian **********/ .tower {float: left; width:500px; margin-left: 50px; padding-top: 25px;} UL.drawers {width: 500px;} UL {list-style: none; margin: 0;padding: 5px;} LI A {text-decoration: none;color: #666;} .drawer ul li{padding-left: 20px; background: #FFF url(../img/arrow4.gif) no-repeat 0px -3px;line-height: 1.3em; font-size: .95em; color:#666;} H2.drawer-handle {font-family: Helvetica, "Trebuchet MS", "Lucida Grande","Lucida Sans Unicode", Verdana, "sans serif"; color: #660000;background-color: #EBEBEB; border-bottom: 1px solid #99CC00; font-size: 1.1em;padding: 9px 0 5px 8px; margin-bottom: 5px;font-weight:100} H2.drawer-handle.open {font-family: Helvetica, "Trebuchet MS", "Lucida Grande","Lucida Sans Unicode", Verdana, "sans serif"; color: #FFF;background-color: #99CC00; border-bottom: 1px solid #660000; font-size: 1.1em;padding: 9px 0 5px 8px; margin-bottom: 5px;font-weight: 100} .drawers p {;line-height: 1.3em; font-size: .95em; color:#666;} .portImageCont {float:right; text-align:center;} .portImage {padding-right: 50px; text-align: center;font-size: .85em} /********EmailForm ********/ #EmailForm {width: 360px;text-align: left;padding-bottom: 20px;border: none;font-size:.95em;margin-top: -30px;} #EmailForm.full { width: 100%; } fieldset {border: none;} legend {display: none;} #EmailForm h3 {clear: both;padding: 15px 0 5px;font-size: 14px;font-family: Helvetica, Arial, sans-serif;color: #666;font-weight: bold;} #EmailForm label,#EmailForm p {display: block;clear: both;width: 310px;font-size: 1em;line-height: 1.5em;padding: 0 0 9px;} #EmailForm input {display: block;margin-top: 3px;} #EmailForm select {float: left;display: block;} #EmailForm label.first,#EmailForm label.city {clear: left;margin-right: 10px;width: 150px;} #EmailForm label.second,#EmailForm label.state {float: left;clear: none;margin: 0 10px 0 0;width: 150px;} #EmailForm label.state { width: 60px; } #EmailForm label.first input,#EmailForm label.city input,#EmailForm label.second input {float: left;width: 150px;padding: 0;} #EmailForm label.state select {width: 60px;float: left;margin-top: 3px;} #EmailForm label.zip,#EmailForm label.zip input {float: left;width: 80px;} #EmailForm label.zip { clear: none; } #EmailForm label {float: left;clear: left;width: 310px;margin: 0;line-height: 1.5em;} #EmailForm label input {float: left;width: 310px;padding: 0;} #EmailForm input.radio, #EmailForm input#radiobutton_1, #EmailForm input#radiobutton_2, #EmailForm input#radiobutton_3, #EmailForm input#radiobutton_4 {clear: left;float: left;padding: 0;margin: 0;} #EmailForm label.radio, #EmailForm label.radioitem {clear: none;margin: 0 0 0 25px;padding: 0 0 15px;} #EmailForm input.checkbox, #EmailForm input#checkbox_1, #EmailForm input#checkbox_2, #EmailForm input#checkbox_3, #EmailForm input#checkbox_4 {clear: both;float: left;padding: 0;margin: 0;} #EmailForm label.checkbox {clear: none;margin: 0 0 0 25px;padding: 0 0 15px;} /* style the #EmailForm elements to look similar across browsers ... emulates Safari */ #EmailForm label input, #EmailForm textarea {border: 1px solid #A19787;border-left-color: #666;border-top-color: #666;padding: 2px 2px;height: 22px;line-height: 20px;background: #B9C9FC url(images/input-bg.gif) repeat-x top left;} #EmailForm input.checkbox, #EmailForm select {border: 1px solid #A19787;border-left-color: #666;border-top-color: #666;background-color: #B9C9FC;} #EmailForm textarea {margin-top: 3px;width: 383px;height: auto;display: block;} #EmailForm label input.calc {text-align: right;width: 100px;clear: left;padding: 0;} #EmailForm input.button {clear: left;border: 1px solid #A19787;border-left-color: #666;border-top-color: #666;background-color: #B9C9FC} #cfContact{padding: 3px;color: #666;} /*********Headers**********/ h1 {font-family: Helvetica, "Trebuchet MS", "Lucida Grande","Lucida Sans Unicode", Verdana, "sans serif"; color: #A19787; font-size: 1.4em; border-bottom: 1px dotted #99CC00;padding-bottom: 5px; margin-bottom: 10px;} h2 {font-family: Helvetica, "Trebuchet MS", "Lucida Grande","Lucida Sans Unicode", Verdana, "sans serif"; color: #A19787; font-size: 1.2em;padding-bottom: 5px; margin-bottom: 5px;} h3 {font-family: Helvetica, "Trebuchet MS", "Lucida Grande","Lucida Sans Unicode", Verdana, "sans serif"; color: #6D929B; font-size: 1.1em; margin: 5px 0;border-bottom: 1px dashed #6D929B;} h4 {font-family: Helvetica, "Trebuchet MS", "Lucida Grande","Lucida Sans Unicode", Verdana, "sans serif"; color: #666; font-size: .9em; margin: 8px 0; border-bottom: 1px dashed #B9C9FC;} #services2 h1 {height:40px; background: #FFF url(../img/services2_head.jpg) top left no-repeat; text-indent: -9999px; border-bottom: 1px dotted #99CC00; } #contact_head h1 {height:25px; background: #FFF url(../img/contact_head.jpg) top left no-repeat; text-indent: -9999px; border-bottom: 1px dotted #666;margin-bottom: 15px} #news h1 {height:25px; background: #FFF url(../img/news_head.jpg) top left no-repeat; text-indent: -9999px; border-bottom: 1px dashed #666;margin-bottom: 15px;} #about_head h1 {height:25px; background: #FFF url(../img/apropos_head.jpg) top left no-repeat; text-indent: -9999px; border-bottom: 1px dashed #666;margin-bottom: 15px;} #mani_head h1 {height:25px; background: #FFF url(../img/mani_head.jpg) top left no-repeat; text-indent: -9999px; border-bottom: 1px dashed #666;margin-bottom: 15px;} #pedi_head h1 {height:25px; background: #FFF url(../img/pedi_head.jpg) top left no-repeat; text-indent: -9999px; border-bottom: 1px dashed #666;margin-bottom: 15px;} #skincare_head h1 {height:25px; background: #FFF url(../img/skincare_head.jpg) top left no-repeat; text-indent: -9999px; border-bottom: 1px dashed #666;margin-bottom: 15px;} #color h1 {height:25px; background: #FFF url(../img/color_head.jpg) top left no-repeat; text-indent: -9999px; border-bottom: 1px dashed #666;margin-bottom: 15px;} #justhim h1 {height:25px; background: #FFF url(../img/justhim_head.jpg) top left no-repeat; text-indent: -9999px; border-bottom: 1px dashed #666;margin-bottom: 15px;} #packages h1 {height:25px; background: #FFF url(../img/packages_head.jpg) top left no-repeat; text-indent: -9999px; border-bottom: 1px dashed #666;margin-bottom: 15px;} #detox h1 {height:25px; background: #FFF url(../img/detox_head.jpg) top left no-repeat; text-indent: -9999px; border-bottom: 1px dashed #666;margin-bottom: 15px;} #massage h1 {height:25px; background: #FFF url(../img/massage_head.jpg) top left no-repeat; text-indent: -9999px; border-bottom: 1px dashed #666;margin-bottom: 15px;} #waxing h1 {height:25px; background: #FFF url(../img/waxing_head.jpg) top left no-repeat; text-indent: -9999px; border-bottom: 1px dashed #666;margin-bottom: 15px;} #custom h1 {height:25px; background: #FFF url(../img/custom_head.jpg) top left no-repeat; text-indent: -9999px; border-bottom: 1px dashed #666;margin-bottom: 15px;} #giftcert2 h1 {height:25px; background: #FFF url(../img/giftcert2_head.jpg) top left no-repeat; text-indent: -9999px; border-bottom: 1px dashed #666;margin-bottom: 15px;} #synergyservices h1 {height:25px; background: #FFF url(../img/synergyservices_head.jpg) top left no-repeat; text-indent: -9999px; border-bottom: 1px dashed #666;margin-bottom: 15px;} #products h1 {height:25px; background: #FFF url(../img/prod_head.jpg) top left no-repeat; text-indent: -9999px; border-bottom: 1px dashed #666;margin-bottom: 15px;} #latestnews h4 {height:25px; background: #FFF url(../img/lastestnews_head.jpg) top left no-repeat; text-indent: -9999px; border-bottom: 1px dashed #B9C9FC} #giftcert h4 {height:25px; background: #FFF url(../img/zoom_head.jpg) bottom left no-repeat; text-indent: -9999px; border-bottom: 1px dashed #B9C9FC} #about h4 {height:25px; background: #FFF url(../img/apropos_head.jpg) bottom left no-repeat; text-indent: -9999px; border-bottom: 1px dashed #B9C9FC} #newsletter h4 {height:25px; background: #FFF url(../img/newsletter_head.jpg) bottom left no-repeat; text-indent: -9999px; border-bottom: 1px dashed #B9C9FC} #produits h4 {height:25px; background: #FFF url(../img/newsletter_head.jpg) bottom left no-repeat; text-indent: -9999px; border-bottom: 1px dashed #B9C9FC} #PDF {width: 200px; text-align: center;padding: 10px;margin: 25px 0 0 25px} .bodylist ul li{padding-left: 20px; background: #FFF url(../img/arrow2.gif) no-repeat 0px 0px;line-height: 1.3em; font-size: .95em; color:#666;} .bodylist ul {margin: -15px 0 10px 0} .bodylist p {margin-bottom: -20px;} /*********Services Section**********/ #servicescontain {width: 925px; min-height: 222px; overflow: hidden; background: url(../img/services_BG.jpg) top left no-repeat; margin: 10px 0 0 20px; line-height: 1.5em; color:#666;} #servicescontain h4 {height:70px; text-indent: -9999px; border-bottom: none;} .services {float: left;margin: -50px 0 0 20px;width:270px;max-height: 200px; overflow: hidden;} .services ul {margin: 0; list-style-type: none;} .services ul li {padding: 7px 0 5px 20px; display: block; border-bottom: 1px dashed #6D929B; color: #666; line-height: 1.5em; text-decoration: none; background: url(../img/arrow2.gif) no-repeat 0px 6px } .services ul li:hover {padding: 7px 0 5px 20px; display: block; border-bottom: 1px dashed #6D929B; color: #6D929B; line-height: 1.5em; text-decoration: none; background: url(../img/arrow2.gif) no-repeat 0px 6px} .services ul li a:hover {color: #6D929B;} .services ul a{text-decoration: none; color:#666} /********Newsletter Sign-up Right Column Link********/ .leftForm { color: #666; font-size: .9em;} .rightForm {color:#666; font-size: .9em;} /********Newsletter Form********/ .leftForm {float: left;width: 200px;text-align: right;} .rightForm {float: left;margin-left: 15px;text-align: left;width: 250px;} /********Ditto Info********/ .dittowrap {width: 570px;} .ditto_summaryPost {float: left; width: 250px; font-size:.9em; line-height: 1.4em; color: #666; margin: 0 0 5px 20px;} .ditto_info {font-size: .85em; color: #666; font-style: italic; padding: 5px 0 0px 10px} .ditto_link {margin-top: -10px;} .ditto_link a {padding-left: 15px;background: url(../img/arrow2.gif) no-repeat -5px -3px;} .ditto_link a:hover {padding-left: 15px;background: url(../img/arrow1.gif) no-repeat -5px -3px;} .ditto_summaryPost2 {float: left; line-height: 1.4em; color: #666; padding-bottom: 15px;margin: 10px 0 15px 0;} .ditto_summaryPost2 h3 {font-family: Helvetica, "Trebuchet MS", "Lucida Grande","Lucida Sans Unicode", Verdana, "sans serif"; color: #6D929B; font-size: 1.1em; margin: -15px 0 5px 0;border-bottom: none;} .ditto_link2 {} .ditto_link2 a {padding-left: 15px;background: url(../img/arrow2.gif) no-repeat -5px -3px;} .ditto_link2 a:hover {padding-left: 15px;background: url(../img/arrow1.gif) no-repeat -5px -3px;} /**********More Ditto***********/ #ditto_currentpage {color:#666;padding:4px; background: url(../img/gradient.jpg) top left repeat-x; border: 1px solid #6D929B;} .ditto_page {padding: 4px;} .ditto_page:hover {background: url(../img/gradient.jpg) top left repeat-x;border: 1px solid #6D929B;padding: 4px;} #pagination {margin-top: 10px;} /*********Right Links**********/ #rightlinks {width: 275px; margin: 10px 0 0 30px; background: url(../img/menu_bg.jpg) top left repeat-y;} #rightlinks h4 {height:72px; background: url(../img/menu_head.jpg) top left no-repeat; text-indent: -9999px; border-bottom: none;} .rightlinks {width: 225px; margin-top: -20px} .rightlinks ul {margin-left: 10px; list-style-type: none;} .rightlinks ul li {padding: 7px 25px 5px 20px; display: block; border-bottom: 1px dashed #b9c9fc; color: #666; line-height: 1.3em; text-decoration: none; background: url(../img/arrow2.gif) no-repeat 0px 5px } .rightlinks ul li:hover {padding: 7px 25px 5px 20px; display: block; border-bottom: 1px dashed #b9c9fc; color: #6D929B; line-height: 1.3em; text-decoration: none; background: url(../img/arrow1.gif) no-repeat 0px 5px} .rightlinks ul li a:hover {color: #666;} .rightlinks ul a{text-decoration: none; color:#A19787} .rightlinks_bottom {height: 220px; background: url(../img/menu_bottom.jpg) bottom left no-repeat;} /********Newsletter Section Right Column********/ #newsletter {float: left;width: 225px;margin: 0 0 20px 20px;line-height: 1.4em;} .price { float: right; padding-left: 40px; font-style: italic; color: #6D929B; text-decoration: none;} #footerlinks ul li{ float:left; margin-left: 10px; list-style-type: none; } #giftcert img{ width:200px; height:112px; }