@import url(//fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext);
#printonly
{
	display: none;
	font-family: 'Open Sans', sans-serif;
	padding: 10px;
}
.viewroute.content 
{
	width: 840px;
	font-family: 'Open Sans', sans-serif;
	padding: 10px;
}
div.noroute
{
	margin-bottom: 12pt;
}
.heading.noroute
{
	background-color: rgb(52, 86, 204);
	color: rgb(255, 255, 255);
	padding: 20px;
	font-size: 14pt;
}
.heading.noroute a:link,.heading.noroute a:visited,.heading.noroute a:active
{
	color: rgb(255, 255, 255);
}
.small.image_display
{
	width: 500px;
	display: none;
}
.big.image_display
{
	width: 500px;
}
.stats_display
{
	width: 300px;
}
.image_display,.stats_display
{
	float:left;
	margin-bottom: 10px;
}
.name_display,.distance_display
{
	font-size: 24pt;	
}
.user_display,.distance_display_group,.elevation_display_group,.elevation_gain_group,.elevation_change_group
{
	padding-bottom: 10px;
}
.elevation_display_group
{
	overflow: auto;
	background-color: rgba(0,0,0,0.10);
	width: 200px;
	font-size: 12pt;
	text-align: center;
}
.description_display,.user_display
{
	font-size: 12pt;	
}
.name_description_display
{
	width: 650px;
	padding-bottom: 10px;
}
.image_display
{
	margin-right: 10px
}
.elevation_gain_heading,.elevation_change_heading,.distance_heading_display,.created_heading,.user_display
{
	color: rgba(0,0,0,.5);
}
.explaintext
{
	font-size: 9pt;
}
.about_display
{
	clear: both;
}
ul.share-buttons
{
  list-style: none;
  padding: 0;
}
ul.share-buttons li
{
  display: inline;
}
.mobilefirstgif
{
	display: none;
}
.mobileheading
{
	display: none;
}
@media only screen and ( min-width: 320px ) and (max-width: 840px), only screen and (min-device-width : 320px) and (max-device-width : 840px) 
{
	.viewroute.content {
		width: auto;
	}
	.name_description_display
	{
		width: auto;
	}
	.big.image_display
	{
		display: none;		
	}
	.small.image_display
	{
		display: block;		
	}
	.firstgif,.secondgif,.thirdgif,.detail_description
	{
		display: none;
	}
	.mobilefirstgif
	{
		display: block;
		text-align: center;
	}
	.mobileheading
	{
		display: block;
	}
}
/* since mobile image is 320 exactly, shrinking it down a little to accounnt for padding*/
@media only screen and ( min-width: 320px ) and (max-width: 320px), only screen and (min-device-width : 320px) and (max-device-width : 320px) 
{
	.mobilefirstgif img
	{
		width: 300px;
	}

}
@media print 
{
	.share_display,.image_display,#navbar,.about_display,.click_message,.bottom_ad
	{
		display: none;
	}
	#printonly
	{
		display: block;
	}
}