/* ---------------------------------------------------------------------------------------------------------- 
                                           crédit : www.belek.fr
---------------------------------------------------------------------------------------------------------- */
/*

                 o°
                oo
                oo
                ooooooooooo
                oooooooooooo
                oo        oo           
                oo        oo                  
                oooooooooooo
                 ooooxxoooo 
                                   
    
          Studio Multimédia belek
              
*/



/* ---------------------------------------------------------------------------------------------------------- 
                                               ARCHITECTURE
---------------------------------------------------------------------------------------------------------- */
html, body{
margin:0px;
padding: 0px;
}

body{
font-family: Arial;
background-color: #fff;
}  

p{
padding: 0px; 
margin: 0;
font-size: 12px;
color: #000000;
text-align: justify;  
}

#conteneur_a{
width:850px;
padding:0px;
margin:0px auto;
background:url(../images/bg_conteneur.gif) left top repeat-y; 
}

#conteneur_b{
width:840px;
padding:0px;
margin:0px 0px 0px 5px;
background:url(../images/bg_colonnes.gif) left top repeat-y; 
}

/* ---------------------------------------------------------- HEADER */

#header, #header h1{
margin: 0;
padding: 0;
}

#header{
width: 840px;
height: 178px;
background: url(../images/tete_haut.jpg) left top no-repeat;
position: relative;
}
 
/* ---------------------------------------------------------- ONGLETS */   

#onglet{
width: 372px;
height: 41px;
position: absolute;
left:172px;
top:140px;
font-size: 14px;
background: url(../images/bg_onglet.gif) no-repeat; 
}

#onglet td{ 
text-align: center;
color: #3b4fba; 
}

#onglet a{ 
line-height: 43px;
text-decoration: none;
color: #f85e00;
font-weight: bold;
padding: 0px 5px 0px 5px;   
}

#onglet a:hover{
text-decoration: none;
color: #3b4fba;
}

#onglet a#active_menu{     
color: #3b4fba;
}

/* ---------------------------------------------------------- BANNIERE FLASH */           

#banniereFla{
width: 768px;
height: 90px;
position: absolute;
right:60px;
top:1px;
} 
    

/* ---------------------------------------------------------- ONGLETS DROITS*/  

#ongletDroit{
background: url(../images/formation_athentiq_on.gif) no-repeat;   
width: 152px;
height: 60px;
position: absolute;
right:4px;
top:121px;
}

#ongletDroit a{
width: 100%;
height: 100%; 
display: block;
cursor: pointer;
background: none;
text-decoration:none;
color : #FFFFFF;
}

#ongletDroit a:hover{ 
background: url(../images/formation_athentiq_over.gif) no-repeat;  
}


/* ---------------------------------------------------------- CHEMIN */  
#chemin{
width: 840px;
height: 40px;
padding:0px;
background: url(../images/barre_recherche.jpg) left top repeat-x;
}

#chemin p.chemin{  
margin: 0;
padding: 13px 0px 0px 40px; 
font-size: 11px;
}

#chemin p.chemin a{
font-size: 11px;  
color: #000;
}
#chemin p.chemin a:hover{
font-size: 11px;  
color: #000;
text-decoration: none;
}


/* ---------------------------------------------------------- COLONNE GAUCHE */  
#col_gauche{    
background: #c8c8c8;   
width: 174px;
float:left;
}

#col_gauche td{
font-size: 11px; 
width: 174px;   
} 

#col_gauche td a{
text-decoration: none;
color: #000000;
background:#c0c0c0 url(../images/bg_menu_left.gif) left top no-repeat;
display: block;
width: auto;
padding: 6px 10px 6px 10px;                
height: 100%;    
border-bottom: 1px solid #ededed;      
}

#col_gauche td a:hover{
background:#5c93c7 url(../images/bg_left_hover.gif) left top no-repeat;  
text-decoration: none;
color: #ffffff;
}

#col_gauche td a#active_menu{
background:#f85e00 url(../images/bg_left_active.gif) left top no-repeat;
font-size: 11px;
text-decoration: none;
color: #ffffff;
}

/* ---------------------------------------------------------- CONTENU */  

#contenu{
width:480px;
float:left;
margin-left: 15px;
min-height: 10px;    
}   
.contentpaneopen{
width:100%;
} 


/* ---------------------------------------------------------- COLONNE DROITE */                       
#col_droite{
float:left; 
width: 155px;
background: #c8c8c8; 
margin-left: 16px;    
}

/* Decouvrir aussi */  

#col_droite .module_decouvrir h3 {
background: #5981c0 url(../images/bg_titre_partenaires.gif) no-repeat; 
font-size: 13px;
font-weight: bold;
color: #ffffff;
line-height: 27px; 
text-align: center;
padding: 0;
margin: 0;
}

#col_droite .module_decouvrir td {
background: url(../images/bg_decouvrir.gif);
line-height: 27px; 
text-align: center;   
}
 
#col_droite .module_decouvrir td a {
font-size: 11px;
text-decoration: none;
color: #4f5a64;
display: block;
width: auto;
padding: 0;
margin: 0;                
height: 100%; 
}

#col_droite .module_decouvrir td a:hover {
color: #F15B00;
background: url(../images/puce_decouvrir.png) left center no-repeat;  
}

/* Nos partenaires */

#col_droite .modulepartenaires h3 {
background: #5981c0 url(../images/bg_titre_partenaires.gif) no-repeat;
font-size: 13px;
font-weight: bold;
color: #fff;
line-height: 27px; 
text-align: center;              
padding: 0;
margin: 0;
}

#col_droite .modulepartenaires a { 
padding: 0px;
margin: 0px; 
border: 1px solid #c8c8c8;
display: block;
}

#col_droite .modulepartenaires a:hover {  
border: 1px solid #F15B00;
}

#col_droite #esp_vide{       
width: 155px;
height: 500px;  
}

/* ----------------------------------------------------------------- FOOTER */  

#footer{
background: url(../images/barre_footer.gif) bottom no-repeat;      
width: 840px;
height: 41px;
text-decoration: none; 
text-align: center;   
clear: both;  
}

#footer td {
text-align: center;
padding: 15px 0px 0px 0px;
}

#footer a{   
padding: 0px 7px;        
font-size: 11px; 
color: #4f5a64; 
text-decoration: none;
width: auto; 
}

#footer a:hover{
text-decoration: underline;
color : #3b4fba;      
}

/* ----------------------------------------------------------------- Integration */


#contenu h1{
color: #3b4fba;
font-weight: bold;
font-size: 18px; 
margin: 10px 0;

}

#contenu h2{ 
color: #F85E00;
font-size: 14px;
}

#contenu h3{        
padding: 0px 0px 6px 0px;                                                                                  
margin: 0;
color: #3b4fba;
font-size: 12px;
font-weight: bold;
}

#contenu h4{   
padding: 0px 0px 0px 3px;                                                                                     
color: #f15b00;
font-size: 12px;
font-weight: bold;
}

#contenu a{
font-size: 12px;
text-decoration: underline; 
color : #f15b00;
}

#contenu a:hover{
text-decoration: none;
color : #3b4fba;
}  
    
#contenu ul{
margin: 0;
padding: 0;
list-style: none;
}

#contenu ul li{
padding: 0px 0px 0px 20px;
margin: 5px 0px; 
line-height: 14px;
background:url(../images/puce_list.gif) left top no-repeat ;                  
}

.blog_more{
width: 50%;
}

.blog{
font-size: 12px;
}

.blog_more li a{
display: block;
margin-left: 1px;
margin-top: 5px;  
}


/* ----------------------------------------------------------------- Formulaire */          

.inputbox{
width:auto;
padding:2px 4px;
background:  url(../images/bg-input.jpg) left top no-repeat;
border:1px solid  #c8c8c8 ;
font-size:13px;
}

.input_btn{
margin: 3px 0px 0px 0px;
height: 24px;
width: 76px;
color: #fff;
background:url(../images/btn_form.gif) no-repeat; 
border:1px solid #FFFFFF;
font-size:11px;
text-align: center; 
padding-bottom: 2px; 
}

.input_btn:hover{
color: #fff;
background: url(../images/btn_form_hover.gif) no-repeat;
cursor: pointer;
}

.required{
color: #000;   
}

form#ChronoContact_Contact_Formulaire div, form#ChronoContact_Contact_Telephone{
font-size:10px;
background:#FFFFFF;
width: 240px; 
}

form#ChronoContact_Contact_Formulaire h3, form#ChronoContact_Contact_Telephone h3{  
padding: 8px 0px 0px 0px;
}

form#ChronoContact_Contact_Formulaire textarea{
width: 175px;
}

.validation-advice{
color: red; 
}

.inputbox .validation-failed{
color:red;
font-size:12px;
}   

#advice-required-contact_nom {
color:red;
font-size:12px;
}
                                                                       
form#ChronoContact_Contact_Telephone .contacts_list{
margin : 10px 0px 6px 0px; 
width: 185px;
background: #b9c3e5;
border: #000;
color: #000;
}

/* -----------------------------------------------------------------*/