/* 
 * [a] Dries Van haver
 * [c] Oskar D
 * [w] www.oskard.be
 * 
*/
html{height: 100%; margin: 0;}
body {margin: 0; font:12px "Helvetica Neue",Helvetica, sans-serif;color:#999;line-height: auto; background: #181212 url("../img/bg_repeat.jpg") repeat center; height: 100%;  /*font-weight: lighter;*/ letter-spacing: 0.2px;}
body.introBg{background: #000000;}

:focus {-moz-outline-style: none;}
a:active{outline: none;}

img, input{border: none;}
img.left{float:left; margin-right: 10px;}
img.promo{border: #666666 1px solid;}

a:link, a:visited, .orange{color: #FFB719;text-decoration: none;font-weight: normal;}
a:hover, a:active{color: #FFB719;text-decoration: underline;font-weight: normal;}
h1, h2, ul#navigation{font-family:Georgia,sans-serif;}
h1{color:#FFB719;font-size:22px;font-weight:normal;margin-bottom:5px; line-height: 24px;}
h2{color: #FFB719;text-decoration: none;font-weight: normal; margin: 0 0 5px 0; font-size: 16px; line-height: 18px;}
h3{text-transform: uppercase;font-weight:normal;color: #666;margin:10px 0 0 0; font-size: 14px; padding: 8px 0 8px 5px; border-top: 1px solid #514D49; line-height: 16px;}

.orange, .orangeB{color: #FFB719;}
.orangeB{text-decoration: none;font-weight: bold;}
.title{font: 13px bold;color: #FFB719;margin-bottom: 5px;}

p{margin: 0 0 20px 0; line-height: 18px;}


table{clear: both;}
td h1{margin-top:0;}
/************************************ 
 * INTRO BLOCK
 * 
*************************************/
#introBg{background: url("../img/intro_bg.jpg") no-repeat;width: 1300px;height: 1050px;overflow: hidden;position: absolute;left:50%;margin: -1050px 0 0 -650px;top: 100%;}
#intro{width: 395px;height: auto;margin: 0 auto;}
#intro #block{width: 395px;height: auto;margin: 70px 0 0 -197px;left: 50%;position: absolute;text-align: center;}

#intro #block #logo{margin:0 auto;width: 126px;height: 96px;padding-bottom: 17px; float: none; background: none;}
#intro #block #line{width: 395px;height: 25px;}
#intro #block #age{margin:0 auto;width: 395px;height: auto; float: left;}
#intro #age .title{	color: #C8A900;font-size: 12px;font-weight: normal;}
#intro #age .text{color: #594905;font-size: 12px;}
#intro #age .text img{width: 15px; height: 12px; margin-top: 3px;}
#intro #age .text a:link, #intro #age .text a:visited{color: #594905;text-decoration: none;}
#intro #age .text a:hover{color: #CCC;text-decoration: underline;}
#intro #block #age #nl{padding:5px 5px 0 0;width: 190px;text-align: right;float: left;}
#intro #block #age #fr{padding:5px 0 0 5px;width: 190px;text-align: left;float: right;}


/************************************ 
 * STRUCTURE
 * 
*************************************/
#wrapper{position:relative;width: 960px;min-height: 100%;height: auto !important;height: auto;margin: 0 auto -245px auto;z-index:2;}
#page, #header{ float: left; width: 100%;}
#page div#left{width: 150px;float: left; margin-right: 30px;}


#left p{font-size: 11px;}

#page div#content{margin: 0;width: 780px;float: left; margin-left: 0;}

#footer{position:relative;background:url("../img/bg-foot.png") no-repeat right bottom; width: 100%; height: 243px; float:left; color: #666;z-index:-1;}
#footer a{color: #999; text-decoration: none;}
#footer p{margin: 190px auto 0 auto;text-align: left; width: 960px;}
#page hr{width:100%; margin: 10px 0; background-color: #666; height: 1px; border: 0; clear: both;}
#page #content ul{margin: 0 0 10px 0;}

#content img{margin:0 15px 10px 0;}

#content table.home{width: 960px;}
#content table.home img{float: left; margin-right: 15px;/* width: 160px;*/}
#content table.home td{padding: 0 25px; vertical-align: text-top; width: 50%;}
#content table.home td h2{font-size: 21px; line-height: normal; margin-bottom: 10px; font-weight: lighter;}
.top40{margin-top:20px;}
/************************************ 
 * NAVIGATION
 * 
*************************************/
#logo{background: url(../img/logo.png) no-repeat; width: 110px; height: 110px; float: left; margin: 10px 50px 10px 20px;}
#logo a{width: 110px; height: 110px; display: block;}
#logo a:hover{text-decoration: none;}
/*#navigation{margin:0 auto 0 auto;padding-top: 40px;background: url(../img/nav_line.png) no-repeat 0 20px;width:600px;height:76px;}*/
ul#navigation{width: auto; margin: 80px 0 0 0; list-style: none; float: left; padding: 0;}
ul#navigation li{float: left; font-weight: normal; font-size: 14px ;line-height: normal; margin-right: 20px;}
ul#navigation li a{color: #FFF; padding-bottom: 3px; font-weight: lighter;}
ul#navigation li a:hover, ul#navigation li.sel a{color: #FFB719; text-decoration: none; border-bottom: 1px solid #FFB719;}
/* SUBNAV */
#left #subnavigation{margin-bottom: 20px;width: auto;height: auto;text-align: left;}
#left #subnavigation ul{margin: 10px 0 20px 10px;list-style: square; padding: 0; line-height: 20px;}
#left #subnavigation li{padding: 0; margin-left: 3px;}

#left #subnavigation a.sel{text-decoration: none;color: #FFB719;}
#left #subnavigation a:hover{text-decoration: underline;color: #FFB719;}
#left #subnavigation a{text-decoration: none;color: #ccc;}

ul#taalswitch{color:#ccc; float: right; list-style: none; margin: 80px 0 0 0; font-weight: normal; padding: 0;}
ul#taalswitch li{float: right; margin-left: 5px; padding:2px 3px;}
ul#taalswitch li.sel{  background:#FFB719; color:#291E1A;}
ul#taalswitch li{ background: none;}
ul#taalswitch li a{color: #FFF;}
/************************************ 
 * BANNERS
 * 
*************************************/
div#restobanner{width: 300px;height: 250px;}
div#restobrasserie{width: 345px;height: 177px; margin-bottom: 10px;}
div#brasseriebanner{width: 600px;height: 215px;}


/************************************ 
 * BRASSERIES
 * 
*************************************/
#brasseries div{float:left;width: 150px;height: 180px;	font-size: 10px;}
#brasseries div img{border:0;margin-bottom:8px;}
#brasseries h4{margin: 3px 0 2px 0; color: #FFB719; font-weight: normal; font-size:11px;}
#maps_right{clear:both;}
.back{text-align:right;}

#black_box{width:400px;background-color:#000000;padding: 14px;clear: both;}

input#address{margin-bottom: 5px; border: 0;}
input#knop{background: #FFB719; margin-left: 5px;margin-bottom: 5px; cursor: pointer;}


/************************************ 
 * History
 * 
*************************************/
#historiek h3{clear: both;}
#historiek img, #kandidaat img{float:left;/* margin-right: 10px;*/}


/************************************ 
 * FLAGSHIPS
 * 
*************************************/
#flagshipPic{width: 600px;height: 215px;margin-bottom: 10px;}
#flashfilmpje{width: 420px;height: 252px;}


/************************************ 
 * GOOGLE MAPS
 * 
*************************************/
#googlemaps {width: 425px;height: 350px; color: #666;}
div.popimg_cssH, div.H_cssH {display: none;}
div.popimg {float: right;}



/************************************ 
 * SLIDER
 * 
*************************************/
.scrollit{}
.scrollbar{background-color: #3F121B; width: 5px; height: 50px; right:0; top:0; position: absolute; margin: 3px;}

#slider {
    width: 960px;
    float: left;
    margin-bottom: 35px;
    
}

#slider.recepten , .recepten .scroll{width: 100%;}
.recepten .scrollContainer div.panel{width: 760px; padding-right: 20px; padding-top: 10px; height: 200px; position: relative; overflow: hidden;}

#page #content .recepten ul.subnav{margin-left: 400px;}

/*.recepten .scroll{background: url(../img/bg_transparant.png) repeat;}
#slider.recepten ul.navigation {background: url(../img/bg_slider-nav-color.png) repeat-x;}*/

.scroll {
	float: left;
    height: 210px;
    width: 960px;
    overflow: auto;
    overflow: hidden;
    position: relative;
    background: #FFB719;
}
.scrollContainer div.panel {
    height: 180px;
    width: 900px;
    padding: 30px 60px 0 0;
    
}

#game .right a, .scroll a{color: #3F121B; text-decoration: underline;}

.scrollContainer div.panel p, #page #content ul.subnav, .scrollContainer div.panel h2{margin-left: 430px; color: #512731;}
.right h2, .scrollContainer div.panel h2{color:#3F121B; font-size: 21px; line-height: 24px;  font-weight: normal;}

#page #content ul.subnav{list-style: none; padding: 0; font-size: 12px; line-height: 14px; top:0;
position:relative;
height:100%;}
#page #content ul.subnav li{padding: 4px 0;}
#page #content ul.subnav li.sel a{background: url(../img/arrow-selected.png) no-repeat 20px center; color: #3F121B;}
#page #content ul.subnav a{ background: url(../img/arrow-regular.png) no-repeat 20px center; padding: 0 0 0 40px; display: block; text-decoration: none; color: #926A02;}
#page #content .recepten ul.subnav a:hover{text-decoration: underline; color: #3F121B	;}

/* NAV */
#slider ul.navigation {
	line-height: 16px;
	/*clear: both;*/
	width: 100%;
	background: url(../img/bg_slider-nav.png) repeat-x;
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
}

#slider ul.navigation li {
   /* display: inline;
    margin-right: 10px;*/
    float: left;
   
   
}

#game ul.navigation a, #slider ul.navigation a {
	display: block;
	 height: 30px;
     padding: 10px 20px 10px 40px;
    color: #FFF;
    vertical-align: middle;
    text-decoration: none;
     background: url(../img/arrow-regular.png) no-repeat 20px center;
}

#game ul.navigation a:hover, #slider ul.navigation a:hover {
    background:  #FFB719 url(../img/arrow-selected.png) no-repeat 20px center;
    color: #3F121B;
}

#slider ul.navigation a.selected {
	color: #3F121B;
     background:  #FFB719 url(../img/arrow-selected.png) no-repeat 20px center;
}

#slider ul.navigation a:focus {
    outline: none;
}

P.star{ width:100%;float:left;font-size:9px; color:#444; line-height:normal; padding:3px 0; margin:0; text-align:right;}
/************************************ 
 * GAME
 * 
*************************************/
#video{width: 500px; height: 280px;}
#spot{width: 360px; height: 270px;}

#game{margin-bottom: 35px; float: left;}
.left, .right{float: left;}
#content .left img{margin: 0; padding: 0;}
.right{ width: 380px; height: 210px;}
.right .content{padding: 30px 60px 0 0; background:  #FFB719; height: 130px;}
.right h2, .right p{margin-left: 30px;}
.right p{ color: #512731; margin-bottom: 0;}

#game ul.navigation {
	line-height: 16px;
	/*clear: both;*/
	width: 100%;
	background: url(../img/bg_slider-nav.png) repeat-x;
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
}

#game ul.navigation a{padding-top: 20px; padding-bottom: 0;  background:url(../img/arrow-regular.png) no-repeat 20px 20px;}
#game ul.navigation a:hover{ background:  #FFB719 url(../img/arrow-selected.png) no-repeat 20px 20px;}

#content img.image-rechts{float:right; margin: 10px 0 10px 10px;}
#content img.image-links{float:left; margin: 10px 10px 10px 0px;}