/* General */

body{Background-color:#white; margin:0;font-family:"Arial","sans serif"; font-size:1em; color:black;text-align:justify; font-weight:normal;line-height:30px}
html{-webkit-text-size-adjust:100%; /* Prevent font from scaling in landscape while allowing user to zoom.*/}
a:link{color:#606060}
a:visited {color:#606060}
a:active{color:#999999}
P{line-height:100%; margin-left:1; margin-right:1}
H1{font-size:1em;text-align:left;line-height:0;font-weight:bold;display:inline;}
H2{font-size:1em;text-align:left;line-height:0;font-weight:bold;display:inline;}

.OuterWrapper{position:relative; z-index:1; width:100%; background-color:white; margin:auto; max-width:1000px;}
.SectionSpacer{position:relative; width:100%; height:5px; background-color:white;-webkit-user-select: none;}
.PageContents{position:relative; width:calc(100% - 12px); padding:6px; max-width:1000px;}

#TopNav{-webkit-user-select: none;}
#panoramaHeader {position:relative; width: 100%; padding-top: 33%;-webkit-user-select: none;}
#panoramaPhoto {position:absolute; width: 100%; height: 100%; z-index:1; top:0;-webkit-user-select: none;}
#panoramaOverlay {position:absolute; width: 100%; height: 100%; z-index:2; top:0;-webkit-user-select: none;}
#Logo{position:absolute; top:5px; left:5px; height:40px;-webkit-user-select: none;}

.ArticleText{position:relative; width:100%;}
A.ArticleText{
    display: block;
    position: relative;
    top: -50px;
    visibility: hidden;
}

#Article1{display:none;}
#Article2{display:none;}
#Article3{display:none;}

.PhotoFrame{background-color:white; width:100%; border:1px solid black; padding:0; margin:0;}
.PhotoFrameTD{width:100%; border:0;}
.PhotoFramePicture{width:100%; height:auto;}
.PhotoFrameIndented{border:0; padding:0; padding-left:10px; padding-right:10px; margin:0;}

.Table{background:linear-gradient(#CECDD3,#FFFFFF); border-collapse:collapse; border:1px solid black; padding:2px; text-align:left; vertical-align:top; width:100%;}
.TableHeader{font-weight:bold; }
TD {border: 1px solid black; padding:2px 2px 2px 10px;}
TH {border: 1px solid black; cursor: pointer; padding:2px 2px 2px 10px;}

#TH_Peak{width:60%;}
#TH_Height{width:20%;}
#Categories{width:20%;}

.routeSummary{background:linear-gradient(#CECDD3,#FFFFFF); border-collapse:collapse; padding:2px; text-align:left; vertical-align:top; width:100%;}

.routeSummary td{background-color:#9EBF8D; border:1; padding-left:8px;}

IMG.Sort{float:right; cursor:pointer; width:16px; height:16px;}
IMG.ArticleIcon{cursor:pointer; width:16px; height:16px;}

.ButtonGroup{min-width:210px; width:100%; border:1px solid black; background:linear-gradient(#CECDD3,#FFFFFF);-webkit-user-select: none;}
.ButtonGroupText{font-size:.8em; text-align:center; line-height:12px; padding:4px;}
.ButtonContainer{display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));}
.StartButton{margin:10px; min-width:150px; max-width:180px; height:85px; border:1px solid black; border-radius:2px; cursor: pointer; transition: transform 0.5s ease-in;-webkit-user-select: none; -webkit-touch-callout: none;}
.StartButtonTag{position:relative; left:0px; top:64px; width:100%; height:20px; padding:0; border-top:1px solid black; font-size:10px; text-align:center; line-height:20px; background-image:url('Menu_Silver.jpg'); background-size:180px 20px;}
.StartButton:hover{transform: scale(1.1);}
.StartButton:hover .StartButtonTag{background-image:url('Menu_Green.jpg');background-size:180px 20px;}
.StartButtonPhantom{}
	
#StartButton_PontPen-y-benglog{background: url("StartButton_PontPen-y-benglog.jpg") no-repeat 50% 0%;}
#StartButton_Tal-y-llyn_Ogwen{background: url("StartButton_Tal-y-llyn_Ogwen.jpg") no-repeat 50% 0%;}
#StartButton_PenYrOleWen{background: url("StartButton_PenYrOleWen.jpg") no-repeat 50% 0%;}
#StartButton_CarneddDafydd{background: url("StartButton_CarneddDafydd.jpg") no-repeat 50% 0%;}
#StartButton_CarneddLlewelyn{background: url("StartButton_CarneddLlewelyn.jpg") no-repeat 50% 0%;}
#StartButton_FoelGrach{background: url("StartButton_FoelGrach.jpg") no-repeat 50% 0%;}
#StartButton_CarneddGwenllian{background: url("StartButton_CarneddGwenllian.jpg") no-repeat 50% 0%;}
#StartButton_Foel-fras{background: url("StartButton_Foel-fras.jpg") no-repeat 50% 0%;}
#StartButton_Drum{background: url("StartButton_Drum.jpg") no-repeat 50% 0%;}
#StartButton_Tal_y_Fan{background: url("StartButton_Tal_y_Fan.jpg") no-repeat 50% 0%;}
#StartButton_SychnantPass{background: url("StartButton_SychnantPass.jpg") no-repeat 50% 0%;}
#StartButton_Mynydd_y_Dref{background: url("StartButton_Mynydd_y_Dref.jpg") no-repeat 50% 0%;}
#StartButton_ConwyCastle{background: url("StartButton_ConwyCastle.jpg") no-repeat 50% 0%;}

#ResumeButton{background:linear-gradient(#CECDD3,#FFFFFF); background-image:url("Menu_Silver.jpg");display:none; border:1px solid black; cursor:pointer; text-align:center; width:200px;}

#ResumeButton:hover{background-image:url("Menu_Green.jpg");}

#map-canvas{position:relative; top:0; width:100%; height:450px; border:1px solid black; padding:auto; line-height:100%; text-align:center; -webkit-user-select: none;  transition: height 0.1s;}

.sticky{ position: -webkit-sticky; position: sticky; top:60px; z-index:10;}

#ResumeButton{background:linear-gradient(#CECDD3,#FFFFFF); background-image:url("Menu_Silver.jpg");display:none; border:1px solid black; cursor:pointer; text-align:center; width:200px;-webkit-user-select: none;}

#ResumeButton:hover{background-image:url("Menu_Green.jpg");-webkit-user-select: none;}

.Footer{position:relative; width: calc(100% -20px); padding:10px; bottom:0; background-color:#D4D5D8; text-align:center;}
	
	@media screen and (max-width:630px)
{
	.Table{font-size:90%;}
}