html {
	font-size: 90%;
	-webkit-text-size-adjust: 90%;
      -ms-text-size-adjust: 90%;
}

body{
	font-family:  'Open Sans', sans-serif, "Lucida Grande", Arial; border:none;
	padding:0; margin: 0;
	min-width: 200px;
	text-align: center;
	line-height: 1.4em;
	color:#424242;
}

h1,h2,h3{clear:both}

h1 { font-family:  'Michroma',  arial, serif; font-size: 160%; margin: 1em 0;line-height: normal}
h2{ font-family:  'Michroma',  arial, serif; font-size: 140%;}

hr.separator{clear:both;visibility: hidden}

a, a:visited{color: #1C63CF}
a img{border:none}

small{	font-size: smaller;		}
flag{vertical-align:2px; font-size: xx-small;	padding:0; margin-right: 0.4em}
flag span{padding-right: 0.5em}

li{
	padding:0.4em 0 0.4em 1em;
}

.center{	text-align: center;
.textshadow { 
		text-shadow: 2px 3px 4px #b0b0b0; 
		filter: dropshadow(color=#b0b0b0, offx=2, offy=3);
		}
		}
.left{text-align: left}
.container{	
		max-width: 1000px; 
		margin:0 auto; 
		padding: 0 1em; 
		position: relative;
		}
.rideau{
	background: linear-gradient(to right,
		rgba(207,237,255,1) 50%,
		rgba(207,237,255,0) 75%
		); /* W3C */
	border-radius: 6px;
	padding: 1em;
}

header,footer{	width: 100%;	}

header{ 	background-color: #363636;
		padding: 4px 0 0 0;
		border-bottom: 4px solid #b9b9b9;
		text-align: left
		}

footer{ 	border-top: 2px solid #3e3e3e; 
		background-color: #656565; 
		color: #a2a2a2;
		padding: 1em 0 ;
		}
	footer a,footer a:focus,footer a:visited{
		color:#a2a2a2;
		text-decoration: none
		}
	footer a:hover{	color:#a7ff00;	}
	
header{ background-color: #363636; padding: 4px 5%; border-bottom: 4px solid #b9b9b9;	}
header img {margin-top: 10px }
header a h1{display: none; color:white;}
	
	ul.lang{ 	
		clear: both;
		float: right;
		text-align: right;
		margin: 1em 10% 0 0;
		padding: 0;
		color: #969696;
	}

	ul.lang li{
		display: inline-block;
		padding: 0;
	}

	header ul.lang li a{
		color: #bcbcbc;
		font-size:smaller;
		margin-right: 1px;
		text-transform: uppercase;
	}
	header ul.lang li.langSel a{
		color:#a7ff00;
		color:#217BFF;
	}
	header ul.lang li a:hover{
		color:#a7ff00;
		cursor: pointer;		
	}

header a, header a:visited, header a:hover{
	text-decoration: none;
	color:inherit;
}


section{text-align: center;border:1px solid white;}
section div.container{text-align: left}

article{	
	box-sizing:border-box;
	-moz-box-sizing:border-box; 
	-webkit-box-sizing:border-box;
	text-align: center
}

.f50{width: 50%;}
.f75{width: 75%;}
.lfloat{ float: left;}


/*	========== BACKGROUNDS	========== 			*/

body>section#learning{
	background: url(../images/teacher.jpg) right bottom no-repeat;
	min-height:600px;
}

/*	========== LEARNING	========== 			*/

ul.video li div
{
	margin: 1em 0 1em -7em;
	text-align: center;
		padding: 1.2em 1em 1em; 
		border-radius: 6px; 
		background-color: #d6ffd8;
		border: 1px solid #00aa0a;
		box-shadow: 1px 1px 6px silver;

}
ul.video li div iframe
{
	width:640px;
	height:360px;
}

/*	========== otherXL	========== 			*/
div.otherXL{
	border:1px solid red;
	margin: 2em;
	text-align: left;
	clear: both;
	background-color: white;
}
div.otherXL h1{
	background-color: red;
	color: white;
	margin: 0;
	padding: 0.4em 0 0.4em 1em;
	font-size: larger
}

div.otherXL div {
	margin: 0 1em 1em;
	display: none;
}
div.otherXL p{
	background-color: #656565;
	color: white;
	margin: 1em 0 0 0;
	padding: 2px 1em;
	border-radius: 4px
}

/* Redimensionnement des articles */

/*FULL*/
@media only screen (min-width: 851px) { 
}

/* gestion menu */
@media (max-width: 950px) {
	header div#header div#floatingMenu{float: none; position: inherit}
	header div#header div#floatingMenu ul.lang{text-align: center}	
}


/* IPAD */
@media (min-width: 570px) and (max-width: 970px){
	article.f75{width: 50%}
}	

/* IPHONE */
@media (min-width: 460px) and (max-width: 569px) {	
	article.f75{width: 100%}
	section#learning{background-image: none}
}
/* MINI */
@media (max-width: 459px) {	
	article.f50,article.f75{width: 100%}
	section#learning{background-image: none}
}


t, t a{
	color:red;
	cursor: help;
}