#mainback2 { display:block; } #maintoptable {display:block;} #photomain { display:block; width:100%; } #sidebar-toggle-button { display:none; } #main-content-table { width:100%; } #main-content-div { width:100%; } #menu-wrap { display:block; } #smalllogo {display:none; width:100%;} #biglogo {display:inline-block; width:100%;} #logo-container {padding-top:25px; } #home {display:none; } #mobile-up-arrow {display:none;} #map-container {width:50%} #left-hand-bar { max-width:98%; padding:1%;} #left-hand-bar-new { max-width:98%; padding:1%;} #bottom-bar { max-width:98%; padding:1%;} #pic {width:230px; margin-bottom:10px; } #routepic {margin-right:26px; margin-top:10px; padding-bottom:20px; height:220px; width:50%; background-position: left; background-repeat:no-repeat; background-size: auto 100%; float:left } .routesummarytext {display:inline-block; } /*Display or hide route map*/ #showmapbox { position:absolute; top:140px; right:0px; display:none; writing-mode: vertical-lr; background-color:#839ABE; color:#ffffff; padding-top:10px; padding-left:5px; padding-right:5px; padding-bottom:10px; border-bottom-left-radius:5px; border-top-left-radius:5px; } #hidemapbox { position:absolute; top:78px; right:8px; font-size: 13pt; border:#eeeeee solid 3px; background-color:#5474A9; color:#ffffff; padding-top:0px; padding-left:7px; padding-right:7px; padding-bottom:0px; border-radius:5px; opacity:0.8;} /*Nearby hill pic container*/ #nearbyhill-1 { display:inline-block; position:relative; width:32.7%; vertical-align:top; padding-top:6px; margin-right:0.1%; } #nearbyhill-2 { display:inline-block; position:relative; width:32.7%; vertical-align:top; padding-top:6px; margin-right:0.1%; } #nearbyhill-3 { display:inline-block; position:relative; width:32.7%; vertical-align:top; padding-top:6px; margin-right:0px; } #nearbyhill-4 { display:inline-block; position:relative; width:32.7%; vertical-align:top; padding-top:6px; margin-right:0.1%; } #nearbyhill-5 { display:inline-block; position:relative; width:32.7%; vertical-align:top; padding-top:6px; margin-right:0.1%; } #nearbyhill-6 { display:inline-block; position:relative; width:32.7%; vertical-align:top; padding-top:6px; margin-right:0px; } #webcamdiv {display:inline-block; width:49%; vertical-align:top } #bottomblock {width:100% } .contentcolumned {column-count:3; width:100%; column-gap:30px; padding-bottom:25px; } .contentpic { width:100%; display:inline-block; padding-bottom:20px; } .contentpicbottom { width:100%; display:inline-block; padding-bottom:20px; } .contentpicbottomfloat { display:none; } .contenth4 { border-bottom:solid 1px #666666; padding-bottom:6px; margin-bottom:10px; column-span:all; } .contentmap { border:solid 1px #000000; height:350px } .contentmapsticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background-color:#ffffff } /*For the Region Routes Summary pages and only changes from this when on a small screen*/ .routesummary {display:block; padding-bottom:24px} .routesummarytextmore {text-indent:-20px; padding-left:20px; padding-bottom:14px; } .searchbox {width:360px; height:220px; border:none; float:right; } html {-webkit-text-size-adjust: none;} /*Next 3 lines only used in Lawers, schiehallion and blaven, guide-rum and guide-skye*/ #right-hand-bar {width:250px; text-align:left; height:auto;} #right-hand-bar-new {width:250px; text-align:left; height:auto;} #route-pic-wrapper {display:inline-block; width:24%; vertical-align:top; padding-bottom:15px; padding-right:1%; font-size:small;} #route-pic-wrapper-2 {display:none;} /*Only used on Arran-1 */ #mapdiv {width:100%} @media screen and (min-width: 991px) { #mainback2 { display:block; max-width:970px; } #maintoptable {display:block;} #photomain { display:block; max-width:100%; } #sidebar-toggle-button { display:none; } #main-content-table { width:100%; } #main-content-div { width:100%; } #menu-wrap { display:block; } #smalllogo {display:none;} #biglogo {display:inline-block; width:970px; } #logo-container {padding-top:25px; } #home {display:none; } #mobile-up-arrow {display:none;} #map-container {width:50%} #mapdiv {width:100%} #left-hand-bar { width:100%; padding:1% } #right-hand-bar {width:100%; padding-left:1%; text-align:left; background-color:#ffffff; } #left-hand-bar-new { width:100%; padding:1% } #right-hand-bar-new {width:100%; padding-left:1%; text-align:left; background-color:#ffffff; } #route-pic-wrapper {display:inline-block; width:24%; vertical-align:top; padding-bottom:15px; padding-right:1%; font-size:small;} #route-pic-wrapper-2 {display:none;} #bottom-bar { max-width:98%; padding:1%;} #pic {width:230px; margin-bottom:10px; } #routepic {margin-right:10px; margin-top:10px; padding-bottom:20px; height:190px; width:50%; background-position: left; background-repeat:no-repeat; background-size: auto 100%; float:left } .routesummarytext {display:inline-block; } /*Nearby hill pic container*/ #nearbyhill-1 { display:inline-block; position:relative; width:32.7%; vertical-align:top; padding-top:6px; margin-right:0.1%; } #nearbyhill-2 { display:inline-block; position:relative; width:32.7%; vertical-align:top; padding-top:6px; margin-right:0.1%; } #nearbyhill-3 { display:inline-block; position:relative; width:32.7%; vertical-align:top; padding-top:6px; margin-right:0px; } #nearbyhill-4 { display:inline-block; position:relative; width:32.7%; vertical-align:top; padding-top:6px; margin-right:0.1%; } #nearbyhill-5 { display:inline-block; position:relative; width:32.7%; vertical-align:top; padding-top:6px; margin-right:0.1%; } #nearbyhill-6 { display:inline-block; position:relative; width:32.7%; vertical-align:top; padding-top:6px; margin-right:0px; } #webcamdiv {display:inline-block; width:49%; vertical-align:top } #bottomblock {width:970px } .bottomlogo {display:inline-block; padding:0px; vertical-align:top; width:30%; } .bottombox1 {display:inline-block; padding:15px; vertical-align:top; width:15% } .bottombox2 {display:inline-block; padding:15px; vertical-align:top; width:25% } .bottombox3 {display:inline-block; padding:15px; vertical-align:top; width:20% } #mobile-menu-pad {display:none; } .contentcolumned {column-count:3; width:100%; column-gap:30px; padding-bottom:25px; min-height:200px; } .contentpic { width:100%; display:inline-block; padding-bottom:20px; } .contentpicbottom { width:100%; display:inline-block; padding-bottom:20px; } .contentpicbottomfloat { display:none } .contentmap { border:solid 1px #000000; height:350px } .contentmapsticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background-color:#ffffff } html {-webkit-text-size-adjust: none;} } @media screen and (max-width: 990px) and (min-width: 751px) { #mainback2 { opacity:0; width:100%; } #maintoptable {display:block;} #photomain { display:block; width:100%; } #sidebar-toggle-button { display:block; } #main-content-table { width:98%; padding-left:1%; padding-right:1% } #main-content-div { width:100%; } #menu-wrap { display:none; } #smalllogo {display:block;} #biglogo {display:inline-block; } #logo-container {padding-top:25px; } #home {display:none; } #mobile-up-arrow { display: inline; } #map-container {width:50%} #mapdiv {width:100%} #left-hand-bar { width:100%; padding:1% } #right-hand-bar {width:100%; padding-left:1%; text-align:left; background-color:#ffffff; } #left-hand-bar-new { width:100%; padding:1% } #right-hand-bar-new {width:100%; padding-left:1%; text-align:left; background-color:#ffffff; } #route-pic-wrapper {display:inline-block; width:32%; vertical-align:top; padding-bottom:15px; padding-right:1%; font-size:small;} #route-pic-wrapper-2 {display:inline-block; width:32%; vertical-align:top; padding-bottom:15px; padding-right:1%; font-size:small;} #bottom-bar { max-width:98%; padding:1%;} #pic {width:230px; margin-bottom:10px; } #routepic {margin-right:10px; margin-top:10px; padding-bottom:20px; height:220px; width:38%; background-position: center; background-repeat:no-repeat; background-size: auto 100%; float:left } #route-pic2 {margin-right:10px; margin-top:10px; padding-bottom:20px; height:220px; width:38%; background-position: center; background-repeat:no-repeat; background-size: auto 100%; float:left } .routesummarytext {display:inline-block; } /*Display or hide route map*/ #hidemapbox { top:75px; font-size:14pt; } /*Nearby hill pic container*/ #nearbyhill-1 { display:inline-block; position:relative; width:32.7%; vertical-align:top; padding-top:6px; margin-right:0.1%; } #nearbyhill-2 { display:inline-block; position:relative; width:32.7%; vertical-align:top; padding-top:6px; margin-right:0.1%; } #nearbyhill-3 { display:inline-block; position:relative; width:32.7%; vertical-align:top; padding-top:6px; margin-right:0px; } #nearbyhill-4 { display:inline-block; position:relative; width:32.7%; vertical-align:top; padding-top:6px; margin-right:0.1%; } #nearbyhill-5 { display:inline-block; position:relative; width:32.7%; vertical-align:top; padding-top:6px; margin-right:0.1%; } #nearbyhill-6 { display:inline-block; position:relative; width:32.7%; vertical-align:top; padding-top:6px; margin-right:0px; } #webcamdiv {display:inline-block; width:99%; vertical-align:top } #bottomblock {width:100% } .bottomlogo {display:inline-block; padding:0px; vertical-align:top; padding-right:10px; width:30%; } .bottombox1 {display:inline-block; padding:15px; vertical-align:top; width:12% } .bottombox2 {display:inline-block; padding:15px; vertical-align:top; width:29% } .bottombox3 {display:inline-block; padding:15px; vertical-align:top; width:28% } #mobile-menu-pad {height:60px; display:block;} .contentcolumned {column-count:3; width:100%; column-gap:30px; padding-bottom:25px; min-height:200px; } .contentpic { width:100%; display:inline-block; padding-bottom:20px; } .contentpicbottom { width:100%; display:inline-block; padding-bottom:20px; } .contentpicbottomfloat { display:none } .contentmap { border:solid 1px #000000; height:350px } .contentmapsticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background-color:#ffffff } h1 {font-size:26pt; } h2 {font-size:16pt; } h3 {font-size:16pt; } h4 {font-size:14pt; } html {-webkit-text-size-adjust: none;} } @media screen and (max-width: 750px) { #mainback2 { opacity:0; width:100%; } #maintoptable {display:none;} #photomain { display:block; width:100%; } #sidebar-toggle-button { display:block; } #main-content-table { width:90%; padding-left:5%; padding-right:5%} #main-content-div { width:100%; } #menu-wrap { display:none; } #smalllogo {display:inline-block; width:100%;} #biglogo {display:none; } #logo-container {display:none; } #home {display:none; } #mobile-up-arrow { display: inline; } #map-container {width:100%} .routesummarytext {display:none; } #mapdiv {width:80%; margin-left:10%; margin-right:10%} #main-content-table { width:94%; padding-left:3%; padding-right:3% } #left-hand-bar { width:100%; padding:1% } #right-hand-bar {width:100%; padding-left:1%; text-align:left; background-color:#ffffff; } #left-hand-bar-new { width:100%; padding:1% } #right-hand-bar-new {width:100%; padding-left:1%; text-align:left; background-color:#ffffff; } #bottom-bar { max-width:100%; padding:1% } #pic {width:31.5%; padding-left:0px; margin-left:0px; padding-right:1%; margin-bottom:10px; } #routepic {padding-right:0px; padding-top:10px; padding-bottom:20px; height:220px; width:100%; background-position:center top; background-repeat:no-repeat; background-size: 100% auto; float:none } #route-pic-wrapper {display:inline-block; width:31.5%; padding-right:1%; vertical-align:top; padding-bottom:15px; font-size:small;} #route-pic-wrapper-2 {display:inline-block; width:31.5%; padding-right:1%; vertical-align:top; padding-bottom:15px; font-size:small;} #desc-pic {width:50%; max-width:230px; padding-left:20px; float:right } #webcamdiv {display:inline-block; width:99%; vertical-align:top } #bottomblock {width:100% } .bottomlogo {display:inline-block; padding:0px; vertical-align:top; padding-right:10px; width:30%; } .bottombox1 {display:inline-block; padding:15px; vertical-align:top; width:16% } .bottombox2 {display:inline-block; padding:15px; vertical-align:top; width:29% } .bottombox3 {display:inline-block; padding:15px; vertical-align:top; width:28% } /*Display or hide route map*/ #hidemapbox { top:75px; font-size:14pt; } /*Nearby hill pic container*/ #nearbyhill-1 { display:inline-block; position:relative; width:32.7%; vertical-align:top; padding-top:6px; margin-right:0.1%; } #nearbyhill-2 { display:inline-block; position:relative; width:32.7%; vertical-align:top; padding-top:6px; margin-right:0.1%; } #nearbyhill-3 { display:inline-block; position:relative; width:32.7%; vertical-align:top; padding-top:6px; margin-right:0px; } #nearbyhill-4 { display:inline-block; position:relative; width:32.7%; vertical-align:top; padding-top:6px; margin-right:0.1%; } #nearbyhill-5 { display:inline-block; position:relative; width:32.7%; vertical-align:top; padding-top:6px; margin-right:0.1%; } #nearbyhill-6 { display:inline-block; position:relative; width:32.7%; vertical-align:top; padding-top:6px; margin-right:0px; } #mobile-menu-pad {height:60px; display:block;} .contentcolumned {column-count:2; width:100%; column-gap:30px; padding-bottom:25px; min-height:200px; } .contentpic { width:100%; display:inline-block; padding-bottom:20px; } .contentpicbottom { width:100%; display:inline-block; padding-bottom:20px; } .contentpicbottomfloat { display:none } .contentmap { border:solid 1px #000000; height:300px } .contentmapsticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background-color:#ffffff } h1 {font-size:24pt; } h2 {font-size:16pt; } h3 {font-size:16pt; } h4 {font-size:14pt; } .breadcrumbs {font-size:8pt; font-weight: 100;} .breadcrumbs a:link, .breadcrumbs a:visited, .breadcrumbs a:hover, .breadcrumbs a:active {font-weight: 100;} /*For the Region Routes Summary pages and only changes from what's at top of this stylesheet when on a small screen*/ .routesummary {display:none; } .routesummarytextmore {font-family: 'Open Sans', sans-serif; font-size:12pt; font-weight:normal; padding-top:0px } html {-webkit-text-size-adjust: none;} } @media screen and (max-width: 570px) { #bottomblock {width:100% } .searchbox {width:60%; } .bottomlogo {display:inline-block; padding-left:5px; vertical-align:top; padding-right:10px; width:30%; } .bottombox1 {display:inline-block; padding:15px; vertical-align:top; width:45% } .bottombox2 {display:inline-block; padding:15px; vertical-align:top; width:45% } .bottombox3 {display:inline-block; padding:15px; vertical-align:top; width:45% } /*Display or hide route map*/ #hidemapbox { top:66px; font-size:14pt; } /*Nearby hill pic container*/ #nearbyhill-1 { display:inline-block; position:relative; width:49%; vertical-align:top; padding-top:6px; margin-right:0.5%; } #nearbyhill-2 { display:inline-block; position:relative; width:49%; vertical-align:top; padding-top:6px; margin-right:0px; } #nearbyhill-3 { display:inline-block; position:relative; width:49%; vertical-align:top; padding-top:6px; margin-right:0.5%; } #nearbyhill-4 { display:inline-block; position:relative; width:49%; vertical-align:top; padding-top:6px; margin-right:0px; } #nearbyhill-5 { display:none;} #nearbyhill-6 { display:none;} .contentcolumned {column-count:1; width:100%; padding-bottom:25px; min-height:0px;} .contentpic { width:50%; float:left; padding-right:25px; padding-bottom:20px; } .contentpicbottom { display:none } .contentpicbottomfloat { display:block; width:60%; float:right; margin-left:20px; margin-top:5px; margin-bottom:5px; } .contentmap { border:solid 1px #000000; height:250px } .contentmapsticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background-color:#ffffff } h1 {font-size:22pt; } h2 {font-size:14pt; } h3 {font-size:14pt; } h4 {font-size:14pt; } .breadcrumbs {font-size:6pt; font-weight: 100;} .breadcrumbs a:link, .breadcrumbs a:visited, .breadcrumbs a:hover, .breadcrumbs a:active {font-weight: 100;} /*Display or hide route map*/ #hidemapbox { top:72px; } } @media screen and (orientation:landscape) and (max-width: 750px) { .contentmapsticky {position: relative; background-color:#ffffff } }