

/* If the screen size is 551px or more */
@media only screen and (min-width: 551px) {
  BODY {
    color: #666666;
    background-color: #FAFAFA;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size:x-small;
    margin-top: 10px;
    text-align:center;
    min-width: 500px;
  }
  .rcMainDiv{
    max-width:450px;
    width: calc(100% - 20px);
    background:#ffffff;
    margin: auto;
    padding:20px;
    border-radius:25px;
    border:solid 1px #cccccc;
  }
  .rcMainDivGallery{
    max-width:450px;
    width: calc(100% - 20px);
    background:#ffffff;
    padding:20px;
    border-radius:25px;
    border:solid 1px #cccccc;
    margin: auto;
  }
  .divOM{
    max-width:600px
  }
  .footerDiv{
      max-width:450px;
      margin:auto;
      padding:5px;
  }
  .footerDivMenuContent{
    text-align:center;
  }
  .infoText{
    font-family: Verdana, Helvetica, Arial, sans-serif;
    color: #666666;
    font-size: xx-small;
    text-align: justify;
    padding-bottom:8px;
    padding-left:10px;
    padding-top:5px;
    padding-right:80px;
  }
  .infoText_sublink_rows1{
    font-size: xx-small;
    float:right;
    margin-top:3px;
    margin-left:-30px;
    padding-bottom:10px;
  }
  .infoText_sublink_rows2{
    font-size: xx-small;
    float:right;
    margin-top:12px;
    margin-left:-30px;
  }
  .infoText_sublink_rowsManual{
    font-size: xx-small;
    float:right;
    /*margin-top:21px;*/
    margin-left:-30px;
  }
  .tableNoMargin_width{
  }
  .imgIndexFade_colour_width{
    width:50px;
    height:50px;
  }
}

/* If the screen size is between 390px and 550px */
@media only screen and (min-width: 391px) and (max-width: 550px) {
  BODY {
    color: #666666;
    background-color: #FAFAFA;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size:x-small;
    margin-top: 10px;
    text-align:center;
    /*min-width:390px;*/
  }
  .rcMainDiv{
    max-width:350px;
    width: calc(100% - 20px);
    background:#ffffff;
    margin: auto;
    padding:10px;
    border-radius:25px;
    border:solid 1px #cccccc;
  }
  .rcMainDivGallery{
    max-width:350px;
    width: calc(100% - 20px);
    background:#ffffff;
    padding:10px;
    border-radius:25px;
    border:solid 1px #cccccc;
    margin: auto;
  }
  .footerDiv{
      max-width:350px;
      width: calc(100% - 20px);
      margin:auto;
      padding-top:5px;
      padding-left:25px;
      padding-right:25px
  }
  .footerDivMenuContent{
    text-align:center;
  }
  .infoText{
    font-family: Verdana, Helvetica, Arial, sans-serif;
    color: #666666;
    font-size: xx-small;
    text-align: justify;
    padding-bottom:8px;
    padding-left:10px;
    padding-top:5px;
    padding-right:10px;
  }
  .infoText_sublink_rows1{
    font-size: xx-small;
    float:right;
    margin-top:3px;
    margin-left:-30px;
    padding-bottom:10px;
    display:none;
  }
  .infoText_sublink_rows2{
    font-size: xx-small;
    float:right;
    margin-top:12px;
    margin-left:-30px;
    display:none;
  }
  .infoText_sublink_rowsManual{
    font-size: xx-small;
    float:right;
    /*margin-top:21px;*/
    margin-left:-30px;
    display:none;
  }
  .tableNoMargin_width{
    width:100%;
  }
  .imgIndexFade_colour_width{
    width:100%;
    /*height:100%;*/
  }
}


/* If the screen size is 390px or less */
@media only screen and (max-width: 390px) {
  BODY {
    color: #666666;
    background-color: #FAFAFA;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size:x-small;
    margin-top: 10px;
    text-align:center;
    /*min-width: 290px;*/
  }
  .rcMainDiv{
    /*max-width:260px;*/
    /*width: calc(100% - 5px);*/
    background:#ffffff;
    margin: auto;
    padding:10px;
    border-radius:25px;
    border:solid 1px #cccccc;
  }
  .rcMainDivGallery{
    /*max-width:260px;*/
    /*width: calc(100% - 5px);*/
    background:#ffffff;
    padding:10px;
    border-radius:25px;
    border:solid 1px #cccccc;
    margin: auto;
  }
  .footerDiv{
    /*max-width:260px;*/
    margin:auto;
    padding-top:5px;
    padding-left:25px;
    padding-right:25px
  }
  .footerDivMenuContent{
    display:none;
  }
  .infoText{
    font-family: Verdana, Helvetica, Arial, sans-serif;
    color: #666666;
    font-size: xx-small;
    text-align: justify;
    padding-bottom:8px;
    padding-left:10px;
    padding-top:5px;
    padding-right:10px;
  }
  .infoText_sublink_rows1{
    font-size: xx-small;
    float:right;
    margin-top:3px;
    margin-left:-30px;
    padding-bottom:10px;
    display:none;
  }
  .infoText_sublink_rows2{
    font-size: xx-small;
    float:right;
    margin-top:12px;
    margin-left:-30px;
    display:none;
  }
  .infoText_sublink_rowsManual{
    font-size: xx-small;
    float:right;
    /*margin-top:21px;*/
    margin-left:-30px;
    display:none;
  }
  .tableNoMargin_width{
    width:100%;
  }
  .imgIndexFade_colour_width{
    width:100%;
    /*height:100%;*/
  }
}



BODY.whiteBackground {
background-color: white;
}


P{
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #ffffff;
font-size:x-small;
text-align:justify;
}


.blockTitle {
font-family: "Palatino Linotype", Georgia, "Times New Roman", serif;
color: #669966;
font-size: medium;
text-align:left;
}

.blockTitle_smaller {
font-family: "Palatino Linotype", Georgia, "Times New Roman", serif;
color: #669966;
font-size: small;
text-align: left;
}

.blockTitle_floatLeft{
font-family: "Palatino Linotype", Georgia, "Times New Roman", serif;
color: #669966;
font-size: medium;
text-align:left;
float:left;
padding-bottom:2px;
background-color:transparent;
}

.blockTitle_smaller_floatLeft{
font-family: "Palatino Linotype", Georgia, "Times New Roman", serif;
color: #669966;
font-size: small;
text-align:left;
float:left;
padding-bottom:2px;
background-color:transparent;
}
.titleLinks{
padding-right:5px;
padding-top:8px;
font-size:7pt;
float:right;
padding-bottom:2px;
background-color:transparent;
}

.mapHolderMain{
padding-top:0.5em;
padding-bottom:1em;
background-color:transparent;
width:100%;
}

.mapHolder{
background-color:transparent;
width:100%;
}

.mapPanel{
background-color:#c0c0c0;
text-align:center;
margin: 0 auto;
padding-top:0px;
border-radius:5px;
max-width:420px;
height:400px;
}

.mapPanelMain{
background-color:#c0c0c0;
text-align:center;
margin: 0 auto;
padding-top:0px;
/*border: solid 1px silver;*/
border-radius:5px;
width:260px;
height:210px;
}


.mapText{
/*
padding-top:10px;
padding-bottom:0px;
padding-right:40px;
padding-left:40px;
text-align:justify;
*/
padding-top:0px;
padding-bottom:10px;
padding-right:30px;
padding-left:30px;
text-align:justify;
margin: 0 auto;
background-color:transparent;
}

.mapTextBorder{
width:100px;
border-top:1px solid green;
height:1px;
text-align:center;

}


.gallery_textTop{
padding-bottom:10px;
padding-right:30px;
padding-left:30px;
text-align:justify;
margin: 0 auto;
margin-top:34px;
background-color:transparent;
}

.gallery_text{
padding-bottom:10px;
padding-right:30px;
padding-left:30px;
text-align:justify;
margin: 0 auto;
background-color:transparent;
}

.gallery_titleImage{
padding-bottom:10px;
padding-right:30px;
padding-left:30px;
text-align:center;
margin: 0 auto;
background-color:transparent;
}

.img_url{
width: 10px;
height: 10px;
vertical-align: middle;
border: none;
padding-bottom: 1px;
}


.blockText {
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #666666;
font-size: x-small;
text-align: justify;
}

.blockText_smaller {
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #666666;
font-size: xx-small;
text-align: justify;
}

.normaltxt{
	font-weight:normal;
	font-size:11px;
}

.topCDiv{
padding-top:10px;padding-bottom:6px;padding-right:0px;padding-left:10px;text-align:left;
}
.subsCDiv{
padding-top:3px;padding-bottom:6px;padding-right:0px;padding-left:10px;text-align:left;
}
.bottomCDiv{
padding-top:3px;padding-bottom:0px;padding-right:0px;padding-left:10px;text-align:left;
}

.blockText_smallerCenter {
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #666666;
font-size: xx-small;
}

.blockText_smallerRight {
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #666666;
font-size: xx-small;
text-align: right;
}

.blockText_smallerLeft {
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #666666;
font-size: xx-small;
text-align: left;
}



.iTGallery{
padding-top:2px;
}

/* sublink under an infotext... */
/* top margin dependent on number of rows in infoText */



.infoText_pre{
font-size: xx-small;
margin-top:3px;
padding-bottom:10px;
text-align:left;
}

hr {
height: 1px;
border-bottom-color: #c0c0c0;
border-bottom-style: dashed;
border-bottom-width: thin;
border-right: none;
border-left: none;
border-top: none;
}

hr.pale {
height: 1px;
border-bottom-color: #eeeeee;
border-bottom-style: dashed;
border-bottom-width: thin;
border-right: none;
border-left: none;
border-top: none;
}

TD{
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #666666;
}

TD.whiteBackground{
background-color: #ffffff;
}

TD.textSmallPale {
color: #c0c0c0;
font-size: xx-small;
}

TD.textPale {
color: #c0c0c0;
font-size: x-small;
}

.textSmallPale {
color: #c0c0c0;
font-size: xx-small;
}

.textPale {
color: #c0c0c0;
font-size: x-small;
}

SPAN.galleryNavDot{
color: #666666;
text-decoration: none;
}

SPAN.blockTitle_Dot{
color: #666666;
}

.ampText{
font-size: xx-small;
}

.smallerText{
font-size: xx-small;
}



/* Anchor Styles */

.dupLink{
color: #669966;
}
.dupLink.moseover{
color: #669966;
text-decoration: underline;
}


A:link {
color: #669966;
text-decoration: none;
}

A:active {
color: #669966;
text-decoration: none;
}

A:visited {
color: #669966;
text-decoration: none;
}

A:hover {
color: #669966;
text-decoration: underline;
}

A:link.navbar {
color: #666666;
text-decoration: none;
}

A:active.navbar {
color: #666666;
text-decoration: none;
}

A:visited.navbar {
color: #666666;
text-decoration: none;
}

A:hover.navbar {
color: #666666;
text-decoration: underline;
}

A:link.navbarBottom {
color: #c0c0c0;
text-decoration: none;
}

A:active.navbarBottom {
color: #c0c0c0;
text-decoration: none;
}

A:visited.navbarBottom {
color: #c0c0c0;
text-decoration: none;
}

A:hover.navbarBottom {
color: #c0c0c0;
text-decoration: underline;
}


A:link.blockLink {
color: #666666;
text-decoration: none;
}

A:active.blockLink {
color: #666666;
text-decoration: none;
}

A:visited.blockLink {
color: #666666;
text-decoration: none;
}

A:hover.blockLink {
color: #666666;
text-decoration: underline;
}


IMG.thinBorder {
margin: 0 auto;
border: 1pt #666666 solid;
text-align:center;
display:block;
}

.imgIndexFade_colour{
/*
padding-top:1px;
padding-left:1px;
*/
padding:0px;
border:none;
margin:0px;
display:block;

filter:alpha(opacity=1);
opacity:0.01;
-moz-opacity:0.01;

}


.imgIndexFade_td{
  max-width:50px;
  max-height:50px;
  margin:0px;
  padding:0px;
  border:1px #cccccc solid;
  background-repeat:no-repeat;
  background-position:0px 0px;
  text-align:left;
  vertical-align:top;
}


.imgTitleFade{
padding:0px;
margin:auto;
display:block;
border:none;
filter:alpha(opacity=1);
opacity:0.01;
-moz-opacity:0.01;
border-radius:5px;
width: 100%;
}

.imgTitleFade_div{
padding:0px;
margin:auto;
/*border:1px #555555 solid;*/
/*background-position:0px 0px;*/
text-align:left;
vertical-align:top;
border-radius:5px;
object-fit: contain;
background-size: contain;
background-repeat: no-repeat;
max-width: 100%;
width:calc(100% - 40px);

}


.imgH2Class{
font-size:x-small;
font-weight:normal;
}

.imgCounter{
font-size:x-small;
font-weight:normal;
color:#aaa;
float:right;
}

/* Full-resolution expand icon in FancyBox caption */
a.full-res-link {
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
  opacity: 0.45;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s;
}
a.full-res-link:hover {
  opacity: 1;
  text-decoration: none;
}

/* Full-resolution overlay (sits above FancyBox z-index ~99992) */
#fullResOverlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.92);
  z-index: 99999;
  cursor: pointer;
}
#fullResOverlay.open {
  display: flex;
  align-items: center;
  justify-content: center;
}
#fullResImg {
  max-width: calc(100vw - 60px);
  max-height: calc(100vh - 60px);
  object-fit: contain;
  cursor: default;
  display: block;
}
#fullResCloseBtn {
  position: absolute;
  top: 12px;
  right: 18px;
  color: #fff;
  font-size: 2em;
  line-height: 1;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.2s;
  user-select: none;
}
#fullResCloseBtn:hover { opacity: 1; }


.footerDivDate{
  float:left;
  text-align:left;
  width:20%;
}

.footerDivMenu{
  float:left;
  width:60%;
  text-align:center;
}

.footerDivCopyright{
  float:right;
  width:20%;
  text-align:right;
}


.imageCaptions{
  display:none;
  width:3px;
  height:3px;
  overflow:hidden;
  margin:10px;
}

.pageExtender{
  display:block;
  width:3px;
  height:2px;
  vertical-align:bottom;
}

.topMenu{
  text-align:center;
  font-size:7pt;
  padding-bottom:5px;
}

.rightHMenu{
  padding:8px 5px 5px 0;
  font-size:7pt;
  float:right;
}

.imgMenu{
  text-align:center;
  margin: auto;
  padding-top:8px;
}

.floatLPad{
  float:left;
  padding-top:5px;
  padding-bottom:5px;
}

.padTop10{
  padding-top:10px;
}

.tableNoMargin{
  margin:auto;
  border:none;
  border-spacing: 4px;
  table-layout:fixed;
}


.col666{
  color:#666666;
}

/* ref: https://developers.google.com/maps/documentation/javascript/examples/control-replacement */
.gm-style .controls {
font-size: 28px;  /* this adjusts the size of all the controls */
background-color: white;
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
box-sizing: border-box;
border-radius: 2px;
cursor: pointer;
font-weight: 300;
height: 1em;
margin: 6px;
text-align: center;
user-select: none;
padding: 2px;
width: 1em;
}
.gm-style .controls button {
  border: 0;
  background-color: white;
  color: rgba(0, 0, 0, 0.6);
}
.gm-style .controls button:hover {
  color: rgba(0, 0, 0, 0.9);
}

.gm-style .controls.zoom-control {
  display: flex;
  flex-direction: column;
  height: auto;
}
.gm-style .controls.zoom-control button {
  font: 0.6em Arial;
  margin: 1px;
  padding: 0;
}

.gm-style .controls.maptype-control {
  display: flex;
  flex-direction: row;
  width: auto;
}
.gm-style .controls.maptype-control button {
  display: inline-block;
  font-size: 0.5em;
  margin: 0 1px;
  padding: 0 6px;
}
.gm-style .controls.maptype-control.maptype-control-is-map .maptype-control-map {
  font-weight: 700;
}
.gm-style .controls.maptype-control.maptype-control-is-satellite .maptype-control-satellite {
  font-weight: 700;
}

/* Touch devices: always show colour images at full opacity (hover effects don't apply) */
@media (hover: none) {
  .imgTitleFade {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  .imgIndexFade_colour {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}

