/*------------------------------------------------------------------------------
// Author Matthieu MOULHERAT
// Copyright TerrOiko 2014
//------------------------------------------------------------------------------
*/

.header
{
	height              : 200px;
	position            : relative;
	width               : 100%;
	padding-bottom      : 0em;
	padding-top         : 1em;

}




#header_contact, #simoiko-tool-link
{	
	height              : 100px;
	width               : 200px;
	position            : absolute;
	margin		    : 0px 0px 0px 0px;
	padding-left	    : 30px;
	right		    : 0px;
	text-align          : left;
	display             : inline-block;
	color		    : white;
	font-size           : 16px;
	font-weight         : bold;
	vertical-align      : middle;
	text-shadow         : 1px 1px 0.2em #6a584e;
	text-decoration     : none;
	text-transform      : uppercase;
}

#header_contact
{
	top: 30px;
	
	background-image          :
		url( '../imgs/enveloppe.png' ),
		linear-gradient( /* main gradient */ to right,
			#9cba0f 0%,
			 #c8d100 100%),		
		/*linear-gradient(        black shadow
	     to right,
			 rgba( 0, 0, 0, 0.5) 0%,
			 transparent 2px,
			 transparent 100% ),*/
		/*linear-gradient(         retour 
			 145deg,
			 white 0%,
			 #9cba0f 50%,
			 transparent 51%,
			 transparent 100% ),*/
		linear-gradient(       /* left diag */
		  -60deg,
		  #9cba0f 0%, 
			#9cba0f 50%,
			rgba( 156, 186, 15, 0) 52%,
			transparent 100%);	
	
	background-size: 
		64px 50px, 
		100% 23px,  /* main gradient */
		/*2px 21px,    /* black shadow */
		/*30px 38px,    /* retour */
		23px 23px;    /* left diag */
	background-position : 
		140px 0px,  /* ENVELOPPE */
		20px 20px,   /* main gradient */
		/*140px 40px,    /* black shadow */
		/*140px 31px,    /* retour */
		0px 20px;    /* left diag */
	background-repeat : no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
	padding-top : 20px;
	margin-top : -20px;
	padding-bottom : 20px;
	margin-bottom : -20px;
	
}

#simoiko-tool-link
{
	
	top                 : 75px;	
	
	background-image          :
		url( '../imgs/clef.png' ),
 		linear-gradient(       /* main gradient */
			 to right,
			 #9cba0f 0%,
			 #c8d100 100%),
		/* linear-gradient(       main gradient 
			 to right,#d2c9c4 0%, #96817c 80%),*/
		/*linear-gradient(         black shadow 
	     to right,
			 rgba( 0, 0, 0, 0.5) 0%,
			 transparent 2px,
			 transparent 100% ),*/
		/*linear-gradient(         retour 
			 145deg,
			 white 0%,
			 #9cba0f 50%,
			 transparent 51%,
			 transparent 100% ),*/
		linear-gradient(       /* left diag */
		  60deg,
		  transparent 0%, 
			rgba( 156, 186, 15, 0) 50%,
			#9cba0f 52%,
			#9cba0f 100%);			
	
	background-size: 
		50px 35px,
		100% 23px,  /* main gradient */
		/*2px 21px,    /* black shadow */
		/*30px 38px,    /* retour */
		23px 23px;    /* left diag */
	background-position : 
		150px 15px,  /* clef */
		20px 20px,   /* main gradient */
		/*140px 40px,    /* black shadow */
		/*140px 31px,    /* retour */
		0px 20px;    /* left diag */
	background-repeat : no-repeat, no-repeat, no-repeat, no-repeat;
	padding-top : 20px;
	margin-top : -20px;
	padding-bottom : 20px;
	margin-bottom : -20px;
	
	
}
/*
#simoiko-tool-link:after
{
	 content : '';
	height              : 50px;
	width               : 26px;
	position            : absolute;
	right               : -26px;
	top                 : 0px;
	background-image          : 
		 linear-gradient(
			 to right,
			 #9cba0f 0%,
			 #9cba0f 100% ),
		linear-gradient(
	     to right,
			 rgba( 0, 0, 0, 0.5) 0%,
			 transparent 2px,
			 transparent 100% ),
		linear-gradient(
			 145deg,
			 white 0%,
			 #9cba0f 50%,
			 transparent 51%,
			 transparent 100% );
	background-repeat   : no-repeat, no-repeat, no-repeat;
	background-position : 0px 0px, 0px 12px, 0px 12px;
	background-size     : 30px 23px, 30px 30px, 30px 38px;
}*/

ul.localization
{
	display          : inline-block;
	position         : absolute;
	right            : 20px;
	top              : 105px;
	padding          : 0.5em;
	z-index          : 20;
}

ul.localization li
{
	display : inline;
}

ul.localization li a
{
	color               : transparent;
	background-size     : auto 16px;
	background-repeat   : no-repeat, no-repeat;
	background-position : center;
	width               : 32px;
	display             : inline-block;
}

/*ul.localization li a.auto-lng
{
	background-image    : url( '../imgs/wizard.svg' );
}*/

ul.localization li a.fre
{
	background-image    : url( '../imgs/flags/fre.png' );
}

ul.localization li a.eng
{
	background-image    : url( '../imgs/flags/eng.png' );
}

ul.localization li a.active
{
  text-decoration : underline;
}

.menu_bar
{
	height              : 40px;  /* englober les bordures */
	padding-top         : 15px;	
	position            : relative;
	top                 : -75px;

	width               : 100%;
	margin              : 0px;
	padding		    : 0px;
	z-index             : 10;
	margin-bottom       : -100px;
	/**
		ATTENTION si une zone clickable se trouve dans cette zone elle sera inaccessible
	*/
	
}

ul.menu
{

	/*background: linear-gradient(
			60deg,
			transparent 0%, transparent 24px, #f3f2f0 25px,  #d2c9c4 20%,#95817b 50%,
			 #6c5955 80% );*/

	background: linear-gradient(60deg,transparent 0%, white 19px,   #d2c9c4 80% );	
	position : absolute;
	display : inline-block;
	left: 0px;	
	right : 0px;
	/*height : 50px;*/
	padding : 0px;
	margin : 0px;
}


ul.menu2
{
		background : linear-gradient(to right, #6b5955 0%, #6b5955  100%);	
	position : absolute;
	display : inline-block;
	top: 6px;
	/*max-width: 50%;*/
	left: 0px;
	right : 0px;
	height : 39px;
	padding : 0px;
	margin : 0px;

}

li.menu
{
	float : left;
	margin : 0px 0px 0px 0px;
	padding : 0px 0px 0px 0px;
	list-style : none;
	display : inline-block;
	height : 100%;
	position : relative;
	background-color: transparent;
}

li.menu ul
{
	margin-top : 6px;
	margin-left : -20px;
	margin-right : 0px;
	margin-bottom : 6px;
	

}

li.button
{
	list-style : none;
	display    : inline-block;

	background : linear-gradient(60deg, transparent 0%, transparent 19px, #95817b 20px, #7c6863 50%, #6b5955  100%);	
	margin : 0px 0px 00px -42px;
	
	padding-right: 42px;
}


li.menu:last-child ul li.button
{
	padding-right : 0px;
	
}

li.button ul
{
	list-style : none;
	display    : inline-block;
	height     : 100%;
	width : 100%;
	margin:0px;
	padding:0px;
}

li.button a, .dropdown ul li a
{
	display : inline-block;
	position : relative;
	padding: 10px 10px 10px 30px;
	color : white;
	font-size : 16px;
	font-weight : bold;
	text-align : left;
	vertical-align : middle;
	text-decoration : none;
}

li.button a:hover, .dropdown ul li a:hover
{
	
	text-shadow: 2px 2px 0.4em #d2c9c4;
}

li.button a.active, .dropdown ul li a.active
{
	text-decoration : underline;
		
}

li.button a
{
	text-transform: uppercase;
}

.dropdown ul li a
{
	/*text-transform: capitalize;*/
}

.dropdown
{
	position : absolute;
	width : 100%;
	-webkit-transform: scaleY(0);
    transform: scaleY(0); 
	-webkit-transform-origin: top;   
    transform-origin: top;
    transition: transform 0.26s ease, -webkit-transform 0.26s ease;
	padding-right : 23px;
	overflow : hidden;
}

.dropdown.displayed
{
    transform: scaleY(1);   
	-webkit-transform: scale(1);
}


.dropdown ul
{
	position : relative;
	padding-right:23px;
	width : 100%;
}

.dropdown, .dropdown ul li
{
	list-style : none;
}

.dropdown ul li
{
	min-height : 40px;
	width : 100%;
	padding-right:23px;
	margin : 0px 0px 0px 0px;
}

.dropdown ul li:nth-child(2n+0)
{
	background-color: #95817b;
	
	/*height : 40px;*/
} 

.dropdown ul li:nth-child(2n+1)
{
    background-color:  #95817b;
	/*height : 40px;*/
} 
/*
.visionneuse:before 
{	
	content       : 'Cliquez pour plus d\'images:';
	font-weight : bold;
	border-bottom : solid 1px black;
	width : 100%;
	display : block;
	padding-bottom : 0.5em;
	margin-bottom : 0.5em;
}*/

.visionneuse.max:before 
{	
	content : '';
}

.visionneuse
{
	width : 100%;
	background-color:rgba(126,107,96,0.15);
	box-shadow: 10px 10px 5px #888888;
	margin-left:1em;
	margin-bottom:1em;
	margin-left:1em;
	margin-right:1em;
	cursor : pointer;
	/*transition : width 2s, height 2s, background-color 2s, left 2s, top 2s, max-width 2s, max-height 2s, opacity 2s, transform 2s;*/
	transition-property : opacity, transform, left, top;
	transition-duration: 2s;
	transition-timing-function: ease;
}
/*
.visionneuse.max
{
	display : block;
	background-color : rgba(0,0,0,0.8);
	position         : fixed;
	top              : 50%;
	left             : 50%;
	max-width        : 0px;
	max-height       : 0px;
	z-index          : 20;
	overflow         : hidden;
	width : 100%;
	height : 100%;
	padding : 0 0 0 0;
	box-shadow: none;
	opacity : 0;
	color : white;
	transform : rotate( 180deg );	
	-webkit-transform: rotate( 180deg );	
}

.visionneuse.max.visible
{
	top : 0px;
	left : 0px;
	max-width : 100%;
	max-height : 100%;
	padding : 1em 1em 1em 1em;
	margin-left : auto;
	margin-right : auto;
	margin-top : auto;
	margin-bottom : auto;
	opacity : 1;
	transform : none;
	-webkit-transform: none;
}*/

/*TEST*/
.visionneuse.max
{
	max-width : 100%;
	max-height : 100%;
	padding : 1em 1em 1em 1em;
	margin-left : auto;
	margin-right : auto;
	margin-top : auto;
	margin-bottom : auto;

	display : block;
	background-color : rgba(0,0,0,0.9);
	position         : fixed;
	top              : 50%;
	left             : 50%;
	z-index          : 20;
	overflow         : hidden;
	width : 100%;
	height : 100%;
	padding : 0 0 0 0;
	box-shadow: none;
	opacity : 0;
	color : white;
	transform : rotate( 180deg ) scale( 0, 0 );	
	-webkit-transform : rotate( 180deg ) scale( 0, 0 );	
}

.visionneuse.max.visible
{
	/*display : block;*/
	top : 0px;
	left : 0px;
	padding : 1em 1em 1em 1em;
	margin-left : auto;
	margin-right : auto;
	margin-top : auto;
	margin-bottom : auto;
	opacity : 1;
	transform : none;
	-webkit-transform : none;
}
/**/

.visionneuse.max img
{
	max-height    : 90%;
	max-width     : 90%;
	margin-left   : auto;
	margin-right  : auto;
	margin-top    : 2em;
	margin-bottom : auto;
	display       : block;
}

.visionneuse div
{
	font-style:italic;
	text-align: center;
}

.visionneuse img
{
	max-width:100%;
	max-height:100%;
}

#visio_header_id
{
	padding : 0px 0px 0px 0px;
	margin : 0px 0px 0px 0px;
	cursor : pointer;
	z-index : 1;
}

.visio_sel
{
	display          : block;
	width            : 200px;
	margin-right     : auto;
	margin-left     : auto;
	margin-top : 0.5em;
}

#visio_header_id a
{
	display : inline-block;
	width : 8px;
	height : 8px;
	background-color : #c8d100;
	border : solid 1px #7E6B60; 
	padding : 0px 0px 0px 0px;
}

#visio_header_id a.active
{
	background-color : #7E6B60;
	border : solid 1px #c8d100;
}

#visio_header_id img
{
	display          : block;
	/*max-height       : 250px;
	max-width        : 900px;*/
	width            : 100%;
	background       : linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
	margin-right     : auto;
	margin-left     : auto;
}	

ul.visio_bar
{
	position         : relative;/*
	background-color : #c8d100;
	background-color : red;*/
	display          : block;
	width            : 90%;
	height           : 40px;
	margin-right     : auto;
	margin-left      : auto;
	background       : linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100px, #c8d100 100px );

	background : linear-gradient(-120deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 20px, #c8d100 22px, #c8d100 50%, rgba(0,0,0,0) 0% ),
linear-gradient(60deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100px, #c8d100 100px, #c8d100 50%, rgba(0,0,0,0) 0% );
}

ul.visio_bar li
{
	float      : left;
	margin     : 0px 0px 0px 0px;
	padding    : 0px 0px 0px 0px;
	list-style : none;
	display    : inline;
	height     : 100%;
	width : auto;
	position   : relative;
}

.visio_config
{
	display : none;
}

#footer p, #footer a
{
	margin : 0px 0px 0px 0px;
	color : white;
	text-shadow: 1px 1px 0.2em #6a584e;
	text-align: center;
}

#footer a
{
	cursor : pointer;
	
}

#footer_sub, #footer_sub2
{
	display : none;

}

#footer_sub.visible, #footer_sub2.visible
{
	font-size: 15px;
	display : block; 
	background: linear-gradient(
			60deg,
			transparent 0%, transparent 42px, #f3f2f0 43px,  #d2c9c4 20%,#95817b 50%,
			 #6c5955 80% );
	margin-top: 8px; 
	padding-left:45px;
	padding-right:45px;
}


div.no-content
{
	background-image : url('/imgs/error.svg');
	background-size : 4em auto;
	background-repeat : no-repeat;
	background-position : left center;
	padding-left : 5em;
	padding-top : 2em;
	padding-bottom : 2em;
}

div.no-localized-content
{
	background-image : url('/imgs/warning.svg');
	background-size : 4em auto;
	background-repeat : no-repeat;
	background-position : 0.5em center;
	padding : 0.5em;
	padding-left : 5.5em;
	padding-top : 2em;
	padding-bottom : 2em;
	
	background-color : black;
	background-color : rgba(0,0,0,0.9);
	position : fixed;
	bottom : 0px;
	right : 0px;
}