/* ***********************************************************	*/
/*	Tony ROCHON - CSS */
/* ***********************************************************	*/

/* ***********************************************************	*/
/* Déclaration Font */	
/* ***********************************************************	*/
	/*
		Dosis : SIL Open Font License, 1.1
		Pablo Impallari
		For more information visit:
		https://plus.google.com/114391601624281927771/about
	*/
		
	@font-face
	{
		font-family : "Font_Title_web"; 
		src : url('font/wendelinreduced_55normal-webfont.eot');
		src : 
			url('font/wendelinreduced_55normal-webfont.eot?') format('eot'), 
			url('font/wendelinreduced_55normal-webfont.woff') format('woff'), 
			url('font/wendelinreduced_55normal-webfont.svg#abcd') format('svg'), 
			url('font/wendelinreduced_55normal-webfont.ttf') format('truetype');
	}
	
	
	
/* ***********************************************************	*/

/* ***********************************************************	*/
/* Element Par defaut */
/* ***********************************************************	*/

	body 
	{
		margin: 0px;  padding: 0px;
		font-weight : normal; 
		font-size : 14px; 
		font-family: arial,helvetica,sans-serif; 
		color :#FFFFFF;
		
		background:#333333 url('background.jpg') repeat-x top left;
	}

	

	a, a:visited
	{ 
		color : #33AAEE;
		text-decoration: none; 
		cursor:pointer;
	}

	a:hover, a:active{color:#FFCF40; text-decoration:none;}
	
	strong{color:#000000; font-weight:bold;}

	.clear{clear:both; line-height:1px; margin:0px; padding:0px; display:block;}

/* ***********************************************************	*/
/* Header / MENU */
/* ***********************************************************	*/

	.zone_menu
	{
		position:absolute;
		width:40%;
		height:100%;
		text-align:right;
	}
	
	.menu
	{
		width:60%;
		float:right;	
		text-align:right;
	}
	
	.menu .logo
	{
		margin-top:10px;
		width:100%;
		max-width:245px;
		clear:both;
	}
	
	.menu .item, .menu .item_select, .menu .sous_item, .menu .sous_item_select
	{
		width:100%;
		padding-top:4px;
		min-height:22px;
		cursor:pointer;
		clear:both;
		
		transition-property: background;
		transition-duration: 300ms;
		transition-timing-function : ease-out ;
		transition-delay: 0ms;
	}
	
	
	
	.menu .item div, .menu .item_select div, .menu .sous_item div, .menu .sous_item_select div
	{
		float:right;
		clear:both;
		width:100%;
		max-width:245px;
		text-align:left;
	}
	
	
	
	
	.menu .item div a, .menu .item_select div a{font-size:1.2em; font-family:arial,helvetica,sans-serif; color:#FFFFFF;}
	
	.menu .item_select{background:#a1d22e;}
	.menu .item_select div a{font-weight:normal; color:#333333;}
	
	.menu .item:hover, .menu .item_select:hover
	{
		background:#dbf898;
		transition-property: background;
		transition-duration: 300ms;
		transition-timing-function : ease-out ;
		transition-delay: 0ms;
	}
	.menu .item:hover div a, .menu .item_select:hover div a
	{font-weight:normal; color:#333333;}
	
	
	
	.menu .sous_item, .menu .sous_item_select {min-height:20px; padding-top:1px;}
	.menu .sous_item div, .menu .sous_item_select div{max-width:220px;}
	.menu .sous_item div a, .menu .sous_item_select div a{font-size:1em; font-family:arial,helvetica,sans-serif; color:#99938b;}
	
	.menu .sous_item_select{background:#a1d22e;}
	.menu .sous_item_select div a{font-weight:normal; color:#333333;}
	
	.menu .sous_item:hover, .menu .sous_item_select:hover{background:#dbf898;}
	.menu .sous_item:hover div a, .menu .sous_item_select:hover div a{font-weight:normal; color:#333333;}
	
/* ***********************************************************	*/
/* Page de contenu */
/* ***********************************************************	*/
	
	
	.zone_contenu
	{
		position:absolute;
		width:60%;
		left:40%;
	}
	
	.contenu
	{
		width:60%;
		min-height:1000px;
		min-width:320px;
		background:#000000;
		color:#FFFFFF;
		padding-bottom:50px;
	}
	
	.visuel_header{display:block; clear:both; width:100%;}
	
	h1
	{
		margin:0px; padding:0px;
		padding-top:0px;
		text-align:right;
		color:#a1d22e;
		font-size:2.2em;
		line-height:1em;
		font-family : Font_Title_web, arial,helvetica,sans-serif;
		text-transform: uppercase;
		font-weight:normal;
		border-top:7px solid #a1d22e;
		padding-right:40px;
	}
	
	h2
	{
		margin:0px; padding:0px;
		padding-top:40px;
		margin-bottom:0px;
		
		color:#FFFFFF;
		font-size:1.7em;
		line-height:1em;
		font-family : Font_Title_web, arial,helvetica,sans-serif;
		font-variant:small-caps;
		font-weight:normal;
		
		border-bottom:1px solid #FFFFFF;
	}
	
	h3
	{
		margin:0px; padding:0px;
		padding-top:10px;
		
		color:#FFFFFF;
		font-size:1em;
		line-height:1em;
		font-family : Font_Title_web, arial,helvetica,sans-serif;
		font-weight:bold;
		color:#ffe9a6;
	}
	
	
	.contenu_page{padding:0px 40px; padding-bottom:100px; }

	
	.paragraphe{padding-left:20px; padding-top:10px; font-size:1em;}
	.paragraphe ul{list-style:square; margin:0px; padding:0px; margin-left:20px;}
	.paragraphe ul li{padding-bottom:5px;}
	
	.paragraphe a{color:#00FF00;}
	.paragraphe a:hover{color:#FFFF00;}
	
	.paragraphe strong{font-weight:bold;}
	
/* *********************************************** */
/* Liste IMAGE */
	.liste_image{display:block; clear:both;}

	.zone_image
	{
		float:left;
		height:75px;
		width:75px; 
		padding:0px; margin:0px;
		border:1px solid #999999;

		margin-right:10px;
		margin-top:10px;

		cursor:pointer;
	}
	
	.zone_image img
	{
		width:75px; 
		height:75px;
		
		border:0px solid #999999;
		border-radius:0px;
	}
	
	.zone_image:hover img{border-color:#FFFF00;}
	
	
/* ***********************************************************	*/
/* Page d'accueil */
/* ***********************************************************	*/
	.homepage_contenu
	{
		width:60%;
		min-height:1000px;
		min-width:320px;
		background:#000000;
		border-left:0px solid #a1d22e;
	}
	
	.homepage_visuel{width:100%; padding-top:70px;}
	
	.homepage_titre, .homepage_version
	{
		font-size:1.9em;
		line-height:0.8em;
		color:#a1d22e;
		
		font-family : Font_Title_web, arial,helvetica,sans-serif;
		text-transform: uppercase;
		font-weight:normal;
	}
	
	.homepage_titre{float:left;}
	.homepage_version{float:right;}
	
	.homepage_visuel .visuel_home{clear:both; width:100%; border-top:7px solid #a1d22e;}
	
	.homepage_texte{padding:20px; text-align:center; margin-top:0px;}
	
/* ***********************************************************	*/
/* Page animation */
/* ***********************************************************	*/
	
	.liste_animation{margin:auto; width:440px; margin-top:20px;margin-bottom:20px;}
	.liste_animation .animation{float:left; margin-left:10px; cursor:pointer;}
	.liste_animation .animation div
	{
		position:absolute; 
		width:100px; 
		height:220px; 
		background:#000000; 
		margin-top:91px; 
		opacity:0.7;
		
		transition-property: opacity;
		transition-duration: 300ms;
		transition-timing-function : ease-out ;
		transition-delay: 5ms;
	}
	.liste_animation img{width:100px;}
	
	.liste_animation .animation:hover div{opacity:0.0;}
	
	.link_video{color:#00FF00; cursor:pointer; font-size:1.1em; font-weight:normal;}
	.link_video	img
	{ 	
		opacity:0.5;
		transition-property: opacity;
		transition-duration: 300ms;
		transition-timing-function : ease-out ;
		transition-delay: 5ms;
	}
	.link_video:hover{color:#FFCC00;}
	.link_video:hover img{opacity:1;}
/* ***********************************************************	*/
/* Page d'ERREUR */
/* ***********************************************************	*/

	.zone_message_erreur
	{
		padding-top:100px;
	}
	
	.message_erreur
	{
		padding-left:250px;
		padding-top:20px;
		max-width:400px;
		min-height:200px;
		background: url('visuel_erreur.png') no-repeat 20px 0px
	}

	.message_erreur .titre_erreur
	{
		margin-top:20px;
		margin-bottom:10px;
		color:#FF0000;
		font-size:1.6em;
	}

	.message_erreur .text_erreur
	{
		color:#FF0000;
		font-size:1.1em;
	}	
	
	.message_erreur .erreur_msg
	{
		padding:10px 20px;
	}
	
	.zone_message_erreur .erreur_info
	{
		padding:10px;
	}
	

/* ***********************************************************	*/	
/* LightBox				*/
/* ***********************************************************	*/

.KODAMA_lightbox
{
	display:none;
}	

#KODAMA_zone_LB
{
	display:none;
	position:fixed;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:100001;
}

.KODAMA_zone_LB_background
{
	z-index:1;
	display:block;
	position:fixed;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	background:#000000;
	opacity:0.8;
	
}


#KODAMA_LB
{
	z-index:10;
	position:absolute;
	width:100%;
	height:100%;
}



#KODAMA_LB_Close_BTN
{
	float:right;
	
	margin:0px; padding:0px;
	cursor:pointer;
	width:40px;
	height:40px;
	
	margin-right:10px;

	background:url('btn_close.png') no-repeat top right;
}

.KODAMA_LB_contenu 
{
	position:relative;
	margin:auto;

	margin-top:10%;
	width:90%;
	max-width:800px;
	min-width:400px;
	
	height:50%;
	max-height:500px;
	min-height:300px;
	
	border-width: 8px;
	border-color: #C3BBB5;
	border-style: solid;
	border-radius: 30px;
	
	background-color: #FFFFFF;
	color:#333333;
}



.KODAMA_LB_contenu h2
{
	padding:0px; margin:0px;
	padding-top:20px;
	margin-left:20px;
	margin-right:20px;
	margin-bottom:10px;
	display:block;
	clear:none;

	background:none;
	font-weight:normal;
	text-align:left;
	
	font-family: arial,helvetica,sans-serif; 
	font-size:2.1em;
}

.KODAMA_LB_contenu .KODAMA_LB_text
{
	overflow:auto;
	height:90%;
	padding:0px 20px;
	max-height:700px;
	text-align:left;
}


/* ****************************************************** */
/* Gestion Largeur  Liste animation */
	@media all and (min-width:1030px) and (max-width: 1285px){.liste_animation{width:220px;}}
	@media all and (min-width:935px) and (max-width: 1030px){.liste_animation{width:440px;}}
	@media all and  (max-width:935px){.liste_animation{width:220px;}}
	
/* ****************************************************** */
/* Desktop >> entre 700px et 1000px; >> iPad */
	@media all and (min-width: 700px) and (max-width: 1030px)
	{
		.zone_menu{width:30%;}
		.menu{width:70%;}
		.menu .sous_item div, .menu .sous_item_select div{max-width:190px;}

		.homepage_contenu, .zone_contenu{width:70%; left:30%;}
		.contenu{width:70%;}
		
		.contenu_page{padding:0px 20px;}
	}

/* ****************************************************** */
/* Config >> entre 550px et 700px; */
	@media all and (min-width: 550px)  and  (max-width:700px)
	{
		.zone_menu{width:30%;}
		.menu{width:80%;}
		.menu .sous_item div, .menu .sous_item_select div{max-width:120px;}
		
		.homepage_contenu, .zone_contenu{width:70%; left:30%;}
		.contenu{width:70%;}
		.contenu_page{padding:0px 20px;}
	}
	
/* ****************************************************** */
/* Config >>  Inferieur à 550 px; >> Mode sans Menu */
	@media all and  (max-width:550px)
	{
		.zone_menu{width:30%;}
		.menu{width:80%;}
		
		.homepage_contenu, .zone_contenu{width:70%; left:30%;}
		.contenu{width:70%;}
		.contenu_page{padding:0px 20px;}
	}