/*gallery.css*/
/* ================================================================================================================================ */ 
/* This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menu/complex_slides.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements.*/
/* ================================================================================================================================ */
/*border:2.0px solid red;*/
/*scrollbar bij de thumbs maakt galery onwerkzaam: overflow:hidden; overflow-y:scroll; */
.gallery {position:absolute; left:0px; width:100%; top:0; height:50%; margin:0; padding:0; text-align:left;}

.gallery ul.innergallery {position:relative; top:0; left:-0.5rem; margin:0; padding:0; width:105%; height:24%; list-style:none; border:0.0px solid orange;}
.gallery ul.innergallery li {display:inline; width:30%; height:1.25rem; float:left; text-align:center;}

.gallery ul.innergallery li a
{display:block; left:0; width:auto; height: 2.0em; color:#fff; font-size: 1.2em; line-height: 2.0em; text-align:center; text-decoration:none;}

.gallery ul.innergallery li a ul, 
.gallery ul.innergallery li ul 
{display:none;}

.gallery ul.innergallery li a ul,
.gallery ul.innergallery li ul  /*,deze deed het !!*/
{display:block; position:absolute; left:0; top:0;list-style:none; padding:0; margin:0; width:100%; height:100%;}

.gallery ul.innergallery li a ul li,
.gallery ul.innergallery li ul li
{display:inline; width:9%/*4.0rem*/; height:4.5rem; float:left; margin:0px;border:0.0px solid green;}

.gallery ul.innergallery li a ul li a,
.gallery ul.innergallery li a:hover ul li a,
.gallery ul.innergallery li a:active ul li a,
.gallery ul.innergallery li a:focus ul li a, 
.gallery ul.innergallery li:hover ul li a,
.gallery ul.innergallery li:active ul li a,
.gallery ul.innergallery li:focus ul li a 
{display:block; width:95%/*4.0rem*/; height:4.0rem; cursor:default; background:url(../../all/pics/arrow_gallery.gif) no-repeat; background-position:right bottom;float:left; text-decoration:none;}

.gallery ul.innergallery li a,
.gallery ul.innergallery li a ul li a{color: transparent;}

.gallery ul.innergallery li a ul li a img,
.gallery ul.innergallery li a:hover ul li a img,
.gallery ul.innergallery li a:active ul li a img,
.gallery ul.innergallery li a:focus ul li a img, 
.gallery ul.innergallery li ul li a img,
.gallery ul.innergallery li:hover ul li a img,
.gallery ul.innergallery li:active ul li a img,
.gallery ul.innergallery li:focus ul li a img 
{display:block;  width:95%/*3.6rem*/; height:4.2rem; border-bottom:0.5rem solid transparent; }  /*was border*/

.gallery ul.innergallery li a ul li a,
.gallery ul.innergallery li a:hover ul li a,
.gallery ul.innergallery li a:hover ul li a:hover,
.gallery ul.innergallery li a:hover ul li a:active,
.gallery ul.innergallery li a:hover ul li a:focus,
.gallery ul.innergallery li a:active ul li a:hover,
.gallery ul.innergallery li a:active ul li a:active,
.gallery ul.innergallery li a:active ul li a:focus,
.gallery ul.innergallery li a:focus ul li a:hover,
.gallery ul.innergallery li a:focus ul li a:active,
.gallery ul.innergallery li a:focus ul li a:focus,
.gallery ul.innergallery li:hover ul li a:hover,
.gallery ul.innergallery li:hover ul li a:active,
.gallery ul.innergallery li:hover ul li a:focus,
.gallery ul.innergallery li:active ul li a:hover,
.gallery ul.innergallery li:active ul li a:active,
.gallery ul.innergallery li:active ul li a:focus,
.gallery ul.innergallery li:focus ul li a:hover,
.gallery ul.innergallery li:focus ul li a:active,
.gallery ul.innergallery li:focus ul li a:focus 
{position:relative; white-space:normal; }

.gallery ul.innergallery li ul li a:active,
.gallery ul.innergallery li ul li a:focus
{color:#882222; font-size:0.8rem; line-height:1.0; margin:0.5rem 0 0 0.2rem;}

.gallery ul.innergallery li:hover ul li a:focus, 
.gallery ul.innergallery li:hover ul li a:active,
.gallery ul.innergallery li a:hover ul li a:active 
{position:static; outline:0;}

#fotos 	 {border:0px solid red;}  /*height in main  + main-responsive*/
#fotos_2 {border:0px solid blue;} /*height in main  + main-responsive*/
#foto, #foto_2 {position:absolute; overflow:hidden!important; left:0.0rem; top:5.0rem; width:80%; height:25rem; max-height:480px; padding:0; border:0; }
#foto img, #foto_2 img {width:100%;height:auto; margin:0;}

.gallery ul.innergallery li:hover ul li a:focus img,
.gallery ul.innergallery li:hover ul li a:active img,
.gallery ul.innergallery li a:hover ul li a:active img 
{position:absolute; left:0.5rem; top:0.0rem; height:auto; margin:5.0rem 0 0 0; padding: 0; border:0; border-bottom:4rem solid #D6A685;}

.gallery ul.innergallery li:hover ul li a:focus.hori img,
.gallery ul.innergallery li:hover ul li a:active.hori img,
.gallery ul.innergallery li a:hover ul li a:active.hori img 
{width:80%; border-right:4rem solid #D6A685;}

.gallery ul.innergallery li:hover ul li a:focus.vevi img,    /*vevi = verticaal + vierkant*/
.gallery ul.innergallery li:hover ul li a:active.vevi img, 
.gallery ul.innergallery li a:hover ul li a:active.vevi img 
{width:60%; border-right:14rem solid #D6A685;}

.gallery ul.innergallery li:hover ul li a:focus.tall img, 
.gallery ul.innergallery li:hover ul li a:active.tall img, 
.gallery ul.innergallery li a:hover ul li a:active.tall img 
{width:50%; border-right:14rem solid #D6A685;}

.gallery ul.innergallery li:hover ul li a:focus.smal img, 
.gallery ul.innergallery li:hover ul li a:active.smal img, 
.gallery ul.innergallery li a:hover ul li a:active.smal img 
{width:80%; border-right:4rem solid #D6A685; border-bottom:14rem solid #D6A685;}