/* style the outer cntaining div to fit the landscape and buttons */
#album {
   width:672px; 
   height:540px; 
   background:#a3ce74;
   border:1px solid #cdede4;
   margin:0 auto;
}

/* remove the padding margin and bullets from the list. Add a top margin and width to fit the images and a position relative */
.gallery {
   padding:0; 
   margin:500px 0 0 0; 
   list-style-type:none; 
   position:relative; 
   width:672px;
}

/* remove the default image border */
.gallery img {
   border:0;
}

/* make the list horizontal */
.gallery li {
   float:left;
}

/* style the link text to be central in a surrounding box */
.gallery li a, .gallery li a:visited {
   float:left; 
   text-decoration:none; 
   color:#000; 
   background:#f0fbf8; 
   text-align:center; 
   width:48px; 
   line-height:24px; 
   border:1px solid #cdede4;
   margin:3px;
}

/* position the images using an absolute position and hide them from view */
.gallery li a img {
   position:absolute; 
   top:-484px; 
   left:16px; 
   visibility:hidden; 
   border:0;
}

/* position the captures using an absolute position and hide them from view */
.gallery li a span {
   position:absolute; 
   top:-55px; 
   left:16px; 
   visibility:hidden;
   border:0;
   color:#000;
   text-align: center;
}
.gallery li a span em {
   font-style:italic;
}

/* style the hover background color for the text boxes */
.gallery li a:hover {
   background:#cdede4;
}

/* style the active/focus colors for the text boxes (required for IE) */
.gallery li a:active, .gallery li a:focus {
   background:#a3ce74; 
   color:#f0fbf8;
}

/* make the images visible on active/focus */
.gallery li a:active img, .gallery li a:focus img {
   visibility:visible;
}

/* make the captions visible on active/focus */
.gallery li a:active span, .gallery li a:focus span {
   visibility:visible;
}