/*WWII Maps - Campaign Pages Style Sheet*/

* {
    box-sizing: border-box;
}

/* Style the header */
.header {
    background-color: #cc9900;
    padding: 20px;
    text-align: center;
}

.footer {
	padding: none;
	text-align: center;
}

/* Style the copyright notice */
.cright {
	padding: none;
	text-align: center;
}

body {
    margin: 10px;
	height:auto;
	background-color:#ffffff;
	color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.0em;
}

div.page {
    max-width:775px;
    margin: auto;
    border: 2px solid #664d00; 
}

.txtlink { text-decoration: none; color:#000000; }
.txtlink:visited { text-decoration: none; color:#333333; }
.txtlink:hover { text-decoration: none; color:#666666; }
.txtlink:active { text-decoration: none; color:#999999; }


ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

ul.topnav li {float: left;}

ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: #111;}

ul.topnav li a.active {background-color: #ff0000;}

ul.topnav li a.prevnext {background-color: #33cc33;}

ul.topnav li.right {float: right;}

ul.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}



ul.navbar li {
    float: left;
}

li a, .dropbtn {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}



ul.navbar li a.active {background-color: #ff0000;}

ul.navbar li a.prevnext {background-color: #33cc33;}

ul.navbar li.right {float: right;}

ul.navbar li.dropdown {
    display: block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #333;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #ff0000}

.dropdown:hover .dropdown-content {
    display: block;
}


h1 { 
    display: block;
    font-size: 2.0em;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

h2 { 
    display: block;
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

h3 { 
    display: block;
    font-size: 1.3em;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
    font-style: italic;
}

.hdng {
    text-align: center;
    background-color: #cc9900;
    color: black;
    padding: 4px;
}

.centertxt {
    text-align: center;
}

p {
    display: block;
    font-size: 1.0em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 0;
    margin-right: 0;
}


/* Create three equal columns that floats next to each other */
.column60 {
    float: left;
    width: 60%;

    padding: 5px;
}

.column40 {
    float: left;
    width: 40%;

    padding: 5px;
}

.column {
    float: left;
    width: 100%;

    padding: 5px;
}



.row1 {
    background-color: #fff9e6;
}


.row2 {
    background-color: #fff3cc;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 99%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
    .column60 {
        width: 100%;
    }
    .column40 {
        width: 100%;
    }

    ul.navbar li.right,
    li.dropdown,
    ul.navbar li {float: none;}

}