html, body
{
	width:						100%;
	height:						100%;
	padding:					0px;
	margin:						0px;
	background-image:			url(./img/fond.gif) ;
	font-family:				Arial, Verdana, sans-serif;
	font-size:					11px;
}

/*** Masque ***/
#masque
{
	position:					absolute;
	
	width:						100%;
	height:						100%;

	background-color:			#000;
	z-index:					999;
	opacity:					0.8;
	filter:						alpha(opacity=80);
	display:					none;
}

#fenetre
{
	position:					absolute;
	width:						400px;
	height:						350px;
	
	margin-left:				auto;
	margin-right:				auto;

	top:						50%;
	left:						50%;
	margin-top:					-175px;
	margin-left:				-200px;
	z-index:					1000;
	display:					none;

	border:						1px solid #000;
}

#fenetre .footer
{
	width:						380px;

	position:					absolute;
	height:						20px;
	bottom:						0px;

	padding-left:				10px;
	padding-right:				10px;

	background-color:			#FFF;
}

#fenetre .footer .contenu
{
	width:						380px;
	line-height:				20px;
	text-align:					center;
	border-top:					1px solid #666;
}

#fenetre .footer a:link, #fenetre .footer a:visited
{
	font-size:					10px;
	color:						#000;
	text-decoration:			none;
	font-weight:				bold;
}

#fenetre .footer a:hover, #fenetre .footer a:active
{
	font-size:					10px;
	color:						#000;
	text-decoration:			underline;
	font-weight:				bold;
}

#fenetre h2
{
	font-size:					14px;
	color:						#000;
	border-bottom:				1px solid #666;
}

#centreFenetre
{
	position:					absolute;
	width:						380px;
	height:						260px;
	padding:					10px;
	background-color:			#FFF;
	padding-top:				70px;

	background-repeat:			no-repeat;
}

div#conteneurFenetre
{
	position:					absolute;
	width:						320px;
	height:						220px;

	padding:					10px;

	left:						10px;
	top:						80px;

	background-image:			url(./img/fondContenuFenetre.jpg) ;
	background-repeat:			no-repeat;

	overflow:					hidden;
}

div#contenuFenetre
{
	position:					absolute;
	width:						310px;
	margin-top:					10px;
	margin-bottom:				10px;
	margin-left:				5px;
	margin-right:				5px;

	overflow:					hidden;
}

#fenetre a.scrollUp:link, #fenetre a.scrollUp:visited,#fenetre  a.scrollUp:active
{
	position:					absolute;
	top:						81px;
	right:						21px;
	display:					block;
	width:						18px;
	height:						18px;
	background-image:			url(./img/scrollUpFenetre.jpg) ;
}

#fenetre a.scrollUp:hover
{
	position:					absolute;
	top:						81px;
	right:						21px;
	display:					block;
	width:						18px;
	height:						18px;
	background-image:			url(./img/scrollUpFenetre.jpg) ;
	background-position:		0px -18px;
}

#fenetre a.scrollDown:link, #fenetre a.scrollDown:visited,#fenetre  a.scrollDown:active
{
	position:					absolute;
	bottom:						21px;
	right:						21px;
	display:					block;
	width:						18px;
	height:						18px;
	background-image:			url(./img/scrollDownFenetre.jpg) ;
}

#fenetre a.scrollDown:hover
{
	position:					absolute;
	bottom:						21px;
	right:						21px;
	display:					block;
	width:						18px;
	height:						18px;
	background-image:			url(./img/scrollDownFenetre.jpg) ;
	background-position:		0px -18px;
}

#fenetre img.scroll
{
	position:					absolute;
	top:						99px;
	right:						29px;
}

#affichageImage
{	
	position:					absolute;
	
	top:						50%;
	left:						50%;

	z-index:					1002;
	display:					none;
}

#affichageImage img
{
	border:						1px solid #000;
}


/*** Page principale ***/
.page
{
	position:					absolute;
	width:						503px;
	height:						303px;
	top:						50%;
	left:						50%;
	margin-top:					-150px;
	margin-left:				-250px;
	z-index:					0;
}


/*** En-tête ***/
.page .header
{
	position:					absolute;
	
	width:						100%;
	height:						61px;
	top:						0px;
	left:						0px;

	background-image:			url(./img/header.jpg) ;
	background-repeat:			no-repeat;
	z-index:					1;
}


/*** Pied de page ***/
.page .footer
{
	position:					absolute;

	width:						100%;
	height:						33px;
	bottom:						0px;
	left:						0px;

	background-image:			url(./img/footer.jpg) ;
	background-repeat:			no-repeat;
	z-index:					1;
}


.page .footer .contenu
{
	position:					absolute;

	width:						100%;

	margin-left:				auto;
	margin-right:				auto;
	color:						#FFF;
	font-size:					10px;
	line-height:				20px;
	text-align:					center;
}


/*** Centre de la page ***/
.page .centre
{
	position:					absolute;

	width:						100%;
	height:						210px;

	top:						61px;
	left:						0px;

	background-image:			url(./img/centre.jpg) ;
	z-index:					1;
}


/*** Images decoratives ***/
.page img.titreSite
{
	position:					absolute;
	top:						23px;
	left:						22px;
	z-index:					2;
}

.page img.logoSite
{
	position:					absolute;
	top:						21px;
	right:						30px;
	z-index:					2;
}

.page div.decoCode
{
	position:					absolute;
	top:						0px;
	left:						1px;
	z-index:					1;
	width:						70px;
	height:						200px;
	background-image:			url(./img/code.jpg);
	background-repeat:			no-repeat;
}

.page div.decoDev
{
	position:					absolute;
	top:						12px;
	right:						9px;
	z-index:					1;
	width:						16px;
	height:						188px;
	background-image:			url(./img/dev.jpg);
	background-repeat:			no-repeat;
}

.page div.lienContact
{
	position:					absolute;
	bottom:						8px;
	right:						53px;
	z-index:					3;

	width:						35px;
	height:						32px;
}

.page div.lienContact img
{
	border:						0px;
}


/*** Realisations ***/
.page div.realisations
{
	position:					absolute;
	width:						150px;
	height:						170px;
	top:						30px;
	right:						42px;
	z-index:					1;
	background-image:			url(./img/fond-realisations.jpg) ;
	background-repeat:			no-repeat;
}

.page div.decoRealisations
{
	position:					absolute;
	width:						62px;
	height:						40px;
	top:						19px;
	right:						151px;
	background-image:			url(./img/souris.jpg) ;
	background-repeat:			no-repeat;
	z-index:					2;
}

.page div.realisations img.scrollup
{
	position:					absolute;
	top:						28px;
	right:						6px;
}

a.scrollUp:link, a.scrollUp:visited, a.scrollUp:active
{
	position:					absolute;
	top:						28px;
	right:						6px;
	display:					block;
	width:						18px;
	height:						18px;
	background-image:			url(./img/scrollup.jpg) ;
}

a.scrollUp:hover
{
	position:					absolute;
	top:						28px;
	right:						6px;
	display:					block;
	width:						18px;
	height:						18px;
	background-image:			url(./img/scrollup.jpg) ;
	background-position:		0px -18px;
}

a.scrollDown:link, a.scrollDown:visited, a.scrollDown:active
{
	position:					absolute;
	bottom:						6px;
	right:						6px;
	display:					block;
	width:						18px;
	height:						18px;
	background-image:			url(./img/scrolldown.jpg) ;
}

a.scrollDown:hover
{
	position:					absolute;
	bottom:						6px;
	right:						6px;
	display:					block;
	width:						18px;
	height:						18px;
	background-image:			url(./img/scrolldown.jpg) ;
	background-position:		0px -18px;
}

.page div.realisations img.scroll
{
	position:					absolute;
	bottom:						24px;
	right:						14px;
}

.page div.realisations .liste
{
	position:					absolute;
	width:						110px;
	height:						120px;

	top:						35px;
	left:						10px;

	overflow:					hidden;
}

div#contenuRealisations
{
	width:						110px;
	position:					absolute;
	top:						0px;
	left:						0px;
}

#contenuRealisations .element
{
	width:						110px;
	border-bottom:				1px solid #AAA;
	overflow:					hidden;
	padding-bottom:				5px;
	margin-bottom:				5px;
}

#contenuRealisations .element img.typeG
{
	border:						1px solid #000;
	float:						left;
	margin-right:				5px;
}

#contenuRealisations .element img.typeD
{
	border:						1px solid #000;
	float:						right;
	margin-left:				5px;
}


#contenuRealisations .element a:link, #contenuRealisations .element a:visited
{
	color:						#444;
	font-weight:				bold;
	text-decoration:			none;
}

#contenuRealisations .element a:hover, #contenuRealisations .element a:active
{
	color:						#3c69ac;
	font-weight:				bold;
	text-decoration:			underline;
}

#contenuRealisations .element .type
{
	font-size:					10px;
}

#contenuRealisations .element .type em
{
	color:						#666;
}

#contenuRealisations a:link, #contenuRealisations a:visited
{
	color:						#444;
	font-weight:				bold;
	text-decoration:			none;
}

#contenuRealisations a:hover, #contenuRealisations a:active
{
	color:						#3c69ac;
	font-weight:				bold;
	text-decoration:			underline;
}


/*** Menu ***/
.page .menu
{
	position:					absolute;
	width:						170px;
	height:						210px;

	padding-top:				5px;
	left:						100px;
	top:						0px;
}

/* Bouton profil */
#lien_profil:link, #lien_profil:visited
{
	display:					block;
	width:						170px;
	height:						50px;
	background-image:			url(./img/lien-profil.jpg) ;
}

#lien_profil:hover, #lien_profil:active
{
	display:					block;
	width:						170px;
	height:						50px;
	background-image:			url(./img/lien-profil.jpg) ;
	background-position:		0px -50px;
}

/* Bouton photo */
#lien_photo:link, #lien_photo:visited
{
	display:					block;
	width:						170px;
	height:						50px;
	background-image:			url(./img/lien-photo.jpg) ;
}

#lien_photo:hover, #lien_photo:active
{
	display:					block;
	width:						170px;
	height:						50px;
	background-image:			url(./img/lien-photo.jpg) ;
	background-position:		0px -50px;
}

/* Bouton guestbook */
#lien_guestbook:link, #lien_guestbook:visited
{
	display:					block;
	width:						170px;
	height:						50px;
	background-image:			url(./img/lien-guestbook.jpg) ;
}

#lien_guestbook:hover, #lien_guestbook:active
{
	display:					block;
	width:						170px;
	height:						50px;
	background-image:			url(./img/lien-guestbook.jpg) ;
	background-position:		0px -50px;
}

/* Bouton liens */
#lien_liens:link, #lien_liens:visited
{
	display:					block;
	width:						170px;
	height:						50px;
	background-image:			url(./img/lien-liens.jpg) ;
}

#lien_liens:hover, #lien_liens:active
{
	display:					block;
	width:						170px;
	height:						50px;
	background-image:			url(./img/lien-liens.jpg) ;
	background-position:		0px -50px;
}

/*** Profil ***/
.profil
{
	
}

/*** Photographie ***/
.photographie
{

}

.photographie .galerie
{

}

.photographie .galerie img
{
	border:						0px;
	margin:						2px;
}

/*** Livre d'or ***/
.guestBook
{
	margin:						0px;
	padding:					0px;
}

.guestBook .message
{
	padding:					0px;
	margin-bottom:				10px;
}

.guestBook .message .pseudo
{
	font-weight:				bold;
	color:						#3c69ac;
	background-color:			#EEE;

	padding-left:				10px;
	padding-right:				10px;
	padding-bottom:				2px;

	border-bottom:				1px solid #E5E5E5;
	
	margin-top:					-10px;
}

.guestBook .message .contenu
{
	background-color:			#EEE;
	padding-top:				2px;
	padding-left:				10px;
	padding-right:				10px;
}

.guestBook .message .date
{
	font-style:					italic;
	font-weight:				normal;
	color:						#000;
}

.guestBook .navigation
{
	text-align:					right;
	margin-top:					0px;
	margin-bottom:				5px;
}

.guestBook .navigation a:link, .guestBook .navigation a:visited
{
	color:						#000;
	font-weight:				bold;
	text-decoration:			none;
}

.guestBook .navigation a:hover, .guestBook .navigation a:active
{
	color:						#000;
	font-weight:				bold;
	text-decoration:			underline;
}

#boutonsGuestBook
{
	text-align:					center;
}

/* Formulaire du livre d'or */
#guestBookForm
{

}

#guestBookForm input, textarea
{
	font-family:				Arial, Verdana, sans-serif;
	border:						1px solid #000;
	font-size:					11px;
	padding:					2px;
	margin-top:					2px;
	background-color:			#FFF;
}

#guestBookForm input.focused, textarea.focused
{
	font-family:				Arial, Verdana, sans-serif;
	border:						1px solid #38A;
	font-size:					11px;
	padding:					2px;
	margin-top:					2px;
	background-color:			#FFF;
}

#guestBookForm input.warning, #guestBookForm textarea.warning
{
	font-family:				Arial, Verdana, sans-serif;
	border:						1px solid #A83;
	font-size:					11px;
	padding:					2px;
	margin-top:					2px;
	background-color:			#FED;
}

#guestBookForm input.ok, #guestBookForm textarea.ok
{
	font-family:				Arial, Verdana, sans-serif;
	border:						1px solid #3A8;
	font-size:					11px;
	padding:					2px;
	margin-top:					2px;
	background-color:			#DFE;
}

#guestBookForm .elementFormulaire
{
	padding-top:				5px;
	text-align:					left;
}

#erreurPseudoGuestbook, #erreurMailGuestbook, #erreurMessageGuestbook, #erreurGuestbook
{
	color:						#F00;
	display:					none;
}

#boutonsGuestBookForm
{
	text-align:					center;
	width:						55px;	
	height:						25px;
	margin-left:				auto;
	margin-right:				auto;
	margin-top:					5px;
}

#guestBookFormBtAnnuler:link, #guestBookFormBtAnnuler:visited
{
	float:						left;
	display:					block;
	width:						25px;
	height:						25px;

	background-image:			url(./img/btAnnuler.gif) ;
}

#guestBookFormBtAnnuler:hover, #guestBookFormBtAnnuler:active
{
	float:						left;
	display:					block;
	width:						25px;
	height:						25px;

	background-image:			url(./img/btAnnulerOver.gif) ;
}

#guestBookFormBtValider:link, #guestBookFormBtValider:visited
{
	float:						right;
	display:					block;
	width:						25px;
	height:						25px;

	background-image:			url(./img/btValider.gif) ;
}

#guestBookFormBtValider:hover, #guestBookFormBtValider:active
{
	float:						right;
	display:					block;
	width:						25px;
	height:						25px;

	background-image:			url(./img/btValiderOver.gif) ;
}

/* Page de liens */
#liens
{

}

#liens .categorie
{
	
}

#liens .categorie .description
{

}

#liens .site
{
	margin-top:					10px;
}

#liens .site .contenu
{
	background-color:			#EEE;

	padding-left:				10px;
	padding-right:				10px;

	margin-top:					-3px;
	margin-bottom:				-3px;
}

#liens .site h3
{
	margin:						0px;
	padding:					0px;

	padding-bottom:				5px;

	font-size:					12px;
	color:						#3c69ac;
}

#liens .centre
{
	overflow:					hidden;
}

#liens .site .image
{
	float:						left;
	width:						80px;
	height:						60px;

	border:						1px solid #000;
}

#liens .site .image img
{
	border:						0px;
}

#liens .site .description
{
	padding:					0px;
	padding-left:				5px;
	float:						right;
	width:						200px;
	
	position:					relative;
}

#liens .url
{
	text-align:					right;
}

#liens .url img
{
	border:						0px;
}

/* Page de contact */
#contact
{

}

#contact input, textarea
{
	font-family:				Arial, Verdana, sans-serif;
	border:						1px solid #000;
	font-size:					11px;
	padding:					2px;
	margin-top:					2px;
	background-color:			#FFF;
}

#contact input.focused, textarea.focused
{
	font-family:				Arial, Verdana, sans-serif;
	border:						1px solid #38A;
	font-size:					11px;
	padding:					2px;
	margin-top:					2px;
	background-color:			#FFF;
}

#contact input.warning, #contact textarea.warning
{
	font-family:				Arial, Verdana, sans-serif;
	border:						1px solid #A83;
	font-size:					11px;
	padding:					2px;
	margin-top:					2px;
	background-color:			#FED;
}

#contact input.ok, #contact textarea.ok
{
	font-family:				Arial, Verdana, sans-serif;
	border:						1px solid #3A8;
	font-size:					11px;
	padding:					2px;
	margin-top:					2px;
	background-color:			#DFE;
}

#contact .elementFormulaire
{
	padding-top:				5px;
	text-align:					left;
}

#erreurSujetContact, #erreurMailContact, #erreurMessageContact, #erreurContact
{
	color:						#F00;
	display:					none;
}

#boutonsContact
{
	text-align:					center;
	width:						55px;	
	height:						25px;
	margin-left:				auto;
	margin-right:				auto;
	margin-top:					5px;
}

#contactBtAnnuler:link, #contactBtAnnuler:visited
{
	float:						left;
	display:					block;
	width:						25px;
	height:						25px;

	background-image:			url(./img/btAnnuler.gif) ;
}

#contactBtAnnuler:hover, #contactBtAnnuler:active
{
	float:						left;
	display:					block;
	width:						25px;
	height:						25px;

	background-image:			url(./img/btAnnulerOver.gif) ;
}

#contactBtValider:link, #contactBtValider:visited
{
	float:						right;
	display:					block;
	width:						25px;
	height:						25px;

	background-image:			url(./img/btValider.gif) ;
}

#contactBtValider:hover, #contactBtValider:active
{
	float:						right;
	display:					block;
	width:						25px;
	height:						25px;

	background-image:			url(./img/btValiderOver.gif) ;
}

/* Realisations */
#realisations 
{
	
}

#realisations h3
{
	font-size:					12px;
	color:						#000;
	border-bottom:				1px solid #AAA;
	text-align:					left;
	font-style:					italic;
}

#realisations ul
{
	padding-left:				30px;
	list-style-image:			url(./img/puce.gif);
}

#realisations li
{
	margin-bottom:				5px;
	text-align:					justify;
}

#realisations .images img
{
	border:						1px solid #000;
}

#realisations .actions
{
	text-align:					center;
}

#realisations .actions img
{
	border:						0px;
}