@charset "utf-8";
/* CSS Document */



/*Ce site s'adresse aux employés d'entreprises de chantier. Ce site répond donc aux impératifs suivants :
	- des personnes peu à l'aise avec l'informatique, internet et le maniement de la sourris (pas d'animation ni de mouvement) : il faut que le site ressemble aux plaquettes papier (couleurs, typos, formes, etc...) et respecte ainsi au maximum la charte graphique qui renforce l'identité visuelle de COSEMA
	- un affichage rapide même avec une connexion bas débit
	- un affichage stable que l'on soit sur Internet Explorer 6 (IE6), IE7, IE8, Firefox, Opera, Chrome ou Safari
*/



/*Pour commencer, voici les règles générales d'affichage du site :*/
body {
/*Le padding et le margin à 0 pixels permettent d'avoir un affichage qui commence bien en haut de la page, car par défaut l'affichage est décallé vers le bas.
Ces lignes sont d'autant plus importantes, que dans ce dessin de page, le fond et la page sont confondus : on ne voit pas la différence entre le bandeau orange du fond et le bandeau orange de la page parce qu'ils sont exactement sur la même ligne.
Cela donne l'illusion à l'écran d'un grand bandeau qui traverse tout l'écran.*/
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	background-color: #5b9de8;
/*L'image de 1 pixel de large se répétant sur tout l'axe des X permet d'afficher un fond occupant tout l'écran et étant ultra-léger en même temps (très util pour les connexions bas débits !).*/
	background-repeat: repeat-x;
	background-image: url(../img/page/fond.jpg);
}
h1,h2,h3,h4,h5,h6 {
	font-family: Arial, Helvetica, sans-serif;
}
/*h1 est utilisé pour les menus principaux (cadre de gauche).*/
h1 {
	font-size: 16px;
	color: #333333;
}
h2 {
	font-size: 20px;
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: italic;
	font-weight: bold;
}
h4 {
	font-size: 24px;
	text-align: center;
}
h5 {
	font-size: 18px;
	text-decoration: underline;
}
/*Remarque : les titres images sont les mêmes que ceux de la plaquette papier.
La typographie utilisée est Alba Super.
Le système de palettes à onglets permet aux utilisateurs de rappeler le papier.*/
a {
/*Cette couleur est aussi le bleu des titres et des cadres d'images du site.*/
	color: #0c3183;
}
.page .droite .contenu .corps .paragraphe h4 {
	text-decoration: underline;
}

a:link {
	text-decoration: none;
	color: #0c3183;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
/*Cet couleur est le orange de tout le site.*/
	color: #FF6600;
}
a:active {
	text-decoration: none;
}
/*-------------------------------------------------------------
-------------------------------------------------------------*/
/*Le Div page représente le contenu central de la page ; en clair, page = tout ce qui n'est pas le fond du site.*/
.page {
	/*La balise test-align ayant la valeur left permet à IE6, IE7 et IE8, de bien afficher le contenu en commençant par la gauche (encore une particularité de Internet Explorer !!!!).
En fait IE semble considérer quautrement le div page et tous les div qu'il contient devront hériter de la balise html <center></center>. Ainsi, tous les contenus commenceraient au milieu du div !*/
	text-align: left;
	width: 1000px;
	/*La position relative à pour effet de centrer hrizontalement le contenu au centre de l'écran*/
	position: relative;
	margin-right: auto;
	margin-left: auto;
}
/*-------------------------------------------------------------
-------------------------------------------------------------*/
.entete {
	position: absolute;
	height: 192px;
	width: 1000px;
}
.cosema {
	background-image: url(../img/page/cosema.jpg);
	position: absolute;
	height: 133px;
	width: 476px;
	left: 45px;
	top: 0px;
}
/*Du fait qu'IE6 ne gère pas la transparence (format Gif ou Png), j'ai donc découpé le losange du logo en petits rectangles que j'ai repositionnés les uns sur les autres.
Le logo se trouve donc réparti dans les div "logo haut", "bandeau" et logo bas".*/
.logo_haut {
	background-image: url(../img/page/logo_haut.jpg);
	position: absolute;
	height: 64px;
	width: 139px;
	left: 566px;
	top: 69px;
}

.bandeau {
	background-image: url(../img/page/bandeau.jpg);
	position: absolute;
	height: 59px;
	width: 1000px;
	top: 133px;
}
/*-------------------------------------------------------------
-------------------------------------------------------------*/
.gauche {
	position: absolute;
	width: 274px;
	top: 192px;
}
/*Le menu présente l'avantage de s'étirer ou de rapetissir en fonction des besoins ; ainsi les menus ne peuvent pas se retrouver hors du dessin arrondi.*/
.menu {
	background-image: url(../img/page/menu_fond.jpg);
	background-repeat: repeat-y;
/*Le menu est positionné avec une propriété position de valeur absolu.
Par contre, il est capital que les 3 div qui le constituent (menu_haut, menu_milieu et milieu_bas) n'est pas de propriété position. C'est très important !*/
	position: absolute;
	width: 274px;
	top: 50px;
}
.menu_haut {
	background-image: url(../img/page/menu_haut.jpg);
	height: 63px;
	width: 274px;
}
.menu_milieu {
	width: 274px;
	top: 63px;
}
.menu_milieu li {
	list-style-type: none;
}

.menu_bas {
	background-image: url(../img/page/menu_bas.jpg);
	height: 55px;
	width: 274px;
}
/*-------------------------------------------------------------
-------------------------------------------------------------*/
.droite {
	position: absolute;
	width: 726px;
	top: 192px;
	left: 274px;
}
.logo_bas {
	background-image: url(../img/page/logo_bas.jpg);
	position: absolute;
	height: 60px;
	width: 139px;
	left: 292px;
	top: 0px;
}
.repere {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
}
.contenu {
	position: absolute;
	width: 700px;
	left: 13px;
	top: 60px;
	background-color: #FFFFFF;
}
.sous-menu {
	font-size: 14px;
	height: 16px;
}
.sous-menu ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
.sous-menu li {
	margin-right: 30px;
	padding: 0px;
	float: left;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	position: relative;
}
/*Cette petite balise représente le surlignage orange du sous-menus (situé sous les onglets) sur lequel on est.*/
.orange {
	background-color: #FFC59D;
}
.paragraphe {
	margin-bottom: 50px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FF9900;
	left: 10px;
	right: 10px;
}
.corps {
	padding-right: 20px;
	padding-left: 20px;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #FF6600;
	border-right-width: 3px;
	border-left-width: 3px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #FF6600;
	border-left-color: #FF6600;
}
.illustration {
	float: left;
	padding: 0px;
	margin-top: 0px;
	margin-right: 50px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.webmaster {
	text-align:center;
	font-size:12px;
}