/* Route description
----------------------------------------*/

h1 {
	font-size:1.5em;
	margin-bottom:0.15em;
}
#route_heading {
	float:left;
	clear:none;
	max-width:100%;
	font-weight:600;
	margin-bottom:5px;
}
#route_heading span {
	font-size:1.2em;
}
#route_overview_box {
	display:flex;
	flex:auto;
	height:auto;
	text-align:left;
	margin-top:4px;
	margin-left:2px;
	float:left;
	clear:both;
}

#route_stats_column {
	float:left;
	clear:none;
}
.paragraph_header {
	color:var(--text-hdr-color);
	background-color:transparent;
	border-bottom: 1px solid var(--text-hdr-bdr-color);
}
div.paragraph_text ul {
	list-style-type:none;
	padding:0;
	margin:0 0 0 3px;
	-webkit-appearance: none;
}
div.paragraph_text ul li {
	padding:0 0 0 18px;
	margin:0 0 2px 0;
	background-repeat:no-repeat;
	background-position:0 5px;
	background-size:10px 10px;
	-webkit-appearance: none;
}
div.paragraph_text ul li:before {
	vertical-align:middle;
	font-family: "FontAwesome", serif;
    content: "\f111";
	font-size:0.5em;
	margin-left:-12px;
	padding-left:0;
	padding-right:5px;
	color: var(--bullet1-color);
}

.buttonf {
	font-size:11pt !important;
	color:#FFF !important;
	text-decoration:none !important;
	padding-bottom:5px !important;
}
.routestatsbox {
	border:0;
	min-width:97%;
	max-width:99%;
	margin-top:5px;
	margin-bottom:15px;
}
#statsColumn3 {
	width:100%;
	float:left;
	clear:none;
	border:0;
	padding:0;
	line-height: 1.3em;
}
table.routestatsbox th {
	
}
span.mainRoutePic {
	background-color: transparent;
	background-image: var(--image-site-logo);
	background-repeat: no-repeat;
    background-size: 75%;
    background-position: center;
	width:326px;
	max-width:326px;
	height:175px;
	max-height:175px;
}
span.mainRoutePic img {
	background-color: transparent;
	width:326px;
	max-width:326px;
	height:175px;
	max-height:175px;
}
table.data_box {
	border:0;
	table-layout:fixed;
	max-width:100%;
	margin-right:3px;
}
.data_box_cell1 {
	vertical-align:top;
	white-space:nowrap;
	padding-right:5px;
	width:90px;
	min-width:90px;
}
.data_box_cell2 {
	vertical-align:top;
	white-space:normal;
	max-width:280px;
}
table.data_box tr td:nth-child(1) {
	vertical-align:top;
	white-space:nowrap;
	padding-right:5px;
	width:90px;
	min-width:90px;
}
table.data_box tr td:nth-child(2) {
	vertical-align:top;
	white-space:normal;
	max-width:280px;
}
#tabGroup {
	width:100%;
	min-width:100%;
	max-width:100%;
	min-height:100%;
	margin:5px 0 -3px 2px;
}
#tabs-1, #tabs-2, #tabs-3, #tabs-4, #tabs-5, #tabs-6, #tabs-7, #tabs-8, #tabs-9, #tabs-10 {
	width:97%;
	max-width:97%;
	overflow:hidden;
}
div.mapimage {
	float:left;
	clear:none;
	vertical-align:top;
	text-align:left;
	margin-top:5px;
	margin-left:3px;
	max-width:100%;
	background-image: var(--image-site-logo);
    background-size: 25% 25%;
    background-repeat: no-repeat;
    background-position: center;
}
img.mapimage {
	width:100%;
	max-width:100%;
	height:auto;
}
.gmap_framewrap {
	position:relative;
	width:100%;
	max-width:100%;
	height:705px;
	float:left;
	clear:both;
	vertical-align:top;
	text-align:left;
	margin-top:0;
}

.gmap_frame {
	width:100%;
	max-width:100%;
	height:705px;
	border:0;
}
@media (max-width : 700px) {
	.gmap_framewrap {
		height:705px !important;
	}
	.gmap_frame {
		height:705px !important;
	}
}

.route_titleicon {
	width:20px;
	height:20px;
	border:0;
	padding:0;
	margin:1px 0 -3px 0;
}
.route_alerticon {
	width:17px;
	height:17px;
	border:0;
	float:left;
	padding:0 3px 0 0;
}

span.route_photo {
	white-space:nowrap;
	background:var(--photo-placeholder-bg-color);
	border-radius:3px;
	padding-left:3px;
	padding-right:3px;
	height:1em;
	margin:0;
}

i.fa-map-marker {
	font-size:1.1em;
	color:var(--icon-milestone-color);
}

#moreStatsButton, #lessStatsButton {
	width:100%;
	float:left;
	clear:both;
	padding:3px;
}

.ui-tooltip {
	max-width:400px !important;	
}

div.headerpic {
	clear:both;
	margin:-10px -3px 7px -3px;
	-webkit-box-shadow: 0 3px 3px 0 #222;
	-moz-box-shadow: 0 3px 3px 0 #222;
	box-shadow: 0 3px 3px 0 #222;
}
div.headerpic img {
	width:100%;
	max-width:100%;
	display:block;
}

img.phototab_thumb {
	height:175px;
}

@media (max-width : 800px) {
	.routestatsbox {
		min-width:100%;
	}
	table.data_box tr td:nth-child(2) {
		max-width:280px;
	}
	#tabGroup {
		min-width:300px;
		margin:5px 10px 0 2px;
		width:97%;
		max-width:97%;
	}
}
@media (max-width : 550px) {
	table.data_box tr td:nth-child(2) {
		max-width:100%;
	}
	img.phototab_thumb {
		height:auto;
		max-width:100%;
	}

}
@media (max-width : 600px) {
	#route_overview_box {
		width:98%;
	}

}
@media (min-width : 600px) {
	#morelessButtonWrap {
		display:none;
	}

}
.slick-dots {
    position: relative;
     bottom:auto;
}
.slick-dotted.slick-slider {
    margin-bottom: 10px;
}

div.stat {
	display:flex;
	float:left;
	clear:both;
	white-space:normal;
}
span.label {
	position: relative;
	width:100px;
	min-width:100px;
    vertical-align: top;
    display: inline-block;
	background-color: rgba(255,255,255,.50);
    border-radius: 2px;
    font-weight: 800;
    line-height: 1;
	text-align: left;
	margin: 2px;
    text-decoration: none;
    white-space: nowrap;
    padding: 0.25rem 0.5rem;
}
span.label a, span.value a {
	display:block;
	width:100%;
	height:100%;
}
span.label.empty {
    background-color: transparent;
}
span.value {
	min-width:225px;
    vertical-align:middle;
    margin:0.2em;
    display:inline-block;
}
.routeAlerts {
	user-select: none;
	float: right;
	margin: -10px -10px 5px 5px;
	background-color: var(--widget-alert-bg-color);
	font-size:0.87em;
	width:225px;
	padding: 6px;
	border: 1px solid var(--widget-alert-bdr-color);
	border-radius: 0 0 0 6px;
	box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
}
.routeAlerts.printVersion {
	width:200px;
	background-color: var(--widget-alert-print-bg-color);
	border-radius: 6px;
	box-shadow: none;
	margin:25px 5px 5px 5px;
}
.routeAlerts a {
	display: inline;
	overflow: hidden;
	text-overflow: ellipsis;
}
.routeAlert {
	margin-bottom:5px;
}

@media (max-width : 700px) {
	span.mainRoutePic {
		display:none;
	}
	#route_overview_box {
		width:98%;
	}
}
@media (min-width: 600px) {
	#morelessButtonWrap {
		display: block;
	}
}
.SmallTextMain {
	white-space:nowrap;
}
@media (max-width: 600px) {
	.SmallTextMain {
		font-size:10pt;
		white-space:normal;
	}
	.routeAlerts {
		float:none;
		margin: 0 0 5px 0;
		width: auto;
		border-radius: 0;
		box-shadow: none;
	}
}
@media print {
#printButton {
    display:none;
}
div.slick-track {
    width:100% !important;
}
ul.slick-dots {
    display:none !important;
}
div.ui-dialog {
    display:none !important;
}
span.class1,
span.class2,
span.class3,
span.class4,
span.class5 {
    color:#FFF;
}
}