body{
    font-family: Arial;
}
.header {
    color: #929292;
    font-family: 'Arial Narrow';
    font-size: 34px;
    letter-spacing: 2px;
    font-weight: bold;
}
.seperator {
    height: 1px;
    background-color: #d70000;
    grid-row-start: 2;
    grid-column-start: 1;
    grid-column-end: 4;
    margin-top: 5px;
}
.title {
    color: #d70000;
    font-family: Arial;
    font-size: 22px;
    font-weight: bold;
}
.title1 {
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
}
.descriptionRow {
    border-style: solid;
    border-width: 1px;
    border-color: silver;
    margin: 0px;
    margin-top: 15px;
    margin-bottom: 2px;
    padding: 4px;
    background-color: whitesmoke;
}
.imageRow {
    display: grid;
    border-style: solid;
    border-width: 1px;
    border-color: silver;
    margin: 0px;
    margin-bottom: 2px;
    background-color: whitesmoke;
}
.thumbDiv {
    width: 192px;
    height: 192px;
    border: solid;
    border-width: 1px;
    border-color: white;
    position: relative;
}
.landscape { width: 192px; height: 144px; }
.portrait { width: 144px; height: 192px; }
.landscape, .portrait {
    cursor: zoom-in;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.imageInfo {
    display: none;
    color: lightcoral;
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 187px;
    padding: 1px 0px 1px 3px;
    border: solid;
    border-width: 1px;
    border-color: silver;
    font-size: 0.75em;
    background-color: #afebffd7;
}
.r-col1{ grid-column: 1}
.r-col2{ grid-column: 2}
.r-col3{ grid-column: 3}
.r-col4{ grid-column: 4}
#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.9);
    z-index: 2;
    cursor: zoom-out;
}
#overlayImage {
    position: absolute;
    top: 50%;
    left: 50%;
    color: white;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}