body {
font-family: 'Merienda', Helvetica, sans-serif;
font-size: 1em;
color: #000080;
background-color: #00aa00;
padding: 1em 0;
}

/* there may be some page styles on some of the pages, be sure to check */
/* header should be about 1278 pixels wide and about 250-300 high */
/* border radius order - top left, top right, bottom right, bottom left */
/* most other styles are top, right, bottom, left */

a:link {
color: #D50000;
}

a:visited {
color: #990000;
}

a:hover {
color: #0000ff;
}

a:active {
color:#99FF99;
}

.bold {
font-weight: bold;
}

.calendar {
border: 1px dashed #aaaaff;
width: 800px;
height: 600px;
}

.center {
text-align: center;
}

.color {
color: #aa0000;
}

.column-1 {
}

.column-2 {
width: 50%;
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
float: right;
margin-left: 1em;
}

#content {
padding: 1em;
float: right;
width: 75%;
text-align: left;
}

.day-1 {
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
float: left;
width: 45%;
}

.day-2 {
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
}

#footer {
clear: both;
color: #999;
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
font-style: italic;
padding: 1em;
text-align: center;
width: 98%;
}

h1 {
font-size: 1.2em;
font-weight: bold;
margin-top: 0;
}

#header {
text-align: center;
width: 100%;
margin: 0 auto;
}

.header-image {
width: 96%;
margin: 0 auto;
margin-top: .4em;
border-radius: 25px 0px 25px 0px;
}

.hits {
font-size: .8em;
text-align: center;
}

hr {
border: 3px solid #ff0000;
border-radius: 100%;
margin: 1em 14em 1em 14em;
color: #ff0000;
background-color: #ff0000;
}

#inner-wrapper {
background-color: #fff;
border: 2px solid #00aa00;
border-radius: 0px 25px 0px 0px;
margin: 0 auto;
padding-top: 1.5em;
width: 96%;
}

#links td {
text-align: center;
}

.list {
line-height: 1.3;
}

.logo {
width: 96%;
height: auto;
}

.logo-2 {
width: 85%;
height: auto;
}

.logo-menu {
float: left;
padding-left: .6em;
padding-right: .6em;
height: 100%;
}

.map {
width: 45%;
height: 24em;
}

.map-meeting {
width: 100%;
height: 24em;
}

.menu-wrapper {
border-radius: 0px 25px 0px 25px;
background-color: #0000ff;
width: 96%;
margin: 0 auto;
}

#middle-wrapper {
width: 96%;
margin: 0 auto;
background-color: #ffffff;
}

#officers {
margin: 1rem 0 0 3rem;
}

#officers td {
padding: 2px 5px;
}

#outer-wrapper {
background-color: #ff0000;
border: 2px solid #ffff00;
border-radius: 0px 25px 0px 0px;
margin: 0 auto;
padding: 1.6rem 0;
width: 97%;
}

#search {
width: auto;
margin: 0 auto;
font-size: .7rem;
margin-bottom: -1rem;
padding-top: 1rem;
}

#sevens {
margin: 1em auto;
}

#sevens td {
padding: 2px 5px;
}

#side-menu {
width: 20%;
float: left;
text-align: center;
}

.subtitle {
font-size: .5em;
}

.thumbnail {
border-bottom: 3px solid #6a6a6a;
border-right: 3px solid #6a6a6a;
border-radius: 0 50% 50% 50%;
box-shadow: 0px 0px 10px #000000;
height: 8em;
width: 8em;
margin-bottom: .5em;
}

.winner-holder {
font-size: .7em;
font-family: Arial, Helvetica, sans-serif;
float: left;
height: 7em;
width: 24%;
text-align: center;
}

/* FOR THE POP UP PHOTOS */

.photo {
height: 60%;
}

photo-caption {
}

.photo-group {
width: 80%;
}

.photo-holder {
border: thin solid black;
font-size: .7em;
font-family: Arial, Helvetica, sans-serif;
float: left;
height: 180px;
padding: 5px;
width: 190px;
text-align: center;
}

.zoom {
transition: transform .2s; /* Animation */
height: 9em;
width: auto;
margin: 0 auto;
}

.zoom:hover {
-ms-transform: scale(3.5); /* IE 9 */
-webkit-transform: scale(3.5); /* Safari */
transform: scale(3.5); /* (250% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}


/* NAV BAR - CAREFUL WITH THIS */

.navbar {
    overflow: hidden;
    background-color: #0000ff;
font-family: 'Merienda', Helvetica, sans-serif;
margin: 0 auto;
border-radius: 0px 25px 0px 0px;
}

.navbar a {
    float: left;
    font-size: 1em;
    color: white;
    text-align: center;
    padding: .9em 1em;
    text-decoration: none;
border-radius: 0px 25px 0px 25px;
}

.dropdown {
    float: left;
    overflow: hidden;
border-radius: 0px 25px 0px 25px;
}

.dropdown .dropbtn {
    font-size: 1em;
    border: none;
    outline: none;
    color: white;
    padding: .9em 1em;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

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

.dropdown-content {
    display: none;
    position: absolute;
    background-color: yellow;
    min-width: 6em;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
border-radius: 25px 0px 25px 0px;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: .9em 1em;
    text-decoration: none;
    display: block;
    text-align: left;
border-radius: 25px 0px 25px 0px;
}

.dropdown-content a:hover {
    background-color: #00ff00;
}

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

/* FOR SMALLER DEVICES */


@media only screen and (min-width : 280px) and (max-width : 800px) {
.calendar {
width: 95%;
height: 25em;
}
.column-2 {
width: 98%;
float: none;
}
#content {
float: none;
width: 95%;
margin: 0 auto;
}
hr {
margin: 1em 5em;
}
.logo {
width: 50%;
height: auto;
}
.map {
width: 98%;
float: none;
}
.navbar {
/* font-size: 2em; */
}
.photo-holder {
float: none;
width: 98%;
}
#side-menu {
float: none;
width: auto;
}
}