body { font-size: 1.4vh; background-attachment: scroll; 
margin-left: 1vh; background-repeat: no-repeat; font-family: Verdana, Arial, Helvetica, sans-serif; 
background-color: #404040;
}
html { margin: 0;	padding: 0;
}
.frame1 {position: absolute; top: 0%; background: #a0a080; border: solid black 1px; width: 99.5%; height: 130vw; left: 0vw;
}
@media (min-aspect-ratio: 1/1) {.frame1 {height: 99vh; width: 150vh; left: calc(50vw - 75vh);}
}
#picframe {position: absolute; top: 20vw; background: transparent; border: none; height: 76vw; width: 94.5vw; left: 3vw;
}
@media (min-aspect-ratio: 1/1) {#picframe {height: 93vh; top: 6vh; width: 79%; left: 3%; }
}
.title {background: #407060; color: #ffffff; font-size: 3.5vw; position: absolute; top: 1.5vw; left: 0vw; width: 92vw; height: 10vw; padding: 0vh 0vh 0vh 1vh; padding; 0%; margin-top: 0%; margin-bottom: 0%;
}
@media (min-aspect-ratio: 1/1) {.title {top: 0vh; left: 0vh; width: 120vh; height: 4vh; font-size: 2.6vh;}
}
.centreimg { position: absolute; text-align: center; top: 28vw; width: 100%; 	
}
.land { display: none;
}
@media (min-aspect-ratio: 1/1) {.land { display: block;}
}
.port { display: block;
}
@media (min-aspect-ratio: 1/1) {.port { display: none;}
}
p.diarytxt {background: #d0f0f0; color: #000000; font-size: 3.6vw; position: absolute; 
 top: 28vw; left: 3vw; width: 83vw; max-height: calc(100vh - 60vw); padding: 5vw; margin-top: 1vw; margin-bottom: 0%; overflow-y: auto; z-index:1;
}
@media (min-aspect-ratio: 2/3){p.diarytxt { font-size: 3vw; }
}
@media (min-aspect-ratio: 1/1) {p.diarytxt {top: 8vh; left: 5vh; width: 73%; font-size: 3vh; padding: 1% 3% 4% 3%; max-height: 80vh;}
}
#fullscr { position: absolute; right: 5vw; top: 10vw;
} 
@media (min-aspect-ratio: 1/1) {#fullscr {right: 4vh; top: 6vh;}
}
p {font-size: 1.4vh; color: #000000; font-family: inherit; align: center; 
}
.nowrap {white-space: nowrap;
}
@media (min-aspect-ratio: 1/1) {.nowrap {white-space: normal;}
}
.bigimg { border: solid black 1px;
}
img.chevl, img.chevr, img.bigimg, img.portimg {background: transparent; position: absolute; padding: 0%; margin-top: 0%; margin-bottom: 0%; border: 0%;
}
.chevl, .chevr { width: 10%; top: 40%; 
}
.chevl {left: 0%; z-index: 998;
}
.chevr {right: 0%; z-index: 999;
}
@media (min-aspect-ratio: 1/1) {.chevr {right: 14.8%;}
}
.bigimg {left: 3vw; height: calc(100vh - 55vw); max-height: 69.5vw; top: 29vw; border: solid black 1px; 
}
@media (min-aspect-ratio: 1/1) {.bigimg { left: 4.5vh; top: 9vh; width: 118.5vh; height: 89vh;}
}
.bigimg, .bigimg1 { position: absolute; left: 0px; width: 93.5vw; top: 12vw;
}
@media (min-aspect-ratio: 1/1) {.bigimg, .bigimg1 { left: 0%; top: 4vh; width: 118vh;}
}
.chevl, .chevr { position: absolute; width: 10vw; top: 35vw; 
}
@media (min-aspect-ratio: 1/1) {.chevl, .chevr { position: absolute; width: 15vh; top: 35vh; }
}
.chevl {left: -3vw; z-index: 998;
}
@media (min-aspect-ratio: 1/1) {.chevl {left: -4.5vh; z-index: 999;}
}
.chevr {left: 86.5vw; z-index: 998;
}
@media (min-aspect-ratio: 1/1) {.chevr { left: 108vh; z-index: 999;}
}
.portimg { display: block; margin-left: auto; margin-right: auto; position: absolute;
}
@media (min-aspect-ratio: 1/1) {.portimg { left: 33vh; top: 13vh; height: 86vh;}
}
.chevimg {width: 2vh;
}
#thumbnails { background: #606080; position: absolute; left: 0%; bottom: 0; height: 22vw; width: 99vw; font-size: 100%; color: white; display: inline-block; overflow-x: scroll; overflow-y: hidden; white-space: no-wrap; z-index: 99; 
}
@media (min-aspect-ratio: 1/1)  {#thumbnails {overflow-y: auto; overflow-x: hidden; left: 132vh; top: 13%; height: 86vh; width: 18vh; white-space: no-wrap; font-size: 120%; }
}
#thumbbox {background: #806060; width: 15vw; height: 17vw; vertical-align: top; color: white; text-align: center; font-family: inherit; margin: 0vh; padding: 0vh; border: 0.5vh solid white; display: inline-block; white-space: normal; overflow: hidden;
}
@media (min-aspect-ratio: 1/1) {#thumbbox {width: 14vh; height: 17vh;} 
}
.thumb { background: #806060; color: white; width: 100%; height: 100%; margin: 0; padding: 0;
font-size: 1.5vw;}
@media (min-aspect-ratio: 1/1) {.thumb { font-size: 2vh;}
}
.hidebtn1 {position: cursor: pointer; color: black; background-color: #00ff00; inherit; font-size: 2.8vw; font-weight: bold; margin: 0; padding: 0.5vh;
}
@media (min-aspect-ratio: 1/1) {.hidebtn1 { font-size: 1.8vh;}
}
.links {position: absolute; top: 9%; right: 0%; width: 100%; margin-top: 0%; margin-right: 0%;
}
@media (min-aspect-ratio: 1/1) {.links {top: 0%; width: 40%;}
}
.linkbtn, .linkbtn1, .linkbtn2 { cursor: pointer; font-family: inherit; font-size: 3vw;
  font-weight: bold; margin-top: 0%; margin-left: 2%; padding: 0% 2% 0% 2%;
}
@media (min-aspect-ratio: 1/1)  {.linkbtn, .linkbtn1, .linkbtn2 { font-size: 2.2vh; padding: 0% 3% 0% 3%;}
}
.daybtn, .daybtn1{ cursor: pointer; font-family: inherit; font-size: 70%; padding: 0.3%; margin: 0.2%; font-weight: bold;}
.daybtn {background: white; 
}
.daybtn1 {background: blue; color: white; 
}
@media (min-aspect-ratio: 1/1) { .daybtn, .daybtn1 { font-size: 85%; padding: 0.5%; margin: 0.3%;}
}
.linkbtn {color: white; background-color: green;
}
.linkbtn1 {color: #aaaaaa; background-color: #808080;
}
.linkbtn2 {color: white; background-color: blue;
}
#header {font-size: 4vw; color: white; background: #a0a080; margin-left: 2%; margin-top: 0%; padding: 0%; font-family: inherit; width: 100%;
}
@media (min-aspect-ratio: 1/1) {#header {font-size: 4vh; color: white; background: #a0a080; margin-left: 2%; padding: 0%; font-family: inherit; width: 68%; white-space: no-wrap;} 
}
.header1 {font-size: 240%; width 100%; color: white; background: #a0a080;
}
@media (min-aspect-ratio: 1/1) {.header1 {font-size: 300%; }
}
.button {margin-top: 0vh; border-top: 0vh;
}
.daylink {width:100%; height: 100%; background: #d0f0f0; color: #000000; font-size: 2.6vw; font-weight: bold;
}
@media (min-aspect-ratio: 1/1) {.daylink { font-size: 2.6vh;}
}
.linkbtn:hover, .linkbtn2:hover, .hidebtn1:hover {background-color: #808080;
}
.show {  display: block;
}
.large {font-size: 3vh; font-weight: bold; color: #f080f0;
}
.large1 {font-size: 3vh; font-weight: bold; color: #dddddd;
}
.large2 {font-size: 3vh; font-weight: bold; color: #000060;
}
.headbig {margin-top: 0%; font-size: 4.5vw; color: white; background: #a0a080; padding: 0%;
 font-family: inherit; text-align: center; display: block;
}
@media (min-aspect-ratio: 1/1) {.headbig { margin-left: 2%; margin-top: 0%; text-align: left;
 display: inline-block; font-size: 3.6vh;}
}
.headsml {margin-top: 0%; font-size: 3.5vw; color: white; background: #a0a080; font-family: inherit; text-align: center; display: block;
}
@media (min-aspect-ratio: 1/1) {.headsml {font-size: 2.8vh; color: white; background: #a0a080; margin-top: -2%; text-align: left; display: inline-block;}
}
.medium {font-size: calc(2vw + 3px); font-weight: bold; color: #e0e000;
}
@media (min-aspect-ratio: 1/1) {.medium {font-size: calc(2vh + 3px);}
}
.small {font-size: calc(1.7vw + 2px); font-weight: bold;
}
@media (min-aspect-ratio: 1/1) {.small {font-size: calc(1.7vh + 2px);}
}
a:hover {color:#e00000;
}
.album1, .album2, .album3, .album4, .albumblank {width: 22vh; height: 20vh; vertical-align: top; color: white; text-align: center; font-family: inherit; margin: 0vh; padding: 0.1vh; border: 0.2vh solid white; display: inline-block;
}
.album1 {background-color: #006000;
}
.album2 {background-color: #000060;
}
.album3 {background-color: #606000;
}
.album4 {background-color: #000060;
}
.albumblank {background-color: #404040;
}
.album1:hover, .album2:hover, .album3:hover, .album4:hover {background-color: #808080;
}
#map { position: absolute; top: 96px; left: 0px; height: 500px; width: 500px;
  border: solid black 1px;}
@media (min-aspect-ratio: 1/1) {#map { left: calc(50vw - 400px);}
}
#keybox { position: absolute; top:650px; left: 0px; width: 500px;
  background-color: #e0e0e0; border: solid black 1px;
}
@media (min-aspect-ratio: 1/1) {#keybox { top:34px; height: 562px; left: calc(50vw + 110px);
  width: 300px;}
}
.visible1 {visibility: collapse;
}
@media (min-aspect-ratio: 1/1) {.visible1 {visibility: visible; }
}
.visible2 {visibility: visible;
}
@media (min-aspect-ratio: 1/1) {.visible2 {visibility: collapse; }
}
#keyhead, { position: absolute; height: 30px; color: white; font-weight: bold;
 font-size: 120%; padding: 2px;
}
#keyhead { width: 498px; left: 0px; top: 620px; background-color: #606060;
}
@media (min-aspect-ratio: 1/1) {#keyhead { left: calc(50vw + 110px); top: 0px; width: 298px;}
}
#info { display: block; position: absolute; margin: 0px; top: 34px; left: 0px; width: 492px;
  height: 56px; padding: 5px; border: none; border-radius: 0 0 3px 3px; text-align: center;
  color: #fff; background: #333; font-size: 14px;}
@media (min-aspect-ratio: 1/1) {#info { left: calc(50vw - 400px);}
}
.keynorm { font-weight: normal; font-size: 16px; font-family: inherit;
}
.keylge { font-weight: bold; font-size: 20px; font-family: inherit; margin: 0px; color: #f0f0f0;
}
.keysml { font-weight: normal; font-size: 14px; font-family: inherit;
}
.maphd { font-weight: bold; font-size: 18px; font-family: inherit; margin: 0px; color: #f0f0f0;
}
#pic101, #pic102, #pic103, #pic104, #pic105, #pic106, #pic107, #pic108, #pic109,
#pic110, #pic111, #pic112, #pic113, #pic114, #pic115, #pic116, #pic117, #pic118, #pic119,
#pic120, #pic121, #pic122, #pic123, #pic124, #pic125, #pic126, #pic127, #pic128, #pic129,
#pic130, #pic131, #pic132, #pic133, #pic134, #pic135, #pic136, #pic137, #pic138, #pic139,
#pic140, #pic141, #pic142, #pic143, #pic144, #pic145, #pic146, #pic147, #pic148, #pic149,
#pic150, #pic151, #pic152, #pic153, #pic154, #pic155, #pic156, #pic157, #pic158, #pic159,
#pic160, #pic161, #pic162, #pic163, #pic164, #pic165, #pic166, #pic167, #pic168, #pic169,
#pic170, #pic171, #pic172, #pic173, #pic174, #pic175, #pic176, #pic177, #pic178, #pic179,
#pic180, #pic181, #pic182, #pic183, #pic184, #pic185, #pic186, #pic187, #pic188, #pic189,
#pic190, #pic191, #pic192, #pic193, #pic194, #pic195, #pic196, #pic197, #pic198, #pic199,
#pic200, #pic201, #pic202, #pic203, #pic204, #pic205, #pic206, #pic207, #pic208, #pic209,
#pic210, #pic211, #pic212, #pic213, #pic214, #pic215, #pic216, #pic217, #pic218, #pic219,
#pic220, #pic221, #pic222, #pic223, #pic224, #pic225, #pic226, #pic227, #pic228, #pic229,
#pic230, #pic231, #pic232, #pic233, #pic234, #pic235, #pic236, #pic237, #pic238, #pic239,
#pic240, #pic241, #pic242, #pic243, #pic244, #pic245, #pic246, #pic247, #pic248, #pic249,
#pic250, #pic251, #pic252, #pic253, #pic254, #pic255, #pic256, #pic257, #pic258, #pic259,
#pic260, #pic261, #pic262, #pic263, #pic264, #pic265, #pic266, #pic267, #pic268, #pic269,
#pic270, #pic271, #pic272, #pic273, #pic274, #pic275, #pic276, #pic277, #pic278, #pic279,
#pic280, #pic281, #pic282, #pic283, #pic284, #pic285, #pic286, #pic287, #pic288, #pic289,
#pic290, #pic291, #pic292, #pic293, #pic294, #pic295, #pic296, #pic297, #pic298, #pic299,
#full {
  display: none;}

#pic100, #norm {
  display: block;}