/* ETAPE 1 */
/* Définition des polices personnalisées */
@font-face
{
	font-family: 'Led24';
	src: url('../polices/24_LED.eot');
	src: url('../polices/24_LED.eot?#iefix') format('embedded-opentype'),
		url('../polices/24_LED.woff') format('woff'),
		url('../polices/24_LED.ttf') format('truetype'),
		url('../polices/24_LED.svg#24_LED') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face
{
	font-family: 'Dakota';
	src: url('../polices/Dakota.ttf');
	src: url('../polices/Dakota.eot?#iefix') format('embedded-opentype'),
		url('../polices/Dakota.woff') format('woff'),
		url('../polices/Dakota.ttf') format('truetype'),
		url('../polices/Dakota.svg#Dakota') format('svg');
	font-weight: normal;
	font-style: normal;
}


/* ETAPE 2 */
/* Eléments principaux de la page */

html, body
{
	height: 100%;
	width: 100%;
}

body
{
	margin: 0px;
	padding: 0px;
    background-color: #ffffff;
    font-family: 'Dakota', Arial, sans-serif;
    color: #494c4b;
}

img
{
	max-width: 100%;
	border: none;
}

a
{
    color: #494c4b;
    text-decoration: none;
}

a:hover
{
    color: #494c4b;
}

#bloc_page
{
	position: relative;
	min-height: 100%;
}


/* ETAPE 3 */
/* Index */

#titre_principal
{
	text-align: center;
	font-family: 'Led24', serif;
	padding-top: 43px;
	padding-bottom: 42px;
}

.titre
{
    font-weight: bold;
	font-size: 2.0em;
	border-top: 3px solid;
	border-bottom: 3px solid;
	padding-top: 10px;
	padding-bottom: 10px;
}

img
{
	max-width: 100%;
}

#index
{
	text-align: center;
/*	padding-top: 15px;*/
	padding-top: 5px;
}

#imgIndex
{
	text-align: center;
	margin: auto;
	width: 65%;
}

#langue
{
	text-align: center;
	padding-top: 10px;
	padding-bottom: 15px;
}

#FR
{
	padding-right: 8px;
}

#UK
{
	padding-left: 8px;
}


/* ETAPE 4 */
/* Header */

header
{
	position: fixed;
	z-index: 90;
	width: 100%;
	height: 26px;
	background-color: #494c4b;
}

header a
{
    color: #ffffff;
    text-decoration: none;
}

header a:hover
{
    color: #ffffff;
}

#headerTitle
{
	color: #ffffff;
	font-size: 0.8em;
	padding-left: 10px;
	display: inline-block;
	vertical-align: middle;
}

#links
{
	display: inline-block;
	vertical-align: middle;
	text-align: right;
	margin-top: 1px;
	margin-bottom: 1px;
	padding-right: 10px;
	float: right;
	clear: both;
	width: 58px;
}


/* ETAPE 5 */
/* Navigation */

nav
{
	position: fixed;
	margin-top: 26px;
	padding-top: 20px;
	padding-left: 10px;
	width: 210px;
	float: left;
}

nav h1
{
	font-size: 1.2em;
	margin-top: 0px;
	margin-bottom: 0px;
}

nav h2
{
	font-size: 0.9em;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-left: 25px;
}

nav h3
{
	font-size: 0.7em;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-left: 50px;
}

nav ul
{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

nav ul.niveau1
{
	padding: 0px;
}

nav ul ul
{
	display: none;
}

nav li
{
	margin-right: 0px;
}

nav li:hover ul.niveau2, nav li li:hover ul.niveau3
{
	display: block;
}


/* ETAPE 6 */
/* Pages */

section
{
	margin-left: 220px;
	padding-top: 41px;
}

/* Page d'accueil */
#accueil
{
	margin: auto;
	width: 80%;
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 10px;
}

/* Galerie */
#galerie
{
}

#galerieTxt
{
	padding-right: 20px;
}

#galerieTxt h1
{
	font-size: 1em;
	margin-top: 0px;
	margin-bottom: 15px;
}

#galerieTxt p
{
	font-size: 0.9em;
	margin-top: 0px;
	margin-bottom: 10px;
	text-align: justify;
}

#galerieImg
{
	margin-top: 15px;
	margin-bottom: 0px;
	padding-bottom: 20px;
	text-align: justify;
}
	
#galerieImg img
{
	padding-right: 10px;
	padding-bottom: 0px;
}

/* Image Full */
#hideshow
{
	display: block;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 99;
}

#imgFull
{
	width: 100%;
	height: 100%;
	position: fixed;
	text-align: center;
	background-color: #000000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* Transparence sous IE 8 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* Transparence sous IE > 8 */
	background-color: rgba(0, 0, 0, 0.8);
}

.photo
{
	vertical-align: middle;
}

#imgZone
{
	position: relative;
	height: 100%;
	width: 100%;
}

#imgElements
{
	position: relative;
	width: auto;
	overflow: hidden;
}

.strut, #imgElements
{
	/* on permet à ces éléments de s'aligner verticalement */
	display: inline-block;
	vertical-align: middle;
}

.strut
{
	/* hauteur de la fenêtre, par rapport à laquelle les éléments vont être alignés */
	height: 100%;
}

#titleFull
{
	position: absolute;
	top: -25%;
	width: 100%;
	z-index: 10;
	background-color: #000000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* Transparence sous IE 8 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); /* Transparence sous IE > 8 */
	background-color: rgba(0, 0, 0, 0.6);

	-webkit-transition: top 1s ease;
	-moz-transition: top 1s ease;
	-ms-transition: top 1s ease;
	-o-transition: top 1s ease;
	transition: top 1s ease;
}

#titleFull h1
{
	color: #ffffff;
	font-size: 1.5em;
	font-weight: bold;
	padding-top: 0px;
	padding-bottom: 0px;
	
}

#imgElements:hover #titleFull
{
	top: 0px;
}

#prevFull
{
	position: absolute;
	width:10%;
	top: 0px;
	left: 0px;
	bottom: 0px;
	z-index: 97;
	text-align: left;
}

#prev
{
	visibility: hidden;
	height: 100%;
}

#nextFull
{
	position: absolute;
	width:10%;
	top: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 98;
	text-align: right;
}

#next
{
	visibility: hidden;
	height:100%;
}

#closeFull
{
	position: absolute;
	top: 2%;
	right: 2%;
	z-index: 99;
	visibility: hidden;
}

#prevFull:hover #prev, #nextFull:hover #next, #imgElements:hover #closeFull
{
	visibility: visible;
}

#infosFull
{
	position: absolute;
	bottom: -50%;
	width: 100%;
	z-index: 20;
	background-color: #000000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* Transparence sous IE 8 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* Transparence sous IE > 8 */
	background-color: rgba(0, 0, 0, 0.8);
	
	-webkit-transition: bottom 1s ease;
	-moz-transition: bottom 1s ease;
	-ms-transition: bottom 1s ease;
	-o-transition: bottom 1s ease;
	transition: bottom 1s ease;
}

#infosFull p
{
	color: #ffffff;
	font-size: 0.7em;
}

#infosFull strong
{
	color: #ff0000;
	font-size: 1.5em;
	font-weight: bold;
	padding-top: 0px;
	padding-bottom: 0px;
}

#imgElements:hover #infosFull
{
	bottom: 0px;
}

/* Infos */
#infos
{
	margin: auto;
	width: 80%;
	display: inline-block;
	vertical-align: middle;
	padding-top: 10px;
	padding-bottom: 30px;
}

/* Contact */
#contact
{
	width: 100%;
	height: 100%;
}

#contactDetail
{
	display: inline-block;
	vertical-align: middle;
	width: 100%;
}

#mail
{
	border-radius:15px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	
	margin-top: 5%;
	margin-left: 2px;
	background-color: #494c4b;
	
	width: 70%;
	margin-bottom: 10px;
	padding: 15px 19px 7px 0px;
	text-align: right;
}

#mail label 
{
	vertical-align: top;
	padding-right: 10px;
	width: 25%;
	float: left;
	
	font-size: 0.9em;
	color: #ffffff;
}

#mail input, #mail textarea
{
	width: 70%;
	background: #ffffff;
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	
	border: 1px solid #dedede;
	font-family: 'Dakota', Arial, sans-serif;
	font-size: 0.9em;
	color: #494c4b;
	padding: 3px;
	margin-bottom: 3px;
}

#mail input:focus, #mail textarea:focus
{
	border: 1px solid #97d6eb;
}

#mail textarea
{
	height: 200px;
	font-family: 'Dakota', Arial, sans-serif;
}

#button
{
	margin-top: 3px;
	text-align: right;
	padding-right: 6px;
}

#erreur
{
	color: #ff0000;
	text-align: center;
	font-weight: bold;
	padding-right: 6px;
}

#button, #erreur
{
	display: inline-block;
}

form #submit
{
	background:url('../img/fondButton.png') repeat-x;
	text-align: center;
	width: 100px;
	height: 30px;
	font-weight: bold;
	border: 1px solid white;
	cursor: pointer;
	color: #ffffff;
}

/* Shop */
#shop
{
	width: 100%;
	height: 100%;
	padding-bottom: 20px;
}

#shop h1
{
	font-size: 1.2em;
	margin-top: 0px;
	margin-bottom: 15px;
	padding-right: 10px;
	color: #ff0000;
}

#shop h2
{
	font-size: 1em;
	margin-top: 40px;
	margin-bottom: 0px;
	text-decoration: underline;
}

#shop p
{
	margin-bottom: 0px;
	padding-right: 10px;
}

.shopZone
{
	margin-top: 15px;
	margin-bottom: 0px;
	position: relative;
	height: 100%;
	width: 25%;
	display: inline-block;
}

.shopElements
{
	position: relative;
	padding-bottom: 0px;
	overflow: hidden;
}

.shopPhoto
{
	vertical-align: middle;
	/*height: 204px;*/
}

.shopButton
{
	position: absolute;
	bottom: -20%;
	left: 0px;
	right: 0px;
	width: auto;
	cursor: pointer;
	text-align: center;
	visibility: hidden;
	
	-webkit-transition: bottom 1s ease;
	-moz-transition: bottom 1s ease;
	-ms-transition: bottom 1s ease;
	-o-transition: bottom 1s ease;
	transition: bottom 1s ease;
}

.command
{
	vertical-align: middle;
}

.shopElements:hover .shopButton
{
	bottom: 0%;
	visibility: visible;
}

.clic
{
	cursor: pointer;
}

/* Blog */
#blog
{
	width: 98%;
	text-align: left;
	margin: 0px;
	padding: 1%;
}

#articleList
{
	list-style-type: none;
	padding: 5px 0px 0px 5px;
}

#articleList li
{
	display: inline-block;
	vertical-align: top;
	margin: 0px 5px 15px 0px;
}

.articleElements
{
	position: relative;
	width: 200px;
	height: 200px;
}

/* pour supprimer les marges automatiques sur une image */
.articleElements img
{
	display: block;
}

.titreArticle
{
	position: absolute;
	bottom: 0px;
	width: 96%;
	z-index: 20;
	background-color: #000000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* Transparence sous IE 8 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* Transparence sous IE > 8 */
	background-color: rgba(0, 0, 0, 0.8);
	text-align: left;
	color: #ffffff;
	padding-left: 2%;
	padding-right: 2%;
}

/* Affichage d'un article */
#article
{
	position: relative;
	border: 1px solid;
	padding: 2% 2% 3% 2%;
	margin: auto;
	width: 100%;
	max-width: 750px;
}

#articleTitle
{
	font-size: 1.3em;
	text-align: center;
	font-weight: bold;
	margin-bottom: 10px;
}

#articleDate
{
	margin: 0px 10px 10px 0px;
	font-size: 0.9em;
	text-align: right;
	font-style: italic;
}

#articleBloc ul
{
	width: 100%;
	max-width: 750px;
	height: 100%;
	margin: auto;
	margin-bottom: 10px;
	padding: 0px;
}

#articleBloc li
{
	display: inline-block;
	vertical-align: top;
	height: 100%;
}

#articleBloc .articleImg
{
	max-width: 100%;
	padding: 5px;
	text-align: center;
}

#articleBloc .articleImgZone
{
	position: relative;
}

#articleBloc .articlePhoto
{
	vertical-align: middle;
	cursor: pointer;
}

#articleBloc .articleImgLegend
{
	position: absolute;
	bottom: 0px;
	width: 96%;
	z-index: 20;
	background-color: #000000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* Transparence sous IE 8 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* Transparence sous IE > 8 */
	background-color: rgba(0, 0, 0, 0.8);
	text-align: left;
	color: #ffffff;
	padding-left: 2%;
	padding-right: 2%;
}

#articleBloc .articleTxt
{
	width: 98.7%;
	height: 100%;
	padding-left: 5px;
	padding-right: 10px;
	text-align: justify;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;
}

#articleBloc .articleImg, #articleBloc .articleTxt
{
	vertical-align: middle;
}

/*
.newsShare
{
	position: absolute;
	bottom: 4%;
	right: 10%;
	display: inline-block;
}

.twitter, .facebook, .google
{
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
}

.newsShare img
{
	vertical-align: middle;
}

.count
{
	font-weight: bold;
	display: inline-block;
}
*/

#articleFooter
{
	position: absolute;
	text-align: right;
	width: 96%;
	height: 32px;
	right: 2%;
	bottom: 1%;
}

#articleShare
{
	display: inline-block;
	vertical-align: middle;
}

.twitterShare
{
	width: 32px;
	height: 32px;
	display: inline-block;
	vertical-align: middle;
	background-color: #ffffff;
}

.twitterShare:hover
{
	background-color: #00abf1;
}

.facebookShare
{
	width: 32px;
	height: 32px;
	display: inline-block;
	vertical-align: middle;
	background-color: #ffffff;
}

.facebookShare:hover
{
	background-color: #3b5998;
}

.googleShare
{
	width: 32px;
	height: 32px;
	display: inline-block;
	vertical-align: middle;
	background-color: #ffffff;
}

.googleShare:hover
{
	background-color: #d0422a;
}

#backTop
{
	margin: 10px 20px 10px 0px;
	text-align: right;
	font-style: italic;
}

/* ETAPE 7 */
/* Footer */

footer
{
	width:100%;
	left:50%;
	margin-left:-50%;
	position: absolute;
	bottom: 0px;
	font-size: 0.6em;
	text-align: center;
}

#mentionsLegales
{
	display: block;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 99;
}

#cadreML
{
	width: 100%;
	height: 100%;
	position: fixed;
	text-align: center;
	background-color: #000000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* Transparence sous IE 8 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* Transparence sous IE > 8 */
	background-color: rgba(0, 0, 0, 0.8);
}

#ML_Zone
{
	position: relative;
	height: 100%;
	width: 100%;
}

#ML_Elements
{
	position: relative;
	width: 85%;
	height: 75%;
	overflow: hidden;
	border: 2px solid #494c4b;
	background-color: #ffffff;
	overflow-y: auto;
	padding: 1%;
	
	/* on permet à ces éléments de s'aligner verticalement */
	display: inline-block;
	vertical-align: middle;
}

#ML_Elements h1
{
	font-size: 2.5em;
	font-weight: bold;
	padding-bottom: 0.5%;
}

u
{
    text-decoration: none;
    border-bottom: 2px solid;
}

#ML_Elements p
{
	font-size: 1em;
	padding-top: 0.5%;
	padding-right: 1%;
	padding-bottom: 0.5%;
	padding-left: 1%;
	text-align: left;
}

#ML_Elements a
{
	color: #0000ff;
	text-decoration: underline;
}

#ML_close
{
	position: absolute;
	top: 2%;
	right: 2%;
	z-index: 99;
}