/* CSS Document */

/* Foto album alleen. Overgenomen van Stu Baker, website met CSS ideeën.      */
/* URL: http://www.cssplay.co.uk/menu/index.html                              */
/* Dit foto album: simple gallery: http://www.cssplay.co.uk/menu/gallery.html */


#container {position:relative; width:600px; height:640px; background:; border:1px solid #830000; margin:0 auto;}
#container b {font-weight:normal; width:600px; text-align:center; position:absolute; 
bottom:280px; left:0; color:#830000; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; 
letter-spacing:1px; line-height:1.7em; z-index:1;}
#container em { position:absolute; bottom: 15px; right: 10px; font-size:9px; z-index:1; background-color:#CCCCCC;}
#container .a, 
#container .a:visited {color:#606;}
/*#container em a,
#container em a:hover,
#container em a:visited {color:CCCCCC;}*/

#container a.album, 
#container a.album:visited {display:inline; color:#830000; text-decoration:none; border:1px solid #830000; 
				width:75px; height:75px; float:left; margin:7px 11px 4px 11px; position:relative; cursor:default;}

#container a.portrait1 {background:url(pictures/tuin_117_1739.jpg); background-position: center; }
#container a.portrait2 {background:url(pictures/voortuin_utrecht.jpg); background-position: center;}
#container a.portrait3 {background:url(pictures/tuinkast.jpg); background-position: center;}
#container a.portrait4 {background:url(pictures/hergebruik.jpg); background-position: center; }
#container a.portrait5 {background:url(pictures/regenton.jpg); background-position: center;}
#container a.portrait6 {background:url(pictures/tuinset.jpg); background-position: center;}
#container a.portrait7 {background:url(pictures/detail_voortuin.jpg); background-position: center;}
#container a.portrait8 {background:url(pictures/pergola_met_pompoenen_klein.jpg); background-position: center;}
#container a.portrait9 {background:url(pictures/klimpergolazonnehuis2.jpg); background-position: center;}
#container a.portrait10{background:url(pictures/tuin_enschede.jpg); background-position: center;}
#container a.portrait11{background:url(pictures/kinderen_124_2478.jpg); background-position: center;}
#container a.portrait12{background:url(pictures/moerasbewoner.jpg); background-position: center;}

#container a.album span
{visibility:hidden; display:block; position:absolute; width:580px; height:420px; top:189px; left:9px; 
color:#830000; background:; text-align:center; border:1px solid #830000; font-family:tahoma, Verdana, Arial, Helvetica, sans-serif; 
font-size: 85%; font-weight: bold; padding: 4px; letter-spacing:1px; cursor:default;}

#container a.portrait1 span {left:-8px; top:190px;}
#container a.portrait2 span {left:-107px; top:190px;}
#container a.portrait3 span {left:-205px; top:190px;}
#container a.portrait4 span {left:-305px; top:190px;}
#container a.portrait5 span {left:-404px; top:190px;}
#container a.portrait6 span {left:-501px; top:190px;}
#container a.portrait7 span {left:-8px; top:99px;}
#container a.portrait8 span {left:-105px; top:99px;}
#container a.portrait9 span {left:-205px; top:99px;}
#container a.portrait10 span {left:-305px; top:99px;}
#container a.portrait11 span {left:-404px; top:99px;}
#container a.portrait12 span {left:-501px; top:99px;}

#container a.album:hover {white-space:normal; border:1px solid #fff; z-index:100;}

#container a.album:hover span {visibility:visible; z-index:100;}

#container a.album:hover span img {margin:10px; border:1px solid #830000; position:relative; z-index:100;}

#container a.album:active, 
#container a.album:focus {border:1px solid #c00; z-index:10;}

#container a.album:active span, 
#container a.album:focus span {visibility:visible; z-index:10;}

#container a.album:active span img, 
#container a.album:focus span img {border:1px solid #830000; position:relative; margin:10px; z-index:10;}