/* CSS Document */

body {
    font-family: Verdana, Arial;
    background-color: #F8F8F8;
}

html {
    height: 100%;
}

img {
    vertical-align: middle;
}

p.presentation {
    margin-bottom: 2em;
}

p.attention {
    display: block;
    vertical-align: middle;
    margin-bottom: 3em;
}

/* Titres H */
h1 {
  font-size: 22px;
  background-color: #AEABAB;
    color: #ffffff;
    text-align: center;
    padding: 1em 0 1em 0;
}

h1.accueil  {
    font-size: 22px;
      color: #666;
      background-color: #F8F8F8;
}

h5 {
    font-size: 16px;
      color: brown;
      background-color: #F8F8F8;
}

/* Liens */
a {
    color: #42a7dc;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    color: red;
}

a.visited {
    text-decoration: none;
}

/* Formulaires */
form {
    align: center;
    /*width: 64%;*/
    max-width: 700px;
    margin: 0 0 10px 0;
    text-align: left;
    padding: 2em 2em;
    background-color: #FFF;
}

fieldset {
  border: 1px solid #AEABAB;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
  border-radius: 15px;
  border-radius: 15px;
  padding: 2em 2em;  
}

legend {
  font-family: arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 1.2em;
  color: #E85252;
  margin: 1em 0 1em 0.5em;
}

form#formulaire label  {
  display: block;
  clear: both;
  width: 12em; 
  float: left;
  font-family: arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 14px;
  color : #666;
  padding-top: 5px;
}

form#formulaire input  {
  margin: 2px 0 2px 0;
  font-size: 14px;
  max-width: 26em;
  height: 30px;
  line-height: 28px;
  padding: 0 5px 0 5px;
  border: 1px solid #F50A29;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

form#formulaire input:focus,
form#formulaire select:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}  

form#formulaire input[type="radio"]  {
  margin:  1em 0.5em;
  font-size: 14px;
  height: 10px;
  border: none;
}

/* SELECT  */
.styled-select {
  height: 34px;
  overflow: hidden;
  width: 240px;
  margin-bottom: 2px;
  padding-left: 3px;
}

.styled-select select {
  /*background: url(../images/fleche_xs.png) no-repeat 97% 0;*/ 
  border: 1px solid #F50A29;
  font-size: 14px;
  height: 34px;
  line-height: 27px; /* pour Safari */
  padding: 5px; /* If more padding here, the options won't show in IE */
  width: 240px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  /* -webkit-appearance: none;*/
}

.white { background-color: #FFF; }
.white select { color: #333; }

/*textarea {
        border: 1px solid #EE7E24;
        margin: 20px 0 30px 0;
}*/

.monChampSpecial { display: none; } /* anti-robot */

label.required:after,
.required:after  {
  content: ' *'; 
  font-size: 1.2em;
  color: red; 
  margin: 0;
} 

span.required {
  display: block;
  width: 24em;  
  float: left;
  clear: left;
}

p.nota {
  font-size: 0.8em;
  color: red;
  display: block;
  margin-left: 2em;
}

form#formulaire input[type=submit]  {
  display: block;
  font-family: arial, helvetica, sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #FFF;
  background-color: #6195A8;
  padding: 0.3em 1em 1em 1em;
  margin-left: 19.6em;
  margin-top: 1em;
  height: 42px;
  border: 2px solid #F50A29;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  border-radius: 10px;
  cursor: pointer;
}

 form#formulaire input[type=submit]:hover {
  background-color: #999;
}

/* media query */
@media (max-width: 1048px) {
  form#formulaire label {
    float: none;
  }
  form#formulaire input {
    width: 90%;
  }
  form#formulaire input[type=submit] {
    margin-left: 0;
    width: 100%;
  }
  img {
    max-width: 100%;
    height: auto;
  }
}

img.image_footer {
  padding-top: 20px;	
}

/* validation errors */
#message_error {
  color: red;
  width: 60%;
  font-size: 1.2em;
  margin-bottom: 1em;
  border-bottom: 1px solid #CBD32A;
}

#message_error  p {
  border-bottom: 1px solid #CBD32A;
}

form#formulaire label.error,
form#formulaire #coordonnees label.error  {
  display: block;
  float: left;
  font-size: 0.8em;
  color: red;
  font-weight: bold;
  width: 100%;
  padding: 0.2em 0.2em;
}

/* placement des messages d'erreur */
form#formulaire #coordonnees label.error  {
  margin-left: 22em;
}



/*div#enregistrement_confirmation {
    width: 50%;
    text-align: center;
    color: 666;
    font-size : 1.1em;
    font-weight: bold;
    background-color: #F8F8F8;
    border: 1px solid #CCCCCC;
    margin : 6em auto;
    padding: 2em 2em;
}*/



/* inserting in the database errors */
div.success_message {
    font-weight: bold;
    align: center;
    width: 64%;
    max-width: 750px;
    margin: 0 0 10px 0;
    text-align: center;
    padding: 2em 2em;
    background-color: rgb(223,254,192);
}

div.error_message {
    font-weight: bold;
    align: center;
    width: 64%;
    max-width: 750px;
    margin: 0 0 10px 0;
    text-align: center;
    padding: 2em 2em;background-color: rgb(238,43,15);
}

div.exists_in_db_message {
    font-weight: bold;
    align: center;
    width: 64%;
    max-width: 750px;
    margin: 0 0 10px 0;
    text-align: center;
    padding: 2em 2em;background-color: rgb(237,240,115);
}