info343/labs/5/lightbox.css

/*
lightbox.css
Provided CSS styles for Lab 5: Lightbox
INFO 343, Autumn 2012
Morgan Doocy
*/

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