/* html, body et general */
html, body {
margin: 0;
padding: 0;
min-height: 100% ; 
min-width: 1000px; /* largeur minimale qui empeche des sauts a la ligne et des erreurs d'affichage avec les navigateurs modernes */
color: black;
background-position: top;
background: url(../img/background_page.png) repeat-x left top; 
background-color : #eee5ff ;
font-family: Arial, Verdana, Trebuchet MS ; 
font-size: 15px }

a:link, a:visited, a:hover, a:active {
text-decoration: none;
} 

#dialog {font-size:10px; top:5px; height:73px;}	
.texte_wait { position:relative; top:-27px; left:10px; font-size: 12px}
canvas { width:200px; height:75px;}

/* la barre du haut avec le menu, banniere, meteo */
#barreduhaut{width:1000px; height:40px; margin:0 auto; }

#itineraires {display:block; float: left ; margin-left:20px ; width:192px; height:40px; background:url(../img/itineraires1.png) no-repeat 0 0;  }
#itineraires:hover {background:url(../img/itineraires1.png) no-repeat 0 -40px;}
#blog {display:block; float: left ; width:192px; height:40px; background:url(../img/blog1.png) no-repeat 0 0; }
#blog:hover {background:url(../img/blog1.png) no-repeat 0 -40px;}
#apropos {display:block; float: left ; width:192px; height:40px; background:url(../img/apropos1.png) no-repeat 0 0; }
#apropos:hover {background:url(../img/apropos1.png) no-repeat 0 -40px;}
#geovelomobile {display:block; float: left ; width:192px; height:40px; background:url(../img/geovelomobile1.png) no-repeat 0 0; }
#geovelomobile:hover {background:url(../img/geovelomobile1.png) no-repeat 0 -40px;}

#itineraires2 {display:block; float: left ; margin-left:20px ; width:192px; height:40px; background:url(../img/itineraires2.png) no-repeat 0 0;  }
#itineraires2:hover {background:url(../img/itineraires2.png) no-repeat 0 -40px;}
#blog2 {display:block; float: left ; width:192px; height:40px; background:url(../img/blog2.png) no-repeat 0 0; }
#blog2:hover {background:url(../img/blog2.png) no-repeat 0 -40px;}
#apropos2 {display:block; float: left ; width:192px; height:40px; background:url(../img/apropos2.png) no-repeat 0 0; }
#apropos2:hover {background:url(../img/apropos2.png) no-repeat 0 -40px;}
#geovelomobile2 {display:block; float: left ; width:192px; height:40px; background:url(../img/geovelomobile2.png) no-repeat 0 0; }
#geovelomobile2:hover {background:url(../img/geovelomobile2.png) no-repeat 0 -40px;}

#regions {float:left ; margin-top:10px ; margin-left:20px}
#anglais {float:left ; margin-top:7px ; margin-left:20px ; width:24px ; height:24px ; background:url(../img/anglais.png) no-repeat 0 0}

#barredubas{width:1000px; height:41px; margin:0 auto ; clear: both; padding: 1px;}solid #c4c1d6
#login_mdp{float:left ; margin-top:5px ; }
.login_mdp {background-color:#f2ffbf; border: 1px solid #a7c343 ; width:140px; height:19px; padding:3px ; font-size:14px; color: #b8c77e ; }
#bouton_go{float:left ; margin-top:3px ; margin-left:5px}
#texte_barredubas{float:left ; margin-top:10px ; margin-left:50px}
.texte_barredubas { font-size: 15px;  color: #5e7a16; }
#bouton_creercompte{float:left ; margin-top:2px ; margin-left:5px}
#logometeo{float:left ; margin-left:580px ; width:35px ; height:35px} /* remettre margin-left à 50px */
#texte_meteo{float:left ; margin-left:10px; margin-top: 2px ; line-height:17px;}
.texte_meteo {color: #5e7a16; }

/* la colonne de gauche */
#colonne_gauche{float: left; margin-left : 10px ; width: 233px; }

#depart1 {float: left; width:100%; height:38px ; width:233px ; background: url(../img/depart1.png) }
#ombre-depart{float:left; width:233px; background-color: #c1b8cf}
#depart2 {float: left; width:230px; padding-bottom:6px ; background: #dfd6f3 ; border: 1px solid #9a84bb ; margin-bottom: 1px; margin-right: 0px; }
#formulaire_depart{float:left ; margin-top:5px; margin-left:6px }
.champs_depart {border: 1px solid #c3b3e4 ; width:190px; height:19px; padding:1px ; font-size:13px; }

#intervertir{clear:both ; float:left ; margin-top:2px; margin-left:96px ; width:32px ; height:23px ; background: url(../img/intervertir.png);cursor:pointer }

#arrivee1 {float: left; margin-top:-7px; width:100%; height:38px ; width:233px ; background: url(../img/arrivee1.png) }
#ombre-arrivee{float:left; width:233px; background-color: #c1b8cf}
#arrivee2 {float: left; width:230px; padding-bottom:6px ; background: #e4f0b4 ; border: 1px solid #82a313 ; margin-bottom: 1px; margin-right: 0px; }
#formulaire_arrivee{float:left ; margin-top:5px; margin-left:6px }
.champs_arrivee {border: 1px solid #a7c343 ; width:190px; height:19px; padding:1px ; font-size:13px; }

.formulaire_etape{margin-top:5px; margin-left:6px; }
.champs_etape {border: 1px solid #c3b3e4 ; width:157px; height:19px; margin-right:2px; padding:1px ; font-size:13px; }

#etapes1 {float: left; width:100%; height:38px ; width:233px ; background: url(../img/etapes1.png) }
#ombre-etapes{float: left; width:233px; background-color: #c1b8cf}
#etapes2 {float: left; width:230px; min-height:30px; padding-bottom:6px; background: #e4ecfa ; border: 1px solid #6891b7 ; margin-bottom: 1px; margin-right: 1px; }
#etapes_ajout{float: left; width:230px; min-height:38px; background: #e4ecfa ; border: 1px solid #6891b7 ; margin-bottom: 1px; margin-right: 1px; }
#etapes_ajout1{clear : both ; float:left ; margin-top:5px; margin-left:6px ; margin-bottom:5px; width:16px ; height:16px ; background: url(../img/plus.png);cursor:pointer }
#etapes_ajout2{float:left ; margin-top:5px; margin-left:5px ; margin-bottom:5px; width:180px ; height:16px }
.texte_etapes { color: #6891b7; cursor:pointer}

.draggable span /* style du curseur de la poignet draggable */
{
	cursor:move;
}

.ui-state-highlight /* style de la place d'accueil qui est créer quand on déplace un objet draggable */
{
	border: dashed 2px red;
	min-height:25px;
}

.ui-widget-header
{
    font-size: 12px;
    background: none;
    border: none;
    color: #6891b7;
}


.ui-widget-overlay
{
	position: absolute;
	top:0px;
	left:0px;
	opacity:0.4;
}

.ui-dialog-titlebar
{
	display: none;
}

.ui-autocomplete { /* style auto-completion */
    font-size: 12px;
    background-color: white;
    width: 230px;
    border: 1px solid #cfcfcf;
    list-style-type: none;
    padding-left: 0px;
}

#preferences1 {float: left; width:100%; height:40px ;  height:39px ; width:233px ; background: url(../img/preferences1.png) }
#ombre-preferences{float: left; width:233px; background-color: #c1b8cf ; float:left;}
#preferences2 {float: left; width:220px; height:60px; background: #faf5e1 ; border: 1px solid #e1b13d ; padding:5px ; margin-bottom: 1px; margin-right: 1px; }
.texte_preferences { color: #726045; }
#afficher { float:left ; margin-top: 10px}
#velib { float:left ; margin-top: 10px}

div#barre_criteres2 {
	margin: auto;
	background: url(../img/fond_barre.png) no-repeat;
	height: 30px;
	width : 200px;
}

div#barre_criteres {
	position : relative;
}

.playground {
	text-align: center;
}

.solution {
	position: absolute;
	margin-top: 4px;
	width: 20px;
	height: 25px;
	cursor: pointer;
	background: url(../img/rondb.png) no-repeat;
}

.solution2 {
	position: absolute;
	margin-top: 4px;
	width: 20px;
	height: 25px;
	cursor: pointer;
	background: url(../img/rond2b.png) no-repeat;
}

#pub{margin-left: auto; margin-right:auto; width:180px;}

/* la colonne de droite */
#colonne_droite{float: right; margin-right : 10px ; width: 233px; background: lightblue; height: auto ;}

#feuillederoute1 {float: left; width:100%;  height:39px ; width:233px ; background: url(../img/feuillederoute1.png) }
#ombre-feuillederoute{float:left; width:233px; background-color: #c1b8cf}
#feuillederoute2 {float: left; width:230px; height:100%; background: white ; border: 1px solid #9a84bb ; margin-bottom: 1px; margin-right: 1px; }
#infos {float: left ; width:205px; background: #f0e4ff ; border: 1px solid #cfc4dc ; margin-top: 9px; margin-left: 9px ; padding:3px ; line-height:8px;}
.infos { vertical-align: 4px ; }
#feuillederoute2b {float: left; margin-left: 5px ; margin-top:5px ; width:220px; height:260px; overflow: auto; font-size: 14px;}
.feuillederoute {font-size: 12px; }
#feuillederoute4 {float: left; width:100% ; margin-top:4px; height:36px; background: #c1b1e3 ; }
#version-imprimable {float: left; margin : 5px 0 0 10px; height:28px; width:209px; border:0px; cursor: pointer; background-image: url(../img/version-imprimable.png)}

/* la colonne centrale */
#conteneur {margin: 10px 255px 0 255px ; height: 100% }
#colonne_centre {position: relative; bottom: 5px; right: 0px; border:1px solid #c4c1d6}
#map { margin : 0 0 0 0 ; pxwidth:100% ; border:10px solid white ;}

#attribution {left : 5px ; position: absolute; bottom : 0px; height:18px ; background: white ; z-index : 1000 ; font-size: 12px }

#permalink {position: absolute ; bottom:5px ; right:5px ; width:25px ; height:24px ; background-image: url(../img/permalien.png) ; z-index : 2000}
#permalink_div {position: absolute ; bottom:3px ; right:5px ; width:468px ; height:auto ; border:1px solid #c4c1d6 ; padding:4px ; background: white ; z-index : 2000 ; display : none;}
#croix {float:right ; width:16px ; top:0px; vertical-align:top; height:16px ; background-image: url(../img/croix.png) }
.lien {font-family:arial ; font-size: 14px; color: #7B6394 }
.formulaire_lien {border: 1px solid #c4c1d6 ; width:390px; height:16px; font-size:14px; }

#cacherfeuille {position: absolute ; right:-11px ; z-index : 2000}
#cacherfeuille1{width:25px ; height:25px ; background: url(../img/elargir.png);cursor:pointer}
#cacherfeuille2{width:25px ; height:25px ; background: url(../img/retrecir.png);cursor:pointer}

#divastuce {position: absolute ; margin-right: 5px; width:452px ; height: 32px ; margin-top:3px ; margin-bottom:5px ; z-index : 2005 ; display : none;}
#astuce1  {float:left ; width:28px ; height:32px ; background-image: url(../img/astuce1.png) }
#astuce2  {float:left ; width:394px ; height:26px ; padding:3px ; background-image: url(../img/astuce2.png) }
.astuce {font-family:arial ; font-size: 14px; font-style : italic ; color: #7B6394 }
.astuce2 {font-family:arial ; font-size: 14px; font-weight : bold ; color: #7B6394 }
#astuce3  {float:right ; width:24px ; height:32px ; background-image: url(../img/astuce3.png) }

#legende {margin-left: auto; margin-right: auto; margin-top:5px ;width:430px ; height:20px ; border:1px solid #c4c1d6 ; padding:2px ; background: white }
#pistecyclable { float:left ; margin-left: 10px ; background:url(../img/voie1.png) no-repeat 0 0 ; height:16px ; width:24px }
#bandecyclable { float:left ; margin-left: 10px ; background:url(../img/voie0.png) no-repeat 0 0 ; height:16px ; width:24px }
#aucunamenagement { float:left ; margin-left: 20px ; background:url(../img/voie2.png) no-repeat 0 0 ; height:16px ; width:24px }
#fortecirculation { float:left ; margin-left: 20px ; background:url(../img/voie3.png) no-repeat 0 0 ; height:16px ; width:24px }
.titre_legende {float:left ; font-size: 14px;  color: #000000 ; margin-left:15px }
.texte_legende {float:left ; font-size: 14px;  color: #ae97d0 ; margin-left:5px }

.actionpopup{cursor:pointer}