/* CSS Document pour la top page de la planete splash page du Parlement europeen */

/* ========================================================================================================================================================= */
/* Reinitialisation des styles generaux */
	
	/* Reinitialisation de toutes les balises generiques */
	html, body, applet, object, iframe,
	div, span, p, blockquote, img, hr, 
	h1, h2, h3, h4, h5, h6, 
	pre, a, address, big, cite, code, 
	del, dfn, font, ins, kbd, q, s, samp,
	small, strike, sub, sup, tt, var,
	dl, dt, dd, ul, li, 
	fieldset, form, label, legend, textarea, input, button,
	table, caption, tbody, tfoot, thead, tr, th, td{
		margin: 					0;
		padding: 					0;
		border: 					0;
		outline:					none;
		font-weight: 				inherit;
		font-style: 				inherit;
		font-family: 				inherit;
		vertical-align: 			baseline;
	}
	/* Parametrage du corps de la page */
	body{
	}
	
/* Fin d'import */ 	
/* ========================================================================================================================================================= */

/* ========================================================================================================================================================= */
/* === GENERAL ============================================================================================================================================= */
/* ========================================================================================================================================================= */
	
	/* GENERAL : Blocage des barres de defilement */
	html, body{
		overflow:				hidden;
		margin:					0;
		padding:				0;
	}
	/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
	/* GENERAL : Initialisation du fond */
	body{
		background-color:		#3392d5;
		background-image:		url(../img/background/splashpage_responsive_background.jpg);
		background-position:	top left;
		background-repeat:		no-repeat;
		font-family: 			Arial, Helvetica, sans-serif;
		font-size: 				62.5%;
		line-height: 			inherit;
		color: 					#fff;
	}
	/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
	/* GENERAL : Conteneurs principaux */
	body #wrapper{
		position:				absolute;
		display:				block;
		top:					0;
		bottom:					0;
		left:					0;
		right:					0;
		margin:					0;
		padding:				0;
	}
	
/* ========================================================================================================================================================= */
/* === ENTETE === logo + titre ============================================================================================================================= */
/* ========================================================================================================================================================= */
	
	#header{
		position:				static;
		display:				block;
		z-index:				20;
		margin:					35px 0 0 323px;
		padding:				0;
		border-left:			1px solid #367bbb;
		vertical-align:			bottom;
	}
	/* ENTETE : Conteneur */
	#header > h1{
		position:				relative;
		display:				block;
		margin:					0;
		padding:				0 25px 15px 55px;
		font-size:				1em;
		font-weight:			normal;
		color:					#ffffff;
	}
	#header h1 span{
		position:				relative;
		display:				block;
		margin:					0;
		padding:				0;
		font-size:				1em;
	}
	/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
	/* ENTETE : Logo */
	#header h1 span:first-child{
		position:				absolute;
		top:					0;
		left:					-255px;
		width:					203px;
	}
	#header h1 span:first-child img{
		position:				relative;
		display:				block;
		width:					100%;
	}
	/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
	/* ENTETE : Titre */
	#header h1 span + span{
		display:				block;
		font-size:				5.2em;
		line-height:			0.8em;
	}
	/* ENTETE : Titre (libelle "European Parliament") */
	#header h1 span + span.ep_name{
		margin-top:				5px;
		line-height:			1em;
		text-transform:			uppercase;
	}
	body[lang="ga"] #header h1 span + span.ep_name,
	body[lang="el"] #header h1 span + span.ep_name{
		text-transform:			none;
	}
	
/* ========================================================================================================================================================= */
/* === CORPS === texte + formulaire ======================================================================================================================== */
/* ========================================================================================================================================================= */
	
	/* CORPS : Conteneur */
	#body{
		position:				relative;
		display:				block;
		z-index:				20;
		bottom:					0;
		max-width:				800px;
		margin:					0 25px 35px 323px;
		border-left:			1px solid #367bbb;
	}
	/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
	/* CORPS : Texte de description */
	#body .ep_text{
		position:				relative;
		display:				block;
		margin:					0;
		padding:				0 25px 0 55px;
		font-size:				1em;
	}
	#body .ep_text p{
		position:				relative;
		display:				block;
		margin:					0;
		padding:				0;
		font-size:				1.8em;
		line-height:			1.4em;
		color:					#ffffff;
	}
	/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
	/* CORPS :: Formulaire linguistique */
	#body .ep_form{
		position:				static;
		display:				block;
		z-index:				20;
		margin:					15px 0 0 0;
		padding:				0 25px 0 55px;
	}
	#body .ep_form > div{
		position:				static;
		display:				block;
		width:					480px;
		margin:					8px 0 0 0;
		padding:				0;
	}
	/* CORPS :: Formulaire linguistique (libelle invisible) */
	#body .ep_form label{
		position:				absolute;
		display:				block;
		overflow:				hidden;
		left:					-10000px;
		width:					0;
		height:					0;
		margin:					0;
		padding:				0;
		font-size:				1em;
	}
	/* CORPS :: Formulaire linguistique (bouton d'envoi) */
	#body .ep_form > div > span input{
		position:				static;
		width:					35px;
		height:					35px;
		box-sizing:				border-box;
		-moz-box-sizing:		border-box;
		background-image:		url(../img/background/splashpage_responsive_button.png);
		background-position:	top;
		background-repeat:		repeat-x;
		background-color:		#527f39;
		border:					none;
		cursor:					pointer;
		font-size:				1.3em;
		letter-spacing:			normal;
		color:					#ffffff;
	}
	#body .ep_form > div > span  input:hover,
	#body .ep_form > div > span  input:focus,
	#body .ep_form > div > span  input:active{
		background-color:		#0f5182;
		background-position:	0 500px;
		color:					#fff;
	}
	/* CORPS :: Formulaire linguistique (selecteur) */
	#body .ep_form > div{
		box-sizing:				border-box;
		-moz-box-sizing:		border-box;
		letter-spacing:			-0.3em;
	}
	#body .ep_form > div > select{
		position:				satic;
		display:				inline-block;
		width:					184px !important;
		height:					35px;
		margin:					0;
		background-color:		#FFF;
		border-color:			#fff;
		font-size:				1.5em;
		letter-spacing:			normal;
		vertical-align:			middle;
		color:					#082e52;
	}
	#body .ep_form > div > span{
		position:				static;
		display:				inline-block;
		margin-left:			7px;
		vertical-align:			middle;
	}
	/* CORPS :: Formulaire linguistique (selecteur JS > zone visible) */
	body.ep_jsavailable #body .ep_form > div.ep_menu > div{
		position:				relative;
		display: 				inline-block;
		overflow:				hidden;
		width: 					180px !important;
		margin:					0;
		padding:				1px;
		background-color:		#fff;
		border:					1px solid #fff;
		outline:				none;
		cursor:					pointer;
		letter-spacing:			normal;
		vertical-align: 		middle;
	}
	body.ep_jsavailable #body .ep_form > div.ep_menu > div span:first-child{
		position:				relative;
		display:				block;
		z-index:				20;
		overflow:				hidden;
		margin:					0;
		padding:				7px 31px 7px 3px;
		cursor:					pointer;
		font-size:				1.5em;
		white-space:			nowrap;
		text-overflow:			ellipsis;
		color:					#082e52;
	}
	body.ep_jsavailable #body .ep_form > div.ep_menu > div span:first-child + span{
		position:				absolute;
		display:				block;
		z-index:				10;
		overflow:				hidden;
		top:					50%;
		right:					2px;
		width:					27px;
		height:					27px;
		margin:					-13px 0 0 0;
		padding:				0;
		background-image:		url(../img/icon/splashpage_responsive_icon.png);
		background-position:	left top;
		background-repeat:		no-repeat;
		cursor:					pointer;
	}
	body.ep_jsavailable #body .ep_form > div.ep_menu > div:hover,
	body.ep_jsavailable #body .ep_form > div.ep_menu > div:focus,
	body.ep_jsavailable #body .ep_form > div.ep_menu > div:active{
		background-color:		#b7e0ff;
	}
	body.ep_jsavailable #body .ep_form > div.ep_menu > div.ep_open:hover,
	body.ep_jsavailable #body .ep_form > div.ep_menu > div.ep_open:focus,
	body.ep_jsavailable #body .ep_form > div.ep_menu > div.ep_open:active{
		background-color:		#fff;
	}
	body.ep_jsavailable #body .ep_form > div.ep_menu > div.ep_open	span:first-child + span,
	body.ep_jsavailable #body .ep_form > div.ep_menu > div:hover		span:first-child + span,
	body.ep_jsavailable #body .ep_form > div.ep_menu > div:focus		span:first-child + span,
	body.ep_jsavailable #body .ep_form > div.ep_menu > div:active		span:first-child + span{
		background-position:	left bottom;
	}
	/* CORPS :: Formulaire linguistique (selecteur JS > liste) */
	#body form.ep_form > div.ep_menu > fieldset{
		position:				absolute;
		display:				block;
		bottom:					0;
		width:					184px !important;
		height:					2px;
		background-color:		#fff;
	}
	#body form.ep_form > div.ep_menu > fieldset .ep_buttons{
		position:				relative;
		display:				block;
		overflow-x:				hidden;
		overflow-y:				auto;
		max-height:				300px;
		margin:					0;
		padding:				0;
		background-color:		#fff;
		border-top:				1px solid #fff;
	}
	#body form.ep_form > div.ep_menu > fieldset .ep_buttons input{
		position:				relative;
		display:				block;
		width:					100%;
		margin:					-1px 0 0 0;
		padding:				4px 5px;
		box-sizing:				border-box;
		-moz-box-sizing:		border-box;
		background-color:		#fff;
		border-top:				1px solid #5c91b3;
		border-bottom:			none;
		outline:				none;
		cursor:					pointer;
		font-size:				1.4em;
		font-weight:			normal;
		text-align:				left;
		color:					#082e52;
	}
	#body form.ep_form > div.ep_menu > fieldset .ep_buttons input.ep_selected{	font-weight:		bold;	}
	#body form.ep_form > div.ep_menu > fieldset .ep_buttons input:hover,
	#body form.ep_form > div.ep_menu > fieldset .ep_buttons input:focus,
	#body form.ep_form > div.ep_menu > fieldset .ep_buttons input:active,
	#body form.ep_form > div.ep_menu > fieldset .ep_buttons input.ep_focus{		background-color:	#b7e0ff; }

/* ========================================================================================================================================================= */
/* === RESPONSIVE === < 960 ================================================================================================================================ */
/* ========================================================================================================================================================= */
@media only screen and (max-width: 960px){
	
	/* RESPONSIVE :: ENTETE */
	#header h1 span:first-child{
		left:					-210px;
		width:					150px;
	}
	#header h1 span + span{
		font-size:				3.8em;
		line-height:			1em;
	}
	#header h1 span + span.ep_name{
		font-size:				4.8em;
	}
	/* RESPONSIVE :: MARGES */
	#header, #body{
		margin-left:			250px;
	}
	/* RESPONSIVE :: CORPS */
	#body .ep_text p{
		font-size:				1.6em;
	}
}	
/* ========================================================================================================================================================= */
/* === RESPONSIVE === < 768 ================================================================================================================================ */
/* ========================================================================================================================================================= */
@media only screen and (max-width: 768px){
	
	/* RESPONSIVE :: MARGES */
	#header h1,
	#body .ep_text,
	#body .ep_form{
		padding-left:			25px;
		padding-right:			25px;
	}
	/* RESPONSIVE :: ENTETE */
	#header{
		margin-left:			0;
		border-left:			none;
	}
	#header h1 span:first-child{
		position:				relative;
		left:					0;
		margin-bottom:			35px;
	}
	/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
	/* RESPONSIVE :: CORPS */
	#body{
		max-width:				1200px;
		margin-left:			0;
		border-left:			none;
	}
}
/* ========================================================================================================================================================= */
/* === RESPONSIVE === < 600 ================================================================================================================================ */
/* ========================================================================================================================================================= */
@media only screen and (max-width: 640px){
	
	/* RESPONSIVE :: ENTETE */
	#header h1 span:first-child{
		margin-bottom:			15px;
	}
	#header h1 span + span{
		font-size:				2.4em;
		line-height:			1.2em;
	}
	#header h1 span + span.ep_name{
		font-size:				3em;
	}
	/* RESPONSIVE :: CORPS */
	#body .ep_text p{
		font-size:				1.4em;
	}
	#body .ep_form{
		margin-top:				25px;
	}
}
/* ========================================================================================================================================================= */
/* === RESPONSIVE === < 480 ================================================================================================================================ */
/* ========================================================================================================================================================= */
@media only screen and (max-width: 480px){
	
	/* RESPONSIVE :: MARGES */
	#header h1,
	#body .ep_text,
	#body .ep_form{
		padding-left:			10px;
		padding-right:			10px;
	}
	/* RESPONSIVE :: ENTETE */
	#header h1 span:first-child{
		margin-bottom:			15px;
	}
	#header h1 span + span{
		font-size:				2em;
		line-height:			1.2em;
	}
	#header h1 span + span.ep_name{
		font-size:				2.5em;
	}
	/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
	/* RESPONSIVE :: CORPS */
	#body .ep_text{
		display:				none;
	}
	#body .ep_form{
		margin-top:				0;
	}
}