/*

MEMO

			fonce		inter		clair 		rgba 20%			suffixe
orange		fd6519		ffbf9f		ffe3d5		253,101,25,0.2		_pt
bleu		1f9df6		a2d6fa		d2ecfd		31,157,246,0.2		_md
vert		1fc96a		a9e6c4		d2f4e1		31,201,106,0.2		_pe

*/

/* RESET */
html, body {	width:100%; height:100%; }
html, body, p, section, article, div, a, footer, header, span, h1, h2, h3, h4, h5, h6 {	margin:0;	padding:0; }


/* INIT */
@font-face {
    font-family: 'RobotoLight';
    src: url('./images/fonts/Roboto-Light-webfont.eot');
    src: url('./images/fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
        url('./images/fonts/Roboto-Light-webfont.woff') format('woff'),
        url('./images/fonts/Roboto-Light-webfont.ttf') format('truetype'),
        url('./images/fonts/Roboto-Light-webfont.svg#RobotoLight') format('svg');
    font-weight: normal;
    font-style: normal;
}
p, section, article, div, a, footer, header, span, h1, h2, h3, h4, h5, h6, input, textarea, label, select {
    color:#505050;
    font-family: 'RobotoLight';
	font-size:14px;
	line-height:20px;
	font-weight:100;
}
h1{ font-size:18px; line-height:20px; }
h2{ font-size:20px; line-height:20px; }
h3{ font-size:18px; line-height:22px; }


/* SCREEN */
.fond{ position: fixed; width:100%; height:100%; background: #fff url('./images/fond-md-003.jpg') no-repeat top left; 
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.site { width:100%; height:100%; }
.header { width:100%; height:70px; padding:25px 0;}
.main { position:absolute; top:50%; left:50%; margin-left:-350px; width:600px; padding:5px 50px; background:#fff; background:rgba(255,255,255,0.8);}
.contenu, .footer, .copyright, .img_simple , .info, .info.msg , .submit , #loginform, #lost_password, #certificat_info, #certificat_renew  { width:100%; text-align:center; margin-bottom:20px; }
.contenu { margin-top:30px; margin-bottom:50px; }
.footer  { margin-bottom:10px; font-size: 13px;}
.footer, .copyright  { font-size: 13px; line-height:17px;}
.info  { font-size: 16px;}

.header .logo { margin-top:15px; float:left;}
.header .sepa { height:80px; margin-left:20px; float:left; padding-left:20px; border-left:1px solid #1f9df6; border-color:rgba(31,157,246,0.2);}
.header .titre { margin-top:20px; height:20px; color:#505050;}
.header .sub_titre { margin-top:5px; height:20px; color:#1f9df6;}

.img_simple.smartcard{height:260px; background:url(./images/smartcard.jpg) no-repeat center center;}
.img_simple.disconnect{height:140px;}
.img_simple.connect{height:140px;}
.img_simple.ok{background-image: url("./images/ok.gif");background-position: center center;background-repeat: no-repeat;height:128px;}
.img_simple.otp{background-image: url("./images/otp.gif");background-position: center center;background-repeat: no-repeat;height:128px;}
.img_simple.error{background-image: url("./images/erreur.gif");background-position: center center;background-repeat: no-repeat;height:128px;}
.img_simple.maintenance{background-image: url("./images/maintenance.gif");background-position: center center;background-repeat: no-repeat;height:128px;}


/* ELEMENTS */
a {	text-decoration:none;	color:#1f9df6; }
a:hover { color:#505050; }
.saisie { float: left;	width: 350px;	height: 25px;	margin-bottom: 10px;	padding: 5px;	border:1px solid #d2ecfd;	border-color:rgba(31,157,246,0.4);}
.label   { float: left;	width: 150px;	text-align: left;	margin-left: 40px;	margin-top: 5px;}
#password, #login_retry { margin-bottom:40px; }
.submit .button {
	display: inline-block;
	width: 220px;    height: 42px;
	padding: 10px;	margin-bottom: 0px;
	color: #1f9df6; font-size: 14px;	line-height: 20px;	text-align: center;
	vertical-align: middle;
	border-radius: 0; border:0;
	cursor: pointer;
	background: url('./images/submit-220x42px.png') no-repeat top left;
	background-position:0px -42px; 
	box-shadow: 0px 1px 0px rgba(255, 255, 255, 0) inset, 0px 1px 2px rgba(0, 0, 0, 0);
	text-shadow: 0px 1px 1px rgba(255, 255, 255, 0);
}
.submit .button:hover {    color: #777; background-position:0px -126px; }
.retour { display: block; margin-top: 5px; }

.icone30_fermer {
	float:right;
	margin-top: -10px;	margin-right: -30px;
	width: 30px; height:30px;
	background: url('./images/icons-30x30px.png') no-repeat; 
	background-position: -30px 		-240px;     
	cursor:pointer;
}
.icone30_fermer:hover  {		background-position: -90px 		-240px;     }