@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
	  
/* ---------------------- Balises ---------------------------- */

*
	{
	font-family:'Roboto Condensed', helvetica, arial;
	-webkit-font-smoothing: antialiased;
	color:#444;
	outline:0;
	box-sizing: border-box;
	}
	
body
    {
	margin:0;padding:0;
    }
	
input[type=text], input[type=password]
	{
	-webkit-appearance: none;
	border-radius:7px;
	font-size:1.2em;
	padding:15px;
    margin-bottom:10px;
    border:1px solid #ddd;
    width:100%;
	}
	
input:focus
	{
    border:1px solid #666;
	}

input:-webkit-autofill {color: #fff !important;}

strong {color:black}

a.link {
	text-decoration:none;
	font-size:.9em;
	color:white;
}  
/* ---------------------- Styles génériques ---------------------------- */

.bouton
	{
	border:3px solid #ccc;
	padding:5px 20px;
	border-radius:5px;
	display:block;
	clear:both;
	text-transform: uppercase;
	color:gray;
	text-align:center;
	cursor:pointer;
	background-color:rgba(255, 255, 255, 0.76);
    width:100%;
	font-size:1.2em;
	text-decoration:none;
	margin-top:20px;
	box-sizing: border-box;
	}
	
.valider
	{
	background-color:gray;
	text-transform: uppercase;
	color:white;
	}

.alerte
	{
	color:red;
	text-align:center;
	}

.message
	{
	color:green;
	text-align:center;
	}		
	  
/* ---------------------- Styles ---------------------------- */


.titre		{background-color:#aaa;}	
.titre.gdm	{background-color:#ffdd00;color:black}
.titre.gdn	{background-color:#009e3c}
.titre.gds	{background-color:#006fb7}
	  
	  
/* ---------------------- Identification ---------------------------- */ 

	
body.accueil
	{
	background-size:cover;
	}
	
.identification, .sommaire
	{
	max-width:300px;
	margin:30px auto;
	background-color:rgba(255, 255, 255, 0.75);
	padding:20px;
	box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.2);
	}

.sommaire
	{
	text-align:left;
	overflow:auto;
	padding:20px;
	}	

.sommaire > div
	{
	font-size:1.2em;
	line-height:2em;
	border-top:1px solid gray;
	cursor:pointer;
	clear:both;
	overflow:auto;
	}	

.sommaire > div:hover
	{
	background-color:#ccc;
	}

.sommaire > div.titre
	{
	text-align:center;
	cursor:default;
	}
	
.sommaire .nom
	{
	float:left;
	padding-left:10px;
	}
	
.sommaire .page
	{
	float:right;
	padding-right:10px;
	}
	
.fenetre
	{
	margin:30px auto;
	text-align:center;
	}	
	
.fenetre .parution
	{
	margin:10px;
	width:300px;
	display:inline-block;
	text-decoration:none;
	font-size:1.4em;
	color:#666;
	background-color:white;
	text-align:center;
	margin-top:20px;
	border-radius:6px 6px 0px 0px;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.47);
	cursor:pointer;
	}
	
.marges
	{
	margin:10px;
	}
	
@media screen and (max-width: 320px) {
	.identification {margin-left:10px;margin-right:10px}
	}
@media screen and (min-width: 340px) {
	.bouton {max-width:300px;margin:auto;}
	}	
.identification .titre
	{
	padding:20px 0;
	font-size:1.4em;
	background:none;
	}
	
.identification .oubli
	{
	display:none;
	opacity:0;
	}
	
.logo
	{
	background:url('logo-identification.png') no-repeat;
	background-size:contain;
	width:260px;
	margin:0 auto;
	height:100px;
	}
	
.progress
	{
	font-size:.8em;
	text-align:center;
	width:300px;
	background-color:white;
	padding:10px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	position:fixed;
	left:20px;
	top:20px;
	}
	
.progress strong
	{
	font-size:1em;
	}