/*-------------------------------------------------------------------------------------------------*/
/*
______________________
INTERFACE
______________________
Feuille de style de l'interface du site
_________________________________________________________
*/

/*---------------------------GLOBAL---------------------------*/

html{
margin:0px;
}

body{
font-family:Arial, Verdana;
margin:0px;
width:100%;
height:100%;
font-size:12px;}

h1{
font-size:18px;
color:#e01e26;
padding:10px 0px;
margin:0px;
font-weight:normal;
}

h2{
color:#000000;
font-weight:bold;
font-size:14px;
margin:5px 0px;
padding:5px 0px;
}

h3{
color:#777777;
font-weight:normal;
font-size:18px;
margin:5px 0px;
padding:5px 0px;
}

a{
color:#ed1a3a;
}

a:hover{
color:#666666;
}

p{
font-size:12px;
}

img{
border:none;
}

input{
padding:2px;
}

select{
font-size:11px;
padding:2px;
}

/*---------------------------PRINCIPAUX CONTENEURS---------------------------*/

#site{
width:960px;
margin-left:auto;
margin-right:auto;
margin-top:20px;
margin-bottom:20px;
padding:0px;
background:#ffffff url('interface/site_bg.gif') repeat-x top center;
}

#haut{
}

#milieu{
}

#content{
width:960px;
padding:0px;
clear:both;
float:left;
margin:0px 0px 20px 0px;
}

.vue_internet_hcc{
background:#ffffff;
width:960px;
margin:0px;
clear:both;
float:left;
padding:20px 0px 20px 0px;
}

.acces_pro{
background:#ffffff;
width:960px;
margin:0px;
clear:both;
float:left;
padding:0px 0px 20px 0px;
}

/*---------------------------BANDEAU---------------------------*/

#bandeau{
height:180px;
width:960px;
padding:0px;
background:url('interface/bandeau.jpg') no-repeat top left;
clear:both;
float:left;
margin:0px;
}

/*---------------------------MOTEUR DE RECHERCHE---------------------------*/

#recherche{
width:250px;
float:right;
margin:0px;
}

#recherche input{
float:left;
font-size:14px;
background:url('interface/recherche_input_bg.gif') no-repeat top left;
border:none;
width:200px;
height:18px;
padding:6px 10px;
margin:0px;
}

#recherche a{
background:url('interface/recherche_btn.gif') no-repeat top left;
display:block;
float:left;
width:30px;
height:30px;
}

/*---------------------------MENU N1---------------------------*/

#menu_colmar{
clear:both;
float:left;
width:960px;
height:110px;
margin:0px 0px 0px 0px;
}

#menu_colmar ul{
float:left;
margin:0px;
height:110px;
padding:0px;
list-style:none;
padding:0px 0px 0px 30px;
}

#menu_colmar li{
margin:0px;
float:left;
background:#7a98be;
height:110px;
width:120px;
margin:0px 10px 0px 0px;
}

#menu_colmar li a{
float:left;
display:block;
height:110px;
width:120px;
padding:0px 0px;
text-decoration:none;
background:#7a98be;
}

#menu_colmar li a img{
float:left;
display:block;
height:80px;
width:120px;
padding:0px 0px;
}

#menu_colmar li a p{
float:left;
display:block;
height:30px;
line-height:30px;
width:120px;
padding:0px;
margin:0px;
font-weight:bold;
font-size:16px;
text-align:center;
color:#ffffff;
cursor:pointer;
}

#menu_colmar li.selected a{
display:inline-block;
height:40px;
padding:0px 20px;
line-height:40px;
font-weight:normal;
font-size:14px;
color:#ad705b;
text-decoration:none;
background:#ffffff;
}

#menu_colmar li a:hover p{
color:#eeeeee;
text-decoration:none;
}

/*---------------------------MENU BOUTONS---------------------------*/

#boutons{
clear:both;
float:left;
width:960px;
height:60px;
}

#boutons ul{
float:left;
margin:0px;
height:60px;
padding:0px;
list-style:none;
padding:0px 0px 0px 30px;
}

#boutons li{
margin:0px;
float:left;
height:60px;
margin:0px 0px 0px 0px;
}

/*---------------------------ANIMATION---------------------------*/

#animation{
clear:both;
float:left;
width:960px;
height:340px;
margin:0px 0px 20px 0px;
padding:0px;
}

/*---------------------------FIL ARIANE---------------------------*/

#ariane{
clear:both;
color:#000000;
font-size:12px;
display:block;
width:900px;
padding:0px 30px;
height:40px;
line-height:40px;
border-bottom:solid 1px #ffffff;
}

#ariane a {
font-size:12px;
color:#7997c1;
text-decoration:none;
}

#ariane a:hover {
text-decoration:underline;
}

#ariane_fil{
float:left;
}

#ariane_outils{
float:right;
}

#ariane_outils img {
vertical-align:middle;
}

#ariane_outils a {
padding:0px 0px 0px 10px;
}

#menu_n1{
display:none;
}

/*---------------------------BLOCS---------------------------*/

.colonne{
float:left;
width:300px;
}

.colonne_double{
float:left;
width:630px;
}

.colonne h1{
background:url('interface/entete_colonne1_bg.gif') no-repeat top left;
line-height:40px;
color:#ffffff;
font-size:16px;
font-weight:bold;
text-align:center;
padding:0px;
margin:0px;
}

.colonne_double h1{
background:url('interface/entete_colonne2_bg.gif') no-repeat top left;
line-height:40px;
color:#ffffff;
font-size:16px;
font-weight:bold;
text-align:center;
padding:0px;
margin:0px;
}

.colonne .article{
background:url('interface/colonne1_bg.gif') repeat-x top left;
clear:both;
float:left;
width:280px;
padding:10px;
height:105px;
}

.colonne .article_galerie{
background:url('interface/colonne1_bg.gif') repeat-x top left;
float:left;
width:130px;
padding:10px;
height:105px;
}

.colonne_double .article{
background:url('interface/colonne1_bg.gif') repeat-x top left;
clear:both;
float:left;
width:610px;
padding:10px;
}

.colonne .article img, .colonne_double .article img, .colonne .article_galerie img{
background:#c4c4c4;
float:left;
margin:0px 10px 0px 0px;
display:block;
width:100px;
height:80px;
}

.colonne .article p.titre, .colonne_double .article p.titre, .colonne .article_galerie p.titre{
color:#000000;
font-size:12px;
font-weight:bold;
margin:0px 0px 10px 0px;
}

.colonne .article p.texte, .colonne_double .article p.texte{
color:#000000;
font-size:12px;
font-weight:normal;
margin:0px 0px 10px 0px;
}

#colonne_1{
margin:0px 30px 0px 0px;
}

#colonne_2{
margin:0px 30px 0px 0px;
}

#colonne_3{
margin:0px 0px 0px 0px;
}

/*---------------------------PIED---------------------------*/

#bas{
width:960px;
padding:0px 0px;
clear:both;
float:left;
color:#ffffff;
}

#bas .copyright{
line-height:20px;
color:#ffffff;
font-size:10px;
text-align:right;
float:left;
clear:both;
width:960px;
}

#bas .coordonnees{
width:200px;
padding:10px 20px;
color:#000000;
font-size:12px;
float:right;
text-align:right;
}

#bas .liens_outils{
width:680px;
padding:10px 20px 10px 20px;
line-height:30px;
color:#7997c1;
font-size:12px;
float:left;
text-align:left;
}

#bas .liens_outils a{
color:#7997c1;
font-size:12px;
text-decoration:none;
}

#bas .liens_outils a:hover {
text-decoration:underline;
}

/*---------------------------HON---------------------------*/

#hon{
float:left;
clear:both;
width:960px;
background:#7895bf;
padding:20px 0px;
margin:0px 0px 20px 0px;
}

#hon .logo{
float:left;
padding:0px 20px;
width:100px;
}

#hon .certification{
float:left;
padding:0px 0px;
width:230px;
font-size:16px;
font-weight:bold;
color:#015590;
}

#hon .description{
float:left;
padding:0px 20px;
width:550px;
font-size:16px;
font-weight:bold;
color:#ffffff;
}

/*---------------------------MAJ---------------------------*/

#maj{
float:left;
clear:both;
width:960px;
background:#7895bf;
padding:10px 0px;
text-align:center;
font-size:16px;
font-weight:bold;
color:#ffffff;
}

/*---------------------------PLAN DU SITE---------------------------*/

#plan_du_site{
float:left;
padding:10px 30px;
width:900px;
}

#plan_du_site ul{
margin:0px;
padding:0px;
list-style:none;
}

#plan_du_site li.plan1{
padding:5px 0px 5px 0px;
border-top:solid 1px #dddddd;
}

#plan_du_site li.plan1 a{
text-decoration:none;
font-size:18px;
}

#plan_du_site li.plan2{
padding:5px 0px 5px 20px;
}

#plan_du_site li.plan2 a{
text-decoration:none;
font-size:14px;
}

#plan_du_site li.plan3{
padding:5px 0px 5px 40px;
}

#plan_du_site li.plan3 a{
text-decoration:none;
padding:5px 0px 5px 40px;
font-size:12px;
}

#plan_du_site li.plan4{
padding:5px 0px 5px 60px;
}

#plan_du_site li.plan4 a{
text-decoration:none;
font-size:10px;
}