/*
     _     
    | |   
  __| | __
 / _` |/ /
| (_|   < 
 \__,_|\_\

*/


* {
	margin: 0;
	padding:0;
}

html {
	overflow-y:scroll;
}

html, body {
	height:100%;
}

body {
	font:normal 75%/1.5 cambria,serif;
	color:#333;
	background:#fff url(../img/bg.jpg) top center no-repeat fixed;
}

acronym {
	border-bottom:1px dotted #666;
	cursor: help;
}

a img {border:none;}
a:active, a:focus {outline:none;}

a {
	color:#333;
	text-decoration:none;
}
a:hover {
	color:#3ac2df;
	text-decoration:none;
}

input[type=submit],label,select {cursor:pointer;}  
input[type=text]:focus, input[type=password]:focus, textarea:focus {border:2px solid #3ac2ef;}

/* ########################## */
/* #####      PAGE      ##### */
/* ########################## */

#page {
	width:885px;
	padding:0 15px;
	
	/* v Pour avoir un footer tjs en bas de page v */
	min-height: 100%;
	height: auto !important;
	height:100%;
	margin: 0 auto -100px; /* la marge du bas est la valeur nefatif de la hauteur du footer et du .push */
	/*background-color:#0F0;*/
}

/* ########################## */
/* #####     HEADER     ##### */
/* ########################## */

#header {
	overflow:hidden; /* logo gauche, menu droite */
	/*border-bottom:1px dotted #999;*/
}

#logo {
	width:176px;
	float:left;
	margin:15px 0 10px;
}

/* ########################## */
/* #####    NAV MENU    ##### */
/* ########################## */

ul#nav {
	list-style:none;
	margin:25px 0 0;
	width:548px;
	height:41px;
	background:url(../img/navbar.png);
	float:right;
}

	ul#nav span {
		display:none;
	}
	
	ul#nav li {
		float:left;
	}
	
		ul#nav li a {
			height:41px;
			display:block;
		}


/*La largeur de chaque bouton dans la navbar*/
#navaccueil {width:92px;}
#navapropos {width:106px;}
#navportfolio {width:105px;}
#navphoto {width:80px;}
#navblog {width:69px;}
#navcontact {width:96px;}


/*On change la position du background lors du hover de chaque bouton*/
#navaccueil a:hover, body#accueil #navaccueil {background: url(../img/navbar.png) 0px -41px no-repeat;}
#navapropos a:hover, body#a-propos #navapropos {background: url(../img/navbar.png) -92px -41px no-repeat;}
#navportfolio a:hover, body#portfolio #navportfolio {background: url(../img/navbar.png) -198px -41px no-repeat;}
#navphoto a:hover, body#photo #navphoto {background: url(../img/navbar.png) -303px -41px no-repeat;}
#navblog a:hover, body#blog #navblog {background: url(../img/navbar.png) -383px -41px no-repeat;}
#navcontact a:hover, body#contact #navcontact {background: url(../img/navbar.png) -452px -41px no-repeat;}
#body#erreur ul#nav {background:url(../img/navbar.png);}

/* ########################## */
/* #####    CONTENEUR   ##### */
/* ########################## */

#conteneur {
	margin:0 0 25px 0;
}

	#conteneur #preview h1 {
		font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
		margin:2px 0 5px;
		font-size:1.6em;
		font-weight: bold;
		line-height:normal;
		letter-spacing: -2px;
		word-spacing:-3px;
		text-transform:uppercase;
		border-bottom:1px dotted #999;
		overflow:hidden;
		position:relative;
	}
	
	#conteneur h1 {
		margin:2px 0 5px;
		color:#222;
		font-family: “Lucida Sans Unicode”, sans-serif;
		font-size: 2.2em;
		font-style: normal;
		font-weight: bold;
		text-transform: lowercase;
		letter-spacing: -2px;
		line-height: 1.3em;
		border-bottom:1px dotted #999;
	}
	
		#conteneur h1 span.cate {
			color:#999;
		}
	
	#conteneur>h1 {
		width:880px;
	}

		#conteneur h1 a span.more {
			font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
			letter-spacing:-1px;
			text-transform:none;
			word-spacing:normal;
			color:#F0F0F0;
			font-size:0.6em;
			padding:0 20px 0 5px;
			background:#222 url(../img/arrow-right-blue.png) right no-repeat;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			/*-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
			-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
			text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
			border-bottom: 1px solid rgba(0,0,0,0.25);*/
			text-decoration:none;
			position:absolute;
			top:1px;
			right:0;
		}

		#conteneur h1 a:hover span.more {
			color:#3ac2ef;
		}
	
	#conteneur h2 {
		font-size:1.5em;
	}

	#conteneur h3 {
		font-size:1em;
	}

	#conteneur p.info {
		font-size:0.9em;
		text-transform:uppercase;
	}
	
/* ########################## */
/* #####     WELCOME    ##### */
/* ########################## */

#welcome {
	overflow:hidden; /* intro gauche, photo droite */
	margin:20px -15px;  /* marge gauche et droite négative car bg plus large */
	height:160px;
	background:#222 url(../img/bg_welcome.jpg) no-repeat;
	/*border-bottom:1px dotted #333;*/
}

	#welcome p.intro {
		width:865px;
		max-height:190px; /* Empeche le texte de deborder du cadre */
		color:#F0F0F0;
		font-size: 2em;
		font-style: normal;
		font-weight: bold;
		letter-spacing: -1px;
		line-height: 1.2em;
		margin:10px 0 0 0;
		padding:25px 20px;
		text-align:justify;
	}

	#welcome a {
		font-style:italic;
		color: #3ac2ef;
		background:none;
	}
	
		#welcome a:hover {
			color:#F0F0F0;
			border-bottom:2px dotted #666;
		}
	
/* ########################## */
/* #####     PREVIEW    ##### */
/* ########################## */

#preview {
	overflow:hidden; /* crea_pic gauche, blog post droite */
	/*background-color:#F00;*/
}

/* ########################################### */
/* #####   CONTENEUR CREA & PIC & BLOG   ##### */
/* ########################################### */

#crea_pic {
	width:590px;
	float:left;
	/*background-color:#F0F;*/
}

	#crea_pic h1 {
		width:585px;
	}

#blog {
	width:285px;
	float:right;
	padding:0 0 0 7px;
	/*background-color:#FF0;*/

}

/* ############################################### */
/* #####             FILTRE MENU             ##### */
/* ############################################### */

ul#filter {
	width:100%;
	margin:5px 0;
	padding:0 0 0 55px;
	overflow:hidden;
	background:url(../img/tag_blue.png) left no-repeat;
}

	ul#filter li {
		display: inline;
	}

ul#filter a {
	float:left;
	margin:0 0.5em 0 0;
	padding:0.3em 0.7em;
	color: #F0F0F0;
	font-weight: bold;
	background-color:#222;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
}

	ul#filter a:hover, ul#filter a.current {
		color:#F0F0F0;
		background-color:#3ac2ef;
	}
	
/* ############################################### */
/* #####   AFFICHE CREA & PIC & BLOG & ICON  ##### */
/* ############################################### */

ul.crea, ul.pic, ul.post, ul.pic_large {
	list-style:none;
	margin:0 0 10px;
	overflow:hidden;
}

/* #############   CREA  ############# */

	/*Fix Staircase effect on IE6*/
	ul.crea li, ul.pic li, ul.pic_large li {
		display:inline;
	}
	
	/* #############   CAPTION CONTENEUR  ############# */
	
	ul.crea li div.caption_conteneur {
		position:relative;
		overflow:hidden;
		width:280px;
		height:108px;
		margin:0 5px 5px 0;
		float:left;
		border:5px solid #222;
		cursor:pointer;
	}

		ul.crea li:hover div.caption_conteneur{
			border:5px solid #3ac2ef;
		}
	
	/* #############   CAPTION  ############# */
	ul.crea li div.caption {
		position:absolute;
		bottom:-42px; /*Hauteur du caption en negative de sorte qu'il soit pas visible */
		left:0px;
		background:#222;
		height:70px;
		width:280px;
		opacity:.9;
	}
	
		ul.crea li div.caption h2 {
			padding:1px 3px;
			text-decoration:none;
			color:#F0F0F0;
		}

		ul.crea li div.caption a {
			color:#f0f0f0;
		}

			ul.crea li div.caption a:hover{
				border-bottom:1px dotted #F0F0F0;
			}

	ul.crea p.info {
		color:#F0F0F0;
		padding:2px 5px 1px 3px;
	}
		
/* #############   PIC  ############# */

	ul.pic li a {
		width:54px;
		height:54px;
		margin:0 5px 5px 0;
		float:left;
	}
	
	/* ######  PIC IMG BORDER  ###### */
	ul.pic li a img {
		border:5px solid #222;
	}
	
		ul.pic li a img.active {
			border:5px solid #3ac2ef;
		}
	
/* #############   ICON  ############# */

ul.icon {
	margin:2px 0 0 0;
	font-size:1.1em;
	list-style:none;
	width:100%;
}

	ul.icon li a {border-bottom:1px dotted #222;}
	ul.icon li a:hover {border-bottom:none;}
	
	ul.icon li {
		float:left;
		width:50%;
		margin:2px 0;
	}

	ul.icon li a img {
		border:none;
		float:left;
		margin:0 5px 0 0;
	}
	
	ul.icon .double {
		width:100%;
	}

		
/* #############   POST  ############# */

ul.post li {
	background-color:#222;
	margin:0 0 5px;
	padding:5px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	cursor:pointer;
}

	ul.post li:hover {
		background:#3ac2ef url(../img/arrow-right-black.png) right no-repeat;
	}

	ul.post p.info {
		color:#666;
	}

	ul.post li a {
		color:#F0F0F0;
	}

	ul.post li a:hover {
		border-bottom:1px dotted #222;
	}
	
/* ########################## */
/* #####      CREA      ##### */
/* ########################## */

#crea {
	width:100%;
	overflow:hidden;
}

#crea_img {
	width:600px;
	overflow:hidden;
	float:left;
	border:5px solid #222;
	background-color:#222;
	padding:0; margin:0;
}

#crea .info_file {
	color:#888; 
	font-size:1em;
}

#crea_img_slider {
	width:100%;
}

	#crea_img_slider ul {
		list-style:none;
	}
	
		#crea_img_slider ul li {
			height:310px;
			overflow:hidden;
		}
	
ol#controls{
	margin:5px 0 0 0;
	float:right;
	list-style:none;
}
		
	ol#controls li{
		float:left;
	}
		
	ol#controls li a{
		float:left;
		margin:0 0 0 5px;
		padding:0 6px;
		background:#3ac2ef;
		color:#F0F0F0;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
	}
		
	ol#controls li.current a{
		background:#F0F0F0;
		color:#3ac2ef;
	}
		
	ol#controls li a:focus {outline:none;}

#crea_info {
	width:260px;
	float:right;
}

	#crea_info h1 {
		font-family:cambria,serif;
		text-transform:none;
		font-size:2.3em;
		word-spacing:normal;
		line-height:normal;
		letter-spacing:-1px;
		border:none;
		margin:0 0 3px 0;
	}
	
	#crea_info h2 {
		color:#3ac2ef;
	}
	
	#crea_info p {
		color:#F0F0F0;
	}
	
	#crea_info p.date {
		color:#666;
		font-size:1.1em;
	}

.crea_info_contenu {
	background-color:#222;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	padding:2px 5px 10px;
	margin:10px 0;
}

	.crea_info_contenu a {
		color:#F0F0F0;
		border-bottom:1px dotted #F0F0F0;
	}
	
		.crea_info_contenu a:hover {
			color:#3ac2ef;
			border-bottom:none;
		}

.file {
	list-style:none;
}

#crea_next_prev {
	margin:30px 0;
}

	#crea_next_prev p {
		text-align:center;
	}

/* ########################## */
/* #####    CONCTACT    ##### */
/* ########################## */

#divcontact {
	width:100%;
	overflow:hidden;
}

#contact_form {
	width:600px;
	float:left;
	padding:8px;
	background-color:#222;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	color:#F0F0F0;
	overflow:hidden;
}

	#contact_form .dispo {
		margin:5px 0 10px;
		padding:2px 0 2px 30px;
		background:url(../img/dispo.png) left no-repeat;
		font-size:1.2em;
	}
	
	#contact_form .success {
		font-size:1.2em;
		color:#3ac2ef;
		background:url(../img/tick.png) top left no-repeat;
		padding-left:20px;
		line-height:normal;
	}
	
	#contact_form .error {
		font-size:1.2em;
		color:#C00;
		background:url(../img/cross.png) top left no-repeat;
		padding-left:20px;
		line-height:normal;
	}

	#contact_form #lform {
		width:296px;
		float:left;
	}
	
	#contact_form #rform {
		width:296px;
		float:right;
	}
	
	#contact_form form label {
		font-size:1.1em;
		display:block;
		width: 100%;
		display: block;
	}
	
	#contact_form input, #contact_form textarea {
		font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
		font-size:1.1em;
		padding:3px 2px;
	}
	
	#contact_form form input{
		margin:2px 0;
		width:288px;
	}
	
	#contact_form textarea {
		width:594px;
		height:100px;
		overflow:auto;
	}
	
	#contact_form .submit {
		width:600px;
		margin:5px 0;
		padding:5px 0 6px;
		color:#222;	
		font-weight:bold;
		background-color:#CCC;
		border:none;
		-moz-border-radius-bottomright:5px;
		-moz-border-radius-bottomleft:5px;
		-webkit-border-radius-bottomright:5px;
		-webkit-border-radius-bottomleft:5px;
	}
	
	#contact_form .fluide {
		width:592px;
	}
	
	.oblig {
		font-size:0.8em;
		color:#666;
	}

#contact_info {
	width:260px;
	float:right;
}

#contact_info p {
	font-size:1.1em;
	margin:0 0 5px 5px;
}

	.gsm {
		padding:0 0 0 25px;
		background:url(../img/gsm.png) left no-repeat;
	}
	
	.mail {
		padding:0 0 0 25px;
		background:url(../img/mail.png) left no-repeat;
	}
	
	.maison {
		padding:0 0 0 25px;
		background:url(../img/home.png) left no-repeat;
	}


/* ########################## */
/* #####     A PROPOS   ##### */
/* ########################## */

#apropos {
	overflow:hidden;
}

#apropos_content a {border-bottom:1px dotted #222;}
#apropos_content a:hover {border-bottom:none;}

#apropos_content {
	width:640px;
	float:left;
}

#skilz {
	overflow:hidden;
	margin:6px 0 15px 0;
	}

	ul#langage {
		list-style:none;
		width:245px;
		float:left;
	}
	
		ul#langage li, ul#progs li {
			background:url(../img/tick.png) left no-repeat;
			padding:0 0 0 20px;
			font-weight:bold;
		}
	
	ul#progs {
		list-style:none;
		width:245px;
		float:right;
	}

	#apropos_content p {
		margin:0 0 10px 0;
	}

	#apropos_content .first, #apropos_content .intro {margin:4px 0 15px 0;}

	#apropos_content .left {
		width:140px;
		float:left;
	}
	
	#apropos_content .right {
		font-size:1.2em;
		text-align:justify;
		width:500px;
		float:left;
		margin-bottom:5px;
	}
	
	#apropos_content .intro {
		text-align:left;
		font-weight:bold;
		word-spacing:normal;
	}
	
	#apropos_content .clear {
		clear:both;
	}
	
#apropos_sidebar {
	width:230px;
	float:right;
}

/* ########################## */
/* #####     FOOTER     ##### */
/* ########################## */

/* Pour que le footer soit tjs en bas de page, mettre la valeur negative en margin-bottom page */
#footer, .push {height: 100px;}

#footer {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	width:100%;
	background:#222 url(../img/footer_bg.jpg);
	font-size:10px;
	color:#666;
}

#footer_conteneur {
	width:880px;
	padding:35px 15px 0;
	margin:0 auto 0;
	overflow:hidden;
}

	#footer .copy {
		width:620px;
		float:left;
		text-transform:uppercase;
	}

	#footer p.codebar {
		width:240px;
		margin:2px 0 0;
		float:right;
	}

	#footer a {
		color:#888;
	}

		#footer a:hover {
			color:#CCC;
		}
		
#erreur h2 {
	text-align:center;
	margin-top:100px;
}

/*class global*/

.entete {
	color:#3ac2ef;
}
.valide {
	background:url(../img/tick.png) top left no-repeat;
	padding-left:15px;
}

.bouton {
	padding:5px 10px 6px;
	font-size:1.2em;
	font-weight:bold;
	color:#F0F0F0;
	text-decoration:none;	
	background-color:#222;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	/*-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);*/
}

	.bouton:hover {
		text-decoration:none;
		color:#3ac2ef;
	}
	
.cat {
	font-size:1.1em;
	font-weight:bold;
	background-color:#3ac2ef;
	padding:2px 5px 1px 3px;
	display:inline;
	color:#F0F0F0;
	-moz-border-radius-bottomright:6px;
	-moz-border-radius-topright:6px;
	-webkit-border-radius-bottomright:6px;
	-webkit-border-radius-topright:6px;
}

.cv {
	width:90%;
	margin:5px auto;
	background:#222;
	padding:6px 0;
	border:none;
	font-size:1.3em;
	font-weight:bold;
	text-align:center;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
}

.cv a {
	color:#FAFAFA;
}

.cv a:hover {
	color:#3ac2ef;
}