html, body{
	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}

.leaflet-control-attribution{
	display:none;
}

a{
	color: #ff2f2f;
	text-decoration: none;
	font-weight: bold;
}
#map{
	position: absolute !important;
	bottom: 234px;
	top: 0;
	left: 0;
	right: 330px;
	display: block;
}

#menu{
	bottom:0;
	left:0;
	right:0;
	height:90px;
	position: absolute;
	background-color: #ececec;
}

.loader.loading {
	display: block;
	background-color: white;
	width: 18px;
	height: 18px;
	margin-right: 8px;
	float: left;
	animation: rotation 2s infinite cubic-bezier(0.79, -0.66, 0, 1.84);
}

hr {
    display: block;
    background-color: #d6d6d6;
    height: 2px;
    border: none;
}

#entretient h1 {
    color: #ff2f2f;
}

.entretient .spacer{
	display: block;
	float: left;
	width: 160px;
}

.entretient span.title {
    color: #ff2f2f;
}

.entretient span.comment {
    border-left: solid 2px #9E9E9E;
		color: #9E9E9E;
    padding-left: 5px;
}

#entretient .hide{
	display: none;
}

.form-auf {
    background-color: whitesmoke;
    padding: 10px;
    border-left: solid 2px #ff2f2f;
}

.form-auf .field {
    margin-bottom: 5px;
}

.form-auf .field label {
    display: block;
    float: left;
    width: 90px;
    font-weight: bold;
}

.form-auf input[type="submit"], .form-auf #supp {
    margin-left: 90px;
}


@keyframes rotation {
		from {
				transform: rotate(0deg);
		}
		to {
				transform: rotate(359deg);
		}
}

.leaflet-control-layers.leaflet-control{
	/*position: fixed;
  bottom: 10px;*/
}

#col .menu-haut {
    display: block;
    padding: 10px;
    background-color: #4a4a4a;
}

#col .menu-haut a{
	color: white;
	text-decoration: none;
}
#col .menu-haut a:hover{
	text-decoration: underline;
}

#col{
	position: absolute;
	background-color: white;
	color: black;
	right: 0;
	top: 0;
	bottom: 0px;
	width: 330px;
	overflow: scroll;
}

#col .tracks .track {
    background-color: #ecd5d5;
    display: block;
    margin-bottom: 10px;
    padding: 10px;
		padding-bottom: 30px;
}

#col .tracks .entretient {
    background-color: #b6deff;
    display: block;
    margin-bottom: 10px;
    padding: 10px;
}

#col .tracks .projet {
    background-color: #cdafef;
    display: block;
    margin-bottom: 10px;
    padding: 10px;
		padding-bottom: 30px;
}

#col .tracks .track span, #col .tracks .entretient span{
	display: block;
}

#col .tracks .track .date, #col .tracks .entretient .date {
	font-style: italic;
	color: grey;
}

#col .tracks .track .title, #col .tracks .entretient .title {
	font-weight: bold;
	color: black;
}

#col .tracks .track.favorite .title{
	background-image: url('../images/fav.png');
	background-repeat: no-repeat;
	padding-left: 22px;
}


#col .time, #col .distance, #col .deniv_pos, #col .deniv_neg {
	background-repeat: no-repeat;

	line-height: 20px;
	height: 20px;
	display: block;
	float: left;
	margin-right: 2px;

}
#col .time {
	background-image: url('../images/time.png');
	padding-left: 20px;
}
#col .distance {
	background-image: url('../images/distance.png');
	padding-left: 22px;
	margin-right: 5px;
}
#col .deniv_pos {
	background-image: url('../images/deniv_pos.png');
	padding-left: 38px;
}
#col .deniv_neg {
	background-image: url('../images/deniv_neg.png');
	padding-left: 38px;
}


.hideMe{
	display: none;
}

#col .tracks .track.actif{
	border-top: solid 4px black;
	border-bottom: solid 4px black;
	border-radius: 5px;
}

#onglets{
	position: absolute;
	right: 330px;
	left: 0;
	height: 25px;
	bottom: 225px;
	background-color: #5d5d5d7a	;
	padding-top: 5px;
}

#trackInfos{
	position: absolute;
	right: 330px;
	left: 0;
	height: 25px;
	bottom: 200px;
	background-color: #efefef	;
	border-top: solid 4px #ff2f2f;
	padding-top: 5px;
}

#trackInfos{
	padding-left: 5px;
}

#trackInfos span{
	background-repeat: no-repeat;
	padding-left: 25px;
	line-height: 20px;
	height: 20px;
	display: block;
	float: left;
	margin-right: 20px;

}

#trackInfos span{
	background-image: url('../images/time.png');
}
#trackInfos span.comment{
	background-image: url('../images/comment.png');
}
#trackInfos span.alt_min{
	background-image: url('../images/alt_min.png');
	padding-left: 37px;
}
#trackInfos span.alt_max{
	background-image: url('../images/alt_max.png');
	padding-left: 37px;
}
#trackInfos span.speed_average{
	background-image: url('../images/speed_average.png');
	padding-left: 27px;
}
#trackInfos span.speed_max{
	background-image: url('../images/speed_max.png');
	padding-left: 27px;
}
#trackInfos span.bike{
	background-image: url('../images/bike.png');
	padding-left: 39px;
}
#trackInfos span.gpx{
	background-image: url('../images/gpx.png');
	padding-left: 30px;
}
#trackInfos span.edit{
	background-image: url('../images/edit.png');
}


#elevation {
	position: absolute;
	right: 330px;
	left: 0;
	height: 200px;
	bottom: 0px;
}

canvas#elevationChart{
	display: block;
  position: relative;
  width: 100% !important;
  height: 200px !important;
}


#col .totaux{
	display: block;
  padding: 10px;
  background-color: #cccccc;
  color: black;
  padding-bottom: 50px;
}

.leaflet-touch .leaflet-control-layers-toggle, .leaflet-touch .leaflet-control-geocoder-icon {
    width: 30px;
    height: 30px;
}

.mobile{
  display: none !important;
}


@media screen and (max-width: 800px){

  .mobile{
    display: inherit !important;
  }
  .ordi{
    display: none;
  }

	.leaflet-touch .leaflet-control-layers-toggle, .leaflet-touch .leaflet-control-geocoder-icon {
	    width: 44px !important;
	    height: 44px !important;
	}

  #col {
    z-index: 9999999;
		left: 0;
		width: inherit;
		display: none;
  }

	#trackInfos, #elevation, #onglets{
		right: inherit;
		width: 100%;
		z-index: 999999;
	}

	#trackInfos, #elevation{
		height: 200px;
		bottom: 0px;
		border-top: solid 4px #ff2f2f;
		padding-top: 5px;
		display: none;
	}



	div#trackInfos span {
    width: 33%;
    padding-left: 37px !important;
		margin-top: 5px;
}


	#onglets{
		bottom: 0;/*209px;*/
	}

	#onglets a {
    background-color: white;
    padding: 5px;
	}

	#onglets .titre {
		font-weight: bold;
	}


  div#map {
    right: 0;
		bottom: 0px;
  }


}