* { -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; }