/*
Design by Dominique Cecotti
Tout droit reserve



*/

http://www.w3.org/TR/2009/WD-css3-fonts-20090618/
@font-face {
  font-family: Candara;
  src: local, url(polices/CANDARA.ttf);
}



* {
	margin: 0;
	padding: 0;
}

body {
	margin-top: 0px;
	background: #000000;
	font-family: "Candara", Arial, verdana, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
}




/* DESIGN GENERAL
--------------------------------------------- */

#header {
	width: 100%;
	height: 45px;
	margin: 0px 0px 0px 0px;
	/*margin: 0 auto; */
	background: #000000 url(../img/fond_barre_header.png) repeat-x left top;
}


#content {
	width: 100%;
	min-height: 500px;
	padding: 0px;
}


#footer {
	clear: both;
	width: 100%;
	height: 50px;
	margin: 0px;
	padding: 0px;
	color: #cccccc;
	background: #000000 url(../img/fond_barre_footer.png) repeat-x left top;
}






/* CARTE
--------------------------------------------- */

#control_zone {
	width: 250px;
	height: 100%;
	background: #000000;
	position: absolute;
	top: 0px;
	left: 0px;
	box-shadow: 0px 0px 10px rgb(0, 0, 0);
}

#control_zone h1 {
	font-size: 1.4em;
	font-weight: bold;
}


#map_zone {
/*	width: 600px;
	height: 400px; */
	overflow: hidden;
	position: relative; 
}


#map-canvas { 
	height: 100%; 
	width:90%;
	position: absolute; 
	top: 0px;
	left: 250px;
}



/* ITINERAIRE
--------------------------------------------- */
#iti_zone {	
	display: block;
	float: left;
	padding: 0px;
	position: relative;
	margin: 5px 0px 0px 0px;
	height: 40%;
	width: 250px;
	z-index: 100;
	border-radius: 8px;
}


#iti_liste {	
	display: block;
	float: left;
	padding: 0px;
	position: relative;
	height: 90%;
	width: 250px;
/*	z-index: 100; */
	background: #550000;
	opacity: 0.96;
	overflow: auto;
	
	box-shadow: -5px 2px 10px 3px rgba(0, 0, 0, 0.3) inset;
	
}
#iti_liste ul {	
	list-style: none;
	line-height: normal;
	list-style-type:none;
	padding: 0px;
}

#iti_liste li {	
	clear: both;
	width: 230px;
	height: 25px;
	background: #222222;
	padding: 0px 0px 0px 0px;
	margin: 5px 0px 0px 0px;
	-webkit-border-radius: 8px; 
/*	-moz-border-radius: 8px; */
	border-radius: 8px;
}


#iti_liste .numero {
	float: left;
	position: relative;
	width: 30px;
	color: #ff8000;
	padding: 0px 0px 0px 0px;
	margin: 3px 0px 0px 0px;
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
}

#iti_liste .nom {
	float: left;
	position: relative;
	width: 150px;
	cursor: pointer;
	color: #ffffff;
	padding: 0px 0px 0px 0px;
	margin: 3px 0px 0px 0px;
	text-align: left;
	font-size: 1.0em;
}


#iti_liste .supprimer {
	float: right;
	position: relative;
	width: 30px;
	height: 30px;
	cursor: pointer;
	color: #ffffff;
	padding: 0px 0px 0px 0px;
	margin: 3px 0px 0px 0px;
	background: #000000 url(../img/picto_itineraire_supprimer.png) no-repeat left top;
}

#iti_liste .iti_select {
	background-color: #330000;
}








#btn_iti {
	float: left;
	width: 32px;
	height: 32px;
	position: relative;
	background-image: url(../img/btn_iti_flag_32.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
	margin: 0px 4px 0px 4px;
}

#btn_geo {
	float: left;
	width: 32px;
	height: 32px;
	position: relative;
	background-image: url(../img/mrk_maposition.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
	margin: 0px 4px 0px 4px;
}
#btn_sav {
	float: left;
	position: relative;
/*	background-image: url(../img/btn_nuage_gris_32.png); */
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
	width: 32px;
	height: 32px;
	margin: 0px 4px 0px 4px;
}


.btn_sav_off {
	background-image: url(../img/btn_nuage_gris_32.png);
}
.btn_sav_on {
	background-image: url(../img/btn_nuage_rouge_32.png);
}
.btn_sav_do {
	background-image: url(../img/btn_nuage_vert_32.png);
}

#btn_prf {
	float: left;
	width: 32px;
	height: 32px;
	position: relative;
	background-image: url(../img/btn_preferences.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
	margin: 0px 4px 0px 4px;
}



#btn_adr {
	float: right;
/*	position: relative; */
	background-image: url(../img/picto_loupe.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
	width: 32px;
	height: 24px;
	
}


#btn_iti_del {
	float: right;
	position: relative;
/*	background-image: url(../img/picto_itineraire_supprimer.png); */
	background-image: url(../img/btn_supprimer_1.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
	width: 24px;
	height: 24px;
}


#btn_iti_add {
	float: left;
	position: relative;
/*	background-image: url(../img/picto_itineraire_supprimer.png); */
	background-image: url(../img/btn_ajouter.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
	width: 24px;
	height: 24px;
}



.btn_iti_fiche {
	float: left;
	position: relative;
	background-image: url(../img/picto_voir.png);
	background-repeat: no-repeat;
	background-position: left top;
	width: 24px;
	height: 24px;
	background-size: contain;
}

.selection {
	width: 24px;
	height: 24px;
	float: left;
}







/* MARQUEUR
--------------------------------------------- */


.marqueur {
	width: 24px;
	height: 24px;
	float: left;
	background-size: contain;
}


.mrk_size_32 {
	background-size: 32px 32px;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
}
.mrk_size_48 {
	background-size: 48px 48px;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
}
.mrk_size_64 {
	background-size: 64px 64px;
	/* background-size: contain; */
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
}
.mrk_size_128 {
	background-size: 128px 128px;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
}



input:text {
	/* opacity: 0.5; */
	color: #ffeecc;
/*	background: inherit; */
	background: #333333;
	border: 0px;
}



#mrk_zone {	
	display: block;
	float: left;
	padding: 0px;
	position: relative;
	margin: 5px 0px 0px 0px;
	height: 40%;
	width: 250px;
	z-index: 101;
	border-radius: 8px;
}

#mrk_liste {	
	display: block;
	float: left;
	padding: 0px;
	position: relative;
	margin: 5px 0px 0px 0px;
	height: 80%;
	width: 100%;
/*	z-index: 100; */
	background: #000022;
	opacity: 0.96;
	border-radius: 8px;
	overflow: auto;
}
#mrk_liste ul {	
	list-style: none;
	line-height: normal;
	list-style-type:none;
	padding: 0px;
}

#mrk_liste li {	
	clear: both;
	width: 230px;
	min-height: 25px;
	height: auto;
	background: #222222;
	padding: 0px 0px 0px 0px;
	margin: 5px 0px 0px 0px;
	-webkit-border-radius: 8px; 
/*	-moz-border-radius: 8px; */
	border-radius: 8px;
}

#mrk_liste .nom {
	float: left;
	position: relative;
	width: 140px;
/*	cursor: pointer; */
	color: #ffffff;
	padding: 0px 0px 0px 0px;
	margin: 3px 0px 0px 0px;
	text-align: left;
	font-size: 1.0em;
}
#mrk_liste .distance {
	float: left;
	position: relative;
	width: 60px;
/*	cursor: pointer; */
	color: #ffb400;
	padding: 0px 0px 0px 0px;
	margin: 3px 0px 0px 0px;
	text-align: right;
	font-size: 1.0em;
}

.mrk_liste_off {
	background-image: url(../img/mrk_liste_off.png);
}
.mrk_liste_on {
	background-image: url(../img/mrk_liste_on.png);
}






/* INFO_POI
--------------------------------------------- */

#info_mrk {
	display: block;
	float: left;
	padding: 0px;
	position: relative;
	height: auto;
	width: 250px;
/*	z-index: 100; */
	background: #002200;
	opacity: 0.90;
	overflow: auto;
}

#info_mrk ul {	
	list-style: none;
	line-height: normal;
	list-style-type:none;
	padding: 0px;
}

#info_mrk li {	
	clear: both;
	width: 230px;
	height: 20px;
/*	background: #222222; */
	padding: 0px 0px 0px 0px;
	margin: 5px 0px 0px 0px;
	-webkit-border-radius: 8px; 
/*	-moz-border-radius: 8px; */
	border-radius: 8px;
	text-align: left;
}


#btn_mrk_ok {
	background-image: url(../img/btn_ok_1.png);
	width: 24px;
	height: 24px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left top;
	margin: 0px 40px 0px 40px;
	float: left;
}

#btn_mrk_del {
	background-image: url(../img/btn_supprimer_1.png);
	width: 24px;
	height: 24px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left top;
	margin: 0px 40px 0px 40px;
	float: left;
}



.info_input {
	background: #ffe4a3;
	border-radius: 4px;
	border: thin;
}



.modal ul {
	list-style: none;
	line-height: normal;
	list-style-type:none;
	padding: 0px;	
}
.modal h1 {
	color: #ff8000;
}


#mdl_prf {
	background: #000000;
	color: #ffffff;
}


#mdl_iti {
	background: #000000;
	color: #ffffff;
}
#mdl_iti h1 {
	color: #ff8000;
}


#mdl_mrk {
	background: #000000;
	color: #ffffff;	
	width: 220px;
	height: 200px;
	position: absolute;
	top: 0;
	left: 0;
}

#mdl_kml {
	background: #000000;
	color: #ffffff;	
	width: 220px;
	height: 200px;
/*	position: absolute;
	top: 0;
	left: 0;
*/
}



#mdl_mrk ul {	
	list-style: none;
	line-height: normal;
	list-style-type:none;
	padding: 0px;
	overflow:hidden;
}

#mdl_mrk li {	
	clear: both;
	width: 100%;
/*	height: 25px; */
/*	background: #222222; */
	padding: 0px 0px 0px 0px;
	margin: 5px 0px 0px 0px;
	-webkit-border-radius: 8px; 
/*	-moz-border-radius: 8px; */
	border-radius: 8px;
}


.mdl_mrk_label {
	text-align: left;
	color: #999999;
	float: left;
	width: 50px;
	margin: 0px 2px 0px 2px;
}


#mrk-lat,
#mrk-lon {
	text-align: left;
}


#mrk-hau,
#mrk-nom {
	text-align: left;
}