/*
Theme Name: 2011
Author: Jean Pépin
Author URI: http://www.jeanpepin.fr/
Description: 
Version: 0.1
*/


@font-face {
      	font-family: "Century Gothic";
      	src: url("http://www.jeanpepin.fr/fonts/Century_Gothic.ttf");
    }

body{
	position:relative;
	margin:0;
	min-width:815px;
	background: white;
	min-height: 400px;
	/*font-family: "Century Gothic", "Lucida Sans Unicode", "Lucida Grande", arial;*/
	font-family: "Helvetica";
	background: transparent url(img/conteneur_bg.png) repeat fixed 0px 0px;
	border-top: 1px solid black;
	}

h1{
	position: absolute;
	margin:20px 0 0 0;
	padding:2px 10px;
	background-color: white;
	font-weight:normal;
	/*font-family: "Century Gothic", "Lucida Sans Unicode", "Lucida Grande", arial;*/
	font-family: "InterstateLightCondensedWeb";
	/*font-family: "Bookman Old Style";*/
	color:#000000;
	font-size: 30px;
	text-transform: uppercase;
}

h2{
	position: absolute;
	margin:60px 0 0 0;
	padding:2px 10px;
	background-color: white;
	font-weight:normal;
	/*font-family: "Century Gothic", "Lucida Sans Unicode", "Lucida Grande", arial;*/
	/*font-family: "Palatino";*/
	/*font-family: "Copperplate";*/
	color:#000000;
	font-size: 20px;
	/*text-transform: uppercase;*/
}

h3{
	font-family: "InterstateBoldCondensedWeb";
	/*font-family: "Bookman Old Style";*/
	text-transform: uppercase;
}

a{
	color:black;
	text-decoration:none;
	outline:none;
	}

a:hover{
	text-decoration:none;
	}

img{
	border:none;
	}

.clear{
	clear:both;
	}

#top{
	width:100%;
	display: none;
	background-color: #000000;
	overflow: hidden;
	color: #ffffff;
}

#top_content{
	width: 1200px;
	margin: 10px auto;
}

#top_content h3{
	margin:5px 0 15px 10px;
	padding:0;
	font-size:16px;
}

#top_content h4{
	margin:0 0 5px 10px;
	padding:0;
	font-size:16px;
}

#top_content p{
	font-size: 12px;
	margin: 4px 0 0 10px;
	padding: 0;
}

#mail_contact{
	float:left;
}

#top_content a{
	float: left;
	color: white;
	text-decoration:underline;
}


#top_content a:hover{
	text-decoration:none;
}

#top_content img{
	width:16px;
	margin : 3px 0 0 10px;
}


#header{
	display:block;
	width:100%;
	height:100px;
	margin: 0 0 100px 0;
	color:white;
	}

#contacts{
	float:right;
}

#contacts-center{
	float:left;
	background-color:black;
	cursor: pointer;
}

#contacts-left{
	float:left;
	background-image:url(img/contact-left.png);
	display:block;
	width:23px;
	height:23px;
}

#contacts-right{
	float:left;
	background-image:url(img/contact-right.png);
	display:block;
	width:23px;
	height:23px;
}

#contacts p{
	float:left;
	font-size:20px;
	margin:0px 10px 0px 10px;
}


#conteneur{
	width:1200px;
	height:auto;
	margin:auto;
	}


#contenu{
	width:990px;
	height:auto;
	margin:auto;
	}

#contenu .menu_list .menu li{
	list-style-type:circle;
	}


/************* PORTFOLIO **************/
/* Présentation */
#presentation{
	margin: 0;
}

#presentation h3{
	margin:0;
	padding:0;
	font-size:16px;
	/*font-weight:normal;*/
}

#presentation a{
	text-decoration:underline;
}

#presentation a:hover{
	text-decoration:none;
}

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

#presentation ul {
	list-style-image:url(img/fleche.png);
	} 

#presentation li {
	margin : 5px 0 0 0;
	} 

#presentation-gauche{
	float:left;
	margin: 0 10px 0 0;
	width: 475px;
	height:100%;
}

#presentation-centre{
	float:left;
	margin: 0;
	width: 0;
	height:100%;
}

#presentation-droite{
	float:left;
	margin: 0 0 0 10px;
	width: 495px;
	height:100%;
}

#competences{
	float:left;
	margin: 0 10px 0 0;
	width: 218px;
}

/*#contacts{
	float:left;
	margin: 0 0 0 10px;
	width: 217px;
}*/

.presentation-blocs{
	background-color:#fff;
	padding:10px;
	font-size:12px;
}

/* Tweet */

#tweet{
	float:left;
	display:block;
	position:relative;
	margin: 0 0 0 10px;
	width: 217px;
	}

#tweet h4{
	margin:0;
	padding:0;
	font-size:12px;
	color:black;
	}

#tweet h3{
	width:100%;
	float:left;
	height:19px;
	overflow: hidden;
	}

#tweet_bird{
	width:30px;
	bottom: 0px;
	float:right;
	position: relative;
	}

#load{
	width:31px;
	margin:20px 0 0 93px; 
}

#tweet a{
	color:black;
	text-decoration:underline;
	}

#tweet a:hover{
	color:black;
	text-decoration:none;
	}

#tweet a:hover #tweet_bird{
	bottom: 19px;
	}

#tweet li{
	list-style:none;
	}

#tweet .date{
	float:right;
        margin:5px 0 0 0;
	font-size:9px;
	}

/* Projets */

.hover_img:hover{
	opacity:0.9;	
}

.projet {
	margin:100px 0 0 0;
}
.colonne_gauche {
	float:left;
	width:700px;
	height:300px;
	overflow:hidden;
	border: 5px solid white;
	background-color: white;
	}

.colonne_gauche img{
	width:100%;
	opacity:1;	
	}


.colonne_droite {
	float:right;
	display:block;
	width:260px;
	min-height:300px;	
	}

.post_top {
	background-color:#fff;
	padding:10px;
}

.post_bottom {
	background-color:#fff;
	margin:20px 0 0 0;
	padding:10px;
}

.post_bottom a{
	color:black;
	text-decoration:underline;
	}

.post_bottom a:hover{
	text-decoration:none;
	}

.colonne_droite h3{
	margin:0;
	padding:0;
	font-size:16px;
	}

.date {
	font-size:10px;
	font-style:italic;
	}

.description {
	font-size:12px;
	}

.missions {
	font-size:11px;
	}

.missions ul {
	list-style-image:url(img/fleche.png);
	} 

.missions li {
	margin : 5px 0 0 0;
	} 

.link {
	font-size:12px;
	}

.link a {
	text-decoration:underline;
	}

.link a:hover {
	text-decoration:none;
	}

/* Footer */
#footer{
	margin: 100px 0 0 0;
	padding: 5px 0;
	display: block;
	position: relative;
	background-color: black;
      	color: white;
	width:100%;
	height: auto;
}

#footer_content{
	width: 1200px;
	margin: auto;
}

#footer_content h3{
	margin:5px 0 15px 10px;
	padding:0;
	font-size:16px;
}

#footer_content h4{
	margin:0 0 5px 10px;
	padding:0;
	font-size:16px;
}

#footer_content p{
	font-size: 12px;
	margin: 0 0 0 10px;
	padding: 0;
}

#footer_content a{
	color: white;
	text-decoration:underline;
}


#footer_content a:hover{
	text-decoration:none;
}

#coupains{
}

.blocs_coupains{
	margin: 10px 0 0 0;
	float: left;	
	position: relative;
	height: 100%;
}

#developpeurs{
	width:360px;
	padding: 10px 30px 10px 0;
}

#graphistes{
	width:338px;
	padding: 10px 30px 10px 20px;
	border-left: 1px solid white;
	border-right: 1px solid white;
}

#autres{
	width:370px;
	padding: 10px 0 10px 20px;
}