/****************************
********* GENERAL ***********
*****************************/

html{
	height:100%;
}
body{
	height:100%;
	margin:0;
	color: white;
	font-family: verdana, arial, sans-serif;
	background:url(../design/background.jpg) bottom center fixed repeat-x #034062;
}
#principal{background:url(../design/etoile.png) repeat-x transparent;}
.clear{clear:both;}
a{text-decoration: none;}
a img{border:none;}

h2{
	font-family: "Josefin Sans", sans-serif;
	text-align: center;
	margin:0;
	font-size: 2em;
	font-weight: bold;
	text-transform:capitalize;
}
.aspect_ratio iframe{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; top: 0;
}
.aspect_ratio{
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 51%;
}


/****************************
********* STRUCTURE *********
*****************************/

.logo{
	float:left;
	margin:0 0 0 40px;
}
.resume, .contact{float:right; margin:40px 70px 0 0;}

nav{float:right;}
nav li{
	display:inline-block;
	*zoom:1;
	*display:inline;
}

#list{margin-top:-10px;}
#top_list{
	background: url(../design/white_pixel.gif) repeat-x center transparent;
	height:30px;
	padding: 0 10px;
	margin: 0 20px;
}
#top_list ul{background-color:#033f62; padding:0 10px; margin:0 50px 0 0; float:right; }
#top_list li{display: inline-block; *zoom:1; *display:inline; height:25px; width:25px;cursor:pointer;}
#top_list li.site{background: url(../design/filter_blue.png) center no-repeat transparent;}
#top_list li.video{background: url(../design/filter_purple.png) center no-repeat transparent;}
#top_list li.jeu{background: url(../design/filter_orange.png) center no-repeat transparent;}
#top_list li.graphic{background: url(../design/filter_pink.png) center no-repeat transparent;}
#top_list li.app{background: url(../design/filter_yellow.png) center no-repeat transparent;}
#top_list li.info{background: url(../design/filter_green.png) center no-repeat transparent;}

#wrap_tile{height:200px; overflow:hidden;}
#list_wrap{overflow:hidden;}
#tile_list{padding:0 0 20px 0; margin:0; border-bottom: 1px solid white; height:210px;white-space:nowrap;}
#tile_list li{
	padding:15px;
	margin:0 10px 0 10px;
	background:white;
	border-radius:20px;
	display: inline-block;
	*zoom:1;
	*display:inline;
	list-style-type: none;
	box-shadow: 5px 5px 5px black;
	border: solid 3px white;
}
/*#tile_list li:hover{box-shadow: 0 0 0 black; margin: 0 8px 0 12px;}*/
#tile_list li.tri_graphic:hover{border: solid 3px #f50085;}
#tile_list li.tri_info:hover{border: solid 3px #2eae36;}
#tile_list li.tri_site:hover{border: solid 3px #3a9cd2;}
#tile_list li.tri_video:hover{border: solid 3px #764692;}
#tile_list li.tri_jeu:hover{border: solid 3px #ff6f29;}
#tile_list li.tri_app:hover{border: solid 3px #ffdf30;}



#tile_list li img{ max-height: 146px;}
#tile_list li a{display: block;}

#nav_left{float:left;}
#nav_right{float:right;}
#nav_right, #nav_left{
	max-height: 180px;
	-webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #222); 
}
#nav_right:hover, #nav_left:hover{
	max-height: 180px;
	margin:0 -3px 0 3px;
	-webkit-filter: drop-shadow(0 0 0 #222);
    filter: drop-shadow(0 0 0 #222); 
}


#content{
	margin:20px auto 0;
	position:relative;
}
.content_box{
	padding:20px;
	margin:20px;
	background:white;
	border-radius:20px;
	box-shadow: 5px 5px 5px black;
	color: #110151;
}
#content_left, #content_right{
	position:absolute;
}
#content_center{width:95%;margin:0 auto;}
#content_left{width:50%;left:10%;text-align:center;}
#content_right{width:20%;right:10%;}
#content_left .content_box{display:inline-block; max-width:100%; margin:0 auto;}

.content_box > *{max-width:100%;margin:0 auto;}

#top_list li a img{display:none;}

.page_separator{
	margin:0 20px;
	height:1px;
	background-color:white;
	color:white;
	border:none;
}

.infos{
	margin:20px 0 0 0;
}
.dates{
	margin-top:5px;
	font-style: italic;
	color: #778;
}
.description{
	margin: 20px 0 0 0;
	font-size:0.9em;
}




/****************************
********* CONTENT ***********
*****************************/

.hidden{display:none;}

/* Skills */

#skills{text-align: center;}
#skills .content_box{
	display:inline-block;
	*zoom:1;
	*display:inline;
}

#skills ul{
	padding:0;
	margin:0;
}
#skills li{
	display:inline-block;
	*zoom:1;
	*display:inline;
}


#skills .backBar{
	width:20px;
	height:100px;
	margin-left:15px;
	position:relative;

}
#skills .backBar .bar{
	position:absolute;
	bottom: 0;
	width:20px;
}
#skills .logoBar{
	margin:5px;
}
#skills .logoBar img{
	height:40px;
	width:40px;
}

#skills #prog .backBar{background-color:#b8edff;}
#skills #prog .backBar .bar{background-color:#66bbdd;}

#skills #languages .backBar{background-color:#f3c8ff;}
#skills #languages .backBar .bar{background-color:#cc8dff;}

#skills #os .backBar{background-color:#ffefae;}
#skills #os .backBar .bar{background-color:#ffcf4d;}

#skills #api .backBar{background-color:#fecec2;}
#skills #api .backBar .bar{background-color:#fe4549;}

#skills #software .backBar{background-color:#bdff9c;}
#skills #software .backBar .bar{background-color:#51c465;}


/* CV */

#cv{position:relative;width:1000px;margin:0 auto;}

#cv_list{
	float:left;
	width:280px;
}
#cv ul{
	list-style-type: none;
	margin:0 auto;
	padding:0;
}
#cv_list ul{width:200px;margin:0 auto;}
#cv_list li{
	cursor:pointer;
	text-align: center;
	margin:15px auto;
	border: solid 2px white;
}
#cv_list li:hover, #cv #liste li p:hover{border: solid 2px #f50085;}

#cv_content{
	float:right;
	width: 650px;
}
#cv_content h2{margin:5px auto;padding:5px 0;}
#description{
	float:left;
	width:280px;
	font-size:0.9em;
}
#description b{font-size:1em;}
#cv #liste{
	float:right;
	width: 270px;
	cursor:pointer;
}
#cv #liste li{margin:0 auto;}
#cv #liste li p{border: solid 2px white;}
#cv #description p{font-size:0.9em;}
#cv p.infos{font-weight: bold; margin:0 0 10px 0;font-size:1em;}
#cv p.dates{margin-bottom:10px;font-size:1em;}
#cv #description a{color:#4ad;}



/* -------------------------
-------- CONTACT -----------
--------------------------*/

#contact{
	width:900px;
	margin:0 auto;
	text-align: center;
}
#contact textarea{
	text-align: justify;
	width:80%;
	height:100px;
}
#contact input{
	width:400px;
	margin-bottom:10px;
}
#contact h2{
	margin-bottom:10px;
}
#contact p{margin-bottom:15px;}
#callbackMessage p{
	margin:10px auto;
}
p.green{color: #2a6;}
p.red{color: #911;}

#contact input[type=button]{
	border: solid 2px white;
	font-size: 1.1em;
	font-weight: bold;
	cursor: pointer;
}
#contact input[type=button]:hover{
	border: solid 2px #f50085;
	color: #f50085;
}
#contact input[type=button]:active{
	border: solid 2px white;
	background-color: #f50085;
	color: white;
}