body {
font-family: Arial,sans-serif;
font-size: 12px;
background: url(../images/bg-header-interne.png) top left repeat-x #e7f5f7;
margin: 0;
}
body#index {
background: url(../images/bg-header.png) top left repeat-x #e7f5f7;
}
div, h1, h2, h3, h4, p, form, label, input, textarea, img, span, ul, li{
margin: 0;
padding: 0;
}
img{ border:0;}
p, td, div, ul, li, .normaltexte {
font-size : 12px;
}
a, input, select{ outline:none; text-decoration: none;}
a{ color: #1f497c; }
a:hover{text-decoration: none;}
h1{
font-size: 26px;
color: #00529b;
font-family: 'trebuchet ms', verdana, sans-serif;
text-transform: uppercase;
margin: 35px 0;
}
h2{
color: #00529B;
font-size: 19px;
margin: 45px 0 0;
text-transform: uppercase;
font-weight: normal;
}
p {
font-family: arial, verdana, sans-serif;
font-size: 15px;
line-height: 19px;
color: #727272;
}
/* ============================================ */
/* ============= GÉNÉRAL TEMPLATE ============== */
/* ============================================ */
#wrapper-header{
height: 233px;
background: url(../images/wave.png) top center no-repeat;
}
#header{ width: 1170px; height: 233px; margin: 0 auto;}
#logo{ margin: 0; float: left; }
#logo, #logo a{ display: block; width: 800px; height: 188px; cursor: pointer; }
#logo a{ background: url(../images/logo.png) no-repeat; text-indent: -9999px; }
#phone{ float: right; /*width: 215px;*/ margin-top: 30px; }
#phone p{
font-family: 'trebuchet ms', verdana, sans-serif;
font-size: 25px;
line-height: 36px;
color: #00529c;
float: left;
/*
padding-right: 15px;
margin-right: 15px;
border-right: 1px solid #00529c;
*/
}
#phone a{
float: left;
display: block;
width: 28px;
height: 28px;
background: url(../images/ico-facebook.png) no-repeat;
text-indent: -9999px;
margin-top: 5px;
}
#menu{ width: 1170px; height: 45px; clear: both; }
#menu a.mobile-submenu{ display: none; }
#menu ul{ width: 1010px; height: 45px; margin: 0 auto; background: url(../images/menu-split.png) top right no-repeat;}
#menu ul li{ display: block; float: left; height: 45px; }
#menu ul li a{
display: block;
line-height: 45px;
padding: 0 65px;
background: url(../images/menu-split.png) top left no-repeat;
font-size: 18px;
font-family: Arial, sans-serif;
color: #6f6f6f;
}
#menu ul li a:hover{ text-decoration: underline; }
#wrapper-banner{
height: 340px;
background: url(../images/piscine-fond.jpg) top center no-repeat;
}
#banner{ width: 1158px; height: 336px; margin: 0 auto; background: url(../images/piscine-st-jerome.jpg) center no-repeat; border: 6px solid #FFF; border-top: 0; }
#content{ width: 1170px; margin: 0 auto; }
#fast-link{ float: left; width: 1170px; height: 162px; margin: 30px 0; }
#fast-link a{ float: left; width: 280px; height: 162px; display: block; margin-left: 16px; }
#fast-link a:first-child{ margin-left: 0px; }
#creusee{ background: url(../images/piscine-creusee.jpg) no-repeat; }
#hors-sol{ background: url(../images/piscine-hors-sol.jpg) no-repeat; }
#cedre{ background: url(../images/piscine-en-cedre.jpg) no-repeat; }
#spa{ background: url(../images/spa.jpg) no-repeat; }
#left{
clear: both;
float: left;
width: 820px;
margin: 30px 0;
}
#module-ouverture{ width: 820px; height: 204px; margin-bottom: 30px; display: block; }
#module-ouverture.model1{ background: url(../images/ouverture-piscine-reservation.jpg) no-repeat; }
#module-ouverture.model2{ background: url(../images/fermeture-piscine-reservation.jpg) no-repeat; }
#left p{
margin-top: 22px;
}
.box{ background: #dcf1f4; border-top: 6px solid #00529b; margin: 30px 0; }
.box p.titre{ font-size: 20px; text-transform: uppercase; color: #00529b; margin: 20px 0 0 20px; }
#realisation-teaser{ float: left; width: 470px; height: 250px; }
#realisation-teaser a{ display: block; width: 419px; height: 162px; background: url(../images/realisations.jpg) no-repeat; margin: 25px 0 25px 25px; }
#newsletter{ float: left; width: 300px; margin-left: 50px; height: 250px; }
#newsletter p{ margin: 20px 15px 0 20px; }
#newsletter input[type="text"]{
margin: 30px 5px 15px 25px;
border: 1px solid #cacaca;
width: 160px;
padding: 6px 10px;
font-size: 15px;
color: #03549C;
}
input[type="submit"]{
font-size: 14px;
color: #FFF;
padding: 6px 5px;
background: #00529b;
border: 1px solid #cacaca;
margin: 30px 0 15px;
}
#right{
float: left;
width: 300px;
margin: 30px 0 0 50px;
}
#module-promotions p.titre{
color: #00529B;
font-size: 20px;
margin: 0 0 15px;
text-transform: uppercase;
}
#right #coordonnee { padding-bottom: 5px; }
#right #coordonnee p{ margin: 20px; }
#right #coordonnee hr{ margin: 0 20px; background: none; border: 0; border-top: 1px dashed #6e9fc5; }
#footer{
clear: both;
width: 1170px;
margin: 20px auto;
}
#footer p, #footer p a{ color:#727272; text-align: left; line-height: 20px; font-size: 13px; }
#footer p span{ line-height: 17px; font-size: 14px; text-transform: uppercase; }
/* ============================================ */
/* SERVICES */
/* ============================================ */
.services-list{
margin: 30px;
color: #727272;
font-family: arial,verdana,sans-serif;
font-size: 15px;
line-height: 19px;
}
.services-list li{font-size:15px;padding-top:15px;float:left; width:350px;}
.services{ margin: 30px 0 0; float: left; clear: both; }
.services h2{ border-bottom: 1px solid #00529B; margin-top: 15px; }
.services h3{ margin: 15px 0; font-size: 16px; color: #00529B; }
.services p{ text-align: justify; }
.services ul{ margin-left: 40px; }
.services ul li{
margin-top: 5px;
color: #727272;
font-family: arial,verdana,sans-serif;
font-size: 14px;
line-height: 19px;
}
.services img{ float: left; margin-right: 15px; }
.services.middle img{ float: right; margin-left: 15px; }
/* ============================================ */
/* PRODUITS */
/* ============================================ */
.produits{ margin: 30px 0 0; float: left; clear: both; }
.produits h2{ border-bottom: 1px solid #00529B; margin-top: 15px; }
.produits p{ text-align: justify; }
.produits div{ margin: 20px 0;}
.produits div img.middle{ margin: 0 16px; }
a.maitre{margin-top:20px; display:block; width:424px; height:36px; background: url(../images/btn-maitre-piscinier.png) top left scroll transparent no-repeat; }
/* ============================================ */
/* REALISATIONS */
/* ============================================ */
#galerie{ float: left; width: 100%; margin: 30px 0; }
#galerie a{ float: left; display: block; width: 140px; height: 90px; overflow: hidden; margin: 10px; border: 2px solid #00529B; }
#galerie img{ width: 140px; margin: auto; }
/* ============================================ */
/* CONTACT */
/* ============================================ */
#wrapper-banner-contact{
height: 286px;
background: url(../images/piscine-contact-fond.jpg) top center no-repeat;
}
#map{
display: block;
background: url(../images/map.png) no-repeat;
width: 525px;
height: 199px;
float: right;
margin-top: 50px;
}
p.special-hours span{ display: inline-block; width: 100px;}
#contactez-form{
width: 270px;
margin: 15px 0 0 20px;
}
#contactez-form div.left{ margin-bottom: 15px;}
#contactez-form div.field{ margin-top: 8px;}
#contactez-form input[type="text"]{
font-family: arial,verdana,sans-serif;
font-size: 14px;
color: #727272;
width: 240px;
border: 1px solid #cbcecf;
padding: 8px 10px;
}
#contactez-form textarea{
font-family: arial,verdana,sans-serif;
font-size: 14px;
color: #727272;
width: 240px;
border: 1px solid #cbcecf;
padding: 8px 10px;
}
#contactez-form input[type="submit"]{
margin: 12px 7px 20px 0;
float: right;
}
#right #newsletter{ margin: 0 0 30px; }
/* FORM EXCEPTION SI OUVERTURE */
body.ouverture #contactez-form{
width: 300px;
margin: 25px auto;
}
body.ouverture #contactez-form input[type="text"], #contactez-form select{
font-family: arial,verdana,sans-serif;
font-size: 14px;
color: #727272;
width: 277px;
border: 1px solid #cbcecf;
padding: 8px 10px;
line-height: 30px;
}
body.ouverture #contactez-form select{
height: 30px;
line-height: 30px;
padding: 0 0 0 7px;
width: 300px;
}
body.ouverture #contactez-form select option{ height: 30px; line-height: 30px; padding: 5px 20px 0; }
body.ouverture #contactez-form textarea{
width: 277px;
}
/* ============================================ */
/* ============= GÉNÉRAL CSS ============== */
/* ============================================ */
.FieldsError{ color:#FF0000;}
.FieldsNoError{ color:#17b70f;}
.fs_11{ font-size: 11px;}
.fs_13{ font-size: 13px;}
.inline{ display:inline;}
.float_r{ float: right;}
.float_l{ float: left;}
.clear-r{ clear: right;}
.clear-l{ clear: left;}
.clear-b{ clear: both;}
.T_AlignRight{ text-align: right;}
.center{ text-align: center;}
.italic{ font-style: italic;}
.Tabulation{ margin-left: 50px; clear: left;}
.Half_Tabulation{ margin-left: 25px; clear: left;}
.margin-15{ margin-top: 15px;}
.margin-20{ margin-top: 20px;}
.margin-40{ margin-top: 40px;}
.margin-none{ margin-top: 0;}
.image-right{ margin: 40px 0 0 40px;}
/*copy HERE the same style than your actual general a */
.lookLikeA{ text-decoration: underline; cursor:pointer; }
/*=================================================================================*/
/*=================================================================================*/
/* FLEXIBLE PART */
/*=================================================================================*/
/*=================================================================================*/
/*=================================================================================*/
/*=================================================================================*/
/* site entre 1200 et 1024 (1010) */
@media only screen and (max-width: 1199px) {
body{ background: url(../images/970/bg-header-interne.png) top left repeat-x #e7f5f7; }
body#index{ background: url(../images/970/bg-header.png) top left repeat-x #e7f5f7; }
#wrapper-header{
height: 200px;
background: url(../images/970/wave.png) top center no-repeat;
}
#header{ width: 970px; height: 200px; }
#logo, #logo a{ width: 710px; height: 162px; }
#logo a{ background: url(../images/970/logo.png) no-repeat; }
#menu{ width: 970px; height: 38px;}
#menu ul{ width: 880px; height: 38px; background: url(../images/970/menu-split.png) top right no-repeat; }
#menu ul li{ height: 38px; }
#menu ul li a{
line-height: 38px;
padding: 0 56px;
font-size: 16px;
background: url(../images/970/menu-split.png) top left no-repeat;
}
#wrapper-banner{
height: 209px;
}
#banner{ width: 958px; height: 365px; background: url(../images/970/banner.jpg) no-repeat; }
#content{ width: 970px; }
#fast-link{ float: left; width: 970px; height: 136px; margin:60px 0 30px;}
#fast-link a{ width: 235px; height: 136px; margin-left: 10px; }
#creusee{ background: url(../images/970/piscine-creusee.jpg) no-repeat; }
#hors-sol{ background: url(../images/970/piscine-hors-sol.jpg) no-repeat; }
#cedre{ background: url(../images/970/piscine-en-cedre.jpg) no-repeat; }
#spa{ background: url(../images/970/spa.jpg) no-repeat; }
#left{ width: 600px; }
#module-ouverture, #module-ouverture img{ width: 600px; height: 169px; }
#module-ouverture.model1{ background: url(../images/970/ouverture-piscine-reservation.jpg) no-repeat; }
#module-ouverture.model2{ background: url(../images/970/fermeture-piscine-reservation.jpg) no-repeat; }
.box p.titre{ font-size: 18px; }
#realisation-teaser{ width: 310px; height: 250px; }
#realisation-teaser p{ margin-left: 20px; }
#realisation-teaser a{ width: 275px; height: 142px; background: url(../images/970/realisations.jpg) no-repeat; margin: 25px 0 25px 20px; }
#newsletter{ width: 270px; margin-left: 20px; height: 250px; }
#newsletter p{ margin: 20px 15px 0 20px; }
#newsletter input[type="text"]{
margin: 30px 5px 15px 25px;
width: 130px;
}
#right{
margin: 30px 0 0 70px;
}
#footer{ width: 970px; }
/* ============================================ */
/* REALISATIONS */
/* ============================================ */
#galerie a{ width: 130px; height: 80px; margin: 10px; }
#galerie img{ width: 130px; margin: auto; }
#galerie a.first{ margin: 10px 10px 10px 0; }
#galerie a.last{ margin: 10px 0 10px 10px ; }
/* ============================================ */
/* PRODUITS */
/* ============================================ */
.produits div img{ width: 187px;}
/* ============================================ */
/* CONTACT */
/* ============================================ */
#wrapper-banner-contact{
height: 238px;
background: url(../images/970/piscine-contact-fond.jpg) top center no-repeat;
}
#map{
background: url(../images/970/map.png) no-repeat;
width: 375px;
height: 199px;
margin: 50px -30px 0 0;
}
#right #newsletter{ width: 300px; margin: 0 0 30px; height: 250px; }
#right #newsletter input[type="text"]{ width: 160px;}
.services-list{margin:30px 20px;}
.services-list li{font-size:15px;padding-top:15px;float:left; width:275px;}
}
/*=================================================================================*/
/*=================================================================================*/
/* site entre 1023 et 768px */
@media only screen and (max-width: 1009px) {
body{ background: url(../images/740/bg-header-interne.png) top left repeat-x #e7f5f7; }
body#index{ background: url(../images/740/bg-header.png) top left repeat-x #e7f5f7; }
#wrapper-header{
height: 181px;
background: url(../images/740/wave.png) top center no-repeat;
}
#header{ width: 740px; height: 181px; }
#logo, #logo a{ width: 508px; height: 149px; }
#logo a{ background: url(../images/740/logo.png) no-repeat; }
#phone{ /*width: 170px;*/ margin-top: 15px; }
#phone p{
font-size: 19px;
line-height: 25px;
}
#phone a{
width: 21px;
height: 21px;
background: url(../images/740/ico-facebook.png) no-repeat;
margin-top: 2px;
}
#menu{ width: 740px; height: 32px; background: url(../images/740/menu-split.png) top right no-repeat; }
#menu ul{ width: 740px; height: 32px; }
#menu ul li{ height: 32px; }
#menu ul li a{
line-height: 32px;
padding: 0 42px;
font-size: 16px;
background: url(../images/740/menu-split.png) top left no-repeat;
}
#wrapper-banner{
height: 308px;
background: url(../images/740/piscine-fond.jpg) no-repeat;
}
#banner{ width: 728px; height: 337px; background: url(../images/740/banner.jpg) no-repeat; }
#content{ width: 740px; }
#fast-link{ float: left; width: 740px; height: 126px; }
#fast-link a{ width: 179px; height: 126px; margin-left: 8px; }
#creusee{ background: url(../images/740/piscine-creusee.jpg) no-repeat; }
#hors-sol{ background: url(../images/740/piscine-hors-sol.jpg) no-repeat; }
#cedre{ background: url(../images/740/piscine-en-cedre.jpg) no-repeat; }
#spa{ background: url(../images/740/spa.jpg) no-repeat; }
#left{ width: 740px; }
#module-ouverture, #module-ouverture img{ width: 740px; height: 184px; }
#module-ouverture.model1{ background: url(../images/740/ouverture-piscine-reservation.jpg) no-repeat; }
#module-ouverture.model2{ background: url(../images/740/fermeture-piscine-reservation.jpg) no-repeat; }
#realisation-teaser{ width: 400px; height: 250px; }
#realisation-teaser a{ width: 351px; height: 162px; background: url(../images/740/realisations.jpg) no-repeat; margin: 25px 0 25px 20px; }
#newsletter{ width: 300px; margin-left: 40px; height: 250px; }
#newsletter input[type="text"]{
width: 140px;
}
#right{
margin: 0;
width: 740px;
position: relative;
}
#module-promotions{
position: absolute;
right: 0;
width: 300px;
}
#module-coordonnee{
width: 400px;
margin-top: 0;
}
#footer{ width: 740px; }
body#index #right .facebook{ margin: 315px 0 0 40px; float: left; }
body#index #right #coordonnee{ float: left; width: 400px; margin-top: 0; }
#module-promotions.interne{ top: 270px; right: 45px; }
/* ============================================ */
/* REALISATIONS */
/* ============================================ */
#galerie a{ margin: 8px; }
#galerie a.first{ margin: 8px 8px 8px 0; }
#galerie a.last{ margin: 8px 0 8px 8px ; }
#right #coordonnee{ float: left; width: 300px; }
#right.exception .facebook{ float: left; margin-left: 40px; }
/* ============================================ */
/* PRODUITS */
/* ============================================ */
.produits div img{ width: 234px;}
/* ============================================ */
/* CONTACT */
/* ============================================ */
#wrapper-banner-contact{
height: 187px;
background: url(../images/740/piscine-contact-fond.jpg) top center no-repeat;
}
#map{
background: url(../images/740/map.png) no-repeat;
width: 487px;
height: 173px;
margin: 50px 0 0;
}
#right #contact{ width: 300px; float: left; clear: both; }
#right #newsletter{ width: 400px; height: 220px; margin: 30px 0 30px 40px; float: left;}
#right .facebook{ display: block; margin-bottom: 30px; }
/* FORM EXCEPTION SI OUVERTURE */
body.ouverture #left #contact p{ margin: 22px 20px 0; }
body.ouverture #right #newsletter{
margin: 30px 0;
}
body.ouverture #right div.clear-b{ clear: none; }
body.ouverture #right .facebook{ float: left; margin: 100px 0 0 40px; }
.services-list{margin:30px;}
.services-list li{font-size:15px;padding-top:15px;float:left; width:335px;}
}
/*=================================================================================*/
/*=================================================================================*/
/* affiche une grosse tablette */
@media only screen and (max-width: 767px) {
body{ background: url(../images/450/bg-header-interne.png) top left repeat-x #e7f5f7; }
body#index{ background: url(../images/450/bg-header.png) top left repeat-x #e7f5f7; }
p{
font-size: 16px;
line-height: 22px;
}
#wrapper-header{
height: 181px;
background: url(../images/450/wave.png) top center no-repeat;
}
#header{ width: 450px; height: 181px; }
#logo, #logo a{ width: 450px; height: 140px; }
#logo a{ background: url(../images/450/logo.png) no-repeat; }
#phone{ display: none;}
#menu a.mobile-submenu {
background: url("../images/450/menu-mobile.png") no-repeat;
display: block;
float: right;
height: 40px;
margin-top: 3px;
width: 97px;
}
#menu{ width: 450px; height: 40px; background: none; z-index: 9999; position: relative; }
#menu ul{
float: none;
height: 0;
margin: 0;
overflow: hidden;
position: absolute;
top: 41px;
width: 450px;
z-index: 999;
}
#menu ul li{ height: 40px; width: 450px; border-bottom: 1px solid #FFF;}
#menu ul li a{
line-height: 40px;
padding: 0;
text-align: center;
font-size: 16px;
background: url(../images/450/bg-menu-mobile.png);
color: #FFF;
font-family: 'trebuchet ms', verdana, sans-serif;
text-transform: uppercase;
}
#wrapper-banner{
height: 224px;
}
#banner{ width: 438px; height: 222px; background: url(../images/450/banner.jpg) no-repeat; }
#content{ width: 450px; }
#fast-link{ float: left; width: 450px; height: inherit; margin: 20px 0; }
#fast-link a{ width: 209px; height: 126px; margin: 0; }
a#creusee{ background: url(../images/450/piscine-creusee.jpg) no-repeat; margin-right: 32px; }
a#hors-sol{ background: url(../images/450/piscine-hors-sol.jpg) no-repeat; }
a#cedre{ background: url(../images/450/piscine-en-cedre.jpg) no-repeat; margin: 22px 32px 0 0; }
a#spa{ background: url(../images/450/spa.jpg) no-repeat; margin: 22px 0 0; }
#left{ width: 450px; position: relative; margin-bottom: 0; }
#left p{ text-align: justify; }
#module-ouverture, #module-ouverture img{ width: 450px; height: 166px; }
#module-ouverture.model1{ background: url(../images/450/ouverture-piscine-reservation.jpg) no-repeat; }
#module-ouverture.model2{ background: url(../images/450/fermeture-piscine-reservation.jpg) no-repeat; }
#realisation-teaser{ width: 400px; height: 250px; margin: 30px auto; float: none; }
#realisation-teaser a{ width: 350px; height: 162px; background: url(../images/450/realisations.jpg) no-repeat; margin: 25px 0 25px 20px; }
#newsletter{ width: 400px; margin: 30px auto; height: 250px; float: none; }
#newsletter input[type="text"]{
width: 220px;
}
#right{
margin: 0;
width: 450px;
position: relative;
}
#module-promotions{
position: absolute;
right: 75px;
width: 300px;
top: 490px;
}
#module-coordonnee{
width: 400px;
margin: 330px auto 0;
}
a.facebook{ display: none;}
#footer{ width: 450px; padding-top:30px;}
#footer p, #footer p a{ font-size: 16px; line-height: 24px; text-align: center;}
#footer p span{ font-size: 17px;; text-transform: none;}
body#index #right .facebook{ margin: 315px 0 20px 75px; float: left; }
#module-promotions.interne{ top: 490px; right: 75px; }
body#services #newsletter{ margin-top: 330px; }
/* ============================================ */
/* REALISATIONS */
/* ============================================ */
#right #module-coordonnee{ width: 400px; margin: 30px auto; }
#right #coordonnee{ width: 400px; margin: 0 0 30px; float: none; }
#right.exception .facebook{ float: none; margin: 30px 0; text-align: center; }
/* ============================================ */
/* PRODUITS */
/* ============================================ */
.produits div img{ width: 137px;}
/* ============================================ */
/* CONTACT */
/* ============================================ */
#wrapper-banner-contact{
height: 155px;
background: url(../images/450/piscine-contact-fond.jpg) top center no-repeat;
}
#map{
background: url(../images/450/map.png) no-repeat;
width: 400px;
height: 140px;
position: absolute;
top: 615px;
}
#contactez-form {
width: 365px;
}
#right #contact{ width: 400px; margin: 200px auto 30px; float: none; clear: both; }
#right #contact input[type="text"], #right #contact textarea{ width: 335px; }
#right #newsletter{ width: 400px; height: inherit; margin: 0 auto 30px; float: none; clear: both; }
#right .facebook{ display: block; margin-bottom: 30px; text-align: center; }
#right #newsletter input[type="text"]{ width: 250px;}
/* FORM EXCEPTION SI OUVERTURE */
body.ouverture #right #newsletter{
margin: 20px auto;
}
body.ouverture #right div.clear-b{ clear: both; }
body.ouverture #right .facebook{ float: none; margin: 40px auto; }
body#services #newsletter{ margin-top: 30px; }
.services-list{margin:25px 70px;}
.services-list li{font-size:16px;padding-top:15px;float:none; width:auto;}
}
/*=================================================================================*/
/*=================================================================================*/
/* site entre 479 et 300 minimum pour smart phone */
@media only screen and (max-width: 479px) {
body{ background: url(../images/300/bg-header-interne.png) top left repeat-x #e7f5f7; }
body#index{ background: url(../images/300/bg-header.png) top left repeat-x #e7f5f7; }
#wrapper-header{
height: 150px;
background: url(../images/300/wave.png) top center no-repeat;
}
#header{ width: 300px; height: 150px; }
#logo, #logo a{ width: 300px; height: 107px; }
#logo a{ background: url(../images/300/logo.png) no-repeat; }
#menu, #menu ul, #menu ul li{
width: 300px;
}
#wrapper-banner{
height: 176px;
}
#banner{ width: 288px; height: 176px; background: url(../images/450/banner.jpg) no-repeat; }
#content{ width: 300px; }
#fast-link{ float: left; width: 300px; height: inherit; margin: 0; }
#fast-link a{ width: 280px; height: 162px; margin: 15px auto 0; float: none; }
#fast-link a:first-child{ margin: 20px auto 0; float: none; }
a#creusee{ background: url(../images/300/piscine-creusee.jpg) no-repeat; }
a#hors-sol{ background: url(../images/300/piscine-hors-sol.jpg) no-repeat; }
a#cedre{ background: url(../images/300/piscine-en-cedre.jpg) no-repeat; }
a#spa{ background: url(../images/300/spa.jpg) no-repeat; }
#left{ width: 300px; }
#module-ouverture, #module-ouverture img{ width: 300px; height: 134px; }
#module-ouverture.model1{ background: url(../images/300/ouverture-piscine-reservation.jpg) no-repeat; }
#module-ouverture.model2{ background: url(../images/300/fermeture-piscine-reservation.jpg) no-repeat; }
#realisation-teaser{ width: 300px; height: 250px; margin: 30px auto; float: none; }
#realisation-teaser p{ margin: 20px 0 20px 15px; }
#realisation-teaser a{ width: 276px; height: 162px; background: url(../images/300/realisations.jpg) no-repeat; margin: 20px 0 20px 15px; }
#newsletter{ width: 300px; margin: 30px auto; height: 250px; float: none; }
#newsletter input[type="text"]{
width: 130px;
}
#right{
margin: 0;
width: 300px;
position: relative;
}
#module-promotions{
position: absolute;
right: 0;
width: 300px;
}
#module-coordonnee{
width: 300px;
margin: 330px auto 0;
}
a.facebook{ display: none;}
#footer{ width: 300px; margin-top:40px;}
#footer p, #footer p a{ font-size: 16px; line-height: 24px; text-align: center;}
#footer p span{ font-size: 17px;}
body#index #right .facebook{ margin: 315px 0 20px; float: left; }
body#index #right #coordonnee{ width: 300px;}
#module-promotions.interne{ top: 490px; right: 0; }
/* ============================================ */
/* REALISATIONS */
/* ============================================ */
#galerie a.first { margin: 8px 16px 8px 0; }
#galerie a.last { margin: 8px 0 8px 16px; }
#right #module-coordonnee{ width: 300px; margin: 30px auto; }
#right #coordonnee{ width: 300px; margin: 0 0 30px; }
/* ============================================ */
/* PRODUITS */
/* ============================================ */
.produits div img{ width: 135px; }
.produits div img.middle{ margin: 0 0 0 20px;}
.produits div img:last-child{ display: none;}
a.maitre{margin-top:20px; display:block; width:300px; height:67px; background: url(../images/300/btn-maitre-piscinier.png) top left scroll transparent no-repeat; }
/* ============================================ */
/* CONTACT */
/* ============================================ */
#wrapper-banner-contact{
height: 161px;
background: url(../images/300/piscine-contact-fond.jpg) top center no-repeat;
}
#map{
background: url(../images/300/map.png) no-repeat;
width: 298px;
height: 140px;
top: 630px;
}
#contactez-form {
width: 270px;
}
#right #contact{ width: 300px; }
#right #contact input[type="text"], #right #contact textarea{ width: 240px; }
#right #newsletter{ width: 300px; }
#right .facebook{ display: block; margin-bottom: 30px; }
#right #newsletter input[type="text"]{ width: 150px;}
.services-list{margin:25px 0px 25px 15px;}
.services-list li{font-size:17px;padding-top:15px;float:none; width:auto;}
}
/*=================================================================================*/
/*=================================================================================*/