/* TODO List
 *
 * Mettre des class de couleur .red, .blue ...
 * Commenter le code
 * Mettre une classe generique sur .page : .nocolor qui supprime toutes les couleurs
 * Faire un joli bouton submit pour les formulaires
 * faire la version print avec les noprint
 *
 * Faire une feuille de style pour modifier les couleurs uniquement (pour personaliser le site) qui reprend toutes les balises par groupe
 *
 * ---------- BUG ----------
 * - IE7 sur le fluid (pas de limite)
 * - IE7 Footer n'est plus dans la page (fonts.html)
 * - IE7 coloration des lignes de tableau
 * - IE7 legende des images (fonts.html)
 * - IE7 coloration des champs de formulaire sur le onfocus
 * - IE7 type de champ input [type=text]
 * - IE7 alignement bouton radio
 */

body { margin: 0; }

/* ------------------------------------------------------------------------------------------------------ */
/*						Position						  */
/* ------------------------------------------------------------------------------------------------------ */

#header, #nav, #main, #footer { clear:both; }

/* ---------- Page ---------- */
.page {
	background: #fff;
	padding: 1em;
	width: 1000px;
	text-align: left;
}

.page_margin { padding: 10px; }
.icy { text-align: left; }
.icy .page { margin: 0px; }
.liquid { text-align: center; }
.liquid .page { margin: 0 auto; }
.fluid .page { width: 80%; min-width: 750px; max-width: 1200px; }

/* ---------- Header ---------- */
#header {
	position: relative;
}

/* ---------- Nav ---------- */
#nav ul { margin: 0; }
#nav li { display: inline; padding: 6px 20px 6px 20px; }

/* ---------- Main ---------- */

/* ---------- Footer ---------- */

/* ---------- Colonne ---------- */

.c25l, .c33l, .c50l, .c66l, .c75l, .c38l, .c62l { float: left; }

.c25r, .c33r, .c50r, .c66r, .c75r, .c38r, .c62r { float: right; }

.c25l, .c25r { width: 24.99%; }
.c33l, .c33r { width: 33.299%; }
.c50l, .c50r { width: 49.999%; }
.c66l, .c66r { width: 66.599%; }
.c75l, .c75r { width: 74.99%; }
.c38l, .c38r { width: 38.2%; }
.c62l, .c62r { width: 61.8%; }

/* methode old framework
.clearfix:after {
	content: ".";
	display: block;
	font-size: 0.1px;
	height: 0pt;
	line-height: 0pt;
	width: 0pt;
	clear: both;
	visibility: hidden;
} */
.clearfix {clear:both;font-size:0.1px;height:0pt;line-height:0pt;width:0pt;}

.subc { width: 100%; overflow: hidden; }

/* ---------- Special ---------- */

/* ------------------------------------------------------------------------------------------------------ */
/*						Style							  */
/* ------------------------------------------------------------------------------------------------------ */

/* ---------- General ---------- */
body {
	font-family: Arial, Helvetica, sans-serif;
}

textarea, pre, code, kbd, samp, var, tt {
	font-family: Consolas, "Lucida Console", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier;
}

blockquote, cite,q {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style:italic;
}
blockquote { margin: 0 0 1em 1.6em; color: #666; }
pre, code { color: #800; }
pre { line-height: 1.5em; margin: 0 0 1em 0; }
kbd, samp, var { color: #666; }
var { font-style: italic; }
ins { text-decoration: underline; }

acronym, abbr {
	border-bottom: 1px #aaa dotted;
	font-variant: small-caps;
	letter-spacing: .07em;
	cursor: help;
}


hr {
	color: #fff;
	background:transparent;
	margin: 0 0 0.5em 0;
	padding: 0.5em 0 0.5em 0;
	border:0;
	border-bottom: 1px #eee solid;
	overflow: hidden;
	display: block;
	width: 100%;
}

h1,h2,h3,h4,h5,h6 { color: #000; }

ul li { list-style-type: disc; }
ul ul li { list-style-type: circle; }
ol li { list-style-type: decimal; }
ol ol li { list-style-type: lower-latin; }

a { color: #1b1bc0; background:transparent; text-decoration:none; }
a:focus, a:hover, a:active { color:#0909a0; text-decoration:underline; }
a.dotted { border-bottom: 1px #1b1bc0 dotted; text-decoration: none; }
a.both { text-decoration: underline overline;}
a.dotted:hover, a.both:hover { color: #0909a0; }


/* ---------- Special ---------- */
.highlight, .hl { color: #e80; }
.dimmed { color: #888; }
.info, .infos, .information { background: #f8f8f8; color: #666; border: 1px solid #eee; padding: 10px; margin-bottom: 0.5em; font-size: 91.7%; }
.note, .valid { background: #efe; color: #040; border: 2px #484 solid; padding: 10px; margin-bottom: 1em; }
.important { background: #ffd; color: #442; border: 2px #aa4 solid; padding: 10px; margin-bottom: 1em;	}
.error, .errors, .warning { background: #fee; color: #500; border: 2px #944 solid; padding: 10px; margin-bottom: 1em; }
.content { padding: 10px; }
.left { float: left; margin-right: 1em; margin-bottom: 0.15em; display: inline; }
.right { float: right; margin-left: 1em; margin-bottom: 0.15em; display: inline; }
.center { text-align: center; /*display: block; margin: 0.5em auto;*/ }
.caption strong { display: block; overflow: hidden; margin-top: 2px; padding: 0.3em 0.5em; background: #eee; font-weight: normal; font-size: 88%;}
.info strong, .infos strong, .information strong, .note strong, .valid strong, .important strong, .error strong, .errors strong, .warning strong { display: block; }
.none { float: none; }

table { width: auto; border-collapse:collapse; margin-bottom: 0.5em; border-top: 2px #888 solid; border-bottom: 2px #888 solid; }
table caption { font-variant:small-caps; }
table.full { width: 100%; } 
table.fixed { table-layout:fixed; } 

th,td { padding: 0.5em; border: 0px;}
table.border td, table.border th { border: 1px #777 solid; }
thead th { color: #000; border-bottom: 2px #444 solid; }
tbody th { background: #e0e0e0; color: #333; }
tbody th[scope="row"], tbody th.sub { background: #f0f0f0; } 

tbody th { border-bottom: 1px solid #fff; text-align: left; }
tbody td { border-bottom: 1px solid #eee; }

tbody tr:hover th[scope="row"],
tbody tr:hover tbody th.sub { background: #f0e8e8; }
tbody tr:hover td { background: #fff4f4; }

table.nocolor th, table.nocolor td, table.nocolor tr:hover td, table.nocolor tr:hover th.sub, table.nocolor tr:hover th[scope="row"] { background: transparent; }
table.noborder, table.noborder td, table.noborder th { border: 0px; }
table.none th, table.none td, table.none tr:hover td, table.none tr:hover th.sub, table.none tr:hover th[scope="row"], table.none { border: 0px; background: transparent; }
table.slim { border-top-width: 1px; border-bottom-width: 1px; }
table.slim thead th { border-bottom-width: 1px; }

/* ------------------------------------------------------------------------------------------------------ */
/*						Style							  */
/* ------------------------------------------------------------------------------------------------------ */

/* ---------- General ---------- */
form, fieldset {
	overflow: hidden;
}
fieldset {
	border: 1px #ddd solid;
	background: #fafafa;
	margin: 0 0 1em 0;
	padding: 0.5em 1em;
}
legend {
	font-size: 110%;
}
label { cursor: pointer; }
label, .label {
	line-height: 18px;
}

.type-text, .type-select, .type-checkbox, .type-radio, .type-button {
	width: 100%;
	overflow: hidden;
}



textarea, select, input[type=text], input.text, input[type=password], .type-text input {
	font-family:  Arial, Helvetica, sans-serif;
	border: 1px solid #ccc;
	width: 61.9%;
	padding: 0.3em;
	display: block;
	position: relative;
	margin-bottom: 0.5em;
}
input { margin-bottom: 0.5em; }
select { width: 62%; cursor: pointer; }
.full textarea, .full select, .full input[type=text], .full input[type=password], .full input.text, .full .type-text input { width: 99.9%; }
.full .type-value { width: 99.9%; }
textarea {
	height: 120px;
	overflow: auto;
}

textarea:hover, select:hover, input[type=text]:hover, input.text:hover, input[type=password]:hover, .type-text input:hover {
	border-color: #daa;
}
textarea:focus, select:focus, input[type=text]:focus, input.text:focus, input[type=password]:focus, .type-text input:focus,
textarea:active, select:active, input[type=text]:active, input.text:active, input[type=password]:active, .type-text input:active {
	background: #fffdef;
	border-color: #aaa;
}

input[type=submit], input.submit, .type-button input {
	border-top: 1px solid #999;
	border-left: 1px solid #999;
	border-bottom: 1px solid #555;
	border-right: 1px solid #555;
	background: #888;
	color: #fff;
	padding: 0.4em 1em;
}
.type-button { text-align: right; }

form sup { color: #900; font-weight: bold }
input[type=hidden] { display: none !important; } /* Firefox hack */

/* ---------- Special ---------- */
fieldset.nocolor, fieldset.none { background: transparent; }
fieldset.noborder, fieldset.none { border: 0px;; }
form .error, form .warning { border-style: dashed; border-width: 1px; }
form .error label, form .warning label { color: #000; }
form .error textarea, form .error select, form .error input[type=text], form .error input[type=password], form .error .text, form .error .type-text input
form .warning textarea, form .warning select, form .warning input[type=text], form .warning input[type=password], form .warning .text, form .warning .type-text input { width: 62.2%; margin: 0; }
form .error select, form .warning select { width: 62.4%; margin: 0;}

.checkbox-left .type-checkbox, .checkbox-right .type-checkbox { position: relative;}
.checkbox-left .type-checkbox .type-value { position: absolute; top: 0; left: 0; width: none; float: none; }
.checkbox-right .type-checkbox .type-value { position: absolute; top: 0; right: 0; width: none; float: none; }

.full .type-checkbox .type-label , .checkbox-left .type-checkbox .type-label { float: none; width: 99.9%; margin-left: 12px; } 
.checkbox-left .type-checkbox .type-value { width: none; float: none; }

.checkbox-right .type-checkbox .type-value { text-align: right; }
.checkbox-right .type-checkbox .type-label { float: left; width: 95%; }

.col .type-label { float: left; width: 30%; }
.col .type-value { float: left; width: 69.9%; }
.col .type-value textarea, .col .type-value select, .col .type-value input[type=text], .col .type-value input[type=password], .col .type-value input.text, .col .type-value .type-text input { width: 99.9%; }

.col .error label { width: 29.4%; }
.col .error textarea, .col .error select, .col .error input[type=text], .col .error input[type=password], .col .error .text, .col .error .type-text input
.col .warning textarea, .col .warning select, .col .warning input[type=text], .col .warning input[type=password], .col .warning .text, .col .warning .type-text input { width: 63.39%; margin: 0; }
.col .error select, .col .warning select { width: 63.46%; margin: 0; }
.col .error strong, .col .warning strong { margin-left: 29.4%; }
.col .col { margin-left: 30%; }
.col label.none { float: none; }