html {
    background-color: #d0e4ed;
    background-image: url(images/Seamless-Vintage-Paper-sml.jpg);
}

header a {
    text-decoration: none;
    color: #dcedf4;
}

body {
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.2rem;
    line-height: 1.3;
}


.page_content {
    padding: 1rem 3rem;
    max-width: 1440px;
    margin: 0 auto;
}

/* This section is the drop-down menu that appears in the desktop view within a multi-page trip report */
#storywrapper {
    font-family: Georgia, 'Times New Roman', Times, serif;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 0.9rem;
}

.storynav {
    background-color: rgba(192,231,252);
    border: 2px solid #77cbf9;
    border-radius: 5px;
    padding: 8px 15px;
    /* width: 100px; */
    text-align: center;
    display: block;
    position: relative;
}

.storynav a {
    color: black;
    text-decoration: none;
}

.dropdown-box { /* This turns the drop down off when not used */
    display: none;
    position: absolute;
    z-index: 99;
    /* padding-top: 11px; */
    margin-left: -1rem;
    margin-top: 10px;
}

.storynav:hover .dropdown-box { /* This class turns the dropdown menu on during hover */
    display: block;
}

/* .dropdown-box .storynav {
    background-color: rgba(192,231,252);
} */

.dropdown-box .storynav:hover {
    background-color: #77cbf9;
    transition-duration: 0.5s;
}

/* end of the storywrapper section */


h1 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 2.1rem;
    font-weight: bold;
    margin: 0.7rem 0 1.5rem 0;
}

h2 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 1.6rem;
    font-weight: bold;
    margin: 1.4rem 0 1.4rem 0;
}

h3 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 1.3rem;
    font-weight: bold;
    margin: 0.8rem 0 0.8rem 0;
}

em {
    font-style: italic;
    font-weight: bold;
}

.inlinebold {
    font-weight: bold;
}

strong {
    font-weight: bold;
}

blockquote {
    padding: 0.4rem 2rem 0.7rem 2rem;
    background-color: #d6e8f9;
    /* background-color: #d4e8fa; */
}

p {
    margin-top: 0.6rem;
}

p img {
    display: block;
    margin: 1rem auto 2rem auto;
    max-width: 100%;
    height: auto;
    border: 5px ridge black;
}

/* inlinepic is for those rare occasions when I want 2 small pictures side-by-side
    Make a division with class .inlinepic and then put images (no class) inside it */
.inlinepic {
    display: flex;
    margin: 1rem auto 2rem auto;
    justify-content: center;
}

.inlinepic img {
    display: inline;
    max-width: 100%;
    /* height: auto; */
    border: 5px ridge black;
}
/* end inline pic formating */

.video-link {
    border: 5px double black;
}

.album-link {
    border: 5px double black;
}

.betweenpics {
    height: 3rem;
}


/* This is for the pictures that change on hover */

.picchangecontainer {
    display: flex;
    justify-content: center;
    max-width: 1440px;
}

.secondpic {
    display: none;
}

.picchange {
    width: 100%;
}

.picchange img {
    width: 100%;
    height: auto;
}  

.picchange a:hover > .firstpic , .picchange a:active > .firstpic {
    display: none;
}

.picchange a:hover > .secondpic , .picchange a:active > .secondpic {
    display: block;
}
/* end of section for the pictures that change on hover */


.leemarkcarousel {
    display: flex;
    justify-content: center;
    margin-top: 0.8rem;
}


/* These are for embedded you-tube videos */
.iframecontainer {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
  }
  
.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: 5px double black;
}
/* end of embedded you-tube section */

/* This is the in-trip-report page listing at the bottom of a multi-page trip report */
#report-pages {
    min-height: 1.5rem;
    background-color: rgba(192,231,252);
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}

#report-pages p {
    padding: 1rem;
}

/* .col {
    width: 30%;
    margin-bottom: 40px;
    background-color: rgba(192,231,252));
} */

.col p {
    padding: 20px 25px;
    line-height: 1.25rem;
    /* background-color: rgb(161, 193, 211); */
    margin: 0.2rem 0.5rem;
}  


.updated {
    font-style: italic;
    margin-top: 2rem;
}

footer {
    margin-top: 1rem;
    padding: 5px 0;
    background: linear-gradient(to bottom, #182738 0%, #090e14 100%);
    color: #dcedf4;
    text-align: center;
}

footer a {
	text-decoration: none;
    color: #dcedf4;
    margin: 2px;
}

.narrow {
    display: none;
}

.fineprint {
    color: #dcedf4;
    font-size: .8rem;
    font-style: italic;
    padding: 0.25rem 2px 2px 2px;
    
	/* border-top-style: solid;
	border-top-width: 1px; */
}

/* Contact Form formating - can't get the php file working yet, though. */
.inputwrapper {
    margin-bottom: 30px;
}

input[type=text], input[type=email], textarea {
    padding: 12px 20px; 
    width: 100%;
    font-size: 0.85rem;
    box-sizing: border-box;
}

.newline {
    display: block;
    margin-bottom: 10px;
}

.margin-right-a {
    margin-right: 20px;
}

form {
    margin: 40px 0px;
}

/* input[type=radio] {
    margin-right: 10px;
} */

.mybutton {
    background-color: #d0e4ed;
    color: #000000;
    font-family: 'Playfair Display', serif;
    padding: 11px 25px;
    border-radius: 2px;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.228);
}

.mybutton:hover {
    background-color: #379efd;
    transition-duration: 0.8s;
}

/* end of Contact Form section */


/* Index page trip report box formating */

.main {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 20px;
}

.menubox {
    width: 30%;
    margin-bottom: 40px;
    margin-left: 5px;
    margin-right: 5px;
    background-color: rgba(129, 202, 247, 0.5);
    padding-bottom: 15px;
}

.yearhead {
    background-color: rgba(37, 132, 191, 0.5);
    text-align: center;
}

.descriptioncontainer {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* margin-bottom: 0.4rem; */
}

.monthcol {
    width: 28%;
    padding-left: 0.3rem;
}

.description {
    width: 68%;
    padding-right: 0.3rem;
}

/* end of index page trip report box formating */


/* Change to 2 across on the menu for medium-sized screens */
@media (max-width: 1050px){

    .menubox {
        width: 45%;
    }

}
/* end of medium-size screen adjustments */


/* Tablet view */
@media (max-width: 768px){

    .page_content {
        padding: 15px 2rem;
    }

    .wider {
        display: none;
    }

    .narrow {
        display: block;
    }

    #storywrapper {
        display: none;
    }
    
    .menubox {
        width: 100%;
    }

} /* end of tablet view */


/* mobile view */
@media (max-width: 400px){

    .page_content {
        padding: 13px 1rem;
    }

    footer, footer a {
        font-size: 0.9rem;
    }

} /* end of mobile view */