/* default link style - needed to make the :active work correctly in IE */
a, a:visited, a:hover, a:active {
         color:#fff;
}




/* style the outer containing div to fit the landscape, portrait and buttons */
#album {
         width:500px;
         height:375px;
         background:#960007 0px 0px no-repeat;    /*Dateipfad Startbild1*/
         background-position: 0px 0px;
         border:1px solid #000; /*#960007;  */
         margin:0 auto 20px auto;
}


/* style the outer containing div to fit the landscape, portrait and buttons */
#albumPoster{
         width:660px;
         height:880px;
         background:#960007 0px 0px no-repeat;    /*Dateipfad Startbild1*/
         background-position: 0px 0px;
         border:1px solid #000; /*#960007;  */
         margin:0 auto 20px auto;
}




/* style the outer containing div to fit the landscape, portrait and buttons, 660 Bildschirmbreite */
#album1 {
         width:660px;
         height:373px;
         background:#960007 0px 0px no-repeat;    /*Dateipfad Startbild1*/
         background-position: 0px 0px;
         border:1px solid #000; /*#960007;  */
         margin:0 auto 20px 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:380px 0 0 0;         /*Abstand Zahlenkästchen zum oberen Bildrand */
         list-style-type:none;
         position:relative;
         width:500px;
}





/* remove the default image border */
.gallery img {
         border:10px solid #000;
}



/* Mache die Zahlen zu einer horizontalen Liste */
.gallery li {
         float:left;
}




/* style the link text to be central in a surrounding box */
.gallery li a, .gallery li a:visited {
         font-size:11px;
         float:left;
         text-decoration:none;
         color:#000;
         background:#fff ;
         text-align:center;
         width:26px;
         height:26px;
         line-height:24px;
         border:1px solid #444;
         margin:2px 4px 2px 0px;
}




/* Bildposition der anzuzeigenden Bilder angeben und diese auf "hidden" setzten */
.gallery li a img {
         position:absolute;
         margin:auto;
         top:0px;
         left:0px;
         visibility:hidden;
         border:0px solid #000;
}




/* fix the top position for the landscape images */
.gallery li a img.landscape {
         top:-380px;             /*Abstand Zahlenkästchen zum oberen Bildrand */
}



/* fix the top position for the landscape images */
.gallery li a img.landscapefirst {
         top:-380px;             /*Abstand Zahlenkästchen zum oberen Bildrand */
	 visibility:visible;
}



/* fix the left position for the portrait images */
.gallery li a img.portrait {
	left:0;
	border-left:40px solid #eee;
	right:40px solid #eee;
}



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


/* style the active/focus colors for the text boxes (required for IE) */
.gallery li a:active, .gallery li a:focus {
         background:#444;
         color:#fff;
         outline:0;
}
/* make the images visible on active/focus */
.gallery li a:active img, .gallery li a:focus img {
	visibility:visible;
	outline:0;
}