/* CONVENTIONS D'ÉCRITURE
 *
 * Préfixes :
 *  p-		= page
 *	l- 		= layout
 *	o-		= objet	(ubjet immuable)
 *	c- 		= component
 *	u- 		= utility (objet immuable)
 *	t- 		= themes
 *	sp-		= specific (surclasse d'un tiers, ex : cms, iframe)
 *	is-		= etat
 * 	has-	= conditional
 *	js-		= javascript dependence
 *	dev-	= test development
 *	_		= hacks
 *
 *
 * Nomage :
 *	ComponentName
 *	ComponentName--modifierName
 *	ComponentName-descendantName
 *	ComponentName.is-stateOfComponent
 *
 */


/*! TYPOGRAPHIE */
/*-------------------------------------------------------*/

	html { 
		font-size: 62.5%; 
		font-size: -webkit-calc(0.625em);
		font-size: calc(0.625em);
		width:100%;
		height:auto;
	}
	
	/* calculs des titres : http://soqr.fr/vertical-rhythm/  */
	
	body { 
		font-family: 'helvetica';
		font-weight: normal;
		font-style: normal;
		font-size: 1.6rem; 
		background-color: #fff;
		color:#000;
		width:100%;
		background-color: #fff;
	}
	
	.container { 
		width:100%;
		float:left;
	}
	
	#header {
		position:fixed;
		left:0px;
		top:0px;
		height:100%;
		width:50px;
		border-right: 1px solid #000;
		background-color: #fff;
		color:#000;
		
	}
	
	#header a {
		color:#000;
		text-decoration: none;
	}
	
	#header .intro {
		margin-top:20px;
		transform:rotate(-90deg) translate( -50%,0);
		transform-origin:center;
	}
	
	#header .zone-bas {
		position: absolute;
		left:5px;
		bottom:0px;
	}
	
	#header .zone-bas .discover {
		transform:rotate(-90deg) translate( -50%,0);
		transform-origin:center;
		position: absolute;
		left:-12px;
		bottom:95px;
	}
	
	#header .zone-bas .communicate {
		transform:rotate(-90deg) translate( -50%,0);
		transform-origin:center;
		position: absolute;
		left:-30px;
		bottom:239px;
	}
	
	#header .zone-bas div {
	}

	
	#main {
		
		width: 100%;
		float:left;
	}
	.opacite {
		opacity:0.4;
	}
	.viewItem {
		cursor: pointer;
	}
	
	.viewItem ul {
		text-align: center;
	    padding-left: 10px;
	    padding-right: 10px;
	}
	
	.presentation {
		vertical-align: top;
		margin-left:50px;
		width:400px;
		display: inline-block;
		background-color: #fff;
		height:100%;
		font-size:2.5rem;
		padding-top:55px;
		padding-left:30px;
	}
	
	.presentation .enter {
		font-size: 1.6rem;
		margin-top:237px;
		cursor: pointer;
	}
	
	.view {
		position: absolute;
		top: 50%;
		left: 50%;
		width:530px;
		min-height:530px;
		
		text-align: center;
		color:#fff;
		margin-top: -265px; /* Half the height */
	   margin-left: -265px; /* Half the width */
	   z-index:100000;
	   
	   display:none;
	}
	
	.view .play {
		position: absolute;
		right:-20px;
		top:381px;
		cursor: pointer
	}
	
	.view .item {
		display:table-cell;
		width:530px;
		height:400px;
		min-height:400px;
		text-align: center;
		background-color: #333333;
		color:#fff;
		vertical-align: middle;
		
	}
	
	.view .item ul {
		padding-left:20px;
		padding-right:20px;
		text-align: left;
		
	}
	
	.view .item_play {
		width:530px;
		/*height:380px;*/
		min-height:380px;
		text-align: center;
		background-color: #333333;
		color:#fff;
		padding-top:20px;
		display: none;
	}
	
	.displayPhrase ul {
		text-align: left;
	}
	
	.view .displayPhrase {
		padding:0;
		margin-top:20px;
		display: block;
		padding-left:20px;
		padding-right:20px;
		text-align: center;
		width:calc(100% - 40px);
		color:#fff;
	}

	.view .bloc {
		float: left;
	    margin-top: 25px;
	    margin-left: 40px;
	    margin-right: 40px;
	    border-bottom: 1px solid #fff;
	    padding-bottom: 15px;
	    height: auto;
	    width: calc(100% - 80px);
	}
	
	.view .message {
		font-size:2.5rem;
		width:100%;
		margin-bottom:20px;
		text-align: left;
	}
	
	.view .infos {
		width:100%;
		text-align: left;
	}
	
	.view .infos .date {
		float:left;
		width:50%;
	}
	
	.view .infos .nom {
		float:right;
		width:50%;
		text-align: right;
	}
	
	.liste {
		padding-top: 20px;
		width:calc(100% - 505px);
		display: inline-block;
		position: relative;
		padding-left:20px;
		background-image: url("../img/fond.gif"); /* The image used */
		  background-position: center; /* Center the image */
		  background-repeat: repeat; /* Do not repeat the image */
		  background-size: cover; /* Resize the background image to cover the entire container */
	}
	
	.hide {
		display:none
	}
	.liste.large {
		width:calc(100%);
		margin-left:50px;
	}
	
	.liste .item {
		display: inline-block;
		width:360px;
		min-height:360px;
		background-color: #333333;
		margin-right:20px;
		margin-bottom:20px;
		text-align: center;
		color:#fff;
		vertical-align: middle;
	}
	
	.liste .item div {
		display:table-cell;
		width:360px;
		height:360px;
		text-align: center;
		color:#fff;
		vertical-align: middle;
	}
	
	.saisie {
		margin-left:50px;
		width:calc(50% - 85px);
		display: inline-block;
		background-color: #fff;
		font-size:2.5rem;
		padding-top:55px;
		padding-left:30px;
	}
	
	.saisie .erreur {
		color:#ff0024;
	}
	
	.saisie .send {
		cursor: pointer;
		font-size: 1.6rem;
	}
	
	.saisie .bt-preview {
		float:left;
		margin-right:10px;
	}
	
	.saisie .bt-send {
		float:left;
	}
	
	.delMessage {
		cursor: pointer;
		width:10px;
	}

	
	.saisie .nom {
		margin-bottom:80px;
	}
	
	input,textarea {
		width:70%;
		outline: none;
		border:1px solid #fff;
		font-size: 1.6rem;
	}

	.saisie label {
		display:block;
		padding-bottom:10px;
	}
	
	.saisie textarea {
		height:300px;
	}
	
	.saisie .send {
		/*font-size: 1.6rem;*/
	}
	
	
	
	
	.display {
		padding-top: 55px;
		width:50%;
		display: inline-block;
		height:100%;
		position: relative;
		vertical-align: top;
		background-image: url("../img/fond.gif"); /* The image used */
		  background-position: center; /* Center the image */
		  background-repeat: repeat; /* Do not repeat the image */
		  background-size: cover; /* Resize the background image to cover the entire container */
		
	}
	
	.display .preview {
		padding-left:30px;
		font-size:2.5rem;
	}
	
	.fond-play {
		margin-top:50px;
		width:calc(100% - 160px);
		min-height:400px;
		position: relative;
		left:30px;
		background-color: #333333;
		padding-top:50px;
		
	}
	
	#canvas {
		
		width:100%;
		height:100px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        background-color: transparent;
        border-bottom:1px solid #fff;
    }
    
	
	.displayPhrase {
		margin-top:20px;
		display: block;
		padding:20px;
		text-align: center;
		width:100%;
		color:#fff;
	}
	
	.fond-play td {
		padding-left:30px;
		padding-right:80px;

		
	}
	
	.fond-play img {
		width:100%;
	}
	
	ul {
		padding:0;
		margin:0;
		
	}
	
	.displayPhrase ul li,.view .item ul li {
		display: inline-block;
		margin-right:0px;
		list-style-type: none;
	}
	
	.liste .item ul li {
		display: inline-block;
		margin-right:0px;
		list-style-type: none;
	}
	
	.displayPhrase  {
		margin-top:20px;
	}
	
	.displayPhrase ul li img,.view .item ul li img {
		width:100px;
	}
	
	.liste .item img {
		width:50px;
	}

	
	
    #controls {
        text-align: center;
    }
    #start_button, #stop_button {
        font-size: 16pt;
    }
    
    .tools {
	    margin-bottom:10px;
	    width:100%;
	    text-align: center;
	    display:none;
    }
    
    a {
	    color:#fff;
    }



/*! TEMPLATING */
/*-------------------------------------------------------*/


/* 	-- LAYOUT */

	
	
		.c-timeline {
			position: relative;
			overflow: auto;
			
		}
			.c-timeline:before {
				content: '';
				position: absolute;
				height: 100%;
				width: 1px;
				background: red;
				left: 50%;
			}
			
			.c-timeline ul {
				list-style: none;
				padding: 0;
				z-index: 1;
			}
				.c-timeline li {
					position: relative;
					padding: 1em;
					margin-bottom: 1em;
				}
				
		@media screen and (min-width: 40em) {
			
			.l-container {
				max-width: 1400px;
				margin: 0 auto;
			}
				.c-timeline ul { 
					max-width: 1200px; 
					margin: 0 auto;
				}
					.c-timeline li { width: 45%; }
					
					.c-timeline li:nth-child(even) {
						float: right;
						margin-top: 8em;
					}
					.c-timeline li:nth-child(odd) {
						float: left;
						text-align:right;
						padding-bottom: 7em; 
					}
			
		}

	
	
/* 	-- NAVIGATION */

	
/* 	-- ÉLÉMENTS */

	
	

/*! COMPOSANTS */
/*-------------------------------------------------------*/
 
/*  bloc  */


	
	@media screen and (min-width: 40em) {
		
		.c-thumb-title { }
	}
		
		

/* separateur */


/* Boutons */



/* formulaires */



/*! COULEURS */
/*-------------------------------------------------------*/	

	html,
	button,
	input,
	select,
	textarea   { color: #222; }




/*! RWD */
/*-------------------------------------------------------*/	

.u-xs-only, .u-sm-only,  .u-md-only,  .u-lg-only,  .u-xl-only { display: none !important; } 

@media (max-width: 39.9em) {
 
	.u-xs-only { display: block !important; }
}
@media (min-width: 40em) and (max-width: 59.9em) {
 
	.u-sm-only { display: block !important; }
}
@media (min-width: 60em) and (max-width: 79.9em) {
 
	.u-md-only { display: block !important; }
}
@media (min-width: 80em) and (max-width: 99.9em) {
 
	.u-lg-only { display: block !important; }
}
@media (min-width: 100em) {
 
	.u-xl-only { display: block !important; }
}

.u-xs-visible, .u-sm-visible,  .u-md-visible,  .u-lg-visible,  .u-xl-visible { display: none !important; } 

@media (min-width: 40.0001em) {
 
	.u-sm-visible { display: block !important; }
}
@media (min-width: 60.0001em) {
 
	.u-md-visible { display: block !important; }
}
@media (min-width: 80.0001em) {
 
	.u-lg-visible { display: block !important; }
}
@media (min-width: 100.0001em) {
 
	.u-xl-visible { display: block !important; }
}


.u-xs-hidden, .u-sm-hidden,  .u-md-hidden,  .u-lg-hidden,  .u-xl-hidden { display: block !important; } 

@media (min-width: 40.0001em) {
 
	.u-sm-hidden { display: none !important; }
}
@media (min-width: 60.0001em) {
 
	.u-md-hidden { display: none !important; }
}
@media (min-width: 80.0001em) {
 
	.u-lg-hidden { display: none !important; }
}
@media (min-width: 100.0001em) {
 
	.u-xl-hidden { display: none !important; }
}



/* Style adjustments for retina devices */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
	

}