/*================================================== M A I N S T Y L E S * Last Updated : 2008/10/31 * Author : www.ultrasupernew.com * Color Key : * Color #1 #f05123 * Color #2 #72bf44 * Color #3 #29aae2 * Color #4 #662d91 ==================================================*/ @import 'lib/reset.css'; @import 'lib/utilities.css'; @import 'replaced.css'; /*================================================== L A Y O U T Basic page layout ==================================================*/ body { background: #f0f0f0 url(/images/main-bg.png) repeat-x center top; font: 10px/160% Arial, Helvetica, sans-serif; text-align: center; color: #736e6f; border-top: 5px solid #f05123; } #page { text-align: left; width:960px; margin:0 auto;} #header {} #contents {} #contents div#col-right {float:right; width:640px; margin-top:40px; position: relative;} #contents div#col-left {float:left; width:300px; margin-top:40px;} /* color specific */ body.color2 {border-top: 5px solid #72bf44;} body.color3 {border-top: 5px solid #29aae2;} body.color4 {border-top: 5px solid #662d91;} /*================================================== C O M M O N E L E M E N T S Main HTML elements ==================================================*/ h1 {} h2 { font-size: 1.8em; font-weight: bold; color:#f05123; margin-bottom:20px;} .color2 h2 {color:#72bf44;} .color3 h2 {color:#29aae2;} .color4 h2 {color:#662d91;} h3 {font-size: 1.8em; font-weight: bold; color:#434343; margin-bottom:18px;} #accordion h3 {background: url(/images/faq-puce.gif) no-repeat 0 center; cursor:pointer; padding-left:26px;} li, p, td, th, dd, dt, label, legend { } p { margin-bottom: 1em; } a:link { color: #231f20; text-decoration: none;} a:visited {color: #231f20; text-decoration: none; } a:hover { text-decoration: underline; } a:active {color: #231f20; text-decoration: none; } .alignright {text-align:right;} /*================================================== Header elements ==================================================*/ /* logo */ #header {position:relative;} #header a.langswitch {display:block; position:absolute; top:0; right:10px; padding:5px 7px; text-align: center; color:#fff; font-size:1.2em;} #header a.langswitch {background: #f05123;} .color2 #header a.langswitch {background: #72bf44;} .color3 #header a.langswitch {background: #29aae2;} .color4 #header a.langswitch {background: #662d91;} /* logo */ #header h1 {display: inline; float:left; margin:34px 0 37px 10px;} #header h1 a{text-indent:-999em; display:block; width:221px; height:83px; background: url(/images/logo.png) no-repeat 0 0;} #header p.tagline {display:none;} /* menu */ #header div#main-menu {display:inline; float:right; width:640px; margin-top:35px; font-size:1.2em; line-height: 1.5em;} #header div#main-menu ul.menu-item {display:inline; float:left; width:160px;} #header div#main-menu ul.menu-item li {width:160px:} #header div#main-menu ul.color1 li strong {color:#f05123;} #header div#main-menu ul.color2 li strong {color:#72bf44;} #header div#main-menu ul.color3 li strong {color:#29aae2;} #header div#main-menu ul.color4 li strong {color:#662d91;} .nav-welcome #header div#main-menu li.nav-welcome a, .nav-gift #header div#main-menu li.nav-gift a, .nav-campaigns #header div#main-menu li.nav-campaigns a, .nav-story #header div#main-menu li.nav-story a, .nav-team #header div#main-menu li.nav-team a, .nav-gallery #header div#main-menu li.nav-gallery a, .nav-treatments #header div#main-menu li.nav-treatments a, .nav-products #header div#main-menu li.nav-products a, .nav-faq #header div#main-menu li.nav-faq a, .nav-contact #header div#main-menu li.nav-contact a, .nav-map #header div#main-menu li.nav-map a{text-decoration:underline;} /*================================================== Contents elements ==================================================*/ /* home */ #contents div#images-fader {height:410px; background: #dedede; width:940px; margin:0 auto;} #contents div#images-fader img {padding:5px;} #contents dl#home-definition {margin: 30px 10px 0 10px;} #contents dl#home-definition dt {display:inline; float:left; width:70px; font-size:2.2em; font-style: italic; font-weight: bold; text-align: right; } #contents dl#home-definition dd {display:inline; float:right; width:840px; font-size:1.4em; line-height: 1.5em; padding-right:10px;} .nav-welcome ul#image-fader {height:400px; margin:0 10px 0 10px;} /* left */ #contents div#col-left h2 {font-size:1.8em; line-height: 1.5em; margin:0 10px 10px 10px;} #contents div#col-left p {font-size:1.4em; line-height: 1.5em; margin:0 10px 10px 10px;} /* right */ #contents div#col-right p {font-size:1.4em; line-height: 1.5em; margin-right:10px;} #contents div.faq-item {margin-bottom:30px;} #contents img.image-right {border:5px solid #dedede;} /* gift vouchers */ dl#vouchers-list {font-size: 1.4em; line-height: 1.5em; margin:0 10px 10px 10px;} dl#vouchers-list div.gift-item {padding:5px 0; background: url(/images/dots-3.gif) repeat-x 0 0;} dl#vouchers-list div.first {background: 0;} dl#vouchers-list div.gift-item dt {display: inline; float:left; padding:0 5px; font-weight: bold;} dl#vouchers-list div.gift-item dd {display: inline; float:right; text-align: right; padding:0 5px;} /* campaigns */ #col-left h3 {margin:0 0 5px 10px;} #col-left span.campaign-date {display:block; margin:0 0 10px 10px;} #col-right img.campaign-image {border:5px solid #dedede;} #campaigns-pagination {text-align:center; font-size:1.4em; line-height: 1.5em; color:#c4c4c4;} /* story : plasma tv */ div#plasma-tv {height:397px; background: url(/images/plasma-screen.png) no-repeat 0 0;} div#plasma-tv div#video-holder {padding:38px 0 0 67px;} /* photo gallery */ ul#thumb-list {margin-left:10px;} ul#thumb-list li {display: inline; float:left; margin:0 10px 10px 0;} ul#thumb-list li a img {display:block; border:5px solid #dedede;} ul#thumb-list li.selected a img {display:block; border:5px solid #b7b7b7;} #big-image-container img {border:5px solid #dedede; width:620px} #big-image-title {font-size:1.4em; line-height: 1.5em; padding-top:5px;} div#big-image-loading {position:absolute; top:5px; left:5px; background: #72bf44; color:#fff; font-size: 1.2em; width:90px; padding:5px; z-index: 1000;} div#big-image-loading img {vertical-align: middle;} div#thumb-pagination {text-align:center; font-size:1.4em; line-height: 1.5em; color:#c4c4c4;} div#thumb-pagination span.pager {padding:0 10px; color: #736e6f;} div#thumb-pagination a {padding:3px 5px; background: #9da5f1; color:#211e25; text-decoration: none;} /* Treatments list */ #contents div#tab-holder {margin:0 0 10px 10px;} #contents div#tab-holder span.tab-item a{display:inline; float:left; margin: 0 5px 5px 0; background: #29aae2; padding:5px 7px; font-size:1.2em; text-decoration: none; color:#fff; width:128px;} #contents div#tab-holder span.right-item a {margin:0 0 5px 0;} #contents div#tab-holder span.selected a {background: #dedede; color:#333;} #contents ul.treatment-item {margin:0 0 20px 10px;} #contents ul.treatment-item li {background: url(/images/dots-3.gif) repeat-x 0 0; padding-top:10px;} #contents ul.treatment-item li p.treatment-name {display:inline; float:left; font-weight: bold;} #contents ul.treatment-item li p.treatment-name a {background: url(/images/icon-plus.jpg) no-repeat right center; padding-right:15px;} #contents ul.treatment-item li p.treatment-price {display:inline; float:right; text-align: right;} #contents ul.treatment-item li div.treatment-description {clear:both; font-size:1.2em; line-height: 1.5em; padding:0 0 10px 10px;} /* products list */ #contents div#products-list {margin:0 0 0 10px;} #contents div#products-list div.product-item {background: url(/images/dots-3.gif) repeat-x 0 0; padding-top:10px;} #contents div#products-list p.product-name {margin:0; padding-left:10px; display:inline; float:left; font-weight: bold;} #contents div#products-list p.product-name a {background: url(/images/icon-plus.jpg) no-repeat right center; padding-right:15px;} #contents div#products-list p.product-price {display:inline; float:right;} #contents div#products-list div.product-description {clear:both; font-size:1.2em; line-height: 1.5em; padding:0 0 10px 10px;} #contents img.product-pic {width:620px; height:415px; border:5px solid #dedede;} /* generic image carousel */ ul#image-fader {height:415px;} ul#image-fader li {display: inline;} ul#image-fader li img{border:5px solid #dedede; display:none;} /* form */ form#contact-form div.text, form#contact-form div.radio, form#contact-form div.textarea {padding:10px 0; font-size:1.4em; line-height: 1.5em; background: url(/images/dots-3.gif) repeat-x 0 bottom;} form#contact-form div.text label, form#contact-form div.textarea label, form#contact-form span.fakeLabel {display:inline; float:left; width:120px; font-weight: bold;} form#contact-form div.text input, form#contact-form div.textarea textarea {font-family: Arial, Helvetica, sans-serif; font-size:14px; line-height: 21px; border:0; background: #dedede; padding:3px 5px; width:300px; border:1px solid #fff; border-top:1px solid #9c9c9c; border-left:1px solid #9c9c9c; } form#contact-form div.textarea textarea {height:160px;} form#contact-form div.rightCol {margin-left:120px;} form#contact-form div.button {padding:10px 0;} form#contact-form div.button input {background: #662d91; color:#fff; font-size:14px; font-weight: bold; border:0; padding:5px 7px; border-top:1px solid #a067cb; border-left:1px solid #a067cb;} form#contact-form div.error {color:#662d91; margin-left:120px; padding-top:5px;} #contents div#contact-confirm p.elem-name {display:inline; float:left; width:120px; font-weight: bold;} #contents div#contact-confirm p.elem-cont {margin-left:130px;} /* map */ #map {width:620px; height:450px; border:5px solid #dedede;} #map-image {width:620px; border:5px solid #dedede;} /*================================================== Footer elements ==================================================*/ #footer {margin:40px auto 0 auto; width:940px; height:50px; border-top:5px solid #dedede;} #footer p {color:#999; font-size:1.2em; line-height: 1.5em; padding:10px 0 20px 0;} #footer p.left {display:inline; float:left; width:600px;} #footer p.right {display:inline; float:right;} #footer a.badge {float:left; margin-right:20px; margin-top:2px; text-indent:-999em;} #footer a.facebook {width:122px; height:30px; background: url(/images/facebook_badge.gif) no-repeat 0 -30px; } #footer a.facebook:hover {background: url(/images/facebook_badge.gif) no-repeat 0 0; }