/* font awesome : fa-lg => petite; fa-2x jusqu'à fa-5x; */
@font-face{
	font-family:'fontawesome';
	src:url('./fonts/fontawesome-webfont.eot');
	src:url('./fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
		url('./fonts/fontawesome-webfont.woff') format('woff'),
		url('./fonts/fontawesome-webfont.otf') format('otf'),
		url('./fonts/fontawesome-webfont.ttf') format('truetype'),
		url('./fonts/fontawesome-webfont.svg#fontawesome') format('svg');
	font-weight:normal;
	font-style:normal;
}
@font-face {
    font-family: 'robotothin';
    src: url('fonts/oboto/roboto-thin.ttf');
    src: url('fonts/roboto/roboto-thin.eot');
    src: url('fonts/roboto/roboto-thin.eot?#iefix') format('embedded-opentype'),
         url('fonts/roboto/roboto-thin.woff2') format('woff2'),
         url('fonts/roboto/roboto-thin.woff') format('woff'),
         url('fonts/roboto/roboto-thin.svg#roboto-thin') format('svg');
    font-weight: normal;
    font-style: normal;
}
*{
	box-sizing:border-box;
	word-spacing:nowrap;
}
html{
	font-family:Verdana,Arial,sans-serif;
	font-size:16px;
	margin:0;
	padding:0;
}
.degrade {
	/* Anciens navigateurs */
	background: #bcbcbc url("gradient-bg.png") repeat-x top;
	-o-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	/* Navigateurs récents */
	background:-webkit-gradient(linear,left top,right bottom,from(#bcbcbc),to(#bcbcbc),color-stop(0.2,#FFFFFF),color-stop(0.4,#dfdfdf),color-stop(0.6, #FFFFFF));
	background:-webkit-linear-gradient(left top,#bcbcbc,#FFFFFF 20%,#dfdfdf 40%,#FFFFFF 60%,#bcbcbc);
	background: -moz-linear-gradient(left top,#bcbcbc,#FFFFFF 20%,#dfdfdf 40%,#FFFFFF 60%,#bcbcbc);
	background: -o-linear-gradient(left top,#bcbcbc,#FFFFFF 20%,#dfdfdf 40%,#FFFFFF 60%,#bcbcbc);
	background: linear-gradient(left top,#bcbcbc,#FFFFFF 20%,#dfdfdf 40%,#FFFFFF 60%,#bcbcbc);
}
img{
	vertical-align:middle;
}
input#connexion[type=submit], input#valider[type=submit], .ajouter{
	width:170px;
	height:35px;
	margin:20px auto;
	font-weight:bold;
	text-align:center;
	border:0;
  border-radius: 10px;
  box-shadow: 6px 6px 0px rgba(0,0,0,0.5);
	font-size:1rem;
}
input#connexion[type=submit]:hover, input#valider[type=submit]:hover, a.ajouter, .ajouter{
	/* Anciens navigateurs */
	background: #6d6d6d url("gradient2-bg.png") repeat-y left;
	-o-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	/* Navigateurs récents */
	background: -webkit-gradient(linear,left bottom, right top,from(#6a6a6a),to(#6d6d6d),color-stop(0.3, #b8b8b8),color-stop(0.5, #dedede),color-stop(0.7, #bcbcbc));
	background: -webkit-linear-gradient(left bottom,#6a6a6a,#b8b8b8 30%,#dedede 50%,#bcbcbc 70%,#6d6d6d);
	background: -moz-linear-gradient(left bottom,#6a6a6a,#b8b8b8 30%,#dedede 50%,#bcbcbc 70%,#6d6d6d);
	background: -o-linear-gradient(left bottom,#6a6a6a,#b8b8b8 30%,#dedede 50%,#bcbcbc 70%,#6d6d6d);
	background: linear-gradient(left bottom,#6a6a6a,#b8b8b8 30%,#dedede 50%,#bcbcbc 70%,#6d6d6d);
	color:#ffffff;
    box-shadow: 3px 3px 0px rgba(0,0,0,0.5);
}
h1{
	width:100%;
	margin:20px;
	text-align:center;
	font-size:1rem;
}
div.stagiaire{
	text-align:center;
	font-family:robotothin;
	font-size:1.2rem;
}
form#stagiaire{
	width:100%;
	margin:20px auto;
	text-align:center;
}
form#stagiaire fieldset{
	width:100%;
	margin:20px auto;
	padding:20px;
	border:dotted 1px #000000;
	border-radius:10px;
}
h2{
	text-align:center;
	margin:20px auto;
	padding:15px;
	font-size:1.4rem;
/*	width:calc(122px + 40ex);*/
	min-width:50%;
}
div.letest{
	width:100%;
	margin:0;
	padding:20px auto;
	text-align:left;
}
form#valider input[type=radio]{
	padding:5px;
	width:1ex;
	text-align:center;
	font-size:1rem;
}
label {
  margin-right: 15px;
  line-height: 32px;
}
input[type=radio] {
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  border-radius:50%;
  width:16px;
  height:16px;
  border:2px solid #000000;
  transition:0.2s all linear;
  margin-right:5px;
  position:relative;
  top:2px;
}
input[type=radio]:checked {
  border:6px solid #00aa00;
}
p.question{
	font-weight:bold;
	font-style:italic;
	font-size:1.2rem;
	margin-bottom:5px;
	margin-top:0;
}
article{
	margin:0;
	padding:10px;
	border-radius:20px;
	border:ridge 8px rgba(5,5,5,0.8);
	text-align:left;
	margin-left:50px;
	margin-right:50px;
}
@media screen and (max-width: 720px){
	body{
		font-size:1rem;
		width:100%;
		max-width:720px;
		margin:0 auto;
		padding:10px;
	}
	form#stagiaire{
		max-width:720px;
	}
	nav ul li a img{
		width:45px;
		height:45px;
	}
	h2{
		width:100%;
	}
	form.resultCentre{
		width:100%;
		margin:10px auto;
		text-align:center;
	}
}
@media screen and (min-width: 721px){
	body{
		font-size:1rem;
		width:100%;
		max-width:1200px;
		margin:0 auto;
		padding:0;
	}
	h1{
		margin-bottom:30px;
		font-size:1.4rem;
	}
	form#stagiaire{
		width:50%;
		margin:20px auto;
	}
	form.resultCentre{
		width:250px;
		margin:20px auto;
		text-align:center;
	}
}
form#stagiaire input#mailStagiaire[type=text]{
	padding:10px;
	width:50ex;
	text-align:center;
	font-size:1rem;
	line-height:1rem;
	border-radius:20px;
}
p.message{
	text-align:center;
	font-style:italic;
	color:#0000ff;
}
table tr:nth-child(odd){
	background-color:#cccccc;
}
table tr:nth-child(1){
	background-color:black;
	color:white;
	font-size:22px;
	line-height:22px;
}
input#resultat{
	/*visibility:hidden;*/
}
section#solutions{
	column-count:1;
	margin-bottom:20px;
}
h3{
	margin:0;
	margin-top:15px;
	padding:0;
	text-decoration:1px solid black;
}
section#stagiaires{
	width:100%;
}
section#stagiaires .bouton{
	text-align:center;
}
section#stagiaires th{
	padding-top:10px;
	padding-bottom:10px;
	font-size:0.9rem;
}
section#stagiaires td{
	padding:1ex;
}
a.ajouter{
	display:block;
	width:250px;
	margin:20px auto;
	padding:10px;
	text-decoration:none;
	font-weight:bold;
	text-align:center;
}