/* =====================================
======     Julien BLEZE-PASCAU   =====
======       Copyrights 2010       =====
====== http://www.julien-bleze.fr =====
======================================== */
 
/* Reset
===================== */
 
* {
    margin: 0;
    padding: 0;
}
 
a img {
    border: none;
}

/* Structure
===================== */
 
#conteneur {
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
}
 
	#header {
		height: 288px;
		width: 960px;
	}
	
		#bandeau{
			background-image: url(../img/bandeau.png);
			background-repeat:no-repeat;
		}
		
			.class_bandeau {
				background-image: url(../img/bandeau.png);
				background-repeat:no-repeat;
				width: 960px;
				height: 288px;
			}
			
			#a_bandeau {
				display:block;
				position:absolute;
				width: 960px;
				height: 288px;
				outline-style:none;
			}
	 
	#centre {
		overflow: hidden;
		width: 960px;
		margin-top:-50px;
	}
	
	
		#haut  {
			background-image: url(../img/contenu_haut.png);
			background-repeat:no-repeat;
			position:relative;			
			width: 960px;
			height:31px;
		}
		
		#cadre  {
			position:absolute;
			width: 960px;
		}
		
			#titre_presentation  {
				background-image: url(../img/titre_presentation.png);
				width: 770px;
				height:21px;
			}
				.sous_titre_presentation  {
					color:#40afff;
					font-size:16px;
					font-weight:bold;
					font-style:italic;
				}
			
			#titre_portfolio  {
				background-image: url(../img/titre_portfolio.png);
				width: 770px;
				height:21px;
			}
				.sous_titre_portfolio  {
					color:#a10808;
					font-size:16px;
					font-weight:bold;
					font-style:italic;
				}
			
			#titre_parcours  {
				background-image: url(../img/titre_parcours.png);
				width: 770px;
				height:21px;
			}
				.sous_titre_parcours  {
					color:#d75813;
					font-size:16px;
					font-weight:bold;
					font-style:italic;
				}
			
			#titre_competences  {
				background-image: url(../img/titre_competences.png);
				width: 770px;
				height:21px;
			}
				.sous_titre_competences  {
					color:#059549;
					font-size:16px;
					font-weight:bold;
					font-style:italic;
				}
			
			#titre_experiences  {
				background-image: url(../img/titre_experiences.png);
				width: 770px;
				height:21px;
			}
				.sous_titre_experiences  {
					background-image:url(../img/puce.png);
					background-repeat:no-repeat;
					padding-left:25px;
					color:#eab20a;
					font-size:14px;
					font-weight:bold;
					font-variant:small-caps;
				}
				.sous_titre_experiences2  {
					color:#eab20a;
					font-size:14px;
					font-weight:bold;
				}
				h3  {
					color:#fec311;
					font-size:16px;
					font-weight:bold;
					font-style:italic;
				}
				.sous_titre_porfolio  {
					color:#a10808;
					font-size:16px;
					font-weight:bold;
					font-style:italic;
					float:left;
					padding:5px 30px 20px 10px;
				}
				.image{
					float:left;
				}
				#cadre_portfolio {
					width:780px;
					height:120px;
				}
			
							
			#titre_contact  {
				background-image: url(../img/titre_contact.png);
				width: 770px;
				height:21px;
			}
				.sous_titre_contact  {
					color:#462c77;
					font-size:16px;
					font-weight:bold;
					font-style:italic;
				}

			
			
			
			
			
			
			.onglet_actif{
				margin-left:815px !important;
			}

			#presentation  {
				background-image: url(../img/presentation.png);
				position:absolute;
				margin-left:750px;
				width: 118px;
				height:100px;
				z-index:6;
			}
				#a_presentation {
					display:block;
					position:absolute;
					width: 118px;
					height: 100px;
					outline-style:none;
				}

			#portfolio  {
				background-image: url(../img/portfolio.png);
				position:absolute;
				margin-top:85px;
				margin-left:750px;
				width: 118px;
				height:100px;
				z-index:5;
			}
				#a_portfolio {
					display:block;
					position:absolute;
					width: 118px;
					height: 100px;
					outline-style:none;
				}
				
			#experiences  {
				background-image: url(../img/experiences.png);
				position:absolute;
				margin-top:170px;
				margin-left:750px;
				width: 118px;
				height:100px;
				z-index:4;
			}
				#a_experiences {
					display:block;
					position:absolute;
					width: 118px;
					height: 100px;
					outline-style:none;
				}
			
			#competences  {
				background-image: url(../img/competences.png);
				position:absolute;
				margin-top:255px;
				margin-left:750px;
				width: 118px;
				height:100px;
				z-index:3;
			}
				#a_competences {
					display:block;
					position:absolute;
					width: 118px;
					height: 100px;
					outline-style:none;
				}
				
			#parcours  {
				background-image: url(../img/parcours.png);
				position:absolute;
				margin-top:340px;
				margin-left:750px;
				width: 118px;
				height:100px;
				z-index:2;
			}
				#a_parcours {
					display:block;
					position:absolute;
					width: 118px;
					height: 100px;
					outline-style:none;
				}

			#contact  {
				background-image: url(../img/contact.png);
				position:absolute;
				margin-top:425px;
				margin-left:750px;
				width: 118px;
				height:100px;
				z-index:1;
			}
				#a_contact {
					display:block;
					position:absolute;
					width: 118px;
					height: 100px;
					outline-style:none;
				}
			
			#contenu  {
				background-image: url(../img/contenu.png);
				background-repeat:repeat-y;			
				position:relative;
				color:#000;
				width: 750px;
				min-height:550px;
				z-index:10;
				padding:0 50px 0 35px;
			}
			
			#texte  {
				width: 750px;
				padding:25px 0 0 5px;
			}
			
			#travaux  {
				float:left;
				height:150px;
				width: 350px;
				margin-right:48px;
				border:1px solid #036;
			}
			
			#cloud  {
				float:left;
				width: 350px;
			}

		#bas  {
			background-image: url(../img/contenu_bas.png);
			background-repeat:no-repeat;			
			position:relative;
			width: 960px;
			height:36px;
		}
		 
	#footer {
		height: 20px;
		width: 960px;
	}
	 
/* Polices, titres et liens
===================== */
 
body {
	background: #6bbbff url(../img/bg.png);
	background-position:center top;
	background-repeat:no-repeat;
	background-attachment:fixed;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
}

h1 { }
h1 a { }
h1 a:hover { }
 
h2 { }
h2 a { }
h2 a:hover { }
 
a:link, a:active, a:visited { text-decoration: none; }
a:hover { text-decoration: underline; }
 
 
/* Form
===================== */
 
input { }
input[type=submit] { }
input[type=button] { }
input[type=checkbox] { }
input[type=radio] { }
input[type=text] { }
select { }
textarea { }
label { }
fieldset { }
 
 
/* Divers
===================== */
 
.float_gauche { float: left; }
.float_droite { float: right; }
.clear { clear: both; }
 
/* Vos instructions ...
===================== */





/* Contact ...
===================== */
#commentForm { width: 500px; }
#commentForm label { width: 250px; }
#commentForm label.error, #commentForm input.submit { margin-left: 253px; }
#signupForm { width: 670px; }
#signupForm label.error {
	margin-left: 10px;
	width: auto;
	display: inline;
}
#newsletter_topics label.error {
	display: none;
	margin-left: 103px;
}



/* Compétences
===================== */
#cadre0 {
	float:left;
	width:120px;
}
#cadre1 {
	float:left;
	width:14px;
	height:14px;
	background-color:#d4ffd9;
	margin-left:10px;
	/*border:1px solid #000;*/
}
#cadre2 {
	float:left;
	width:14px;
	height:14px;
	background-color:#a7ffb1;
	/*border:1px solid #000;*/
}
#cadre3 {
	float:left;	
	width:14px;
	height:14px;
	background-color:#78ec86;
	/*border:1px solid #000;*/
}
#cadre4 {
	float:left;
	width:14px;
	height:14px;
	background-color:#36be47;
	/*border:1px solid #000;*/
}
#cadre5 {
	float:left;
	width:14px;
	height:14px;
	background-color:#227b2d;
	/*border:1px solid #000;*/
}

#cadre_gauche{
	float:left;
	width:350px;
	margin-left:100px;
	margin-top:10px;
}

#cadre_droite{
	float:left;
	margin-top:10px;
}



/* Accordéons
===================== */
.accordion {
	width: 750px;
}
.accordion h3 {
	background: url(../img/arrow-square.gif) no-repeat right -51px;
	padding: 7px 15px;
	margin: 0;
	cursor: pointer;
}
.accordion h3:hover {
	background-color: #fffdc3;
}
.accordion h3.active {
	background-position: right 5px;
}
.accordion p {
	margin: 0;
	padding: 10px 15px 20px;
}



/* Bordure images portfolio
============================= */
.cadre_rouge {	
	border:2px solid #a10808;
}