/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #D7D6BF;
    text-shadow: none;
}

::selection {
    background: #D7D6BF;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body
{
	border-style: none;
	margin: 0%;
	padding: 0;
	line-height: 25pt;
	font-family: "Gill Sans", "Verdana", "Times New Roman", "Times", "sans serif";
	font-size: 1em;
	font-style: italic;
	color: #993300;
	background-color: #D7D6BF;
}


h1 {
    font-size: 2.3em;
    font-weight: 300;
    color: #8D3300;
    text-shadow: 2px 2px 7px #CC9911;
    letter-spacing: 0.05em;
    line-height: 1em;
}
@media only screen and (max-width: 320px) {
  h1 { font-size: 2em; }
}
h2 {
    text-align: center;
    font-size: 1.8em;
    font-weight: 400;
    letter-spacing: 0.07em;
    color: #A7390E;
    line-height: 1em;
}
h3 {
    font-size: 1em;
    font-weight: 300;
    color: #6A1000;
    letter-spacing: 0.07em;
    line-height: 1.7em;
    border-bottom: 0px solid #C6EC8C;
}
h4
{
	font-size: 1.1em;
	font-weight: normal;
	line-height: 1.4em;
	color: #140D00;
}
h5 {

    font-size: 1.4em;
    font-weight: 300;
    letter-spacing: 0.05em;
    color: #3C0707;
    line-height: 1.3em;
    border-bottom: 0px solid #C6EC8C;
    font-style: italic;
}



/* trying stuff   */

/*  Scrolling show     */
.container-scroll {

    background: #4d0f00;
    margin:auto;
    margin-top: ;
    padding: 20px 0px;
    max-width: 1100px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
/*...
body {font-family: Verdana, sans-serif;}

/* scrolling container */
.scrolling-container {
  position: relative;
  margin: auto;
    padding: 40px 0px;
  text-align: center;
  }

* {box-sizing: border-box;}
.myScroll img {
    vertical-align: middle;
    height:auto;
    max-width: 90%;
 border: 10px #eabe98 ridge;
 }




/*  Slideshow     */
* {box-sizing: border-box;}
.mySlides {display: none;}
.mySlides img {
    vertical-align: middle;
    max-height:850px;
    width: 90%;
    max-width: 566px;
 border: 10px #eabe98 ridge;
 }
.container-fluidSlideshow {

    background: #4d0f00;
    margin:auto;
    padding: 20px 0px;
    max-width: 1100px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);

}

/*...
body {font-family: Verdana, sans-serif;}

/* Slideshow container */
.slideshow-container {
  width: auto;
  position: relative;
  margin: auto;
  text-align: center;
  }


/* Caption text */

.text {
  color:  #eabe98;
  font-size: 1.1em;
  padding: 8px 12px;
  position: relative;
  width: 100%;
  text-align: left;
  top: 10%;
}

/* Number text (1/3 etc) */
.numbertext {
  color:  #eabe98;
  font-size: 12px;
  padding: 0px 0px;
  position: relative;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #4d3900;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 0.7s;
  animation-name: fade;
  animation-duration: 0.7s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}




  /* Tooltip on top */
  .tips + .tooltip.top > .tooltip-arrow {
    border-top: 5px solid green;
  }
  /* Tooltip on bottom */
  .test + .tooltip.bottom > .tooltip-arrow {
    border-bottom: 5px solid blue;
  }
  /* Tooltip on left */
  .test + .tooltip.left > .tooltip-arrow {
    border-left: 5px solid red;
  }
  /* Tooltip on right */
  .test + .tooltip.right > .tooltip-arrow {
    border-right: 5px solid black;
  }



h3  {
  color: #561210;
  }

.photo {
  float: right;
	padding: 0.5em;
	padding-top: 2em;
	padding-left: 2em;
  }

  #pageThumb
{
	position: static;
	padding: 0.5em;
}
#pageThumb a img { border: 2px #D7D6BF solid; }
#pageThumb a:hover img {  border: 2px #FFD300 ridge; }
#pageThumb a:visited img {border: 2px #D97D02 inset;  }
#pageThumb a:active img { border: 2px #FA0 inset; }

 .responsive {
  max-width: 100%;
  height: auto;
}
.map{
  height: 460px;
  }

#relative {
  position: relative;
	padding: 1%;
  margin-bottom: 5%;
}



/*--------- logos footer etc---------*/
#header
{
	top: 0px;
	left: 0%;
	border-bottom: 1px dotted #D0FFD0;
	padding: 1%;
	text-align: center;
	width: 100%;
	background-color: #D7D6BF;
	position: relative;

}
#stoneheader
{
	top: 0px;
	left: 0%;
	border-bottom: 1px dotted #D0FFD0;
	padding: 0.5% 2%;
	text-align: center;
	width: 100%;
	background-color: #D7D6BF;
	position: relative;
  transition: top 0.3s;
     z-index: 2;
  }

#Scrollheader  {
	top: 0px;
	left: 0%;
  z-index: 1;
	border-bottom: 1px dotted #D0FFD0;
	padding: 0.5% 2%;
	text-align: center;
	width: 100%;
	background-color: #D7D6BF;
	position: fixed;
  transition: top 0.3s;
  }

#myTopnav
{
	background-color: #D7D6BF;
}

 /* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 0.25em  1em;
  text-decoration: none;
  font-size: 1em;
}

/* Add an active class to highlight the current page */
.active {
  background-color: #4CAF50;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 0.25em  1em;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #D7D6BF;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: #993300;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}


/* John Style the links inside the dropdown in gallery inline */
#header .dropdown-content a {
  display: inline;
}
.inline a {
  display: inline;
  padding: 10px;
}
.well a:hover {
  background-color: #aaaa88;
  transition: 0.6s ease;
  padding: 10px;
  }

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
  transition: 0.6s ease;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #aaaa88;
  color: #993300;
  transition: 0s;
  }

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
  transition: 0.6s ease;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
  .topnav.responsive .dropdown .inline a{ display: inline;}
  }

.barInsert {
    width: 50%;
    float: none;
    text-align: centre;
  	background-color: #D7D6BF;
  }

/* GalleryChoice selection buttons   */


/* The "show" class is added to the filtered elements */
.show {
  display: inline;
}

/* Style the buttons */

.btn {
  outline: none;
  padding: 6px 6px;
  color:  white;
  background-color: #b8b894;
  cursor: pointer;
  border: 1px dotted #D0FFD0;

}

/* Add a grey background color on mouse-over */
.btn:hover {
	color:#ff6633;
	background:#3e3e28;
	border:1px solid #FFCC00;
}

/* Add a dark background color to the active button */
.btn.active {
  background-color: #666;
   color: #e6ffff;
}





#footer
{
	clear: both;
	bottom: 8px;
  left:8px;
	width: 99%;
	font-size: .9em;
	color: #61E969;
	text-align: center;
	line-height: 1em;
	border-top: 1px dotted #D0FFD0;
	padding-top: .3em;
	padding-bottom: 1.3em;
	position: relative;
}

#footer
{
	filter: alpha(opacity=80);
	opacity: 0.8;
	background: #3A3A33;
}




/*-------gallery--------*/

#gallery
{
	position: relative;
	margin-top: 4%;
	margin-bottom: 2%;
	width: 100%;
	text-align: center;

	padding-right: 2%;
	padding-left: 2%;
}

@media only screen and (max-width: 320px) { #gallery
{
	margin-top: 20%;
	}	}
@media only screen and (max-width: 1024px) { #gallery
{
	margin-top: 10%;
	}	}

/* scrolling gallery affordances*/

a .gallery_itemvert
{
	margin-left: 6px;
	margin-right: 6px;
	margin-top: 14px;
	margin-bottom: 14px;
	border: 2px solid #D7D6BF;
}

a .gallery_itemhoriz
{
	margin-left: 2%;
	margin-right: 2%;
	margin-top: 2%;
	margin-bottom: 3%;
	border: 2px solid #D7D6BF;
}

a:hover .gallery_itemvert, a:hover .gallery_itemhoriz { border: 2px #f7c176 ridge; }
a:visited .gallery_itemvert, a:visited .gallery_itemhoriz { border: 2px #d9b08c inset; }

a:active .gallery_itemvert,	a:active .gallery_itemhoriz
{
	text-decoration: none;
	font-weight: bold;
	color: #D7D6BF;
	background-color: #D7D6BF;
	border: 1px inset #FFAA00;
}

a
{
	text-decoration: none;
	color: #CF2200;
	outline: 0;
}

a:hover
{
	text-decoration: none;
	color: #FFB900;
}

a.offsite
{
	text-decoration: none;
	font-weight: normal;
	color: #CCCC99;
	background: #CCCC99;
}


/* End Gallery Styles */

/* Stonepages */


#FloaterText  {
  position: absolute;
      	padding: 5%;
  }

  #FloaterBottomText {
    display: none;
}

/* When the screen is less than 1000 pixels wide, hide #FloaterText, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 1000px) {
  #FloaterText:not(:first-child)  {
    display: none;
  }
  #FloaterBottomText {
    display: block;
  position: relative;
	padding-top:1em;
	padding-bottom: 2em;
	font-size: 1em;
	font-style: italic;
	color: #993300;
	background-color: #D7D6BF;
  text-align: center;
  }
}

  /* scroll pages  */

#ScrollFloaterText  {
    position: absolute;
    top: 8px;
	  padding: 2%;
    color:#cc4400;
    font-size: 1.2em;
}

  #ScrollFloaterBottomText  {
    background-color: #4d0f00;
    color:#cc4400;
    font-size: 1.2em;
}
  #ScrollFloaterBottomText  h3 {
    color: #eabe98;
}
#ScrollFloaterText   h3 {
    color: #eabe98;
}



  #ScrollFloaterBottomText {
    display: none;
}

/* When the screen is less than 1000 pixels wide, hide #ScrollFloaterText, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 1000px) {
  #ScrollFloaterText:not(:first-child)  {
    display: none;
  }
  #ScrollFloaterBottomText {
    display: block;
	font-size: 1.2em;
	position: relative;
	padding-top:1em;
	padding-bottom: 2em;
	font-size: 1em;
	font-style: italic;
	color:#cc4400;
	background-color: #4d0f00;
	text-align: center;
  }
}


#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 30px;
  z-index: 99;
  font-size: 1 em;
  border: 1px dotted #D0FFD0;
  outline: none;
  background-color: rgba(0,0,0,0.1);
  color: #ffcc99;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #4CAF50;
}



#colcenterv {
  width: 100%;
  max-height: 100%;
  height:900px;
	float: left;
	padding-top:0%;
	padding-bottom: 2%;
	text-align: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center
}


#padder {
       	height: 100%;

  }


 #colcenterv a {
        position: absolute;
       	height: 100%;
      	padding: 5%;
        padding-top: 0%;
        padding-bottom: 1%;
        max-height: 850px;
        max-width: 100%;
}

#colcenterv a img { border: 10px #eabe98 ridge; }
#colcenterv a:visited img { border: 10px #d9b08c ridge; }
#colcenterv a:hover img { border: 10px #f7c176 ridge; }
#colcenterv a:active img { border: 10px #FFFEEA solid; }
@media only screen and (max-width: 320px) {#colcenterv a img
{
	width: 95%;
	height: inherit;
}
}

#infocenter
{
	width: 75%;
	float: left;
	padding-top: 20;
	text-align: left;
	margin-left: 19%;
	margin-top: 0em;
	padding-bottom: 0%;
}


/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 70%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: #ffcc99;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color: rgba(0,0,0,0.1);
}

/* Position the "next button" to the right */
.next {
  right: 7%;
  border-radius: 3px 0 0 3px;
}

.prev {
  left: 7%;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
/* When the screen is less than 900 pixels wide,  */
@media screen and (max-width: 900px) {
.prev, .next {
  color: #ffcc99;
}
}
/* When the screen is less than 600 pixels wide,  */
@media screen and (max-width: 600px) {
.prev, .next {
  color: #ffcc99;
  background-color: rgba(0,0,0,0);
}
}











/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster */
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}