/************************ BODY *************************/
/*
	+ margin-top 20
	+ margin-bottom 20
	
	contenu du site 1200 (sans margin top et margin bottom) contient:
	+ header-wrapper 243 (contient header-title(page personnelle) 39 et header-image(banner gauche,panel-projet droite) 204)
	+ menu 55
	+
	+ footer 42
	
*/

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 */
	padding:0px;
	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:1200px;
	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
{
	padding:0px;
	margin:0px;
	width:770px;
	height:243px;
}

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

.header-image
{
	padding:0px;
	margin:0px;
	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 :
	55|menu-wrapper(menu en bouton à droite) 
	  |sousmenu wrapper(petit menu en icon à gauche)
	860|body-content 
*/
.body-wrapper
{
	padding:0px;
	margin:0px;
	float:left;
	width:770px;
	min-height:915px;/* hauteur minimal, possible de s'agrandir*/
}
/*********************** MENU WRAPPER (boutons menu à gauche) **********************/
.menu-wrapper
{
	padding:0px;
	margin:0px;
	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_hover.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.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
{
	padding:0px;
	margin:0px;
	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;
}


/**************************Projets content page **************************/
.projets_content_body
{
	padding:0px;
	margin:0px;
	width:770px;
	height:915px;/*possible d'étendre ici*/
	background-color:#242018;
}

.bg_content_header_titre
{
	float:left;
	padding:0px;
	margin:0px;
	width:770px;
	height:76px;
	background:url("images/bg_projets_header.png");	
}

/* liste a puce: pas de puce */
.rien
{
   list-style-type: none;
}

.content_projets ul
{
	color:#f6de9f;	
}

.content_projets li h4
{
	color: white;	
}

.content_projets h3
{
	padding:0px;
	margin:0px;
	padding-top:200px;
	text-align:center;	
}

form
{	
	padding:0px;
	margin:0px;
	padding-top:200px;
	text-align:center;
}

.center
{
	text-align:center;
}

/************************************FOOTER WRAPPER********************************/
.footer-wrapper
{
	padding:0px;
	margin:0px;
	clear:left;
	height:42px;
	width:770px;
	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;		
}