/************************ BODY *************************/
body /* caracteristique du corps */
{	
	font-family:Arial;/* font du caractere */
	font-size:12px;/* taille du caractere*/
	color:#ffffff;/* couleur du caractere*/
	background-color:#000000;/* couleur du background */
	margin:0px;/* remettre bordure exterieur a zero */
	margin-top: 20px; /* Pour éviter de coller avec le haut de la fenetre du navigateur*/
	margin-bottom: 20px; /* Idem pour le bas*/
}

body a /*toutes les couleurs du lien dans le corps seront orange*/
{
	color:#f47b33;
}
body a:hover/*toutes les couleurs du lien quand survol dans le corps seront white*/
{
	color:white;
	text-decoration:none;
}

.affichageDate/* "#"=>id et "."=>class , pour les dates dans le site -> utiliser <span id="affichageDate"></span>*/
{
	color:#8f9d4c;
}
#cliqueMore/* pour les phrase comme les liens*/
{
	float:right;/* aligner a gauche*/
	margin:0px;/* remettre les bordures exterieurs (top,bottom,left,right) a zero*/
	padding:0px;/* remettre les bordures interieurs (top,bottom,left,right) a zero */
	color:#f47b33;/* coleur du phrase */
}
.colorTextFirstLine/* pour les texts au debut dune phrase*/
{
	color:white;
}
#commentaire/* pour les commentaires */
{
	font-size:9px;
	color:#f47b33;
}

.center/* center un objet */
{
	text-align:center;
}

/**************************SITE WRAPPER******************/
/* contient: tout le site*/
.site-wrapper
{
	width:770px;
	min-height:750px;
	margin-left:auto;
	margin-right:auto;
	border:solid 1px white;
}
/*************************HEADER WRAPPER*******************/
/* contient: header-title(header_title_1.png) tout en haut niveau 1
             header-image(header_image.png=cest mon photo) ensuite niveau 2, a gauche
			 panel-mesprojets(mesprojets.png=derniers projets) ensuite niveau 2, a droite
*/
.header-wrapper
{
	width:770px;
	height:243px;
}

.header-title
{
	height:39px;
	background:url("images/header_title_1.png");
}

.header-image
{
	float:left;/* floater à gauche */
	height:204px;
	width:567px;
	background:url("images/header_image.png");
}

.panel-mesprojets
{
	float:right;/* floater à droite */
	height:204px;
	width:203px;
	background:url("images/mesprojets.png");
}
.panel-mesprojets a img /* image dans lien dans panel-mesprojets */
{
	border:none;
}
.panel-mesprojets p /* paragraphe dans panel-mesprojets */
{
	padding:0px;/* remettre les bordures interieurs a zero */
	margin:0px;/* remettre les bordures exterieurs a zero */
	padding-top:50px;/* bordure interieur haut*/
	padding-left:15px;/* bordure interieur gauche */
	padding-right:15px;/* bordure interieur droite */
	font-size:11px;/* taille caractere*/
	color:#f6de9f;/* couleur caratere*/
	text-align:center;/* center les textes*/
}

/*****************************BODY WRAPPER*****************************/
/* contient :
	menu-wrapper(menu en bouton à droite)
	sousmenu wrapper(petit menu en icon à gauche)
*/
.body-wrapper
{
	float:left;
	width:770px;
	min-height:465px;/* hauteur minimal, possible de s'agrandir*/
}
/*********************** MENU WRAPPER (boutons menu à gauche) **********************/
.menu-wrapper
{
	float:left;
	width:567px;
	height:55px;
	background:url("images/bg_menu.png");
}

.menu-wrapper ul/* list a puce dans menu wrapper*/
{
	padding:0px;
	margin:0px;
	padding-left:2px;
	list-style-type:none;/* je ne veux pas les puces*/
}

.menu-wrapper li/* list li dans menu-wrapper*/
{
	float:left;/* floater à gauche*/
	padding-left:8.2px;
	padding-top:4px;
}

.menu-wrapper li img/* pas de bordure autour une image pour un lien */
{
	border:none;
}

#menu {/* cest list a puce ul */
  position: relative;
}

#menu span {/* je ne veux pas afficher span */
  display: none;
  position: absolute;
}

#menu a {/* lien dans ul */
  display: block;
  text-indent: -900%;/* rendre invisible le text dans lien <a></a>*/
  position: relative;
  outline: none;
}

#menu a:hover {/* survol*/
  background-position: left bottom;
}
#menu a:hover span {/* survol span */
  display: block;/* afficher le block */
}

/* -----bouton Accueil------- */
#menu .Accueil 
{
	width:105px;
	height:37px;
	background:url("images/boutonAccueil.png") no-repeat;
}

#menu .Accueil span
{
	width:105px;
	height:37px;	
	background:url("images/boutonAccueil_hover.png") no-repeat;
	left:0px;
	top:0px;
}
/* ------bouton Quisuisje-------- */
#menu .Quisuisje 
{
	width:105px;
	height:37px;
	background:url("images/boutonQuisuisje.png") no-repeat;
}

#menu .Quisuisje span
{
	width:105px;
	height:37px;	
	background:url("images/boutonQuisuisje_hover.png") no-repeat;
	left:0px;
	top:0px;
}
/* -----------bouton CV------------ */
#menu .CV
{
	width:105px;
	height:37px;
	background:url("images/boutonCV.png") no-repeat;
}

#menu .CV span
{
	width:105px;
	height:37px;	
	background:url("images/boutonCV_hover.png") no-repeat;
	left:0px;
	top:0px;
}

/* -----------bouton Projets------------ */
#menu .Projets
{
	width:105px;
	height:37px;
	background:url("images/boutonProjets.png") no-repeat;
}

#menu .Projets span
{
	width:105px;
	height:37px;	
	background:url("images/boutonProjets_hover.png") no-repeat;
	left:0px;
	top:0px;
}
/* -------------bouton Contact--------------- */
#menu .Contact
{
	width:104px;
	height:37px;
	background:url("images/bouton_contact_hover.png") no-repeat;
}

#menu .Contact span
{
	width:104px;
	height:37px;	
	background:url("images/bouton_contact_hover.png") no-repeat;
	left:0px;
	top:0px;
}

/********************* SOUSMENU WRAPPER (icon menu à droite) **********************/
/* idee est identique a menu-wrapper */
.sousmenu-wrapper
{
	float:right;
	width:203px;
	height:55px;
	background:url("images/bg_sousMenu.png");
}

.sousmenu-wrapper ul
{
	margin:0px;
	padding:0px;
	list-style-type:none;
	padding-top:14px;
	padding-left:40px;
}

.sousmenu-wrapper li
{
	float:left;
	padding-right:14px;
}

.sousmenu-wrapper li img
{
	border:none;
}

#sousmenu {
  position: relative;
}

#sousmenu span {
  display: none;
  position: absolute;
}

#sousmenu a {
  display: block;
  text-indent: -900%;
  position: relative;
  outline: none;
}

#sousmenu a:hover {
  background-position: left bottom;
}
#sousmenu a:hover span {
  display: block;
}

/* ---------iconAccueil------------ */
#sousmenu .iconAccueil
{
	width:15px;
	height:15px;
	background:url("images/icon_accueil.png");
}

#sousmenu .iconAccueil span
{
	width:30px;
	height:30px;	
	background:url("images/icon_accueil_hover.png");
	left:-6px;
	top:-6px;
}
/* -----------iconQuijesuis------------- */
#sousmenu .iconQuisuisje
{
	width:13px;
	height:15px;
	background:url("images/iconQuisuisje.png");
}

#sousmenu .iconQuisuisje span
{
	width:26px;
	height:30px;	
	background:url("images/iconQuisuisje_hover.png");
	left:-6px;
	top:-6px;
}
/* --------------iconCV------------------ */
#sousmenu .iconCV
{
	width:10px;
	height:15px;
	background:url("images/iconCV.png");
}

#sousmenu .iconCV span
{
	width:20px;
	height:30px;	
	background:url("images/iconCV_hover.png");
	left:-6px;
	top:-6px;
}
/* ----------------iconProjets-------------- */
#sousmenu .iconProjets
{
	width:8px;
	height:15px;
	background:url("images/icon_projets.png");
}

#sousmenu .iconProjets span
{
	width:16px;
	height:30px;	
	background:url("images/icon_projets_hover.png");
	left:-6px;
	top:-6px;
}
/* ----------------iconContact------------------ */
#sousmenu .iconContact
{
	width:16px;
	height:15px;
	background:url("images/icon_contact.png");
}

#sousmenu .iconContact span
{
	width:31px;
	height:29px;	
	background:url("images/icon_contact_hover.png");
	left:-6px;
	top:-6px;
}
/********************************* actus - pagePersonnelle - diversites+liens ******************************/

/*------------ derniere actus------*/
.actus
{
	float:left;
	width:179px;
	min-height:410px;
	background:url("images/bg_actus.png");
}
.actus p
{
	margin:0px;
	padding:0px;
	padding-top:100px;
	padding-left:15px;
	padding-right:10px;
	padding-bottom:10px;
	font-size:11px;
	color:#f0d99b;
}
.actus a 
{
	color:#f47b33;
	margin:0px;
	float:right;
}
.actus a:hover
{
	color:white;
}

/* ------------------zone central page personnelle -------------------*/
.personnelle
{
	float:left;
	width:388px;
	min-height:410px;
	background:url("images/bg_personnelle.png");
	padding:0px;
}
.personnelle p
{
	margin:0px;
	padding:0px;
	padding-top:100px;
	padding-left:20px;
	padding-right:20px;
	padding-bottom:10px;
	font-size:11px;
	color:#f0d99b;
}

#eid_image
{
	margin:0px;
	padding:0px;
	float:left;
	width:109px;
	height:73px;
	padding-left:20px;
}
#eid_text
{
	float:right;
	width:255px;
	height:73px;
}
#eid_text p
{
	margin:0px;
	padding:0px;
	padding-right:20px;
	font-size:11px;
	color:#f0d99b;
}

/* -----------------diversités et liens utils-------------------*/
.diversites
{
	float:right;
	width:203px;
	min-height:410px;
	background:url("images/bg_diversites.png");
	font-size:11px;
	color:#f0d99b;
}

.diversites ul
{
	margin:0px;
	padding:0px;
	padding-top:95px;
	padding-left:30px;
	padding-right:20px;
	padding-bottom:10px;
}

.diversites p
{
	margin:0px;
	padding:0px;
	padding-left:20px;
	padding-right:20px;
	padding-bottom:10px;
}

/************************************FOOTER WRAPPER********************************/
.footer-wrapper
{
	clear:left;
	height:42px;
	background:url("images/footer.png");
}
#musiquedefond
{
	margin:0px;
	padding:0px;
	padding-top:13px;
	padding-right:15px;
	float:right;
}

#date
{
	float:right;
	margin:0px;
	padding:0px;
	padding-top:13px;
	padding-right:15px;
	font-size:11px;
	color:white;
	text-align: justify;		
}

/*******************************************************************************************/
/*******************************Proprietes des pages****************************************/
/* page quisuisje content */
.quisuisje
{
	float:left;
	margin:0px;
	padding:0px;
	min-height:410px;
	width:388px;
	background:url("images/bg_quisuisje.png");
}

#quisuisje_partie_gauche_image
{
	margin:0px;
	padding:0px;
	float:left;
	height:126px;
	width:138px;
	background:url("images/moi1.png") no-repeat;
	margin-top:100px;
	margin-left:20px;
}
#quisuisje_partie_droite
{
	float:right;
	height:118px;
	width:200px;
	margin-top:100px;
}

#quisuisje_partie_droite p
{
	font-size:11px;
	color:#f0d99b;
	text-align: justify;
}

/************* page contact content ****************/
.contact
{
	float:left;
	margin:0px;
	padding:0px;
	min-height:410px;
	width:388px;
	background:url("images/bg_contact.png");
}

#contact_form
{
	margin:0px;
	padding:0px;
	float:left;
	padding-top:75px;
	padding-left:42px;
	width:300px;
	text-align:center;
	font-size:11px;
}

input
{
	font-size:11px;
}

.text
{
	padding-left:10px;
}

/*********** page message_envoye_content **********/
.message_envoye
{
	float:left;
	margin:0px;
	padding:0px;
	min-height:410px;
	width:388px;
	background:url("images/bg_contact.png");
}

.message_envoye p
{
	padding-top: 100px;
	font-size:11px;
	color:#f0d99b;
	text-align:center;
}
/************************ CV page **********************/
.cv-wrapper
{
	height:1200px;
	width:770px;
	margin:auto;
	border:solid 1px white;
	font-size:12px;
	color:#f0d99b;
	font-weight:normal;
}
.cv-wrapper p
{
	margin:0px;
	padding:0px;
	font-size:12px;
	color:#f0d99b;
	font-weight:normal;		
}
.cv-wrapper li
{
	font-size:10px;
	color:#f0d99b;	
}

.cv-wrapper ul
{
	padding-left:90px;
}

.cv-header-wrapper
{
	height:98px;
	width:770px;
	background:url("images/bg_cv_header.png");
	text-align:center;
}


.cv-body-wrapper
{
	height:764px;
	width:770px;
	background-color:#232018;
}

.cv-footer-wrapper
{
	height:338px;
	width:770px;
	background:url("images/bg_cv_footer.png");
}

.titre
{
	font-size:20px;
	color:#3f71a6;
	padding-left:50px;
}

._left
{
	float:left;
	padding:0px;
	margin:0px;
	width:150px;
	min-height:0px;	
	margin-bottom:20px;
}
._left p
{
	padding:0px;
	margin:0px;
	padding-left:50px;	
}
._right
{
	float:left;
	margin:0px;
	padding:0px;
	width:620px;
	min-height:0px;
	margin-bottom:20px;
}
._right p
{
	padding:0px;
	margin:0px;
	padding-left:0px;
}