html, body {
  width: 100%; height: 100%;
  font: 10px verdana, arial, helvetica, sans-serif;
  line-height: 12pt;
  color: #888888;
}
html, body,form, input,table,td, th,div,span,a{
  margin: 0; padding: 0;border:0;
}
input {border: 1px solid; }

table { width: 100%; height:100%; border-collapse: collapse; border-spacing: 0px; }

a:link, a:visited, a:hover, a:active { color: #888888; }


.invisible { display:none; }


#loginpage { width: 100%; height: 100%; position: absolute; }

/** Bloc Header */
#tdheader { vertical-align: top; width: 100%; height:43px; }
#header { position: relative; vertical-align: top; width: 100%; height:43px; background-image: url(../images/BarreHaute.jpg); background-repeat: repeat; } 

#logo { position: absolute; top: 0px; left: 0px; width:200px; height:43px; vertical-align: top; }

#slogan { position: absolute; top: 0px; left: 100%; margin-left: -390px; width:390px; height:43px; vertical-align: top; }

/** Bloc Footer */
#trfooter { height:35px; vertical-align: bottom; }
#footer { background-image: url(../images/BarreBasse.jpg); background-repeat: repeat; height:35px; }


/** Infos securit� */
#mask {
  position:absolute;
  display: none;
  left:0; top:0;
  z-index:9000;
  background-color:#FFFFFF;
  display:none;
  width: 100%; height: 100%;
  opacity: 0.4;
}
#infoSecurity {
  position:absolute;
  left:0; top:0;
  display: none;
  z-index:9999;
  width:674px; 
  height:354px;
  background-color:#FFFFFF;
  font-weight: bold;
}

#infoSecurity .header {
    font-size: 15px;
    text-decoration: underline;
    padding-top: 5px;
    padding-bottom: 10px;
    padding-left: 20px;
}

#infoSecurity .body {
    background-color: #FBFBFB;
    font-size: 13px; color: #8A8A8A;
    padding-left: 20px; padding-right: 20px; padding-top: 1px; padding-bottom: 1px;
}
#infoSecurity .body a { color: #8A8A8A; }
#infoSecurity .validerSecurity {
    width: 100%;
    text-align: right;
    padding-top: 40px;
    padding-bottom: 5px;
    background-color: #FFFFFF;
}

/** Partie centrale */
#container { 
position: relative; width: 584px; height: 312px; 
background-image: url(../images/fond_structure2.jpg); 
background-repeat: no-repeat; background-position: top; 
}

#containerOTP { 
background-image: url(../images/dot.gif); 
background-repeat: no-repeat; background-position: top; 
}


/** Bloc Questions / R�ponses */
#faq {
	position: absolute;
	top: 120px; 
	left: 20px;
	width: 220px;
	font-size: 12px; font-style: normal; font-weight: bold;
	text-align: left; vertical-align: top; 
}
#faq a { 
 text-decoration: none; }

div.question { margin: 30px 0; }

/** Bloc Champs Formulaire */
#fields { position: absolute; top: 94px; 	right: 20px;
width:300px; height: 70px; text-align: right; }

#fieldsOTP { 
width:260px; height: 70px; text-align: right; }


.field { font-size: 14px; width: 150px; height: 20px; border-color: #7F9CBC; margin-left: 8px; }
#IDToken1 { width: 200px; }

#labels { left: 141px; width: 190px; position: absolute; top: 100px; text-align: right;  }
.LblLev2Txt { font-size: 12px; font-style: normal; font-weight: bold; 
color: #444444;
 text-align: left; margin-bottom: 16px }

/**
	 * Pav� num�rique
	 */
#calculette {
background-image: url(../images/calculette_fond.png); 
background-position: center;
background-repeat: none;
background-color: transparent;
	position: absolute;
	top: 75px;
	right: 0px;
	width: 110px;
	height: 104px;
}

#calculetteOTP {
background-image: url(../images/calculette_fond.png); 
background-position: center;
background-repeat: none;
background-color: transparent;
width: 110px;
height: 104px;
margin-left:150px;
}


.lignePaveNum {
	width: 110px;
	height: 21px;
	line-height: 21px;
	margin:0;padding:0;
}

.cellulePaveNum {
	margin:0;padding:0;
	color: #000000;
	height: 21px;
	width: 22px;
	display: block;
	float: left;
	cursor: pointer;
	text-align: center;
	vertical-align: top;
}

span.cellulePaveNum:hover {
	background-color: #555555;
	color: white;
}

.lienPaveNum {
	font-size: 18px;
	font-weight: bolder;
}
#boutoneffacer, #boutonvalider, .Btn1Def, .Btn1DefHov, .close {
    height: 35px;
    width: 99px;
	border: none;
	margin:0;padding:0;
background-color: transparent;
background-position: center;
background-repeat: none;
}

#boutoneffacer {
	background-image: url(../images/bouton_effacer.png); 
	position: absolute;
	bottom: 33px;
	right: 130px;
	top: 150px;
}

#boutoneffacerOTP {
	background-image: url(../images/bouton_effacer.png); 
	position: absolute;
	bottom: 33px;
	left: 10px;
	top: 40px;
    height: 35px;
    width: 99px;
	border: none;
	margin:0;padding:0;
background-color: transparent;
background-position: center;
background-repeat: none;
}


#validation { vertical-align: top; padding-top: 16px; text-align: left; width:584px; height: 35px; }

#validationOTP { vertical-align: top; padding-top: 80px; text-align: left; width:265px; height: 35px; }


#boutonvalider, .Btn1Def, .Btn1DefHov {
	background-image: url(../images/bouton_valider.png); 
	float:right;
}

	

.logLbl {
	margin-bottom: 6px;
	 }
	

.Btn1Def {
	-moz-box-shadow:inset 0px 1px 0px 0px #27301f;
	-webkit-box-shadow:inset 0px 1px 0px 0px #27301f;
	box-shadow:inset 0px 1px 0px 0px #27301f;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9e9090), color-stop(1, #0a0a0a) );
	background:-moz-linear-gradient( center top, #9e9090 5%, #0a0a0a 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9090', endColorstr='#0a0a0a');
	background-color:#9e9090;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #848780;
	display:inline-block;
	color:#ffffff;
	font-family:arial;
	font-size:12px;
	font-weight:bold;
	padding:2px 5px;
	text-decoration:none;
	text-shadow:1px 1px 0px #171f0a;
	height:30px;
	margin-right:2px;
}
.Btn1Def:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0a0a0a), color-stop(1, #9e9090) );
	background:-moz-linear-gradient( center top, #0a0a0a 5%, #9e9090 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0a0a0a', endColorstr='#9e9090');
	background-color:#0a0a0a;
}.Btn1Def:active {
	position:relative;
	top:1px;
}
/* This imageless css button was generated by CSSButtonGenerator.com */

.logInp {
	text-align: left;
	margin-left: 100px;
	margin-top: 8px; 
	height: 11px; 
	font: bolder 11px verdana, arial, helvetica, sans-serif; 
	color: #454545;
	}

#validation a {
	font-size: 10px;
color: #B5B5B5;
	line-height: 35px;
	vertical-align: bottom;
	float:left;
	margin-left: 2px;
}
#security {
    width: 584px;
    padding-top: 15px;
    text-align: left;
}

#security a {
    font-size: 10px;
}
#fieldsEnv { color: Green; text-align: center; vertical-align: middle; font-size: 18px;height: 24px; margin-top: 10px; }

#fieldsErreur { text-align: center; font-size: 12px; margin-top : 1em; font-weight: bolder; }
#fieldsErreur span{ color: #D80000; padding-right:0.5em; }


#fieldsErreurOTP { font-size: 12px; margin : 5px; font-weight: bolder; }
#fieldsErreurOTP span{ color: #D80000; }