@import url(common.css);

/* --[ Global ]-- */
* {margin:0px; padding:0px}

html {
  font:11px Arial, helvetica, sans-serif;
}

.bleu {color:#0ea2cd !important}
.vert {color:#a7c956 !important}
.gris {color:#6b6b6b !important}
.rouge{color:#cd003a !important}
.grisfonce{color:#6b6b6d !important}
.grisclair{color:#a2a2a2 !important}
.orange{color:#e42518 !important;}


img {border:none}
/*p {text-align:justify}*/
a {text-decoration:none}

h1 {font-size:15px}
h2 {font-size:14px}
h3 {font-size:13px}
h4 {font-size:12px}
h5 {font-size:10px}

.liste {padding:20px 0 10px 10px;color:#0D90B7}
.liste li {margin:0px 0px 10px 15px}

body{background:#fff}

a.aBlanc{color:#fff;text-decoration:none}
a.aBlanc:hover{text-decoration:underline}

a.under{text-decoration:none}
a.under:hover{text-decoration:underline}

ul li a{height:1%}

/**********************************************************************************************
 *************************** SQUELETTE *************************
 **********************************************************************************************/


#page{background-color:#0ea2cd;text-align:center;padding-bottom:30px}

.accueil{background:url(../img/squelette/bg_accueil.gif) repeat-x;}
.pages{background:url(../img/squelette/bg_pages.gif) repeat-x;}

#haut{position:relative;background:url(../img/squelette/bg_haut.jpg) no-repeat top right;}

.conteneur {
  width:960px;
  text-align:left;
  margin:0px auto 0px auto;
}

h1{width:258px;height:165px;overflow:hidden;float:left;}

div#menuPrincipal{height:56px;background:url(../img/squelette/bg_menu.gif) repeat-x;}
div#menuPrincipal ul{width:100%;background:#009cc9;}
div#menuPrincipal ul li{display:inline;list-style:none}
div#menuPrincipal ul li a{font-family:"trebuchet MS", "arial", sans serif;font-size:11px;font-weight:bold;float:left;height:32px;display:block;background:#009cc9;color:#fff;padding:14px 5px 0}
div#menuPrincipal ul li a:hover,div#menuPrincipal ul li a.actif{background:#0062ac;}
div#menuPrincipal ul li a.premier{padding-left:15px;background:#009cc9 url(../img/squelette/lienPremier.gif) no-repeat 0 0;}
div#menuPrincipal ul li a.premier:hover,div#menuPrincipal ul li a.premierActif,div#menuPrincipal ul li a.premierActif:hover{background:#0062ac url(../img/squelette/lienPremier.gif) no-repeat 0 -46px;}

#hautDroite{padding-top:106px}

ul#menuTop{position:absolute;top:13px;right:30px;}
ul#menuTop li{display:inline;list-style:none}
ul#menuTop li a{margin-right:20px;font-size:12px;color:#fff;text-decoration:none;padding:5px;}
ul#menuTop li a:hover,ul#menuTop li a.actif{background:#fff !important;color:#db2114;}

#focus{position:relative;margin-top:3px;height:300px;background:url(../img/accueil/bg.gif) no-repeat top center}
#focusImage{float:right;margin:9px 20px 0 0}
a#galVide{position:absolute;bottom:0;left:0;display:block;height:102px;}
#partie_gauche{position:relative;float:left;width:450px;font-family:"Trebuchet MS", "Arial", sans serif;padding:25px 0 0 55px}
#partie_gauche a{color:#c4c4c4;text-decoration:none;font-size:11px;}
#partie_gauche a:hover{color:#e42518;}
#focusImage table tr td{height:235px;width:414px;}

#plans{margin:15px 15px 0 0;float:right;width:86px}
#plans a{width:82px;height:54px;background:#e42518;display:block;border:2px #dbdbdb solid;margin-bottom:10px;color:#fff}
#plans a:hover{border:2px solid #e42518;color:#fff}
#plans span{font-family:arial;float:left;margin:5px}

#gal{position:absolute;bottom:16px;left:110px;width:500px;}
#gal h3{margin-bottom:10px;color:#0ea2cd;font-family:"Trebuchet ms","Arial",sans serif;font-size:13px;text-transform:uppercase}
#gal img.fleche,#gal2 img.fleche{position:relative;top:13px}
#gal a,#gal2 a{display:block;float:left;margin-left:4px}
#gal a.vign,#gal2 a.vign{display:block;float:left;width:82px;height:54px;border:2px #cbcbcb solid}
#gal a.vign:hover,#gal2 a.vign:hover{border:2px #0ea2cd solid}

#partie_gauche h2,#partie_gauche h2 a{color:#0ea2cd;font-size:18px;font-weight:normal;}
#partie_gauche ul{padding:10px 0 0 10px}
#partie_gauche ul li{list-style:none;background:url(../img/accueil/puce.gif) no-repeat 0 4px;padding-left:15px;color:#0ea2cd;font-size:12px;margin-bottom:0px}

#gamme{height:205px;float:left;margin-left:29px;width:394px;background:#fff url(../img/accueil/bg_gamme.gif) no-repeat top center}
#gamme h2{text-align:center;color:#0ea2cd;font-size:18px;padding:13px 0;font-weight:normal;font-family:"Trebuchet ms","Arial",sans serif;}
#gamme a.cellule{margin-left:10px;float:left;padding-bottom:9px;font-family:"Trebuchet ms","Arial",sans serif;font-size:14px;color:#fff;display:block;width:182px;text-align:center;background:url(../img/accueil/bg_titre_gamme.gif) no-repeat 0 bottom;}
#gamme a.cellule:hover{background:url(../img/accueil/bg_titre_gamme.gif) no-repeat -182px bottom;}
#gamme a.cellule img{border:3px #e2f1f6 solid;border-bottom:none}
#gamme a.cellule span.titre{display:block;}
img.imgSuite{margin-left:3px}

#article{height:205px;position:relative;margin-right:29px;float:right;width:499px;background:#fff}
#article p{text-align:justify;color:#7c7c7c;padding-right:10px;font-size:12px}
#article img.visu{border:6px #e2f1f6 solid;margin-left:10px}
#article h2{padding:10px 0 10px 10px;color:#e42518;font-size:16px;font-weight:normal;font-family:"Trebuchet ms","Arial",sans serif;}
#basArticle{width:499px;position:absolute;bottom:0px;background:url(../img/accueil/bg_basarticle.gif) no-repeat;height:43px;}
#basArticle p{padding:18px 0 0 13px;font-family:"Trebuchet ms","Arial",sans serif;font-size:11px}

/*******
** CONTENU DES PAGES
*******************************/

#contenuPages{padding-top:35px;margin-top:4px;background:url(../img/pages/bg_pages.jpg) no-repeat top center}
#contenuGauche{position:relative;z-index:5;float:left;margin-left:15px;width:196px;}
#contenuDroite{position:relative;z-index:5;float:right;margin-right:12px;width:720px;}
#zeContent{background:#fff url(../img/pages/bottom_ze.jpg) no-repeat bottom center;padding-bottom:11px;}
#topZe{background:#0c91b7 url(../img/pages/top_ze.jpg) no-repeat bottom center;height:11px;}
#topZe2{background:#0d9cc6 url(../img/pages/top_ze2.jpg) no-repeat bottom center;height:11px;}

#contenuDroite h3{font-family:"Trebuchet ms","Arial",sans serif;color:#fff;font-weight:normal;font-size:14px;margin:0 0 7px 10px}

#contenuGauche h2{margin-left:5px;font-family:"Trebuchet ms","Arial",sans serif;color:#fff;font-weight:bold;font-size:14px;text-transform:uppercase}
#contenuGauche p.soustitre{margin-left:5px;margin-bottom:5px;color:#98d6e8;font-size:12px}
#contenuGauche ul{margin-bottom:15px}
#contenuGauche ul li{list-style:none;margin-bottom:2px}
#contenuGauche ul li a{display:block;padding:8px 3px 8px 5px;background:#0c8fb7;color:#fff;}

#contenuGauche ul li a.gamme,#contenuGauche ul li a.gammeActif{text-align:center;padding:10px;font-family:"Trebuchet ms","Arial",sans serif;font-size:13px;}
#contenuGauche ul li a:hover,#contenuGauche ul li a.actif,#contenuGauche ul li a.gammeActif{background:#fff !important;color:#0c8fb7 !important}

#contenuGauche ul li a.gamme span{color:#90d9ef}

/* Présentation des gammes */
#presa{background:#d2eef5;padding:30px;margin-bottom:20px;}
#presa img.visu{border:4px #fff solid}
#presa h4{font-family:"Trebuchet ms","Arial",sans serif;font-size:16px;margin:7px 0px;color:#0c90b6;}
#presa p{color:#0c90b6;margin-bottom:7px}
#presa a{color:#DE2216;text-decoration:none}
#presa a:hover{text-decoration:underline}

/* contenu pages fond blanc */
#zeContent a.cellule{margin-left:10px;margin-bottom:10px;float:left;display:block;text-align:center;width:225px;padding:8px 0;font-family:"Trebuchet ms","Arial",sans serif;font-size:12px;color:#0c90b6;background:#d2eef5}
#zeContent a.cellule img{border:#b7d0d9 5px solid}
#zeContent a.cellule:hover{background:#0c91b7;color:#fff;}
#zeContent a.preums{margin-left:13px !important}
#zeContent a.cellule span{display:block}

/*sous menu produit*/
ul.sub{padding-bottom:23px;background:#1299c2 url(../img/gamme/subMenu.jpg) no-repeat bottom;margin:5px 9px}
ul.sub li.top{background:url(../img/gamme/subMenu.jpg) no-repeat bottom;height:23px;}
ul.sub li a{margin:0 3px;display:block;text-align:center;padding:5px !important;color:#a5d2df !important;background:#1299c2 !important}
ul.sub li a:hover{background:#ffffff}

/*****
***** PRODUIT
*****************/

div.descG{width:180px;float:left;margin-left:26px;}
div.descD{width:470px;float:right;margin-right:12px}

#plansProduit{margin-top:10px}
/*#plansProduit a{padding:3px 0 1px 3px;height:117px;display:block;margin-bottom:10px;color:#fff;background:#dbdbdb}*/
#plansProduit a{padding:3px 0 1px 3px;display:block;margin-bottom:10px;color:#fff;background:#dbdbdb}
#plansProduit a:hover{color:#fff;background:#e42518}
#plansProduit span{font-family:arial;float:left;margin:5px}

#zeContent h4{margin:15px 0 20px 15px;font-size:16px;font-weight:bold;color:#0ea2cd}
#zeContent p.ener{margin-right:15px;background:#e42518;padding:7px 15px;float:right;color:#fff;font-family:"Trebuchet ms","Arial",sans serif;font-size:16px;text-align:center;}

#zeContent div.texteProduit{margin:10px 15px 10px 5px;color:#0d90b7;font-size:12px}
#zeContent div.texteProduit a{color:#e42518;text-decoration:underline}
#zeContent div.texteProduit a:hover{text-decoration:none;}
#zeContent div.texteProduit h5{margin:15px 0 10px;font-family:"Trebuchet ms","Arial",sans serif;font-size:14px;font-weight:normal;color:#e42518}
#zeContent .texteProduit ul{margin-left:15px;}
#zeContent .texteProduit ul li{list-style:none;background:url(../img/gamme/puce.gif) no-repeat 0 4px;padding-left:20px;}

#gal2{width:692px;background:url(../img/gamme/bg_gal.gif) no-repeat top left;margin:15px 0 0 15px}
#gal2 h3{margin-left:75px;margin-bottom:10px;color:#0ea2cd;font-family:"Trebuchet ms","Arial",sans serif;font-size:13px;text-transform:uppercase}
#gal2 .margeProd{margin-left:95px}

.descD #visuel{position:relative}
.descD #vignettes{position:absolute;right:10px;top:5px;}

/**********************************************************************************************
 *************************** SCROLLABLE *************************
 **********************************************************************************************/

/*
    root element for the scrollable.
    when scrolling occurs this element stays still.
*/

div.scrollable2 {
    /* required settings */
    position:relative;
	float:left;
    overflow:hidden;
    height:60px;
}

#gal div.scrollable2{width: 360px;}
#gal2 div.scrollable2{width: 540px;}


/*
    root element for scrollable items. Must be absolutely positioned
    and it should have a extremely large width to accomodate scrollable items.
    it's enough that you set width and height for the root element and
    not for this element.
*/
div.scrollable2 div.items2 {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
}

/*
    a single item. must be floated in horizontal scrolling.
    typically, this element is the one that *you* will style
    the most.
*/
div.scrollable2 div.items2 div {
    float:left;
}

/* you may want to setup some decorations to active the item */
div.items2 div.active {
    border:1px inset #ccc;
    background-color:#fff;
}

a.browse2{cursor:pointer}



 /*************************
 ***********/


/* footer */
#footer{text-align:center;background:#fff;color:#a2a2a2}
#contentFoot{text-align:left;padding-top:10px;padding-bottom:20px;background:url(../img/footer/bg.gif) repeat-y}
#topFoot{background:url(../img/footer/top_foot.gif) no-repeat;height:27px;margin-bottom:15px}
#contentFoot ul li{list-style:none}
#contentFoot ul li a{color:#a2a2a2;text-decoration:none}
#contentFoot p a{color:#e42518;text-decoration:none}
#contentFoot ul li a:hover,#contentFoot p a:hover{text-decoration:underline}



div.celluleActu{color:#fff;background:#b70034;padding:6px;}
div.celluleActu div.texte{margin:0 6px;float:left;width:160px;}
div.celluleActu a{color:#fff;text-decoration:none}



/**********************************************************************************************
 *************************** COMMUN *************************
 **********************************************************************************************/




/*** MESSAGES ERREUR ***/
.ok, .error{text-align:center; }
.ok {background-color:#00B000; color:#fff; font-weight:bold; padding:2px 0px}
.error {background-color:#e42518; color:#fff; font-weight:bold; padding:2px 0px}
.erreur{background:#e42518 !important;color:#fff !important}


/*** EXTRAS ***/

div.extras .widthExtras{width:680px;}
#contenu{margin-left:16px;width:680px;padding:10px 0 6px}

div#basRound{margin-left:16px;width:680px;background:#fff url(../img/squelette/bas_contenu.gif) no-repeat bottom right;padding:0 0 30px;}

div.extras{padding:0 20px}
div.extras h4{margin:5px 0 !important;font-family:"Trebuchet ms","Arial",sans serif;font-size:14px !important;}
div.extras p{color:#0D90B7;}
div.extras p a{color:#e42518;text-decoration:none}
div.extras a:hover{text-decoration:underline}
div.extras .width1{width:70px}
div.extras .width2{width:380px}
div.extras .width3{width:120px}
div.extras td a,div.extras div.credits1 a,div.extras div.credits2 a{color:#e42518;text-decoration:none}
div.extras td a:hover,div.extras div.credits1 a:hover,div.extras div.credits2 a:hover{color:#e42518;text-decoration:underline}
div.extras caption{font-size:11px;background-color:#009CC9; color:#fff; padding:1px 0px; font-weight:bold}
#leb-img {margin-top:20px}

div.extras .credits1,div.extras .credits2{background-color:#F0F0F0; margin:5px 0px; padding:5px 0px 5px 20px; width:450px}
div.extras .bg1{background-color:#F0F0F0}
div.extras .credits2,div.extras .bg2{background-color:#F9F9F9}
div.extras td{padding:5px 0;color:#666;font-size:11px}


#plan ul li{list-style:none}
#plan a {display:block;padding:5px 0px 5px 5px; background-color:#ddd; margin-bottom:4px;color:#666}
#plan a:hover {background-color:#0ea2cd; color:#fff;text-decoration:none}
#plan a.titre{font-weight:bold;background:#fff;color:#e42518}
#plan a.titre:hover{background:#e42518;color:#fff}

/***************************************
************ FORMULAIRES ***
***************************************************************/


#formContact label.normal1{float:left;width:100px;text-align:right;font-weight:normal;color:#a1a1a1;margin-right:7px;position:relative;top:3px}
#formContact label.normal{float:left;width:170px;text-align:right;font-weight:normal;color:#a1a1a1;margin-right:7px;position:relative;top:3px}
#formContact p.textuel input{color:#fff;width:200px;background:#bbb;border:none;font-size:11px;font-family:arial;margin-bottom:5px;padding:3px;}
#formContact textarea{margin:20px 0 0 40px;color:#fff;width:600px;border:none;background:#bbb;font-size:11px;font-family:arial;margin-bottom:5px;padding:3px;}
#formContact input.send{font-size:11px;border:none;background:#009cc9;color:#fff;padding:3px;display:block;width:606px;text-align:center;margin:0 0 0 40px;}
#formContact p.textuel select{padding:2px 5px;font-size:11px;font-weight:normal;color:#a1a1a1;width:207px;}
#formContact input.sendLettre{font-size:11px;border:none;background:#009cc9;color:#fff;padding:3px 0;display:block;width:207px;text-align:center;margin:0 0 0 177px;}