/* Responsive widths
   Default for one column is 100%, which is used for the smallest screens

   Widths are:
	<25em		            tiny phone
	<35em		.phone      phone						
	<42em		.mobile     phone and small tablet		[too big, should be 100px]
	35em-42em	.mobile     small tablet only			[ok]
	42em>		.tablet     two-column screen			[too big, should be 100px]
	55em>		.destkop    three-column screen
 */

/* Temporary simulation of iPhone at 400px @media screen and (max-width: 400px) {
	html { width: 320px !important;	}
} */

/* ------------------------------------------------------------------
   Phone and small tablet width */

@media screen and (max-width: 41.9999em) {
	.desktop { display: none !important; }
	.tablet { display: none !important; }
	.phone { display: none !important; }
	.mobile { display: inline !important; }
	.not_mobile { display: none !important; }	/* doesn't overwrite display: */

	.abbr_mobile>span { display: none !important; }
	.abbr_mobile:before { content: attr(data-mobile); }

	#top_nav>#title,#sub_nav>#title { vertical-align: top; width: 25%; }
	#top_nav>#sections,#sub_nav>#sections { width: 75%; }

	#logo { font-size: large; padding: 0.5em; }
	.wide>* { padding: 0 0.5em; }

	#sub_nav { height: 3.0em; }
	#sub_nav>#title { font-size: large; vertical-align: top; line-height: 1; }
	#sub_nav>#sections { line-height: 3.3em; font-size: 0.9em; }

	#guide_menu .menu_columns { padding-left: 0; }
	#footer #credits { display: block; padding-left: 10em; }

	#top_nav>#sections>span { letter-spacing: 2px; }
	
	.article { padding: 0; }
	.dialogue_box { max-width: 18em; }
	#map_container>#map_sidebar { display: none; z-index: 401; } /* z-index above Leaflet */
	#map_container { top: 7.8em !important; }
	.fullscreen #map_container { top: 4.7em !important; }
	#elevation { left: 0 !important; }

	.title_medium { display: none !important; }
	.trailer.front_banner { line-height: 2em; }
	.trailer.front_banner .tag { height: 1.5em; display: inline;}
	.trailer.front_banner .login { padding-top: 0.2em; }
	
	.comment_attrib { float: none; width: 100%; }
	.comment_body { margin-left: 0; border-left-width: 0; padding-left: 0; min-height: 0; }
	.comment_name, .comment_date { display: inline-block; }

    .ad_right_third { max-width: 150px; }

	.five>div { width: 50%; }

	.content.displaces { width: 100%; }

	#planner_trailer>div { height: 200px; }
	#planner_trailer h2 { margin-top: 20px; }
	#find_a_route { background-position: center top !important; }
	#planner_trailer input[type=text] { width: 70px; }

	#banner { padding: 0.5em; }
	#distanceSlider { width: 80px; }
	.explore_map  { height: 250px !important; }
	.pn_prompt { width: 40px; padding-right: 5px; }

	#fp_quote { padding: 0 1em; margin-top: 1em; }
	#fp_quote>div { font-size: 1.3em; }
	#fp_hero_content { min-height: 400px; margin-top: 50px; }
	#fp_header_image { height: 400px; }
	#fp_quote { top: 400px; }
}

/* Tiny phone only */
@media screen and (max-width: 24.9999em) {
	.abbr_mobile>span { display: none !important; }
	.abbr_tiny>span { display: none !important; }
	.abbr_mobile:before { content: ''; }
	.abbr_tiny:before { content: attr(data-tiny); }
	.summary_image { display: inline; float: left; }
	.summary_image img { max-width: 100px; }
	.summary_text { display: inline; }
	.five>div { width: 100%; }
	#route_types { font-size: 1.0em; }
	#route_expander { margin-top: 0.3em; }
	#fp_headline1 { padding-left: 0.5em; padding-right: 0.5em; }
}

/* Phone only */
@media screen and (max-width: 34.9999em) {
	.not_phone { display: none !important; }	/* doesn't overwrite display: */
    .phone { display: inline !important; }
	#map_container>#map_sidebar { 
	    display: none;
        z-index: 401;
        position: absolute; left: 40px; top: 10px; width: auto; right: 10px; bottom: 10px;
	    box-shadow: 0 0 5px #bbb;
	}

	#logo { font-size: medium; padding: 0.3em 0.5em; }
	#top_nav>#sections { width: 100%; }
	#searchbox { position: absolute; right: 0.5em; margin-top: -2em; }

	#sub_nav { height: auto; padding-bottom: 0.2em; }
	#sub_nav>#title    { width: 100% !important; margin: 0.2em 0 0.2em -0.1em; height: auto; }
	#sub_nav>#sections { width: 100%; line-height: 1.3em; }
	#sub_nav .selected { background-image: none !important; }
	#sub_nav .justify { display: inline; }
	#sub_nav .justify>* { padding-left: 0.5em; }
	#sub_nav .justify>*:first-child { padding-left: 0; }
	#sub_nav .justify:after { width: 0%; content: none; }

	#minor_nav { left: 0; top: 0; background-color: white; width: 100%; padding: 0; margin-bottom: 0.5em; z-index: 1; }
	#minor_nav .sections:after { content: ""; border-bottom: 1px solid #CCC; left: 0; top: 0; right: 0; bottom: 0; position: absolute; pointer-events: none; }
	#minor_nav>h3 { display: none; }
	#minor_nav .sections { padding: 0.5em 0 0 0.5em !important; border-left: 8px solid #F8F6F2; border-right: 8px solid #F8F6F2; }
	#minor_nav .sections div { display: inline; padding: 0; border: 0; margin: 0 0.5em 0 0; white-space: nowrap; }
	#minor_nav .sections .selected { background-image: none; }

	.minor_navigable { padding-left: 0 !important; }
	
	.forum_index, .pager_nav { font-size: small; }
	.pager_nav>.legend,.pager_nav>.call_to_action { font-size: x-small; }
	.pager_nav>.call_to_action:before { content: ""; margin: 0; }
	.forum_index .attrib { display: none; }
	
	#header .intro { min-width: 290px; } /* slightly better alignment */
	
	#stage_description { padding-left: 0; border-left-width: 8px; }
	#stage_description>img { float: left !important; margin: 0 8px 0 0; }
	#stage_shops, #stage_accommodation { width: 100%; }
	.hero h2 { font-size: large !important; }
	
	.profile .image { padding-bottom: 1em; }
	.profile .image, .profile .description { width: auto; display: block; }

	.menu_columns>div { min-width: 30%; }
	.stage_link:before { content: ""; }

    .ad_right_third { max-width: 120px; }

	#fp_headline1 { font-size: 2em; }
	#fp_headline2 { font-size: 1.2em; }
	.route_fromto { max-width: 6em; }
	#route_to_div { margin-right: 1em; }
	#route_input_box>div { font-size: 0.8em; }
	#fp_quote>div { font-size: 1em; }
}

/* Small tablet only */
@media screen and (min-width: 35em) and (max-width: 41.9999em) {
	.article .content { width: 66.6666%; display: inline-block; }
	.article .column { width: 33.3333%; }
	.right { float: right; }
	.hero .headline h2 { margin-left: 0.5em; }

	#map_container { top: 6em !important; }
	.fullscreen #map_container { top: 3em !important; }
	#map_container>#map_sidebar { width: 35%; display: block; }
	#map_container>#map { width: 65%; left: 35%; }
	#elevation { left: 35%; }

	.five>div { width: 33.3333%; }
}

/* ------------------------------------------------------------------
   Medium width: base of two columns
   (note that these cascade to below) */

@media screen and (min-width: 42em) {
	.desktop { display: none !important; }
	.mobile { display: none !important; }
	.phone { display: none !important; }
	.tablet { display: inline !important; }

	.abbr_tablet>span { display: none !important; }
	.abbr_tablet:before { content: attr(data-short); }

	/* 1+1 layout */
	.column { width: 50%; float: left; }
	.right { float: right; }
	.content { display: inline; }
	.content>div { width: 50%; }
	
	/* 1+1 layout (article variant) */
	.article .content {  width: 66.6666%; display: inline-block; }
	.article .column { width: 33.3333%; }

	/* 20/80 layout */

	/* Map with sidebar */
	#map_container>#map_sidebar { width: 20em; width: 18em\0; } /* IE9 hack */
	#map_container>#map { left: 20em; right: 5em; margin-right: -5em; width: auto; padding: 0; } /* did have  !important on right */
	#elevation { left: 20em !important; }

	/* Half-width continuous columns */
	.half_left { width: 50%; float: left; }
	.half_right { width: 50%; float: right; }

	/* 20/80 layout */
	.column_2080 { width: 20%; }
	.content_2080 { max-width: 80%; display: inline-block; }

	/* Standard columns */
	.double_grow>div { width: 100%; }
	.three>div { width: 50%; }
	.three>div.double_box { width: 100%; }
	.two>div { width: 50%; }
	.two>div.double_box { width: 100%; }
	.five>div { width: 25%; }

    /* Advertising */
    .ad_right_third { max-width: 200px; }
    .ad_route_map { max-width: 180px; max-height: 450px; }

	/* Front-page content - floats above LH column */
	.content.displaces { width: 100%; }
}

@media screen and (min-width: 42em) and (max-width: 54.9999em) {
	.summary_image { display: inline; float: left; }
	.summary_image img { max-width: 150px; }
	.summary_text { display: inline; }
	.buzz { width: 200%; }
}
/* Buzz is two columns for tablets and some large phones */
@media screen and (min-width: 30em) and (max-width: 54.9999em) {
	.buzz .col1 { float: left;  width: 50%; }
	.buzz .col2 { float: right; width: 50%;
				  border-left: 10px solid #DEE6D4; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
}

/* ------------------------------------------------------------------
   Full width: base of three columns */

@media screen and (min-width: 55em) {
	.mobile { display: none !important; }
	.tablet { display: none !important; }
	.desktop { display: inline !important; }

	.abbr_tablet>span { display: inline !important; }
	.abbr_tablet:before { content: ''; }

	/* 1+2 layout */
	.column { width: 33.3333%; }
	.content { width: 66.6666%; display: inline-block; }
	.content.displaces { width: 66.6666%; }

	/* Standard columns */
	.five>div { width: 20%; }
    .three>div { width: 33.3333%; }
    .three>div.double_box { width: 66.6666%; }
    .two>div.double_box { width: 100%; }
	.double>div,.double_grow>div { width: 100%; }

    /* Advertising */
    .ad_right_third { max-width: 300px; }
}

/* ------------------------------------------------------------------
   Combination of the above duplicated for IE 8  - desktop only
   (http://blog.keithclark.co.uk/moving-ie-specific-css-into-media-blocks/) */

@media \0screen {
	.mobile { display: none !important; }
	.tablet { display: none !important; }
	.desktop { display: inline !important; }

	.abbr_tablet>span { display: inline !important; }
	.abbr_tablet:before { content: ''; }

	.column { float: left; }
	.content>div { width: 50%; }
	#map_container>#map_sidebar { width: 18em; }
	#map_container>#map { left: 20em; right: 5em !important; margin-right: -5em; width: auto; }
	.half_left { width: 50%; float: left; }
	.half_right { width: 50%; float: right; }
	.column { width: 33.3333%; }
	.content { width: 66.6666%; display: inline-block; }
    .three>div { width: 33.3333%; }
    .three>div.double_box { width: 66.6666%; }
    .five>div { width: 20%; }

	.right { float: right; }
	.article .content {  width: 66.6666%; display: inline-block; }
	.article .column { width: 33.3333%; }
	#elevation { left: 20em !important; }
	.column_2080 { width: 20%; display: inline-block; }
	.content_2080 { max-width: 78%; display: inline-block; }
	.two>div { width: 50%; }
    .two>div.double_box { width: 100%; }
	.double>div,.double_grow>div { width: 100%; }


    .ad_right_third { max-width: 300px; }
    .ad_route_map { max-width: 180px; max-height: 450px; }
}