imapi/css.css

* {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        padding:0;
        -webkit-padding:0;
        -moz-padding:0;
        -ms-padding:0;
        margin:0;
        -webkit-margin:0;
        -moz-margin:0;
        -ms-margin:0;
}

body {
        display:flex;
        align-items:center;
        justify-content:space-around;
        background:#000;
        height:100%;
}

#GalleryBox {
        display:flex;
        width:80%;
        border:solid 5px rgba(50,50,50,0.5);
        border-radius:5px;
}

#GalleryList {
        display:flex;
        flex:1;
        justify-content:space-around;
        flex-wrap:wrap;
        padding:5px;
}

.Gallery, .thumbnail {
        text-align:center;
        list-style:none;
        height: 200px;
        width: 200px;
        background:#444;
        color:#111;
        text-shadow:0 1px 0 #777, 1px 0 0 #777, -1px 0 0 #777, 0 -1px 0 #777;
        border:solid 3px #333;
        border-radius:10px;
        cursor:pointer;
        margin:5px;
}

.Gallery:hover, .thumbnail:hover {
        background:#553;
        color:#993;
        text-shadow:0 1px 0 #111, 1px 0 0 #111, -1px 0 0 #111, 0 -1px 0 #111;
        border:double 3px #442;
}

#ImageGallery_back, #ImageView_back {
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.3);
        display:flex;
        justify-content:center;
        align-items:center;
}

#ImageGallery, #ImageView {
        display:flex;
        width:90%;
        background:#000;
        border:solid 5px rgba(50,50,50,0.3);
        flex-direction:column;
}

.controls, .Icontrols {
        display:flex;
        flex-direction:row;
        justify-content:space-around;
        background:#222;
        color:#999;
}

.button {
        background:none;
        border-radius:10px;
        padding:5px;
}

.previous:hover, .next:hover {
        background:#440;
}

.close:hover {
        background:#400;
}

#imageList, #ImageContainer {
        display:flex;
        flex-direction:row;
        justify-content:space-around;
        align-items:center;
        flex-wrap:wrap;
        padding:5px;
}

#ImageView {
        height:90%;
}

#ImageContainer {
        padding: 0;
        overflow:hidden;
        height:100%;
        width:100%;
}

#ImageContainer img {
        max-width:100%;
        max-height:100%;
        height: auto;
        width: auto;
}