/* ================================ +
   	    		HET KETELHUIS
 + ================================ */



/* 
** Made by: Edgar Vijgeboom & Ines Gall
** Website:	www.studioparkers.nl
*/



/* ================================ +
               STANDAARDS
+  ================================ */

/* start RESET DEFAULT styles */
*{ margin:0; padding:0; border:0px; }


body { 
	font-family:		Arial, Verdana, Helvetica, sans-serif; 
	font-size:			12px;
	line-height:		18px;
	color: 				  #000000;
}

* html li	{
	height:				1%;
	}
	
img { border:			0px; }	

ul { 
	list-style:			none;
	}

.clear {
	clear:				   both;
 }

.float_left {
	float: 				   left;
 }

.float_right {
	float: 				   right;
}

a {
  outline:         none;
}

textarea { 
  font-family:    Arial, Verdana, Helvetica, sans-serif; 
  font-size:      13px;
  padding:        1px;
  }


/* end RESET DEFAULT styles */


/* ================================ +
             GLOBAL LAYOUT
+  ================================ */

#container {
  width:            100%;
	text-align:			  center;  
  background:       #000000 url('../images/bg_ketelhuis2.jpg') repeat-x top left;
  background-color: #000000;
  margin-bottom:    -20px
  }
	
#maincontent {
  position:      relative;
  margin:        auto;
  width:         960px;
  }

#colum_left {
	width:               660px;
	float:               left;
	margin-top:          115px;
  overflow: hidden;
  }

#colum_right {
  width:              300px;
  float:              left;
	margin-top:         80px;
	background:         url('../images/bg_zwart65.png') repeat-y top left;
  }

#content {
	width:             560px;
	float:				     right;
	margin:  			     -5px 20px 0px 0px;
	background-color:	 #ffffff;
	text-align:  	     left;
  overflow:          hidden;
  }

#content_breed {
	width:             520px;
	float:				     left;
	margin:  			     7px 20px 0px 0px;
  padding:           0 20px 50px 100px;
  background:        url('../images/bg_content_breed.gif') repeat-y;
	text-align:  	     left
  }

#content_breed h2{
  font-size:				 18px;
  color:					   #ff0033;
  }

#carrousel {
  margin-left:       -5px; 
  height:            387px;
  }
  
#carrousel .still {
  margin:           7px 0;
  }
  
#carrousel .textbox {
  position:         absolute;
  left:             30px;
  top:              400px;
  width:            580px;
  z-index:          200;
  color:            #ffffff;
  text-align:       left;
  font-size:        14px;
  font-weight:      bold
  }
  
#carrousel a {
  color:            #ffffff
  }

/* ================================ +
              FONTS & LINKS
+  ================================ */
a { 
	color:				#ff0033;
	text-decoration:	none;
  }

a:hover { 
	text-decoration:	underline;
  }

h1 {
  font-size:				28px;
  line-height:      24px;
  color:						#0099dd;
  }

h2 {
  font-size:				18px;
  color:						#0099dd;
  }

a.link {
	color:				     #ffffff;
	text-decoration:	 underline;
	}
	
a.link:hover {
	color:				    #ff0033;
	text-decoration:	underline;
	}	
  
.pagetitel {
  width:          580px;
  margin-top:      20px;
  float:          right;
  text-align:     left;
  font-family:	  Arial, Verdana, Helvetica, sans-serif; 
	font-size:			32px;
  color:          #ffffff;
} 

/* ================================ +
               MENU & HEAD
+  ================================ */

#logo {
  position:       absolute;
  top:            10px;
  left:           5px;
  z-index:        10
 }

#menu {
	position:       absolute;
	top:            20px;
	right:          0;
  font-size:      16px;
  line-height:    19px;
  font-weight:    bold;
  color:          #ffffff;
	height:					25px;
  z-index:        100
 }


#menu li {
  float:          left;
  margin-left:    8px
  }

#menu a  {
  text-indent:        -5000px;
  display:            block;
  background-image:   url(../images/hoofdnavigatie.png);
  background-repeat:  no-repeat;
  height:             17px;
  border:             0px solid red
  }
 
#menu a.nav1 {width: 113px; background-position: 0px 2px; }
#menu a.nav2 {width: 121px;  background-position: 0px -28px; }
#menu a.nav3 {width: 42px;  background-position: 0px -58px; }
#menu a.nav4 {width: 118px; background-position: 0px -88px; }
#menu a.nav5 {width: 100px; background-position: 0px -118px; }
#menu a.nav6 {width: 77px;  background-position: 0px -148px; }

#menu a.nav1:hover {background-position: -200px 2px; }
#menu a.nav2:hover {background-position: -200px -28px; }
#menu a.nav3:hover {background-position: -200px -58px; }
#menu a.nav4:hover {background-position: -200px -88px; }
#menu a.nav5:hover {background-position: -200px -118px; }
#menu a.nav6:hover {background-position: -200px -148px; }


#menu .submenu_holder {
  position:           absolute;
  top:                22px;
  height:             130px;
  background-color:   #001a22;
  border-top:         2px solid #0099cc;
  z-index:            10;
  }
  
#menu .submenu  {
  display:            block;
  margin:             5px 12px 15px 9px;
  }
  
#menu .submenu li {
  width:              100%;
  font-size:          14px;
  font-weight:        normal;
  text-align:         left;
  color:              #ffffff;
  border-bottom:      1px dashed #4d5a5e;
  clear:              left;
  margin:             0;
  text-indent:        2px;
  line-height:        23px
  }

#menu .submenu a {
  color:              #ffffff;
  text-indent:        0;
  display:            inline;
  background-image:   none;
  background-repeat:  no-repeat;
  height:             auto;
  }
  
#menu li.last {
  border-bottom:      0px;
  }
  
#menu .submenu a:hover {
  color:             #ff0033;
  text-decoration:   none;
  }
  
#nav1 {
  left:              -1px;
  width:             137px;
  display:           none
  }

#nav2 {
  left:              138px;
  width:             147px;
  display:           none
  }

#nav5 {
  left:              504px;
  width:             144px;
  display:           none
  }
  
#nav6 {
  left:              633px;
  width:             140px;
  display:           none
  }
  
#nav6.submenu_holder {
   height:           130px;
  }

/* spoorboekje speellijst */

#spoorboekje {
	width:					    100%;
	min-height:         400px;
  z-index:            5
  }
  
#spoorboekje .kop {
  margin:             10px 10px 0 10px;
  }
  
#spoorboekje-content {
  padding:            0 10px 10px 5px;
  background-color:   #00090c;
  }

#spoorboekje table{
	width:					 280px;
	font-size:			 18px;
	font-weight:		 bold;
	text-transform:  uppercase;
	font-family:     Arial Narrow;
  }

#spoorboekje td{
	padding:				3px;
  }

#spoorboekje .title{
	width:					230px;
	text-align:			right;
  }

#spoorboekje .tijd{
	width:					40px;
	text-align:			right;
  }

#spoorboekje .dag {
	width:					120px;
	color:					#ff0033;
	font-size:			20px;
	float:					left;
  text-align:     center;
  padding:        0 5px 0 5px
  }

a.eerder {
	display:				block;
	width:					12px;
	height:					20px;
	float:					left;
	background:			url(../images/pijlen.gif) no-repeat 0px 2px;
  }

a.eerder:hover {
	background:			url(../images/pijlen.gif) no-repeat 0px -18px;
  }

a.later {
	display:				block;
	width:					14px;
	height:					20px;
	float:					left;
	background:			url(../images/pijlen.gif) no-repeat -23px 2px;
  }

a.later:hover {
	background:			url(../images/pijlen.gif) no-repeat -23px -18px;
  }

.datum {
	width:					120px;
	color:					#ffffff;
	font-size:			20px;
	float:					right;
}

a.meer {
  display:        block;
  width:          175px;
  height:         20px;
	margin-top:     10px;
  float:          right;
	text-align:     right;
	color:          #ff0033;
}

a.meer:hover {
  color:          #ffffff;
	text-decoration: none;
}


/* ================================ +
            ACTIE- INFOBLOKEN
+  ================================ */

.infoblok a.titel{
	display:					block;
	width:						300px;
	background-color:			#ff0033;
	color:						#ffffff;
	text-align:				left;
	margin-top:				55px;
	font-size:				22px;
}

.infoblok a.titel:hover {
  background-color:	#ffffff;
	color:          #ff0033;
	text-decoration: none;
}

.infoblok .margin10 {
  	margin-left:		10px;
	margin-top:			-15px;
	padding-bottom:		5px;
}

.infotext {
	color:						#ffffff;
	text-align:				left;
	background:				url(../images/bg_infobox.gif) repeat-x;
}

.infotext p{
	padding:		10px;
	font-weight:	Bold;
}

  
/* ================================ +
            filmoverzicht
+  ================================ */

.filmoverzicht {
	width:				560px;
	margin:				10px 0 0 10px;
	}

.filmoverzicht-headbg {
	width:         100%;
	height:        45px;
  background-color:   #001921;
 }

#agendadatum {
  position:       absolute;
  margin-top:     -23px;
  left:           495px;
  color:          #0596da;
  width:          140px;
  padding:        5px;
  }

.filmoverzicht-head {
	display:			  block;
	margin-left:		10px;
	padding-top:		10px;
	clear:				  both;
	}
	
.filmoverzicht-headbg h2 {
	color:          #ffffff;
  }

.filmoverzicht li{
	float:				left;
	display:			inline;
	height:				120px;
	padding-top:	10px; 
  line-height:  18px;
	border-top:1px dashed #333333;
	}
	
.filmoverzicht .plaatje {
	width:				160px;
	text-align:		left
	}
	
.filmoverzicht .thumb {
   margin-top:  4px;
   }
 
.filmoverzicht .filmtitel {
	width:				275px; 
	text-align:		left;
	}
	
.filmoverzicht .filmtitel a{
	display:			block;
	margin-bottom:	5px;
	font-size:		24px;
	font-weight:	bold;
	line-height:	25px;
	color:				#333333;
	}	
	
.filmoverzicht .filmtitel a:hover{
	font-size:		24px;
	color:				#ff0033;
	Text-decoration:	none;
	}		
	
.filmoverzicht .age {
	width:104px; 
	text-align:right;
	}	



/* ================================ +
            filmdetail
+  ================================ */

#filmbeeld {
	width:          640px;
  height:         380px;
  display:        inline;
  }

#filmbeeld img, #video {
  margin:         4px 0 3px 14px
}

a.btn_playtrailer {
	display:        block;
  width:          255px;
  height:         60px;
	background:			url(../images/btn_playtrailer.png) no-repeat 0 0;    
  position:       absolute;
  top:            240px;
  left:           210px;
}

a.btn_playtrailer:hover {
	display:        block;
  width:          255px;
  height:         60px;
	background:			url(../images/btn_playtrailer.png) no-repeat 0 -60px;    
}

#video {
	display:        none;
  width:          640px;
  height:         385px;
  overflow:       hidden;
  }

#filmfacts {
  width:          160px;
  padding:        20px;
  float:          left;
  text-align:     left;
}

#beschrijving {
  width:          320px;
  padding:        20px 0 20px;
  float:          left;
  text-align:     left;
}


#beschrijving-breed {
  width:          420px;
  padding-top:    20px;
  text-align:     left;
	margin-left:    50px
}

#speellijst {
  width:					300px;
  height:          470px;
  background-color:  #0099cc;
  overflow:        hidden;
  color:          #ffffff;
}

#speellijst table{
	width:				280px;
  margin:        10px;
  color:          #ffffff;
	text-align:			left;
}

#speellijst td{
	padding:				2px;
  height:        26px;
}

#speellijst .dagg{
	width:					85px;
	font-size:				16px
}

#speellijst .tijd {
  float:          left;
  width:          40px;
  font-weight:    bold;
  text-align:     left;
  margin-left:    5px;
  font-size:      16px;
}

#speellijst .streepje {
  padding-left:   10px;
  background:     url(../images/bg_lijn.gif) no-repeat 2px 0;   
}



/* ================================ +
            speciaal
+  ================================ */

#speciaalinfo {
  width:              260px;
  height:             210px;
  background-color:   #ff0033;
  overflow:           hidden;
  color:              #ffffff;
	text-align:         left;
	padding:            20px;
	font-size:          17px;
	font-weight:        bold
  }


#speciaalinfo h2 {
	font-size:         30px;
	color:             #1a262d;
	line-height:       30px
  }




/* ================================ +
            informatiepagina's
+  ================================ */

#informatie{
  width:          520px;
  padding-top:    20px;
  margin-left:    20px;
  float:          left;
  text-align:     left;
  }

.foto, #googlemap {
  width:          340px;
  float:          left;
  margin-left:    -80px;
  margin-bottom:  15px;
  }

#content_breed img {
  margin:         0 20px 15px -80px;
  float:          left;
 }

#content_breed table img {
  margin:       0
  }
  
#content_breed #offerte img {
  margin:       0;
  float:       none
  }
  
#googlemap {
  width:          400px;
  height:         300px;
  margin:         0 20px 7px -80px;
  }

.lijst {
  float:          left;
  width:          230px;
  list-style:			disc;
  margin-left:    13px;

  }

.tekst {
  width:          270px;
  float:          left;
  }

#offerte {
  background-color:  #4f788d;
  width:             560px;
  margin-left:       -20px;
  }
  
#offerte a{
	margin-left:	274px;
	margin-top:		5px;
  } 


#offerte.vraagvdweek {
  margin-left:      0px;
  }

/* ================================ +
            FORM ELEMENTS
+  ================================ */

input   {
  border:       1px solid white;
  }
  
.error {
  border:          1px solid #ff3333;
  }

label.error {
  display:          inline;
  width:            0px;
  border:           0;
	margin:           0
  }

#error {
  color:             #ff0000;
  width:             300px;
  display:           none;
  margin:			       10px 0 0 20px;
  padding:           5px;
  font-size:			   12px;
  font-weight:			 bold;
  background-color: #ffffff;
 }
 
#bevestiging {
  display:          none;
  padding-top:      10px;
  margin:            10px 0 0 20px;
  font-size:         12px;
  font-weight:       bold;
  color:             #ffffff;
  }

label {
  display:          block;
  float:            left;
  height:           25px;
  width:            120px;
  color:            #ffffff;
  margin-left:      20px;
}

#offerte input, #offerte textarea {
  width:            240px;
  } 

#offerte textarea {
  height:           150px;
  }
  
a.btn_verstuur {
	display:		block;
	width:			107px;
	height:			28px;
	background:  url('../images/btn_verstuur.gif') no-repeat 0 0;
}

a.btn_verstuur:hover {
	background:  url('../images/btn_verstuur.gif') no-repeat 0 -30px;
}

.bevestiging {
	margin-left:	20px;
	color:			#ffffff;
}

/* ================================ +
          	 FOOTER
+  ================================ */

#visfeedback {
  position:						absolute;
  margin-top:         -650px;
	width:							100px;
	left:								-20px;
  z-index:            0
 }

#footer {
 	width:					      100%;
	height:					      300px;
	background-image:     url('../images/bg_footer.png');
  background-repeat:    no-repeat;
  background-position:  top;
  margin-left:          -17px;
  }

.adres {
	width:						135px;
	margin-left:			115px;
	margin-top:				105px;
	float:						left;
	color:						#ffffff;		
	text-align:				left;	
  display:          inline;

}

.openingstijden {
	width:						170px;
	margin-left:			5px;
	margin-top:				105px;
	float:						left;
	color:						#ffffff;		
	text-align:				left;	
  display:          inline;
}

.toegang {
	width:						165px;
	margin-left:			10px;
	margin-top:				105px;
	float:						left;
	color:						#ffffff;		
	text-align:				left;	
    display:          inline;
}

.socialnetworks {
  margin:           20px 120px;
  float:            right;
  display:          inline;

}

.socialnetworks a {
  margin-left:      7px;
}


/* ================================ +
            KLEUREN
+  ================================ */

 .red {
	color:					#ff0033;
}

.wit {
	color:					#ffffff;
}

/* ================================ +
            TAB NAV
+  ================================ */
	
#tab_nav {
	width:				560px;
	}

#tab_nav li{
	float:				left;
	display:			inline;
	}

#tab_nav a {
	display:			block; 
	margin:				0; 
	padding:			0; 
	text-indent:		-1000em;
	text-decoration:	none;
	overflow:			hidden
	}

#tab_nav .nav_1 {width:109px;	height:45px;	background: url('../images/tab_nav.gif') no-repeat 0px 0px;}
#tab_nav .nav_2 {width:120px;	height:45px;	background: url('../images/tab_nav.gif') no-repeat -109px 0px;}
#tab_nav .nav_3 {width:102px;	height:45px;	background: url('../images/tab_nav.gif') no-repeat -229px 0px;}
#tab_nav .nav_4 {width:124px;	height:45px;	background: url('../images/tab_nav.gif') no-repeat -333px 0px;}
#tab_nav .nav_5 {width:105px;	height:45px;	background: url('../images/tab_nav.gif') no-repeat -457px 0px;}

#tab_nav .nav_1:hover {width:109px;	height:45px; background: url('../images/tab_nav.gif') no-repeat 0px -45px;}
#tab_nav .nav_2:hover {width:120px;	height:45px; background: url('../images/tab_nav.gif') no-repeat -109px -45px;}
#tab_nav .nav_3:hover {width:102px;	height:45px; background: url('../images/tab_nav.gif') no-repeat -229px -45px;}
#tab_nav .nav_4:hover {width:124px;	height:45px; background: url('../images/tab_nav.gif') no-repeat -333px -45px;}
#tab_nav .nav_5:hover {width:105px;	height:45px; background: url('../images/tab_nav.gif') no-repeat -457px -45px;}

#tab_nav .nav_1_actief {width:109px;	height:45px; background: url('../images/tab_nav.gif') no-repeat 0px -45px;}
#tab_nav .nav_2_actief {width:120px;	height:45px; background: url('../images/tab_nav.gif') no-repeat -109px -45px;}
#tab_nav .nav_3_actief {width:102px;	height:45px; background: url('../images/tab_nav.gif') no-repeat -229px -45px;}
#tab_nav .nav_4_actief {width:124px;	height:45px; background: url('../images/tab_nav.gif') no-repeat -333px -45px;}
#tab_nav .nav_5_actief {width:105px;	height:45px; background: url('../images/tab_nav.gif') no-repeat -457px -45px;}


/* ================================ +
           foto album
+  ================================ */

#content_breed  .albumfoto {
  margin:         20px 10px 10px 0;
  float:          left;  
}

#content_breed  .albumfoto img {
  margin:        0
}

#content_breed  .thumbfoto {
  float:        left;
  margin:       10px 10px 0 0;
  }

#content_breed  #fotozoom {
  display:            none;
  position:           absolute;
  left:               80px;
  width:              520px;
  height:             600px;
  padding:            20px;
  background-image:   url('../images/trans_wit.png');
  text-align:         center;
  }

#fotozoom img {
  margin:         0px;
 }
 
#content_breed  .sluitfoto {
  display:        none;
  position:       absolute;
  left:           605px;
  z-index:        2;
  font-weight:    bold;
}


#nieuwsbrief-inschrijving  {
	margin-top:      200px;
	text-align:      left;
  color:           #ffffff;
	}

#nieuwsbrief-inschrijving h1 {

}