/*
-----------------------------------------------
Styles "GIHP - Reservations en ligne"

media:    screen
auteur:   Matthieu Faure // Open-S.com
version:  26/02/2007

Remarques:
- utilisation des librairies YUI (reset, fonts et grids; appelees dans le HTML)
- specifier les tailles de texte EXCLUSIVEMENT en pourcentage (cf http://developer.yahoo.com/yui/fonts/ )
- taille de base: 100% correspond a une taille de 13px

- tous les h2 sont en display inline (afin de ne pas generer une bande blanche sur l'image de background)
- penser à replacer un display:block sur les h2 autres que ceux de couleur bordeau
----------------------------------------------- */

/* surcharge balises HTML
----------------------------------------------- */

h2, h3 {
	margin: 1em 0 1em 0;
	color: #790000;
	background: white;
	font-weight:bold;
}

h2 {
	font-size: 152%; /* 20px */
	display:inline;
}

h3 {
	font-size: 122%; /* 16px */
}

strong {
	font-weight:bold;
}

em {
	font-style: italic;
}

p {
	margin: 1em 0;
}

input:focus, textarea:focus {
	color: black;
	background-color: #ffffe1;
}
/* Adaptation longueur des champs de formulaire */
.fcontent input, .fcontent select, .fcontent textarea{
  width:19em;
  margin-top:5px;
}
/* classe a rajouter sur les input type checkbox...*/
.fcontent input.no_longueur{
  width:1em;
}
/* Changement de couleur au focus (ref couleur : vert fonc� de la gamme graphiste) */
a:focus, a:hover, button:focus, button:hover{
  color:#357100;
}
/* classes generiques
----------------------------------------------- */
.skip {
	height:0;
	width:0;
	left:-19000px;
	overflow:hidden;
	position:absolute;
  visibility: hidden;
}
.clear{
	clear:both;
}
.no-underline{
  background-color:#ffffff;
	text-decoration:none;
}
.no-underline img{
  vertical-align:middle;
}
.obligatoire{
	color: red;
	font-weight:bold;
}
.erreur h2,
.erreur h3{
	display:inline;
	color: red;
  margin:0;
}
.erreur p{
	color: red;
  margin:0 0 1em 0;
}
.show_erreur{
  border:1px solid red;
  padding-bottom:5px;
  margin-bottom:10px;
}
.show_erreur p{
  color:red;
  padding-left: 7.3em;
}
.readonly {
	color:black;
	background: #c0c0c0;
	font-style:italic;
}

.liste-a-point {
	list-style-type: disc;
	list-style-position:inside;
	margin: 1em 0 1em 0.5em;
}

.liste-a-point li {
	margin: 0.2em 0 0 0.2em;
}

.message-positif {
	margin: 2.5em 0 2em 10%;
	padding: 1em;
	width: 20em;
	text-align: center;

	font-size: 122%; /* 16px */
	font-weight: bold;
	color:black;
	background: #ffd;
	border: solid 1px #ff0;
}

h2.message-positif {
	display:block;
}

/* =clearfix
 -------------------------------------------------- */
/* clearfix/easyclearing: cf http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* classes du projet
----------------------------------------------- */
.page-center {
	margin: 5px 7% 0 7%;
	text-align:left;
}

.largeur-contenu {
	width: 75%;
}

.aide-formulaire {
	float:right;
	width: 20%;
	color: black;
	background: #ffffe1;
	border: solid 1px black;
	padding: 0.1em;
}

.aide-formulaire h2 {
	display:block;
	margin: 0 0 0 0;
	font-size:100%;
	font-weight: bold;
	border-bottom: solid 1px black;
	color: black;
	background: #ffb;
  padding:0.3em;
}
.aide-formulaire p {
  padding:0.3em 0.3em 0 0.5em;
}
.aide-formulaire h2 img{
  vertical-align:bottom;
}
.formulaire-liste-boutons {
	margin: 2em 1em 1em 0;
/* 	width: a definir  */
	text-align:right;
}

.liens-post-formulaire {
	margin: 2em;
  clear:both;
}

.liens-post-formulaire p{
	margin: 1em 0;
}

/* =hd : header
----------------------------------------------- */
#hd {

}

#hd-bloc-gauche {
	display:block;
	float:left;
}

#hd-bloc-droit {
	float:right;
}

#hd-languedoc-roussillon {
	display:block;
}

/* =banner
----------------------------------------------- */
#banner{
	background: #cfaaaa;
	text-align:left;
	padding: 0 7% 0 7%;
}
 #banner_accueil{
 	width:100%;
 	height:120px;
 	background:#CA908F url(../images/bandeau_deco_accueil.jpg) no-repeat 38% 0;
}
/* =content
----------------------------------------------- */
#content {
	background: url(../images/background-sourire.jpg) no-repeat top left;
}

/* Processus de nouvelle reservation
----------------------------------------------- */

.resa-fieldset {
/*  @@@ positionnement  */
	margin: 40px 0 1.5em 0;
}

.resa-fieldset legend {
/*  @@@ positionnement  */
	font-weight: bold;
	font-size: 122%; /* 16px */
	margin: -56px 0 0 20px;
	padding:0;
}
.resa-fieldset label {
	display:block;
  float:left;
  width:7em;
  clear:left;
  text-align:right;
  padding-right:0.3em;
  margin:5px 0 0 0;
}
/* class a rajouter sur la boite fcontent pour les labels longs */
.label_long label{
  width:15em;
}
/* class a rajouter sur chaque input bouton radio et sur chaque label (float_none)*/
.resa-fieldset input.radio{
 width:1em;
 margin-left:0.3em;
}
.resa-fieldset label.float_none{
  display:inline;
  float:none;
}
.show_erreur p.erreur_radio{
  padding-left:0.3em;
}
/*resa_depart*/
/* fcontent est la boite qui creer le cadre, le padding-top est necessaire pour
reculer l'effet de recouvrement avec legend lors du zoom*/
.fcontent{
  position:relative;
	color:black;
  z-index:0;
  /*margin-top:-14px;*/
  padding:1.6em 15px 1em 15px;
}

.resa-depart legend {
	color:white;
}

.resa-depart .fcontent{
	background: #e2f1d4;
	border: solid 1px #53b000;
}

.resa-arrivee {
	color:black;
}

.resa-arrivee .fcontent{
	background: #ADDEFF;
	border: solid 1px #3681B3;
}

.resa-arrivee legend {
	color:white;
	background: #3681b3; /* couleur d'origine: #5bbeff */
}

button img{
 vertical-align:bottom;
}

.envoi{
  background:url(../images/coche.png) no-repeat top right;
}

/*---- classes pour les coins arrondis---*/
/*legend */
legend span, #list_depart span, #list_arrivee span{
  display:block;
  position:relative;
  z-index:2;
  float:left;
}

.resa-depart legend span,
#list_depart span{
	background: #53b000;
	color: white;
}

.resa-arrivee legend span,
#list_arrivee span{
	background: #3681B3;
	color: white;
}

.round_left,
.round_right{
  width:15px;
  height:1.8em;
  margin:0;
}

.resa-depart .round_left{
  background:#53b000 url(../images/coin_top_left.png) no-repeat top left;
}

#list_depart .round_left{
   background:#53b000 url(../images/coin_top_left_list.png) no-repeat top left;
   margin-left:10px;
}

.resa-depart .round_right{
  background:#53b000 url(../images/coin_top_right.png) no-repeat top left;
}

#list_depart .round_right{
  background:#53b000 url(../images/coin_top_right_list.png) no-repeat top left;
}

.resa-arrivee .round_left{
  background:#3681B3 url(../images/coin_top_left2.png) no-repeat top left;
}

#list_arrivee .round_left{
  background:#3681B3 url(../images/coin_top_left2_list.png) no-repeat top left;
}

.resa-arrivee .round_right{
  background:#3681B3 url(../images/coin_top_right2.png) no-repeat top left;
}

#list_arrivee .round_right{
  background:#3681B3 url(../images/coin_top_right2_list.png) no-repeat top left;
}

.round_legend{
  padding:0.3em;
}
/*fieldset*/
.fround_top, .fround_top div, .fround_bottom, .fround_bottom div{
   position:relative;
   width: 100%;
   height: 14px;
   font-size: 1px;
   margin:0;
   z-index:1;
}
.resa-depart .fround_top div{
  background:url(../images/coin_fieldset_top_left.png) no-repeat top left;
}
.resa-depart .fround_top{
  background:url(../images/coin_fieldset_top_right.png) no-repeat top right;
}
.resa-depart .fround_bottom div{
  background:url(../images/coin_fieldset_bottom_left.png) no-repeat top left;
  margin-top:-14px;
}
.resa-depart .fround_bottom{
  background:url(../images/coin_fieldset_bottom_right.png) no-repeat top right;
}
.resa-arrivee .fround_top div{
  background:url(../images/coin_fieldset_top_left2.png) no-repeat top left;
}
.resa-arrivee .fround_top{
  background:url(../images/coin_fieldset_top_right2.png) no-repeat top right;
}
.resa-arrivee .fround_bottom div{
  background:url(../images/coin_fieldset_bottom_left2.png) no-repeat top left;
  margin-top:-14px;
}
.resa-arrivee .fround_bottom{
  background:url(../images/coin_fieldset_bottom_right2.png) no-repeat top right;
}

/* Classe bouton connexion accueil */
#connexion{
	padding:1em 0 0 0;
    margin-left:20em;
}

#pass{
	margin-left:2em;
}

/*Alignement icone plus liste reservations*/
.img_middle img{
	vertical-align:bottom;
}

/* table liste des r�servartions */
#list_reservation{
	width:100%;
}

#list_reservation td, #list_reservation th,
#list_trajets td, #list_trajets th {
  padding:0.3em;
}

#list_reservation th, #list_trajets th{
	font-weight:bold;
  text-align:center;
}

#list_depart span, #list_arrivee span{
	position:relative;
  bottom:-5px;
}

#list_arrivee span.round_left{
 margin-left:0.7em;
}

#list_depart span.round_legend,
#list_arrivee span.round_legend{
	padding-bottom:0.3em;
}

#list_depart,
#list_arrivee{
	color:#ffffff;
  font-weight:bold;
}

.list_select{
  border-right:1px solid #356f00;
  text-align:center;
}

.bordure_arrivee{
	border-left:1px solid #0066a9;
}

.list_select input{
	width:1em;
}

#D_date, #D_heure, #D_adr, #D_ville, #D_tel, #D_compl {
	background-color:#d1f2b2;
}

#A_date, #A_heure, #A_adr, #A_ville, #A_tel, #A_compl {
	background-color:#addeff;
}

.bordure_bleue{
	border-left:1px solid #3681B3;
}

.gris{
 background-color:#eeeeee;
}

.blanc{
 background-color:#ffffff;
}

.picto-fleche {
	position: relative;
	top: 4px;
	padding: 0px 10px;
}

/* Bloc Rappel de transport
----------------------------------------------- */
.rappel-transport {
}

.rappel-transport .resa-depart {
	float: left;
	width: 40%;
}

.rappel-transport .fleche-droite {
	float: left;
	width: 10%;
	margin-top: 9%;
  margin-left:7%;
}

.rappel-transport .resa-arrivee {
	float: right;
	width: 40%;
}

/* =ft : footer
----------------------------------------------- */
#ft {
	border-top: solid 1px #757575;
	text-align:center;
	margin-top: 2em; /* ne pas modifier les marges droite et gauche, definies par la classe .page-center */
	padding: 0.5em 0 1em 0;
}

#ft li {
	display:inline;
	margin: 0 1.5em;
}

/* ==============================================================================================
		BackOffice
================================================================================================= */

.backoffice h1 span {
	font-size: 197%;
	font-weight: bold;
	color: white;
	margin-left: 3em;
	border-bottom: solid 5px red;
}

.backoffice .resa-fieldset label {
	width: 14em;
}

.backoffice .fcontent input,
.backoffice .fcontent select,
.backoffice .fcontent textarea {
  width:20em;
 }

 .backoffice .resa-fieldset input.radio {
  width:1em;
 }

 .backoffice .fcontent input.no_longueur {
  width:1em;
 }

 .backoffice .faux-label {
 	display:block;
  float:left;
  clear:left;
  width: 14em; /* doit etre identique a ".backoffice .resa-fieldset label" */
  text-align:right;
  padding-right:0.3em;
  margin:5px 0 0 0;
 }

 .backoffice .faux-label-bloc {
	margin-left: 14.3em;
 }

 .backoffice .show_erreur p {
 	padding-left:0;
 }

 /* Ajouts AG */

.lien-liste-trajets-rapides {
	margin-left: 2em;
}

#submit-trajets-rapides {
	float: left;
	margin-left: 2em;
}