@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,600");
@import url("font-awesome.min.css");

html{
	text-align: center;
}
.cssbutton {
	border: 1px solid #482683;
	background: #ffffff;
	background: -webkit-gradient(linear, left top, left bottom, from(#482683), to(#ffffff));
	background: -webkit-linear-gradient(top, #482683, #ffffff);
	background: -moz-linear-gradient(top, #482683, #ffffff);
	background: -ms-linear-gradient(top, #482683, #ffffff);
	background: -o-linear-gradient(top, #482683, #ffffff);
	padding: 80px 15px;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
	-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
	box-shadow: rgba(0,0,0,1) 0 1px 0;
	text-shadow: rgba(0,0,0,.4) 0 1px 0;
	color: #339958;
	font-size: 17px;
	font-family: 'Source sans pro', sans-serif;
	text-decoration: none;
	vertical-align: middle;
	}
	.cssbutton:hover {
	border-top-color: #F7485E; /* rappel ancienne couleur : #9696ff; vy :FD9909*/ 
	background: #F7485E;
	color: #482683;
	transition: color 1s;
	transition: background 1s;
	}
	.cssbutton:active {
	border-top-color: #339966;
	background: #339966;
	}

	td { font:normal 16pt}
	.bouton { text-align:right;background:#000000; }
	A { font:12pt PT;
	text-decoration:none;
	color:#2A54AE}
	A:hover {
	border-top-color: #F7485E;
	background-color: #F7485E;
	color: #CCCCCC;
	}

	h4{
	font-family : 'Source sans pro', sans-serif;
	font-weight : bold;
	}

	a:hover span.aide {
	display:block;
	border:1px solid #000;
	background-color:#FFF;
	color:#000;
	text-align: justify;
	font-size: 15px;
	font-style:italic;
	padding:15px;
	position:absolute;
	width:15em;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;
	}

	a span {
	display:none;
	position:absolute;
	}

	.fond {
		background:#FFFFFF;
		width: 100%;
		max-width: 850px;
		text-align:center;
		margin-left: auto;
		margin-right: auto;
	}
	img:
	.ombreout {
	background-color:#E4EFFF;
	border:1px solid #9FC6FF;
	padding:5px;
	box-shadow:2px 2px 10px gray;
	-moz-box-shadow:2px 2px 10px gray;
	-webkit-box-shadow:2px 2px 10px gray;
	}
	h1 {  	font-family: 'Source sans pro', sans-serif;
	color: rgb(42,84,174);
	font-size: x-large; }
	h2 {  	font-family: 'Source sans pro', sans-serif; text-decoration: underline;
	color: rgb(42,84,174);
	font-size: Large;}
	h3 { text-decoration: underline;
	font-weight: bold; font-style: italic; color: #003300;
	font-size: x-small;}
	.bouton_taille:hover {background: #F7485E; color: #FFF;}	/* couleur client */
	.bouton_taille {
		width: 170px;
		height: 35px;
		font-size:14px;
		border-radius: 0.5em 0em 0.5em;
		border: 1px solid #DDDDDD;
		background-color: #482683;
		color: #FFF;
	}
	.no_submit{
		opacity: 0.5;
	}
	#logo_mat{
	float:left;
	width:25%;
	}
	#titre_banner{
	float:left;
	vertical-align:bottom;
	width:48%
	}
	.img_lms{
		width: 100%;
	}
	.titre_page{
	font-family : 'Source sans pro', sans-serif;
	text-decoration: underline;
	color: rgb(42, 84, 174);
	font-size: 2.5em;
	font-weight : bold;
	}
	.contenu_page{
	font-family : 'Source sans pro', sans-serif;
	font-size : 14px;
	display:block;
	text-align: left;
	}
	.contenu_question{
	font-family : 'Source sans pro', sans-serif;
	font-size : 18px;
	display:block;
	text-align: center;
	}
	.contenu_reponse{

	}
	.contenu_descriptif{
		min-height: 250px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
	}
	.detail_descriptif{
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		background-color : #CCCCCC;
		min-height: 210px;
		text-align: left;
		float: right;
		width: 95%;
		margin-right: 10px;
		font-size: 15px;
	}
	.with_border{
		border: 2px solid #AAAAAA;
	}
	.contenu_reponse{
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		background-color : rgb(42,84,174,0.5);
		min-height: 190px;
		text-align: right;
		float: left;
		width: 95%;
		margin-right: 10px;
		font-family : 'Source sans pro', sans-serif;
		font-size : 14px;
		display: block;
	}
	.detail_reponse{
		text-align: right;
		width: 60%;
	}
	.coche_reponse{
		text-align: left;
		float: right;
		width: 36%;
	}
	.space_top{
		min-height: 50px;
	}
	#no_submit_bt{
		color: #AAAAAA;
	}
	
	.alerte_message{
		font-family : 'Source sans pro', sans-serif;
		font: 1.5em;
		color: #DD1111;
		background-color: #EEEEEE;
	}
	
	.affichage_resultat{
		text-align: left;
		margin-left: 20px;
	}
	.qcm_question{
		font-family : 'Source sans pro', sans-serif;
		font-size : 14px;
		color: rgb(0,0,50);
		margin-left: 20px;
	}
	.bonne_reponse{
		font-family : 'Source sans pro', sans-serif;
		font-size : 14px;
		color: rgb(50,220,50);
		margin-left: 20px;
	}
	.mauvaise_reponse{
		font-family : 'Source sans pro', sans-serif;
		font-size : 14px;
		color: rgb(220,50,50);
		margin-left: 20px;
	}
	.absence_reponse{
		font-family : 'Source sans pro', sans-serif;
		font-size : 14px;
		color: rgb(50,50,220);
		margin-left: 20px;
	}
	.hors_delai{
		font-family : 'Source sans pro', sans-serif;
		font-size : 14px;
		color: rgb(150,150,150);
		margin-left: 20px;
	}
	#compteur_div{
		width: 100%;
		background-color: rgb(42,84,174,0.8);
	}
	#decompteur_div{
		width: 0%;
		background-color: #FFF;
	}
	
	
	#logo_sabia{
	vertical-align:bottom;
	width:25%;
	}


	.clear {
	clear: both;
	content: "";
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0px;
	height: 0px;
	}
	

::-webkit-scrollbar {
		width:5px;
}
::-webkit-scrollbar-track {
	background : #DDDDDD;
}
::-webkit-scrollbar-thumb {
  background: #888888;
}



									/* menu */
								
.rubrique{
position: relative;
margin-right: 3%;
margin-bottom: 20px;
float: left;
}

/*
		***********************************************
		***********        850 px       ***************
		***********************************************
*/

@media (max-width:850px) {
	.titre_page {
	font-size: 1.9em;
	}
	.detail_descriptif{

		font-size: 1.2em;
	}
	.bouton_taille {
		width:190px;
		height:35px;
		font-size:1.2em;
		margin: 3px;
		font-family:'Source sans pro', sans-serif;
		text-decoration: none;
		border:1px solid  #ffffff;

	}
	.qcm_question, 
	.bonne_reponse, 
	.hors_delai, 
	.absence_reponse, 
	.mauvaise_reponse{
		font-size: 1.2em;
	}
	.contenu_reponse{
		width: 98%;
	}
}


/*
		***********************************************
		***********        640 px       ***************
		***********************************************
*/

@media (max-width:640px) { /* pc < 640px */

	.bouton_taille {
		width:99%;
		height:35px;
		font-size:1.2em;
		margin: 3px;
		font-family:'Source sans pro', sans-serif;
		text-decoration: none;
		border:1px solid  #ffffff;
	}
	.full_responsive{
		width: 98%;
	}
	.detail_descriptif{
		min-height: 75%;
		font-size: 1.3em;
	}
	.detail_reponse{
		text-align: right;
		width: 98%;
	}
	.coche_reponse{
		text-align: center;
		float: none;
		width: 98%;
	}
	.space_top{
		min-height: 50px;
	}
	.titre_page {
		font-size: 1.6em;
		}
	.login {
		height:50px;
		width : 100%;
		font-size : 25px;
	}
	.contenu_reponse{
		font-size: 1.5em;
		text-align: center;
		width: 100%;
	}

	
}