/* ==============================================
   FEUILLE DE STYLES DES GABARITS HTML/CSS --- 01
   © Elephorm & Alsacreations.com
   Conditions d'utilisation:
   http://creativecommons.org/licenses/by/2.0/fr/
   ============================================== */


/* --- COULEURS --- */

/* Note: vous pouvez modifier simplement l'aspect de ce gabarit en modifiant
   uniquement les couleurs de fond (propriétés background) et les couleurs
   du texte (propriété color).
   Pour modifier la disposition des blocs, voir plus bas dans la feuille de
   styles la partie «positionnement». */

/* Général */
html, body, #global {height: 100%;}

body {
	color: black;
	background : url(../images/bg-global.png) repeat-x;
	background-color: black; /* Voir -> Note 1 ci-dessous */
}
a {
	color: #ae0073;
	text-decoration : none;
}
a:hover, a:focus {
	text-decoration : underline;
}

a img {
	border : none;
	}

a img:hover {
text-decoration : none	}
	
#menu-texte {
	margin-top : 10px;
	font-size : 1.1em;
	}

#menu-texte a{
	color : white;
	text-decoration : none;	
	}

#menu-texte a:hover{
	color : black;
	text-decoration : underline;	
	}


/* En-tête */
#entete {
	height : 120px;
	background : url(../images/header-bg.png) repeat-x;
	background-color: black;
	width : 100%;

}

#jour {
	color : black;
	font-size : 25px;
	}
	
#numerojour {
	color : black;
	font-size : 50px;	
	line-height:0.65em;

	}
	
#mois {
	color : black;
	font-size : 25px;

	}	

#entete img{
	position : relative;
	float : left;
	margin-left : 20px;
	margin-top : 0;
	
	}	
	
#date-bg {
	float:right;
	position : relative;
	background : url(../images/date-bg.png) no-repeat;
	height : 120px;
	width : 182px;
	margin : 0 auto;
	text-align: center;
	margin-bottom : 45px;
	}	
	
#header-titre {
	font-size : 3em;
	padding:0;
	margin:0;
	font-family : Arial;
	color : white;
	display : none;

	
	}
	
#header-soustitre {
	display:none;
	font-size : 0.80em;
	font-family : Arial;
	color : black;
	line-height:0em;

	}
	

#infos{

color : white;
font-size : 0.9em;
width:225px;
margin-bottom : 5px;
border-right : 1px solid #ae0073;
padding-right : 20px;
text-align : justify;
padding-left : 20px;

}	


#titre-news {
	font-size : 1.2em;
	
	}

#infos2{

color : white;
font-size : 0.9em;
width:190px;
margin-bottom : 5px;
text-align : justify;
padding-left : 20px;
}
	
	
/* Contenu Index Photo+Reservation */

#reservation {
	
	
background-color : black;
color : white;
padding-left : 10px;
padding-right : 10px;
font-size : 1em;
	}
	

#page {
	
	
background-color : black;
color : white;
padding-left : 10px;
padding-right : 10px;
font-size : 0.9em;
	}
	


	

/* Pied de page */

	

#pied {
	width: 1000px; /* -> 3 */
	margin: 0 auto; /* -> 4 */
	padding-right :10px;
	color: #c7c7c7;
	text-align : right;
	font-size : 0.8em;
	background:url(../images/footer-bg.png) repeat-x;
	height : 20px;
	padding-bottom : 10px;

}


#pied a{
	color: #c7c7c7;
	text-decoration : none;
	}
	
	#pied a:hover{
	color: black;
	text-decoration : underline;
	}

/* --- POSITIONNEMENT --- */

/* Page */
body {
	padding: 0; /* -> 2 */
}

/* En-tête */
#entete {
}

#planningaccueil {
	
	float: right;
	font-size : 0.9em;
	
	}

#planningaccueil img{
	
padding-bottom : 2px;
	}


/* Contenu */
#contenu {
	padding-bottom : 10px;
	padding-left : 10px;
	padding-right : 10px;
	margin-bottom : 10px;
}

#contenuvideo {
	padding-bottom : 10px;
	padding-left : 10px;
	padding-right : 10px;
	padding-top : 10px;
	margin-bottom : 10px;
}





/* --- NOTES ---

1.	Notes que cette couleur de fond n'est apparente qu'en bas de page. Plus
	haut, elle est masque: par la couleur de fond de l'en-tête, puis par la
	couleur de fond du menu, puis par la couleur de fond du contenu. Seul le
	pied de page laisse apparaitre cette couleur de fond.

2.	Pour ce gabarit, on supprime l'écart entre les «bords» du navigateur et
	le contenu, en passant le padding de l'élément BODY à zéro.
	(Voir également la note numéro 2 dans base.css.)

3.	Si les éléments de notre menu se placent horizontalement plutôt que les
	uns en dessous des autres, c'est parce qu'ils ne sont plus affichés
	comme des blocs (ce qui est normalement le cas des éléments LI), mais
	comme des éléments de type en-ligne. On obtient ce comportement avec la
	propriété "display" et la valeur "inline".
	Le fait que nos LI se comportent comme un flot unique de texte aura deux
	conséquences:
	- on va pouvoir aligner le texte du menu à gauche (c'est le cas ici), à
	  droite ou encore au centre, en jouant sur la propriété "text-align" du
	  menu (sur l'élément UL ou sur div#navigation);
	- certains styles ne pourront pas être appliqués... par exemple, la
	  propriété "width" ne peut pas être utilisée pour les éléments en
	  "display: inline".

*/

#slider1 {
    width: 420px; /* important to be same as image width */
    height: 308px; /* important to be same as image height */
    position: relative; /* important */
	overflow: hidden; /* important */
	margin-bottom : 20px;

}

#slider1Content {
    width: 420px; /* important to be same as image width or wider */
    position: absolute;
	top: 0;
	margin-left: 0;

}
.slider1Image {
    float: left;
    position: relative;
	display: none;
}
.slider1Image span {
    position: absolute;
	font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 420px;
    background-color: black;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
	-khtml-opacity: 0.5;
    opacity: 0.5;
    color: #fff;
    display: none;
}
.clear {
	clear: both;
}
.slider1Image span strong {
    font-size: 14px;
    color : white;
}
.left {
	top: 0;
    left: 0;
	width: 420px !important;
	height: 30px;
}
.right {
	right: 0;
	bottom: 0;
	width: 420px !important;
	height: 30px;
}
ul { list-style-type: none;}

input[type=text] {
	float:left;
	background : url(../images/input.png) top left no-repeat;
	border: 0;
	height : 20px;
	width : 125px;	
	padding : 3px 25px 0 20px;
	color : #ae0073;
	}
	
input[type=password] {
	float:left;
	background : url(../images/input.png) top left no-repeat;
	border: 0;
	height : 20px;
	width : 125px;	
	padding : 3px 25px 0 20px;
	color : #ae0073;
	}	
	
input[type=image] {
	padding-right : 20px;
	}	
	
#petit-texte
{
font-size : 0.90em;	
text-align : justify;
	
	}	

	
#global {
	width: 1000px; /* -> 3 */
	margin: 0 auto; /* -> 4 */
	padding :0;
	}	
	
#enveloppe-pied {
	background:url(../images/footer-bg.png) repeat-x;
	height: 30px;
	position: relative;
	margin-top: -30px; /* negative value of footer height */
	height: 30px;
	clear:both;

	}	
	
body > #global {height: auto; min-height: 100%;}	
#main {padding-bottom: 50px;}


#rose {
	color : #ae0073;	
	
	}


#rose-small {
	color : #ae0073;
	font-size : 0.75em;
	
	}
	
#small-text {
	font-size : 0.75em;
	}	
/* CLEAR FIX*/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


.error-message {
	background : url(../images/false.png) 5px center no-repeat;
	font-size: 0.7em;
	color : #ae0037;
	display : inline;
	padding-left : 30px;
	padding-top : 3px;
	display : none;
		}