va/** Inhoudsopgave **
1.) Resets
2.) Algemene html-tags
3.) Header
4.) Footer
5.) Algemene blokken (kolblauw enzo), algemene dingen (.clear)
6.) Sprites en icons
7.) Opmaak per pagina
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
/** Kleuren
blauwe vakken: #919bae;
buttons/stippellijnen: #4b5970;
recensievlak: #aab2c0;
reactievlak/highlights: #b5bcc9
sterretjes: #dcddde;
linktekst: #d3d7e0;
bruine tekst: #281e1c;
lichtbruine tekst footer: #af9987;
#040303
#747c89
*/
@font-face {
	font-family: 'Museo500Regular';
	src: url('museo500-regular-webfont.eot');
	src: local('☺'), url('museo500-regular-webfont.woff') format('woff'), url('museo500-regular-webfont.ttf') format('truetype'), url('museo500-regular-webfont.svg#webfontdFM1pfk2') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Museo700Regular';
	src: url('museo700-regular-webfont.eot');
	src: local('☺'), url('museo700-regular-webfont.woff') format('woff'), url('museo700-regular-webfont.ttf') format('truetype'), url('museo700-regular-webfont.svg#webfont6FoneLaV') format('svg');
	font-weight: normal;
	font-style: normal;
}

/** Basis html-elementen **/
html,body {
 height: 100%;
}

body {
 background: white url(/img/bg-main.png) repeat-y 50% 0;
 /*0.625em resulteert in een basis van 10px. Als je bijv. 16px wilt gebruik je 1.6em */
 font: normal 0.625em/1em "Trebuchet MS", sans-serif;
 position: relative;
}
body.spot {
	background: url('/img/bg-paper.jpg') repeat top left transparent;
}
a:link,
a:visited,
a:active { color:#4b5970; }
a:hover { color:#FFab82 }

ol, ul { list-style: none }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

p { margin-bottom: 1em }
address { font-style: normal }
input {
 font: normal 0.9em/1em "Trebuchet MS",sans-serif;
 background: #e5e6e1; }

textarea {
 background: #e5e6e1;
 border:1px solid #4b5970;
 padding:4px; }

input:focus,
textarea:focus {
 background: white !important;
}

h1 { /* Het logo */ }
h2 { /* Koppen van blauwe blokken */
 color: white;
 font-size: 2.3em;
 }
 
h3 { /* Grootste kop binnen de blauwe blokken */
 color: white;
 font-size: 1.9em;
 font-weight: bold;
 padding-left: 10px;
 margin-bottom: 5px;
}
/* Een-na grootste kop binnen de blauwe blokken, voor bijvoorbeeld gemiddelde cijfer */
h4 { font-size: 1.2em;
 padding-left: 10px;}

sup {
 position:relative; 
 font-size:0.5em;
 top:-0.7em;
}

td {
 vertical-align: middle;
 padding: 0.5em;
}

/*** Containers en kolommen ***/
.c960, .c960a {
 margin: 0 auto;
 width: 960px;
 position: relative;
}
 
.c1, .c2, .c2a, .c2b, .c2c, .c3, .c4 {
 float: left;
 position: relative;
 margin: 0;
}
 
.c1,.c2,.c3 {
 margin-left:45px;
}

.c2a { width:220px; }

.c2b, .c3b {
 width:220px;
 margin-left:40px; 
}

.c2c { width: 210px;}

.c4 {
 width:870px;
 margin-left:45px;
 margin-right:45px;
}
 
#container { 
 min-height: 100%;
 position: relative;
 background: transparent url(/img/bg-header-full-beta.jpg) no-repeat center 0; 
 font-size: 1.3em;
 line-height: 1.4em;
}

/*** Header ***/

div#error {
  color: #D8000C;
  background: #FFBABA;
  border: 1px solid #D8000C;
  left: 10px;
  position: fixed;
  top: 10px;
  padding: 5px;
  border-radius: 2px;
}

#dak { 
 background: transparent url(/img/bg-rep.png) repeat-x 0 bottom;
 height: 20px;
 margin-bottom:-20px;
}
div#container > header {
 display: block;
    height:224px;
    margin-bottom: -40px;
}

.landing header {
 margin-bottom: 0;
}

header .omvattend {
    height:168px;
    padding-top: 60px;
    width:960px;
    margin:0 auto;
    position: relative;
}

header .omvattend #headerleft {
	position: absolute;
	background: url('/img/header_left.png') no-repeat left top transparent;
	height: 180px;
	width: 20px;
	left: -20px;
	top: 20px;
}

header .omvattend #headerright {
	position: absolute;
	background: url('/img/header_right.png') no-repeat left top transparent;
	height: 180px;
	width: 20px;
	right: -20px;
	top: 20px;
}

#logo {
   margin-left:30px;
   width: 335px;
   height: 85px;
   position: absolute;
}
   
#logo a {
  display:block;
  height:85px;
  background:url(/img/header-logo.png) no-repeat 0 0;
}
#logo a:hover { background-position:0 -85px }
#logo a:active { background-position: 1px -84px; }
#logo span { display: none }

#kreet {
 margin-left: 440px;
 margin-top: -10px;
 position: absolute;
 text-align: center;
 width: 350px;
}

#kreet span {
	font-family: 'Shadows Into Light', sans-serif; 
	 -moz-transform: rotate(-5deg);  
       -o-transform: rotate(-5deg);  
  -webkit-transform: rotate(-5deg);  
      -ms-transform: rotate(-5deg);  
          transform: rotate(-5deg);  
             filter: progid:DXImageTransform.Microsoft.Matrix( 
                     M11=0.9961946980917455, M12=0.08715574274765817, M21=-0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
               zoom: 1;
	font-size: 36px;
	color: #3A312F;
	left: 30px;
	line-height: 1;
	position: relative;
	top: 15px;
}
#kreet.kort span {
	font-size: 28px;
	top: 25px;
}

#navigatie {
 text-align:right;
 margin-right: 30px;
 margin-top: 0.5em;
}

div.overlabel-wrapper {
 position: relative;
 clear: right;
 float: right;
 display: block;
 margin-right: 30px;
}

header #loginform #login-button {
 clear: right;
 float: right;
 margin-right: 30px;
 padding: 2px 8px !important;
 border: none;
}

header #loginform #ww,
header #loginform #geb {
 height: 20px;
 width: 96px;
 margin-bottom: 3px;
 border: solid 1px #999;
 background: #E5E6E1;
 padding: 1px 1px 1px 3px;
 -moz-border-radius: 0;
 -webkit-border-radius: 0;
 border-radius: 0;
}

nav a:link,
nav a:visited,
nav a:active {
 font: bold 1.2em/1.2 "Museo", "Trebuchet MS", sans-serif;
 text-decoration: none;
 color: #E5E6E1;
}

nav a:hover {
 color: white;
}

/** Footer **/
footer {
 display: block;
 height:150px;
 width: 100%;
 position: absolute;
 bottom: 0;
 background: transparent url(/img/bg-rep.png) repeat-x 0 55px;
 font-size:0.9em;
 color:#af9984;
}

footer .c960 {
 padding-top:75px;
 height:75px;
 background:transparent url(/img/footer-lepel.png) no-repeat right 3px;
}

footer a:link,
footer a:active,
footer a:visited {
 text-decoration:underline;
 color:#af9984;
}

footer a:hover {
 color:orange;
}

footer ul {
	list-style: none;
}
footer li {
	float: left;
	margin-right: 10px;
}

/*** Main container ***/
#maincontainer {
 padding-bottom: 150px;
 margin: 40px auto 0 auto;
 width: 960px;
 background:url("/img/bg-main.png") repeat-y scroll 0 45px transparent;
}

.landing #maincontainer {
	background:url("/img/bg-main.png") repeat-y scroll 0 45px transparent;
	margin:50px auto 0 auto;
	width:960px;}
.landing.loggedin #maincontainer .c3 { margin-top: -31px }
 
/** Blauwe blokken **/

.kolblauw {
  background: #919bae;
  border-bottom: solid 1px #888;
  color:#040303; 
  margin-bottom: 30px;
  min-height: 130px;
  -o-box-shadow: 2px  2px 2px rgba(0,0,0,.3);
  -moz-box-shadow: 2px 2px 2px rgba(0,0,0,.3);
  -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.3);
  box-shadow: 2px 2px 2px rgba(0,0,0,.3);
}

.kolblauw a:link,
.kolblauw a:active,
.kolblauw a:visited {
  color:#4b5970;
  text-decoration:none;
}

.kolblauw a:hover { color: #FFAB82; }

.blok220 { width: 220px; margin-top: -37px; background: transparent url(/img/sprite-lepels.png) -820px -22px no-repeat;}
.blok340 { width: 340px; margin-top: -45px; background: transparent url(/img/sprite-lepels.png) -480px -12px no-repeat;}
.blok480 { width: 480px; margin-top: -50px; background: transparent url(/img/sprite-lepels.png) 0 0 no-repeat;}
.c3 .blok220 { margin-top: 0}
 
.blok220 h2 {
 padding: 5px 0 0 10px;
 height: 36px;
}
.blok340 h2 {
 padding: 6px 0 0 10px;
 height: 46px;
}
.blok480 h2 {
 padding: 23px 0 0 10px;
 height: 40px;
 width: 450px;
}
.blok220 .kolblauw { background: #919bae url(/img/sprite-lepels.png) -820px -62px no-repeat;}
.blok340 .kolblauw { background: #919bae url(/img/sprite-lepels.png) -480px -64px no-repeat;}
.blok480 .kolblauw { background: #919bae url(/img/sprite-lepels.png) 0 -62px no-repeat;}

.kolblauw>div { padding: 10px 12px; }
h2 span.jouw {color:#4b5970;}
.loggedin span.jouw { color: white}

 
/*
 *  jQuery's User Interface
 */ 
 
.ui-dialog {
 font-size:0.7em !important;
 
}
.ui-dialog-content {
 height:50px !important;
 min-height:50px !important;;
}
.ui-dialog-buttonpane {
 height:25px !important;
}

#datepicker {
 width:100px;
 cursor: pointer;
}

.ui-accordion-content {
 background:transparent !important;
 color:#474e56 !important;
}
.ui-accordion-content p {
 margin:0 !important;
}
.ui-accordion-content p a {
  color:#474e56;text-decoration:underline;
}

.ui-accordion-content p a:hover {
  color:#040303;text-decoration:none;
}

.num {
 float: left;
 color: gray;
 font-size: 13px;
 text-align: right;
 margin-right: 6pt;
 padding-right: 6pt;
 border-right: 1px solid gray;
}

.ui-slider {
 border:1px solid #e8e8e8 !important;
 background:url('/img/bg-slider.png') repeat-y top center !important;
}
.ui-slider-handle {
 background:transparent url('/img/bg-slider-handle.png') no-repeat top center !important;
 border:none !important;
}

.awesome, .awesome:visited {
 background: #768192; 
 display: inline-block; 
 padding: 5px 10px 6px; 
 color: white !important; 
 text-decoration: none;
 -moz-border-radius: 5px; 
 -webkit-border-radius: 5px;
 -moz-box-shadow: 1px 0 1px rgba(0,0,0,0.5);
 -webkit-box-shadow: 1px 0 1px rgba(0,0,0,0.5);
 border-radius: 5px;
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 border:none;
 border-bottom: 1px solid rgba(0,0,0,0.25);
 margin-bottom:0.4em;
 position: relative;
 cursor: pointer;
 text-decoration:none !important;
}

.awesome:hover { background: #4b5970; color: #fff; }
.awesome:active { top: 1px; background: #4b5970 !important; }
.awesome,
.awesome:visited,
.medium.awesome,
.medium.awesome:visited { 
 font-size: 1em;
 font-weight: bold;
 line-height: 1em;
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
.large.awesome, .large.awesome:visited  { font-size: 1.1em; padding: 8px 14px 9px; }

/*
 * Help pagina's
 */

.helptitle {
	color: white;
	font-family: Museo700Regular;
	font-size: 18px;
	font-weight: normal !important;	
}

.helpsubtitle {
	background: transparent url(/img/logo-64.png) 0 0 no-repeat;
	padding-left: 70px;
	padding-top: 10px;
	display: block;
	height: 55px;
}

dl.faq dt {
	color: #000000;
	display: block;
	font-weight: bold;
	padding: 25px 0 5px;
}

dl.faq dd {
	border-bottom: 1px solid #CCCCCC;
	display: block;
	padding-bottom: 25px;
	color: #666666;	
}

.faqantwoorden {
	float:  left;
	width: 960px;
	position: relative;
}

.kolblauw ul.faq {
	padding: 10px 12px;
}

.kolblauw h4 {
	margin-bottom: -.5em;
}

div.faqantwoorden dl.faq {
	margin: 0 45px 2em;
}

div.faqantwoorden h4 {
	margin-left: 45px;
	padding-left: 0;
}

 /*
  * Formulieren
  */
#aanmeldform label,
#locatieform label,
#recensie-form label,
#loginform label,
#instellingen label {
 display:block;
}

#aanmeldform li,
#locatieform li,
#instellingen li{
 margin-bottom: 0.5em;
}

.msg,
#aanmeldform input,
#locatieform input,
#recensie-form input,
#loginform input,
#instellingen input,
#nieuwsbrief input {
 padding: 5px;
 border: solid 1px #999;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
}

.msg {
 font-size: 0.9em;
 color: #281E1C;
 padding: 5px 1em;
 background: #eee;
}

#locatieform input {
 width: 180px;
}
#locatieform #postcode {
 width: 44px;
 float: left;
}
#locatieform #stad {
 width: 128px;
}
#locatieform #straat {
 float: left;
 width: 140px;
}
#locatieform #huisnummer {
 width: 28px;
}

.goed {
 background: #F0FEE9 !important;
}

.fout {
 background: #FFCFCF !important;
 border-color: red;
}

input.button {
 background:#485871;
 color:white;
 font-weight:bold;
 width:75px;
 border:none;
}

.watermark {
 font-size: 0.9em;
 color: #666;
}

/*
 * icoontjes
 *
 */
.iconen,
.icons {
  overflow:hidden; 
  list-style:none;
}
.iconen li,
.icons li {
 display: inline;
}

 .iconen a.icon,
 .icons a.icon {
  position: relative;
  float: left;
  height: 16px;
  width: 16px;
  overflow: hidden;
  text-indent: -300px;
 }

 
.icon {
  width:16px;
  height:16px;
  vertical-align:bottom;
  background-image: url(/img/icons.png);
  background: transparent url(/img/icons.png) 0 0 no-repeat;
 }
 
.social_icon {
	width: 16px;
	height: 16px;
	display: block;
	overflow: hidden;
  	background-image: url(/img/social_icons.png);
  	background: transparent url(/img/social_icons.png) 0 0 no-repeat;
  	text-indent: -600px;
 }
.aicon { cursor:pointer; }

.ico-footer-twitter {background-position: 0 -16px;}
.ico-footer-twitter:hover {background-position: -16px -16px;}
.ico-footer-facebook { background-position:0 0}
.ico-footer-facebook:hover { background-position:-16px 0}

.ico-edit {background-position: -96px 0;}
.ico-edit.aan,
.ico-edit.aicon:hover {background-position: -96px -16px;}

.ico-com {background-position:-304px 0;}
.ico-com-edit,
.ico-beoordeling-edit {background-position:-80px 0;}
.ico-com-edit.aan,
.ico-com-edit.aicon:hover,
.ico-beoordeling-edit.aicon:hover {background-position:-80px -16px}
.ico-com-verw,
.ico-beoordeling-verw {background-position:-64px 0;}
.ico-com-verw.aan,
.ico-com-verw.aicon:hover,
.ico-beoordeling-verw.aan,
.ico-beoordeling-verw.aicon:hover {background-position:-64px -16px}
.ico-com-add {background-position:-48px 0;}

.ico-w-up {background-position:-16px 0;}
.ico-w-up.aan,
.ico-w-up.aicon:hover {background-position:-16px -16px;}

.ico-w-down {background-position:-32px 0;}
.ico-w-down.aan,
.ico-w-down.aicon:hover {background-position:-32px -16px;}

.ico-fav {background-position: -128px 0;}
.ico-fav.aan,
.ico-fav.aicon:hover {background-position: -128px -16px;}

.ico-kopje {background-position:-144px 0;}

.ico-flag {background-position:-160px 0;}
.ico-flag.aan,
.ico-flag.aicon:hover {background-position:-160px -16px;}
.ico-w {background-position:-176px 0;}

.ico-ak {background-position:-56px 0;} 
.ico-ak.aan,
.ico-ak.aicon:hover {background-position:-56px -16px} 

.ico-info {background-position:-224px 0;}
.ico-info.aan,
.ico-info.aicon:hover {background-position:-224px -16px;}

.ico-ticket {background-position:-320px 0;}
.ico-refresh {background-position:-336px 0;}
.ico-slotje {background-position:-352px 0;}
.ico-slotjeopen {background-position:-368px 0;}

.ico-verw {background-position: -288px 0;}
.ico-twitter {background-position: -192px 0;}
.ico-twitter.aan,
.ico-twitter.aicon:hover { background-position: -192px -16px}
.ico-trip {background-position: -256px 0;}
.ico-facebook {background-position: -208px 0;}
.ico-facebook.aan,
.ico-facebook.aicon:hover {background-position: -208px -16px}
.ico-mail {background-position: -240px 0;}
.ico-mail.aan,
.ico-mail.aicon:hover {background-position: -240px -16px}

.museo-25.n0 {background-position: 0px 0px}
.museo-25.n1 {background-position: -25px 0px}
.museo-25.n2 {background-position: -50px 0px}
.museo-25.n3 {background-position: -75px 0px}
.museo-25.n4 {background-position: -100px 0px}
.museo-25.n5 {background-position: -125px 0px}
.museo-25.n6 {background-position: -150px 0px}
.museo-25.n7 {background-position: -175px 0px}
.museo-25.n8 {background-position: -200px 0px}
.museo-25.n9 {background-position: -225px 0px}

.museo-13.n0 {background-position: 0px -35px}
.museo-13.n1 {background-position: -13px -35px}
.museo-13.n2 {background-position: -26px -35px}
.museo-13.n3 {background-position: -39px -35px}
.museo-13.n4 {background-position: -52px -35px}
.museo-13.n5 {background-position: -65px -35px}
.museo-13.n6 {background-position: -78px -35px}
.museo-13.n7 {background-position: -91px -35px}
.museo-13.n8 {background-position: -104px -35px}
.museo-13.n9 {background-position: -117px -35px}
 
/*
 * landing.php
 *
 */
 .steden li { /* Cloud met steden op de landing-page */
  float: left;
  width: 80px;
  line-height: 20px;
  padding: 4px;
  font-size: 1.1em;
 }
hr {
	border-top: 1px dashed #666;
	clear: both;
}
 #stedennw {
    display: block;
 }

 .steden a:link,
 .steden a:visited {
  color: black;
  text-decoration: none;
 }

 #stedennw a:link,
 #stedennw a:visited {
    color: black;
    display: block;
    padding: 2px 5px 2px 30px;
    margin: 0 3px 0 1px;
    border-bottom: solid 1px #ccc;
    background: #e5e6e1;
 }
  
 .steden a:hover { color: #4B5970; }
 #stedennw a:hover {
    background: white;
 }
 .steden {
  list-style: none;
  margin: 10px 10px 0 10px; }
#zstad { margin: 0; }
#zstad input, #zspot input {
 background: #e5e6e1 url(/img/icons.png) no-repeat -385px 3px;
 border: solid 1px #999;
 padding: 5px 5px 5px 30px;
 margin: 0;
 -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
}
#zspot input { width: 275px; }
#zstad input { width: 157px; }

#aanmeldbutton {
 background: transparent url(/img/sprite-buttons.png) no-repeat 0 0;
 display: block;
 width: 230px;
 height: 50px;
}

#aanmeldbutton:hover {
 background-position: 0 -50px;
}
#aanmeldbutton:active {
 background-position: 1px -49px;
}
#aanmeldbutton span {
 text-indent: -9999px;
}

#updates li { 
border-bottom: 1px dashed #666;
 padding: 3px 10px  }
#updates time {
 font-size:0.8em;
 color:#666
}
#updates li:last-child { border: none }
#updates .soort {
 font-size:0.9em;
 color:#333;
}
/*
 * Koffiespotpagina
 */
.extra-info { font-size:0.8em; }

/*** Top5's enzo ***/
#top h2 {background: transparent url(/img/h-top-340.png) no-repeat scroll -340px 2px; padding: 0; height: 52px; }
#top5 h2 {background: transparent url(/img/h-top-340.png) no-repeat scroll 0 2px;
	-o-box-shadow: 2px  2px 2px rgba(0,0,0,.3);
  -moz-box-shadow: 2px 2px 2px rgba(0,0,0,.3);
  -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.3);
  box-shadow: 2px 2px 2px rgba(0,0,0,.3);
  padding: 0; height: 78px; }
#top5 h2 span,
#top h2 span {display: none;}
#top5 .kolblauw { background-image: none }

.toplijst li{
  border-top:1px dashed #747c89;
  color:#474e56;
  white-space:nowrap;
  position: relative; /* zodat we de inhoud absolute kunnen positioneren */
 }
 
.toplijst li>a:link,
.toplijst li>a:visited { /* de li moet erin  blijven */
 background: #919bae url(/img/sprite-top5.png) 3px -300px no-repeat;
    padding:5px 6px 3px 54px;
    display:block;
    height: 44px;
    text-decoration: none;
    position: relative;
}

.toplijst li>a:hover{
  background-color:#aab2c0;
  color:#040303;
 }

/* Als een toplijst-item door bijv. Google Maps geselecteerd wordt */
.toplijst li>a.selected {
	background-color:#aab2c0;
	color:#040303;
}
#top-pijl {
	position: absolute;
	top: 0;
	left: 340px;
}
.toplijst .koffiespotnaam,
.toplijst .koffiesoort { /* Todo: nettere oplossing voor te lange namen */
 overflow: hidden !important;
 width: 230px;
  display:block;
  font-size:1.6em;
  line-height: 1em;
  color:#040303;
 }
.toplijst .eenBeoordeling .koffiespotnaam,
.eenBeoordeling .getal {
color:#474e56; 	
}
.koffiespotnaam span { position: relative; left: 0}

.toplijst span.sub { margin-left:40px; }
.toplijst .rank {
 position: absolute;
 display: block;
 width: 36px;
 text-align: right;
 color: #ffffff;
 font-size: 1.4em;
 left: 3px;
 top: 25%;
}
.toplijst .rank .hash { font-size: 0.7em; }
.toplijst.koffies li>div {
 background: #919bae url(/img/sprite-top5.png) 3px -300px no-repeat;
    padding:5px 6px 3px 54px;
    display:block;
    height: 36px;
}
.toplijst.koffies li {
 clear: both;
}

.gem {
  position: absolute;
  right: 5px;
  top: 5px;
  display: block;
 }
 .aantal {
    font-size:10px;
    position:absolute;
    right:51px;
    top:25px;   
 }
/*voor de top20 moet alles ietsje kleiner */
.toplijst.top20 {
 border-bottom:1px dashed #747c89;
 display: none;
}
.top20 a {
 background-repeat: no-repeat;
 height: 36px !important;
}

.toplijst.top20 .koffiespotnaam {
 font-size: 1.2em;
 width: 275px;
}
.toplijst.top20 .stad {
 width: 275px;
}

#top20-button {
 display: block;
 border-top: 1px solid #a9b1c0;
 background: #9da7b8;
 text-align: center;
}

#top20-button:hover { color: black; }
.top20 li { clear: both;}

 .top5-1 a,.top5-1>div {background-position: 3px 0 !important;}
 .top5-2 a,.top5-2>div {background-position: 3px -50px !important;}
 .top5-3 a,.top5-3>div {background-position: 3px -100px !important;}
 .top5-4 a,.top5-4>div {background-position: 3px -150px !important;}
 .top5-5 a,.top5-5>div {background-position: 3px -200px !important;}

a.topjes {
 display:block;
 height:40px;line-height:40px;
 background-repeat:no-repeat;
  background-position: left center;
  border-bottom:1px dashed #747c89;
} 

a.topjes span.heading {
 font-size:1.1em;
 display:block;
 margin-left:40px;
 margin-top:4px;
}

a.topjes span.sub {
 font-size:0.8em;
 display:block;
 margin-left:40px;
}

.getal {
 color: #281e1c;
 font-size: 3.3em;
 line-height: 1em;
}
.top20 .getal,
.koffies .getal {
 font-size: 2.7em;
}
.getal.museo-25 {
 background-image: url(/img/sprite-number-museo.png);
 display:block;
 float:left;
  height:35px; 
  width:25px;
  overflow:hidden;
  text-indent:-300px;
 }
 
 .getal.museo-13 {
  background-image: url(/img/sprite-number-museo.png);
  height:35px; 
  display:block; 
  float:left;
  width:13px;
  overflow:hidden;
  text-indent:-300px;
 }

.kop-beoordelingen {
 font-size:2em;
 color:white;
 line-height:1.5em;
 margin-left:4px;
 }
.kop-beoordelingen span.cntrls {
 font-size:0.5em;
 width:200px;
 float:right;
} 
.recensie {
 margin:4px;
 margin-top:10px;
 margin-bottom:15px;
 width:862px;
 background:#a3aaba;
}

.rec-hoofd {
 padding-top:4px;
 padding-bottom:6px;
 
}
.rec-cntrls {
 padding-bottom:4px;
 padding-top:6px;
 
}

.rec-tekst {
 padding-top:6px; padding-bottom:6px;
}
.rec-koffie-kop {
 padding-top:4px;
 padding-bottom:6px;
 
}
.rec-koffie {
 font-size:1.5em;
 color:#040303;
 padding-left:30px;
 line-height:40px;
 
}

.voegactie {
 cursor:pointer;
}

.kol1, .kol2 {
 background:#a3aaba;
}

/*
 * voeg recensie toe
 *
 */
 
 #recensie-tekst {
  display: block;
  width: 432px;
  height: 8em;
  color: #281E1C;
  font: italic 1em/1.5 "Trebuchet MS",sans-serif;
 }
 
 .mening {
  width:190px;
 }
.slider { margin:8px 35px 0 -6px;}
.srt { font-size: 1.3em; }

#koffiekeuze li {
 clear: left;
 margin: 0;
}
#koffiekeuze {
 background: #e5e6e1;
}

#koffiekeuze dt
 {
 height: 40px;
 padding: 4px 0 4px 44px;
 padding-left: 16px;
}

#koffiekeuze dt .pijltje {
 display: block;
 float: right;
 padding: 9px 12px 15px 8px;
 border-left: solid 1px #a0a0a0;
}

#koffiekeuze dd ul {
 display: none;
}

#koffiekeuze dd a:link,
#koffiekeuze dd a:active,
#koffiekeuze dd a:visited {
 color:black;
 display:block;
 background: transparent url(/img/sprite-coffees.png) 0 0 no-repeat;
 padding: 4px 10px 4px 44px;
 height: 40px;
 border-top: solid 1px #a0a0a0;
}

#koffiekeuze dd a:hover {
 background-color: white;
}

#koffie-beoordelingen li {
 background: #e5e6e1 url(/img/sprite-coffees.png) 0 0 no-repeat;
 height:45px;
 margin-bottom:12px;
 padding:12px 0 2px 44px;
 position:relative;
}

#koffie-beoordelingen .gem {
 position: absolute;
 margin-left: 230px;
}

.cappuccino { background-position: 4px 0 !important}
.cappuccino-scuro {background-position: 4px -50px !important }
.cappuccino-con-syrup {background-position: 4px -100px !important }
.espresso {background-position: 4px -150px !important }
.espresso-con-panne {background-position: 4px -200px !important }
.espresso-macchiato {background-position: 4px -250px !important }
.koffie,.filterkoffie,.americano {background-position: 4px -300px !important }
.latte-macchiato {background-position: 4px -350px !important }
.lungo {background-position: 4px -400px !important }
.ristretto {background-position: 4px -450px !important }

 /*
  * toon stad
  */

#map_canvas {
	background:#edeae2;/*kleur van Google Maps bebouwing*/
	overflow: hidden;
	border:solid 1px #999;
}
#map_canvas h3 {
 margin:0;
 padding:0;
 border-bottom: solid 1px #999;
 font-size: 1em;
 color: black;
}

#map_canvas a {
 color: #919bae;
}
#map_canvas a:hover {
 color: #af9984;
}

#addspotbutton {
 cursor: pointer;
 display: block;
 height: 50px;
 width: 230px;
 border: none;
 background: transparent url(/img/sprite-buttons.png) no-repeat -230px 0;
}
#addspotbutton:hover { background-position: -230px -50px; }
#addspotbutton:active { background-position: -229px -49px; }

#voegtoebutton {
 cursor: pointer;
 display: block;
 height: 50px;
 width: 153px;
 border: none;
 background: transparent url(/img/sprite-buttons.png) no-repeat -676px 0;
}
#voegtoebutton:hover { background-position: -676px -50px; }
#voegtoebutton:active { background-position: -675px -49px; }
/*
  * mijn
  */
.mijn-rec {
 display:block;
 padding-top:5px; padding-bottom:10px;
 border-bottom:1px dashed #747c89;
}

.mijn-rec .locatie {
 margin-left:10px;margin-right:10px;
 font-size:1.6em;
 display:block; 
}
.mijn-rec .controls {
margin-left:10px;margin-right:10px;
 font-size:0.8em;
}

.sessie .onder {
 margin-left:20px; margin-right:10px;
 margin-bottom:5px;
 font-size:0.8em;
}
.sessie .boven {
 margin-top:5px;
 
}
.ranglijst {
 height:auto;
}
.geenimage {
 height:auto;
 background-image:none;
 margin-right:10px;;
 padding-left:30px;
 color:#040403 !important;
}

.ico-lepel-kenner {background-position: -128px -48px;}
.ico-lepel-kenner-ster {background-position: -128px -32px;}

.ico-lepel-leut {background-position: -144px -48px;}
.ico-lepel-leut-ster {background-position: -144px -32px;}

/** Welkomstpagina na aanmelden **/
ul#welkom-mogelijkheden li {
 background: transparent url(/img/logo-64.png) 0 0 no-repeat;
 padding-left: 70px;
}
ul#welkom-mogelijkheden h3 {
 font-size: 1.4em;
}
ul#welkom-mogelijkheden p {
 padding-left: 10px;
}
/*
 * Nieuwe standaarden.
 *
 */
/* http://sonspring.com/journal/clearing-floats */

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/** Recensies **/
#meningbutton {
 display: block;
 height: 50px;
 width: 217px;
 background: transparent url(/img/sprite-buttons.png) no-repeat -460px 0;
}
#meningbutton:hover { background-position: -460px -50px; }
#meningbutton:active { background-position: -459px -49px; }

.message { /* bericht bij een spot */
	font-weight: bold;
	padding: 9px 45px;
	background: #FFE13E;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FFE13E), to(#FFC703)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, #FFE13E, #FFC703); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient(top, #FFE13E, #FFC703); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #FFE13E, #FFC703); /* IE10 */
	background-image:      -o-linear-gradient(top, #FFE13E, #FFC703); /* Opera 11.10+ */
	background-image:         linear-gradient(top, #FFE13E, #FfC703);
	        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFE13E', EndColorStr='#ANC703'); /* IE6–IE9 */
	border-top: 1px solid #999;
	border-bottom: 1px solid rgb(191,138,1);
}
.remove-srt {
background:url('/img/ico_cross.png') no-repeat scroll 0 0 transparent;
left:-5px;
position:absolute;
text-indent:-9999em;
top:-5px;
width:18px;
}

.info-balk .iconen {
  list-style:none;
  float: right;
  width: 32px;
}

/*
 * NIEUWE SPOTPAGINA 20111222
 *
 */
.left {
	float: left;
}

.right {
	float: right;
}

a.coffeebutton {
	background: url("/img/coffeebutton_left.png") no-repeat scroll left top transparent;
	color: #E5E6E1;
	display: block;
	float: right;
	font-family: Museo500Regular;
	font-size: 20px;
	font-weight: normal !important;
	height: 50px;
	line-height: 48px;
	padding: 0 0 0 12px;
	text-decoration: none;
}

a.coffeebutton:hover {
	background: url("/img/coffeebutton_left_hover.png") no-repeat scroll left top transparent;
	color: white;
	
}
a.coffeebutton span {
    background: transparent url('/img/coffeebutton_right.png') no-repeat right top;
    display: block;
    height: 50px;
    weight: 50px;
    float: left;
    padding-right: 62px;
    text-shadow: 1px 1px 0 #917E72;
    
    
}

body.spot #maincontainer {
	background: white;
    background-image: none;
    border-left: 1px solid #EBEBEB;
    border-right: 1px solid #EBEBEB;
    max-width: 920px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
}

.box660 {
	width: 71.739130434783%;
	float: left;
}

body.spot aside {
	width: 23.91%;
	float: right;
	background: #F0F0F0;
	font-size: 12px;
	margin-top: -30px;
	box-shadow: 0 0px 2px rgba(0,0,0,.3);
}

body.spot aside > section {
	border-top: 4px solid white;
	padding: 20px 9.0909090909%;
	float: left;
	width: 81.8182%;
}

body.spot aside > section:first-child {
	border-top: none;
}

.spot #maincontainer h1 {
	font: normal 24px/36px Museo700Regular;
	color: #ccc;
	padding: 6px 0;
}
.spot #maincontainer h1 .org {
	color: #281E1C;
	font-size: 36px;
	line-height: 44px;
}
.spot #maincontainer h1 a:link,
.spot #maincontainer h1 a:visited {
	text-decoration: none;
	color: #ccc;
}

.spot-info #map_canvas {
	height: 203px;
	width: 100%;
	margin-bottom: 40px;
}
.spot-info address {
	color: #281E1C;
	display: block;
	height: 30px;
	 float: left;
}
.spot-info address ul li {
	float: left;
	padding-left: 6px;
	margin-left: 6px;
	border-left: solid 1px #999;
}
.spot-info address ul li a:link,
.spot-info address ul li a:visited {
	text-decoration: none;
}
.spot-info address ul li:first-child {
	border-left: none;
	margin-left: 0;
	padding-left: 0;
}

a.button {
	float: right;
	border: 1px solid #CCCCCC;
	border-radius: 4px 4px 4px 4px;
	color: #281E1C;
	float: right;
	padding: 0 4px;
	text-decoration: none;
	background: #E5E6E1;
	font-size: 10px;
}

a.button:hover {
	background: white;
}

a.button.nonactief:hover {
	background: #FFBABA;
	color: #D8000C;
	border: 1px solid #D8000C;
}

/*
 * REVIEWS
 *
 * every review is enclosed in a div with class review hreview
 * the reviews follow the microformats hReview spec, so we can use these for styling
 */
#reviews header {
	background: #ebebeb;
	display: block;
	height: inherit;
	margin-bottom: 20px;
	padding: 4px 2px 4px 20px;
}
#reviews h3 {
	color: #281E1C;
	margin:0;
	padding: 0;
	float: left;
	line-height: 44px;
	font-family: Museo700Regular, "Trebuchet MS", sans-serif;
	font-weight: normal;
}
.employee {
	opacity: .6;
	 border-top: 4px solid red;
}
.review { margin-bottom: 32px; position: relative  }
.review .row { background: #ebebeb;  }
.review > .row	{ margin-bottom: 3px;  }
.reviewer { padding: 8px 0; }
.reviewer .spoon {margin-right: 20px; }
.reviewer {	width: 66%;	float:left; }
.review .dtreviewed {
	float: left;
	font-size: 11px;
	color: #281E1C;
	line-height: 30px;
}
.review .value-title {	margin-left: 10px; }/* date content of dtreviewed */
.review a.author:link,
.review a.author:visited {
	text-decoration: none;
	font-weight: bold;
	color: black;
	font-size: 14px;
}
.reply a.author:link,
.reply a.author:visited { font-size: 12px }
.review a.author:hover { color: #000033; }

.review blockquote {/* review body text */
	margin-left: 4.76%;
    min-height: 80px;
    width: 76.19%;
    float: left;
}
.review blockquote,
.reply q { 
	color: #281E1C;
    font: italic 14px/18px Georgia,serif;
   
}
.review-text-section {
	width: 420px;
	float: left;
	padding-left:20px;
	border-right: solid 4px #ffffff;
}
.review-rating-section {
	width: 215px;
	float: left;
}
.review-rating-section .row {
	height: 30px;
	border-bottom: solid 1px white
}
.review:hover .icons {
	opacity: 1;
	
}
.review .icons {
	opacity: 0;
	float: right;
	margin: 6px 10px;
	/* Firefox */
	-moz-transition: opacity .5s .2s;
	/* WebKit */
	-webkit-transition: opacity .5s .2s;
	/* Opera */
	-o-transition: opacity .5s .2s;
	/* Standard */
	transition: opacity .5s .2s;
}
.review .koffiesoort {
	font-size: 14px;
	line-height: 44px;
}
.review .avatar { float: left; width: 60px;}
.avatar img {
	width: 60px;
	height: 60px;
}
.beoordeling-balk {
	width: 220px;
	float: left;
}
.review .locality {	color: #999; }
.review .review-coffee-ratings li {
	border-bottom: dashed 1px white;
	height: 44px;
	padding: 0 10px;
	position: relative;
}
.review li .rating {
	position: absolute;
	right: 10px;
}
.reply,
.reply-form { margin-left:30px; margin-bottom: 4px}
.reply-form .submit {
	border: solid 1px #ccc;
	border-radius: 4px;
	color: #281E1C;
	padding: 4px;
	width: 90px;
	float: right;
}

.reply-form .submit {
	cursor: pointer;
}
.reply-form .submit:hover {
	background: white;
	color: black;
}
.reply-field {
	background: white;
	border-radius: 4px;
	border: solid 1px #ccc;
	font: italic 1em/1em "Trebuchet MS", sans-serif;
	color: #281E1C;
	padding: 4px;
	width: 520px;
}
.reply { background: #ebebeb; padding: 10px 20px }
.reply .avatar { float: left; width: 32px }
.reply .avatar img { float: left; width: 32px; height: 32px}
.reply q { display: inline }
.reply .dtreplied {
	font-size: 11px;
	color: #999999;
	line-height: 22px;
}
.reply .icons {
	float: right;
	margin: 0;
}
.reply .reply-content { margin: 0 52px; }
/* placeholder styling. These cannot be combined */
.reply-form input::-webkit-input-placeholder { color: #999 !important }
.reply-form input:-moz-placeholder { color: #999 !important }

#meningbutton {	float: right; }

div.rating { text-align: center; }

/* spot rating and bargraph */
section.spot_rating .getal {
	float: left;
	font-size: 9.53846em;
	width: 100%;
}

table.bargraph {
	font-size: 11px;
	width: 100%;
	line-height: 14px;
	margin-top: 1em;
}

.bargraph td {
	width: 10%;
	height: 12px;
	padding: 1px 2px;
}

.bargraph tr td > span {
display: block;
height: 10px;
}

#stars-6 { background: #78D3B5; }
#stars-5 { background: #5B949C; }
#stars-4 { background: #466C73; }
#stars-3 { background: #7E9390; }
#stars-2 { background: #B5BAAC; }
#stars-1 { background: #D8DCCF; }

.bargraph td + td {	width: 80%; }

.bargraph td + td + td {
	background: none;
	width: 10%;
	text-align: right;
}

section.spot_social > div {	width: 50%; }

section.spot_social a.ico-fav {
margin-top: 1px;
float: left;
color: inherit;
	width: auto;
	padding: 2px 6px 2px 20px;
	border: 1px solid #B5BAAC;
	text-decoration: none;
	border-radius: 2px;
	background: #DDD url('../img/icon_fav.png') no-repeat left top;
}

section.spot_social a.ico-fav.faved {
		background-position: 0 -18px;
	}

section.spot_social a.ico-fav:hover {
	background-position: 0 -18px;
		background: #ccc url('../img/icon_fav.png') no-repeat left top;
	
}

section.spot_averages ol { margin-top: 1em; }

section.spot_averages ol li {
	float: left;
	padding-left: 26px;
	 background: transparent url(/img/sprite-coffees_24.png) 0 0 no-repeat;
	 margin-left: -11px;
	 width: 97%;
}

.spot_averages ol li.cappuccino { background-position: 0 -8px !important}
.spot_averages ol li.cappuccino-scuro {background-position: 0 -58px !important }
.spot_averages ol li.cappuccino-con-syrup {background-position: 0 -108px !important }
.spot_averages ol li.espresso {background-position: 0 -158px !important }
.spot_averages ol li.espresso-con-panne {background-position: 0 -208px !important }
.spot_averages ol li.espresso-macchiato {background-position: 0 -258px !important }
.spot_averages ol li.koffie,.filterkoffie,.americano {background-position: 0 -308px !important }
.spot_averages ol li.latte-macchiato {background-position: 0 -358px !important }
.spot_averages ol li.lungo {background-position: 0 -408px !important }
.spot_averages ol li.ristretto {background-position: 0 -458px !important }

section.spot_averages span.koffiesoort {
	font-size: 1.0769230769em;
	width: 79%;
	line-height: 32px;
	display: block;
	float: left;
	
}

section.spot_averages span.getal {
	font-size: 2.6923076923em;
	float: right;
}

section.spot_nearby ul { margin-top: 1em; }

section.spot_nearby ul li {
	margin-bottom: .2em;
	color: #281E1C;
}

section.spot_nearby ul li a {
	text-decoration: none;
	color: black;
	 font-weight: bold;
}

section.spot_nearby ul li a:hover {	color: #281E1C; }

a.locality:hover, section.spot_nearby ul li a:hover, a.author:hover, address a:hover  {
	color: #78D3B5 !important; 
}

/*
* jQuery UI CSS Framework
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
*/

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; }

/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }

/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }

/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Component containers
----------------------------------*/
.ui-widget { font-family: "Trebuchet MS"; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: "Trebuchet MS"; }
.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff; color: #222222; }
.ui-widget-content a { color: #222222; }
.ui-widget-header { border: 1px solid #aaaaaa; background: #768192 url(images/ui-bg_inset-soft_75_768192_1x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
.ui-widget-header a { color: #ffffff; }

/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default { border: 1px solid #768192; background: #768192 url(images/ui-bg_flat_75_768192_40x100.png) 50% 50% repeat-x; font-weight: normal; color: #ffffff; outline: none; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #ffffff; text-decoration: none; outline: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: 1px solid #485870; background: #485870 url(images/ui-bg_flat_40_485870_40x100.png) 50% 50% repeat-x; font-weight: normal; color: #ffffff; outline: none; }
.ui-state-hover a, .ui-state-hover a:hover { color: #ffffff; text-decoration: none; outline: none; }
.ui-state-active, .ui-widget-content .ui-state-active { border: 1px solid #768192; background: #768192 url(images/ui-bg_flat_65_768192_40x100.png) 50% 50% repeat-x; font-weight: normal; color: #ffffff; outline: none; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #ffffff; outline: none; text-decoration: none; }

/* Interaction Cues
----------------------------------*/
.ui-state-highlight, .ui-widget-content .ui-state-highlight {border: 1px solid #fcefa1; background: #fbf9ee url(images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x; color: #363636; }
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a { color: #363636; }
.ui-state-error, .ui-widget-content .ui-state-error {border: 1px solid #cd0a0a; background: #fef1ec url(images/ui-bg_inset-soft_95_fef1ec_1x100.png) 50% bottom repeat-x; color: #cd0a0a; }
.ui-state-error a, .ui-widget-content .ui-state-error a { color: #cd0a0a; }
.ui-state-error-text, .ui-widget-content .ui-state-error-text { color: #cd0a0a; }
.ui-state-disabled, .ui-widget-content .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
.ui-priority-primary, .ui-widget-content .ui-priority-primary { font-weight: bold; }
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }

/* Icons
----------------------------------*/

/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); }
.ui-state-default .ui-icon { background-image: url(images/ui-icons_ffffff_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); }
.ui-state-active .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_2e83ff_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_cd0a0a_256x240.png); }

/* Corner radius */
.ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }

.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em 2.2em; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; }
.ui-accordion .ui-accordion-content-active { display: block; }
/* Datepicker */
.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; }
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
.ui-datepicker .ui-datepicker-prev { left:2px; }
.ui-datepicker .ui-datepicker-next { right:2px; }
.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
.ui-datepicker .ui-datepicker-next-hover { right:1px; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px;  }
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
.ui-datepicker .ui-datepicker-title select { float:left; font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { width: 49%;}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right; }
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
.ui-datepicker td { border: 0; padding: 1px; }
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi { width:auto; }
.ui-datepicker-multi .ui-datepicker-group { float:left; }
.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
.ui-datepicker-row-break { clear:both; width:100%; }

.ui-dialog { position: relative; padding: .2em; width: 300px; }
.ui-dialog .ui-dialog-titlebar { padding: .5em .3em .3em 1em; position: relative;  }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 0 .2em; } 
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane button { float: right; margin: .5em .4em .5em 0; cursor: pointer; padding: .2em .6em .3em .6em; line-height: 1.4em; width:auto; overflow:visible; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }

/*----------------------------------*/
.ui-slider { left:12px;position:absolute;text-align:left;bottom:4px;width:276px; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; }

.ui-slider-horizontal { height: 10px; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

/* tipsy tooltips */
.tipsy, .popup, .confirm { font-size: 12px; line-height: 18px; position: absolute; padding: 5px; z-index: 100000; }
.tipsy-inner { background: #000; color: #FFF; max-width: 300px; padding: 10px; text-align: center; }

  /* Rounded corners */
.tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
  
/* Uncomment for shadow */
.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }
  
.tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }
  
/* Rules to colour arrows */
.tipsy-arrow-n { border-bottom-color: #000; }
.tipsy-arrow-s { border-top-color: #000; }
.tipsy-arrow-e { border-left-color: #000; }
.tipsy-arrow-w { border-right-color: #000; }
  
.tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none;  border-left-color: transparent; border-right-color: transparent;}
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
.tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }

/** Ajax-elementen **/

.popup p, .confirm p {
    background: #000;
    color: #FFF;
    max-width: 200px;
    padding: 10px 8px 10px 8px;
    text-align: center;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    box-shadow: 0 0 5px #000000;
    -webkit-box-shadow: 0 0 5px #000000;
    -moz-box-shadow: 0 0 5px #000000;
    opacity: .8;
}

/*
.confirm {
 position: absolute;
 background: #af9987;
 z-index:9999;
 color: white;
 font-weight: bold;
 padding: 6px;
 border-bottom: 1px solid #333;
 border-right: 1px solid #333;
 border-top: 1px solid #999;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}
*/

/* In plaats van Cufon */

h2,
.beoordeling-balk dd,
.getal,
.rank,
#welkom-mogelijkheden h3 {
	font-family: Museo700Regular;
	font-weight: normal !important;
}


/* BEHEER CSS */

body.beheer ul {
	list-style: none;
}

body.beheer div.kolom {
	width: 293.333333333333px;
	float: left;
	margin-left: 20px;
}

body.beheer div.kolom > div {
	padding: 10px;
	box-shadow: none;
}

body.beheer a.gebruiker {
	color: white;
}

body.beheer a.gebruiker:hover {
	color: black;
}

body.beheer li.flagged {
	padding: 5px;
	margin-bottom: 10px;
	border-bottom: 1px dashed black;
}

body.beheer li.flagged .flagger {
	width: 80px;
	overflow: hidden;
	float: left;
	margin-right: 10px;
}

body.beheer li.flagged .flaggeditem {
	
}

/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }


/* BLOG styling */

#blogwrapper {
	width: 60%;
	margin: 0 auto;
	padding-top: 20px;
	}
	
	#blogwrapper h1, #blogwrapper h2 {
		font-family: Museo700Regular;
		font-weight: normal !important;
		
	}
	
	#blogwrapper h1 {
		font-size: 1.8em;
		color: #444;
	}
	
	#blogwrapper h2 {
		font-size: 3em;
		margin-bottom: 0.6em;
	}
	
	#blogwrapper h2 a {
		text-decoration: none;
	}
	
	#blogwrapper > span {
		color: #777777;
		float: right;
	}
	#blogwrapper article {
		padding: 6em 0 2em;
		border-bottom: 1px solid white;
		box-shadow: 0px 1px 0px #C6DCFF;
		float: left;
	}
	
	#blogwrapper article p {
		line-height: 1.5em;
	}
	#blogwrapper article img {
		margin-bottom: 1em;
	}
	
	#blogwrapper article section.postmeta {
		color: #777;
		font-size: .8em;
	}
	
	#blogwrapper article a:hover {
		color: black;
	}