* {
	margin: 0;
	padding: 0;
	}
	
body {
	background-color: #fcfaf2;
	background-repeat: repeat-x;
	height: 1000px;
	font-family: verdana;
	font-size: 11px;
	}
	
a {
	color: #62443d;
	text-decoration: underline;
	}
	
a:hover {
	color: #621300;
	}
	
#papa {
	width: 900px;
	margin: auto;
	}
	
.clear {
	clear:both;
	}
	
/* En-tête */

#header {
	width: 900px;
}

#logo {
	width: 531px;
	float:left;
	}

#logo img {
	padding: 17px 0 0 0;
	border: none;
}

#menu {
	width: 369px;
	float:left;
	}
	
h1 {
	font-size: 14px;
	color: #f5e7cd;
	font-weight: lighter;
	margin: 10px 25px 10px 0;
	text-align: right;
	}
	
#menu a {
	font-size: 14px;
	color: #f5e7cd;
	text-decoration: none;
	font-weight: bold;
	display:block;
	float:left;
	height:24px;
	padding: 3px 15px;
	}
	
#menu_elements {
	background-image: url(images/menu.gif);
	background-repeat: no-repeat;
	background-color: #62443d;
	width: 370px;
	height:30px;
	}
	
#menu_elements a:link, #menu_elements a:visited, #menu_elements a:active {
	background-color: #62443d;
}

#menu_elements a:hover {
	background-color: #c9b280;
	color: #62443d;
}
	
/* book */

#book{
	width: 900px;
	height: 410px;
	padding-top: 10px;
	}
	
#thumb {
	width:450px;
	padding: 18px 0 0 50px;
	float:left;
	}
	
#description {
	width: 370px;
	padding: 18px 0 0 30px;
	float: left;
	}
	
#description h3 {
	color: #fff;
	font-size: 24px;
	font-weight: lighter;
	}
	
#description a:link, #description a:visited, #description a:active {
	color: #eeeb97;
	font-size: 11px;
	font-style: italic;
	}
	
#description a:hover {
	color: #eee733;
	}
	
#description p {
	padding: 30px 0 0 0;
	color: #fff;
	}
	
/* navigation du book */

#navigation {
	width: 350px;
	padding: 18px 0 0 50px;
	float: left;
	}
	
#navigation a {
	width: 41px;
	height: 16px;
	display: block;
	color: #62443d;
	padding: 13px 0;
	text-align: center;
	font-size: 18px;
	}
	
#navigation ul {
    list-style-type: none;
}

#navigation li {
	float: left;
	padding-right: 6px;
	}
	
#navigation a:link, #navigation a:visited, #navigation a:active {
	text-decoration:none;
	}
	
.precedent a:link, .precedent a:visited, .precedent a:active {
	background-image: url(images/precedent.png);
	}
	
.precedent a:hover {
	background-image: url(images/precedent-actif.png);
	}
	
.bouton a:link, .bouton a:visited, .bouton a:active {
	background-image: url(images/bouton.png);
	}
	
.bouton a:hover {
	background-image: url(images/bouton-actif.png);
	margin-top: 1px;
	}
	
.suivant a:link, .suivant a:visited, .suivant a:active {
	background-image: url(images/suivant.png);
	}
	
.suivant a:hover {
	background-image: url(images/suivant-actif.png);
	}
	
/* intro */

#main {
	padding: 0 0 0 0;
	width: 900px
	}

.intro{
	float: left;
	}
	
.intro strong {
	color: #62443D;
}
	
.intro h2 {
	font-size: 18px;
	font-family: verdana;
	font-weight: lighter;
	color: #62443d;
	padding-bottom: 15px;
	}
	
.contenu {
	background-image: url(images/deco_texte.gif);
	background-repeat: no-repeat;
	padding: 16px 20px 0 50px;
	width: 390px;
}

.contenu p {
		padding-bottom: 20px;
		}
		
.item {
	background-repeat: no-repeat;
	min-height: 50px;
	padding: 0 0 0 70px;
	}
	
/* compétences */

#skills {
	background-image: url(images/deco_texte.gif);
	background-repeat: no-repeat;
	padding: 16px 0 0 50px;
	width: 390px;
	}
	
	
#skills h3  {
	color: #62443d;
	font-size: 12px;
	}
	
#skills h4 {
	font-weight:lighter;
	font-size: 11px;
	}
	
#graphique {
		background-image: url(images/ico1.png);
}

#html{
		background-image: url(images/ico2.png);
}

#social {
		background-image: url(images/ico3.png);
}

#php {
		background-image: url(images/ico4.png);
}

#ajax{
		background-image: url(images/ico5.png);
}

#trad {
		background-image: url(images/ico6.png);
}

#ref {
		background-image: url(images/ico7.png);
}

#identite {
		background-image: url(images/ico8.png);
}

/* contact */

#contact_intro {
	background-image: url(images/contact_intro.png);
	background-repeat: no-repeat;
	height: 600px;
	width: 184px;
	margin-left: 45px;
	padding: 0 20px;
	float:left;
}

#contact_intro h3 {
	font-size: 14px;
	border-bottom: 1px solid #c0c0c0;
	display:block;
	width: 170px;
	margin-bottom: 10px;
	padding-bottom: 5px;
	padding-top: 5px;
	}
	
.adresse {
	padding-top: 150px;
	}
	
#formulaire {
	background-color: #d3ceaa;
	width: 609px;
	height: 543px;
	margin-top: 27px;
	padding-left: 20px;
	padding-top: 10px;
	float:left;
}

.calage {
    width: 200px;
    color: #5b5a58 ;
    font-weight: bold;
	font-size: 12px;
}

fieldset {
    border: 1px solid #d3ceaa;
}

legend {
    font-family: "Times New Roman", Times, serif;
        font-size: 16px;
        font-weight: bold;
        color: #000066;
        margin-left: 50px;
}

.text {
    font-family: Verdana;
    font-size: 12px;
    color: #5b5a58;
    background-color: #fbf7e4;
    border: 1px solid #c6c6c6;
}

input.text:focus {
    color: #fbf7e4;
    background-color: #5b5a58;
}

textarea.text:focus {
    color: #fbf7e4;
    background-color: #5b5a58;
}

#envoi, #effac {
	margin: 20px 0 0 0;
}

#btn {
	width: 60px;
	margin: auto;
	display: block;
}

#error, #sent {
	background-repeat: no-repeat;
	margin-bottom: 10px;
	margin-top: 2px;
	min-height: 48px;
	padding: 10px 10px 10px 50px;
	width: 515px;
	}
	
#error {
	background-image: url(images/warning.png);
	background-color: #f6dc97;
	border: 1px solid #994f39;
	}

#sent {
	background-image: url(images/check.png);
	background-color: #f7fde7;
	border: 1px solid #01a00c;
	}


/* Portfolio */

#portfolio_calage {
	height: 100px;
	width: 900px
}
			

.boxgrid h3{ 
	margin: 10px 10px 0 10px; 
	color:#FFF; 
	font:18pt Arial, sans-serif; 
	letter-spacing:-1px; 
	font-weight: bold;  
}
.boxgrid a{ 
	color:#C8DCE5; 
	display:block; 
	padding-top: 10px; 
	text-decoration: underline; 
}
.boxgrid em {
	display:block;
	padding-bottom: 10px;
}
			
.boxgrid{ 
	width: 426px; 
	height: 260px; 
	margin:10px; 
	float:left; 
	background:#161613; 
	border: solid 2px #8399AF; 
	overflow: hidden; 
	position: relative; 
}
.boxgrid img{ 
	position: absolute; 
	top: 0; 
	left: 0; 
	border: 0; 
}
.boxgrid p{ 
	padding: 0 100px 10px 10px; 
	color:#afafaf; 
	font-weight:bold; 
	font:10pt "Lucida Grande", Arial, sans-serif; 
}
				
.boxcaption{ 
	float: left; 
	position: absolute; 
	background: #000; 
	height: 100px; 
	width: 100%; 
	opacity: .8; 
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
 	.captionfull .boxcaption {
		top: 260;
 		left: 0;
 	}
 	.caption .boxcaption {
 		top: 220;
 		left: 0;
 	}
	

/** 
 * Slideshow style rules.
 */
 
#slideshow {
	margin:0 auto;
	width:850px;
	height:263px;
}
#slideshow #slidesContainer {
  margin:0 auto;
  width:840px;
  height:362px;
  overflow:auto;
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:600px;
  height:263px;
}

/** 
 * Slideshow controls style rules.
 */
 
.control {
  width:64px;
  height:64px;
  cursor: pointer;
  position: absolute;
}
#leftControl {
	width:64px;
	height:64px;
	background:transparent url(book/img/left_arrow.png) no-repeat;
	top: 192px;
	left: 507px;
}
#rightControl {
	width:64px;
	height:64px;
	background: url(book/img/right_arrow.png) no-repeat;
	top: 192px;
	left: 731px;
}

/** 
 * Style rules for Demo page
 */


.slide h2, .slide p {
  margin:15px;
  color: #fff;
}
.slide h2 {
  font:italic 24px Georgia, "Times New Roman", Times, serif;
  color: #fff;
  letter-spacing:-1px;
  margin-bottom: 0;
}
.slide img {
  float:left;
  border: 1px solid #fff;
  margin-right: 45px;
}

.slide p {
	width: 830px;
}

.slide a {
	color: #EFEA98;
	text-decoration: none;
}

.slide a:hover {
	color: #EFEA98;
	text-decoration: underline;
}