@charset "utf-8";
/* CSS Document */
/*paars: #50174F;
/*oranje:#F26522;
/*
======================================================
		General Layout
======================================================
*/
body {
	background-image:url(../img/bg.png);
	margin:0;
	padding:0;
}
/* main page width, for all pages includes margin:0 auto for centering */
#main,#start {
	width:960px;
	margin:0 auto;
	margin-top:5px;
	margin-bottom:5px;
	background-color:#F26522;
	background-image:url(../img/verloop.png);
}
#top_header {
	width:960px;
	margin:0 auto;
	text-align:left;
}
/* container for the main content in the category, overview and the detail pages */
#main #container {
	width:700px;
	float:left;
	z-index:1;
}
/* container for the first two pages (city/mood) */
#start #container {
	width:690px;
	float:left;
}
/* rounded corner + logo */
div #header {
	padding:0;
	height:90px;
	float:left;
	width:120px;
	background-repeat:no-repeat;
	background-image:url(../img/hoek_la.png);
}
/* world with current city */
div#subheader {
	height:67px;
	width:520px;
	margin-left:120px;
	background-image:url(../img/city_change.png);
	background-repeat:no-repeat;
	background-position:center;
	text-align:center;
}
/* the text props of the country/city name */
div#subheader p.country_name {
	font-size:14px;
	font-weight:bold;
	color:#FFF;
	margin:0;
	padding:0;
}
/* styling of the link underneath the cityname */
div#subheader a {
	font-size:11px;
	color:#CA48C8;
	text-decoration:none;
}
/* styling of the over state of the link */
div#subheader a:hover {
	text-decoration:underline;
	color:#FFF;
}
/* holder of the main content, this is the div where the template is being placed  */
#content {
	clear:left;
	padding-left:0px;
	padding-top:0px;
}
/* just a clear class */
.clear {
	clear:both;
}
div#content p {
	margin-bottom:10px;
}
/* div containing the bottom background-image to create the left rounded corner */
div#bottom {
	width:960px;
	height:60px;
	text-align:center;
}
div#bottom_image_left {
	background-image:url(../img/hoek_lu.png);
	background-repeat:no-repeat;
	height:60px;
	width:60px;
	float:left;
}
div#bottom_image_right {
	background-image:url(../img/hoek_ru.png);
	background-repeat:no-repeat;
	height:60px;
	width:60px;
	float:right;
}
/* property of the bottom img, to create the right rounded corner */
div#bottom img {
	float:right;
}
div#corporate {
	background:none; 
	text-align:center;  
	width:360px; 
	position:absolute; 
	left:50%; 
	border-left:1px solid #FFF;
	border-right:1px solid #FFF;
	border-top:1px solid #FFF;
	margin-left:-200px;
	margin-top:40px;
}
div#corporate ul {
	list-style:none; 
	margin:0; 
	padding:0;
}
div#corporate ul li {
	float:left; 
	width:120px; 
	margin:0; 
	padding:0;
	background-image:url(../img/list_mid.png);
	padding-bottom:2px;
}
div#corporate ul li a {
	color:#FFF;
	font-size:10px;
	font-weight:bold;
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
}
div#corporate ul li a:hover {
	text-decoration:underline;
}
/*
==========================================================
					Breadcrumb
==========================================================
*/

/* style of the breadcrumb */
div#breadcrumb {
	color:#50174F;
	font-size:9px;
	clear:both;
	padding-left:20px;
	margin-bottom:20px;
}
/* style for the link of a breadcrumb */
div#breadcrumb a {
	color:#FEFEFE;
}


/*
==========================================================
					Menu (with Moods)
==========================================================
*/

/* main holder for the rhs menu */
#ad {
	width:236px;
	float:right;
	z-index:99;
	right:0;
}
/* the little element on the top-left corner that indicates that an other mood can be selected */
#ad span.navigator {
	height:30px;
	width:150px;
	float:left;
	color:#CA48C8;
	font-size:12px;
	font-weight:bold;
	background-image:url(../img/menu_top.png);
}
#menu {
	float:right;
	width:236px;
	z-index:99;
	padding:0;
	margin:0;
	height:100%;
}
#menu_controller {
	width:150px;
}
#menu ul {
	padding:0;
	float:right;
	margin:0;
	margin-left:-10px;
	width:80px;
	height:100%;
}
#menu li {
	list-style:none;
	background-position:right;
	background-repeat:no-repeat;
	margin:0;
	padding:0;
	text-align:left;
	padding-left:15px;
	padding-top:8px;
	height:52px;
	
}

#menu li img {
	height:40px;
}

#menu li.dock1 { background-image:url(../img/dock1.png);}
#menu li.dock2 { background-image:url(../img/dock2.png);}
#menu li.dock3 { background-image:url(../img/dock3.png);}
#menu li.dock4 { background-image:url(../img/dock4.png);}
#menu li.dock5 { background-image:url(../img/dock5.png);}
#menu li.dock6 { background-image:url(../img/dock6.png);}

#menu img {
	padding:0;
	margin:0;
}
#ad_image {
	background-image:url(../img/bg.png);
	width:155px;
	float:right;
	border-left: 5px solid #50174F;
}
/*
.amount1 {height:90px;}
.amount2 {height:150px;}
.amount3 {height:210px;}
.amount4 {height:270px;}
.amount5 {height:330px;}
.amount6 {height:390px;}
.amount7 {height:450px;}
.amount8 {height:510px;}
*/
#bol {
	background-position:top;
	background-repeat:no-repeat;
	clear:right;
	width:165px;
	height:185px;
	float:right;
	background-image:url(../img/bol-onder.png);
	padding-left:50px;
}
#bol img {
	margin-top:5px;
	height:101px;
}
#bol span.mood_name {
	font-size:14px;
	color:#FFF;
	font-weight:bold;
}

/*
==========================================================
					Page Specific
==========================================================
*/
#page, #overview, #detail {
	padding-left:20px;
}
#explanation {
	float:right;
	width:270px;
	height:560px;
	background-color:#FFF;
}

/*
==========================================================
					Text styles
==========================================================
*/
div#content h1 {
	font-weight:bold;
	font-size:20px;
	color:#FFF;
}
div#content h2 {
	font-weight:bold;
	font-size:16px;
	color:#FFF;
}
div#content li {
	color:#FFF;
}
div#content li a {
	font-size:14px;
	color:#FFF;
}
/*
==========================================================
					Layout Cityselect page
==========================================================
*/
#city_select, #mood_select {
	position:relative;

}
#city_select_background {
	left:-5px;
	float:left;
	width:290px;
	height:450px;
	background-image:url(../img/city_select.png);
	background-repeat:no-repeat;
}

#city_select h1 {
	float:left;
	width:220px;
	font-size:24px;
	height:60px;
	margin-top:180px;
	margin-left:10px;
}
#city_select ul {
	position:absolute;
	left:210px;
}


#city_select ul li {
	margin:0;
	margin-bottom:8px;
	list-style-image:url(../img/empty.gif);
}

#city_select ul li a {
	padding:3px;
	height:35px;
	display:block;
	color:#50174F;
	padding-left:35px;
	font-size:16px;
	color:#50174F;
	text-decoration:none;
	font-weight:bold;
}
#city_select ul li a:hover {
	background-image:url(../img/city_select_button.gif);
	color:#FFF;
	font-size:20px;
	background-repeat:no-repeat;
}

li.city1 {  position:relative; left:0px; }
li.city2 { position:relative; left:30px; }
li.city3 {  position:relative; left:50px; }
li.city4 { position:relative; left:60px; }
li.city5 { position:relative; left:65px; }
li.city6 { position:relative; left:65px; }
li.city7 { position:relative; left:60px; }
li.city8 {  position:relative; left:50px; }
li.city9 { position:relative; left:30px; }
li.city10 {  position:relative; left:0px; }

/*
==========================================================
					Layout Moodselect page
==========================================================
*/
#mood_select #title_placeholder h1 {
	
	color:#FFF;
	width:220px;
	font-size:24px;
	height:60px;

}
#mood_select #title_placeholder {
	margin-top:180px;
	margin-left:10px;
	padding:0;
	float:left;
}

#mood_select ul {
	position:absolute;
	left:305px;
	top:-20px;
	width:390px;
	padding:0;
	margin:0;
}
#mood_select ul li {
	list-style:none;
	float:left;
	margin:0;
	padding:0;
	width:195px;
	height:145px;
	text-align:center;
}
#mood_select ul li img {
	margin-bottom:4px;
	height:101px;
}
#mood_select ul li a {
	display:block;
	color:#50174F;
	font-size:14px;
	padding:7px;
	height:130px;
	padding-bottom:10px;
	text-decoration:none;
	font-weight:bold;
	background-image:url(../img/mood_select_background2.png);
	background-repeat:no-repeat;
	background-position:center;
}
#mood_select ul li a:hover {
	background-image:url(../img/mood_select_background.png);
	background-repeat:no-repeat;
	background-position:center;
}
#mood_select ul li a:hover {
	color:#FFF;
}
#mood_select #mood_info {
	color:#FFF;
	width:200px;
	height:80px;
	margin-top:150px;
	padding:5px;
	float:left;
	z-index:999;
	vertical-align:middle;
}
#mood_select #mood_info span{
	float:left;
	position:relative;
}

/*
==========================================================
					Layout Category page
==========================================================
*/
div#blocks {
	width:100%;
	padding:0;
	margin-top:30px;
}
div#blocks ul.category {
	width:100%;
	margin:0;
	padding:0;
}
div #blocks ul.category li {
	list-style:none;
	float:left;
	width:214px;
	color:#F26522;
	padding:0;
	padding-top:2px;
	margin:0;
	margin-left:9px;
	margin-bottom:9px;
}
div #blocks ul.category li.first {
	margin-left:0;
	clear:both;
}
div #blocks ul.category li ul.item {
	padding:0;
	margin:0;
}
div #blocks ul.category li ul.item li.top {
	background-image:url(../img/list_header.png);
	background-repeat:no-repeat;
	text-align:center;
	font-size:12px;
	font-weight:bold;
	margin-bottom:0;
}
div #blocks ul.category li ul.item li {
	background-image:url(../img/list_mid.png);
	background-repeat:repeat;
	list-style:none;
	margin:0;
	padding:2px;
	padding-left:8px;
	width:204px;
	
	text-align:left;
	margin-bottom:1px;
	
}
div #blocks ul.category li ul.item li img {
	margin:0;
	padding:0;
	margin-top:-3px;
}
div #blocks ul.category li ul.item li.category_more {
	list-style:none;
	border:0;
	text-align:center;
	margin-bottom:0;
}
div #blocks ul.category li ul.item li.end {
	background-image:url(../img/list_end.png);
	background-repeat:no-repeat;
	list-style:none;
	height:15px;
	border:0;
}
div #blocks ul.category li ul.item li a {
	font-size:11px;
	font-weight:normal;
	text-decoration:none;
	color: #50174F;
}
div #blocks ul.category li ul.item li.category_more a {
	font-size:11px;
	font-weight:bold;
	text-decoration:none;
	color: #50174F;
}
div #blocks ul.category li ul.item li a:hover {
	text-decoration:underline;
	color:#FFF;
}
div#blocks {
	width:660px;
}
div#special {
	width:660px;
}
div#special div.header {
	background-image:url(../img/special_header_edit.png);
	background-repeat:no-repeat;
	height:25px;
	text-align:center;
	color: #50174F;
	font-size:14px;
	vertical-align:middle;
	padding:0;
	padding-top:7px;
	font-weight:bold;
	margin:0;
}
div#special div.content {
	background-image:url(../img/list_mid.png);
	background-repeat:repeat;
	margin:0;
	margin-top:1px;
	padding:10px;
	color: #50174F;
}
div#special div.specials {
	background-image:url(../img/list_mid.png);
	background-repeat:repeat;
	margin-top:1px;
}

div#special div.specials ul {
	float:left;
	list-style:none;
	text-align:center;
	width:660px;
	margin:0;
}

div#special div.specials ul li {
	color: #50174F;
	float:left;
	margin:1px;
	vertical-align:bottom;
	background-image:url(../img/list_mid.png);
	padding:5px;
	padding-bottom:10px;
	height:85px;
	width:208px;
}

div.end_row {
	background-image:url(../img/list_end_groot.png);
	width:660px;
	height:30px;
	clear:both;
	margin:0;
	padding:0;
}
div#special div.specials ul li:hover {
	background:none;
}
div#special div.specials ul li a {
	font-size:12px;
	text-decoration:none;
	color: #50174F;
}
div#special div.specials ul li a:hover {
	text-decoration:underline;
	color:#FFF;
}
div#special div.specials ul li img {
	max-height:70px;
	border:2px solid #FFF;
}
div#special div.specials p.special_text {
	font-size:7px;
	font-family:Arial, Helvetica, sans-serif;
	color: #50174F;
}

/*
==========================================================
					Layout Overview page
==========================================================
*/
div#overview h1 {
	background-image:url(../img/special_header_edit.png);
	background-repeat:no-repeat;
	height:25px;
	width:660px;
	text-align:center;
	color: #50174F;
	font-size:14px;
	vertical-align:middle;
	padding:0;
	padding-top:7px;
	font-weight:bold;
	margin:0;
}

div#overview ul { /* Styling of the list in the overview */
	float:left;
	list-style:none;
	text-align:center;
	width:660px;
	margin:0;
	background-image:url(../img/list_mid.png);
}

div#overview ul li { /* Styling of individual cells in the overview */
	color: #50174F;
	float:left;
	margin:1px;
	vertical-align:bottom;
	padding:5px;
	padding-bottom:10px;
	background-image:url(../img/list_mid2.png);
	height:85px;
	width:208px;
}
div#overview ul li:hover { /* Hover-state of the cells */
	background-image:none;
}
div#overview ul li.bottom { /* Bottom row with next/prev links */
	height:20px;
	background-image:none;
}
div#overview ul li a { /* Styling of the links in the overview cells */
	font-size:12px;
	text-decoration:none;
	color: #50174F;
}
div#overview ul li.bottom a {
	color:#FFF;
	font-size:12px;
}
div#overview a:hover { /* Styling of the links in the overview cells */
	text-decoration:underline;
}
div#overview li img {
	max-height:70px;
	border:2px solid #FFF;
}
/*
==========================================================
					Layout Estab Detail page
==========================================================
*/

div#detail h1 {
	background-image:url(../img/special_header_edit.png);
	background-repeat:no-repeat;
	height:25px;
	width:660px;
	text-align:center;
	color: #50174F;
	font-size:14px;
	vertical-align:middle;
	padding:0;
	padding-top:7px;
	font-weight:bold;
	margin:0;
}
div#detail div.content {
	background-image:url(../img/list_mid.png);
	display:block;
	width: 660px;
	color: #50174F;
	margin-top:1px;
	margin:0;
	padding:0;
}
div#detail div.content table.rating {
	padding:10px;
	padding-top:2px;
	padding-bottom:2px;
	background-color:#E75F20;
	width:660px;
}
div#detail div.content table.rating tr td {
	width:33%;
	color:#FFF;
}
div#detail div.description {
	padding:10px;
	margin:0;
}
div#content_holder {
	width:660px;
	padding:0;
	margin:0;
	padding-top:5px;
}
div#map_holder {
	float:right;

	margin-right:0;
	margin-top:5px;
	padding:0;
	width:430px;
}
div#map {
	height:240px;
	padding:0;
	margin:0;
}
div#map_holder ul.map_list li {
	background-image:url(../img/list_mid.png);
	padding:10px;
	padding-bottom:0;
	margin:0;
	list-style:none;
}
div#map_holder ul.map_list {
	padding:0;
	margin:0;
}
div#map_holder h1 {
	background-image:url(../img/list_header_medium.png);
	height:17px;
	background-repeat:no-repeat;
	font-size:12px;
	text-align:center;
	width:430px;
	padding:0;
	margin:0;
	font-weight:bold;
	margin-bottom:0;
	color:#F26522;
}
div#map_holder div.box {
	background-image:url(../img/list_mid.png);
	padding:10px;
	margin:0;
	padding-bottom:0;
}

div#map_holder div.map_holder_end {
	background-image:url(../img/list_end_medium.png);
	background-repeat:no-repeat;
	list-style:none;
	height:15px;
	border:0;
	margin-bottom:5px;
}

div#map_holder div.box ul {
	list-style:none;
	margin:0;
	margin-left:20px;
	padding:0;
}
div#map_holder div.box ul li {
	float:left;
	width:120px;
	margin:0;
	padding:5px;
}
div#map_holder div.box ul li a img {
	border:2px solid #FFF;
}

div#detail ul.data {
	padding:0;
	margin:0;
	margin-top:5px;
	list-style:none;
	width:100px;
	background-color:none;
}
div#detail ul.data li.top {
	background-image:url(../img/list_header.png);
	background-repeat:no-repeat;
	background-color:none;
	text-align:center;
	list-style:none;
	font-size:12px;
	font-weight:bold;
	margin-bottom:0;
	color:#F26522;
}
div#detail ul.data li.first {
	padding-top:5px;
}
div#detail ul.data li.select {
	height:25px;
	padding-bottom:10px;
}
div#detail ul.data li {
	background-image:url(../img/list_mid.png);
	background-repeat:repeat;
	background-color:none;
	color: #50174F;
	list-style:none;
	margin:0;
	padding:1px;
	padding-left:8px;
	font-size:11px;
	height:16px;
	width:204px;
	text-align:left;
	overflow:hidden;
	
}
div#detail ul.data li.big {
	height:100%;
}
div#detail ul.data li img {
	margin:0;
	padding:0;
	vertical-align:middle;
	margin-top:-3px;
}
div#detail ul.data li.category_more {
	list-style:none;
	border:0;
	text-align:center;
	margin-bottom:0;
}
div#detail ul.data li.end {
	background-image:url(../img/list_end.png);
	background-repeat:no-repeat;
	list-style:none;
	height:15px;
	border:0;
}
div#detail ul.data li a {
	font-size:11px;
	font-weight:normal;
	text-decoration:none;
	color: #50174F;
}
div#detail ul.data li.category_more a {
	font-size:11px;
	font-weight:bold;
	text-decoration:none;
	color: #50174F;
}
div#detail ul.data li a:hover {
	text-decoration:underline;
	color:#FFF;
}

div#map_holder ul.map_list li.mid div#photo_galery ul {
	background-image:none;
	margin:0;
	padding:0;

}
div#photo_galery ul li {
	background-image:none;
	width:100px;
	margin:0;
	padding:0;
	float:left;
}
.dateinput {
	font-size:10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	margin:0;
	padding:0;
	width:92px;
}
.date_button {
	position:relative;
	top:-13px;
	left:80px;
}
.date_submit {
	font-size:10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
form {
	margin:0;
	padding:0;
}
/*
div#content table tr, div#content table {
	background:none;
	border:0;
	padding:0;
	margin:0;
	width:660px;
}
div#content table tr td {
	text-align:left;
	border:0;
	background:none;
	margin:0;
	padding:2px;
	background-color:#FFF;
}
div#content tr.pagination {
	padding:0;
	margin:0;
	border:0;
}
div#content tr.pagination td {
	background-color:#50174F;
	color:#fff;
	margin:0;
	width:220px;
	padding:2px;
	border:0;
}
div#content tr.pagination td a  {
	color:#fff;
}
*/
.left { text-align:left;}
.middle { text-align:center;}
.right { text-align:right;}

/*
==========================================================
					sIFR styles (flash text replace)
==========================================================
*/



#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../img/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../img/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../img/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%	
	}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}

/*
==========================================================
					sIFR styles (flash text replace)
==========================================================
*/

/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */




.sIFR-hasFlash h3 {
	visibility: hidden;
	letter-spacing: -6px;
	font-size: 25px;
}

.sIFR-hasFlash h4 {
	visibility: hidden;
	letter-spacing: -5px;
	font-size: 21px;
}

.sIFR-hasFlash h5#pullquote {
	letter-spacing: -4px;
	visibility: hidden;
	font-size: 24px;
}