* {
	margin: 0; 
	padding: 0; 
}
html {
	margin: 0; 
	padding: 0; 
	height: 100%;
}
body { 
	margin: 0; 
	padding: 0; 
	height: 100%;
	font: 62.5% "Trebuchet MS", arial, helvetica, sans-serif; /* 62.5% => 10px */
	color: #222222;	
	background: #f7f7f7 url(images/fond.jpg) repeat-x center top;
}
a {
	text-decoration: none;
	color: #000000;	
}
#imageApercu {
	position: absolute;
	border: 1px solid #cccccc;
	background: #ffffff;
	padding: 5px;
	display: none;
	color: #222222;
	text-align: center;
	z-index: 10;
}
img { 
	border: none;
}
/* ACCUEIL */
div#accueil {
	height: 950px;
	min-width: 1000px;
	background: url(images/fond_accueil.jpg) no-repeat center top;
}
	/* ACCUEIL CONTENU */	
	div#accueilConteneur {
		margin: 0 auto;
		width: 1000px;
		height: 950px;
	}
		/* ACCUEIL COLONNE DE GAUCHE */		
		div#accueilColonneGauche {
			float: left;
			width: 500px;
			height: 950px;
		}
			/* ACCUEIL TITRE */
			h1#titre {
				width: 500px;
				height: 520px;
			}
				h1#titre span {
					display: none;
				}
			/* ACCUEIL SOUS TITRE */					
			h2#sousTitre {
				width: 500px;			
				height: 430px;
				font: 1.7em "Arial Black", arial, helvetica, sans-serif;
				text-align: center;
				letter-spacing: -1px;
				line-height: 20px;
			}
		/* ACCUEIL COLONNE DE DROITE */					
		div#accueilColonneDroite {
			float: left;
			width: 500px;
			height: 950px;
		}
			/* ACCUEIL MENU */
			ul#accueilMenu {
				display: block;
				margin: 0 auto;
				padding: 0;
				width: 408px;
				height: 80px;
				list-style-type: none;
			}
				ul#accueilMenu li {
					float: left;
					margin: 0;
					padding: 0;		
					text-align: center;			
				}
					ul#accueilMenu li a {
						display: block;
						width: 136px;
						height: 65px;
						padding: 15px 0 0 0;
						text-decoration: none;
						font: bolder 1.4em arial, helvetica, sans-serif;
						color: #222222;	
						line-height: 10px;
						text-indent: -10000%;
					}
					li#accueilMenuApropos a {
						background: url(images/menu_apropos.jpg) no-repeat;
					}
					li#accueilMenuApropos a:hover {
						background-position: left bottom;
					}					
					li#accueilMenuPortfolio a {
						background: url(images/menu_portfolio.jpg) no-repeat;
					}
					li#accueilMenuPortfolio a:hover {
						background-position: left bottom;
					}					
					li#accueilMenuContact a {
						background: url(images/menu_contact.jpg) no-repeat;
					}
					li#accueilMenuContact a:hover {
						background-position: left bottom;
					}																					
			/* ACCUEIL ANIMATION */						
			div#accueilAnimation {
				position: relative;
				width: 500px;
				height: 570px;
			}
			div#bulle {
				position: absolute;
				width: 300px;
				height: 60px;
				top: 20px;
				left: 50px;
				padding: 10px;
				background: #fff;
				font-size: 1.2em;
				text-align: justify;				
			}
			/* ACCUEIL VERS APROPOS */				
			div#versApropos {
				float: left;
				width: 500px;			
				height: 300px;
			}
				div#versApropos a {
					display: block;
					height: 300px;
					/* background: url(images/vers_apropos.jpg) no-repeat; */
					outline: none;
		
				}
				/*
				div#versApropos a:hover {
					background-position: left bottom;
				}	
				*/			
					div#versApropos a span {
						display: none;
					}
/* A PROPOS */					
div#apropos {		
	height: 1150px;
	min-width: 1000px;
	background: url(images/fond_apropos.jpg) no-repeat center top;	
}
	/* A PROPOS CONTENU */	
	div#aproposConteneur {
		margin: 0 auto;
		width: 1000px;
		height: 1150px;
	}	
		/* A PROPOS TITRE */		
		h3#titreApropos {
			width: 1000px;
			height: 180px;		
		}
			h3#titreApropos span {
				display: none;
			}	
		/* A PROPOS COLONNE DE GAUCHE */						
		div#aproposColonneGauche {
			float: left;
			padding: 0 20px 0 20px;
			width: 540px;
			height: 400px;	
		}	
		div#aproposColonneGauche p {	
			font-size: 1.3em;					
			text-align: justify;
			line-height: 22px;
			text-indent: 20px;
			margin: 0 0 12px 0;	
		}			
		
		/* A PROPOS COLONNE DE DOITE */				
		div#aproposColonneDroite {
			float: left;
			padding: 26px 100px 0 100px;	
			width: 220px;
			height: 363px;		
			font-size: 1.2em;					
			line-height: 14px;
		}
		/* A PROPOS RETOUR AU MENU */				
		div#aproposRetour {
			float: left;	
			width: 1000px;
			height: 40px;			
		}
			div#aproposRetour a {
				display: block;		
				width: 170px;
				height: 40px;	
				outline: none;		
			}
			div#aproposRetour a span {
				display: none;
			}
		/* A PROPOS VERS PORTFOLIO */	
		div#versPortfolio {
			float: left;
			width: 1000px;			
			height: 400px;
		}				
			div#versPortfolio a {
				display: block;		
				height: 400px;
				width: 700px;	
				/*background: url(images/vers_portfolio.jpg) no-repeat;*/
				outline: none;			
			}				
					div#versPortfolio a span {
						display: none;
					}						
/* PORTFOLIO */			
div#portfolio {
	background: url(images/fond_portfolio.jpg) center top;	
	min-width: 1000px;
}
	/* PORTFOLIO CONTENU */	
	div#portfolioConteneur {
		margin: 0 auto;
		width: 1000px;
	}		
		/* PORTFOLIO TITRE */		
		h3#titrePortfolio {
			width: 1000px;
			height: 260px;	
			background: url(images/titre_portfolio.png) no-repeat; 	
		}
			h3#titrePortfolio span {
				display: none;
			}
		/* PORTFOLIO SOUS TITRE */	
		div#portfolioConteneur h4 {
			clear: both;
			display: block;
			margin: 40px 0 10px 0;	
			padding: 0;
			height: 100px;
			width: 600px;	
		}	
			h4#webdesign {		
				background: url(images/titre_webdesign.png) no-repeat;	
			}
			h4#motiondesign {		
				background: url(images/titre_motiondesign.png) no-repeat;	
			}		
			h4#autres {		
				background: url(images/titre_autres.png) no-repeat;	
			}	
			div#portfolioConteneur h4 span {
				display: none;
			}				
		/* PORTFOLIO LISTE IMAGES */	
		div#portfolioConteneur ul {
			margin: 0 auto;
			padding: 0;
			width: 990px; /* 980 normalement */
			list-style-type: none;	
		}			
		div#portfolioConteneur ul li {
			float: left;
			width: 225px;
			height: 230px;
			margin: 10px;
		}
		div#portfolioConteneur ul li div {
			display: block; 
			width: 220px; 
			height: 220px; 
			float: left;
		}
		.polaroid1 {
			background: url(images/polaroid1.png) no-repeat; 
		}	
		.polaroid2 {
			background: url(images/polaroid2.png) no-repeat; 
		}
		.polaroid3 {
			background: url(images/polaroid3.png) no-repeat; 
		}	
		.polaroid4 {
			background: url(images/polaroid4.png) no-repeat; 
		}								
		div#portfolioConteneur ul li a {
			position: relative;
			display: block;
			width: 180px;
			height: 147px;
			margin: 23px 20px 5px 20px;		
		}
		div#portfolioConteneur ul li a span {
			display: none;	
		}				
		div#portfolioConteneur ul li h5 {	
			font-size: 1.1em;
			text-align: center;
			line-height: 32px;	
			color: #171c22;
			font-weight: normal;
		}				
		/* PORTFOLIO RETOUR AU MENU */				
		div#portfolioRetour {
			float: left;
			margin: 40px 0 0 0;	
			width: 1000px;
			height: 100px;	
			background: url(images/portfolio_retour_menu.png) no-repeat;		
		}
			div#portfolioRetour a {
				position: relative;
				display: block;		
				width: 300px;
				height: 100px;	
				outline: none;		
			}
			div#portfolioRetour a span {
				display: none;
			}		
		/* PORTFOLIO VERS CONTACT */			
		div#versContact {
			float: left;	
			width: 1000px;			
			height: 320px;
			outline: none;								
		}	
			div#versContact a {
				display: block;	
				margin: 0 0 0 400px;	
				height: 320px;
				width: 600px;	
				background: url(images/vers_contact.jpg) no-repeat;
				outline: none;			
			}					
						div#versContact a span {
							display: none;
						}	
						
/* PORTFOLIO CONTACT */											
div#portfolioContact {
	clear: both;
	height: 250px;
	min-width: 1000px;
	background: url(images/fond_portfolio_contact.jpg) repeat-x center top;
}		
					
/* CONTACT */
div#contact {
	height: 700px;
	min-width: 1000px;
	background: url(images/fond_contact.jpg) center top;		
}
	/* CONTACT CONTENU */	
	div#contactConteneur {
		margin: 0 auto;
		width: 1000px;	
		height: 700px;
	}
		/* CONTACT TITRE */		
		h3#titreContact {
			width: 1000px;
			height: 160px;	
			background: url(images/titre_contact.jpg) no-repeat left top;	
		}
			h3#titreContact span {
				display: none;				
			}		
		form#formulaire	{
			margin: 0;
			padding: 0;	
		}			
		form#formulaire div {
			height: 70px;			
			clear: both;	
		}
		.champ {
			background: url(images/fond_champ.jpg) no-repeat left top;
		}
		input, textarea {			
			font: 1.6em "Trebuchet MS", arial, helvetica, sans-serif; 
			float: left; 
			border: 0;
			margin: 20px 30px 20px 50px;
			width: 370px;
			background: transparent;
			color: #997c45;		
		}
		textarea {
			font: 1.4em "Trebuchet MS", arial, helvetica, sans-serif; /* 62.5% => 10px */
			margin: 20px 20px 20px 10px;
			height: 160px;
			width: 970px;			
			overflow: auto;
			line-height: 22px;
			text-align: justify;
		}		
		.erreur {
			float: left; 
			padding: 0 0 0 30px;
			background: url(images/fond_erreur.jpg) no-repeat left top;
			font: 1.6em "Trebuchet MS", arial, helvetica, sans-serif; /* 62.5% => 10px */
			color: #702d15;
			font-weight: bold;	
			line-height: 70px;	
		}
		#textarea {
			float: left; 
			padding: 0 60px 0 40px;
			margin: -60px 0 0 0;
			background: url(images/fond_erreur_textarea.jpg) no-repeat right top;
			line-height: 60px;
		}		
		.focus {
			color: #603f0b;
		}
		.envoyer {
			margin: 0 350px 0 350px;
			height: 120px;
			width: 300px;
			background: url(images/envoyer.jpg) no-repeat;
		}
		#merci {
			float: left;
			margin: 0 350px 0 350px;
			height: 120px;
			width: 300px;
			background: url(images/merci.jpg) no-repeat;	
		}
/* PIED DE PAGE */				
div#piedDePage {			
	height: 350px;
	min-width: 1000px;
	background: url(images/fond_contact.jpg) center top;
}	
	div#piedDePageConteneur {
		height: 150px;
		padding: 200px 0 0 0;
		min-width: 1000px;	
		background: url(images/fond_pied_page.jpg) no-repeat center bottom;
		text-align: center;
		font-size: 1.2em;
		line-height: 20px;	
		color: #603f0b;		
	}		
	ul#piedDePageMenu {
		padding: 0;
		height: 20px;
		list-style-type: none;
	}
		ul#piedDePageMenu li {
			display: inline;
			margin: 0 5px 0 5px;
			padding: 0;				
		}	
div#piedDePage a {	
	text-decoration: underline;				
	font-weight: bold;
	color: #503409;
}
div#piedDePage a:hover {	
	color: #332106;
}