/*----------------------------------------------------------

	Feuille de style de base, avec initialisation 
	des principaux éléments HTML et quelques 
	classes utiles.

----------------------------------------------------------*/


/* Initialisation de tous les �l�ments

(c) Eric Meyer (notre maitre � tous en mati�re de CSS) : 
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
----------------------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}


/* �l�ments HTML en g�n�ral
----------------------------------------------------------*/

/* Le corps du document */
body {
	font-family: "Trebuchet MS", Verdana, helvetica, "Bitstream Vera Sans", sans-serif;
	font-size: 80%;
	text-align: left;
	color: #333;
	background: #fff;
}

/* Les liens 
a, a:link, a:visited, a:active {
	color: #FCE2C3;
	text-decoration: underline;
}
a:hover, a:focus {
	color: #FFFFFF; 
	text-decoration: underline;
}
*/
a, a:link, a:visited {
	color: #000066;
	text-decoration: none;
}
a:hover {
	color: #0033FF; 
	text-decoration: underline;
}
a:focus, a:active {
	text-decoration: none;
}
/* Les titres */
h1 { font-size: 2em; margin: 0.67em 0; }
h2 { font-size: 1.3em; margin: 0.83em 0; }
h3 { font-size: 1.17em; margin: 1em 0; }
h4 { font-size: 1em; margin: 1.35em 0; }
h5 { font-size: 0.83em; margin: 1.67em 0; }
h6 { font-size: 0.67em; margin: 2.33em 0; }

h1, h2, h3, h4, h5, h6 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	display: block;
}

h1 a, h1 a:link, h1 a:visited, h1 a:active, h1 a:hover, h1 a:focus, 
h2 a, h2 a:link, h2 a:visited, h2 a:active, h2 a:hover, h2 a:focus, 
h3 a, h3 a:link, h3 a:visited, h3 a:active, h3 a:hover, h3 a:focus, 
h4 a, h4 a:link, h4 a:visited, h4 a:active, h4 a:hover, h4 a:focus, 
h5 a, h5 a:link, h5 a:visited, h5 a:active, h5 a:hover, h5 a:focus, 
h6 a, h6 a:link, h6 a:visited, h6 a:active, h6 a:hover, h6 a:focus, 
a img, a:link img, a:visited img, a:active img, a:hover img, a:focus img { 
	text-decoration: none;
	border: none;
}

/* Les paragraphes */
p {
	margin: 1em 0;
	line-height: 1.6;
	display: block;
}

/* Listes */
ul, ol {
	display: block;
	margin: 1em 0 1em 1.5em;
	list-style-position: inside;
}
li {
	display: list-item;
	line-height: 1.4;
}

/* Listes � puce */
ul { list-style-type: disc; }

/* Listes ordonn�es */
ol { list-style-type: decimal; }

/* Listes de d�finitions */
dl {
	display: block;
	margin: 1em 0;
}
dd {
	display: block;
	margin-left: 1.5em;
}
dt { }

/* Les listes imbriqu�es n'ont pas de marge verticales */
ul ul, ul ol, ul dl, ol ul, ol ol, ol dl, dl ul, dl ol{
  margin-top: 0;
  margin-bottom: 0;
}

/* Le 2�me niveau des listes � puce utilisent un carr� */
ol ul, ul ul { list-style-type: square; }

/* Le 3�me niveau (et suivant) des listes � puce utilisent un cercle */
ol ol ul, ol ul ul, ul ol ul, ul ul ul { list-style-type: circle; }

/* Les images en g�n�ral */
img { 
	border: none;
	vertical-align: middle;
}

/* Les barres horizontales */
hr { }

/* Les citations */
blockquote, q {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
}
blockquote em, q em { font-style: normal; }
blockquote {
	display: block;
	margin: 1em 1.5em;
}
cite { }

/* Les textes pr�-format�s */
code, pre {
	font-family: monaco, "Courier New", Courier, monospace;
	font-size: 1.1em;
	color: #666;
}
pre {
	width: 95%;
	overflow: auto;
	background: #333;
	color: #fff;
	border: 1px solid #ccc;
	line-height: normal;
	padding: 8px;
}

/* Tous les bloc formulaires */
form { display: block; }

/* Les jeux de champs de formulaire */
fieldset {
	margin: 1em 0;
	padding: 0.8em;
	border: 1px solid #ccc;
}

/* L�gende des fieldset */
legend { }

/* �tiquette des champs de formulaire */
label {
	cursor: pointer;
}

/* �tiquette des champs de formulaire requis */
label.required {
	font-weight: bold;
}
label.required:before {
	content: '* ';
	color: #c00;
}

/* Champs de formulaire */
input { }
textarea { }

/* Emphases */
em {
	font-style: italic;
}

/* Forte emphase */
strong {
	font-weight: bold;
}

/* Abr�viations et acronymes */
abbr, acronym {
	cursor: help;
	border-bottom: 1px dotted #f1f1f1;
}

/* inlines */
q:before { content: open-quote; }
q:after { content: close-quote; }
b, strong { font-weight: bold; }
i, cite, em, var, dfn { font-style: italic; }
u, ins { text-decoration: underline; }
s, strike, del { text-decoration: line-through; }
blink { text-decoration: blink; }
big { font-size: larger; }
small { font-size: smaller; }

sub {
  vertical-align: sub;
  font-size: smaller;
  line-height: normal;
}

sup {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

nobr {
  white-space: nowrap;
}

/* Tableaux */
table {
	width: 100%;
}
th {
	padding: 0 0.5em;
	border-bottom: 1px solid #333;
	white-space: nowrap;
}
td {
	padding: 0.5em;
	border-bottom: 1px solid #f1f1f1;
}


/* Quelques classes utiles
----------------------------------------------------------*/

/* Des classes d'alignement du texte */
.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
.justify { text-align: justify; }

/* Des classes de formatage du texte en ligne */
.b, .strong, .bold, .gras { font-weight: bold; }
.i, .em, .italic, .italique { font-style: italic; }
.s, .strike, .barre { text-decoration: line-through; }

/* Des classes flotante */
.fleft, .floatleft { 
	float: left;
	padding-right: 1em;
}
.fright, .floatright {
	float: right;
	padding-left: 1em;
}

/* Les "nettoyeurs" */
.clear, .clearb { clear: both; }
.clearer {
	clear: both;
}


/* 	Exemple de colonnes flotantes fa�on journal, 
	� utiliser avec parcimonie, pas pour 
	une mise en page.

	Utilisation :

	<div class="two-cols">
		<p class="col">Premi�re colonne</p>
		<p class="col">Deuxi�me colonne</p>
		<div class="clearer">
	</div>

	<div class="two-cols">
		<p class="col_70">Premi�re colonne � 70%</p>
		<p class="col_30">Deuxi�me colonne � 30%</p>
		<div class="clearer">
	</div>

	<div class="three-cols">
		<p class="col">Premi�re colonne</p>
		<p class="col">Deuxi�me colonne</p>
		<p class="col">Troisi�me colonne</p>
		<div class="clearer">
	</div>

----------------------------------------------------------*/
.col_80 {
	width: 78%;
	float: right;
}
.col_70 {
	width: 68%;
	float: right;
}
.col_60 {
	width: 58%;
	float: right;
}
.col_50 {
	width: 48%;
	float: left;
}
.col_40 {
	width: 38%;
	float: left;
}
.col_30 {
	width: 28%;
	float: left;
}
.col_20 {
	width: 18%;
	float: left;
}