/* Copyright © 2014 - PCAID */

/******************/
/* Styles Globaux */
/******************/
html, body, div, h1, h2, p, span, img, header, footer, nav
{
	padding: 0;		/* Marges intérieures nulles */
	margin: 0; 		/* Margse extérieures nulles */
}

html
{
	/*height: 100%; /* Nécessaire pour les dimensions height en % */	
	font-size: 100%; /* Pour IE 5-7 évite réduction, augmentation exponentielle avec les em */
}

header, footer, nav
{
	display: block; /* Pour navigateurs ne comprennant pas html 5 */
}

/* Couleurs liens, liens visités */
a:link, a:visited
{
	color: #444444;
}
/* Couleurs liens cliqués, liens souris dessus */
a:hover, a:focus, a:active
{
	color: #ffffff;
}

a img
{
	border: none; /* pas de cadre pour images dans lien */
}
dt
{
	font-style:italic;
	font-weight: bold;
	color:#5e72d5;
}
dd
{
	margin-top:0.5em;
	margin-bottom:0.5em;
}

dd img{vertical-align:middle;margin-right:1em;}

table
{
	margin:0.5em auto;
	border-spacing:0px;
	border:4px solid #5e72d5;

	-moz-border-radius: 14px;
	-webkit-border-radius: 14px;
	border-radius: 14px;	
}
td
{
	font-size:0.9em;
	border:1px solid #5e72d5;
}
h2{font-size:1.5em;	color:#5e72d5; font-weight:bold;}
h3{margin:0;padding:0;font-size:1.1em;font-weight:bold;color:#ff5c56;}
strong{font-weight:bold;}
.center{text-align:center;} /* centrage horizontal */

.left{float:left;margin-right:1em;}
.inlineBlock{display:inline-block;vertical-align:middle;text-align:left;}
#error
{
font-size:3em;
color:#5e72d5;
font-weight:bold;
}

/********/
/* Body */
/********/
body
{
	/*font-family:Verdana, Arial, Helvetica, sans-serif ;*/
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif ;	
	font-size-adjust: 0.58;
	color: #000000;
	background-color:#aeeaec;
	background-image:url(../images/fond.png);
}

/*********************************************************/
/* Balise div contenant l'ensemble du template           */
/* Permet de positionner et de définir une taille        */
/* pour le template                                      */
/* Contient : header, Menu + Page, footer                */
/* Hauteurs header + Menu (Page) + footer                */
/* = Hauteur Conteneur Global                            */
/* largeur ConteneurGlobal = Largeur menu + Largeur Page */
/* 50em                    = 10em         + 40em         */
/* Menu dans le fichier menu.css						 */
/* Attention à l'utilisation de bordure                  */
/*********************************************************/
#wrapper
{
	margin-top: 1%;				     	/* Position % haut de l'écran à l'aide de la marge extérieure */
	margin-left: auto;                  /* Pour le centrage horizontal de la div */
	margin-right: auto;
	width: 60em;          				/* Largeur du contenu */
	height: 52em;						/* Hauteur du contenu */

	border: 1px solid #000000;
	background-image:url(../images/backhead.gif);
	background-repeat:repeat-x;
	background-color:#ffffff;
	
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	
	-moz-box-shadow: 1px 1px 12px #555;
	-webkit-shadow: 1px 1px 12px #555;
	box-shadow: 1px 1px 12px #555;
 }
/**********/
/* Header */
/**********/
header
{
	height: 14%;    /* Hauteur de l'entête */
	
	font-family: Verdana, Arial, Helvetica, sans-serif ;
	font-weight: bold;
}

header img /* Logo PCAID */
{
	height:5em;   /* Width*0.78 */
	width:6.4em; /* Height*1.282 */
	margin-top:0.4em;
	padding-left:1.5%;
	padding-right:0.2em;
	float:left;
}

header h1 /* Titre PCAID */
{
	text-align:center; 	
	font-size:1.5em;
	color:#ff5c56; /* Rouge */
}
header h1 span{font-size:0.5em;} /* Lieux interventions */
#tele{font-size:0.8em;} /* Span n° telephone */

/********/
/* Menu */
/********/
nav
{
	clear:left;
	float: left;    /* Sort la boîte du flux et la place à gauche */
	width: 12.5em;	/* Largeur du menu - width * font-size = 10em*/
	height: 75%;
	
	font-size: 0.8em;	/* Taille du texte - définie échelle boîte */
	font-family: Verdana, Arial, Helvetica, sans-serif ;
	font-weight: bold;
}
nav img /* centrage images */
{
	display:block;
	margin:auto;
}
nav ul /* Menu */
{
	padding: 0; /* Marges intérieures nulles */
	margin-top: 1em;
	margin-bottom: 0.5em;
	margin-left:0.5em;
	margin-right:auto;
	/*margin: 1em 0 0 0.5em;  /* Marges extérieures */

	background-color:#5ed5c1;    /* Cyan */
	border:0.2em outset #5e72d5; /* Bleu fonce */

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	
	-moz-box-shadow: 1px 1px 12px #555;
	-webkit-shadow: 1px 1px 12px #555;
	box-shadow: 1px 1px 12px #555;
}
/* Entrées du menu */
nav li
{
	padding: 0.4em;        	/* Marges intérieures */
	margin: 0 0 0.5em 0;	/* Marges extérieures */
	list-style-type:none;  	/* Pas de puces */
}
nav li a /* Lien associé à chaque entrée, sous forme de bouton */
{
	display:block;
	padding-left: 0.3em;        	/* Marges intérieures */
	background-color:#aeeaec;
	border:solid 1px #5e72d5; /* Bleu fonce */
	text-decoration: none; /* Liens non soulignés */
	
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	
	-moz-box-shadow: 1px 1px 12px #555;
	-webkit-shadow: 1px 1px 12px #555;
	box-shadow: 1px 1px 12px #555;
}
nav li a:first-letter
{
   font-size: 1.5em;	/* Taille de la lettre */
   color:#ba001d; 		/* Rouge */
}

/* Couleurs liens, liens visités */
nav li a:link, a:visited
{
	color: #5e72d5;
}
/* Couleurs liens cliqués, liens souris dessus */
nav li a:hover, a:focus, a:active
{
	color: #ba001d;
}
nav li a:active
{
	background:RGB(0,51,102);
	border: solid 1px RGB(186,0,29);
}

/**********/
/* Cadres */
/**********/

.cadre
{
	margin:1em;
	padding:0.5em;
	border:solid 1px #5e72d5; /* Bleu fonce */
	
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	
	-moz-box-shadow: 1px 1px 12px #555;
	-webkit-shadow: 1px 1px 12px #555;
	box-shadow: 1px 1px 12px #555;
}

/**********/
/* Tarifs */
/**********/

#tarifs
{
	float:left;
	margin-top:2em;
	margin-left:2em;
	line-height:2em;
	color:#5e72d5;
}

#serv-pers
{
	margin-left:2em;
}

/*****************/
/* Contenu pages */
/*****************/
#main
{
	margin: 0 0 0 10em;     /* Marge extérieure gauche = largeur menu */
	/* Marges intérieures */
	padding: 7% 2em 0em 2em;
	/* padding: 4em 0.5em 0.5em 2em; */         
	height: 68%;   /* padding-top + height = 75% */
	overflow:auto;
}

.services /* Liste des prestations */
{
	margin-left:10%;
	font-size:1.2em;
	font-weight:bold;
	color:#5e72d5;
	list-style-image:url(../images/souris.png);
}

.services li /* Prestation */
{
	padding:0 0.5em;  /* haut-bas et droite-gauche */
	margin:1.1em 0em; /* haut-bas et droite-gauche */
}
#s-inst{margin-left:1em;} /* Pour indenter les prestations */
#s-depa{margin-left:4em;}
#s-form{margin-left:7em;}
#s-cons{margin-left:10em;}
#s-main{margin-left:13em;}

.cadreServices /* Prestations */
{
	font-size:0.9em;
	font-weight:bold;
	color:#5e72d5;
	list-style-image:url(../images/souris.png);
}
.cadreServices li  {font-size:1em;}
.cadreServices figure
{
	display:inline-block; /* Pour centrage horizontal blocs figures */
	vertical-align:middle;
	margin: 0em 0.5em;
}
.cadreServices figcaption
{
	font-size:1.2em;
	text-align:center;
}
/* Couleurs liens, liens visités */
.cadreServices a, a:link, a:visited
{
	color: #5e72d5;
}
/* Couleurs liens cliqués, liens souris dessus */
.cadreServices a:hover, a:focus, a:active
{
	color: #ba001d;
}
.commentaire 
{
	clear:both; 
	margin-left:1%;
	font-size:0.7em;
	font-style:italic;
}

/****************************************************/
/* Pied de page - validation et date de mise à jour */
/****************************************************/

footer 
{
	clear:left;
	height: 11%;	/* Hauteur du pied de page */
	font-weight: bold;
	font-size:0.6em;
}

.validation /* Liens de validation (html, css) */
{
	float: left;    /* Sort la boîte du flux et la place à gauche */
}