/* =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: #02520c; text-decoration: none; outline: none; }
a:hover     { color: #048914; }


/* 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_valentijn_rood.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: #EC0B8D; }

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: #ffffff; 
}
.paragraph_style_1 {
    color: #800080;
    font-family: 'Verdana', 'Perpetua', 'ArialMT', 'Arial', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 20px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    opacity: 1.00;
    padding-bottom: 0px;
    padding-top: 0px;
    text-align: center;
    text-decoration: none;
    text-indent: 0px;
    text-transform: none;
}


/* =Header
-----------------------------------------------------------------------------*/
#header{
    position: relative; /* Needs relative positioning for logo position */
    top: 40px;
    left: 0px;
    min-width: 1000px;
}
#header2{
    position: relative; /* Needs relative positioning for logo position */
    top: 25px;
    left: 0px;
    min-width: 1000px;
}

#logo {
    position:absolute;
    top:14px;
    left:75px;
    width:261px;
    height:67px;
}

#logo.wit {
    background:url('../images/logoklein.png') 0 0 no-repeat;
}
#logo.zwart {
    background:url('../images/logo-zwart.png') 0 0 no-repeat;
}
#logo span {
    display:none;
}
#logo2 {
    position:absolute;
    top:-24px;
    right:160px;
    width:300px;
    height:120px;
}

#logo2.wit {
    background:url('../images/vlinders.png') 0 0 no-repeat;
}
#logo2.zwart {
    background:url('../images/vlinders.png') 0 0 no-repeat;
}
#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-healing-garden 	{ left:83px; width:165px; }
ul#nav li#nav-programma     	{ left:247px; width:135px; }
ul#nav li#nav-musica    			{ left:380px; width:100px; }
ul#nav li#nav-areas    				{ left:478px; width:95px; }
ul#nav li#nav-bezoekers    		{ left:570px; width:122px; }
ul#nav li#nav-deelnemers   		{ left:690px; width:130px; }
ul#nav li#nav-tickets    			{ left:819px; width:100px; }


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_long2.png') right -100px no-repeat;
}
ul#nav li.last.active {
    background:url('../images/main_nav_sprite_long2.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;
    left: 180px;
    top: 736px;
}
#footer ul.links {
    float: left;
    width: 791px;
    background:url('') 0 0 repeat;
    padding:8px 10px 6px 10px;
}

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

#footer2{
    position: absolute;
    left: 180px;
    top: 776px;
}
#footer2 ul.links {
    float: left;
    width: 791px;
    background:url('') 0 0 repeat;
    padding:8px 10px 6px 10px;
}

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


/* =Main Content
-----------------------------------------------------------------------------*/
#content #content-main { 
    
    min-height: 550px;  /* Prevent footer overlapping content */
    height: auto !important;
    height: 550px;
    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-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: 500px; float: left; }
.two-column-layout #column-right3 { width: 320px; float: left; }
.two-column-layout #column-right4 { width: 500px; float: left; }
.two-column-layout #column-right5 { width: 550px; float: left; }
.two-column-layout #column-right6 { width: 500px; float: left; }
.two-column-layout #column-right7 { width: 500px; float: left; }
.two-column-layout #column-right8 { width: 500px; float: left; }
/*.two-column-layout #column-left {  }*/

.two-column-layout #column-right2 { 
    
    position: relative;
    left: 350px;
    top: 60px;
   min-height:200px; 
    height: auto!important;
    height: 200px; 
}
.two-column-layout #column-right2 .column-footer2{
    width: 100%;
    position: absolute;
    bottom: -25px;
    background: url('../images/bg_80_alpha.png') 0 0 repeat; 
    height: 35px;
    display: none;
}

.two-column-layout #column-right3 { 
    
    position: relative;
    left: 330px;
    top: -120px;
    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: 35px;
    display: none;
}

.two-column-layout #column-right4 { 
    
    position: relative;
    left: 385px;
    top: 60px;
    min-height:200px; 
    height: auto!important;
    height: 200px; 
}
.two-column-layout #column-right4 .column-footer4{
    width: 100%;
    position: absolute;
    bottom: -25px;
    background: url('../images/bg_80_alpha.png') 0 0 repeat; 
    height: 35px;
    display: none;
}
.two-column-layout #column-right5 { 
    
    position: relative;
    left: 330px;
    top: -60px;
    min-height:200px; 
    height: auto!important;
    height: 200px; 
}
.two-column-layout #column-right5 .column-footer5{
    width: 100%;
    position: absolute;
    bottom: -25px;
    background: url('../images/bg_80_alpha.png') 0 0 repeat; 
    height: 35px;
    display: none;
}

.two-column-layout #column-right6 { 
    
    position: relative;
    left: 350px;
    top: 25px;
   min-height:200px; 
    height: auto!important;
    height: 200px; 
}
.two-column-layout #column-right6 .column-footer6{
    width: 100%;
    position: absolute;
    bottom: -25px;
    background: url('../images/bg_80_alpha.png') 0 0 repeat; 
    height: 35px;
    display: none;
}

.two-column-layout #column-right7 { 
    
    position: relative;
    left: 375px;
    top: 60px;
   min-height:200px; 
    height: auto!important;
    height: 200px; 
}
.two-column-layout #column-right7 .column-footer7{
    width: 100%;
    position: absolute;
    bottom: -25px;
    background: url('../images/bg_80_alpha.png') 0 0 repeat; 
    height: 35px;
    display: none;
}

.two-column-layout #column-right8 { 
    
    position: relative;
    left: 375px;
    top: 75px;
   min-height:200px; 
    height: auto!important;
    height: 200px; 
}
.two-column-layout #column-right8 .column-footer7{
    width: 100%;
    position: absolute;
    bottom: -25px;
    background: url('../images/bg_80_alpha.png') 0 0 repeat; 
    height: 35px;
    display: none;
}




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


/* Pagina text */

#flash {
    position:absolute;
    left:180px;
    top:120px;
}
#flashindex {
    position:absolute;
    left:0px;
    top:65px;
}
#flashtickets {
    position:absolute;
    left:180px;
    top:80px;
}
#flash-musica {
    position:absolute;
    left:80px;
    top:120px;
}

/* 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;
}