@charset "utf-8";
/* CSS Document */


/*------------------------------- CSS reset ---------------------------------*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,input,textarea,blockquote,th,td {
	margin: 0;
	padding: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
fieldset,img { 
	border: 0;
}
address,caption,cite,code,dfn,th,var {
	font-style: normal;
	font-weight: normal;
}
ol,ul {
	list-style: none;
}
caption,th {
	text-align: left;
}
h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
} 
q:before,q:after {
	content:'';
}
abbr,acronym,iframe {
	border: 0;
}
a, object {
	outline: none;
}
.clear {
	clear: both;
}


/*------------------------------- Body ---------------------------------*/

body {
	font-family: Verdana, Geneva, sans-serif;
	background: url(../images/bg.gif) no-repeat bottom fixed #616264;
}

html, body, #container { height: 100%;}

body > #container { height: auto; min-height: 100%;}


/*------------------------------- Headings ---------------------------------*/

h1 { color: #FFF200; font-size: 16px;}
h2 { color: #FFF200; font-size: 14px;}
h3 { color: #FFF200; font-size: 13px;}
h4 { color: #FFF200; font-size: 12px;}
h5 { color: #FFF200; font-size: 13px;}
h6 { color: #FFF200; font-size: 11px;}


/*------------------------------- Container ---------------------------------*/

#thunder { background: url(../images/thunder.png) no-repeat top center;}
#container {
	margin: 0 auto;
	width: 950px;
}


/*------------------------------- Header ---------------------------------*/

#header {
	width: 950px;
	height: 140px;
	overflow: hidden;
}

/* logo */
#logo {
	float: left;
	width: 377px;
	height: 102px;
	margin: 20px 39px 18px 0;
	background: url(../images/logo.png);
	text-indent: -9999px;
}
	#logo a { display: block; height: 100%;}

/* socialmediaIcons */
.socialmediaIcons {
	float: left;
	width: 218px;
	height: 30px;
	margin: 95px 0 15px 0;
	overflow: hidden;
}
.socialmediaIcons li { float: left; text-indent: -9999px;}
.socialmediaIcons li a { display: block; height: 30px; background: url(../images/socialmediaIcons.png) no-repeat top right;}

.socialmediaIcons li.hyves a { background-position: 0 -30px; width: 76px;}
.socialmediaIcons li.hyves a:hover { background-position: 0 0; width: 76px;}
.socialmediaIcons li.twitter { float: left; width: 40px; border: none; }
.socialmediaIcons li.twitter a { background-position: -76px -30px; width: 39px;}
.socialmediaIcons li.twitter a:hover { background-position: -76px 0; width: 39px;}
.socialmediaIcons li.facebook a { background-position: -115px -30px; width: 36px; display: none; }
.socialmediaIcons li.facebook a:hover { background-position: -115px 0; width: 36px;}
.socialmediaIcons li.youtube a { background-position: -151px -30px; width: 67px; display: none; }
.socialmediaIcons li.youtube a:hover { background-position: -151px 0; width: 67px;}


/*------------------------------- Menu ---------------------------------*/

#menu {
	float: left;
	width: 296px;
	height: 110px;
	margin: 30px 20px 0 0;
	overflow: hidden;
}
#menu li {
	float: left;
	width: 148px;
	margin: 0 0 2px 0;
	font-size: 14px;
	font-weight: bold;
}
#menu li a { color: #FFF; text-decoration: none; }
#menu li a:hover, #menu li.active a { color: #FFF200;}


/*------------------------------- Wrapper ---------------------------------*/

#wrapper {
	width: 950px;
}


/*------------------------------- Main ---------------------------------*/

#main {	float: left; width: 712px; margin: 0 20px 0 0;}
#main .mainTop { width: 712px; height: 20px; background: url(../images/mainTop.png);}
#main .mainBottom { width: 712px; height: 20px; background: url(../images/mainBottom.png);}


/*------------------------------- Content ---------------------------------*/

#content {
	width: 672px;
	min-height: 553px;
	padding: 1px 20px 20px 20px;
	background: url(../images/mainBg.png);
	color: #FFF;
	font-size: 12px;
}
	#content a { color: #FFF200; text-decoration: none;}
	#content a:hover { color: #FFF;}

#content p { line-height: 16px;}
#content img, #content iframe, #content fieldset { border: 1px solid #FFF200;}
#content ol { list-style: decimal; margin: 12px 0; padding: 0 0 0 40px;}
#content ul { list-style: disc; margin: 0 0 0 25px;}
#content legend { color: #FFF;}
#content fieldset { padding: 0 10px;}
#content hr { height: 1px; border: 0; border-top: 1px dashed #FFF; margin: 10px 0;}

table.contact {
  width: 100%;
}
table.contact tr td {
  padding: 4px;
}
table.contact tr td input[type=text] {
  border: 1px solid #fff200;
  background: url(../images.form.gif) repeat-x #fff bottom;
  padding: 2px;
  width: 150px;
  height: 15px;
  color: #000;
  font: 11px Verdana;
  margin: 2px 0;
}
table.contact tr td input[type=text].invalid {
  border: 1px solid red;
}
table.contact tr td input[type=text]:hover {
  border: 1px solid #FFED00;
}
table.contact tr td input[type=submit] {
  border: 1px solid #FFF200;
  background: url(../images/form.gif) repeat-x white bottom;
  padding: 2px;
  width: 150px;
  color: black;
  font: 11px Verdana;
}

table.contact tr td input[type=submit]:disabled {
	border: 1px solid #000;
	background: #aaa;
}


/*------------------------------- Agenda ---------------------------------*/

#agenda {
	width: 712px;
	padding: 20px 0;
	background: url(../images/mainBg.png);
}
	#agenda a { color: #FFF200; text-decoration: none;}
	#agenda a:hover { color: #FFF;}

/* item */
#agenda .item {
	position: relative;
	width: 712px;
	height: 244px;
	margin: 0 0 30px 0;
	background: url(../images/agenda/end.png) no-repeat bottom;
}

/* left */
#agenda .item .left { float: left; width: 184px; height: 204px; background: url(../images/agenda/lines.png) no-repeat 0 165px;}

/* date */
#agenda .item .left .date { width: 145px; height: 114px; margin: 0 0 0 20px; padding: 30px 0 0 0; color: #000; font-weight: bold; text-align: center; overflow: hidden;}
#agenda .item .left .date .day { font-size: 16px; line-height: 17px;}
#agenda .item .left .date .number { font-size: 55px; line-height: 50px;}
#agenda .item .left .date .month { font-size: 15px; line-height: 16px;}

/* right */
#agenda .item .right { float: left; width: 528px; height: 204px;}

/* right:top */
#agenda .item .right .top { width: 490px; height: 135px; margin: 0 38px 20px 0; padding: 10px 0 0 0; overflow: hidden;}
#agenda .item .right .top .title { font-size: 24px; font-weight: bold; line-height: 23px;}
#agenda .item .right .top .description { color: #FFF; font-size: 50px; font-weight: bold; line-height: 50px;}
	#agenda .item .right .top .description a { color: #FFF; text-decoration: none; }
	#agenda .item .right .top .description a:hover { color: #FFF200;}

/* right:bottom */
#agenda .item .right .bottom { height: 22px; margin: 0 0 17px 10px; font-size: 18px; font-weight: bold; line-height: 22px; }
#agenda .item .right .bottom span { color: #FFF;}
#agenda .item .right .bottom .time {

}
#agenda .item .right .bottom .entrance {

}

/* roze */
#agenda .item.roze { color: #E2007A;}
#agenda .item.roze .date {  background: url(../images/agenda/roze.png);}

/* blauw */
#agenda .item.blauw { color: #009EE0;}
#agenda .item.blauw .date { background: url(../images/agenda/blauw.png);}

/* geel */
#agenda .item.geel { color: #FFED00;}
#agenda .item.geel .date { background: url(../images/agenda/geel.png);}

/* groen */
#agenda .item.groen { color: #B1C800;}
#agenda .item.groen .date { background: url(../images/agenda/groen.png);}

/* age */
#agenda .item .age { position: absolute; top: 0; right: 20px; width: 58px; height: 57px;}

/* bottom */
#agenda .bottom { width: 518px; height: 20px; line-height: 20px;} 

/* bottom:left */
#agenda .bottom .left { float: left; margin: 0 0 0 25px; color: #FFF; font-size: 11px;}

/* bottom:more */
#agenda .bottom .more { float: right; margin: 0 25px 0 0; padding: 0 15px 0 0; color: #FFF; font-size: 14px; font-weight: bold; background: url(../images/arrow.png) no-repeat right;}
#agenda .bottom .more a { color: #FFF; text-align: none;}
#agenda .bottom .more a:hover { color: #FFF200;}

/* extra */
#agenda .extra { padding: 0 30px; color: #FFF; font-size: 12px;} 
#agenda .extra hr { height: 1px; border: 0; border-top: 1px dotted #FFF; margin: 10px 0;}
#agenda .extra a { color: #FFF; font-size: 11px; border-bottom: 1px dotted #FFF;} 
#agenda .extra a:hover { color: #FFF200; border-bottom: 1px dotted #FFF200;} 
/* extra:h2 */
#agenda .extra h2 { font-size: 21px;} 
#agenda .extra.roze h2 { color: #E2007A;}
#agenda .extra.blauw h2 { color: #009EE0;}
#agenda .extra.geel h2 { color: #FFED00;}
#agenda .extra.groen h2 { color: #B1C800;}

/* entrance */
#agenda .entrance { }
#agenda .entrance h2 { font-size: 21px;} 
#agenda .entrance select {
	padding: 3px;
	border: 2px solid #FFED00;
	background: #FFF;
	font: 11px Verdana;
}
#agenda .entrance input[type=submit] {
	padding: 3px;
	border: 2px solid #FFED00;
	background: #FFF;
	font: 11px Verdana;
	cursor: pointer;
}


/*------------------------------- Sidebar ---------------------------------*/

#sidebar {
	float: left;
	width: 218px;
}
	#sidebar a { color: #FFF; text-decoration: none;}
	#sidebar a:hover { color: #FFF200;}

#sidebar h3 { color: #FFF; font-size: 13px;} 

/* sponsoren */
.sponsoren { width: 218px; height: 168px;}
.sponsoren .title { width: 198px; height: 27px; background: url(../images/blockBg.gif); color: #FFF; font-size: 13px; font-weight: bold; height: 27px; padding: 0 0 0 20px; line-height: 28px;}

/* sitelinks */
.sitelinks {
	color: #FFF;
	font-size: 13px;
	font-weight: bold;
}
.sitelinks li { display: block; height: 28px; padding: 0 0 0 20px; background: url(../images/arrow.png) no-repeat 200px; line-height: 28px;}
.sitelinks li.link1 { background-color: #454545;}
.sitelinks li.link2 { background-color: #7C7D80;}
.sitelinks li.link3 { background-color: #98999C;}

.twitter-title {
	color: #fff;
	font-size: 13px;
	font-weight: bold;
	display: block;
	height: 28px;
	line-height: 28px;
	background: #000;
	padding: 0 0 0 20px;
}

/* openingstijden */
.openingstijden {
	width: 218px;
	margin: 20px 0 0 0;
	color: #FFF;
	font-size: 11px;
	text-align: right;
}
.openingstijden h5 { color: #FFF200; font-size: 13px; margin: 0 0 5px 0;}
.openingstijden li { margin: 2px 0;}
.openingstijden li span { padding: 0 20px 0 0;}

/* fotoalbum */
.fotoalbum { width: 218px; margin: 28px 0 0 0;}
.fotoalbum img { width: 216px; height: 140px; border: 1px solid #FFF;}
.fotoalbum h3 { margin: 8px 0; padding: 0 0 0 20px;}

.fotoalbum .slide { position: relative; width: 216px; height: 140px;}
.fotoalbum .slide img { position: absolute; left: 0; top: 0; }

/* banner */
.banner { width: 218px;}
.banner img { width: 216px; height: 140px; border: 1px solid #FFF;}
.banner h3 { margin: 8px 0; padding: 0 0 0 20px;}

.twitter {
	width: 216px;
	border: 1px solid #fff;
	overflow: hidden;
}

.twitter .item {
	background: #fff;
	border-bottom: 1px solid #ccc;
	padding: 5px;
	font-size: 11px;
}

#sidebar .twitter .item a {
	color: #000;
	font-weight: bold;
}

.flexslider {
	margin-top: 10px;
}


/*------------------------------- Content -> Webshop ---------------------------------*/

.webshop {}

/* product-info-table */
.webshop .product-info-table { margin: 20px 0 0 0;}
.webshop .product-info-table table th { padding: 0 0 10px 0; color: #FFED00;}
.webshop .product-info-table table td { padding: 5px 0;}
.webshop .product-info-table table input[type=text] {
	padding: 3px;
	border: 2px solid #FFED00;
	background: none;
	color: #FFF;
	font: 11px Verdana;
}
.webshop .product-info-table table input[type=text]:hover { color: #FFED00;}

.webshop .product-info-table table input[type=submit] {
	padding: 2px;
	border: 2px solid #FFED00;
	background: none;
	color: #FFF;
	font: 11px Verdana;
	cursor: pointer;
}
.webshop .product-info-table table input[type=submit]:hover { color: #FFED00;}

.webshop .product-info-table .next-button { float: right; margin: 25px 0 0 0; padding: 3px; border: 2px solid #FFED00; background: none; color: #FFF; font: 11px Verdana; cursor: pointer;}
.webshop .product-info-table .next-button a { color: #FFF !important;}
.webshop .product-info-table .next-button a:hover { color: #FFED00 !important;}

/* customer-details */
.webshop .customer-details { margin: 20px 0 0 0;}
.webshop .customer-details input[type=text], .webshop .customer-details input[type=password] {
	margin: 2px 0;
	padding: 3px;
	border: 2px solid #FFED00;
	background: none;
	color: #FFF;
	font: 11px Verdana;
}
.webshop .customer-details select {
	margin: 2px 0;
	padding: 2px;
	border: 2px solid #FFED00;
	background: none;
	color: #FFF;
	font: 11px Verdana;
	cursor: pointer;
}
.webshop .customer-details input[type=submit] {
	padding: 2px;
	border: 2px solid #FFED00;
	background: none;
	color: #FFF;
	font: 11px Verdana;
	cursor: pointer;
}
.webshop .customer-details input[type=submit]:hover { color: #FFED00;}

.webshop .customer-details .back-button { float: left; margin: 25px 0 0 0; padding: 3px; border: 2px solid #FFED00; background: none; color: #FFF; font: 11px Verdana; cursor: pointer;}
.webshop .customer-details .next-button { float: right; margin: 25px 0 0 0; padding: 3px; border: 2px solid #FFED00; background: none; color: #FFF; font: 11px Verdana; cursor: pointer;}
.webshop .customer-details .next-button a, .webshop .customer-details .back-button a { color: #FFF !important;}
.webshop .customer-details .next-button a:hover, .webshop .customer-details .back-button a:hover { color: #FFED00 !important;}

input[type=submit]:disabled {
	background: red;
	border: none;
}


/*------------------------------- 3wmedia:logo ---------------------------------*/

#logo_3wmedia {
	position: fixed;
	bottom: 5px;
	right: 5px;
}


/*------------------------------- Footer ---------------------------------*/

#footer {
	width: 712px;
	margin: 15px 0;
	color: #FFF;
	font-size: 11px;
}
	#footer a { color: #FFF; text-decoration: none;}
	#footer a:hover { color: #FFF;}


/*------------------------------- Clearfix ---------------------------------*/

.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/*------------------------------- Fotoalbum ---------------------------------*/

#fotoalbum {}

#fotoalbum .thumbnails { float: left; margin: 0 5px 5px 0; text-align: center;}
#fotoalbum .thumbnails img { border: 1px solid #FFF;}
#fotoalbum .thumbnails img:hover { border: 1px solid #FFF200;}
#fotoalbum .thumbnails small { color: #FFF;}

#fotoalbum .album .thumbnail { float: left; margin: 0 5px 5px 0;}
#fotoalbum .album .thumbnail img { border: 1px solid #FFF;}
#fotoalbum .album .thumbnail img:hover { border: 1px solid #FFF200;}