body { background-color: lightblue; }
header h1 { text-align: center; color: gray;}
nav a { color: white; }
nav { text-align: right;}
nav a:link {color: navy; }
nav a:visited { color: darkorange; }
nav a:hover { color: darkred; }
nav a:active { color: navy; }
footer { background-color: yellow; font-size; 9; color: black; }

header {
    height:100px;
    padding: 25px;
    text-align: center;
    background-color:darkblue;
}

nav {
    background-color:yellow;
    margin:0px;
}

nav ul{
    list-style-type:none;
    text-align:center;
    margin:0px;
    padding:10px;
}

nav ul li {
    display:inline;
    padding: 5px; 15px;
}

nav ul li a {
    color: blue;
    text-decoration:none;
    padding: 10px;
}

nav ul li a:hover {
    background-color: yellow;
}
.row{margin:0px; height:350px;}
.row:after{ 
    display:table;
    content:"";
    clear:both;
}
.header {
    position:absolute;
    top:0px;
    left:5px;
    right:5px;
    height:400px;
    width:150px;
}
.left { 
    float:left;
    width:50%;
    height:90%;
    padding:5px 15px;
    background-color:gray;
}

.right { 
    float:left;
    width:40%;
    height:80%;
    padding:5px 15px;
    background-color:gray;
}

footer {
    padding: 20px;
    background-color:salmon;
}

a.clickableImg {
    margin-left:25%;
    text-align:center;
}
div.cardImg {
    border:solid black 2px;
    border-radius:1px;

    display:inline-block;
    padding:10px;
    margin: 3px 5px;
    text-align:center;
}
img {
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 5px;
    height: 200px;
    width: 160px;
}
img.hires {
    height:400px;
    width:auto;
}

img.thumbnail {
    width:30%;
    height:auto;
}

img.thumbnail:hover {
    background-size: 300px;
}
div.cardImg p.desc {
    text-align:center;
    height:50px;
}

.clear { 
    clear:both;
}