p {
    margin : 0px;
    padding : 0px;
}

h1 {
    margin : 0px;
    padding : 0px;
    text-align : center;
}

h2 {
    margin : 0px;
    padding : 0px;
    text-align : center;
}

header {
    width : 100%;
    position : sticky;
    top: 0;
    background-color : white;
    padding : 0px;
    margin : 0px;
    padding-bottom: 8px;
    border-bottom : 1px solid black; 
    box-sizing : border-box;
}

footer {
    width : 100%;
    position : fixed;
    bottom : 0;
    background-color : white;
    text-align : center;
}


#ImageDescriptor {
    background-color : rgba(248, 250, 200, 1.0);
    text-align : center;
    padding : 0.5em;
    border-style : solid;
    border-width : 1px;
    border-color : black;
    font-size : large;
    font-weight : normal;  
    margin : 0px;
}

#ViewerBox {
    position : fixed;
    background-color : rgba(0, 0, 0, 0.25);
    top : 0;
    width : 100%;
    height : 100%;
    z-index : 100;
    padding : 24px;
    box-sizing : border-box;
    display : none;
}

#ViewerClientArea {
    background-color : white;
    width : 100%;
    height : 100%;
    padding : 0px;
    border-style : solid;
    border-width : 1px;
    border-color : black;
    box-sizing : border-box;
    display : flex;
    flex-direction : column;
}
    
#ViewerHeader {
    background-color : white;
    box-sizing : border-box;
    padding : 8px;
}

#ViewerImageArea {
    background-color : blue;
    flex-grow : 1;
    display : flex;
}

#ViewerPrevious {
    flex : 0 0 32px;
    background-image : url(Arrow.svg);
    background-size : 80%;
    background-color : white;
    background-position : center;
    background-repeat : no-repeat;
}

#ViewerPrevious:hover {
    background-size : 90%;
}

#ViewerImageContainer {
    flex : 1 1 content;
    display : flex;
    align-items: center;
    justify-content: center;
    border-style : solid;
    border-width : 1px;
    border-color : black;
    background-color : rgba(248, 248, 248, 1.0);
    padding : 2%;
}

#ViewerImage {
    width : 100%;
    height : 100%;
    background-color : rgba(248, 248, 248, 1.0);
    display : grid;
    place-items : center;
    background-image: 
        linear-gradient(45deg, #e8e8e8 25%, transparent 25%), 
        linear-gradient(-45deg, #e8e8e8 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #e8e8e8 75%), 
        linear-gradient(-45deg, transparent 75%, #e8e8e8 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

#ViewerNext {
    flex : 0 0 32px;
    background-image : url(Arrow.svg);
    background-size : 80%;
    background-color : white;
    background-position : center;
    background-repeat : no-repeat;
    transform: scaleX(-1.0);
}

#ViewerNext:hover {
    background-size : 90%;
}

#ViewerFooter {
    width : 100%;
    background-color : white;
    text-align : center;
}

#ViewerButtons {
    display : flex;
    background-color : white;
    padding : 8px 32px 8px 32px;
}

#ViewerRadioButtons {
    display : flex;
    background-color : white;
}

#ViewerButtonsDeadSpace {
    flex-grow : 1;
}

.Class_Container {
    display : none;
}

.Class_Header {
    font-size : x-large;
    font-weight : bold;
}

.Class_Div {
    margin : 16;
}

.Class_Icon {
    width : 128px;
    height : 128px;
    margin : 7px;
    border-style : solid;
    border-width : 1px;
    border-color : black;
    box-shadow : 5px 5px 3px 0px rgba(0, 0, 128, 0.25)
}

.Class_Icon:hover {
    margin : 4px;
    border-width : 4px;
}

.Class_Arrow {
}

.Class_Radio {
    border-style: solid;
    border-color: black;
    border-width : 1px;
    padding: 5px;
    background: lightgrey;
    margin-right : 8px;
}

.Class_Radio:hover {
    padding : 3px;
    border-width : 3px;
}    

.Class_Radio_Selected {
    border-style: solid;
    border-color: black;
    border-width : 2px;
    padding: 4px;
    background: white;
    margin-right : 8px;
}

.Class_Image {
    max-width : 100%;
}