/*   --------------------------------------------   */
/*                SUPERFICTION CSS                  */
/*   © Eric DI POL - SuperFiction                   */
/*   Merci à Manuel CATEZ 							*/
/*	 http://www.floatthatbox.com					*/
/*   --------------------------------------------   */


/****************  GENERAL   ****************/
/* la taille de base des navigateurs est de 16pix --> 62.5% de 16pix, ça fait 10pix.
donc quand je mets 1.1em, ça correspond à 11pix, 1.4 à 14px, etc... */

body {
  margin:0;
  padding:0;
  font: normal 62.5% Arial, Helvetica, Verdana, sans-serif;
  color:#CCC;
	background: #222 url(../img/seringue.jpg) no-repeat -405px -2px;}
p {margin:0; padding:0;}
img {border:0;}
ul {list-style: none; padding:0;}
a {text-decoration:none; font-weight:bold;}
h1 {margin:0; font-size:1.8em;}
h2 {font-size:1.2em; margin:10px 10px; padding:5px 5px; color:#222; text-transform:uppercase;}
h3 {font-size:1.4em; margin:30px 0 8px 10px;}
h4 {font-size:1.1em; margin:10px 10px 0 10px; padding:5px 0 0 0; font-weight:normal;}
hr {display:none;}
blockquote {margin:10px 30px; padding:0; font: normal 110% Tahoma, Courier New, Courier, Arial;  line-height:1.5em; font-style:italic; /*background: url(../img/citation.gif) no-repeat 0 0;*/}

/****************   ELEMENTS COMMUNS   ****************/
#wrapper {width:890px; margin:35px 0 0 35px;}
#header {background:#333; margin:0 10px 20px 0; padding:10px; line-height: 1.7em;}
#fondColonnes {background:url(../img/fondColonnes.gif) top left repeat-y;}
#fond2Colonnes {background:url(../img/fond2Colonnes.gif) top left repeat-y;}
#fond2Colonnes_gd {background:url(../img/fond2Colonnes_gd.gif) top left repeat-y; /*border:#c03 1px solid;*/}
#fond3Colonnes {background:url(../img/fond3Colonnes.gif) top left repeat-y;}
* html #fondColonnes, * html #fond2Colonnes, * html #fond2Colonnes_gd, * html #fond3Colonnes  {height:1%;}
form, fieldset, select, option, input, textarea {margin:0; padding:0; font: 1.1em, Arial, Helvetica, Verdana, sans-serif; vertical-align: middle;}
label {cursor: pointer;}
#vert p.fonction, #bleu p.fonction, #jaune p.fonction, #rose2 p.fonction, #ecru p.fonction {margin:0 10px 0 10px; font-style:italic;}


/****************   LE MENU   ****************/
#menu {width:125px;}
#menu h1 a, #menu h1 a:hover {text-decoration:none; background: transparent;}
#menu ul {margin:10px 0 0 0; padding:0;}
#menu li {font-size:1.1em;}
#menu li a {color:#CCC; font-weight:normal; display: block; padding-left:5px;}
/* HACK pour IE  : il crée des espacements dans les listes quand on utilise des display:block */
* html #menu li {display:inline;}

/* Couleurs du menu */
#bleu #menu a.menuBleu, #rose #menu a.menuRose, #jaune #menu a.menuJaune, #vert #menu a.menuVert, #orange #menu a.menuOrange, #rose2 #menu a.menuRose2, #ecru #menu a.menuEcru, #menu a:hover {color:#454545;}
#bleu #menu a.menuBleu, 		#menu a.menuBleu:hover {background-color:#0FF;}
#rose #menu a.menuRose, 		#menu a.menuRose:hover {background-color:#F0F;}
#jaune #menu a.menuJaune, 	#menu a.menuJaune:hover {background-color:#FF0;}
#vert #menu a.menuVert, 		#menu a.menuVert:hover {background-color:#0F0;}
#orange #menu a.menuOrange, 	#menu a.menuOrange:hover {background-color:#F90;}
#rose2 #menu a.menuRose2, 	#menu a.menuRose2:hover {background-color:#FF00A2;}
#ecru #menu a.menuEcru, 		#menu a.menuEcru:hover {background-color:#E6AB8D;}
#gris #menu a.menuGris, 		#menu a.menuGris:hover {background-color:#CCC;}

/****************   ORGANISATION DES COLONNES   ****************/
#principal p, #principal ul {font-size:1.1em;}
/* 3 colonnes sur 720px avec les couleurs jaune, vert et rose (le ID du body) */
#principal {width:720px; margin:-90px 0 0 170px;}
/* quand l'ID du body est bleu et orange, on passe en 480px, soit 2 colonnes*/
#orange #principal {width: 480px;}

.cols, .cols_gd {background:#333; float:left; padding:0; margin-right:10px; line-height: 1.6em;}
.cols {width:230px;}
.cols_gd {width:470px;}
.cols p, .cols_gd p {margin:0 10px 10px 10px;}
.cols ul {margin : 5px 10px 20px 20px;}



/**************** les pictos des listes ****************/
.cols li, #header li {padding: 0 0 0 10px;}
#bleu .cols li, 	#bleu 	#header li {background:url(../img/flecheBleu.gif) no-repeat 0 0.6em;}
#jaune .cols li, 	#jaune 	#header li {background:url(../img/flecheJaune.gif) no-repeat 0 0.6em;}
#rose .cols li, 	#rose 	#header li {background:url(../img/flecheRose.gif) no-repeat 0 0.6em;}
#rose2 .cols li, 	#rose2 	#header li {background:url(../img/flecheRose2.gif) no-repeat 0 0.6em;}
#vert .cols li, 	#vert 	#header li {background:url(../img/flecheVert.gif) no-repeat 0 0.6em;}
#orange .cols li,	#orange 	#header li {background:url(../img/flecheOrange.gif) no-repeat 0 0.6em;}
#ecru .cols li,	#ecru 	#header li {background:url(../img/flecheEcru.gif) no-repeat 0 0.6em;}



/***************   PAGE INDEX   ****************/
#home {width: 190px; background:#333; margin:25px 25px; padding:0 0 15px 0;}
#home a {margin-left:5px; padding:0 5px 0 5px; display:block; width:85%;}

.bandeau {margin:0px 10px 10px 10px;}
#home img {margin:10px;}
#home p {font-family: Arial, Helvetica, Verdana, sans-serif; font-size:1.1em;}
#intro {margin:5px 10px 150px 10px;}


/***************   PAGE ACTUALITE   ****************/
#enCours, #blog {margin-top:35px;}


/***************   PAGE A PROPOS   ****************/
#identite, .member {margin:10px;}


/***************   PAGE PROJET   ****************/
.colsGd {width:470px; background:#333; float:left; padding:0; margin-right:10px; line-height: 1.7em;}
.colsGd ul {text-align:right; margin:0 10px 10px 0;}
.colsGd li {display:inline;}
.colsGd a {padding:0 3px;}
#preview {margin:10px;}

/***************   PAGE ETUDES DE CAS   ****************/
.etudeCas {margin:0 0 12px 15px;}
.etudeCas a {display:block; margin-bottom:5px; width:202px; height:150px;}
.etudeCas a img {margin: 1px;}
.etudeCas h4 {margin-bottom:10px;}
#jaune #tru1 a, #jaune #tru1 a:hover {text-decoration:none; background: transparent;}



/***************   PAGE COMPETENCES   ****************/
#rose #header ul {margin : 5px 0 10px 10px;}


/***************   PAGE CONTACT   ****************/
.cols fieldset {margin:0 5px 0 10px; border:0;}
#orange .contact {font-size:1.0em;}
#orange label {color:#F90;}
#orange legend {display:none;}
#contactDroite {margin-top:50px;}
#contactNom, #contactPrenom, #contactEmail, #contactSubject, #contactMessage {width:190px; background:#444; border:0; color:#CCC; margin:2px 0 15px 0;}
#orange h4 {margin:7px 0 2px 0;}
.bouton {border:0px; background:#F90; font-size:1.0em; font-weight: bold; text-align:left; margin:0 0 10px 5px; padding:1px 0 1px 3px; cursor: pointer;}


/***************   POP UP   ****************/
#pop h4 {color:#FF0; margin:10px 0 0 10px; padding:0;}
#pop p {font-size:1.1em; margin-left:10px;}
#fond {background:#333; width:100%; height:100%;}

/****************   DIVERS   ****************/
.hidden {display:none;}
.clearer {height: 0; clear: both; line-height: 0;}
li .focus {font-style:italic; margin:0; padding:0; font-size:1.2em;}

/****************  THEMES COLORES   ****************/
#bleu a, #bleu h4, #bleu li .focus {color:#0FF;}
#bleu a:hover, #bleu h2 {background:#0FF;}

#jaune a, #jaune h4, #jaune li .focus {color:#FF0;}
#jaune a:hover, #jaune h2 {background:#FF0;}

#rose a, #rose h4, #rose li .focus {color:#F0F;}
#rose a:hover, #rose h2 {background:#F0F;}

#vert a, #vert h4, #vert li .focus {color:#0F0;}
#vert a:hover, #vert h2 {background:#0F0;}

#orange a, #orange h4, #orange li .focus {color:#F90;}
#orange a:hover, #orange h2 {background:#F90;}

#ecru a, #ecru h4, #ecru li .focus {color:#E6AB8D;}
#ecru a:hover, #ecru h2 {background:#E6AB8D;}

#gris a, #gris h4, #gris li .focus {color:#CCC;}
#gris a:hover, #gris h2 {background:#CCC;}


#rose2 a, #rose2 h4, #rose2 li .focus {color:#FF00A2;}
#rose2 a:hover, #rose2 h2 {background:#FF00A2;}

#ecru a, #ecru h4, , #ecru li .focus, #ecru h3, #ecru blockquote {color:#E6AB8D;}
#ecru a:hover, #ecru h2 {background:#E6AB8D;}

#bleu a:hover, #jaune a:hover, #rose a:hover, #vert a:hover, #orange a:hover, #rose2 a:hover, #gris a:hover, #ecru a:hover  {color:#222;}