/*--Design réalisé et codé par Tomtomdu73. Création soumise à un contrat creative commons.
Un fichier psd et xcf sont mis à votre disposition pour retravailler ce design comme bon vous semble-->



/*----Configuration générale----*/


body
{
	margin:0 ;
	padding: 0;
	height: 100%;
	text-align: center ;
	background:#f4f5f9 url("FondOrange.jpg") repeat-x top repeat-y top; /*Image de fond du header*/
	
	
}

div#global
{
	position: relative;
	min-height: 100%;
}

div#conteneur
{
	text-align: left ;
	width: 790px ; /*Largeur de la division qui contient l'ensemble de la page*/
	margin: 0 auto; /*Pour centrer correctement les éléments de type block dans la page (comme par exemple les divs)*/
	overflow: auto;
	padding-bottom: 50px;
}



/*----Partie Header= titre + connexion----*/



a, img /*Paramètres concernant les liens et les images de la page*/
{
	border: none; /*Suppression des bordures*/
	text-decoration: none; /*Suppression de toutes les décorations éventuelles sur les liens*/
}

div#header
{
	height:138px;/*Largeur de la division header (éviter de modifier^^)*/
}

#logo /*Paramètres du logo*/
{	
	float:left;
	margin-left: 36px;
	margin-top:28px; /* Distance entre le logo et le haut de la page*/
}

span#connexion /*Paramètre du block "Connexion" */
{
	
	float:right;
	display:inline;
	width:285px; 
	height: 68px; 
	margin-top:48px; /*Distance entre fond du block connexion et le haut de page*/
	background:url("image/fondconnexion.png") no-repeat;/*Chemin menant à l'image de fond*/

}

span#connexion .textconnect /*Paramètre du texte "Connexion"*/
{
	float:left;
	display:inline;
	margin-top:20px;
	margin-left: 7px;
	font-family: "MS Reference Sans Serif", "Myriad Pro", "Minion Pro",sans-serif, Arial, serif;
	font-size: 13px;	
	font-weight: bold;
	color:#3b3b3b;
}

span.infosmembre /*Paramètre du block infomembre comprenant les inputs*/
{

	float:right;
	display:inline;
	margin-right: 13px;
}

span#connexion input.pseudo /*Paramètre de la saisi du pseudo*/
{
	text-align: left;
	margin-top: 18px;
	padding:1px;
	width: 70px;
	height: 20px;
	border: none;
	font-family:sans-serif, serif;
	color:#ffcef5;
	font-size: 12px;
	background: url("image/pseudooff.png") no-repeat;
}

span#connexion input.password /*Paramètre de la saisi du mot de passe*/
{
	text-align: left;
	padding:1px;
	margin-top: 18px;
	margin-left:2px;
	width: 70px;
	height:20px;
	border: none;
	font-family: sans-serif, serif;
	color:#ffcef5;
	font-size: 12px;
	background: url("image/pseudooff.png") no-repeat;
}

span#connexion input.valider /*Paramètre du bouton valider*/
{	
	width: 20px; /*Sa largeur*/
	height: 20px;/*Sa hauteur*/
	border: none;
	background: url("image/valider.png") no-repeat; /* Pour changer le bouton valider, c'est ici! */
	cursor:pointer;
}



/*----Menu horizontal + onglet recherche----*/



div#menuvertical
{
	height:42px;
}

ul.ongletverti
{
	height: 42px;
	margin: 0 ;
	padding:0;
	list-style-type: none ; /*Suppression de tous les effets sur les listes*/
}

ul.ongletverti li
{
	float:left; /*Pour que les listes s'affichent horizontalement*/
	margin-right: 11px;/*Espace entre les onglets*/
	line-height: 32px;/* On définit la hauteur de la ligne d'écriture*/
	height:42px;
	text-align:center;/* Centrage du texte*/
	background: url("image/menuhorizonout.png") no-repeat; /* Image de fond de l'onglet en mode onmouseout*/
}

ul.ongletverti li.active /*Paramètres de l'onglet actif (avec la flèche en-dessous)*/
{
	width:100px;
	display: block;
	float:left;
	font-family: "Minion Pro", Perpetua, sans-serif, serif; /*Choix des polices de caractères*/
	font-weight: bold; /*Mise en gras du contenu de l'onglet*/
	font-size: 20px; /*Taille du texte*/
	color: #3f3f3f;/*Choix de la couleur du texte*/
	background: url("image/menuhorizonactive.png") no-repeat; /*Image de fond de l'onglet lorsqu'il est actif*/
}


ul.ongletverti li a /*Paramètres des autres onglets*/
{
	display: block;
	width:100px;
	font-family: "Minion Pro", Perpetua ,sans-serif, serif;
	font-weight: bold;
	font-size: 20px;
	color: #e5e5e5 ;
}

ul.ongletverti li a:hover /*Paramètres des autres onglets avec un onmouseover*/
{
	width:100px;
	height: 42px;
	color:#3f3f3f;
	background: url("image/menuhorizonon.png"); /*Image de fond de l'onglet */ 
}

ul.ongletverti li.recherche /* Paramètres de la section "Recherche"*/
{
	width: 161px;
	display:block;
	float:left;	
	text-align:left; /*On place le texte à gauche*/
	background: url("image/ongletrecherche.png") no-repeat; /*Image de fond de l'onglet recherche*/
}
	
ul.ongletverti li.recherche input.rechercher /*Paramètres de la zone de saisi de texte dans l'onglet recherche*/
{
	width: 85px;
	padding-left: 22px;/*On établit une marge intérieure pour que le texte coordonne avec l'image de fond*/
	font-family: "Minion Pro", sans-serif, serif; /*Choix des polices de caractères*/
	font-style: italic; /*Mise en gras du contenu de l'onglet*/
	font-size: 15px; /*Taille du texte*/
	color:#383838;/*Choix de la couleur du texte*/
	background:none; /*On supprime le fond de l'input (normalement blanc)*/
	border:none; /*On supprime les marges*/
	
}

ul.ongletverti li.recherche input.valider /*Paramètres du bouton "loupe"*/
{
	width: 22px; /*Sa largeur*/
	height: 20px;/*Sa hauteur*/
	border:none; 
	background: url("image/search1.gif") no-repeat; /*Affichage de l'image loupe*/
	
}



/*----Header Bas----*/



div#headerbas /*Le contenu de la barre bleue*/
{
	height: 84px;
}

div#headerbas .float/*Paramètre pour images*/
{
	float: left;
	margin-right: 8px;/*Marge droite entre images et textes/images*/
	margin-left: 5px; /*Marge gauche entre images et textes/images*/
}

span.text1 /*Paramètre du texte*/
{
	display: block;
	float: left;
	width: 160px;
	height: 84px;
	margin:5px;
	text-align: justify; /*On justifie les paragraphes*/
	font-family:  Verdana, sans-serif, serif; /*polices utilisées= Mettez en premier celle que vous souhaitez puis des polices de rechange au cas où l'internaute ne la possède pas*/
	font-size: 12px; /*Taille de la police*/
	color:white;
}

span.text1 a /*paramètre pour les liens*/
{
	border-bottom: 1px white dotted;/*Soulignement en pointillé*/
	text-decoration: none;
	font-family: Verdana,  serif;
	color: white;
}

span.text1 a:hover /*liens en mode onmouseover*/
{
	font-family: Verdana,  serif;
	color: white;
	background: #ff58e9; /*Inversion de couleur premier/second plan*/
}




/*----Center----*/



div#center
{
	margin-top: 20px;
	position: relative;
	overflow: auto;

}



/*---Contenu de gauche---*/



div#contenu
{
	float: left;
	width: 580px;
	
}
	
/* 000000000000----Paramètres de la galerie de news-----0000000000000*/ 

div#galerie 
{
position: relative;
overflow: auto;
width: 580px;/*Largeur totale*/
height: 260px;/*Hauteur totale*/
margin:0;
padding:0;
}

.mask3 /*Masque les images qui ne doivent pas apparaitre*/
{
	position:absolute;
	width:430px;/*Valeur correspondant à la taille des images*/
	height:260px;/*Valeur correspondant à la taille des images*/
	overflow:hidden;
}

#box4
{
	position:absolute;
}
	
#box4 span
{
	width: 430px;/*Largeur totale*/
	height: 260px;/*Hauteur totale*/
	float: left;/*On posiionne les images à gauche*/
	margin:0;
	padding:0;
	display: block;
	border:none;
	}
	
#box4 img
{
	width: 430px;/*Largeur images utilisées*/
	height: 260px;/*Hauteur images utilisées*/
	float: left;
	margin: 0;
	padding:0;
}

#galerie  p /*Paramètre des boutons à gauche des images*/
{
	width: 150px; /*Largeur*/
	height: 52px;/*Hauteur*/
	float: right;
	margin:0;
	padding:0;
	
}

 #galerie p#handles4 span
{ 
	display: block;
	border: none;
	text-align: center; /*On aligne le tout au centre*/
	height: 52px;
}

.buttons span /*Changement d'image de la souris sur les boutons*/
{
	cursor:pointer;
}

.info/*Paramètre du bloc information*/
{
	position: absolute;
	text-align:left;
	bottom: 0;
	padding-left: 5px;/*Marge intérieur pour que le texte ne colle pas au bord*/
	width:425px;
	height:70px;
	background:#000;
	-moz-opacity:0.5;/*Rendre transparent la partie informations sur Mozilla et Gecko*/
	opacity: 0.5;/*De même pour firefox*/
	filter:alpha(opacity=50);/*Et ça pour IE*/
}
.info h4/*Paramètre du texte dans le bloc info*/
{
	display: inline;
	color:#fff;
	font-family:Arial;
	font-size: 16px;
}



#galerie strong /*Paramètre des titres*/
{
	color: #474747;
	font-family: "Myriad Pro",sans-serif, Verdana, serif;
	font-size: 18px;
}

#galerie em /*Paramètre des commentaires*/
{
	color: #686868;
	font-family: Arial, Verdana,sans-serif, serif;
	font-size: 15px;
}

span.haut /*Paramètre du span situé en haut*/
{
	height: 52px;/*Hauteur*/
	background: url("image/slidehaut.png") no-repeat;/*Image de fond du block en haut*/
}
span.haut:hover /*Paramètre du span en haut en mode onmouseover*/
{
	background: url("image/slidehautonmouse.png") no-repeat;/*Image en mode onmouseover*/
}
span.haut:active /*Lorque l'on clique sur le span en haut*/
{
	background: url("image/slidehauton.png") no-repeat;/*Image lors du clic*/
}

span.milieu /*Paramètre des 3 spans au milieu*/
{
	height: 52px;/*Hauteur*/
	background: url("image/slidemilieu.png") no-repeat;/*Image de fond des spans au milieu*/
}

span.milieu:hover /*Paramètre des spans milieu en mode onmouseover*/
{
	background: url("image/slidemilieuonmouse.png") no-repeat;/*Image en mode onmouseover*/
}

span.milieu:active /*Lorque l'on clique sur les spans du milieu*/
{
	background: url("image/slidemilieuon.png") no-repeat;/*Image lors du clic*/
}

span.bas /*Paramètre du span en bas*/
{
	height: 52px;/*Hauteur*/
	background: url("image/slidebas.png") no-repeat;

}

span.bas:hover /*Paramètre du span en bas en mode onmouseover*/
{
	background: url("image/slidebasonmouse.png") no-repeat;/*Image en mode onmouseover*/
}

span.bas:active /*Lorque l'on clique sur le span du bas*/
{
	background: url("image/slidebason.png") no-repeat;/*Image lors du clic*/
}

	
span.titrenews, span.titrenewstop, span.titrenewsbot /* Paramètre des titres des news*/
{
	line-height: 10px;
}


/*000000000000000---Fin de la galerie de news----00000000000000000*/


div#blockinfo /*Paramètre du block d'information bleu*/
{
	margin-top: 12px;/*Espacement avec la galerie de news*/
	width: 580px;
}

div#titlebleu /*le titre du block*/
{
	height:34px;
	padding-top: 7px;
	padding-left: 14px;
	font-family: "Myriad Pro", Arial, Verdana, serif;
	font-size: 23px;/*Taille du texte*/
	color: white;/*Couleur du texte*/
	background: url("image/infohaut.png") no-repeat;/*Image de fond*/
}

div#contenubleu /*Le contenu*/
{
	padding: 9px;
	width: 576px;
	background: url("image/infofond.png") repeat-y; /*Image de fond de couleur grise que l'on repète tant qu'il le faut en ordonné*/
}

div#contenubleu h4 /*Paramètrage du titre de la news*/
{
	display: inline;
	color:#f638ba;
	text-decoration: overline;
}


div#contenubleu p, div#contenurose p /*Les paragraphes*/
{
	width: 560px;
	margin: 3px;
	text-align: justify; /*On justifie les paragraphes*/
	font-family: "Myriad Pro",sans-serif, serif; /*police utilisées*/
	font-size: 18px; /*Taille de la police*/
}

span#comment /*Le span commentaire*/
{
	padding-left: 360px;

}

div#contenubleu i /*Le texte en italic*/
{
	font-family: Sans, Verdana, serif;
	font-size: 13px;
}

div#contenubleu a /*paramètre sur les liens*/
{
	color: #ff58e9;/*Couleur rose*/
}

div#contenubleu a:hover/*Paramètre sur liens en mode onmouseover*/
{
	background: #ff58e9;/*Inversion de couleur (très web 2.0^^)*/
	color: white; /*Couleur au passage de la souris*/
}


div#basbleu/*Le Bas du block*/
{
	height: 62px;
	background: url("image/infobas.png") no-repeat;
}


div#blockinfo2 /*Paramètre du block d'information rose*/
{
	margin-top: 12px;/*Espacement avec le block du dessus*/
	width: 580px;
}

div#titlerose /*le titre du block rose*/
{
	text-align: right;
	height: 37px;
	padding-top: 11px;
	padding-right: 10px;
	font-family: "Myriad Pro", Arial, Verdana, serif;
	font-size: 23px;
	color: white;
	background: url("image/infohaut2.png") no-repeat;/*Image de fond*/
}

div#contenurose /*Le contenu du block rose*/
{
	padding: 9px;
	width: 570px;
	font-family: Sans, Verdana, serif;
	background: url("image/infofond2.png") repeat-y; /*Image de fond de couleur grise que l'on repète tant qu'il le faut en ordonné*/
}

div#contenurose img 
{
	margin: 6px;/*Espacement entre les images*/
}


div#contenurose a /*Couleur des liens*/
{
	color:#20c3ff;
}

span#comment2 /*Le span commentaire*/
{
	font-size: 14px;
	font-weight: bold;
	padding-left: 470px;

}

div#basrose/*Le Bas du block rose*/
{
	margin-left: 2px;
	height: 37px;
	background: url("image/infobas2.png") no-repeat;
}



/*----La Sidebar----*/



div#sidebar /*Paramètres généraux de la sideabr*/
{
	float: right;
	text-align: right;
	width: 200px; /*Largeur*/
	
}
	
div#sidebarhaut/*Custumisation du haut de la sidebar*/
{
	height: 32px;
	background: url("image/sidebarhaut.png") no-repeat;/*Image de fond*/
}

div#sidebarmilieu /*Paramètre du milieu de la sidebar*/
{
	padding: 7px;
	background: url("image/sidebarmilieu.png") repeat-y;/*Cette image se repète en y tant qu'il le faut*/
}

div#sidebarmilieu h5 /*Custumisation de toutes les balises h5*/
{	
	display: inline;
	border-bottom: 1px #20c3ff dotted;/*Soulignement en pointillé*/
	font-family: "Minion Pro", "Myriad Pro", sans-serif, Verdana, serif;
	font-size: 20px;
	font-weight: bold;
	color: #20c3ff;
}

div#sidebarmilieu  a /*Paramètrage des liens*/
{	
	font-family: "Myriad Pro", Sans-serif,  serif;
	font-size: 16px;
	color: #000;
}

div#sidebarmilieu  a:hover /*Les liens en onmouseover*/
{	
	background: #20c3ff; /*Inversion de couleur premier/second plan */
	color: white;
}

div#newsletter/*Paramètres de la div newsletter*/
{
	width: 178px;
	height: 29px;
	background: url("image/newsletter.png") no-repeat;/*Image de fond*/
}

div#newsletter span.email/*Paramètre du texte "Email"*/
{
	margin-top: 5px;
	margin-left: 6px;
	color: white;
	float: left;
}

div#newsletter span.getemail
{
	margin-top: 2px;
	float: right;
}

div#newsletter span.getemail input /*paramètre de la saisi de l'email*/
{
	font-size: 16px;
	background: none;
	width: 120px;
	height: 27px;
	border: none;
}

div#sidebarbas/*Custumisation du bas de la sidebar*/
{
	height: 32px;
	background: url("image/sidebarbas.png") no-repeat;/*Image de fond en bas*/
}

	
	
/*----Pied de page----*/



div#bas
{
	text-align: left;

}
	
div#footer /*Paramètres généraux du footer*/
{
	text-align: center;
	position: absolute;
	height: 160px;/*Hauteur du footer correspondant à la hauteur de l'image de fond*/
	width: 100%;/*le footer prend toute la largeur de la page*/
	background: url("image/footer.png") repeat-x bottom;/*Image de fond en dégradé que l'on répète en x*/
	color:#fff;
	font-size: 14px;

}

div#footer  span /*Paramètrage des spans*/
{	
	color:  #00FFFF;
	font-size: 16px;
}

div#footer  strong /*Paramètrage des balises strong*/
{	
	color: #FF1FB4;
	font-size: 16px;
}

div#footer  a /*Paramètrage des liens*/
{	
	border-bottom: 1px white dotted;/*Soulignement en pointillé*/
	font-family: "Myriad Pro", Sans-serif,  serif;
	font-size: 16px;
	color: white;
}


div#footer  a:hover /*Les liens en onmouseover*/
{	
	background: #FF1FB4; /*Inversion de couleur premier/second plan */
	color: white;
}