/*Attributs par défaut pour toutes les balises*/
*{
	margin: 0;
	padding: 0;
	border: 0;
}

/*********************************************************/
/******CLASSES COMMUNES DANS L'ORDRE DU CODE HTML*********/
/*********************************************************/

/*On applique le style général à la balise body*/
body{
	text-align: center; /*Correction bug IE pour centrage du site*/
	font-size: 80%;
	font-family: Arial, Myriad, Verdana, Helvetica, sans-serif;
	color: #2C404E;
}

/*Bloc conteneur du site*/
div#main{
	width: 772px;
	text-align: left; /*on rétablit l'alignement normal (correction bug IE)*/
	border: 1px solid #DAE1E7;
	margin-left: auto; /*pour centrer horizontalement le site*/
	margin-right: auto; /*pour centrer horizontalement le site*/
}

/*Cadre intérieur pour avoir une bordure de 2 pixels de couleur différente*/
div#main_internal_frame{
	border: 1px solid #747B81;
}

/*************************/
/******** ENTETE *********/
/*************************/
/*Entête du site (contenu dans main)*/
div#header{
	background: white url(images/header.jpg);
	background-repeat: no-repeat;
	height: 96px;
	width: 100%;
	position: relative; /*positionnement afin que les blocs contenus soient positionnés par rapport à leur conteneur et non par-rapport à la page*/
	padding-bottom: 10px;
}

/**********Bloc du menu dans l'entête**************/
#menu{
	background: url(images/header-menu.jpg);
	list-style-type: none;
	height: 26px; /*hauteur de l'image de fond*/
	width: 434px; /*largeur de l'image de fond*/
	float: right; /*alignement du menu à droite*/
}

#menu li{
	float: left; /*on place les éléments du menu côte à côte*/
	height: 26px;
}

#menu a:hover, #menu a:focus{
	background-image: url(images/header-menu.jpg);
}

#menu a{
	display: block;
	height: 100%;
}

a#menu1{
	width : 74px;
}

a#menu1:hover, a#menu1:focus{
	background-position: 0 -26px;
}

a#menu2{
	width: 70px;
}

a#menu2:hover, a#menu2:focus{
	background-position: -74px -26px;
}

a#menu3{
	width: 105px;
}

a#menu3:hover, a#menu3:focus{
	background-position: -144px -26px;
}

a#menu4{
	width: 93px;
}

a#menu4:hover, a#menu4:focus{
	background-position: -249px -26px;
}

a#menu5{
	width: 92px;
}

a#menu5:hover, a#menu5:focus{
	background-position: -342px -26px;
}

/**************Lien contact**************/
#contact{
	background-image: url(images/header-contact.gif);
	width: 101px;
	height: 25px;
	position: absolute;
	right: 30px;
	left: auto;
	top: 52px;
}

#contact a{
	display: block;
	width: 100%;
	height: 100%;
}

#contact a:hover, #contact a:focus{
	background-image: url(images/header-contact.gif);
	background-position: 0 -25px;
}


/*Bloc du contenu*/
#main_content{
	position: relative; /*positionnement afin que les blocs contenus soient positionnés par rapport à leur conteneur et non par-rapport à la page*/
	border-bottom: 1px solid #DAE1E7;
}

/*Bloc vertical de gauche*/
#vertical_block1{
	text-align: center;
	position: absolute;
	width: 160px;
	height: 100%;
	border-right: 1px solid #DAE1E7;
}

/*Bloc vertical central*/
#vertical_block2{
	position: absolute;
	left: 161px;
	width: 467px; /*largeur totale=largeur du contenu+bordures+marges+padding=469px*/
	height: 100%;
	border-right: 1px solid #747B81;
	border-left: 1px solid #747B81;
	background-image: url(images/background.jpg);
	background-position: center;
	background-repeat: no-repeat;
}

/*Bloc vertical de droite*/
#vertical_block3{
	position: absolute;
	right: 0;
	left: auto;
	width: 139px;
	height: 100%;
	border-left: 1px solid #DAE1E7;
	text-align: center;
}

/*Bloc de présentation*/
#presentation{
	border-bottom: 1px solid #747B81;
}

/*Bloc "intervention"*/
#intervention{
	border-top: 1px solid #DAE1E7;
	color: #FF0000;
}

#intervention h1{
	text-align: center;
	font-weight: bold;
	font-size: 115%;
	margin-bottom: 10px;
}

#intervention p{
	font-size: 115%;	
}

/*Bloc pour les news*/
#news{
	text-align: left;
	height: 180px;
	/*width: 150px;*/ /*Taille fixée à cause d'un bug IE lors de dépassement de texte en largeur*/
	overflow: auto;
}

#news li{
	list-style-type: none;
	margin-bottom: 5px;
}

#news a:link, #news a:visited{
	color: #6C80AA;
}

#news a:hover, #news a:active{
	color: #4C606E;
}

/*Bloc extranet*/
#extranet .simple_input{
	width: 80px;
}


/*****************************************************************/
/******************CLASSES DE BLOCS GENERIQUES********************/
/*****************************************************************/
/*Blocs contenus dans les blocs verticaux gauche et droit*/
.side_block{
	padding: 5px;
}

/*Blocs contenus dans le bloc vertical central*/
.center_block{
	padding: 12px;
	padding-bottom: 0;
}

/*Bloc centré (le bloc doit avoir une taille fixée)*/
.centered{
	margin-left: auto;
	margin-right: auto;
}

/*Barre bleue*/
div.blue_bar{
	background-image: url(images/blue_bar.jpg);
	height: 18px; /*hauteur de l'image de fond*/
	font-size: 1px; /*correction bug IE pour centrage du site*/
}

/******Blocs de texte******/
.section{
	margin-bottom: 25px;
}

.subsection{
	margin-bottom: 18px;
}

.paragraph{
	margin-bottom: 10px;
}


/***************************************************/
/***************CLASSES DE PARAGRAPHE***************/
/***************************************************/
p{
	text-align: justify;
}

p.indent{
	text-indent: 14px;
}


/***************************************************/
/***************CLASSES DE FORMULAIRES**************/
/***************************************************/
input, textarea{
	background: transparent;
}

.simple_input{
	border: 1px solid #000000;
	font-family: monospace;
	height: 19px;
	font-size: 120%;
}

.simple_textarea{
	border: 1px solid #000000;
	font-family: monospace;
	font-size: 120%;
}

/*pour checkbox, radio*/
.simple_box{
	/*height: 17px;*/
	/*vertical-align: middle;*/
}

/*pour button, submit, reset*/
.simple_button{
	border: 1px solid black;
	background-color: #E6E7E8;
	padding: 1px;
}


/*Images*/
img{
	border: 0;
}

/************************************************/
/*************CLASSES DE LISTES******************/
/************************************************/
ul{
	margin-left: 20px;
}

.simple_list{
	list-style-image: none;
	list-style-type: none;
	margin-left: 10px;
}

.blue_list{
	list-style-image: url(images/puce.gif);
}

.under_paragraph{
	margin-top: 3px;
}

.main_list_item{
	margin-bottom: 10px;
}

.sublist{
	margin-top: 2px;
	margin-left: 5px;
}


/************************************************/
/****************CLASSES DE TITRE****************/
/************************************************/
h1, h2, h3, h4, h5, h6{
	line-height: 100%;
}

.page_title{
	font-size: 140%;
	line-height: 125%;
	font-family: Arial, Myriad, Verdana, Helvetica, sans-serif;
	color: #707A9E;
	background-color: #E5E5E6;
	margin-bottom: 25px;
	padding-left: 5px;
}

.title{
	font-size: 125%;
	font-weight: bold;
	font-family: Arial, Myriad, Verdana, Helvetica, sans-serif;
	margin-bottom: 16px;
}

.subtitle{
	font-size: 110%;
	font-weight: bold;
	font-family: Arial, Myriad, Verdana, Helvetica, sans-serif;
	margin-bottom: 7px;
}

/*Titres des blocs contenus dans les blocs verticaux gauche et droit*/
.block_title{
	font-size: 125%;
	font-weight: bold;
	font-family: Arial, Myriad, Verdana, Helvetica, sans-serif;
	margin-bottom: 5px;
	text-align: center;
	text-transform: uppercase;
}

/*Titre des images*/
.img_title{
	font-family: Arial, Myriad, Verdana, Helvetica, sans-serif;
	font-size: 110%;
	color: #000000;
	font-weight: bold;
	text-align: center;
	letter-spacing: 1px;
	margin-bottom: 5px;
}

/*Légende ou commentaire d'image*/
.img_comment{
	font-family: Arial, Myriad, Verdana, Helvetica, sans-serif;
	font-size: 70%;
	color: #000000;
	text-align: center;
	margin-top: 3px;
}


/****************************************************************/
/*********************CLASSES DE POLICE**************************/
/****************************************************************/
.blue{
	color: #2D4199;
}

.warning{
	color: #FF0000;
}

/*Champ obligatoire*/
.needed{
	color: #FF0000;	
}

/*Texte centré*/
.center{
	text-align: center;
}

p.first_letter:first-letter{
	font-weight: bold;
}

span.first_letter{
	font-weight: bold;
}

/*Classe pour redéfinir le style général (police + couleur)*/
.normal_style{
	font-family: Arial, Myriad, Verdana, Helvetica, sans-serif;
	color: #2C404E;
}

em{
	font-weight: bold;
	font-style: normal;
}

strong{
	font-weight: bold;
	color: #000000;
}


/****************************************************************/
/*********************CLASSES DE LIENS***************************/
/****************************************************************/
a:link, a:visited{
	text-decoration: none;
}

a:hover{
	text-decoration: underline;
}

.link:link, .link:visited{
	color: #6C80AA;
}

.link:hover, .link:active, .link:focus{
	color: #4C606E;
}


/*******************************************************/
/*******************AUTRES CLASSES**********************/
/*******************************************************/
/*Balise de bas de page*/
address{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	border-top: 1px solid #747B81;
}


/*******************************************************/
/***************CLASSES PARTICULIERES*******************/
/*******************************************************/


/**********conseil.php***********/
/*Liens vers différentes pages conseils dans l'image conseil01.gif*/
#conseils{
	background: url(images/conseil01.gif);
	height: 104px; /*hauteur de l'image de fond*/
	width: 440px; /*largeur de l'image de fond*/
}

#conseils a:hover{
	background-image: url(images/conseil01.gif);
}

#conseils a{
	float: left; /*pour aligner côte à côte les liens qui sont ainsi considérés comme des blocs*/
	height: 100%;
}

a#conseil1{
	margin-left: 12px;
	width : 123px;
}

a#conseil1:hover{
	background-position: -12px -103px;
}

a#conseil2{
	margin-left: 24px;
	width: 123px;
}

a#conseil2:hover{
	background-position: -159px -103px;
}

a#conseil3{
	width: 123px;
	margin-left: 23px
}

a#conseil3:hover{
	background-position: -305px -103px;
}


/************contact.php**************/
#bloc_adresse{
	width: 274px;
	height: 112px; /*hauteur totale: 132px*/
	padding-top: 20px;
	background-image: url(images/contact01.gif);
	background-repeat: no-repeat;
}


/********index.php********/

/*Bloc central*/
#accueil h1{
	text-align: center;
	font-size: 135%;
	margin-bottom: 20px;
}

#accueil p{
	font-size: 120%;	
}

/*Liens vers pages principales du site*/
#services{
	background: url(images/accueil01.gif);
	height: 204px; /*hauteur de l'image de fond*/
	width: 298px; /*largeur de l'image de fond*/
	position: relative; /*pour placer les blocs liens contenus par-rapport au conteneur et non par-rapport à la page*/
	background-repeat: no-repeat;
}

#services a{
	position: absolute; /*pour placer les blocs liens*/
	display: block;
	height: 24px;
}

a#service1{
	left: 15px;
	top: 22px;
	width : 70px;
}

a#service2{
	left: 190px;
	top: 2px;
	width : 90px;
}

a#service3{
	left: 5px;
	top: 150px;
	width : 114px;
}

a#service4{
	left: 170px;
	top: 175px;
	width : 103px;
}


/***********profil.php*******************/
#test_profil ul{
	list-style-type: decimal;	
}

#test_profil ul li ul{
	list-style-type: lower-alpha;	
}


/*************webdesign.php*************/

/*Diaporama*/
img#slider{
	border: 1px solid #747B81;
}

#web_competences{
	width: 100%;
	height: 120px;
}

#web_competences ul{
	float: left;	
}