.srollover {
    display: block;
    width: 106px;
    height: 120px;
    background: url('grafiek_verhalen/verh_logoInter0.gif') no-repeat 0 0;
    text-decoration: none
}
 
a:hover.srollover {
    background-position: -106px 0;
}



.click {
    display: block;
    width: 70px;
    height: 30px;
    background: url('grafiek_knoppen/click.jpg') no-repeat 0 0;
    text-decoration: none
}
 
a:hover.click {
    background-position: -70px 0;
}




.hier {
    display: block;
    width: 70px;
    height: 30px;
    background: url('grafiek_knoppen/klik.jpg') no-repeat 0 0;
    text-decoration: none
}
 
a:hover.hier {
    background-position: -70px 0;
}





.top {
    display: block;
    width: 120px;
    height: 30px;
    background: url('grafiek_knoppen/euroTop02.gif') no-repeat 0 0;
    text-decoration: none
}
 
a:hover.top {
    background-position: -120px 0;
}



.jb {
    display: block;
    width: 185px;
    height: 35px;
    background: url('ShowWebPlayer/grafiek/knJB.gif') no-repeat 0 0;
    text-decoration: none
}
 
a:hover.jb {
    background-position: -185px 0;
}




.jbs {
    display: block;
    width: 189px;
    height: 54px;
    background: url('ShowWebPlayer/grafiek/knJBst.gif') no-repeat 0 0;
    text-decoration: none
}
 
a:hover.jbs {
    background-position: -189px 0;
}


a.tree:link { color: #FFFFFF; text-decoration: underline; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 9 pt; font-weight: bold}
a.tree:active { color: #FFFFFF; text-decoration: none; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 9 pt; font-weight: bold}
a.tree:visited { color: #FFFFFF; text-decoration: none; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 9 pt; font-weight: bold}
a.tree:hover { color: #FFFF11; text-decoration: underline; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 9 pt; font-weight: bold}


a.tops:link { color: #FFFFFF; text-decoration: none; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 8 pt; font-weight: bold}
a.tops:active { color: #64069C; text-decoration: none; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 9 pt; font-weight: bold}
a.tops:visited { color: #FFFFFF; text-decoration: none; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 9 pt; font-weight: bold}
a.tops:hover { color: #B466EC; text-decoration: none; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 9 pt; font-weight: bold}


a.con:link { color: #FFFFFF; text-decoration: none; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 10 pt; font-weight: bold}
a.con:active { color: #FFFFFF; text-decoration: none; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 10 pt; font-weight: bold}
a.con:visited { color: #FFFFFF; text-decoration: none; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 10 pt; font-weight: bold}
a.con:hover { color: #FFFFFF; text-decoration: underline; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 10 pt; font-weight: bold}


a.tops:link { color: #FFFFFF; text-decoration: none; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 10 pt; font-weight: bold}
a.tops:active { color: #FFFFFF; text-decoration: none; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 10 pt; font-weight: bold}
a.tops:visited { color: #FFFFFF; text-decoration: none; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 10 pt; font-weight: bold}
a.tops:hover { color: #FFFFFF; text-decoration: underline; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 10 pt; font-weight: bold}


a.tree:link { color: #FFFFFF; text-decoration: none; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 8 pt; font-weight: bold}
a.tree:active { color: #FFFFFF; text-decoration: none; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 8 pt; font-weight: bold}
a.tree:visited { color: #FFFFFF; text-decoration: none; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 8 pt; font-weight: bold}
a.tree:hover { color: #FFFFFF; text-decoration: underline; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 8 pt; font-weight: bold}

a.ree:link { color: #FF00FF; text-decoration: none; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 8 pt; font-weight: bold}
a.ree:active { color: #FF00FF; text-decoration: none; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 8 pt; font-weight: bold}
a.ree:visited { color: #FF00FF; text-decoration: none; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 8 pt; font-weight: bold}
a.ree:hover { color: #FF0000; text-decoration: underline; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 8 pt; font-weight: bold}

a.re:link { color: #FFFFFF; text-decoration: none; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 12 pt; font-weight: bold}
a.re:active { color: #FFFFFF; text-decoration: none; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 12 pt; font-weight: bold}
a.re:visited { color: #FFFFFF; text-decoration: none; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 12 pt; font-weight: bold}
a.re:hover { color: #FF0000; text-decoration: underline; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 12 pt; font-weight: bold}

a.rep:link { color: #6600CC; text-decoration: none; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 12 pt; font-weight: bold}
a.rep:active { color: #6600CC; text-decoration: none; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 12 pt; font-weight: bold}
a.rep:visited { color: #6600CC; text-decoration: none; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 12 pt; font-weight: bold}
a.rep:hover { color: #FF0000; text-decoration: underline; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 12 pt; font-weight: bold}

a.sm:link { color: #FFFFFF; text-decoration: underline; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 12 pt; font-weight: bold}
a.sm:active { color: #FFFFFF; text-decoration: underline; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 12 pt; font-weight: bold}
a.sm:visited { color: #FFFFFF; text-decoration: underline; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 12 pt; font-weight: bold}
a.sm:hover { color: #FFFF00; text-decoration: underline; font-family : Arial, Verdana, Helvetica, sans-serif; font-size: 12 pt; font-weight: bold}


            .klik {
                display: block;
                width: 70px;
                height: 30px;
                background: url('../grafiek_web/kn_hier.gif') no-repeat 0 0;
                text-decoration: none
            }
 
            a:hover.klik {
                background-position: -70px 0;
            }  
            
            
           

.nat {
    display: block;
    width: 106px;
    height: 120px;
    background: url('grafiek_verhalen/verh_logoNat0.gif') no-repeat 0 0;
    text-decoration: none
}
 
a:hover.nat {
    background-position: -106px 0;
} 


.VL {
    display: block;
    width: 106px;
    height: 60px;
    background: url('grafiek/2VL.gif') no-repeat 0 0;
    text-decoration: none
}
 
a:hover.VL {
    background-position: -106px 0;
} 

.NL {
    display: block;
    width: 106px;
    height: 60px;
    background: url('grafiek/2NL.gif') no-repeat 0 0;
    text-decoration: none
}
 
a:hover.NL {
    background-position: -106px 0;
} 

.BNL {
    display: block;
    width: 106px;
    height: 60px;
    background: url('grafiek/2BNL.gif') no-repeat 0 0;
    text-decoration: none
}
 
a:hover.BNL {
    background-position: -106px 0;
}

.INT {
    display: block;
    width: 106px;
    height: 60px;
    background: url('grafiek/2INTER.gif') no-repeat 0 0;
    text-decoration: none
}
 
a:hover.INT {
    background-position: -106px 0;
}


.VLmenu{
    display: block;
    width: 106px;
    height: 96px;
    background: url('grafiek/VLmenu.gif') no-repeat 0 0;
    text-decoration: none
}
 
a:hover.VLmenu {
    background-position: -106px 0;
} 


.NLmenu{
    display: block;
    width: 106px;
    height: 96px;
    background: url('grafiek/NLmenu.gif') no-repeat 0 0;
    text-decoration: none
}
 
a:hover.NLmenu {
    background-position: -106px 0;
} 


.INTmenu{
    display: block;
    width: 106px;
    height: 96px;
    background: url('grafiek/INTmenu.gif') no-repeat 0 0;
    text-decoration: none
}
 
a:hover.INTmenu {
    background-position: -106px 0;
} 


.menubig{
margin: 0;
padding: 0;
width: 106px;
height: 36;
}
.menubig li a{
background: white url('zw1.gif');
display: block;
color: white;
width: auto;
padding-left: 5px;
text-decoration: none; font-style:normal; font-weight:bold; font-size:11px; font-family:Arial, Verdana, Helvetica, sans-serif; padding-right:0; padding-top: 3px; padding-bottom: 0;
}
* html .menubig li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 106px;
height: 36;
color:yellow;
}
.menu li a:active{
color: yellow;
}
.menubig li a:visited{
color: yellow;
}
.menubig li a:hover{
background-image: url('zw2.gif');
color: black;
}


.kmenu{
margin: 0;
padding: 0;
width: 106px;
height: 20;
}
.kmenu li a{
background: white url('zwg1.gif') repeat-x bottom left;
color: black;
display: block;
width: auto;
padding-left: 5px;
text-decoration: none; font-style:normal; font-variant:normal; font-weight:bold; font-size:11px; font-family:Lucida Grande, Trebuchet MS, Verdana, Helvetica, sans-serif; padding-right:0; padding-top:2px; padding-bottom:0;
}
* html .kmenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 106px;
height: 20;
}
.kmenu li a:hover{
background-image: url('zwg2.gif');
color: white;
}


.menubigNL{
margin: 0;
padding: 0;
width: 106px;
height: 36;
}
.menubigNL li a{
background: white url('nl1.gif');
display: block;
color: black;
width: auto;
padding-left: 5px;
text-decoration: none; font-style:normal; font-weight:bold; font-size:11px; font-family:Arial, Lucida Grande, Trebuchet MS, Verdana, Helvetica, sans-serif; padding-right:0; padding-top: 3px; padding-bottom: 0;
}
* html .menubigNL li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 106px;
height: 36;
color:white;
}
.menu li a:active{
color: white;
}
.menubigNL li a:visited{
color: white;
}
.menubigNL li a:hover{
background-image: url('nl2.gif');
color: #990000;
}


.menubigNLD{
margin: 0;
padding: 0;
width: 106px;
height: 48;
}
.menubigNLD li a{
background: white url('nl11.gif');
display: block;
color: black;
width: auto;
padding-left: 5px;
text-decoration: none; font-style:normal; font-weight:bold; font-size:11px; font-family:Arial, Lucida Grande, Trebuchet MS, Verdana, Helvetica, sans-serif; padding-right:0; padding-top: 3px; padding-bottom: 0;
}
* html .menubigNLD li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 106px;
height: 48;
color:white;
}
.menu li a:active{
color: white;
}
.menubigNLD li a:visited{
color: white;
}
.menubigNLD li a:hover{
background-image: url('nl12.gif');
color: #990000;
}



.menubigINT{
margin: 0;
padding: 0;
width: 106px;
height: 36;
}
.menubigINT li a{
background: white url('int1.gif');
display: block;
color: black;
width: auto;
padding-left: 5px;
text-decoration: none; font-style:normal; font-weight:bold; font-size:11px; font-family:Arial, Lucida Grande, Trebuchet MS, Verdana, Helvetica, sans-serif; padding-right:0; padding-top: 3px; padding-bottom: 0;
}
* html .menubigINT li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 106px;
height: 36;
color:white;
}
.menu li a:active{
color: white;
}
.menubigINT li a:visited{
color: white;
}
.menubigINT li a:hover{
background-image: url('int2.gif');
color: darkblue;
}


.menubigINTL{
margin: 0;
padding: 0;
width: 106px;
height: 48;
}
.menubigINTL li a{
background: white url('int11.gif');
display: block;
color: black;
width: auto;
padding-left: 5px;
text-decoration: none; font-style:normal; font-weight:bold; font-size:11px; font-family:Arial, Lucida Grande, Trebuchet MS, Verdana, Helvetica, sans-serif; padding-right:0; padding-top: 3px; padding-bottom: 0;
}
* html .menubigINTL li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 106px;
height: 48;
color:white;
}
.menu li a:active{
color: white;
}
.menubigINTL li a:visited{
color: white;
}
.menubigINTL li a:hover{
background-image: url('int12.gif');
color: darkblue;
}





.menubigBNL{
margin: 0;
padding: 0;
width: 106px;
height: 36;
}
.menubigBNL li a{
background: white url('bnl1.gif');
display: block;
color: black;
width: auto;
padding-left: 5px;
text-decoration: none; font-style:normal; font-weight:bold; font-size:11px; font-family:Arial, Lucida Grande, Trebuchet MS, Verdana, Helvetica, sans-serif; padding-right:0; padding-top: 3px; padding-bottom: 0;
}
* html .menubigBNL li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 106px;
height: 36;
color:white;
}
.menu li a:active{
color: white;
}
.menubigBNL li a:visited{
color: white;
}
.menubigBNL li a:hover{
background-image: url('bnl2.gif');
color: #000099;
}



.menubigg{
margin: 0;
padding: 0;
width: 106px;
height: 48;
}
.menubigg li a{
background: white url('zw11.gif');
display: block;
color: white;
width: auto;
padding-left: 5px;
text-decoration: none; font-style:normal; font-weight:bold; font-size:11px; font-family:Arial, Verdana, Helvetica, sans-serif; padding-right:0; padding-top: 3px; padding-bottom: 0;
}
* html .menubigg li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 106px;
height: 48;
color:yellow;
}
.menu li a:active{
color: yellow;
}
.menubigg li a:visited{
color: yellow;
}
.menubigg li a:hover{
background-image: url('zw12.gif');
color: black;
}


.elfblbl {
	FONT-SIZE: 8pt; COLOR: #00FFFF; FONT-FAMILY: Arial; font-weight: bold;
}
.elfdik {
	FONT-SIZE: 11; COLOR: #FFFF00; FONT-FAMILY: Arial; font-weight: bold;
}
.negen {
	FONT-SIZE: 9pt; COLOR: #000000; font-family: Arial, Verdana, Geneva, Helvetica, sans-serif; background-color: #FFFFFF;
}
.achtzwart {
	FONT-SIZE: 8pt; COLOR: #000000; font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;	font-weight: bold;	
}
.negendik {
	FONT-SIZE: 9pt; COLOR: #000000; font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;	font-weight: bold;
}
.achtwit {
	FONT-SIZE: 8pt; COLOR: #FFFFFF; font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;	font-weight: bold;	
}
.acht {
	FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Arial;
}	
.achtdik {
	FONT-SIZE: 8pt; COLOR: #5B0800; FONT-FAMILY: Arial; font-weight: bold;
}	
.achtgrijs {
	FONT-SIZE: 8pt; COLOR: #666666; FONT-FAMILY: Arial; font-weight: bold;
}	
.negengrijs {
	FONT-SIZE: 9pt; COLOR: #666666; FONT-FAMILY: Arial; font-weight: bold;		
}
.achtpaars {
	FONT-SIZE: 8pt; COLOR: #5C029C; FONT-FAMILY: Arial; font-weight: bold;
}
.negenpaars {
	FONT-SIZE: 9pt; COLOR: #5C029C; FONT-FAMILY: Arial; font-weight: bold;
}
.negenzwart {
	FONT-SIZE: 9pt; COLOR: #000000; FONT-FAMILY: Arial; font-weight: bold;	
}
.elf {
	FONT-SIZE: 11pt; COLOR: #000000; FONT-FAMILY: Arial; font-weight: bold;	
}
.kursief {
	FONT-SIZE: 8pt; COLOR: #5C029C; FONT-FAMILY: Arial; font-style: italic;
}
.tiendik {
	FONT-SIZE: 10; COLOR: #FFFF00; FONT-FAMILY: Verdana,Arial; font-weight: bold;
}
.elfgrijs {
	FONT-SIZE: 11; COLOR: #666666; FONT-FAMILY: Arial, Verdana; font-weight: bold;
}
.twaalfgrijs {
	FONT-SIZE: 12; COLOR: #666666; FONT-FAMILY: Arial, Verdana; font-weight: bold;
}
.elfwit {
	FONT-SIZE: 11; COLOR: #FFFFFF; FONT-FAMILY: Arial, Verdana; font-weight: bold;
}
.elfpx {
	FONT-SIZE: 11; COLOR: #000000; FONT-FAMILY: Arial, Verdana; font-weight: bold;	
}	
.tienpaars {
	FONT-SIZE: 10; COLOR: #6600CC; FONT-FAMILY: Arial, Verdana; font-weight: bold;
}
.achtpaars {
	FONT-SIZE: 8pt COLOR: #6600CC; FONT-FAMILY: Arial, Verdana; font-weight: bold;
}	
.twaalfpaars {
	FONT-SIZE: 12; COLOR: #6600CC; FONT-FAMILY: Arial, Verdana; font-weight: bold;
}	
.veertienp {
	FONT-SIZE: 14; COLOR: #6600CC; FONT-FAMILY: Arial, Verdana; font-weight: bold;	
}	
.veertienpaars {
	FONT-SIZE: 16; COLOR: #5C029C; FONT-FAMILY: Arial, Verdana; font-weight: bold;
}
.14paars {
	FONT-SIZE: 14pt; COLOR: #5C029C; FONT-FAMILY: Arial, Verdana; font-weight: bold;
}
.paarstien {
	FONT-SIZE: 10pt; COLOR: #5C029C; FONT-FAMILY: Arial, Verdana; font-weight: bold;
}
.paarself {
	FONT-SIZE: 11pt; COLOR: #5C029C; FONT-FAMILY: Arial, Verdana; font-weight: bold;
}	
.elfzwart {
	FONT-SIZE: 11; COLOR: #000000; FONT-FAMILY: Arial, Verdana;
}	
.zwart10 {
	FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Arial, Verdana; font-weight: bold;
}
.twaalfzwart {
	FONT-SIZE: 13; COLOR: #000000; FONT-FAMILY: Arial, Verdana; font-weight: bold;	
}
.elfsmal {
	FONT-SIZE: 11; COLOR: #000000; FONT-FAMILY: Arial, Verdana; font-weight: normal;
}		
.twaalf {
	FONT-SIZE: 12; COLOR: #000000; FONT-FAMILY: Arial,Verdana;
}
.twaalfdik {
	FONT-SIZE: 12; COLOR: #FFFFFF; FONT-FAMILY: Arial,Verdana, sans-serif; font-weight: bold;
}
.tienwit {
	FONT-SIZE: 10pt; COLOR: #FFFFFF; FONT-FAMILY: Arial,Verdana, sans-serif; font-weight: bold;
}
.veertiendik {
	FONT-SIZE: 16; COLOR: #000000; FONT-FAMILY: Arial,Verdana; font-weight: bold;
}
.veertien {
	FONT-SIZE: 14; COLOR: #000000; FONT-FAMILY: Arial,Verdana; font-weight: bold;
}
.twintigdik {
	FONT-SIZE: 20; COLOR: #FFFFFF; FONT-FAMILY: Arial,Verdana; font-weight: bold;
}		
.blauwver {
	FONT-SIZE: 8pt; COLOR: #014E82; font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;			
}
.grootwit {
	FONT-SIZE: 12pt; COLOR: #FFFFFF; font-family: Arial, Verdana, Geneva, Helvetica, sans-serif; font-weight: bold;
}
.achttienwit {
	FONT-SIZE: 24pt; COLOR: #FFFFFF; font-family: Arial, Verdana, Geneva, Helvetica, sans-serif; font-weight: bold;
}
.witvet {
	FONT-SIZE: 9pt; COLOR: #FFFFFF; font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; font-weight: bold;
}
.tienptwit {
	FONT-SIZE: 10pt; COLOR: #FFFFFF; FONT-FAMILY: Arial, Verdana; font-weight: bold;
}
.elfwit {
	FONT-SIZE: 10pt; COLOR: #FFFFFF; FONT-FAMILY: Arial, Verdana; font-weight: bold;
}
.11wit {
	FONT-SIZE: 11pt; COLOR: #FFFFFF; FONT-FAMILY: Arial, Verdana; font-weight: bold;
}
.twaalfwit {
	FONT-SIZE: 12pt; COLOR: #FFFFFF; FONT-FAMILY: Arial; font-weight: bold; border-collapse: collapse;
}
.veertienwit {
	FONT-SIZE: 14pt; COLOR: #FFFFFF; FONT-FAMILY: Arial; font-weight: bold; border-collapse: collapse;
}
.paars8 {
	FONT-SIZE: 8pt; COLOR: #6600CC; FONT-FAMILY: Arial; font-weight: bold; border-collapse: collapse;
}

			/* NAVIGATION BUTTONS */
			.menu {
						height: 30px;
						width: 525px;
			}
			.cssnav	{
						position:relative;
						float: left;
						margin: 0; 
						padding: 0;
						font-family: arial, helvetica, sans-serif;
						font-weight:bold;
						color: yellow; 						
						background: url('grafiek_knoppen/SHWm2.gif') no-repeat;
						width: 105px;
						height: 30px;
	                    overflow:hidden	
			}
			.cssnav a {
						display: block;
						color: #000000;
						font-size: 11px;
						font-weight:bold;
						width: 105px;
						height: 30px;
						display: block;
						float: left;
						color: yellow; 
						text-decoration: none;
						overflow:hidden;/* for ie to hide extra height*/
						
			}
			.cssnav a:visited {
						font-weight:bold;
						color: yellow;						
				
			}				
			.cssnav a:hover {
						font-weight:bold;
						color: white;						
				
			}

			.cssnav img {width: 105px; height: 30px; border: 0px none; }
			* html a:hover {visibility:visible}
			.cssnav a:hover img{visibility:hidden}

			.cssnav span {
					    position: absolute;
					    left: 1px;top: 8px;
					    text-align: center;
					    width: 100px;
					    cursor: pointer;
					     
			}
			/* END OF NAVIGATION */
			
			
			
			
/* default link style - needed to make the :active work correctly in IE */
a:active {
color:#000;
}
a:hover {
color:#000;
}
a:visited {
color:#000;
}
a {
color:#000;
}
/* style the outer cntaining div to fit the landscape, portrait and buttons */
#album {
width:320px; 
height:360px; 
background:#eee url('grafiek/grijs.gif') no-repeat 0 0px;
border:1px solid #aaa;
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:320px 0 0 0; 
list-style-type:none; 
position:relative; 
width:320px;
}
/* remove the default image border */
.gallery img {
border:0px none;
}
/* make the list horizontal */
.gallery li {
float:left;
}
/* style the link text to be central in a surrounding box */
.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;
}
.gallery li a {
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;
}
/* position the images using an absolute position and hide them from view */
.gallery li a img {
position:absolute; 
top:-310px; 
left:10; 
visibility:hidden; 
border:0px none;
}
/* fix the top position for the landscape images */
.gallery li a img.landscape {
top:-310px;
}
/* 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 {
background:#ddd;
}
/* style the active/focus colors for the text boxes (required for IE) */
.gallery li a:focus {
background:#444; 
color:#fff;
}
.gallery li a:active {
background:#444; 
color:#fff;
}
/* make the images visible on active/focus */
.gallery li a:focus img {
visibility:visible;
}
.gallery li a:active img {
visibility:visible;
}