@charset "utf-8";
/* CSS Document */

html {
  font-size: 16px;
  font-family:Arial, Helvetica, sans-serif;
}

html, body, #contener {
    height: 100%; padding-bottom:330px;
}
@media (max-width: 900px) {
  html { font-size: 15px; }
}
@media (max-width: 400px) {
  html { font-size: 13px; }
}


body{ margin:0; padding:0;}
p{ margin:0; padding:0;}
.breaker{ clear:both;}

#contener{ width:100%; position:relative;display: table;  height: 100%;}

/***** Start header *****/
#header{width:100%;}
#header .bar_top{ height:27px; background:url(../images/bg_bar_top.png) repeat-x bottom #504f4f; font-size:0.95em; color:#c4c2c2; padding:8px 20px 0 20px;}
#header .bar_top a{color:#c4c2c2; text-decoration:none;}
#header .bar_top a:hover{text-decoration:underline;}
#header .bar_top .welcome{ float:left;}
#header .bar_top .url{ float:right;}
#header .bar_bottom{ height:100px; background:#a9273a; border-top:#ff4e74 1px solid; position:relative;}
#header .bar_bottom .logo{position:absolute; left: 20px; top:11px;}
#header .bar_bottom .bar_bottom_menu{position:absolute; bottom:20px; right:20px; color:#FFF; font-size:0.85em; font-weight:bold;}
#header .bar_bottom_menu .identifiant , #header .bar_bottom_menu .suivi_bat{ display:inline; margin-right:20px;}
#header .bar_bottom_menu .deconnexion {  display:inline;text-transform:uppercase;}
#header .bar_bottom_menu .deconnexion a{ border:1px #ff4e74 solid; padding:5px 10px 5px 10px; color:#FFF; text-decoration:none;}
#header .bar_bottom_menu .deconnexion a:hover{ text-decoration:none; background:#FFF; color:#ff4e74;}
#header .bar_bottom_menu .suivi_bat{float:left !important;}
#header .bar_bottom_menu .suivi_bat a{ border-bottom :1px #ff4e74 solid; padding:5px 10px 5px 10px; color:#FFF; text-decoration:none;}

/***** End header *****/

/***** Start center *****/
#center{width:100%;}
#center .box_login{margin:auto; background:#f0f0f0; padding:14px 0 14px 0; margin-bottom:20px;}
#center .box_login a{ text-decoration:none; color:#787878; font-size:1em;}
.box_login .intro{ color:#787878; padding:0 20px 0 20px; margin-bottom:20px;}
#center .msg_alert{background:#fef1d2;color:#787878;}
#center .msg_notif{background:#A0D3E8;color:#4F4F4F;}
#center .msg_alert, #center .msg_notif{margin:auto; padding:38px 10px 38px 50px ;font-size:1em; overflow:hidden;}
#center .msg_alert .url{ margin-top:20px; font-size:1.3em}
#center .msg_alert .url a{ text-decoration:none; color:#787878;}
#center .msg_alert .url a:hover{ text-decoration:underline;}
#center .msg_alert .position_form,#center .msg_notif .position_form{ margin-top:20px;}
#center .erreur{color:#a9273a;}
#center h3{font-family: 'eras_bk_btbook'; font-size: 1.7em;line-height: 1.2em; color:#A9273A; margin:30px 0;}
.center_login{width:68%!important; margin:auto;}


.center_page_validation .simulation{ background:#f0f0f0; }
.center_page_validation .simulation .content{ margin: auto;width: 68% !important; border:1px #f0f0f0 solid; padding-bottom:30px;}
.center_page_validation .simulation .iframe{ background:#FFF; border:1px #b6b6b6 solid;}

.center_page_validation .validation{ background:#fff}
.center_page_validation .validation .content{ margin: auto;width: 68% !important; border:1px #fff solid;}

.center_page_validation .validation .content hr{ height: 1px; border: 0; color: black; background-color:#cecece; margin:20px 0;}

.valid_oui{ width:45%; float:left; background:#f0f0f0  url(../images/valid_oui.png) 10px 10px no-repeat; padding:70px 20px 20px 20px; color:#787878;}
.valid_oui .cssform label{ width:132px;}
.valid_oui input.text{ width:266px;}
.valid_oui .btn_submit{ text-align:right;}
.valid_oui .table_notes{ margin:20px 0;}
.valid_oui .note{ color:#a8293e;}

 .valid_non{  width:45%; float:right; background:#f0f0f0  url(../images/valid_non.png) 10px 10px no-repeat; padding:70px 20px 20px 20px; color:#787878; height:320px;}

 .valid_non .btn_submit{ text-align:right;}


.valid_non .cssform label{  width:132px;}
.valid_non .cssform input.text, .valid_non .cssform textarea{  width:253px;}


/***** End center *****/

/***** End Footer *****/
#footer{
text-align:center;
background:#2d2d2d;
padding:30px 0 30px 0;
color:#7e7d7d;
font-weight:bold;
margin-top:40px;
bottom: 0;
position: absolute;
width: 100%;}


#footer .logo{ margin-bottom:30px;}
#footer ul li{ display:inline; background:url(../images/separator.png) left no-repeat; padding-left:10px;}
#footer ul li.first{ background:none; padding-left:0}
#footer ul li a{ color:#7e7d7d; text-decoration:none;}
#footer ul li a:hover{ text-decoration:underline;}
/***** End Footer *****/


/***** Start cssform *****/
.cssform p {
    color: #606060;
    padding-top: 14px;
}

.cssform label {
    display: block;
    float: left;
    width: 212px;
	text-align:right;
	padding-right:10px;
	text-transform:uppercase;
	font-size:0.875em;
	font-weight:bold;
}
.cssform input {
    color: #626262;
	padding-left:5px;
	padding-right:5px;
}
.cssform input.text {
    border: 1px solid #ABADB3;
    color: #626262;
    height: 18px;
    width: 232px;
}
.cssform textarea {
    border: 1px solid #ABADB3;
    color: #626262;
	padding-left:5px;
	padding-right:5px;
}
.cssform input.obligatoir {
    border: 1px solid #FF0000;
}
.cssform input.button{
	background:#a9273a;
	border:1px solid #ff4e74;
	color:#FFF;
	text-transform:uppercase;
	font-weight:bold;
	font-size:0.750em;
	padding:3px 8px;
	cursor:pointer;
}

.cssform select {
    width: 232px;
}
.cssform textarea {
    width: 232px;
}

/***** End cssform *****/

@media (max-width: 1400px) {
/*  .box_login { border:2px red solid; }*/
	.center_page_validation .simulation .content{ width:98%!important;}
	.center_page_validation .validation .content{ width:98%!important;}
}

@media (max-width: 950px) {
/*  .box_login { border:2px red solid; }*/
	.valid_oui .cssform label{ width:100%; text-align:left}
	.valid_oui .cssform input.text, .valid_non .cssform textarea{ width:100%;}
	.valid_non .cssform label{ width:100%; text-align:left}
	.valid_non .cssform input.text, .valid_non .cssform textarea{ width:100%;}
	.valid_oui{ width:43%; margin:auto}
	.valid_non{ width:43%; height:380px; margin:auto;}
}

@media (max-width: 820px) {
/*  .box_login { border:2px red solid; }*/
	.valid_oui{ width:43%;}
	.valid_non{ width:43%; height:430px;}
}

@media (max-width: 650px) {
	.valid_oui{ width:320px;float:none;}
	.valid_non{ width:320px;height:390px; float:none; margin-top:20px}
}

@media (max-width: 720px) {
	.center_login{ width:90%!important;}
}


@media (max-width: 550px) {
	.box_login{ /*border:1px red solid; */}
  .cssform label{width:33%}
  .cssform input.text{width:152px}
}

@media (max-width: 540px) {
	.center_login{ width:90% !important;}
	#center .msg_alert, #center .msg_notif{ padding:18px 10px 18px 20px}
	#header .bar_top{ height:42px;}
	#header .bar_top .welcome{ float:none;}
	#header .bar_top .url{ float:none; display:block;}
}

@media (max-width: 460px) {
  #header .bar_bottom_menu .identifiant{ display:block; margin-bottom:10px;}
  #header .bar_bottom_menu .deconnexion{ display:block;}
  }
@media (max-width: 420px) {
/*  .box_login { border:2px #FFFF00 solid; }*/
  #center .box_login{ width:280px}
  .cssform input.text{ width:162px}
  .cssform label{width:33%}
  #center .msg_alert,#center .msg_notif{ padding:8px 10px 8px 20px;width:254px}
  .cssform input.button{ margin-left:20px; margin-top:5px;}
  .cssform input.text{ width:152px;}

}

.cssform span.error p,.cssform td.error p,.cssform td.error{
display: block ;
color: #dd4b39;
line-height: 17px;
font-size: 12px;
}

.cssform span.error p{
margin: 0 0 0 223px;

}

.cssform td.error p,.cssform td.error{
margin : 0px;
padding: 0px;
}

.cssform td label{
    text-align: left !important;
    width: auto !important;
}

.msg_notif p a{
color: #3399FF !important;
}
/* validation rules*/
form.cssform input.error { border: 1px solid red!important; }
form.cssform label.error, label.error {
    /* remove the next line when you have trouble in IE6 with labels in list */
    color: red;
    font-style: italic;
    float:inherit !important;
    display: inline;
    font-weight: bold;
    font-size: 10px;
    padding-left:5px;
    text-transform:inherit  !important ;
}
input.error { border: 1px dotted red; }

#msg_send_url span.send_succes,#msg_send_remarque span.send_succes,#msg_valid_creation  span.send_succes{
  color: #00A879 !important;
  font-size: 12px;
}

#msg_send_url span.send_error,#msg_send_remarque span.send_error,#msg_valid_creation  span.send_error{
  color: red !important;
  font-size: 12px;
}


a.lien_export{
  padding: 10px;
  color: #B0233C !important;
}

.designer{
  padding: 10px;
  text-align: right;
  font-size: 12px;
}
div.filter{
  margin: 0px auto;
  width: 20%;
  margin-top:20px;
}
select#box_suivi_bat{
padding: 5px;
}

#suivi_bat p {
  text-align: center;
}

/*------------------ css table ------------------*/

table.valid tbody tr > td {
  background-color: #dff0d8 !important;
}

table.aucun_retour tbody tr > td {
  background-color: #f2dede !important;
}

table.remarques tbody tr > td {
  background-color: #fcf8e3 !important;
}

table {
  background: #f5f5f5;
  border-collapse: separate;
  box-shadow: inset 0 1px 0 #fff;
  font-size: 12px;
  line-height: 24px;
  margin: 30px auto;
  text-align: left;
  width: 80%;
} 

th {
  background: url(http://jackrugile.com/images/misc/noise-diagonal.png), linear-gradient(#777, #444);
  border-left: 1px solid #555;
  border-right: 1px solid #777;
  border-top: 1px solid #555;
  border-bottom: 1px solid #333;
  box-shadow: inset 0 1px 0 #999;
  color: #fff;
  font-weight: bold;
  padding: 10px 15px;
  position: relative;
  text-shadow: 0 1px 0 #000;  
}

th:after {
  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.08));
  content: '';
  display: block;
  height: 25%;
  left: 0;
  margin: 1px 0 0 0;
  position: absolute;
  top: 25%;
  width: 100%;
}

th:first-child {
  border-left: 1px solid #777;  
  box-shadow: inset 1px 1px 0 #999;
}

th:last-child {
  box-shadow: inset -1px 1px 0 #999;
}

td {
  border-right: 1px solid #fff;
  border-left: 1px solid #e8e8e8;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #e8e8e8;
  padding: 10px 15px;
  position: relative;
  transition: all 300ms;
}

td:first-child {
  box-shadow: inset 1px 0 0 #fff;
} 

td:last-child {
  border-right: 1px solid #e8e8e8;
  box-shadow: inset -1px 0 0 #fff;
} 

tr {
  background: url(http://jackrugile.com/images/misc/noise-diagonal.png);  
}

tr:nth-child(odd) td {
  background: #f1f1f1 url(http://jackrugile.com/images/misc/noise-diagonal.png);  
}

tr:last-of-type td {
  box-shadow: inset 0 -1px 0 #fff; 
}

tr:last-of-type td:first-child {
  box-shadow: inset 1px -1px 0 #fff;
} 

tr:last-of-type td:last-child {
  box-shadow: inset -1px -1px 0 #fff;
} 
/* style zone de recherche html table search*/
div.zone_search{
  margin-left: 136px;
}
div.zone_search input{ 
  margin-left: 5px;
  width: 240px;
}

.msg_simulation_novalid, .msg_simulation_valid{
  font-weight: bold;
  padding-top: 15px;
  font-size: 14px;
}

 .msg_simulation_valid{
   color:#3c763d;
}

.msg_simulation_novalid{
   color:#a94442;
}

.msg_simulation_novalid p{
margin-top: 5px;
font-size: 11px !important;
line-height: 15px;
color :#3A3939;
}