/*27/01/2025 - On routes page adds in landscape mode maps re-sizing and positioning*/ #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 - this only works in portrait mode*/ #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;} /*For the Maps and GPX section*/ #recommendedmapdiv { display:inline-block; padding-bottom:05px; padding-right:25px; vertical-align:top; } #othermapdiv { display:inline-block; padding-right:10px; padding-bottom:05px; padding-right:25px; vertical-align:top; background-color:none; } #gpxdiv { display:inline-block; padding-bottom:25px; padding-right:25px; vertical-align:top; width:25%; } /*.bigmappic {width:150px; height:260px; border-radius:5px; margin-bottom:5px; } .bigmappiccontainer { position: relative; text-align: center; font-size:8pt; color:white; } .bigmappicadd { position:absolute; bottom:4px; right:0px; background-color:#648ba3; padding:2px; border-bottom-right-radius:5px; border-top-left-radius:5px; font-weight:normal; } */ .bigmappic {width:95px; height:163px; border-radius:3px; margin-bottom:3px; } .bigmappiccontainer { position: relative; text-align: center; font-size:8pt; color:white; width:95px; vertical-align:top; } .bigmappicadd { position:absolute; bottom:3px; right:0px; background-color:#648ba3; padding:2px; border-bottom-right-radius:3px; border-top-left-radius:5px; font-weight:normal; } .smallmappic {width:95px; height:163px; border-radius:3px; margin-bottom:3px; } .smallmappiccontainer { position: relative; text-align: center; font-size:8pt; color:white; width:95px; vertical-align:top; vertical-align:text-top;} .smallmappicadd { position:absolute; bottom:3px; right:0px; background-color:#648ba3; padding:2px; border-bottom-right-radius:3px; border-top-left-radius:5px; font-weight:normal; } .mappictext { text-decoration:none; font-weight:normal; font-size:9pt; } /*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; background-color:#dddddd; font-size:8pt; margin-bottom:15px; padding-bottom:0px } .contentpicbottom { width:100%; display:inline-block; background-color:#dddddd; font-size:8pt; margin-bottom:15px; padding-bottom:0px } .contentpicbottomfloat { display:none; background-color:#dddddd; font-size:8pt; margin-bottom:15px; padding-bottom:0px } .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:20% } .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; } .contentpicbottom { width:100%; display:inline-block; } .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:20% } .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; } .contentpicbottom { width:100%; display:inline-block; } .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:12pt; } 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:25% } .bottombox2 {display:inline-block; padding:15px; vertical-align:top; width:32% } .bottombox3 {display:inline-block; padding:15px; vertical-align:top; width:20% } /*Display or hide route map*/ #hidemapbox { top:75px; font-size:14pt; } /*For the Maps and GPX section*/ #gpxdiv { display:inline-block; padding-bottom:25px; padding-right:25px; vertical-align:top; width:75%; } #recommendedmapdiv { display:inline-block; padding-bottom:05px; padding-right:25px; vertical-align:top; } #othermapdiv { display:inline-block; padding-right:10px; padding-bottom:05px; padding-right:25px; vertical-align:top; background-color:none; } .mappictext {display:none } .bigmappiccontainer { position: relative; text-align: center; font-size:8pt; color:white; width:75px; } .bigmappic {width:75px; height:125px; border-radius:3px; margin-bottom:3px; } .bigmappiccontainer { position: relative; text-align: center; font-size:8pt; color:white; width:75px; vertical-align:top; } .bigmappicadd { position:absolute; bottom:3px; right:0px; background-color:#648ba3; padding:2px; border-bottom-right-radius:3px; border-top-left-radius:5px; font-weight:normal; } .smallmappic {width:75px; height:125px; border-radius:3px; margin-bottom:3px; } .smallmappiccontainer { position: relative; text-align: center; font-size:8pt; color:white; width:75px; vertical-align:top;} .smallmappicadd { position:absolute; bottom:3px; right:0px; background-color:#648ba3; padding:2px; border-bottom-right-radius:3px; border-top-left-radius:5px; font-weight:normal; } .mappictext { text-decoration:none; font-weight:normal; font-size:8pt; } /*#gpxdiv { display:inline-block; padding-bottom:25px; padding-right:25px; vertical-align:top; width:25%; }*/ /*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; } .contentpicbottom { width:100%; display:inline-block; } .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:12pt; } 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; margin-right:25px; margin-bottom:20px; } .contentpicbottom { display:none } .contentpicbottomfloat { display:block; width:60%; float:right; margin-left:20px; margin-top:5px; margin-bottom:5px; } .contentmapsticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background-color:#ffffff } h1 {font-size:22pt; } h2 {font-size:11pt; } 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; } } /*If landscape, paradetail text is put into 2 columns taking up left 63%. Map is floated to top right of div and resized dependent on overall height of browser or device*/ @media screen and (orientation:landscape) { .contentmapsticky {position: -webkit-sticky; /* Safari */ position: sticky; background-color:#ffffff; width:33%; float:right; padding-top:45px;} #paradetail {width:63% } #routemap {display:none } .contentcolumned {column-count:2; width:100%; column-gap:30px; padding-bottom:25px; min-height:200px; } #hidemapbox {display:none } } @media screen and (orientation:landscape) and (min-height: 801px) { .contentmap {height:690px } } @media screen and (orientation:landscape) and (max-height: 800px) { .contentmap {height:590px } } @media screen and (orientation:landscape) and (max-height: 700px) { .contentmap {height:540px } } @media screen and (orientation:landscape) and (max-height: 650px) { .contentmap {height:490px } } @media screen and (orientation:landscape) and (max-height: 600px) { .contentmap {height:440px } } @media screen and (orientation:landscape) and (max-height: 550px) { .contentmap {height:390px } } @media screen and (orientation:landscape) and (max-height: 500px) { .contentmap {height:340px } } @media screen and (orientation:landscape) and (max-height: 450px) { .contentmap {height:300px } } @media screen and (orientation:landscape) and (max-height: 400px) { .contentmap {height:270px } } @media screen and (orientation:landscape) and (max-height: 350px) { .contentmap {height:250px } } @media screen and (orientation:landscape) and (max-height: 320px) { .contentmap {height:220px } }