/* Gallery styles */

#gallery {
	margin: 								0 30px 0 30px;
	width:									625px;				/* The width of the gallery */
	overflow:								hidden;
	background:								url(../img/slider/panel.jpg) repeat-x bottom center #ffffff;
}

#gallery #slides {
	height:									200px;				/* This is the slide area */
	width:									625px;				/* jQuery changes the width later on to the sum of the widths of all the slides. */
	overflow:								hidden;
	border-bottom:							5px solid #fff;		/* toegevoegd */
}

#gallery .slide {
	float:									left;
}

#gallery #menu {
	height:									35px; /*45px;*/		/* This is the container for the thumbnails */
}

#gallery ul {
	margin:									0px;
	padding:								0px;
}

#gallery li {													/* Every thumbnail is a li element */
	list-style:								none;
	width:									40px; /*60px;*/
	height:									35px;
	display:								inline-block;
	overflow:								hidden;
}

#gallery li.inact:hover 					{ background: url(../img/slider/pic_bg.png) repeat;	/* The inactive state, highlighted on mouse over */ }
#gallery li.act,
#gallery li.act:hover 						{ background: url(../img/slider/active_bg.png) top center no-repeat; /* The active state of the thumb */ }

#gallery li.act a {
	cursor:									default;
}

#gallery .fbar {												/* The left-most vertical bar, next to the first thumbnail */
	width:									2px;
	background:								url(../img/slider/divider.png) no-repeat right;
}

#gallery li a {
	display:								block;
	background:								url(../img/slider/divider.png) no-repeat right;
	height:									35px;
	padding-top:							10px;
}

#gallery a img {
	border:									none;
}

#gallery #menu .menuItem 					{ text-align: center; float: left; }

/* toegevoegd */

#gallery .slide.mixedContent				{ width: 625px; height: 200px; background: #eee url('../img/slide_back.gif') top left repeat-x; }
#gallery .slide.mixedContent img			{ float: right; border: 5px solid #e5e5e5; margin-left: 10px; }
#gallery .slide.mixedContent .textContent 	{ padding: 15px; }