/*
	Yes this layout was inspired by lightbox v2.0's page, the reason being, the layout works really well for a doc 
*/

* {
	margin: 0;
	padding: 0;
}

a:link 
  {color: #c3f81d; 
 
  background-color: transparent;
	font-weight: bold;
	text-decoration: none;
}
a:visited 
  { color: #c3f81d; 
  
  background-color: transparent;
	font-weight: bold;
	text-decoration: none;
}
a:hover 
  { color: #00c6ff; 
   
  background-color: transparent;
	text-decoration: none;
}

body {
	padding: 0;
	margin: 0;
	  background: #038590 url(../images/fond.png) repeat-x;
	font-size: 12px;
	font-family: "Lucida Grande", Tahoma, sans-serif;
}

.page-top-accueil {
	margin: 0 auto 0 auto;	
	width: 832px;
	height: 243px;
	padding: 5px 0 0;
	text-align: center;
	background: url(../images/accueilmenu.png) no-repeat;
}

.page-body-accueil {
	margin: 5px auto 0;	
	width: 832px;
	height: 694px;
	padding: 30px 0 20px 0;
	text-align: center;
	background: url(../images/fondcadre2.png) no-repeat;
}

.page-top-animations {
	margin: 0 auto 0 auto;	
	width: 832px;
	height: 243px;
	padding: 5px 0 0;
	text-align: center;
	background: url(../images/animationsmenu.png) no-repeat;
}

.page-body-animations {
	margin: 5px auto 0;	
	width: 832px;
	height: 694px;
	padding: 30px 0 20px 0;
	text-align: left;
	background: url(../images/animations-fondcadre.png) no-repeat;
	color: white;
}

.page-top-photos {
	margin: 0 auto 0 auto;	
	width: 832px;
	height: 243px;
	padding: 5px 0 0;
	text-align: center;
	background: url(../images/photosmenu.png) no-repeat;
}

.page-body-photos {
	margin: 5px auto 0;	
	width: 832px;
	height: 694px;
	padding: 30px 0 20px 0;
	text-align: center;
	background: url(../images/animations-fondcadre.png) no-repeat;
}

.page-top-contact {
	margin: 0 auto 0 auto;	
	width: 832px;
	height: 243px;
	padding: 5px 0 0;
	text-align: center;
	background: url(../images/contactmenu.png) no-repeat;
}

.page-body-contact {
	margin: 5px auto 0;	
	width: 832px;
	height: 694px;
	padding: 30px 0 20px 0;
	text-align: left;
	background: url(../images/contact-fondcadre.png) no-repeat;
	color: white;
}

.copyright {
	margin: 0 auto 0 auto;	
	width: 832px;
	text-align: right;
	color: white;
	font: 8px Verdana, Arial, serif;
	padding-right: 50px;
}

#boutonaccueil {
	width: 137px;
	height: 26px;
	top: 190px;
	left: 39px;
	background: url(../images/boutonaccueil.jpg) 0px 0px;
	z-index: 2;
	cursor:  pointer;
	position: relative;
}

#boutonaccueilvide {
	width: 137px;
	height: 26px;
	top: 190px;
	left: 39px;
	background: none 0px 0px;
	z-index: 2;
	position: relative;
}

#boutonaccueil:hover
{

background-position: 0px -26px;
}
#boutonaccueil:active
{

background-position: 0px -52px;

}

#boutonanimation {
	width: 137px;
	height: 26px;
	top: 164px;
	left: 177px;
	background: url(../images/boutonanimation.jpg) 0px 0px;
	z-index: 4;
	cursor:  pointer;
	position: relative;
}
#boutonanimationvide {
	width: 137px;
	height: 26px;
	top: 164px;
	left: 177px;
	background: none 0px 0px;
	z-index: 4;
	position: relative;
}

#boutonanimation:hover
{
background-position: 0px -26px;
}
#boutonanimation:active
{
background-position: 0px -52px;

}

#boutonphotos {
	width: 137px;
	height: 26px;
	top: 138px;
	left:315px;
	background: url(../images/boutonphotos.jpg) 0px 0px;
	z-index: 6;
	cursor:  pointer;
	position: relative;
}

#boutonphotosvide {
	width: 137px;
	height: 26px;
	top: 138px;
	left:315px;
	background: none 0px 0px;
	z-index: 6;
	position: relative;
}

#boutonphotos:hover
{

background-position: 0px -26px;
}
#boutonphotos:active
{

background-position: 0px -52px;

}

#boutoncontact {
	width: 137px;
	height: 26px;
	top: 112px;
	left: 453px;
	background: url(../images/boutoncontact.jpg) 0px 0px;
	z-index: 2;
	cursor:  pointer;
	position: relative;
}

#boutoncontactvide {
	width: 137px;
	height: 26px;
	top: 190px;
	left: 39px;
	background: none 0px 0px;
	z-index: 2;
	position: relative;
}

#boutoncontact:hover
{

background-position: 0px -26px;
}
#boutoncontact:active
{

background-position: 0px -52px;

}

#accueiltexte1 {
	text-align: justify;
	color: white;
	width: 386px;
	height: 189px;
	position: relative;
	margin-top: 15px;
	left: 59px;
	text-indent: 30px;
	font: 12px Verdana, Arial, serif;

}

#accueilphoto1 {
	position: relative;
	left: 492px;
	
	top: -189px;
	width: 278px;
}

#accueiltexte2 {
	text-align: justify;
	color: white;
	width: 386px;
	height: 189px;
	position: relative;
	text-indent: 30px;
	font: 12px/1.2 Verdana, Arial, serif;
	top: -125px;
	left: 385px;
}

#accueiltexte3 {
	text-align: justify;
	color: white;
	width: 386px;

	position: relative;
	text-indent: 60px;
	font: 12px/1.3 Verdana, Arial, serif;
	top: -37px;
	left: 415px;
}

#animationstexte1 {
	text-align: justify;
	color: white;
	width: 704px;
	height: 189px;
	position: relative;
	margin-top: 42px;
	left: 68px;
	text-indent: 30px;
	font: 12px Verdana, Arial, serif;

}

#boutondownload {
	width: 215px;
	height: 30px;
	top: 30px;
	left: 25px;
	background: url(../images/download.png) 0px 0px;
	z-index: 22;
	cursor:  pointer;
	position: relative;
}
#boutondownloadvide {
	width: 215px;
	height: 30px;
	top: 30px;
	left: 25px;
	background: none 0px 0px;
	z-index: 22;
	position: relative;
}

#boutondownload:hover
{
background-position: 0px -30px;
}
#boutondownload:active
{
background-position: 0px -60px;

}

#contacttexte {
	text-align: justify;
	color: white;
	width: 386px;
	height: 189px;
	position: relative;
	margin-top: 130px;
	left: 385px;
	text-indent: 30px;
	font: 12px/1.2 Verdana, Arial, serif;

}

#boutondownload1 {
	width: 215px;
	height: 30px;
	top: 20px;
	right: -140px;
	background: url(../images/download.png) 0px 0px;
	z-index: 22;
	cursor:  pointer;
	position: relative;
}
#boutondownload1vide {
	width: 215px;
	height: 30px;
	top: 30px;
	left: 25px;
	background: none 0px 0px;
	z-index: 22;
	position: relative;
}

#boutondownload1:hover
{
background-position: 0px -30px;
}
#boutondownload1:active
{
background-position: 0px -60px;

}

#mail {
	width: 89px;
	height: 14px;
	position: relative;
	margin-top: -35px;
	left: 470px;
	font: 14px Verdana, Arial, serif;
	
}

.page-footer {
		margin: 0 10% 0 315px;	
		width: 832px;
		padding: 0 0 50px 0;
		text-align: left;
	}

	.page-body ul, .page-body ol { 
		color: #ffffff;
		margin: 10px 0 30px 25px; 
	}

.lignephotos {
	display: inline-block;
	width: 100%;
}

	.page-footer p {
		margin: 0;
	}
	
	.page-footer {
		padding: 20px;
	}
	
h1 {
	text-align: left;
	font-weight: normal;
	font-size: 180%;
	color: #96BF55;
	margin: 5px 0 15px 0;
}


h2 {
	text-align: left;
	font-weight: normal;
	font-size: 150%;
	color: #09f;
	margin: 5px 0 15px 0;
}

	h2 span {
		clear: both;
		font-size: 70%;
		color: #FF9;
	}
	
h3 {
	clear: both;
	font-size: 120%;
	color: #FF9;
	font-weight: normal;
	margin: 0 0 10px 0;
}

.notice {
	border: 3px solid #ffffbe;
	padding: 10px;
	color: #ffffff;
	background-color: #09f;
	margin: 0 0 20px 0;
}

	p small, 
	li small {
		color: #09F;
		font-size: 100%;
	}
	
	p em, 
	em {
		color: #ffffff;
	}

.hidden {
	display : none;
}