/* une texture grisée pour l'arrière plan de la page */

html {
	background: #ddd url(../images/html.png);
	}

body {
	font: 62.5%/1.6em "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
	color:#888;
	margin:0;
	background-attachment:fixed;
}


/* Les éléments communs à l'ensemble */

a {
	color:#0099FF;
	text-decoration:none
	
}

ul {	
	margin:10px 10px 10px 0;
	padding:0 0 0 15px;
}

ol {	
	margin:10px 10px 10px 0;
	padding:0 0 0 15px;
}

li {
	margin:0 0 0 10px;
	padding:5px;
}


/* on réduit l'air dans le header */
* {
	margin:0;
	padding:0;
}

/* on met en place le contenu général du site, dimensions et marges */
#global {
	width:760px;
	margin:auto;
}
/* on ajoute un second div pour pouvoir soumettre le contenu général aux bordures et appliquer en arrière plan l'effet d'ombre de la page */
#global2 {
	background: url(../images/global.png) center repeat-y;
	padding:0 10px 10px 10px;

}

/* on formate le premier div destiné à l'accessibilité, on le sépare du header */

#accessibility {
	border-bottom:2px solid #eee;
}

#accessibility img {
	border:0px
}


/* le header (tête de page) contient le titre h1 du site et le menu, on place le titre à gauche (float, padding) et on s'occupe du lien sur ce titre, du survol etc. */

#header h1 {
	font:2.7em Arial;
	letter-spacing:-1px;
	color:#222;
	float:left;
	padding:30px 20px 14px 5px;
}
#header h1 a {
	color:#222;
	text-decoration:none;
	border:none;
}
#header h1 a:hover {
	color:#000;
	border-bottom:1px solid #ccc;
}



/* on formate ensuite le menu, qu'on intégre dans une balise disposée à droite, on enlève les puces, on met une image de fond pour le survol des liens, répété sur la longueur de chaque block */
.hide {
	display:none;
}

#menu {
	float:right;
	border:none;
	padding:0;
	margin:0;
}

#menu li {
	float:left;
	list-style:none;
	margin:0 4px 0 0;
	padding:0;
}

#menu li a {
	display:block;
	padding:40px 10px 21px 10px;
	background:#fff;
	color:#444;
	
}

#menu li a:hover {
	background:url(../images/fade.gif) bottom center repeat-x #fff;
	color:#000;
}

#menu li a:active {
	background:url(../images/fade.gif) bottom center repeat-x #fff;
}

/* on met un attribut spécial pour souligner les lettres ciblées accesskey, puisque l'attribut "u" n'est pas valide en xhtml 1.0 strict  */

#menu li a em {
	font-style:normal;
	text-decoration:underline;
}

/* on créé un cadre global pour l'ensemble du contenu (edito, contenu à proprement parler et sidebar), on ajoute une ligne de fin pour le distinguer du footer */
#centre {
	clear:both;
	padding:20px 0 0 0;
	border-bottom:2px solid #eee;
}

/* on met en place un paragraphe spécial pour l'édito, une couleur différente, une image en fond et un */

p.edito {
	background:url(../images/header.jpg) right no-repeat;
	padding:10px 10px 40px 10px;
	color:#fff;
	font-size:1.5em;
	line-height:25px;
	text-align:right
}

/* on s'occupe de la sidebar , titres, listes, formatage des liens */

#sidebar {	
	width:230px;
	float:right;
	background:#fff;
	padding:10px 10px 10px 10px;
}

#sidebar h2 {
	color:#FF0083;
	margin:10px 0;
	font-size:1.3em;
	clear:left;
}

#sidebar ul {
	list-style:none;
	border:none;
	padding:0;
	margin:0;
}
#sidebar ul li {
	padding:5px;
	margin:0;
}
#sidebar ul li a {
	color:#0099FF;
	text-decoration:none;
}
#sidebar ul li a:hover {
	color:#0099FF;
	border-bottom:1px solid #ccc;
}

/* une class spéciale pour la sidebar qui différencie le paragraphe du reste de la colonne */
p.news {
	background:#f4f4f4;
	padding:10px;
	margin:0 0 10px 0;
}

/* on formate ensuite le contenu à proprement parlé, marges, espacements, titres, paragraphes, liens, listes */

#contenu {
	margin:0 260px 0 5px;
	padding:10px 20px 0 0;
}

#contenu h2 {
	font:2.1em Arial;
	color:#000000;
	margin:10px 0;
	border-bottom:2px solid #eee;
	clear:left;
}

#contenu p {
	margin:15px 0;
	font-size:110%;
	line-height:21px;
}
#contenu a:hover {
	border-bottom:1px solid #ccc;
}


#contenu h3 {
	font:1.8em "Trebuchet MS";
	color:#555;
	margin:10px 0;
}


/* on s'occupe des images , celles de la sidebar, en enlève les bordures au cas ou on ferait des liens */

#contenu img {
	padding-right:10px;
	border:0px
	
}
#sidebar img {
	border:0px
}

/* le pied de page */


#footer {
	text-align:center;
	padding:10px;
	margin:30px 0 0 0;
	color:#888;
	width:760px;
	margin:0 auto;
	background: url(../images/global.png) center repeat-y;
}
#footer p {
	margin:0 15px;
}

#footer a {
	color:#0099FF;
}


/* pour finir on s'occuppe du formulaire de contact */

input {
	padding:5px;
	border:1px solid #eee;
	color:#555;
	width:220px;
}
textarea {
	padding:5px;
	border:1px solid #eee;
	color:#555;
	width:300px;
	background:url(../images/fade.gif) bottom center repeat-x #fff;
}
input.bouton {
	padding:5px;
	border:1px solid #888;
	background: #eee;
	color:#555;
}

/* et du petit tableau de données */

table {
border-collapse:collapse;
width:95%;
margin:auto;
}

thead {

background:url(../images/main-bg.gif) bottom center repeat-x #fff;

}

tbody {
background-color:#FFFFFF;

}

th {
padding:5px;
color:#666666;
text-align:left;
}

td {
padding:5px;
text-align:left;

}

/* pour finir une dernière trouvaille qui permet de donner un petit effet à la balise kbd, balise qui marque les touches du claviers pour les accesskeys */

kbd {
font-size:1.4em;
padding:0px 2px 0px 2px;
border-width:1px 2px 2px 1px;
border-style:solid;
border-color:#edd #baa #baa #eed;
background:#faf6f6;
color: #000;
}