html, body{
height: 100%;
margin: 0; padding: 0;
background-size: cover;
}

form {
    /* Pour le centrer dans la page */
    margin: auto;
    width: 1100px;
/* Pour voir les limites du formulaire */
    background-color : #A9A9F5;
    padding: 0 0 0 0;
    border: 5px solid #CCC;
    border-radius: 1em;
}

form div + div {
    margin-top: 1em;
}

#container {
    width : 100%;
    text-align : center;
}

#left {
    float : left;
    width : 350px;
    margin : 0 0 0 200px;
}

#center {
    display : inline-block;
    width : 0;
    margin : 0 auto;
}

#right {
    float : right;
    width : 400px;
    margin : 0 100px 0 0;
}

#reentre2 label, #reentre_2 label {
   /* Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement */
	border-radius: 5px;
    background-color : #FAAC58;
    display: inline-block;
    width: 360px;
    text-align: right;
}

#place label, #nav label, #recup label, #reentre label, #tour_01 label, #tour_02 label, #tour_03 label, #tour_04 label, #tour_001 label, #tour_002 label, #tour_003 label, #tour_004 label {
   /* Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement */
	border-radius: 5px;
	margin : 0 0 0 30px;
    background-color : #FAAC58;
    display: inline-block;
    width: 360px;
    text-align: right;
}

#navette2 label, #navette5 label, #aeroport2 label, #aeroport4 label, #aeroport6 label, #train2 label, #train4 label, #train6 label {
   /* Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement */
	border-radius: 5px;
	margin : 0 0 0 30px;
    background-color : #FAAC58;
    display: inline-block;
    width: 320px;
    text-align: right;
}

#trouve label, #nom_complet label, #nom1 label, #ip label, #club label, #courriel label, #groupe2 label, #squads1 label, #squads2 label, #squads3 label, #mdp label, #tarif1 label, #tarif2 label, #observation label {
    /* Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement */
	border-radius: 5px;
    background-color : #FAAC58;
    display: inline-block;
    width: 200px;
    text-align: right;
}

#groupe label, #pays label, #message label {
    /* Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement */
	border-radius: 5px;
    background-color : #FAAC58;
    display: inline-block;
    width: 100px;
    text-align: right;
}

#le_groupe label {
    /* Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement */
	border-radius: 5px;
    background-color : #2ECC71;
    display: inline-block;
    width: 80px;
    text-align: right;
}

#tout_paye label, #tour_paye label, #reentre_paye label, #rien_paye label, #somme_tour label , #somme_reent label, #tour label {
    /* Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement */
	border-radius: 5px;
    background-color : #2ECC71;
    display: inline-block;
    width: 150px;
    text-align: right;
}

input, textarea {
    /* Afin de s'assurer que tous les champs textuels utilisent la même police
       Par défaut, textarea utilise une police à espacement constant */
    font: 1em sans-serif;
    font-size: 15px;


    /* Pour donner la même dimension à tous les champs textuels */
    width: 620px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* Pour harmoniser l'apparence des bordures des champs textuels */
    border: 1px solid #999;
}

#trouve input, #nom_complet input, #nom1 input, #ip input, #club input, #courriel input, #squads1 input, #squads2 input, #squads3 input, #mdp input {
    /* Afin de s'assurer que tous les champs textuels utilisent la même police
       Par défaut, textarea utilise une police à espacement constant */
    font: 1em sans-serif;
    font-size: 15px;


    /* Pour donner la même dimension à tous les champs textuels */
    width: 315px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* Pour harmoniser l'apparence des bordures des champs textuels */
    border: 1px solid #999;
}

#navette2 input, #navette5 input, #aeroport2 input, #aeroport4 input, #aeroport6 input, #train2 input, #train4 input, #train6 input {
    /* Afin de s'assurer que tous les champs textuels utilisent la même police
       Par défaut, textarea utilise une police à espacement constant */
    font: 1em sans-serif;
    font-size: 15px;


    /* Pour donner la même dimension à tous les champs textuels */
    width: 170px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* Pour harmoniser l'apparence des bordures des champs textuels */
    border: 1px solid #999;
}

#le_groupe input {
    /* Afin de s'assurer que tous les champs textuels utilisent la même police
       Par défaut, textarea utilise une police à espacement constant */
    font: 1em sans-serif;
    font-size: 15px;


    /* Pour donner la même dimension à tous les champs textuels */
    width: 200px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* Pour harmoniser l'apparence des bordures des champs textuels */
    border: 1px solid #999;
}

#pays input {
    /* Afin de s'assurer que tous les champs textuels utilisent la même police
       Par défaut, textarea utilise une police à espacement constant */
    font: 1em sans-serif;
    font-size: 15px;


    /* Pour donner la même dimension à tous les champs textuels */
    width: 100px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* Pour harmoniser l'apparence des bordures des champs textuels */
    border: 1px solid #999;
}

#tarif1 input, #tarif2 input {
    /* Afin de s'assurer que tous les champs textuels utilisent la même police
       Par défaut, textarea utilise une police à espacement constant */
    font: 1em sans-serif;
    font-size: 15px;


    /* Pour donner la même dimension à tous les champs textuels */
    width: 50px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* Pour harmoniser l'apparence des bordures des champs textuels */
    border: 1px solid #999;
}

#groupe2 input, #nav input, #recup input, #reentre input, #tour_01 input, #tour_02 input, #tour_03 input, #tour_04 input, #tour_001 input, #tour_002 input, #tour_003 input, #tour_004 input {
	display: inline-block;
	width: 1em;
	text-align: right;
	left: 200px;
}

#squad input, #squad1 input {
	display: inline-block;
	width: 1em;
	text-align: right;
	left: 100px;
}

#tout_paye input, #tour_paye input, #reentre_paye input, #rien_paye input, #tour input {
    /* Afin de s'assurer que tous les champs textuels utilisent la même police
       Par défaut, textarea utilise une police à espacement constant */
    font: 1em sans-serif;
    font-size: 15px;


    /* Pour donner la même dimension à tous les champs textuels */
    width: 40px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* Pour harmoniser l'apparence des bordures des champs textuels */
    border: 1px solid #999;
}

#groupe input, #somme_tour input, #somme_reent input {
    /* Afin de s'assurer que tous les champs textuels utilisent la même police
       Par défaut, textarea utilise une police à espacement constant */
    font: 1em sans-serif;
    font-size: 15px;


    /* Pour donner la même dimension à tous les champs textuels */
    width: 230px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* Pour harmoniser l'apparence des bordures des champs textuels */
    border: 1px solid #999;
}

input:focus, textarea:focus {
    /* Afin de rehausser les éléments actifs */
    border-color: #000;
}

#navette2 label, #navette5 label {
    background-color : #79F8F8;
}

#aeroport2 label, #aeroport4 label, #aeroport6 label {
	background-color : #83A697;
}

#train2 label, #train4 label, #train6 label {
	background-color : #BBD2E1;
}

#gare2 label {
    background-color : #BBACAC;
}

#reentre2 label, #reentre_2 label {
    background-color : #BBACAC;
}

#tour label {
    background-color : #FAAC58;
}

#mdp label {
    background-color : #FF5733;
}

#tarif1 label, #tarif2 label {
    background-color : #FDF1B8;
}

.rouge {
	color: red;
}

.tooltip
{
  position: relative;
  cursor: help;
  display: inline-block;
  text-decoration: none;
  color: #222;
  outline: none;
}

.tooltip span
{
  visibility: hidden;
  position: absolute;
  bottom: 30px;
  left: 50%;
  z-index: 999;
  width: 230px;
  margin-left: -127px;
  padding: 10px;
  border: 2px solid #ccc;
  opacity: .9;
  background-color: #ddd;
  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.tooltip:hover
{
  border: 0; /* IE6 fix */
}

.tooltip:hover span
{
  visibility: visible;
}

.tooltip span:before,
.tooltip span:after
{
  content: "";
  position: absolute;
  z-index: 1000;
  bottom: -7px;
  left: 50%;
  margin-left: -8px;
  border-top: 8px solid #ddd;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 0;
}

.tooltip span:before
{
  border-top-color: #ccc;
  bottom: -8px;
}

table {
	border-collapse: collapse;
	width: 1030px;
	text-align: center;
    font-size: 15px;
}

td, th  {/* Mettre une bordure sur les td ET les th */
    border: 1px solid black;
}

textarea {
    /* Pour aligner correctement les champs multilignes et leurs étiquettes */
    vertical-align: top;

    /* Pour donner assez d'espace pour entrer du texte */
    height: 6em;

    /* Pour permettre aux utilisateurs de redimensionner un champ textuel horizontalement
       Cela ne marche pas avec tous les navigateurs  */
    resize: vertical;
}

.button {
    /* Pour positionner les boutons de la même manière que les champs textuels */
    padding-left: 90px; /* même dimension que les étiquettes */
}

button {
    /* Cette marge représente approximativement le même espace
       que celui entre les étiquettes et les champs textuels */
    margin-left: .5em;
}