*{
	margin:0;
	padding:0;
	border:0;
}

body {

	background:url(http://www.toutavelo.fr/ressources/design/bg_body.jpg) no-repeat #f9f9f9 fixed; 
	background-size: cover; 
}

body,textarea{
	font-family:Arial;
	font-size:12px;
	/*height:990px;*/
	padding:0;
}

header {
	background:url(http://www.toutavelo.fr/ressources/design/bg_header.jpg) no-repeat; 
	background-size: cover; 
	height:300px;
}

.left{float:left;}
.right{float:right;}
.clear{clear:both;}

p{margin-bottom:5px;}

a{text-decoration:none; color:#9e7d5c;}
a:hover{text-decoration:none; color:#d1a54b;}

form {
	padding:30px;
}

#bodyshadow {
	-moz-box-shadow: 0px 10px 30px 0px #656565;
-webkit-box-shadow: 0px 10px 30px 0px #656565;
-o-box-shadow: 0px 10px 30px 0px #656565;
box-shadow: 0px 10px 30px 0px #656565;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=180, Strength=30);
}

#flags{
	background: #414141;
}

header {
	position: relative;
}

footer {
	line-height: 40px;
}

footer a, footer a:hover {
	color: #fff;
}

#logotype {
	position:absolute;
	top: 50%;
	margin-top: -108px;
	left: -40px;
	z-index: 10;
}

#thumbup {
	position:absolute;
	top: 20px;
	right: 20px;
}

#slogan {
	position: absolute;
	left: 50%;
	margin-left: -349px;
	top: 50%;
	margin-top: -40px;
}

#flags p {
	margin: 0;
	padding: 0;
	line-height: 40px;
	vertical-align: middle;
}

#header_tips{padding:0; margin:0; padding-bottom:0px; position:relative; color:white;}
#header_tips img{ padding:0; margin:0;  position:relative;}
#header_tips b{color:#FFCC00;}


#content h1,#content h2{
	background:url(http://www.toutavelo.fr/ressources/design/puce_titre.gif) 0px 30px no-repeat; 
	font-size:18px; 
	color:#197265; 
	font-weight:normal; 
	padding-left:25px; 
	margin-bottom:15px; 
	margin-top:8px;
	font-family:Myriad Pro,Arial;
	padding-top: 30px;
}
#content p{color:#666666;}
#content{
	background:#fff;
	text-align:left;
	padding-bottom: 30px;
}
#footer #container_footer{width:904px; margin:auto; padding-top:10px; min-height:50px;}
#footer{
	clear:both;
	background:#414141;
	border-top:1px solid #CCCCCC;
	text-align:center;
	color:white
;}
#footer a{font-size:11px; color:white;}
#footer p{padding:20px 20px 0 20px;}
#flash{
	width:1024px;
	height:1px;
}
#menu{
	font-size:15px;
	font-family:Tahoma;
	font-weight:normal;
	background:#f0f0f0;
}
#menu > ul {
	margin:0;
	text-align: center;
	display: block;
	width: 100%;
}
#menu li{
	display:inline-block;
	list-style-type:none;
	background:url(http://www.toutavelo.fr/ressources/design/barre_menu.gif) no-repeat;
	color:#235C83;
	padding-left:20px;
	padding-right:20px;
}
#menu .menu_first{
	list-style-type:none;
	background:none;
}
#menu a{
	text-decoration:none;
	color:#777777;
}
#menu a:hover{
	color:#ae532d;
}

h1{font-size:18px; word-spacing:4px;}
.img-index-magasin{margin:6px; text-align:center; color:#8B532E; display:inline-block;}
.img-index-magasin img{border:1px solid #fff; margin-bottom:4px;}
.img-index-magasin a{margin:0; padding:0; color:#8B532E; display:inline;}
.img-index-magasin a:hover{color:#d0724c;}
#container-imgs-magasin-index{display:inline-block; width:100%; margin:10px 0 20px 0px; background:#F1ECD8; border-bottom:1px solid #E2D5CB; border-top:1px solid #E2D5CB; text-align:center; padding:20px;}
#bloc-index-img-magasins,#bloc-index-presentation{width:880px; margin:20px; min-height:200px;}
#bloc-description-velo{width:880px; margin:20px;}
#container-img-index-right{float:right; margin-top:10px; border:1px solid #E2D5CB; background:#F1ECD8; padding:5px;}

#bloc-index-carte{width:560px; margin:0; margin-left:20px; float:left;}
#bloc-index-reservation{width:300px; margin:0; margin-bottom:30px; float:right; margin-right:20px;}
#container-form-reservation{ margin-bottom:30px; }
#container-form-reservation p, #reservation-mag p{font-size:14px; color:#8B532E; margin:10px 10px 15px 0px;}
#date, .date{background:url('http://www.toutavelo.fr/ressources/icones/calendar.png') right 10px top 7px no-repeat white; cursor:pointer;}
#container-form-reservation table{margin:auto;}
#container-form-reservation td{font-size:12px; color:#000; vertical-align:center;}
#container-form-reservation #submit_pre-resa,#submit_resa_mag{background:#00A48C; border:3px solid white; color:white; padding:5px; margin:20px 0 20px 70px; -webkit-border-radius:8px; -moz-border-radius:8px; cursor:pointer;}


.container-bg-beige{background:#F1ECD8; border:1px solid #E2D5CB;}

.generique strong{display:block; margin-top:15px; color:#187265;}
.generique li{display:block; margin-left:45px; color:#187265;}
.generique #bloc-description-velo strong{display:inline;}
.generique #container-img-mag-left{margin-right:10px;}

/*########## PAGE MAGASIN ##########*/
#container-img-mag-left{border:1px solid #E2D5CB; background:#F1ECD8; padding:5px;}

#bloc-mag-velos{ margin:0; margin-bottom:30px;}
#bloc-mag-velos .container-bg-beige{padding:30px;}
#bloc-mag-velos .container-bg-beige img{margin:0 8px 0px 0; border:1px solid #E2D5CB;}
#bloc-mag-velos .container-bg-beige p{font-size:12px; color:#666666; width:100%; margin:0; padding:0; text-align:justify;}
#bloc-mag-velos .container-bg-beige h5{font-size:14px; color:#8B522C; margin-bottom:5px; margin-top:15px; font-weight:normal;}

#bloc-mag-tarifs{margin:0px; position:relative; margin-bottom:30px;}
#bloc-mag-tarifs .container-bg-beige p{margin:7px 0; padding:0;}

#reservation-mag{margin:0; text-align:left;}
#reservation-mag .container-bg-beige table{width:300px; }
#reservation-mag .container-bg-beige p{padding-top:10px;}
#reservation-mag .container-bg-beige h3{font-size:15px; color:#000; margin:5px 5px 10px 0px; font-weight:normal;}
#reservation-mag .container-bg-beige td{font-size:12px; color:#000;}

#reservation-mag  #submit_resa_mag{margin:20px 0 10px 170px;}


.tab_tarifs_edit{margin-top:2px; border-collapse:collapse;}
.tab_tarifs_edit td,.tab_tarifs_edit th{
	border-bottom:2px solid #ffecd3;
	width:100px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#976643;
}
.tab_tarifs_edit td{text-align:center; border-bottom:1px solid #D7C4AC;border-left:1px solid #D7C4AC;}
.tab_tarifs_edit td.tarif_intit_velo{text-align:left; border-bottom:1px solid #D7C4AC; border-left:none;
	padding:3px;}
.tab_tarifs_edit th{text-align:center; border-bottom:1px solid #A47857;padding:3px; color:#454b4f;}


/* CSS  de la bulle d'info */

.tooltip .info {position:relative; top:4px;}
.tooltip {
	color: #053b9e; outline: none;
	cursor: help; text-decoration: none;
	position: relative;
	
}
.tooltip span {
	margin-left: -999em;
	position: absolute;
	color:#000000;
	font-size:14px;
	text-align:left;
	font-weight:normal;
}
.tooltip:hover span {
	border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
	font-family: Calibri, Tahoma, Geneva, sans-serif;
	position: absolute; left: 1em; top: 2em; z-index: 99;
	margin-left: 0; width: 250px;
}
.classic { padding: 0.8em 1em; }
.classic {background: #fff; border: 1px solid #E2D5CB; }

/*######## CSS Reservation ############*/
#form_reservation{ }
#form_reservation td, #tab_devis td, #tab_devis th{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#4b5555;
text-align:left;
padding:2px 5px;
}
#form_reservation td{padding:2px 10px;}
#tab_devis{width:750px;}
#tab_devis th{background:#eefaf8; border-bottom:2px solid #28b49e;font-weight:normal;font-variant:small-caps;font-size:14px;}
#tab_devis td a{color:black;}
.input_wrong{border:1px solid red !important;}


.table_devis_velo {width:100%; border-collapse:collapse;}
.table_devis_velo td{border-bottom:1px solid silver;}

#conteneur_tab_reservations{width:100%; margin:10px 80px 70px 20px;}
.tab_gest_reservations{width:95%; border-collapse:collapse; }
.tab_gest_reservations th{
	background:url(http://www.toutavelo.fr/images/bg_bleu.gif) repeat-x; 
	font-variant:small-caps; 
	font-size:14px;
	text-align:center; 
	height:30px; 
	border-bottom:2px solid #91b7bd; 
	color:white;
}
.tab_gest_reservations td{
	font-size:11px;
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	padding:5px; 
	border-bottom:2px solid #ebebeb; 
	background-color:white;
}

.tr_grey td{color:silver;} /*pour les réservation annulée ou terminée*/





/*########## ADMIN ##########*/
#div_icones_admin{text-align:right; width:100%;}
#div_icones_admin a{display:block;}

#content_admin a{color:black;}
#content_admin a:hover{color:#ffb100;}

#content_admin{
	width:800px;
	margin:30px 30px 0 30px;
	padding:30px;
	background:white;
	height:100%;
}


.td_img a span{display:none; position:absolute; border:1px solid black;}
.td_img a:hover span{display:inline; z-index:5;}
.input_legende{
	border:1px solid #dfdfdb;
	width:190px;
	margin-left:5px;
	padding-left:2px;
}


#tab_dispo{border-collapse:collapse; background:#272727; color:white;width:604px; margin:auto; margin-top:25px; border:2px solid #272727; position:relative;left:-5px;}
#tab_dispo_fiche_loc{border-collapse:collapse; background:#272727; color:white; width:90%; margin:auto; margin-top:15px; border:2px solid white;}
#tab_dispo_admin{border-collapse:collapse; background:#272727; color:white;width:90%;margin:auto; margin-top:10px; border:2px solid #272727;}

.champs_tab_dispo img{border:none;}
.champs_tab_dispo td{text-align:center; border-right:1px solid #e5f3fb;padding:5px 4px;}
.tr_entete_pav td{text-align:center; padding:10px 4px; background:#333; font-variant:small-caps;color:white;}
#tab_dispo_admin a{color:white;}
#tab_dispo_admin a:hover{color:orange;}
.td_tab_dispo_periode{width:270px; border:0px;}
.tr_nom_mois td{padding:10px; padding-top:40px; border:0px; border-bottom:2px solid #4baee3;}

#tab_gestion_pages{width:100%;}
#tab_gestion_pages td{height:35px; border-bottom:1px solid #e7e7e7; padding:5px; border-collapse:collapse;}


.table_identification td, .tab_periode_discount td, .tab_periode_discount th{
	border:0px solid black;
    background-color:white; 
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	padding:3px;
}
.tab_periode_discount{width:90%; border-collapse:collapse; margin:15px;}
.tab_periode_discount .ajout{border-top:1px solid silver; border-bottom:1px solid silver;}

#liste_admin {margin:40px 0 120px 90px; height:140px;}
#liste_admin li{list-style:none; float:left;}
#liste_admin li:hover{position:relative; top:-5px;}



/* ############ styles destinés a la pagination  ############*/

.pagination {
	padding: 3px;
	margin: 20px;
	text-align:center;
	color:#a0a0a0;
	font-size:80%;
	position:relative;
	left:-30px;
}
.pagination a {
	border: 1px solid #8ea0a0;
	margin-right:3px;
	padding:2px 5px;
	background-image:url('http://www.toutavelo.fr/ressources/pagination/bar.gif');
	background-position:bottom;
	text-decoration: none;
	color: #c0c0c0;
}
.pagination a:hover, div.meneame a:active {
	border: 1px solid #3bc9f7;
	background-image:url(http://www.toutavelo.fr/ressources/pagination/invbar.gif);
	background-color:#709fc4;
	color: #fff;
}
.pagination span.current {
	margin-right:3px;
	padding:2px 5px;
	border: 1px solid #568cb8;
	font-weight: bold;
	background-color: #709fc4;
	color: #ffffff;
}
.pagination span.disabled {
	margin-right:3px;
	padding:2px 5px;
	border: 1px solid #606060;
	color: #808080;
}
/*--------------------------*/


/*####  CSS infobulle ADMIN (page résa) ####### */
a.info,a.adresse_client{
    position:relative; /*this is the key*/
    z-index:24;
    color:#000;
    text-decoration:none;}

a.info:hover, a.adresse_client:hover{z-index:125; background-color:#ff0;}

a.info span, a.adresse_client  span{display: none;}
a.info span p, a.adresse_client  span p{color:#345256;font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:normal; font-size:11px;}
a.info span p{color:#fff;}
a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; 
	left:2em; 
	width:15em;
	margin:5px;
    border:1px solid #588bb8;
    background-color:#a8bdd0; 
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:normal;
}

a.adresse_client:hover span{
    display:block;
    position:absolute;
    top:2em; 
	left:2em; 
	width:15em;
	margin:5px;
    border:2px solid #91b7bd;
    background-color:white;
	font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:normal; font-size:11px;
}
/* /CSS infobulle */


/****************************************************************************************************************************/
/*ADAPTATIF******************************************************************************************************************/
/****************************************************************************************************************************/

@media (max-width: 996px) {
	#menu ul  {
		display: block;
		position: relative;
		width: 100%;
		text-align: center
	}
	#menu ul ul {
		margin-top: 10px;
		top:0;
		background: #fff
	}
	ul.menu li {
		width:100%;
	}
	#slogan {
		display: none;
	}
}

select {
	max-width: 100%;
}