body{
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    font-size: 16px;
} 

div.header div {
    display: inline-block;
}

div.headertext {
    vertical-align: top;
}

div.logo {
     height: 100px;
     width: 400px;
     background-image: url('KofC_logo.png');
     background-repeat: no-repeat;
     margin: 0px;
 }

hr.separator {
     margin: 0px;
 }

 /* The navigation bar */
 .navbar {
     overflow: hidden;
     background-color: darkblue;
     /*position: fixed; /* Set the navbar to fixed position */
     top: 0;
     /* Position the navbar at the top of the page */
     width: 100%;
     /* Full width */
 }

.privatenavbar {
    background-color: royalblue;
}

 /* Links inside the navbar */
 .navbar a {
     float: left;
     display: block;
     color: #f2f2f2;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
 }

 /* Change background on mouse-over */
 .navbar a:hover {
     background: goldenrod;
     color: black;
 }

div.maincontent {
    padding: 10px;
}


@media screen and (max-width:500px){
    div.maincontent{
        font-size: 1.3em;
    }
}

@media screen and (min-width:501px){
    div.maincontent{
        font-size: 1.1em;
    }
}

table.officers td {
    padding: 8px;
}

td.year {
    font-style: italic;
}

td.title {
    font-weight: bold;
}

td.grandknightname {
    padding-left: 10px;
    
}

h1 {
    font-size: 1.8em;
}

img.mainphoto {
    border: 5px darkblue ridge;
    max-width: 100%;
}

div.mainphoto {
    padding: 10px;
    text-align: center;
}

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

div.smallphoto {
    width: 30%;
    vertical-align: top;
}

a.link {
    display: block;
    padding: 5px;
}

div.smallerphotos {
    text-align: center;
    vertical-align: top;
}

.smallerphotos div{
    display: inline-block;
    padding: 10px;
}

.smallerphotos img {
    height: 300px;
}

.caption {
    text-align: center;
    width: 100%;
    padding: 5px;
}

li.contact {
    padding: 10px;
    font-size: 1.4em;
}

div.bigger {
    font-size: 1.4em;
}

div.prayer {
    text-align: center;
    color: crimson;
    font-family: fantasy;
}

div.border {
    border: 5px darkblue ridge;
    width: 50%;
    margin:auto;
    padding: 15px;
}