/* 
CSS du site Le Lodge de la Madeleine
url : lelodgedelamadeleine.com
auteur : Clément Kevin - SkyNet

Couleur bleu : #6d7af7;
Couleur jaune : #F2E963;
*/


/************************************************/
/* GENERAL */


@font-face {
	font-family: 'BergamoStdRegular';
	src: url('../font/bergamostd-regular-webfont.eot');
	src: local('?'), url('../font/bergamostd-regular-webfont.woff') format('woff'), url('../font/bergamostd-regular-webfont.ttf') format('truetype'), url('../font/bergamostd-regular-webfont.svg#webfontwkEOAwGP') format('svg');
	font-weight: normal;
	font-style: normal;
}

#page{
	background-color: #FFFFFF;
}

#container {
	width: 999px;
	font-family: BergamoStdRegular, Trebuchet MS, Times New Roman;
	margin: 0 auto;
	background-image: url("../images/fond-index.jpg");
	display: block;
	text-align: center;
	color: #000;
	border: 2px solid #ccc;
	display: block;
	font-size: 18px;
}

h1{
	font-size: 24px;
	text-align: center;
}

h4{
	font-size: 15px;
	text-align: right;
}

a{
	text-decoration: none;
	color:  #000;
}

a:hover{
	color: #fff;
}

/************************************************/
/* HEADER */

#en-tete{
	height: 200px;
	clear: both;
}

/* Header : Logos */

#logos {
	width: 120px;
	float: left;
	margin-top: 12px;
}

.logos{
	float: left;
	width: 50px;
	height: 50px;
	margin: 5px;
	background: no-repeat center center;
}


#gites {
	background-image: url("../images/logos-header/gites.png");
}

#epis{
	background-image: url("../images/logos-header/epis.png");
}

#charmance {
	background-image: url("../images/logos-header/charmance.gif");
}

#moissac {
	background-image: url("../images/logos-header/moissac.gif");
}

/* Header Titre */

#titre {
	width: 780px;
	float: left;
	height: 140px;
	background-image: url("../images/logo.png");
	margin-left: 10px;
}

/* Header : Draperaux */

#drapeau {
	float: right;
	width: 70px;
	margin : 10px 19px 0px 0px;
}

.drapeau {
	height: 24px;
	width: 24px;
	margin: 5px;
	float: right;
	background-repeat: no-repeat right center;
}

#france {
	background-image: url("../images/drapeaux/fr.png");
}

#angleterre {
	background-image: url("../images/drapeaux/gb.png");
}

#allemagne {
	background-image: url("../images/drapeaux/de.png");
}

#italie {
	background-image: url("../images/drapeaux/it.png");
}

#espagne {
	background-image: url("../images/drapeaux/es.png");
}

#hollande {
	background-image: url("../images/drapeaux/nl.png");
}

/************************************************/
/* MENU  */

/* Menu Java */

#menu {
	float:left;
	font-size: 15px;
	font-weight: bold; 
	border-bottom:1px solid #CCCCCC;
	border-top:1px solid #CCCCCC;
	height:50px;
	padding-left:5px;
	width:995px;
}

#menu ul{
	z-index:100;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

/*Top level list items*/
	#menu ul li{
	position: relative;
	display: inline;
	float: left;
	margin: 13px 1px 0;
}

/*Top level menu link items style*/
#menu ul li a{
	display: block;
	background-image: url("../images/fond-index.jpg"); /*background of menu items (default state)*/
	padding: 6px 15px 7px;
	text-decoration: none;
	border: 1px solid #CCCCCC;
	padding: 0 12px;
}

* html #menu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
	display: inline-block;
}

#menu ul li a:link, #menu ul li a:visited{
	color: black;
	font: bold 15px;
}

#menu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
	background: #fff; 
	color: #6d7af7;
}

#menu ul li.current_page_parent ul li a{
	background: #fff;
	color: #6d7af7;
}

#menu ul li a:hover, #menu ul li.current_page_item a , #menu ul li.current_page_parent a, #menu ul li.current_page_item ul li a:hover, #menu ul li.current_page_parent ul li a:hover, #menu ul li ul li.current_page_item a{
	background: #fff;/*background of menu items during onmouseover (hover state)*/
	color: #6d7af7;
}


#menu ul li.current_page_item ul li a{
	background: #fff;
	color: #6d7af7;
}

li.current_page_item {
	background: #fff; /*background of menu items during onmouseover (hover state)*/
	color: #6d7af7;
}
/*1st sub level menu*/
#menu ul li ul{
	position: absolute;
	left: 0;
	display: none; /*collapse all sub menus to begin with*/
	visibility: hidden;
	margin-top : 10px;
	margin-top: 17px;
}

/*Sub level menu list items (undo style from Top level List Items)*/
#menu ul li ul li{
	display: list-item;
	float: none;
	text-align: left;
	margin: 0;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
#menu ul li ul li ul{
	top: 0;
}

/* Sub level menu links style */
#menu ul li ul li a{
	width: 180px; /*width of sub menus*/
	padding: 0px 15px;
	margin: 0;
	border-top-width: 0;
	border: 1px solid #CCCCCC;
}

#menu li .current_page_item , #menu li.current_page_ancestor.current_page_parent{
	color: #fff;
	background-color:#DC3522;
}


/* Holly Hack for IE \*/
* html #menu{height: 1%;} /*Holly Hack for IE7 and below*/
* html #menu ul li a{
	font: normal 10px Arial;
	width: 120px; /*width of sub menus*/
	padding: 7px 16px 7px;
	margin: 0;
	border-top-width: 0;
}


/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
	position: absolute;
	top: 9px;
	right: 7px;
}

.rightarrowclass{
	position: absolute;
	top: 6px;
	right: 5px;
}

/* ######### CSS for shadow added to sub menus  ######### */

.ddshadow{
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
}

.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
	opacity: 0.8;
}


/************************************************/
/* CONTENT */

#contenu{
	text-align: left;
	padding: 0 20px;
}

/*
	CSS for Slideshow.

License:
	MIT-style license.

Copyright:
	Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).
*/

.slideshow {
	display: block;
	position: relative;
	z-index: 0;
	background-image: "images/1.jpg";
}
.slideshow-images {
	display: block;
	overflow: hidden;
	position: relative;
}		
.slideshow-images img {
	display: block;
	position: relative;
	z-index: 1;
}		
.slideshow-thumbnails {
	overflow: hidden;
}

/*
Notes:
	The images div is where the slides are shown.
	Customize the visible / prev / next classes to effect the slideshow transitions: fading, wiping, etc.
*/

.slideshow-images {
	height: 300px;
	width: 979px;
}		
.slideshow-images-visible { 
	opacity: 1;
}	
.slideshow-images-prev { 
	opacity: 0; 
}
.slideshow-images-next { 
	opacity: 0; 
}
.slideshow-images img {
	float: left;
	left: 0;
	top: 0;
}	

/**
Notes:
	These are examples of user-defined styles.
	Customize these classes to your usage of Slideshow.
*/

.slideshow {
	height: 300px;
	margin: 0 auto;
	width: 979px;
	border: 1px solid #ccc;
}
.slideshow a img {
	border: 0;
}

/*
Notes:
	Customize the hidden / visible classes to affect the captions animation.
*/

.slideshow-captions {
	background: #000;
	bottom: 0;
	color: #FFF;
	font: normal 12px/22px Arial, sans-serif;
	left: 0;
	overflow: hidden;
	position: absolute;
	text-indent: 10px;
	width: 100%;
	z-index: 10000;
}
.slideshow-captions-hidden {
	height: 0;
	opacity: 0;
}
.slideshow-captions-visible {
	height: 22px;
	opacity: .7;
}

/*
Notes:
	Customize the hidden / visible classes to affect the controller animation.
*/

.slideshow-controller {
	background: url(../images/slide/controller.png) no-repeat;
	height: 42px;
	left: 50%;
	margin: -21px 0 0 -119px;
	overflow: hidden;
	position: absolute;
	top: 50%;
	width: 238px;
	z-index: 10000;
}
.slideshow-controller * {
	margin: 0;
	padding: 0;
}
.slideshow-controller-hidden { 
	opacity: 0;
}
.slideshow-controller-visible {
	opacity: 1;
}
.slideshow-controller a {
	cursor: pointer;
	display: block;
	height: 18px;
	overflow: hidden;
	position: absolute;
	top: 12px;
}
.slideshow-controller a.active {
	background-position: 0 18px;
}
.slideshow-controller li {
	list-style: none;
}
.slideshow-controller li.first a {
	background-image: url(../images/slide/controller-first.gif);
	left: 33px;
	width: 19px;
}
.slideshow-controller li.last a {
	background-image: url(../images/slide/controller-last.gif);
	left: 186px;
	width: 19px;
}
.slideshow-controller li.next a {
	background-image: url(../images/slide/controller-next.gif);
	left: 145px;
	width: 28px;
}
.slideshow-controller li.pause a {
	background-image: url(../images/slide/controller-pause.gif);
	left: 109px;
	width: 20px;
}
.slideshow-controller li.play a {
	background-position: 20px 0;
}
.slideshow-controller li.play a.active {
	background-position: 20px 18px;
}
.slideshow-controller li.prev a {
	background-image: url(../images/slide/controller-prev.gif);
	left: 65px;
	width: 28px;
}

/*
Notes:
	Customize the hidden / visible classes to affect the loader animation.
*/

.slideshow-loader {
	height: 28px;
	right: 0;
	position: absolute;
	top: 0;
	width: 28px;
	z-index: 10001;
}
.slideshow-loader-hidden {
	opacity: 0;
}
.slideshow-loader-visible {
	opacity: 1;
}

/*
Notes:
	Customize the active / inactive classes to affect the thumbnails animation.
	Use the !important keyword to override FX without affecting performance.
*/

.slideshow-thumbnails {
	bottom: -65px;
	height: 65px;
	left: 0;
	position: absolute;
	width: 100%;
}
.slideshow-thumbnails * {
	margin: 0;
	padding: 0;
}
.slideshow-thumbnails ul {
	height: 65px;
	left: 0;
	position: absolute;
	top: 0;
	width: 10000px;
}
.slideshow-thumbnails li {
	float: left;
	list-style: none;
	margin: 5px 5px 5px 0;
	position: relative;
}
.slideshow-thumbnails a {
	display: block;
	float: left;
	padding: 5px;
	position: relative; 
	border: 1px solid #ccc;
}
.slideshow-thumbnails a:hover {
	background-color: #FFFFFF !important;
	opacity: 1 !important;
}
.slideshow-thumbnails img {
	display: block;
}
.slideshow-thumbnails-active {
	background-color: #FFFFFF;
	opacity: 1;
}
.slideshow-thumbnails-inactive {
	background-color: #6d7af7;
	opacity: .5;
}

/************************************************/
/* FOOTER */

#pied-de-page {
	height: 160px;
	font-size: 18px;
	line-height: 25px;
	border-top: thin solid #ccc;
	clear: both;
	margin: 67px 0 0 0;
}

/* Footer Infos */

.infos {
	float: left;
	width: 293px;
	border-bottom: solid thin #ccc;
	padding: 10px 20px;
}

#adresse{
	text-align: left;
}

#tel{
	text-align: right;
}

/* Footer partie gauche*/

#icones {
	width: 250px; /* taille de debug IE */
	margin-top: 8px;
	float: left;
	margin-left: 16px;
}

.icones {
	height: 22px;
	width: 22px;
	margin: 7px;
	float: left;
	border: thin solid #ccc
}

#spa{
	background-image: url("../images/logos-footer/spa_bleu.gif");
}

#pc{
	background-image: url("../images/logos-footer/pc_bleu.gif");
}

#net{
	background-image: url("../images/logos-footer/net_bleu.gif");
}

#wifi{
	background-image: url("../images/logos-footer/wifi_bleu.gif");
}

#tele{
	background-image: url("../images/logos-footer/tv_bleu.gif");
}

#sat{
	background-image: url("../images/logos-footer/sat_bleu.gif");
}

#cheminee{
	background-image: url("../images/logos-footer/cheminee_bleu.gif");
}

#chien{
	background-image: url("../images/logos-footer/chien_bleu.gif");
}

#lavelinge{
	background-image: url("../images/logos-footer/ll_bleu.gif");
}

#parking{
	background-image: url("../images/logos-footer/parking_bleu.gif");
}

#table{
	background-image: url("../images/logos-footer/table_bleu.gif");
}

#enfants{
	background-image: url("../images/logos-footer/enfants_bleu.gif");
}

/* Footer partie droite*/

#bannieres{
	width: 260px;
	float: right;
	margin: 3px 9px 0 0;
}

.bannieres{
	float: left;
	margin: 8px 8px 0px 0px;
	background: no-repeat center left;
	border: 1px solid #CCCCCC;
}

#meteo {
	width: 87px;
	height: 29px;
	background-image: url("../images/logos-footer/meteo-france.png");
}

#france-voyage {
	width: 87px;
	height: 29px;
	background-image: url("../images/logos-footer/FranceVoyage.png");
}

#miam {
	width: 97px;
	height: 68px;	
	background-image: url("../images/logos-footer/miam_miam_dodo.png");
}

#fute {
	width: 43px;
	height: 68px;	
	background-image: url("../images/logos-footer/fute.png");
}