@CHARSET "UTF-8";



/****************************/
/*  Infos Fichier			*/
/****************************/

/* auteur: PION Mickael*/
/* Date de création: 23/07/2016 */








/****************************/
/*  Fonts					*/
/****************************/
/* Import Fonts Googles */
@import url(http://fonts.googleapis.com/css?family=Sue+Ellen+Francisco|Nothing+You+Could+Do|Michroma|Ultra|Architects+Daughter|Walter+Turncoat|Permanent+Marker|Gruppo|Zeyada|Orbitron|Julee|Six+Caps|Gloria+Hallelujah);
@import url(http://fonts.googleapis.com/css?family=Nosifer|Fredericka+the+Great|Cabin+Sketch|Frijole|Exo|Rock+Salt|Black+Ops+One|Gruppo|Plaster);
@import url(https://fonts.googleapis.com/css?family=Indie+Flower|Rock+Salt|Annie+Use+Your+Telescope|Swanky+and+Moo+Moo);
@import 'https://fonts.googleapis.com/css?family=Akronim|Griffy|Iceland|Jolly+Lodger|Snowburst+One';


/*font-family: 'Sue Ellen Francisco', cursive;
font-family: 'Nothing You Could Do', cursive;
font-family: 'Michroma', sans-serif;
font-family: 'Ultra', serif;
font-family: 'Architects Daughter', cursive;
font-family: 'Walter Turncoat', cursive;
font-family: 'Permanent Marker', cursive;
font-family: 'Gruppo', sans-serif;
font-family: 'Zeyada', cursive;
font-family: 'Orbitron', sans-serif;
font-family: 'Julee', cursive;
font-family: 'Six Caps', sans-serif;
font-family: 'Indie Flower', cursive;
font-family: 'Rock Salt', cursive;
font-family: 'Annie Use Your Telescope', cursive;
font-family: 'Swanky and Moo Moo', cursive;
font-family: 'Akronim', cursive;
font-family: 'Griffy', cursive;
font-family: 'Iceland', cursive;
font-family: 'Jolly Lodger', cursive;
font-family: 'Snowburst One', cursive;


*/


/*Fonts persos*/

				@font-face 
					{
				    	font-family: 		'CausSofachrome';									
											
					    src: 				url('Fonts/sofachrome_rg_it.ttf'),
					    					url('Fonts/sofachrome_rg_it.eot') format('opentype');
					}		
		
				@font-face 
					{
				    	font-family: 		'CausMagenta';									
											
					    src: 				url('Fonts/magenta_bbt.ttf'),
					    					url('Fonts/magenta_bbt.eot') format('opentype');
					}		
		
				@font-face 
					{
				    	font-family: 		'CausGunShip';									
											
					    src: 				url('Fonts/gun4fc.ttf'),
					    					url('Fonts/gun4fc.eot') format('opentype');
					}		
		
				@font-face 
					{
				    	font-family: 		'CausCoalition';									
											
					    src: 				url('Fonts/coalition.ttf'),
					    					url('Fonts/coalition.eot') format('opentype');
					}		
		
				@font-face 
					{
				    	font-family: 		'CausAwake';									
											
					    src: 				url('Fonts/Perso_Wide_awake.ttf'),
					    					url('Fonts/Perso_Wide_awake.eot') format('opentype');
					}		
		
				@font-face 
					{
				    	font-family: 		'CausAwakeBlack';									
											
					    src: 				url('Fonts/Perso_Wide_awake_black.ttf'),
					    					url('Fonts/Perso_Wide_awake_black.eot') format('opentype');
					}		
		
				@font-face 
					{
				    	font-family: 		'CausBankGothic';									
											
					    src: 				url('Fonts/bgothm.ttf'),
					    					url('Fonts/bgothm.eot') format('opentype');
					}		
		
				@font-face 
					{
				    	font-family: 		'CausImpact';									
											
					    src: 				url('Fonts/impact.ttf'),
					    					url('Fonts/impact.eot') format('opentype');
					}		
		
				@font-face 
					{
				    	font-family: 		'CausDigit';									
											
					    src: 				url('Fonts/ds-digi.ttf'),
					    					url('Fonts/ds-digi.eot') format('opentype');
					}		
		
				@font-face 
					{
				    	font-family: 		'CausDigit';									
											
					    src: 				url('Fonts/ds-digib.ttf'),
					    					url('Fonts/ds-digib.eot') format('opentype');			font-weight:bold
					}		
		
				@font-face 
					{
				    	font-family: 		'CausScript';									
											
					    src: 				url('Fonts/segoepr.ttf'),
					    					url('Fonts/segoepr.eot') format('opentype');
					}		
		
				@font-face 
					{
				    	font-family: 		'CausTaibaijan';									
											
					    src: 				url('Fonts/Taibaijan.ttf'),
					    					url('Fonts/Taibaijan.eot') format('opentype');
					}		
		
				@font-face 
					{
				    	font-family: 		'CausSwirlInsertion';									
											
					    src: 				url('Fonts/SwirlInsertion.ttf'),
					    					url('Fonts/SwirlInsertion.eot') format('opentype');
					}		
		
				@font-face 
					{
				    	font-family: 		'CausDJBJackedUpKindaLuv';									
											
					    src: 				url('Fonts/DJB Jacked Up Kinda Luv.ttf'),
					    					url('Fonts/DJB Jacked Up Kinda Luv.eot') format('opentype');
					}		
		
				@font-face 
					{
				    	font-family: 		'CausAlameda';									
											
					    src: 				url('Fonts/Alameda.ttf'),
					    					url('Fonts/Alameda.eot') format('opentype');
					}		
		
				@font-face 
					{
				    	font-family: 		'CausPystil';									
											
					    src: 				url('Fonts/pystil.ttf'),
					    					url('Fonts/pystil.eot') format('opentype');
					}		
		




html, body{
	position:			absolute;
	top:				0px;
	left:				0px;
	width:				100%;
	height:				100%;
	text-decoration:	none;
	background-color:	#000000;

}


a{

	text-decoration:	none;

}



.background{

	position:		fixed;
	top:			50px;
	left:			0px;
	opacity:		0.2;
	width:			100%;
	
}


.divDroite{

	position:		absolute;
	top:			0%;
	left:			3%;
	width:			17%;
	height:			100%;	
}




/*****************/
/*   BANNIERE    */
/*****************/

.divBanniere{

	position:relative;
	margin-top:	0px;
	border:none;
	width:		800px;
	display:inline-block;

}

.imageBanniere{

	position:absolute;
	margin-top:	10px;
	border:none;
	width:		800px;
	display:inline-block;

}



.zoneCentrale{

	position:		absolute;
	margin-left:	0px;
	margin-top:		10px;
	border:none;
	display:		inline-block;
	background-image: url("./Images/Bannière/Fond.jpg");
	

}


.imageFond{

	position:absolute;
	top:	0px;
	left:	0px;
	z-index: -1;
	width:	50%;

	border:none;

}





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

.divMenu{

	position:		absolute;
	margin-top:		250px;
	margin-left:	450px;
	border:			none;
	width:			40%;
	display:		inline-block;

}

/*font-family: 'Nothing You Could Do', cursive;
font-family: 'Michroma', sans-serif;
font-family: 'Architects Daughter', cursive;
font-family: 'Walter Turncoat', cursive;
font-family: 'Permanent Marker', cursive;
font-family: 'Gruppo', sans-serif;
font-family: 'Zeyada', cursive;
font-family: 'Orbitron', sans-serif;
font-family: 'Julee', cursive;
font-family: 'Six Caps', sans-serif;
font-family: 'Indie Flower', cursive;
font-family: 'Rock Salt', cursive;
font-family: 'Annie Use Your Telescope', cursive;
font-family: 'Swanky and Moo Moo', cursive;
font-family: 'Akronim', cursive;
font-family: 'Griffy', cursive;
font-family: 'Iceland', cursive;
font-family: 'Jolly Lodger', cursive;
font-family: 'Snowburst One', cursive;
*/


.itemMenu, .itemMenu:hover, .itemMenuActif, .separateurMenu{

	border:				none;
	font-size:			50px;
	color:				#EEDFBB;
	padding:			0px;
	margin:				0px;
	font-family: 		'Annie Use Your Telescope', cursive;
	background-color:	transparent;
	text-decoration:	none;
	text-shadow: 		0px 0px 10px #DDDDDD;

}


#itemMenu1.itemMenu{

	position:		relative;
	top:		250px;
	margin-left:	0px;	

}

#itemMenu2.itemMenu{

	position:		relative;
	margin-top:		150px;
	margin-left:	50px;

}

#itemMenu3.itemMenu{

	position:		relative;
	margin-top:		200px;
	margin-left:	-150px;

}

.itemMenu, .itemMenu:hover, .itemMenuActif{

	cursor:				pointer;

}


.itemMenu:hover, .itemMenuActif:hover{

	color:				#FFFFFF;

}

.itemMenuActif{

	font-size:			45px;

}

.separateurMenu{

	color : 			#FFFFFF;

}




.divMenuSecondaire{

	position:relative;
	margin-top:	10px;
	margin-left:	200px;
	border:none;
	background-color:	#A6AeAc;/*#435c67;*/
	width:100%;
	display:inline-block;

}

.itemMenuSecondaire, .itemMenuSecondaire:hover, .itemMenuSecondaireActif, .separateurMenuSecondaire{

	border:				none;
	font-size:			16px;
	color:				#333333;
	padding:			0px;
	margin:				0px;
	font-family: 		'Michroma', cursive;
	background-color:	transparent;
	text-decoration:	none;


}

.itemMenuSecondaire, .itemMenuSecondaire:hover, .itemMenuSecondaireActif{

	cursor:				pointer;

}


.itemMenuSecondaire:hover, .itemMenuSecondaireActif:hover{

	color:				#FFFFFF;

}

.itemMenuSecondaireActif{

	font-size:			45px;

}

.separateurMenuSecondaire{
	
	margin:				8px;
	color : 			#FFFFFF;

}







/*****************/
/*   CONNEXION   */
/*****************/



.lienContact{

	border:				none;
	font-size:			16px;
	color:				#333333;
	padding:			0px;
	margin:				0px;
	font-family: 		'Michroma', cursive;
	background-color:	transparent;
	text-decoration:	none;

}



.lienContact:hover{

	color:				#FF7E00;
	cursor:				pointer;
	
}







/************************************/
/*   TITRE ET TEXTE GENERIQUE       */
/************************************/

.cadrageStandard{

	margin:				35px;

}

h1, .titre{

	margin:				5px;
	font-size:			25px;
	font-weight:		bold;
	color:				#555555;
	font-family: 		'Annie Use Your Telescope', cursive;
	letter-spacing:		-2px;
	text-decoration:	none;

}

h2, .sousTitre{

	margin:				5px;
	font-size:			15px;
	font-weight:		bold;
	color:				#888888;
	font-family: 		'Annie Use Your Telescope', cursive;
	letter-spacing:		-2px;
	text-decoration:	none;

}

p, .texte{

	text-indent:		20px;
	padding:			5px;
	font-size:			15px;
	font-weight:		normal;
	color:				#555555;
	font-family: 		'Arial', cursive;
	vertical-align:		text-top;
		text-decoration:	none;

}


p{

	margin:			0px;

}








/*****************/
/*   CHANSONS	 */
/*****************/

.titreChanson{

	margin:				5px;
	font-size:			25px;
	color:				#CCCCCC;
	font-family: 		'Annie Use Your Telescope', sans-serif;
	letter-spacing:		-2px;	

}



.titreChanson, .titreChanson:hover, .titreChansonActif{

	cursor:				pointer;

}


.titreChanson:hover, .titreChansonActif:hover{

	color:				#FFFFFF;
	text-shadow: 		0px 0px 20px #DDDDDD;

}

.titreChansonActif{

	font-size:			45px;

}


.paragraphe{

	padding:			15px;
	padding-top:		35px;

}

.paragraphe:hover{

	background-color:	rgba(50,50,50, 0.5);

}

.phrase{

	padding:			5px;
	padding-left:		50px;

}

.phrase:hover{

	text-shadow: 		0px 0px 20px #DDDDDD;

}


.mot{

	padding:			5px;
	font-size:			15px;
	font-weight:		normal;
	color:				#888888;
	font-family: 		'Arial', cursive;
	vertical-align:		text-top;
	text-decoration:	none;
	display:			inline;

}

.motSelected, .mot:hover{

	color:				#DDDDDD;
	text-shadow: 		0px 0px 20px #DDDDDD;
	
}






/*********************/
/*   FORMULAIRES	 */
/*********************/

.titreFormulaire{

	font-size:			30px;
	color:				#AAAAAA;
	font-family: 		'Impact', cursive;

}


.ligneFormulaire{

	margin:				15px;
	padding:			0px;

}


.labelFormulaire, .erreurFormulaire{

	font-size:			20px;
	color:				#555555;
	font-family: 		'CAFBankGothic', cursive;
	letter-spacing:		-2px;	
	text-align:			right;

}




.erreurFormulaire{

	font-size:			15px;
	color:				#CC5555;
	font-family: 		'CAFBankGothic', cursive;
	letter-spacing:		-2px;	
	text-align:			left;

}


.messageAlerte{

	font-size:			20px;
	color:				#AA3333;
	font-family: 		'CAFBankGothic', cursive;
	letter-spacing:		-2px;	
	text-align:			left;

}


.champFormulaire, .champFormulaireListe{

	font-size:			15px;
	color:				grey;
	font-family: 		'Arial', cursive;

}


.champFormulaireListe{

	height:				500px;

}


.boutonFormulaire{

	font-size:			25px;
	color:				#555555;
	font-family: 		'Impact', cursive;
	letter-spacing:		-2px;	

}



.separateurFormulaire{

	height:				50px;

}


.dropzone{

	height:				50%;
	width:				100%;
	border:				dashed 3px grey;
	font-family: 		'Impact', cursive;
	font-size:			35px;
	color:				#CCCCCC;

}