/* 
tnpconsultants.com
Feuille de style CSS pour le site web

Cyril CHAPELLIER
Mélanie SOHET

Historique:
27/10/08: création
07/11/08: mise à jour et épuration du code. Commentaires.

Couleurs:
	noir : black
	blanc : white
	les couleurs corpo :
		vert TnP : #9c0
		vert plus clair: #cf3
		bleu/gris : #495c77 (ouch!)
	gris moyens :
		gris 1 : #ddd
		gris 2 : #bbb
		gris 3 : #444

*/

/* ======================== */
/* Caractéristiques de base */
/* ======================== */

/* Caractéristiques de base pour la page */
body{
	margin: 0;
	font-family: Verdana;
	font-size: 11px;
	background: #ddd;
}

/* Caractéristiques de base pour les liens html */
a{
	color: #9c0;
	text-decoration: none;
	/*border-bottom : 1px dotted #9c0;*/
}

a:hover{
	color: #495c77;
	border-bottom : 1px dotted #495c77;
}

/* Caractéristiques de base pour les tableaux html */
table{
	border: none; /* L'ajout d'un paramètre 'border' dans la définition de balise est plus fort */
	font-family: Verdana;
	font-size: 11px;
}

/* Caractéristiques de base pour les images */
img{
	border: none; /* On ne veut pas de bords (compatibilité Firefox anciennes générations)*/
}

/* Caractéristiques de base pour les listes */

ul {
	margin-left: 0;
	padding-left: 0;
	text-align: justify;
}

li {
	padding-left: 5px;
	margin-left: 0;
	list-style-image: url("../images/bullet.png");
	list-style-position: inside;
	text-align: justify;
}

/* Caractéristiques de base pour les blocs de titre h1 et h2 */
h1{
	/*font: bold 14px Verdana;
	color: #495c77;
	text-align: center;*/
	font: bold 20px "Lucida Grande", Helvetica, Verdana, Arial, sans-serif Verdana;
	color: #b6c931;
	text-align: left;
}

h2{
	font: bold 12px Verdana;
	color: black;
	text-align: center;
}

h3{
	font: bold 12px Verdana;
}

/* On crée un bloc dérivé de h1, encadré, sur fond vert TnP */
h1#box{
	font: bold 14px Verdana;
	color: black;
	background: #9c0 url("../images/fond-h1.jpg");
	border-left: 1px solid #444;
	border-right: 1px solid #444;
	padding: 5px;
	height: 18px; 
	text-align: center;
}



/* ========================================================== */
/* Bloc qui peut contenir une image de 60x60px sur la gauche, */
/* avec trois à quatre lignes de texte (ex: témoignages)      */
#img-inset{ /* << Le style à appliquer au bloc */
	font: bold 12px Verdana;
	color: black;
	padding-top: 1px;
	margin: 5px 0px 5px 0px;
	border: 1px solid #9c0;
	height: 64px;
	text-align: left;
}

.img-inset-left{ /* << Le style à appliquer à l'image si on la veut à gauche */
	float: left;
	width: 60px;
	padding: 2px;
	height: 60px;
}

#img-inset:hover{ /* << Le style lorsque la souris est sur le lien */
	background: #eee; /* On change la couleur de fond du bloc - ne marche que sous Firefox ... c'est déjà ca */
}/* ========================================================== */

/* ===== bloc pour la page de maintenance ===== */
#maintenance{
	padding: 10px;
	width: 300px;
	height: 200px;
	text-align: justify;
	border: 1px solid #9c0;
	background: white url("../images/maintenance.jpg") no-repeat top center;
	
}

/* ===== bloc pour la page d'erreur ===== */
#erreur{
	padding: 10px;
	width: 300px;
	height: 200px;
	text-align: justify;
	border: 1px solid #9c0;
	background: white url("../images/erreur.jpg") no-repeat top center;
}

/* ======================== */
/* Menu du haut et bannière */
/* ======================== */
/* Astuce pour IE pour centrer le div de la banniere */
#IE_banniere_wrap{ text-align: center; background: white url("../images/banniere.jpg")}

/* Container pour la bannière (logo TnP) */
#banniere{
	margin: auto; /* Pour que l'alignement au centre se fasse, il faut que le navigateur */
				  /* ait le contrôle sur les marges (astuce Firefox)*/
	align: center; /* Astuce Firefox pour centrer les div */
	width: 750px;
	height: 120px;
	background:  url("../images/logo.jpg") no-repeat;
}

#banniere-blog{
	margin: auto; /* Pour que l'alignement au centre se fasse, il faut que le navigateur */
				  /* ait le contrôle sur les marges (astuce Firefox)*/
	align: center; /* Astuce Firefox pour centrer les div */
	width: 750px;
	height: 120px;
	background:  url("../images/banniere_blog.jpg") no-repeat;
	font: bold 24px Verdana;
}

/* Container pour le menu (liste et lignes en dessous) */
#barre-menu{
	width: 100%;
	padding-top: 8px;
	background: #888 url("../images/fond-menu2.jpg") repeat-x; /* image de fond (dégradé noir/blanc) */
}

/* Deux blocs qui forment une double ligne de couleur en dessous du menu */
#sous-barre-menu{ display: none; }
#soussous-barre-menu{ display: none; }

/* Bloc pour l'affichage des drapeaux pour le choix de la langue */
#choixLangue{
	float: right;
	margin-right: 8px;
	margin-top: 2px;
	position: absolute;
	right: 0px;
}

#extranet{
	position: absolute;
	left: 50px;
	top: 0px;
	border : 1px solid  #7c8faa;
	border-top: none;
	background: white;
	width: 180px;
	text-align: center;
	color: #6b7e99;
}

#extranet a{color: #6b7e99;}

/* =========================================================== */
/* Les spécifications pour la liste (barre de menu en onglets) */

#liste-menu{
	margin: 0;
	/*font: bold 12px Verdana;*/
	font: bold 11px Verdana;
	padding: 0px 0px 10px 0px;
	text-align: center;
	border-bottom: none /* 1px solid #444;*/
}

#liste-menu li{
	margin: 0;
	list-style-type: none;
	background: none;
	padding: auto;
	display: inline;
}

#liste-menu li a{
	background: none; /*#bbb;*/
	border: none; /*1px solid #444;*/
	border-bottom: none;
	text-decoration: none;
	padding: 0px 10px 2px 10px; /* espace entre les items de la liste : 20px */
	color: black; /*#444;*/
}

#liste-menu li a#current{
	color: white;
	background: none; /*#9c0; */
	border-bottom: 2px solid #9c0;
}

#liste-menu li a:hover{
	color: #ddd;
	background: none; /*#aaa;*/
	border-bottom: 2px solid #999;
}

/* =========================================================== */



/* ======================== */
/* Corps et contenu de page */
/* ======================== */

/* Trick pour IE pour centrer le div du corps de page */

#IE_corps_wrap{
	/*background: #f5fafd url("../images/bg.jpg") repeat-y;*/
	text-align: center;
	/*background: #ddd;*/
	background: #f5fafd;
}

/* Corps de page (contient les boites et le contenu) */

#corps{
	/*margin: auto;
	padding: 0;
	width: 750px;
	background: white;
	border-right: 2px solid #888;
	border-left: 2px solid #888;
	border-bottom: 2px solid #aaa;
	align: center; /* FIX pour Firefox (voir plus haut) */
	/*text-align: justify;
	overflow: hidden; /* FIX pour Internet Explorer */
	color: #797979;
	margin: auto;
	padding: 5px;
	width: 755px;
	background: white;
	border-right: 2px solid #888;
	border-left: 2px solid #888;
	border-bottom: 2px solid #aaa;
	align: center; /* FIX pour Firefox (voir plus haut) */
	text-align: justify;
	overflow: hidden; /* FIX pour Internet Explorer */
}

/* le même, pour le popup */
#corps-popUp{
	font-size: 14px;
	font-family: "Lucida Grande", Verdana, Arial, sans-serif;
	color: #797979;
	margin: 0px;
	padding: 0;
	background: white;
	border: 2px solid #aaa;
	align: center; /* FIX pour Firefox (voir plus haut) */
	text-align: justify;
	overflow: hidden; /* FIX pour Internet Explorer */
}

#corps-popUp hr{
	border: none;
	color: #ededed;
	background-color: #ededed;
	height: 5px;
}



#content{
	float: left; 
	width: 510px;
	/* FIX pour IE : on utilise margin (plutot que padding) */
	/* pour que le rendu soit pareil partout */
	margin: 5px; 
	/* on force un petit padding - d'où la valeur de width : */
	/* Sous IE : 510 disponible = */
	/* 746 (corps - 2x2 borders) - (210 + 5 + 5) (boite-gauche) - (5 + 5) (margin) - 6 (padding) */
	/* Sous FF, SF, etc : 512 disponible = */
	/* 750 (corps) - (210 + 5 + 5) (boite-gauche) - (5 + 5) (margin) - 6 (padding) - 2(border) */
	/* En effet les bordures sont comptées à l'intérieur sous IE et à l'extérieur pour les autres */
	padding-left: 6px; 
	border-left: 2px solid #ddd;

}

#content-all{
	margin: 5px;  /* Le padding permet de laisser un petit espace à gauche, à droite et en bas*/
	padding-left: 6px;
	padding-right: 6px;
}

/* Une boîte qui s'aligne à gauche */
#boite-gauche{
	float: left;
	/*margin: 5px; !important*/
    margin: 0;
	width: 210px;
}

.h{ /* Pour l'image dans une boite gauche : deux bordures */
	border-bottom: 6px solid #495c77;
	border-top : 6px solid #495c77;
}

#boite-gauche a{
	color: black;
}

#boite-gauche a:hover{
	color: #495c77;
	border: none;
}

/* Les boites qui servent pour la page d'accueil (à utiliser en complément */
/* d'une boite gauche ou droite. (ou pas ?)*/

#sous-boite, #stress_article, .s_boite{
	margin: 2px;
	padding: 5px;
	background: #ddd;
}

#stress_article{
	margin-bottom: 15px;
	margin-top: 5px;
}

#stress_article a{
	color: #9c0;
	text-decoration: none;
}


#stress_article a :hover{
	color: #9c0;
	text-decoration: none;
}

#sous-boite-img{
	float: left;
	margin-right: 5px;
	display: inline-block;
}

#sous-boite-texte{
	position: relative; /* Corrige le bug IE de 'texte invisible' */
}

.tiroir{
	margin: 0px;
	margin-top: 5px;
	padding: 3px;
	text-align: center;
	height: 30px;
	cursor: pointer;
	font-size: 11px;
	font-weight: bold;
}



.sous-tiroir{
	margin: 0px;
	padding: 10px;
	background: #ddd;
	border: 2px solid;
	border-top: none;
}



#liste-croix{
	margin: 0;
	padding: 0;
	list-style-image: none;
	list-style-type: none;
	background: none;
	list-style-position: outside;
}

.tiroir-plus{
	font-family: Verdana;
	font-size: 13px;
	font-weight: bold;
	text-align: right;
}




.tiroir_valeurs{
	margin: 0px;
	padding: 3px;
	text-align: center;
	width: 120px;
	height: 65px;
	float: left;
	cursor: pointer;
	color: black;
	border: none;
	font-size: 12px;
	font-weight: bold;
}

.sous-tiroir_valeurs {
	margin: 0px;
	padding: 10px;
	background: #ddd;
	text-align: justify;
	border: 2px solid;
	border-top: 20px solid;
}

/* ======================== */
/* ---- Autres & Divers --- */
/* ======================== */

.g{
	font-size: 12px;
	color: #555;
}
.g1{
	font-size: 12px;
	color: #ddd;
}

.g:hover{
	color: black;
	border: none;
}
.g1:hover{
	color: white;
	border: none;
}

.bold{
	font-weight: bold;
	font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
}

.bleu{
	color: #495c77;
}

.titre_news{
	font-size: 15px;
	color: black;
}

.date_news{
	font-size: 9px;
	color: #444;
}

.lien_news{
	font-size: 10px;
	font-style: italic;
	font-weight: bold;
	color: #444;
}

.texte-news{
	font-size: 11px;
	color: black;
}

.msg{
	font-size: 10px;
	display: block;
	background: #eaa;
	color: red;
	border: 1px solid red;
	padding: 5px 15px 5px 15px;
}

#auteur{
	margin: 5px;
	padding: 5px;
	float: right;
	width: 90px;
	height: 80px;
	color: white;
	font-size: .7em;
	text-align: center;
	background: #495c77;
}



/* ================================= */
/* ---- CSS pour le Media Server --- */
/* ================================= */



.album{
	float: left;
	text-align: center;
	margin: 5px;
	padding: 25px 0px 3px 0px ;
	background: black;
	border: 1px solid #333333;
	width: 150px; 
	height: auto;
}

.album-void{
	float: left;
	text-align: center;
	margin: 5px;
	padding: 25px 0px 3px 0px ;
	background: #333333;
	border: 1px solid #555555;
	width: 150px; 
	height: 128px;
}

div.album:hover{
	border: 1px solid #aaaaff;
	background: #111111;
}

.thumbnail{
	margin: 0px 0px 5px 0px;
	padding: 0px;
	width: 100px;
	height: 100px;
	background: white;
	
}

.label{
	overflow: hidden;
	font-family: Arial, Geneva;
	font-size: 0.7em;
	font-weight: bold;
	text-decoration: none;
	height: 15px;
	color: white;
	margin: 0px 0px 0px 0px;
	padding: 2px;
}

/*pop up fermer la fenetre */
.close{
	background: #888888;
}

.close a{
	text-transform: uppercase;
	color: white;
	font-size: 18px;
}

#controls{
	color: #999999;
	text-align: right;
	padding: 0px 10px 0px 0px ;
	font-family: Arial, Geneva;
	font-size: 1.5em;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
}

#controls a:link, a:visited{
	color: #666666;
}

#controls a:hover{
	color: white;
}

#offre_table{
   background: url("../images/offre_table_bg.jpg") no-repeat;
   width: 515px;
   height: 170px;
   color:#4b4b4b;
   font-weight:bold;
}

#offre_table ul{
   list-style-type: none;
   text-align: left;
}

#offre_table ul li{
   display: inline;
   padding-right: 55px;
}

#offre_table ul li a{
   color: #4b4b4b;
}

#offre_table ul li a:hover{
   color: white;
}
#offre_table .vert{
  padding-top: 60px;
  padding-left: 20px;
  padding-bottom: 22px; 
  font-size: 9px;  
}



#offre_table .vert a{
   text-transform:uppercase;
}

#offre_table .blanc{
  padding-left: 20px;
  font-size: 10px;   
}

#offre_table .blanc a:hover{
    color: #a6bc29;
}
 .sep1{
    background: url("../images/boder_green.jpg") no-repeat;
    padding: 10px;
 }
 
 
 /* --- AUTRES */
 
 article_s{
 	
 	float: none;
 	
 	text-align: justify;
 	
 }