@charset "utf-8";

/* CSS Document */

html,body {
	margin:0; /* on annule les marges pour tout la site */
	padding:0; /* egalement les marge intérieure de sorte a ce que l'on parte
				avec la meme configuration
				quelque soit le navigteur */

}

body { /* ensemble de la page, corps de la page web */
	background-color:#4e437a; /* couleur de fond */
	font-family:Verdana, Arial, Helvetica, sans-serif; /* famille de font par ordre de préférence */
	font-size:0.80em; /* on baisse la taille globale des caractères de 80%*/
	color:#4d427a; /* couleur de texte qui va être transmis à tout les autres éléments */
}

div#surface_utile { /* définition de la surface réellement utiles du site */
	background-color:#FFFFFF; /* avec un fond blanc */
	background-image:url(_templates/filigranne.jpg); /* on place dans ce conteneur l'image de pied de page ...*/
	background-position:bottom left; /* ... alignée donc en bas du site et à gauche ... */
	background-repeat:no-repeat; /* ... et sans que ce motif de fond se répète */
	width:780px; /* la largeur souhaiter du site est forcé à 780 pixels */
}

div#bandeau {
	position:relative; /* positionnement des contenus dans le bandeau relativement à ce bloc */
	height:240px; /* le bandeau à une heuteur fixe de 240px;
					 on ne définit pas sa largeur qui saura automatiquement de 100% de celle
					 de son conteneur à savoir 780px (cf largeur de div#surface_utile */
	background-image:url(_templates/bandeau.jpg); /* on assigne une image de fond au bandeau ...*/
	background-position:right top; /* ... positionner en haut à droite ... */
	background-repeat:no-repeat; /* ... sans que le motif ne se repete. */
}

/** menu principal **/

div#container_menu { /* boite de placement contenant les 4 liens */
	position:absolute; /* cette boite se potionne de manière absolue dans son container (cf position:relative plus haut) */
	top:75px; /* à 75 pixel du bord haut */
	left:228px; /* et 228px du bord gauche */
	width:400px; /* avec comme dimansion ... */
	height:135px;
        overflow:hidden;
}

div#container_menu a.menu { /* liens formant le menu principal */
	display:block; /* chaque liens doit être traiter comme si il d'agissait d'un element de type "boite" et non "inline" */
	float:left; /* on force leur positionnement en partant de gauche */
	height:135px; /* leur hauteur est connus */
	width:25%; /* et il vont occuper 25%  de leur conteneur en largeur... car 4 menus */
	text-align:center; /* le texte de chaque lien sera centré */
	color:#4d427a; /* leur couleur est le meme que les textes classique et pas celle des liens par defaut */
	text-decoration:none; /* on ne souhaite pas de liens qui soit soulignes */
	font-size:0.89em; /* on ajuste au mieux leur taille ...*/
	padding-top:4px; /* ... et la marge interieure du hat pour caller les textes */
	text-transform:uppercase; /* on souhaite mettre ces liens en majuscules */
	overflow:hidden; /* par sécurité on indique que les textes qui depasserait serait invisible */
	background-position: center bottom; /* centre mais caler en bas du lien */
	background-repeat:no-repeat; /* sans repetition */
}



div#container_menu a#menu1:hover { /* :hover   au survol des liens du menu */
	background-image:url(_templates/menu_1.gif); /* lors du survol du lien on fait apparaître une image de font */
}

div#container_menu a#menu2:hover { /* :hover   au survol des liens du menu */
	background-image:url(_templates/menu_2.gif); /* lors du survol du lien on fait apparaître une image de font */
}

div#container_menu a#menu3:hover { /* :hover   au survol des liens du menu */
	background-image:url(_templates/menu_3.gif); /* lors du survol du lien on fait apparaître une image de font */
}

div#container_menu a#menu4:hover { /* :hover   au survol des liens du menu */
	background-image:url(_templates/menu_4.gif); /* lors du survol du lien on fait apparaître une image de font */
}

div#logo { /* boite de placement du logo */
	position:absolute; /* on place la boite contenant le logo ud site de manière absolue */
	top:26px; /* par rapport au bord haut ...*/
	left:41px; /* et au bord gauche du conteneur de se bloc */
	width:146px; /* avec les dimensions ... */
	height:182px;
}



div#status { /* zone du bas */
	clear:left; /* on ignore force l'ajustement vertical par rapport au boite flottante à gauche */
	width:100%; /* nécessaire pour IE */
	height:22px; /* hauteur du pied de page */
	position:relative; /* on indique que les elements contenu dans se bloc vont se positionner relativement à celui-ci */
	margin:0px; /* pas de marge extérieures */
	padding:0px; /* pas de marge intérieure */
}

div#status div#signature {
	float:left;
	margin-right:250px;
}



div#status div#mentions_legales {
	float:right;
	width:200px;
	text-align:right;
	height:22px;
}





/*** layout spécifique d'une page de type contneu ***/

div#colonne2 {
	float:left;
	width:100%;
}
div#contenu_central {
	margin:0;
	margin-left:228px;
	margin-right:220px;
	background-image:url(_templates/petit_carre.gif);
	background-position:left top;
	background-repeat:no-repeat;
	padding-left:16px;
	padding-top:16px;
        padding-right:10px;
}
div#colonne3 {
	float:left;
	width:220px;
	margin-left:-220px;
	position:relative;
}

div#colonne1 {
	float:left;
	width:228px;
	margin-left:-780px;
	text-align:center;
}

div#colonne1 div#contenu_gauche { /* zone de contenu de la colonne de gauche */
	margin-top:20px;
	margin-left:8px;
	margin-right:8px;
	font-size:0.8em;
}

div#colonne1 div#contenu_gauche p {
	margin-top:0px;
	margin-bottom:7px;
}

div#colonne1 div#contenu_gauche a {
	color:#4d427a;
	text-decoration:none;
}


div#colonne3 div#contenu_droit { /* zone de contenu de la colonne de droite (encart en couleur) */
	background:#ddca17;
        width:150px;
        height:150px;
	margin-top:100px;
	margin-left:18px;
	margin-right:28px;
	margin-bottom:28px;
        text-align:center;
        font-size:0.75em;
        padding-top:10px;
        padding-left:10px;
        padding-right:10px;
        padding-bottom:10px;
        overflow:hidden;
}

div#colonne3 div#contenu_droit h1 {
        font-size:1.5em;
        color:#B00377;
}

/*** layout spécifique à la page d'acceuil ***/
div#colonne2_index div#contenu_central {
	margin-right:20px;
        padding-left:50px;
        background-image:none;
        font-size:2em;
}

div#colonne2_index div#contenu_central h1 { /* format des titre de niveau 1 pour l'index*/
font-weight:normal;
}

div#sondage_grand {
	float:right;
	margin:5px;
	width:227px;
	height:227px;
}


/*** layout spécifique pour les pages de type sondage ***/
div#colonne2_large div#contenu_central {
        margin-right:20px;
        padding-left:50px;
        background-image:none;
}

div#colonne2_large {
 
}

div#colonne1_large {
  float:left;
  width:228px;
}

div#colonne1_large colonne1_contenu {
  width:220px;
}
/** ajustage des données textuelles / images de contenue **/
div#sondage_petit { /* bloc de positionnement pour le lien de sondage à droite des menus */
	display:block;
	position:absolute;
	top:70px;
	right:8px;
	width:135px;
	height:135px;
	background-color:#006600;
}

p {
	margin-top:0px;
}