body {
font: 100%/1.2 'Lucida Grande', 'Lucida Sans Unicode', Calibri, sans-serif;
color: white;
background-color: black;
text-align: center;
margin: 0;
padding: 0;
}
#gallery img {
max-width: 200px;
max-height: 200px;
margin: 1em;
}
#lightbox {
display: none; /* initially hidden */
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background-color: rgba(255, 0, 255, .75); /* traslucent fuchsia */
}
#container {
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
width: 600px;
height: 600px;
left: 50%;
margin: 2em 0 2em -300px;
background-color: black;
}
#container img {
position: absolute;
left: 0;
margin: 0;
max-width: 100%;
max-height: 100%;
}
#prev, #next {
display: block;
position: absolute;
top: 0;
bottom: 0;
width: 35%;
padding: 0 5%;
font-weight: bold;
font-size: 3em;
line-height: 600px;
color: transparent;
text-decoration: none;
z-index: 3;
}
#prev:hover, #next:hover {
color: white;
text-transform: none;
}
#prev {
left: -15%;
text-align: left;
}
#next {
right: -15%;
text-align: right;
}