/* ------------------------------------------------------------- * Filename: style.css * Version: 1.5 -------------------------------------------------------------- */ /* ------------------------------------------------------------- 1. Skin & Typo -------------------------------------------------------------- */ body, input, textarea, th, td{font: normal 12px/18px Arial, Verdana, Geneva, Helvetica, sans-serif;} h1{font: italic bold 16px/19px Georgia, sans-serif; padding: 0 0 0 1px; margin: 0 0 9px 0;} h2{ font: italic bold 16px/19px Georgia, sans-serif; padding: 0 0 0 1px; color: #665A4E; margin: 10px 0 0 0; } h3{ font: italic bold 14px/16px Georgia, sans-serif; color: #2f2f2f; margin: 0 0 5px 0; background: url(charte/leaf2.gif) no-repeat left center; padding: 5px 30px; border-bottom: solid 1px #000; width: 800px; margin-bottom: 10px; } h4{ padding: 0 0 5px 0px; } h5{font: normal bold 16px/18px Georgia, sans-serif; text-decoration: underline; color: #2f2f2f; margin: 0 0 5px 0; padding: 5px 30px;} h6{font: bold 11px/14px Arial, Verdana, Geneva, Helvetica, sans-serif; padding: 0 0 5px 0px; color: #2f2f2f;} .new{ background: url(charte/nouveau-txt.jpg) no-repeat right center; padding: 0 90px 0 0; } small{font-size: 11px;} a:link, a:visited{color: #2f2f2f; text-decoration: none;} a:hover, a:active{color: #2f2f2f; text-decoration: underline;} .fontsize13{font-size: 13px;} .fontsize14{font-size: 14px;} .fontsize15{font-size: 15px;} .highlight1{color: #2f2f2f;} .highlight2{color: #2f2f2f;} .highlight3{color: #2f2f2f;} .highlight4{color: #2f2f2f;} .highlight5{color: #2f2f2f;} .highlight6{ color: #2f2f2f; } .highlight7{color: #2f2f2f;} .star{font-family: Verdana, Arial, Helvetica, sans-serif;} #bg1{background: url(charte/bg1.gif) no-repeat center bottom; } body{background:#e0d6cb url(charte/body-bg.gif) repeat-x left top; color: #2f2f2f;} #header{/*background: url(charte/header-bg.jpg) no-repeat left top;*/} #right-outer{background: url(charte/right-outer-bg.png) no-repeat right top;} #footer{color: #E7E0A7;} p {padding-top:5px;} /* ------------------------------------------------------------- 2. Main layout -------------------------------------------------------------- */ #container{min-height: 100%; height: auto !important; height: 100%;} #container, #content, #header{width: 990px;} #footer{width: 950px; padding: 0 20px;} #header{height: 135px;} /* ------------------------------------------------------------- 3. Header elements -------------------------------------------------------------- */ #header{} /* ------------------------------------------------------------- 4. Content elements -------------------------------------------------------------- */ #left-outer{float: left; width: 586px; padding: 0 0 0 19px;} #left-inner{ float: left; width: 800px; } #right-outer{float: left; width: 312px; padding: 0 36px 0 37px} #right-inner{float: left; text-align: justify; min-height: 970px; height: auto !important; height: 970px;} #diapo1{float: left; width: 312px; height: 371px; /*background: url(charte/diapo1-bg.jpg) no-repeat left top;*/} #right-outer #info *{position: relative; z-index: 100;} #info-coordonnees{float: left; width: 311px; height: 74px; padding: 63px 0 0 0; line-height: 16px; color: #c4db8e; text-align: center;} #info-mail{float: left; width: 311px; height: 32px; padding: 41px 0 0 0; line-height: 16px; color: #c4db8e; text-align: center;} #info-mail a:link, #info-contact a:visited{font-size: 12px; line-height: 16px; font-weight: bold; color: #d2ff68;} #info-mail a:hover, #info-contact a:active{color: #FFFFFF; text-decoration: none;} #info-plan{ float: left; width: 229px; height: 72px; padding: 41px 0 0 82px; } #info-plan .plan-btn{background: url(charte/plan-btn-bg.gif) no-repeat left bottom; width: 159px; height: 69px; float: left; position: relative; z-index: 101;} #info-plan .plan-btn:hover{background-position: left top;} #info-contact{ float: left; width: 229px; } #info-contact .contact-btn{background: url(charte/contact-btn-bg.jpg) no-repeat left bottom; width: 311px; height: 54px; float: left; position: relative; z-index: 101;} #info-contact .contact-btn:hover{background-position: left top; background-color: red;} /* ------------------------------------------------------------- 5. Footer elements -------------------------------------------------------------- */ #footer{text-align: left; line-height: 16px;} #footer-left{float: left; width: 475px; padding: 19px 0;} #footer-right{float: left; text-align: right; width: 475px; padding: 16px 0;} #footer .copyright{text-align: center;} #footer .client{} #footer .client a:link, #footer .client a:visited{color: #674018;} #footer .client a:hover, #footer .client a:active{color: #674018;} #footer .mentions{} #footer .mentions a:link, #footer .mentions a:visited{color: #674018;} #footer .mentions a:hover, #footer .mentions a:active{color: #674018;} #footer .ref{color: #674018;} #menu2 ul{float: right;} #menu2 ul li{display: inline; color: #99f630; line-height: 17px;} #menu2 ul li a:link, #menu2 ul li a:visited{color: #674018;} #menu2 ul li a:hover, #menu2 ul li a:active{color: #674018; text-decoration: underline;} #footer-menu{ display : table; float : right; height : 50px; margin-top : 0px; padding : 0px 0px 0px 0px; } #footer-menu ul li{ display : inline; padding : 0px 10px 0px 6px; border-right : 1px solid #2f2f2f; } #footer-menu ul li a, #footer-menu ul li span{ color : #2f2f2f; font : normal normal 11px Arial; text-decoration : none; } #footer-menu ul li a:hover{ color : #fffcec; text-decoration : underline; } .btn2-over{ color : #2f2f2f !important; text-decoration : underline !important; } .btn3{ color : #C4DB8E !important; text-decoration : underline !important; } .undermenu{ position : absolute; width : 550px; margin-left : -140px; } .undermenu li{ border : 0 none !important; color : #2f2f2f; } .undermenu li a{ color : #2f2f2f !important; } .undermenu li a:hover{ text-decoration : underline !important; color: #2f2f2f !important; } .btn31{ color : #A57E55 !important; text-decoration : underline !important; } .undermenu1{ position : absolute; width : 550px; margin-left : -140px; } .undermenu1 li{ border : 0 none !important; color : #A57E55; } .undermenu1 li a{ color : #A57E55 !important; } .undermenu1 li a:hover{ text-decoration : underline !important; color: #2f2f2f !important; } .bottom_dropdown{ width : 360px; margin-left : 50px; margin-top : 15px; } /* ------------------------------------------------------------- 6. Common elements -------------------------------------------------------------- */ .page-title{ float: left; width: 585px; height: 60px; text-indent: -9999px; margin: 0 !important; } #accueil-title{ background: url(accueil/accueil-title.png) no-repeat left top; } #thalasso-title{ background: url(thalasso/thalasso-title.png) no-repeat left top; } #rituels-title{ background: url(rituels/rituels-title.png) no-repeat left top; } #soins-carte-title{ background: url(soins-carte/soins-title.png) no-repeat left top; } #objectif-minceur-title{ background: url(objectif-minceur/objectif-title.png) no-repeat left top; } #epilation-durable-title{ background: url(epilation-durable/epilation-title.png) no-repeat left top; } #informations-offres-title{ background: url(informations-offres/informations-title.png) no-repeat left top; } #mails-place1 { text-indent: -9999px; } #mails-place1 a{ float: left; display: inline; width: 120px; height: 17px; background: url(accueil/accueil-txt3-bg.gif) no-repeat left bottom; } #mails-place1 a:hover{ background-position: left top; } .pannel1 *{position: relative; z-index: 100;} .pannel2 *{position: relative; z-index: 100;} .pannel1, .pannel1-green, .pannel1-green2{float: left; width: 386px; height: 82px; padding: 18px 10px 0 10px; text-align: left;} .pannel1{background: url(charte/pannel1-bg.png) no-repeat left top;} .pannel1-green{background: url(charte/pannel1-green-bg.png) no-repeat left top; color: #2B1C0B;} .pannel1-green2{background: url(charte/pannel1-bg.png) no-repeat left top; color: #2B1C0B;} .pannel2, .pannel2-green{float: left; width: 560px; height: 134px; margin: 5px 0 0 0; padding: 16px 13px 0 13px;} .pannel2{background: url(charte/pannel2-bg.png) no-repeat left top;} .pannel2-green{background: url(charte/pannel1-bg.png) no-repeat left top; color: #2B1C0B; text-align: justify;} .pannel3, .pannel3-green{float: left; width: 560px; height: 130px; margin: 5px 0 0 0; padding: 20px 13px 0 13px;} .pannel3{background: url(charte/pannel3-bg.png) no-repeat left top;} .pannel3-green{background: url(charte/pannel1-bg.png) no-repeat left top; color: #2B1C0B; text-align: justify;} .pannel4{float: left; width: 915px; color: #2f2f2f; text-align: justify; margin: 5px 0 0 0;} .left {style="float:left;"} .right {style="float:right;"} .pannel4 .top{ float: left; width: 875px; background: url(charte/pannel5-top-bg1_big.png) no-repeat left top; padding:20px 20px 0 20px; } .pannel4 .bottom{float: left; width: 915px; background: url(charte/pannel5-bottom-bg1_big.png) no-repeat left top; height: 11px;} .pannel4 p{padding:7px 50px 0 0;} .pannel5{float: left; width: 586px; color: #2f2f2f; text-align: justify; margin: 5px 0 0 0; } .pannel5 .top{float: left; width: 560px; background: url(charte/pannel5-top-bg.png) no-repeat left top; padding: 16px 13px 0 13px;} .pannel5 .bottom{float: left; width: 586px; background: url(charte/pannel5-bottom-bg.gif) no-repeat left top; height: 11px;} .pannel5 h2{color: #2f2f2f;} .pannel5 h3{color: #2f2f2f; background-image: url(charte/leaf2.gif); width: 495px;} .pannel5 h4{ color: #2f2f2f; } .pannel5 .list2 li{ background-image: url(charte/bullet3.gif); } .pannel5 .list3 li{ background-image: url(charte/bullet3.gif); } .separator1{background-image: url(charte/separator1-brown-bg.jpg);} .separator2{background-image: url(charte/separator2-brown-bg.jpg);} .separator3 { width:860px; height:1px; background:#7d4610; margin-top: 5px; margin-bottom: 10px; } .pannel5.bg1{ float: left; color: #2B1C0B; text-align: justify; margin: 5px 0 0 0; width: 800px; } .pannel5.bg1 .top{ float: left; width: 950px; background: url(charte/pannel5-top-bg1.png) no-repeat left top; padding: 16px 13px 0 13px; } .pannel5.bg1 .bottom{float: left; width: 586px; background: url(charte/pannel5-bottom-bg1.png) no-repeat left top; height: 11px;} .pannel5.bg1 .separator1{background-image: url(charte/separator1-brown-bg1.jpg);} .pannel5.bg1 .separator2{background-image: url(charte/separator2-brown-bg1.jpg);} .green h2{ color: #261909; } /* Separators */ .separator1{clear: both; display: block; font-size: 1px; line-height: 1px; overflow: hidden; width: 100%; height: 1px; margin: 4px 0; background: url(charte/separator1-bg.jpg) no-repeat center top;} .separator2{clear: both; display: block; font-size: 1px; line-height: 1px; overflow: hidden; width: 100%; height: 1px; margin: 4px 0; background: url(charte/separator2-bg.jpg) no-repeat center top;} /* Lists */ ul.list1, ul.list2, ul.list3{ } ul.list1 li{padding: 0 0 0 33px; background: url(charte/bullet3.gif) no-repeat 2px 5px; display: block; line-height: 18px;} ul.list2 li{padding: 0 0 0 33px; background: url(charte/bullet3.gif) no-repeat 2px 5px; display: block; line-height: 18px; font: bold italic 13px/18px Georgia, Arial, sans serif;} ul.list3 li{padding: 0 0 0 33px; background: url(charte/bullet3.gif) no-repeat 2px 5px; display: block; line-height: 18px;} ul.list3 li.inline{ display: inline; float: left; padding-right: 7px; } ul.list3 li a{ color: #2f2f2f; font-weight: bold; } ul.list3 li a:hover{ color: #2f2f2f; font-weight: bold; } /* Thumbnails */ .thumb1{display: block; padding: 0px; border: 1px solid #5F9E04; background: #1E3853;} a.thumb1:hover{border: 1px solid #99F630; background: #FFFFFF;} /* Tables */ .table1 th, .table1 td {text-align: left; padding: 3px 5px; border: 1px solid #fff;} .table1 tr th {background: #65584a ; color: #fff;} .table1 tr td {background: #65584a ; color: #fff;} .table1 tr.odd td {background: #65584a ; color: #fff;} .table1 tr.over td {background: #65584a ; color: #fff;} .table1 tr.sel td {background: #65584a ; color: #fff;} /* ------------------------------------------------------------- #. Modifs -------------------------------------------------------------- */ .pannel2-modif{ float: left; width: 560px; height: 169px; margin: 5px 0 0 0; padding: 22px 13px 0 13px; } .pannel2-modif{background: url(charte/pannel2-modif-bg.png) no-repeat left top;} .table2 th, .table2 td {text-align: left; padding: 3px 5px 0 5px;} .table2 tr{ background:url(charte/td-bg1.gif) repeat-x left bottom; } .table2 tr th {background: #5C3E1C; color: #2B1C0B;} .table2 tr td {color: #FFFFFF; background: #513213/* url(charte/td-bg1.gif) repeat-x left bottom*/; border: 1px solid #563816;} .table2 tr.odd td {background: #563816/* url(charte/td-bg1.gif) repeat-x left bottom*/; color: #FFFFFF; border-bottom: 0px solid #563816;} .table2 tr.over td {background: #FFFFFF; color: #2B1C0B;} .table2 tr.sel td {background: #F6CE17; color: #2B1C0B;} .table2 span.dotted{ float: left; background: url(charte/td-bg1.gif) repeat-x left bottom; width: 100%; margin: 0 0 5px 0;} #contact-title{ background: url(contact/contact-title.jpg) no-repeat left top; } #merci-title{ background: url(contact/merci-title.jpg) no-repeat left top; } #frmContact{width: 586px;} #frmContact .col1{float: left; width: 283px; padding: 0 20px 0 0;} #frmContact .col2{float: left; width: 283px;} #frmContact label{float: left; width: 80px;} #frmContact .buttons{padding: 10px;} #actualite.outer{ float: left; width: 311px; height: 178px; position: relative; z-index: 100; } #actualite .inner{ float: left; width: 267px; height: 95px; padding: 43px 22px 0 22px; color: #C3DB8D; } #actualite .title{ font-weight: bold;} #actualite .desc{ font-size: 11px; line-height: 16px; } #actualite a.plus-de-details{ float: left; background: url(charte/plus-de-details-btn-bg.jpg) no-repeat left bottom; width: 166px; height: 27px; } a.valentine {text-decoration:underline;} a.valentine:hover{text-decoration:underline;}