/*
Couleur du site:
Gris foncé fond #898989
Gris moyen ligne fond #9E9D9D
Gris clair fond #C0BFBF
Gris pâle pointillé fond #D0D0D0
Rouge #E12427
Gris fond menu #EFEFEE
Gris moyen pied de page #9C9C9C
*/

@media screen { /*configuration pour affichage à l'écran.*/

* {margin:0; padding:0;}

body {
	font: 0.8em Verdana, Arial, Helvetica, sans-serif;
	background: url(bg.jpg) repeat-x #C0BFBF;
	}
#centre {
	width: 770px;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	}
#ban {
	position:relative;
	height:261px;
	width:770px;
	background: url(ban.jpg) no-repeat;
	}	
#menu {
	position: absolute;
	width: 150px;
	margin-left: 10px;
	z-index:10;
	}
dl, dt {
	list-style-type: none;
	}
#menu dl {
	margin: 5px 0;
	background: url(bt.png) no-repeat;
	}
#menu dt {
	/*cursor: pointer;*/
	}
.on {
	color: #E12427;
	background: url(bt-on.png) no-repeat;
	padding-left: 20px;
	}
#menu dt a {
	color: #000;
	text-decoration: none;
	display: block;
	padding-left: 20px;
	}
#menu dt a:hover {
	color: #E12427;
	background: url(bt-on.png) no-repeat;
	padding-left: 20px;
	} 
#contenu {
	position:relative;
	padding: 5px 30px 20px 170px;
	background: url(bg-centre.jpg) repeat-y;
	height: 250px;/* pour IE qui ne comprend pas min-height */
	}
/* hacks propriété min-height non reconnue IE*/	
/*Il suffit de commencer par donner une hauteur fixe au bloc (#contenu_texte). Cette hauteur sera considée comme un min-height pour IE : elle s'allongera en fonction du contenu.
Par contre, les autres navigateurs vont respecter la hauteur de façon rigoureuse et le contenu dépassera du bloc.
Il suffit alors de rajouter une instruction non comprise par IE (html>body #contenu_texte) et qui rétablira les choses pour ces navigateurs.
http://blog.alsacreations.com/2004/08/17/54-min-height-sur-internet-explorer */
html>body #contenu {
	height: auto;
	min-height: 250px;
	} 
#col {
	width: 100%;
	min-height: 300px;
	}
#cola, #colb {
	width: 50%; float: left;
	}
.float {
	float: left;
	margin-right: 15px;
	}
.form {
	padding: 10px 0;
	text-align: right;
	width: 400px;
	}
#dip {
	margin-left: 50px;
	}
.go {
	text-align: center;
	}
#haut {	
	text-align: right;
	}
#haut a {
	text-decoration: none;
	}
#pied {
	position:relative;
	width:770px;
	height:43px;
	background: url(pied.jpg) no-repeat #C0BFBF;
	color: #fff;
	padding-left: 15px;
	}
#dubuismedia {
	width:740px;
	padding-bottom: 10px;
	text-align: right;
	}
#dubuismedia a, #dubuismedia a:hover {
	text-decoration: none;
	color: #fff;
	}
.liste {	
	margin-left: 20px; 
	}
img {
	border:none;
	}
a {
	text-decoration: underline;
	color: #000;
	}
a:hover {
	text-decoration: none;
	color: #BB4C01;
	}
h1, h2, h3 {
	font: 1.2em Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	}
h1 span, h2 span, h3 span {
	display: none;
 	}
#contenu p {
	text-align: justify;
	padding: 10px 0 ;
 	}
.small, #haut, #pied, #dubuismedia {
	font-size: 0.85em;
	}
	
}

/*configuration pour l'impression*/

@media print {

	* {margin:0; padding:0;}

body {
	font: 0.8em Verdana, Arial, Helvetica, sans-serif;
	}

#col {
	width: 100%;
	min-height: 300px;
	}
#cola, #colb {
	width: 50%; float: left;
	}
.float {
	float: left;
	margin-right: 15px;
	}
.form {
	padding: 10px 0;
	text-align: right;
	width: 400px;
	}
#dip {
	margin-left: 50px;
	}
.go {
	text-align: center;
	}
.liste {	
	margin-left: 20px; 
	}
img {
	border:none;
	}
a {
	text-decoration: underline;
	color: #000;
	}
a:hover {
	text-decoration: none;
	color: #BB4C01;
	}
h1, h2, h3 {
	font: 1.2em Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	}
#contenu p {
	text-align: justify;
	padding: 10px 0 ;
 	}
.small, #haut, #pied, #dubuismedia {
	font-size: 0.85em;
	}
	/*A l'impression on cache certains éléments.*/
	#ban, #haut, #menu, #dubuismedia, h1 span, h2 span, h3 span {
	 display: none;
	}
}