/* The Michel Page */

* {
    font-family: Verdana, Tahoma, sans-serif;
    box-sizing: border-box;
}

body {
    /* padding: 3px 6px 3px 3px; */
    padding: 1px 1px 1px 1px;
    display: absolute;
}

h1, h2, h3, h4, h5, h6 {
    color: navy;
}

h1 {
    font-size: xx-large;
    margin-top: 5px;
    margin-bottom: 5px;
}

h2 {
    font-size: x-large;
    margin-top: 4px;
    margin-bottom: 4px;
}

h3 {
    font-size: large;
    margin-top: 3px;
    margin-bottom: 3px;
}

h4 {
    font-size: medium;
    margin-top: 2px;
    margin-bottom: 2px;
}

div#answer, .answer, span#answer {
    margin-top: 0;
    font-size: 18px;
    color: navy;
    cursor: pointer;
}

div#answer2 a span {
	display: none;
}

div #answer2 span {
	display: block;
	position: relative; 
    top: -15px; 
    left: 80px; 
    width: 300px;
	padding: 0px;
    margin: 0px; 
    z-index: 0;
	text-decoration: none; 
    color: black;
	font: 12px Verdana, sans-serif;
    text-align: left;
}

.button {
    color: navy;
    text-align: center;
    vertical-align: middle;
}

/* full size */
iframe.video, .video, iframe.videoC, .videoC {
    width: 560px;
    height: 315px;
}
iframe.videoC, .videoC {
    margin: auto;
    display: block;
}

table {
    border: 0px;
}

/* for photo slideshow display - text below it */
.caption {
    color: navy;
    background-color: rgba( 255, 255, 255, 0.8 ); /* white; */
    vertical-align: bottom;
}

/* for photo slideshow display  */
.prev, .next {
    cursor: pointer;
    border: 1px solid lightgray;
    align-content: center;
    text-align: center;
    width: 7%;
}

/* for photo slideshow display */
.prev:hover, .next:hover {
    cursor: pointer;
    background-color: palegreen;
    opacity: 90%;
}

/* for photo slideshow display */
.arrows {
    font-size: xx-large;
    font-stretch: ultra-condensed;
    color: navy;
    background-color: rgba( 255, 255, 255, 0.5 ); /* white; */
}

th, tr, td {
    border: 0px black;
    border-spacing: 0px;
    padding: 0px;
}

table.phototable {
    border: 2px solid navy; /* solid black */
    border-spacing: 1px;
    width: 75%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 1px;
    background-repeat: no-repeat;
    background-position: center top;
}

td.phototable {
    /* don't / not used for ARROWS, PREV, or NEXT */
    align-content: center;
    text-align: center;
    vertical-align: bottom;
    height: 220px;
    padding: 0px;
    border-spacing: 0px;
}

table.outline, table.outlinenarrow {
    border: 2px solid navy;
    border-spacing: 1px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 1px;
}

table.outline {
    margin-left: auto;
    width: 80%;
}
    
th.outline {
    background-color: navy; /* powderblue; */
    color: white;
    font-weight: bold;
    text-align: center;
}

tr.outline:nth-child(odd) {
    padding-left: 10px;
    background: lightblue;
}

td.outline {
    align-content: center;
    text-align: center;
}

td.outlineL {
    align-content: left;
    text-align: left;
}

.photo {
    vertical-align: middle;
    text-align: center;
    width: 500px;
    border: 1px;
    border-style: double;
}

.thumb, .thumbC, .thumbNarrow, .thumbNarrowC {
    border-style: none;
    border: 0px;
}

.thumb {
    width: 175px;
}

.thumbC {
    display: block;
    margin: auto;
    width: 175px;
}

.thumbNarrow, .thumbNarrowC {
    display: block;
    margin: auto;
    width: 300px;
}

/* mostly for the state flags on the Capitals page */
.thumbTiny, .thumbTinyC {
    border-style: none;
    border: 0px solid white;
    width: 18px;
    z-index: 1;     // title = 999; thumbnail = 99; page text = 0;
}
/* mostly for the state flags on the Capitals page */
.thumbTiny {
    float: left; /* none */
}
/* mostly for the state flags on the Capitals page */
.thumbTinyC {
    float: none; /* none */
}

.spanThumb {
    /* NO FORMATTING, used for display */
}

.top {
    text-align: center;
    font-size: small;
}

.listing {
    border-bottom: 2px solid lightgray;
}

.sticky {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 999;
}

.linklist {
    text-align: center;
}

.centertext, .centertextV {
    align-content: center;
    text-align: center;
    display: block;
    margin: auto;
    margin-left: auto;
    margin-right: auto;
}

.lefttext {
    text-align: left;
}

.centertextV {
    vertical-align: middle;
}

.hideme {
    display: none;
    visibility: hidden;
}

.showme {
    display: inline;
    visibility: visible;
}

.showNarrow { /* showNarrow when screen is small, and hide showWide too*/
    display: none;
    visibility: hidden;
}

.showWide {
    display: inline;
    visibility: visible;
}

.imgmap, .TravelMap, .travelmap { /* for VRC Images with maps WIDE */
    width: 480px;
    height: 270px;
}


/* NEW IMAGE DISPLAY  */
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {
    opacity: 0.7;
}


/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover, .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}


/* http://www.wickham43.net/hoverpopups.php */
/* Source image WIDE = 400px; TALL = 225px */

p, br {     /* reset for P tag due to funky formatting */
    clear: both;
}

.reset {    /* reset for P tag due to funky formatting */
    clear: both;
}

.thumbnail {
    float: left;
}

.thumbnailR {
    /* float: right; */
}

.thumbnailC {
    display: inline-block;
    float: center;
}

.thumbnail, .thumbnailC, .thumbnailR, .thumbnailT { /* for the smaller images that get hovered over with a mouse on a WIDE screen */
    position: relative;
    padding: 5px;
}

.thumbnail, .thumbnailC, .thumbnailR {
    border: 1px solid white;
}

.thumbnailT {
    border: 0px solid white;
}

.thumbnail:hover, .thumbnailC:hover, .thumbnailR:hover { /* highlight around thumb */
    background-color: #e9e9e2;
    color: #335500;
    text-decoration: none;
    border: 1px solid blue;
}

.thumbnail span, .thumbnailC span, .thumbnailR span { /* CSS for enlarged image */
    position: absolute;
    background-color: #e5e5e5;
    padding: 5px;
    border: 1px solid #666;
    visibility: hidden;
    color: black;
    text-decoration: none;
}

.thumbnail span img, .thumbnailC span img, .thumbnailR span img { /* CSS for enlarged image */
    border-width: 0px;
}

.thumbnail:hover span, .thumbnailC:hover span, .thumbnailR:hover span { /* CSS for enlarged image on hover */
    -moz-box-shadow: 1px 1px 5px 6px #ccc;
    -webkit-box-shadow: 1px 1px 5px 6px #ccc;
    box-shadow: 1px 1px 5px 6px #ccc;
    visibility: visible;
    top: 30px;      /* was 5, then was 20; use IF IE6 style to correct IE6 positions of larger image relative to thumb */
    left: 190px;    /* was 150, then was 90; position where enlarged image should offset horizontally */
    z-index: 99;    /* 12/19 new: force span to be on top */
}
 
/* help icon */
.infoIcon {
    width: 15px;
    height: 15px;
}

.jumpTo {
    color: white;
    background-color: navy; /* grey; */
    cursor: pointer;
}

.jumpTo:hover {
    color: navy;
    background-color: tan;
}

/* for history list display and other lists for Admin maintenance */
.itemMaintenance, .itemMaintenanceC {
    text-decoration: underline;
    color: blue;
    cursor: pointer;
}

.itemMaintenance {
    text-align: center;
}

/* for the Admin Feedback display */
.feedbackapprovedy {
    vertical-align: middle;
    background-color: lawngreen;
    font-weight: bold
}

.feedbackapprovedn {
    vertical-align: middle;
    background-color: red;
    color: white;
}

.pointer {
    cursor: pointer;
}

.largest {
    font-size: xx-large;
}
.larger {
    font-size: x-large;
}
.smaller {
    font-size: smaller;
}

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


/* new frameset definitions */
header {
    width: 100%;
    padding: 0px 2px 1px 2px;
    text-align: center;
    font-family: titleFont;
}

header a, header a:hover, header a:visited, header a:active {
    font-size: calc(16px + 4vw);
    font-family: Diner, 'Comic Sans MS', Tahoma, Georgia, Verdana, Arial, sans-serif;
    text-decoration: none;
    padding: 0px; /* 0px 1px 1px 1px; */
    color: navy;
}

section::after {
    content: "";
    display: table;
    clear: both;
}

nav {
    text-align: center;
    width: 108px;
    float: left;
    padding: 1px 2px 4px 2px; /* 2px */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: white;
}

    nav a, nav a:link, nav a:hover, nav a:visited, nav a:active {
        display: block;
        width: 85px;
        font-weight: normal;
        font-size: 10pt;
        font-family: Tahoma, Verdana, Arial, sans-serif;
        text-decoration: none;
        text-align: center;
        padding: 1px;
        border: outset;
        -webkit-text-fill-color: white;     /* rgba( 255, 255, 255, 1) */
        -webkit-opacity: 1;
        -webkit-appearance: none;
        color: white;                       /* rgba( 255, 255, 255, 1) */
        background-color: navy;
    }

    nav a:hover {
        border: inset;
        color: navy;
        background-color: lightblue;
    }

    nav a:active {
        color: lime;
    }

article {
    width: calc(100% - 108px); /* 89%; */
    float: left;
    padding: 2px 5px 2px 10px;
}

footer {
    width: 100%;
    padding: 20px 1px 1px 1px;
    text-align: center;
    margin: auto;
}

aside {
    width: 1px;
    float: right;
    text-align: center;
}

blockquote {
    margin-left: 40px;
    margin-right: 20px;
}

brauto, .brauto {
    display: none;
}

/* to highlight the day in the summary listing at the bottom of the travel days, called from the PHP function */
.current, .highlight {
    background-color: lawngreen;
}

/* donate button on donate page */
.donate {
}

.buttonwide {
    width: 120px;
    display: block;
    font-weight: normal;
    font-size: 10pt;
    font-family: Tahoma, Verdana, Arial, sans-serif;
    text-decoration: none;
    text-align: center;
    padding: 3px;
    border: outset;
}

/* buttons: menu */
a, a:link, a:visited, a:active {
    color: navy;
    /* background-color: white; */
}
/*
    a:hover {
        color: white;
        background-color: navy;
    }
    */

.titleFont {
    text-align: center;
    font-family: Diner, 'Comic Sans MS', Tahoma, Verdana, Arial, sans-serif;
}

a.title, a.title:hover, a.title:visited, a.title:active {
    font-family: Diner, 'Comic Sans MS', Tahoma, Verdana, Arial, sans-serif;
    font-size: calc(16px + 4vw); /* calc(16px + 4vw); */
    text-decoration: none;
    color: navy;
}

/* for database connection messaging */
.success {
    color: green;
}

.failure {
    color: red;
}

.viking {
    background-image: url("http://vrc.themichelpage.com/images/logo.jpg");
    /* background-size: 100%; */
    background-size: cover;
}


/* new scroll buttons */
#buttonTop, #buttonBot {
    color: navy;
    opacity: 50%;
    display: none;
    position: fixed;
    right: 10px;
    z-index: 99;
    font-size: 20px;
    border: none;
    outline: 1px black solid; /* none */
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
}

#buttonTop {
    top: 34px; /* position from top */
}

#buttonBot {
    bottom: 18px; /* position from bottom */
}

#buttonTop:hover, #buttonBot:hover {
    opacity: 100%;
    scale: 1.1;
}





/* /////////////////////////////// */
/* modals for image pop-up         */
/* The Modal (background)          */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 55px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    /* width: 95%; */ /* 80% */
    max-width: 95%; /* 700 > 1600 */
    max-height: 95%; /* 700 > 900 */
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 90%;
    max-width: 1600px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.1s;
    animation-name: zoom;
    animation-duration: 0.1s;
}

@-webkit-keyframes zoom {
    from {
        -webkit-transform: scale(0) }
    to {
        -webkit-transform: scale(1) }
}

@keyframes zoom {
    from {
        transform: scale(0) }
    to {
        transform: scale(1) }
}

/* The Close Button */
.close {
    position: absolute;
    top: 5px;
    right: 35px;
    color: #f1f1f1;
    font-size: 50px;
    font-weight: bold;
    transition: 0.1s;
}

.close:hover, .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}


.required {
    color: red;
    cursor: default;
}




/* 100% Image Width on Smaller Screens */
/*
@media only screen and (max-width: 600px) {
    .modal-content {
        max-width: 90%;
        max-height: 90%;
    }
}
    */
/* /////////////////////////////// */




/* ///////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////// */
/* MOBILE */
@media screen and (max-width: 900px) {
    brauto, .brauto {
        display: inline;
    }
}

@media screen and (max-width: 600px) {
    header {
        position: -webkit-sticky;
        position: sticky;
        padding: 2px 2px 0px 2px;
        /* height: auto; */
        top: 0;
        background-color: white;
    }

    /* header, section, footer,  */
    nav, article, aside {
        width: 100%;
        height: auto;
    }
    nav {
        display: none;
    }
    /*
        */
    article {
        padding: 1px;
    }

    h1 {
        font-size: x-large;
        margin-top: 4px;
        margin-bottom: 6px;
    }

    h2 {
        font-size: large;
    }

    blockquote {
        margin-left: 9px;
        margin-right: 6px;
    }

    ul, ol {
        margin-left: 9px;
        margin-right: 4px;
        padding: 9px;
    }

    textarea {
        width: 100%;
    }

    table.outline {
        width: 96%;
    }

    .imgmap, .TravelMap, .travelmap { /* for VRC Images with maps MOBILE */
        width: 324px;
        height: 180px;
    }

    .showNarrow { /* showNarrow when screen is small, and hide showWide too*/
        display: inline;
        visibility: visible;
    }

    .showWide {
        display: none;
        visibility: hidden;
    }

    .spanThumb { /* hide the spanThumb span when screen is narrow */
        display: none;
        visibility: hidden;
    }

    .thumbC, .thumbNarrow {
        width: 300px;
    }

    brauto, .brauto {
        display: inline;
    }

    table.phototable {
        width: 100%;
    }

    iframe.referral {
        height: 170px;
    }

    /* mobile */
    iframe.video, iframe.videoC, .video, .videoC {
        width: 320px;   /* 400x225 */
        height: 180px;  /* NOT auto */
        /* float: left; */
    }

    .donate {
        display: block;
        margin: auto;
    }



    /* menu icon */
    .dropdownbtn {
        color: navy;
        border: 0px;
        background-color: white;
        padding: 0px 8px 0px 8px;
        font-size: 28px;
        cursor: pointer;
    }

    .dropdown {
        position: relative;
        display: inline-block;
        float: right;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        right: 0;
        min-width: 140px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        font-size: 14px;
        -webkit-appearance: none;
    }

    .dropdown-content a, .dropdown-content a:link, .dropdown-content a:hover, .dropdown-content a:visited, .dropdown-content a:active {
        font-family: Verdana, Tahoma, sans-serif;
        color: white;
        background-color: navy;
        display: block;
        text-align: center;
        text-decoration: none;
        border: outset;
        font-size: 14px;
        padding: 5px 0px 5px 0px;
        */ /* top+bottom, left-right */
        -webkit-appearance: none;
    }

    .dropdown-content a:hover {
        font-family: Verdana, Tahoma, sans-serif;
        color: white;
        background-color: lightblue;
        border: inset;
        font-size: 14px;
        -webkit-appearance: none;
    }

    .dropdown:hover .dropdown-content {
        display: block;
        -webkit-appearance: none;
    }

    .dropdown:hover .dropdownbtn {
        color: white;
        background-color: navy;
        -webkit-appearance: none;
    }
}

/* MOBILE */
/* ////////////////////////////////////////////////////// */