body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #665544;
background-color: #faf4e6;
padding: .5em;
margin: 0;
}

a:link {
color: #4e7076;
}

a:visited {
color: #4e7076;
}

a:hover {
color: black;
}

a:active {
color: #00006f;
}

a.link:link {
color: white;
}

a.link:visited {
color: white;
}

a.link:hover {
color: #80ffff;
}

a.link:active {
color: white;
}

.armlogo {
float: right;
height: 105px;
width: 84px;
}

.armstrong {
display: block;
margin-left: auto;
margin-right: auto;
}

blockquote {
border-radius: 15px;
box-shadow: 2px 2px 5px #888888;
padding: 1em;
}

.bold {
font-weight: bold;
}

.button {
display: block;
margin-left: auto;
margin-right: auto;
}

.content {
padding: 1.5em;
}

.emily {
height: 196px;
width: 150px;
border-radius: 50%;
}

.emilycap {
padding: 0 0 0 1em;
float: right;
text-align: center;
font-size: .8em;
}

#footer {
font-size: .7em;
font-style: italic;
text-align: center;
padding: 1em;
}

.gilnockie {
float: right;
height: 170px;
width: 300px;
padding: .5em;
}

h3 {
text-align: center;
}

hr {
border: 1px;
border-style: solid;
margin-right: 100px;
margin-left: 100px;
margin-top: 15px;
margin-bottom: 15px;
color: #665544;
background-color: #665544;
}

.invictus {
height: 105px;
width: 84px;
padding: 0 1em .5em 0;
float: left;
}

.john {
height: 196px;
width: 150px;
border-radius: 50%;
}

.johncap {
padding: 0 1em 0 0;
float: left;
text-align: center;
font-size: .8em;
}

.large-image {
width: 550px;
height: auto;
}

.letters {
width: 50%;
}

.lion {
height: 105px;
width: 79px;
padding: 0 0 .5em 1em;
float: right;
}

.medium-image {
height: 150px;
width: auto;
}

.medium-image-cap  {
font-size: .8em;
margin-left: 2px;
display: inline-block;
}

.medium-image-row {
width: 98%;
margin: 0 auto;
text-align: center;
}

.menu {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
background-color: #4e7076;
color: white;
font-size: 12px;
text-align: right;
padding-right: .8em;
padding-top: .5em;
padding-bottom: .5em;
}

.photo {
height: 100px;
width: auto;
}

.red {
color: red;
}

.ringsurf {
background-color: #ffffff;
color: black;
}

.sarah {
color: black;
width: 40em;
margin: 0 auto;
border: thin dotted gray;
padding: 1em;
line-height: 2;
background-color: #f5f5f5;
}

.small {
font-size: .7em;
}

.tartan {
color: white;
background-color: black;
background-image: url("../images/armstar.gif");
}

.thumb {
clear: both;
margin: 2px .5em 2px 100px;
height: 100px;
width: auto;
float: left;
transition: transform .2s; /* Animation */
}

.thumbcap {
border: thin dotted #ccc;
padding: 0 1em 0 0;
margin: 2px 0 0 2px;
width: 45%;
float: left;
text-align: justify;
font-size: .8em;
}

.thumb:hover {
transform: scale(2.5); /* 250% */
}

.title {
font-size: 30px;
color: #665544;
text-align: right;
padding: .3em;
}

.under {
text-decoration: underline;
}

#wrapper-1 {
background-image: url(../images/blueleaves.gif);
background-repeat: repeat-y;
border-top: .5em solid #4e7076;
border-bottom: .8em solid #4e7076;
margin: 0 auto;
outline: thin solid black;
width: 90%;
}

#wrapper-2 {
background-color: #faf4e6;
margin-left: 150px;
border-left: .8em solid #665544;
}

#wrapper-3 {
outline: thin solid black;
}

@media only screen and (max-width : 481px) {
blockquote {
width: 100%;
margin: 1em -1em 1em -1em;
}
.letters {
width: 100%;
}
}

@media only screen and (max-width : 600px) {
body {
margin: 0 auto;
}
}

@media only screen and (max-width : 600px) {
.armstrong {
width: 300px;
height: auto;
}
}

@media only screen and (max-width : 600px) {
blockquote {
width: 85%;
}
}

@media only screen and (max-width : 600px) {
.button {
width: 300px;
height: auto;
}
}

@media only screen and (max-width : 600px) {
h3 {
padding-top: 105px;
}
}

@media only screen and (max-width : 600px) {
.large-image {
width: 80%
}
}

@media only screen and (max-width : 600px) {
.letters {
width: 85%;
}
}

@media only screen and (max-width : 600px) {
.thumb {
margin-left: 2px;
transform: initial;
}
}

@media only screen and (max-width : 600px) {
.thumb:hover {
transform: initial;
}
}

@media only screen and (max-width : 600px) {
.thumbcap {
width: 95%;
text-align: left;
}
}

@media only screen and (max-width : 600px) {
.title {
text-align: left;
}
}

@media only screen and (max-width : 600px) {
#wrapper-1 {
width: 98%;
background-image: none;
outline: thin solid black;
padding: 0;
margin: 0 auto;
}
}

@media only screen and (max-width : 600px) {
#wrapper-2 {
width: 100%;
border: 0;
margin-left: 0;
padding: 0;
}
}

@media only screen and (max-width : 600px) {
#wrapper-3 {
width: 100%;
border: 0;
margin: 0;
outline: 0;
padding: 0;
}
}