/* =body
-----------------------------------------------------------------------------*/
html{
    height:100%;
    background: #090909;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size:60.5%;
	color: #ccc;
	background: #090909;
}
body.full {
    overflow:hidden;
}

/* =Links
-----------------------------------------------------------------------------*/
a           { color: #cc0000; text-decoration: none; outline: none; }
a:hover     { color: #FFF; }


/* knoppen index */
a.btn { 
    width: auto;
    height: 60px; 
    display: block;
    text-indent: -10000px;
    float: right;
    position: relative;
    left: 20px;
}
a.btn:hover { background-position: 0px -60px !important;}

/* knoppen index */

/* Index */
#btn-menu { width: 288px; background: url(../images/buttons/btn_menu.png) top left no-repeat;}
#btn-menukaart { width: 288px; background: url(../images/buttons/btn_menukaart.png) top left no-repeat;}
#btn-valentijn    { width: 288px; background: url(../images/buttons/btn_jazz-breda.png) top left no-repeat;}
#btn-nieuws    { width: 288px; background: url(../images/buttons/btn_nieuws.png) top left no-repeat;}
#btn-kunst    { width: 288px; background: url(../images/buttons/btn_kunst.png) top left no-repeat;}



/* =Headings
-----------------------------------------------------------------------------*/
h1 { font-size: 1em; }
h2 { font-size: 1em; }
h3 { font-size: 1.8em; font-weight: bold; text-transform: uppercase; color: #FFF; }

h4 { font-size: 1.1em; font-weight:bold;}
h5 { font-size: 1em; font-weight:bold; }
h6 { font-size: 1em; }
h7 { font-size: 1.1em; font-weight:bold;}


/* Cufon text */
#inhoud h3,


#outerWrapper {
    position: relative; /* Required to enable cleartype in IE8 when using filter */
    /* continue your css for the wrapper here. */
}

/* =Text styles 
-----------------------------------------------------------------------------*/
p { 
    font-size: 1.1em; 
    color: #ccc; 
}


/* =Header
-----------------------------------------------------------------------------*/
#header{
    position: relative; 
    top: 50px;
    left: 0px;
    min-width: 1000px;
}
#menukunst{
    position: relative; 
    top: 225px;
    left: 550px;
    
}
#logo {
    position:absolute;
    top:-25px;
    right:20px;
    width:160px;
    height:110px;
}
#logo2 {
    position:absolute;
    top:-25px;
    right:50px;
    width:221px;
    height:107px;
}
#logo.wit {
    background:url('../images/logo-wit.png') 0 0 no-repeat;
}
#logo.zwart {
    background:url('../images/logo-zwart.png') 0 0 no-repeat;
}
#logo2.kleur {
    background:url('../images/logo.png') 0 0 no-repeat;
}
#logo span {
    display:none;
}
#logo2 span {
    display:none;
}


/* =Navigation
-----------------------------------------------------------------------------*/
/* position the nav */
ul#nav      { position:relative; }
ul#nav li   { position:absolute; display:block; top:0px; }

/*Add all items to the nav*/
ul#nav li#nav-home       { left:-1px; width:85px; }
ul#nav li#nav-restaurant { left:83px; width:135px; }
ul#nav li#nav-keuken     { left:217px; width:100px; }
ul#nav li#nav-reserveren { left:316px; width:135px; }
ul#nav li#nav-terras     { left:450px; width:95px; }
ul#nav li#nav-kunst      { left:544px; width:85px; }
ul#nav li#nav-partijen   { left:628px; width:110px; }
ul#nav li#nav-kadotip    { left:737px; width:115px; }

/*kunst*/
ul#nav li#nav-kunstindex { left:-1px; width:85px; }
ul#nav li#nav-expo1      { left:83px; width:120px; }
ul#nav li#nav-expo2      { left:202px; width:120px; }
ul#nav li#nav-expo3      { left:320px; width:120px; }

/*expositie*/
ul#nav li#nav-expositieindex { left:-1px; width:85px; }
ul#nav li#nav-expo1      { left:83px; width:120px; }
ul#nav li#nav-expo2      { left:202px; width:120px; }
ul#nav li#nav-expo3      { left:320px; width:120px; }

ul#nav li#nav-index a   { padding:5px 0 0 15px; }
ul#nav li.last a        { width:80px; /*minus 20+17*/ }

ul#nav li a {
    background:url('../images/main_nav_sprite_long.png') 0px 0px no-repeat;
    color:#fff;
    height:25px;
    display:block;
    text-transform: uppercase; 
    text-decoration: none; 
    font-size:13px; 
    padding: 4px 0 0 22px;
}

ul#nav li a:hover {
    background:url('../images/main_nav_sprite_long.png') 0px -30px no-repeat;
}

ul#nav li.active a {
    background:url('../images/main_nav_sprite_long.png') 0px -60px no-repeat;
}

ul#nav li.active a:hover {
    background:url('../images/main_nav_sprite_long.png') 0px -60px no-repeat;
}

/*make sure first nav item is never showing left edge slant*/
ul#nav li#nav-index a       { background-position:-30px 0px; }
ul#nav li#nav-index a:hover { background-position:-30px -30px; }

ul#nav li#nav-index.active a,
ul#nav li#nav-index.active a:hover { 
    background-position:-30px -60px; 
}

ul#nav li.last {
    background:url('../images/main_nav_sprite_long.png') right -100px no-repeat;
}
ul#nav li.last.active {
    background:url('../images/main_nav_sprite_long.png') right -160px no-repeat;
}

/* =Containers
-----------------------------------------------------------------------------*/
#wrapper {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    z-index:4;
}
#wrapper #content{
    padding: 0 31px 0 15px;
    min-width: 690px;  
    max-width: 985px;
    margin-right: 280px; /* Prevent logo overlapping content */
}

/* =Footer
-----------------------------------------------------------------------------*/
#footer{
    position: absolute;
    right: 0px;
    bottom: 0px;
}
#footer ul.links {
    float: right;
    width: 780px;
    background:url('../images/bg_50_alpha.png') 0 0 repeat;
    padding:7px 10px 6px 10px;
}

#footer ul.links li             { float: left; width: auto; padding: 0 5px 0 5px; border-right: 1px solid #ccc; }
#footer ul.links li a           { color: #ccc; }
#footer ul.links li a:hover     { color: #cc0000;}
#footer ul.links li.contact-us  { border-right: none;}
#footer ul.links li.media       { border-right: none; float: right; }


/* =Main Content
-----------------------------------------------------------------------------*/
#content #content-main { 
    
    min-height: 500px;  /* Prevent footer overlapping content */
    height: auto !important;
    height: 500px;
    padding: 0 31px 0 0;
    
   /*
       padding: 0 31px 0 15px;
       min-width: 690px;  
       max-width: 985px;
       
       margin-right: 280px;  Prevent logo overlapping content 
       */
       
}
* html #content #content-main { width: 800px; }

#content #content-main .col{
    float: left;
    width: 18%;
    min-width: 90px;
    max-width: 177px;
    margin-right: 15px; /* Fixed 15px gutter */
    
    background: blue; /* For testing*/
    height: 350px;
}
#content #content-main .last { margin-right: 0px;}

/* =Index page
-----------------------------------------------------------------------------*/
/* Title */

#index #content-index h2{ 
    margin-left: 20px;
    width: 655px; 
    margin-top: 130px;
}
#index #content-index h2 img{
    float: left;
}

#index #content-main h2{ 
    margin-left: -140px;
    width: 655px; 
    margin-top: 150px;
}
#index #content-main h2 img{
    float: right;
}

#index #content-menu h2{ 
    margin-left: 270px;
    width: 655px; 
    margin-top: 83px;
    margin-bottom: 28px;
}
#index #content-menu h2 img{
    float: right;
}

#index #content-expo h2{ 
    margin-left: 537px;
    width: 716px; 
    margin-top: 235px;
    margin-bottom: 0px;
}
#index #content-expo h2 img{
    float: right;
}

#index #content-kerstmis h2{ 
    margin-left: 160px;
    width: 655px; 
    margin-top: 83px;
    margin-bottom: 28px;
}
#index #content-kerstmis h2 img{
    float: right;
}

#index #content-keuken h2{ 
    margin-left: 300px; 
    width: 655px; 
    margin-top: 200px;
}
#index #content-keuken h2 img{
    float: right;
}

#index #content-index h2 #btn-menukaart      { clear: both;left:440px; top: 160px; margin-bottom: -20px;}
#index #content-index h2 #btn-valentijn   { clear: both;left: 440px; top: 180px; margin-bottom: -20px;}
#index #content-index h2 #btn-nieuws   { clear: both;left: 440px; top: 200px; margin-bottom: -20px;}
#index #content-index h2 #btn-kunst   { clear: both;left: 440px; top: 220px; margin-bottom: -20px;}


/* =Two column layout */
.two-column-layout #content-main { width: 655px; margin-top: 220px; }
.two-column-layout #content-main-restaurant { width: 655px; margin-top: 250px; }
.two-column-layout #content-main-keuken { width: 655px; margin-top: 235px; }
.two-column-layout #content-main-reserveren { width: 655px; margin-top: 235px; }
.two-column-layout #content-main-terras { width: 655px; margin-top: 200px; }
.two-column-layout #content-main-kunst { width: 655px; margin-top: 275px; }
.two-column-layout #content-main-expositie { width: 655px; margin-top: 295px; }
.two-column-layout #content-main-partijen { width: 655px; margin-top: 260px; }
.two-column-layout #content-main-kadotip { width: 655px; margin-top: 260px; }
.two-column-layout #content-main-nieuws { width: 655px; margin-top: 210px; }
.two-column-layout #content-main-agenda { width: 655px; margin-top: 210px; }
.two-column-layout #content-main-agenda2 { width: 655px; margin-top: 260px; }
.two-column-layout #content-main-route { width: 655px; margin-top: 290px; }
.two-column-layout #content-main-vacatures { width: 655px; margin-top: 260px; }
.two-column-layout #column-left,
.two-column-layout #column-right { width: 320px; float: left; }
.two-column-layout #column-right2 { width: 320px; float: left; }
.two-column-layout #column-right3 { width: 320px; float: left; }
.two-column-layout #column-right4 { width: 320px; float: left; }
/*.two-column-layout #column-left {  }*/
.two-column-layout #column-right { 
    background: url('../images/bg_80_alpha.png') 0 0 repeat; 
    position: relative;
    left: 600px;
    top: 0px;
    min-height: 200px; 
    height: auto!important;
    height: 200px; 
}
.two-column-layout #column-right .column-footer{
    width: 100%;
    position: absolute;
    bottom: -25px;
    background: url('../images/bg_80_alpha.png') 0 0 repeat; 
    height: 25px;
    display: none;
}
.two-column-layout #column-right2 { 
    background: url('../images/bg_80_alpha.png') 0 0 repeat; 
    position: relative;
    left: 425px;
    top: 0px;
    min-height: 200px; 
    height: 489px; 
}
.two-column-layout #column-right2 .column-footer2{
    width: 100%;
    position: absolute;
    bottom: -25px;
    background: url('../images/bg_80_alpha.png') 0 0 repeat; 
    height: 25px;
    display: none;
}
.two-column-layout #column-right3 { 
    background: url('../images/bg_80_alpha.png') 0 0 repeat; 
    position: relative;
    left: 475px;
    top: 0px;
    min-height: 200px; 
    height: auto!important;
    height: 200px; 
}
.two-column-layout #column-right3 .column-footer3{
    width: 100%;
    position: absolute;
    bottom: -25px;
    background: url('../images/bg_80_alpha.png') 0 0 repeat; 
    height: 25px;
    display: none;
}
.two-column-layout #column-right4 { 
    background: url('../images/bg_80_alpha.png') 0 0 repeat; 
    position: relative;
    left: 425px;
    top: 0px;
    min-height: 200px; 
   
    height: 327px; 
}
.two-column-layout #column-right4 .column-footer4{
    width: 100%;
    position: absolute;
    bottom: -25px;
    background: url('../images/bg_80_alpha.png') 0 0 repeat; 
    height: 25px;
    display: none;
}





/* =Pagina opbouw
-----------------------------------------------------------------------------*/


/* Pagina text */

#restaurant-title {
    position:absolute;
    left:615px;
    top:120px;
}
#reserveren-title {
    position:absolute;
    left:615px;
    top:105px;
}
#terras-title {
    position:absolute;
    left:615px;
    top:80px;
}
#kunst-title {
    position:absolute;
    left:615px;
    top:140px;
}
#keuken-title {
    position:absolute;
    left:613px;
    top:100px;
}
#expositie-title {
    position:absolute;
    left:615px;
    top:150px;
}
#john-guillonard-title {
    position:absolute;
    left:615px;
    top:110px;
}
#partijen-title {
    position:absolute;
    left:615px;
    top:140px;
}
#kadotip-title {
    position:absolute;
    left:615px;
    top:140px;
}
#agenda-title {
    position:absolute;
    left:445px;
    top:78px;
}
#agenda2-title {
    position:absolute;
    left:445px;
    top:128px;
}
#route-title {
    position:absolute;
    left:615px;
    top:140px;
}
#vacatures-title {
    position:absolute;
    left:615px;
    top:110px;
}
#nieuws-title {
    position:absolute;
    left:445px;
    top:88px;
/* Inhoud */
}
#inhoud.detail #column-right {
    top:0px !important;
    position:relative;
    min-height:400px;
    height: auto !important;
    height: 400px;
}
#inhoud .logo-large {
    margin:20px 20px 0 20px;
}
#inhoud .text-blok-midden {
    margin:20px;
}
#inhoud .text-blok-midden p {
    margin:10px 0;
}


/* =Posterwall
-----------------------------------------------------------------------------*/
html,
body{
    height: 100%;
}

#posterwall_wrapper,
#posterwall,
#posterwall_raster {
    top:0px;
    left:0px;
    position:fixed;    
    width:100%;
    height:100%;
    overflow:hidden;
}

#posterwall_wrapper {
    z-index:1;
}

#posterwall {
    z-index:2;
}

#posterwall_raster {
    z-index:3;
    background:url('../images/grijzelijnen.png') 0 0 repeat;
}