/* 
* Copyright (c) 2009 SYSCOMM. Tous droits réservés
*/

/*
* Eléments HTML en général
*/

body {
font:normal normal 11px Verdana,Arial,Helvetica,sans-serif;
text-align:center;
color:#000;
background-color:#EEE;
}
h1{
font:normal bold 17px Verdana,Arial,Helvetica,sans-serif;
padding:20px 0;
}
h2{
font:normal bold 15px Verdana,Arial,Helvetica,sans-serif;
text-align:center;
padding:18px 0;
}
h3{
font:normal bold 12px Verdana,Arial,Helvetica,sans-serif;
}
h4{
padding:1px 0 4px 0;
}
a,a:visited{
color:#333;
text-decoration:underline;
}
a:active,a:hover{
text-decoration:underline;
}


/*
* Page
*/
#wrapper{
}
#page{
text-align:left;
margin:0 auto;
width:980px;
background-color:#FFF;
}
#entete{
background:url(./images/bandeau.jpg) no-repeat 0 0;
width:980px;
height:281px;
}
#menuContent{
background:url(./images/fond_menu.jpg) repeat-x 0 0;
width:980px;
height:35px;
overflow:hidden;
}
#mainContent{
background:url(./images/fond_page.gif) repeat-y 0 0;
padding:0 0 10px 0;
min-height:200px;
text-align:left;
}
#footerContent{
background:url(./images/fond_pied.gif) repeat-y 0 0;
padding:12px 0 20px 0;
}
.clear{
clear:both; 
font-size:0; 
line-height:0;
}


/*
* Bloc header
*/
#boutons{
background:url(./images/fond_boutons.gif) repeat-x 0 0;
float:right;
padding:11px 0 0 0;
height:40px;
}
#acces{
float:right;
padding:6px;
}
#connex input{
padding:1px;
margin:2px 4px 2px 0;
height:15px;
vertical-align:middle;
}

/*
* Bloc menu
*/
#menuContent{
text-align:center;
}
#menuContent p{
height:10px;
}
#menuContent ul{
text-align:center;
}
#menuContent ul li{
color:#FFFFFF;
display:inline;
}
#menuContent .menu{
font:normal bold 12px/14px Verdana,Arial,Helvetica,sans-serif;
color:#FFF;
text-align:center;
}
#menuContent .separateur{
padding:10px 1px;
background:url(./images/separateur.gif) no-repeat center 0;
}
a.lienMenu, a.lienMenu:visited, a.lienMenu:active, a.lienMenu:hover{
padding:10px 4px;
text-decoration:none;
}
a.lienMenu:active, a.lienMenu:hover{
text-decoration:underline;
}
a.lienLeft, a.lienLeft:visited, a.lienLeft:active, a.lienLeft:hover{
font:normal bold 12px/14px Verdana,Arial,Helvetica,sans-serif;
color:#000;
text-decoration:none;
}
a.lienLeft:active, a.lienLeft:hover{
text-decoration:underline;
}


/*
* Contenu
*/
#oneCol{
padding:0 46px;
}
#twoCols{
background:url(./images/fond_bloc_left.gif) repeat-y 0 0;
}
#blocLeft{
float:left;
width:232px;
padding:44px 0 44px 18px;
}
#blocRight{
float:left;
width:698px;
padding:0 20px 0 10px;
}
.titrePage{
text-align:center;
padding:8px 0 14px 0;
}
.espace{
padding:0 16px;
}
.ancetre{
font:normal bold 11px/14px Verdana,Arial,Helvetica,sans-serif;
text-align:left;
padding:10px 0;
}
.ancetre0{
padding:4px 6px 4px 27px;
background:url(./images/ancetre.jpg) no-repeat 0 50%;
}
.ancetreX{
padding:0 6px 0 22px;
background:url(./images/ancetre_suite.jpg) no-repeat 0 50%;
}
.flecheLeft{
padding:2px 6px 3px 22px;
background:url(./images/fleche_left.gif) no-repeat 0 50%;
}
.print{
text-align:right;
padding:10px 0 ;
}
.print a{
padding:8px 20px;
background:url(./images/pdf.gif) no-repeat 100% 50%;
}


/*
* Bloc signature
*/
#footerContent{
font:normal bold 10px Verdana,Arial,Helvetica,sans-serif;
color:#000;
}
#footerContent .adresse{
text-align:center;
}


/*
 * Navigation pages
 */
#pages{
text-align:center;
padding:8px 0;
}


/*
* Rubrique Produit
*/
.titreProduitRubrique{
font:normal bold 11px/17px Verdana,Arial,Helvetica,sans-serif;
}
h2.rubrique{
color:#0051A0;
font:normal bold 15px Verdana,Arial,Helvetica,sans-serif;
text-align:center;
}
.petitBlocProduit .image{
border:1px solid #0051A0;
padding:2px;
margin:2px 0;
}
.petitBlocProduit{
width:172px;
padding:16px 8px;
}
.imageDiv{
height:220px;
}
.titreProduit{
padding:12px 0;
}
.acheter{
padding:3px 0 0 0;
}


/*
 * Page Produit
 */
#blocProduit .descriptionProduit{
margin:8px 0;
width:290px;
float:left;
}
#blocProduit td.blocDImages{
width:183px;
float:right;
text-align:center;
}
#blocProduit .bigImage{
/* float:left; */
}
#blocProduit ul.vignettes {
width:183px;
float:left;
}
#blocProduit ul.vignettes li{
float:left;
height:68px;
}
#blocProduit ul.vignettes li a, #blocProduit ul.vignettes li a:visited{
border:1px solid #BBBDBF;
padding:1px;
width:56px;
height:56px;
float:left;
background-color:#FFF;
overflow:hidden;
}
#blocProduit ul.vignettes li a:hover{
border:1px solid #88888B;
background-color:#8FBCE3;
}
.ajouter{
}
.queFaire{
text-align:center;
margin:20px 0;
}
.queFaire a{
padding:0 20px;
}


/*
 * Les formulaires 
 */
#formmdp, #formLogin, #formChgMdp{
text-align:center;
padding:16px 0;
}
#formLogin input, #formChgMdp input{
width:190px;
}
#formmdp input{
padding:1px;
margin:2px 4px 2px 0;
height:15px;
vertical-align:middle;
}
#formCoordonnees input{
border:1px solid #FFF;
}
#formRecherche{
height:46px;
}
#formRecherche input{
width:100px;
}
#formRecherche .input{
float:left;
padding:10px 6px;
}
#formRecherche .ok{
float:left;
padding:10px 0 0 0;
}
.formulaire legend{
padding:26px 35%;
font:normal bold 11px Verdana,Arial,Helvetica,sans-serif;
}
.formulaire label{
display:block;
}
.formulaire .ctrlHolder{
padding:12px 7px 7px 7px;
border-bottom:1px solid #DFDFDF;
}
.formulaire .inlineLabels label, .formulaire .inlineLabels .label{
float:left;
position:relative;
line-height:100%;
width:35%;
margin:0.3em 2% 0 0;
font-weight:bold;
}
.formulaire .inlineLabels label em{
display:block;
font-style:normal;
font-weight:bold;
left:auto;
position:absolute;
right:0;
}
.formulaire .inlineLabels input,.formulaire .inlineLabels select,.formulaire .inlineLabels textarea, .formulaire .inlineLabels .value{
float:left;
width:60%;
}
.formulaire .clear{
margin-top:0;
margin-left:37%;
position:static;
height:4px;
float:none;
}
.formulaire .formHint{
color:#777777;
font-size:10px;
margin-left:37%;
margin-top:0;
position:static;
top:-0.5em;
width:35%;
float:none;
clear:both;
}
.ligneObligatoire{
margin:6px 0 6px 16px;
}
.bouton{
width:72px;
margin:10px auto 20px;
}


/*
* Divers
*/
.col2Set{
clear:both;
}
.connexion{
margin:30px 0;
}
.compte{
margin:20px 0;
}
.col2Set p{
padding:10px 0;
font:normal normal 11px/15px Verdana,Arial,Helvetica,sans-serif;
}
.col2Set .col1{
float:left;
}
.col2Set .col2{
float:right;
}
.col2Set .col1, .col2Set .col2{
width:48%;
}
.connexion .col1, .connexion .col2,.compte .col1, .compte .col2{
background:#F6F098 none repeat scroll 0 0;
border:1px solid #41702A;
}
.connexion .content, .compte .content{
min-height:190px;
background:#FFF none no-repeat scroll 0 0;
padding:4px 9px;
}
.buttonSet{
border-top:1px solid #41702A;
clear:both;
padding:8px 10px 8px 0;
text-align:right;
}
.buttonSet a{
float:left;
}
.formButton{
background:#0051A0 none repeat scroll 0 0;
border:1px solid #CCC;
color:#FFF;
cursor:pointer;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
overflow:visible;
padding:1px 8px;
text-align:center;
vertical-align:middle;
width:auto;
}


/*
* Tableaux
*/
.recapitulatifTable th{
background-color:#BBBDBF;
font:normal bold 12px/16px Verdana,Arial,Helvetica,sans-serif;
color:#FFF;
height:30px;
vertical-align:middle;
}
.recapitulatifTable td{
font:normal normal 11px/17px Verdana,Arial,Helvetica,sans-serif;
height:24px;
vertical-align:middle;
}


/*
* Commande / réglement
*/
.choixDeLaLivraison, .choixDuReglement{
float:left;
width:100%;
padding:20px 0 0 0;
}
.choixDeLaLivraison ul, .choixDuReglement ul{
width:100%;
}
.choixDeLaLivraison ul li, .choixDuReglement ul li{
font:normal bold 12px/17px Verdana,Arial,Helvetica,sans-serif;
}
.choixDeLaLivraison span.modeDeLivraison, .choixDuReglement span.modeDeReglement, .choixDeLaLivraison span.choisir, .choixDuReglement span.choisir{
float:left;
color:#000;
line-height:37px;
width:50%;
background-color:#BBBDBF;
text-indent:10px;
height:40px;
}
.choixDeLaLivraison span.choisir, .choixDuReglement span.choisir{
background-color:transparent;
color:#666;
}
.choixDeLaLivraison ul li a, .choixDeLaLivraison ul li a:visited, .choixDuReglement ul li a, .choixDuReglement ul li a:visited{
height:40px;
color:#FFF;
display:block;
background-color:#BBBDBF;
}
.choixDeLaLivraison ul li a:hover, .choixDuReglement ul li a:hover{
text-decoration:underline;
background-color:#9C1154;
}


/*
* Nuage de Tags
*/
#nuage{
overflow:hidden;
border:1px dotted #333;
text-align:center;
width:170px;
float:right;
}
.nuage1{
font:normal bold 11px Verdana,Arial,Helvetica,sans-serif;
}
.nuage2{
font:normal normal 14px Verdana,Arial,Helvetica,sans-serif;
}
.nuage3{
font:normal bold 16px Verdana,Arial,Helvetica,sans-serif;
}
.nuage4{
font:italic normal 18px Verdana,Arial,Helvetica,sans-serif;
}
.nuage5{
font:normal normal 20px Verdana,Arial,Helvetica,sans-serif;
}