@charset "UTF-8";

* {
    margin:0;
    padding:0;
}

body {
    width: 100%;
    margin: 30px 0 0 0; /* RR */
    font-family: Helvetica, Arial, sans-serif; 
    font-size: 90%; /* 14.4px / 16px = 0.9 = 90% */
    line-height: 1em;
    color: #000;
    background-color:#FFF;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}

.visited {
    color: #0000DA;
}

a {
    color:#000;
    outline: none;
    text-decoration: none;
}
a:hover, a:active {
    color: #0000DA;
}
a.actief {
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
}

h1 { 
    font-size: 2.3em;
    line-height: 1em;
    font-weight: normal;
    padding-bottom: 0.6em;
}

h2 {
    font-size: 2.3em;
    line-height: 1em;
    font-weight: normal;
    padding: 0 0 0.55em 0;
    margin: 0;
}

h3 {
    font-size: 1em;
    font-weight: normal;
    padding: 0 0 1.4em 1.7em;
}
h3 a {
    text-decoration: underline;
}

#wrapper { /* even kijken of we deze nog blijven gebruiken op detailpagina's */
    position: relative;
}

    #nav {
        float: left;
        width: 79px; /* RR */
        height: 750px; /* RR */
        padding: 0 0 0 22px; /* RR */
        position: absolute;
        background-color: #FFF;
        z-index: 10;
        border-right: 3px solid #000; /* RR */
    }
        #buttons {
            float: left;
            position: absolute;
            left: 25px;
            width: 45.19%; /* 47px / 104 = 45.19 */
        }
        
        #buttons img:first-child {
            margin-bottom: 3px;
        }
        
    #main {
        display: block;
    }
    
    /* ===  DIT IS HET CONTAINER ELEMENT MET VASTE BREEDTE EN HOOGTE dus ook in media queries aangepast === */
    div.content { 
        float: left;
        width: 366px;
        padding: 0 33px;
        height: 750px;
        position: relative;
    }
    /* voor filmpjes */
	#mediaspace {
		position: relative;
		padding-bottom: 60%;
		padding-top: 30px; 
		height: 0; 
		overflow: hidden;
		margin-bottom: 5px;
	}
	#mediaspace iframe,
	#mediaspace object,
	#mediaspace embed {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	}
	
    div.content:first-child {
        margin-left: 104px;
    }
    
        .navlinks ul {
            width: 100%;
            text-align: left;
            list-style: none;
            padding: 0;
            position: absolute;
        }

        .navlinks ul li {
            margin: 0;
            padding: 0;
        }
        
        /* klein */
        .navlinks ul.klein {
            display: none;
            margin-top: 156px; /* RR */
        }
        .navlinks ul.klein li {
            line-height: 1.4em;
        }
        .navlinks ul.klein li a {
            font-size: 1em;
        }
        
        /* groot */
        .navlinks ul.groot {
            display: block;
            margin-top: 126px; /* RR */
        }
        .navlinks ul.groot li {
            line-height: 2.2em;
        }
        .navlinks ul.groot li a {
            font-size: 2em;
        }
        
/* projectenoverzicht */
div.project_content, div.werk_img {
	width: inherit;
}
div.content div.werk_img {
    position: absolute;
    top: 156px;
}
div.werk_img .caption {
    font-size: 0.9em;
    padding: 0;
    line-height: 1.2em;
}

/* ==== detailpagina project ==== */
#main.detail {
    /* width vatzetten anders gaat het mis met floaten */
    width: 1400px; /* RR */
}

#main.detail .content {
    line-height: 1.4em;
}

#main.detail .content .lager, 
#main.detail .content #columns {
    position: absolute;
    top: 156px; /* RR */
}

#columns {
    -moz-column-gap: 12px; /* RR */
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -moz-column-fill: auto; /* Firefox */
    column-fill: auto;
    height: 550px; /* RR */
}
#columns p {
    font-size: 0.85em;
    padding-bottom: 0.2em;
}

#werk_foto_nav {
    position: absolute;
    bottom: 0;
    width: 366px; /* RR */
    text-align: right;
}

#work_close {
    position:absolute; 
    bottom: 0;
    width: auto;
    z-index: 3;
    line-height: 0;
}

#main.detail div.werk_img img {
    /*max-width: 366px; want is immers 100% */
    max-height: 530px;
    overflow: hidden;
}


/* ====== PRESS CONTACT ETC ==== */
.publication { margin-bottom: 1.5em; }

.publication a { text-decoration: underline; }

.publication p.sub { padding-left: 52px; } /* RR */

#cv_content {
    height: 650px; /* RR */
}

#prev_next_news {
    background-color: #FFFFFF;
    bottom: 2px;
    height: 1em;
    position: absolute;
    text-align: right;
    width: 366px; /* RR */
    z-index: 2;
}


/* ====== NIEUWS ======= */
#news_wrapper {
    margin: 20px 30px; /* RR */
    width: 800px; /* = twee keer de outerwidth van .content RR */
    height: 100%;
    line-height: 1.4em;
    position: absolute;
}

    #news_wrapper h2 {
        font-size: 1em;
        margin-left: -20px;
    }
    
#news_content {
    margin-right: 2%;
    width: 60%;
    float: left;
}

    #news_content h3 {
        text-decoration: underline;
        padding: 0 0 3px 0;
        line-height: 1em;
    }
    
    #news_content p {
        text-indent: 25px;
    }
    
    .news_image {
        margin: 1em 0;
    }
    
    /*.news_image img {
        width: 100%;
    }*/
    
#news_nav {
    right: 2%;
    float: right;
    width: 25%;
    height: 100%;
    position: fixed;
}
      
#news_nav ul li:before { content:"—"; position:relative; left:-5px;}
#news_nav ul li { list-style-type: none; text-indent:-15px; }


/* ==== 25% tabel ==== */
table#tbl25 {
    padding-left: 29px; /* RR */
    margin-left: 104px; /* RR */
}
table#tbl25 tr td {
    padding-right: 17px; /* RR */
    vertical-align: top;
}
div.twentyfivePctContent {
    width: 87px; /* RR */
    height: 210px; /* RR */
}
table#tbl25 h1,
div.twentyfivePctContent h2 {
    font-size: 0.7em;
}
div.twentyfivePctContent h3, 
div.twentyfivePctContent p {
    font-size: 0.55em;
    max-height: 42px; /* RR */
    overflow: hidden;
    line-height: 1em;
}
div.twentyfivePctContent .werk_headsection {
    height: 86px; /* RR */
    overflow: hidden;
}
div.twentyfivePctContent .werk_img_table {
    height: 105px; /* RR */
    margin-top: 0.5em;
    overflow: hidden;
    position: relative;
}

/* ==== 50% tabel ==== */
table#tbl50 {
    padding-left: 29px; /* RR */
    margin-left: 104px; /* RR */
}
table#tbl50 tr td {
    padding-right: 36px; /* RR */
    vertical-align: top;
}
div.fiftyPctContent {
    width: 175px; /* RR */
    height: 375px; /* RR */
}
table#tbl50 h1,
div.fiftyPctContent h2 {
    font-size: 1.1em;
}
div.fiftyPctContent h3, 
div.fiftyPctContent p {
    font-size: 0.85em;
    max-height: 40px; /* RR */
    overflow: hidden;
    line-height: 1em;
}
div.fiftyPctContent .werk_headsection {
    height: 102px; /* RR */
    overflow: hidden;
}
div.fiftyPctContent .werk_img_table { 
    margin-top: 0.5em;
    position: relative;
}



/* ===== MEDIA QUERIES ======*/

/* ===== Middelste maat =====*/
@media (max-height: 800px) { /* was max-height: 650px; 1200px */

    body { font-size: 85%; margin-top: 26px; }
	
	#nav { width: 63px; padding-left: 20px; height: 650px;	}
	
	#buttons { left: 22px; }
	
	div.content { width: 330px; padding: 0 20px; height: 650px; }

        div.content:first-child { margin-left: 86px; }
        
        div.content div.werk_img { top: 134px; }
	
	/* ==== detailpagina project ==== */
	#main.detail { width: 1200px; }
        
        #columns { -moz-column-gap: 10px; height: 500px; }
        
        #main.detail .content .lager, #main.detail .content #columns { top: 133px; }
        
        #werk_foto_nav { width: 330px; }
        
        .publication p.sub { padding-left: 50px; }
        
        #cv_content { height: 570px; }
        
        #prev_next_news { width: 330px; }

        /* == 25% == */
        table#tbl25 { padding-left: 22px;  margin-left: 86px;}

        table#tbl25 tr td { padding: 0 16px 6px 0; }

        div.twentyfivePctContent { width: 75px; height: 158px;}

        div.twentyfivePctContent h3, 
        div.twentyfivePctContent p { max-height: 17px; }

        div.twentyfivePctContent .werk_headsection { height: 52px; }

        div.twentyfivePctContent .werk_img_table { height: 100px; }
    
        /* == 50% == */
        table#tbl50 { padding-left: 22px;  margin-left: 86px; }
    
        table#tbl50 tr td { padding-right: 31px; }
    
        div.fiftyPctContent { width: 150px; height: 325px; }
    
        div.fiftyPctContent h3, 
        div.fiftyPctContent p { max-height: 22px; }
    
        div.fiftyPctContent .werk_headsection { height: 85px; }

}

/* ===== kleinste maat =======*/
@media (max-height: 700px ) { /* was max-height: 550px; 1000px; */

    body { font-size: 80%; margin-top: 22px;  }
	
	#nav {	width: 52px; padding-left: 19px; height: 550px; border-right: 2px solid #000; }
	
	#buttons { left: 19px; }
	
	div.content { width: 271px; padding: 0 19px; height: 550px; }
	
        div.content:first-child { margin-left: 71px; }
        
	div.content div.werk_img { top: 117px; }

	/* ==== detailpagina project ==== */
	#main.detail { width: 1000px; }
	
        #columns { -moz-column-gap: 9px; height: 450px; }
        
        #columns p { line-height: 1.3em; }
        
        #main.detail .content .lager, #main.detail .content #columns { top: 117px; }
        
        #werk_foto_nav { width: 271px; }
        
	.publication p.sub { padding-left: 45px; }
        
        #cv_content { height: 480px; }

        #prev_next_news { width: 271px; }

        /* == 25% == */
        table#tbl25 { padding-left: 20px;  margin-left: 73px;}

        table#tbl25 tr td { padding: 0 12px 4px 0; }

        div.twentyfivePctContent { width: 63px; height: 137px;}

        div.twentyfivePctContent h3, 
        div.twentyfivePctContent p { max-height: 11px; }

        div.twentyfivePctContent .werk_headsection { height: 40px; }

        div.twentyfivePctContent .werk_img_table { height: 96px; }
    
        /* == 50% == */
        table#tbl50 { padding-left: 20px;  margin-left: 73px; }

        table#tbl50 tr td { padding-right: 26px; }

        div.fiftyPctContent { width: 125px; height: 275px; }

        div.fiftyPctContent h3, 
        div.fiftyPctContent p { max-height: 18px; }

        div.fiftyPctContent .werk_headsection { height: 65px; }

}

/* ===== telefoons =======*/
@media (max-height: 320px ), (max-width: 480px ) {
	
	body { font-size: 70%; margin-top: 18px; }
	
	#nav { width: 42px; padding-left: 15px; height: 100%; border-right: 1px solid #000; }
	
	#buttons { left: 15px; }
	
	div.content { width: 250px; padding: 0 15px; height: 320px;  margin-left: 58px;}

        div.content:first-child { }
        
	div.content div.werk_img { top: 100px; }
	
	/* ==== detailpagina project ==== */
	#main.detail { width: 480px; }
	
	.publication p.sub { padding-left: 32px; }
        
        #prev_next_news { display: none; }

}