#gallerycontainer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
	background-color: #000000;
	height: 400px;
	width: 550px;
	border: thin solid #000000;
	margin: auto;
}

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

/* style the outer cntaining div to fit the landscape, portrait and buttons */
#album {
	border:1px solid #000000;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	height: 400px;
}


/* remove the padding margin and bullets from the list. Add a top margin and width to fit the images and a position relative */
.gallery {
	list-style-type:none;
	margin-bottom: 0;
	width: 90%;
	height: 30px;
	margin-top: 350px;
	position: relative;
	z-index: 3;
	padding: 0;
	left: 44px;
}


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


/* make the list horizontal */
.gallery li {
	width:  30px;
	height: 30px;
	border: 0px solid;  /*border around rollover image */
	margin-top: 0;
	margin-right: 3.5px;
	margin-bottom: 0;
	margin-left: 0;
}

/* style the link text to be central in a surrounding box */
.gallery li a, .gallery li a:visited {
	width: 30px;
	height: 30px;
	float: left;
	margin: 0;
 	
}

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

/* fix the top position for the landscape images */
.gallery li a img.landscape {
	top:-326px;
	width: 468px;
	height: 307px;
	margin-right: auto;
	margin-left: auto;
}

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

/* style the hover background color for the text boxes */
.gallery li a:hover {
	width: 30px;
	height: 30px;
	margin:0;
}


/* style the active/focus colors for the text boxes (required for IE) */
.gallery li a:active, .gallery li a:hover  {
	background: #000;
	float: left;
	height: 30px;
	width: 30px;
	margin: 0px;
	padding: 0px;
}

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

.bw {
	background-image: url(stills/disintegration/lifeline.jpg);
	background-repeat: no-repeat;
	background-position: 44px 24px;
}
.color {
	background-image: url(stills/nightlight/universal_language.jpg);
	background-repeat: no-repeat;
	background-position: 44px 24px;
}

.slidea {background-image: url(stills/disintegration/tinyrolloverbw/life.jpg); background-repeat:no-repeat;}
.slideb {background-image: url(stills/disintegration/tinyrolloverbw/sic.jpg); background-repeat: no-repeat;}
.slidec {background-image: url(stills/disintegration/tinyrolloverbw/sacr.jpg); background-repeat: no-repeat;}
.slided {background-image: url(stills/disintegration/tinyrolloverbw/excav.jpg); background-repeat: no-repeat;}
.slidee {background-image: url(stills/disintegration/tinyrolloverbw/wreck.jpg); background-repeat: no-repeat;}
.slidef {background-image: url(stills/disintegration/tinyrolloverbw/edif.jpg); background-repeat: no-repeat;}
.slideg {background-image: url(stills/disintegration/tinyrolloverbw/scaff.jpg); background-repeat: no-repeat;}
.slideh {background-image: url(stills/disintegration/tinyrolloverbw/street.jpg); background-repeat: no-repeat;}
.slidei {background-image: url(stills/disintegration/tinyrolloverbw/crown.jpg); background-repeat: no-repeat;}
.slidej {background-image: url(stills/disintegration/tinyrolloverbw/rotund.jpg); background-repeat: no-repeat;}
.slidek {background-image: url(stills/disintegration/tinyrolloverbw/revol.jpg); background-repeat: no-repeat;}
.slidel {background-image: url(stills/disintegration/tinyrolloverbw/proscen.jpg); background-repeat: no-repeat;}
.slidem {background-image: url(stills/disintegration/tinyrolloverbw/sro.jpg); background-repeat: no-repeat;}
.sliden {background-image: url(stills/disintegration/tinyrolloverbw/devas.jpg); background-repeat: no-repeat;}

.colora {background-image: url(stills/nightlight/tinyrollover/univ.jpg); background-repeat:no-repeat;}
.colorb {background-image: url(stills/nightlight/tinyrollover/under.jpg); background-repeat: no-repeat;}
.colorc {background-image: url(stills/nightlight/tinyrollover/span.jpg); background-repeat: no-repeat;}
.colord {background-image: url(stills/nightlight/tinyrollover/shar.jpg); background-repeat: no-repeat;}
.colore {background-image: url(stills/nightlight/tinyrollover/prec.jpg); background-repeat: no-repeat;}
.colorf {background-image: url(stills/nightlight/tinyrollover/partitions.jpg); background-repeat: no-repeat;}
.colorg {background-image: url(stills/nightlight/tinyrollover/sgraff.jpg); background-repeat: no-repeat;}
.colorh {background-image: url(stills/nightlight/tinyrollover/sicil.jpg); background-repeat: no-repeat;}
.colori {background-image: url(stills/nightlight/tinyrollover/infer.jpg); background-repeat: no-repeat;}
.colorj {background-image: url(stills/nightlight/tinyrollover/immig.jpg); background-repeat: no-repeat;}
.colork {background-image: url(stills/nightlight/tinyrollover/baubles.jpg); background-repeat: no-repeat;}
.colorl {background-image: url(stills/nightlight/tinyrollover/bh.jpg); background-repeat: no-repeat;}
.colorm {background-image: url(stills/nightlight/tinyrollover/esca.jpg); background-repeat: no-repeat;}
.colorn {background-image: url(stills/nightlight/tinyrollover/spir.jpg); background-repeat: no-repeat;}