@font-face {
font-family: 'monofurRegular';
src: url('../Fonts/monof55-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face 
{
font-family: 'monofuritalic';
src: url('../Fonts/monof56-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

html, body {
margin:0;
padding:0;
height: 100%;
width: 100%;
font-family: monofurRegular, 'Century Gothic', 'Trebuchet MS', Verdana, Tahoma, sans-serif;
}

a{
color:#808080;
}

.messagesSucces{
background:#DFFFDF url("../Images/ok.png") no-repeat center left;
padding:10px;
padding-left:45px;
margin-top:10px;
margin-bottom:10px;
margin-right:10%;
margin-left:10%;
width:80%;
border: 1px solid #9FCF9F;
color:005F00;
-moz-border-radius:10px;
-webkit-border-top-left-radius:10px;
border-radius: 10x 10px 10px 10px; /*opera*/
}

.messagesErreur{
background: #FFF0DE url("../Images/erreur.png") no-repeat top left;
padding:15px;
padding-left:45px;
margin-top:10px;
margin-bottom:10px;
margin-right:10%;
margin-left:10%;
width:80%;
border: 1px solid #CFB99F;
-moz-border-radius:10px;
-webkit-border-top-left-radius:10px;
border-radius: 10x 10px 10px 10px; /*opera*/
}

#arriere {
position: absolute;	/* dimension et positionnement du bloc conteneur  de l'image, valeurs arbitraires */
left: 0em;
top: 5em;
height : 91.25%;	
width : 100%;
text-align:justify;
}

.AffichePhoto{
position: absolute;	/* dimension et positionnement du bloc conteneur  de l'image, valeurs arbitraires */
left: 0em;
top: 0em;
-webkit-box-shadow: #000 1px 1px 30px;
box-shadow: #000 1px 1px 30px; 
-moz-box-shadow:#000 1px 1px 30px; 
-webkit-border-radius:25px;
border-radius:25px;
-moz-border-radius:25px;
padding:5px;
}

.ChangeFond{
position: absolute;	/* dimension et positionnement du bloc conteneur  de l'image, valeurs arbitraires */
left: 3em;
top: 0em;
-webkit-box-shadow: #000 1px 1px 30px;
box-shadow: #000 1px 1px 30px; 
-moz-box-shadow:#000 1px 1px 30px; 
-webkit-border-radius:25px;
border-radius:25px;
-moz-border-radius:25px;
padding:5px;
}

.AffichePhoto:hover, .ChangeFond:hover{
cursor: pointer;
}

.fond, #fond {
/* l'image occupe toute la place de son bloc conteneur */
width : 100%;
height: 100%; 
background-color:#3E3E3E;
}

img{
border: 0px;
}

.rouge{
color:#ff0000;
display:inline-block;
width:100%;
text-align:center;
font-size:1.4em;
}

#letitre{
color: #ff0000;
text-transform:	uppercase ;
}

.ZoneTexte{
position: absolute;	
top: 5em;
left: 12%;
font-weight: bold;
width:70%;
height:auto;
color: #101010;
background-color:#f7f4f4;
padding:35px;
padding-left:15px;
padding-top:10px;
max-height: 70%;
overflow: auto;
-webkit-box-shadow: #000 1px 1px 30px;
box-shadow: #000 1px 1px 30px; 
-moz-box-shadow:#000 1px 1px 30px; 
-webkit-border-radius:25px;
border-radius:25px;
-moz-border-radius:25px;
-moz-opacity:0.8;
opacity: 0.8;
filter:alpha(opacity=80);
}

.ZonePhotos{
position: absolute;	/* dimension et positionnement du bloc conteneur  de l'image, valeurs arbitraires */
left: 0em;
top: 0em;
height : 100%;	
width : 100%;
}

.BoutonsNews{
position: absolute;	
top: 2.5em;
left: 12%;
}

.fondTransparent{
display:inline-block;
padding:3px;
padding-left:15px;
padding-right:15px;
margin-bottom:5px;
-moz-opacity:0.8;
opacity: 0.8;
filter:alpha(opacity=80);
-webkit-box-shadow: #000 1px 1px 30px;
box-shadow: #000 1px 1px 30px; 
-moz-box-shadow:#000 1px 1px 30px; 
-webkit-border-radius:25px;
border-radius:25px;
-moz-border-radius:25px;
}

.fondTransparent a{
font-size:1.1em;
text-decoration:none;
text-shadow: 1px 1px 1px #fff;
color:#3e3e3e;
}

.gauche{
display:table-cell;
text-align:left;
}

#menu{
display:inline-block;
background-color:#3e3e3e;
min-height:5%;
width:100%;
border-bottom:1px solid #b6b6b6;
}

a.menu{
color:#6f6262;
font-family: 'Century Gothic', monofuritalic, 'Trebuchet MS', Verdana, Tahoma, sans-serif;
font-size:1.4em;
text-decoration:none;
}

.spanMenu{
padding-left:1.5em;
padding-right:1.5em;
display:table-cell;
height:5%;
vertical-align:middle;
text-align:center;
width:15em;
border:1px solid #b6b6b6;
border-bottom:0px solid red;
border-top:0px solid red;
}

.spanMenu:hover{
background-color:#6d6a6a;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;/*opera*/
}

.spanMenufirst{
display:table-cell;
height:4.9em;
vertical-align:middle;
text-align:center;
width:20em;
border:0px solid #b6b6b6;
}

#logoMenu:hover{
  -moz-transform: rotate(-8deg);  
  -webkit-transform: rotate(-8deg);
}

.spanMenu:hover a.menu{ 
color:#fff; 
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;/*opera*/
}

.spanMenulast{
display:table-cell;
height:4.7em;
vertical-align:bottom;
text-align:right;
padding-right:0.2em;
padding-top:0.2em;
width:10em;
border:1px solid #b6b6b6;
border:0px solid red;
width:15%;
}

#lock{
position: absolute;	
top: -1.5em;
left: -1.5em;
}

#lock:hover,#lock:active, #lock:active{
position: absolute;	
top: 0em;
left: 0em;
}

#footer{
display:inline-block;
width:100%;
text-align:center;
}

.lienGalerie{
text-align:center;
display:table-cell;
padding:5px;
}

.miniGalerie{
border: 1px solid #3e3e3e;
text-decoration:none;
}