/* Fonts */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700|Open+Sans+Condensed:300,700);
/* Reset */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, center, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, header, nav, post, footer {border: 0; margin: 0; outline: 0; padding: 0; background: transparent; vertical-align: baseline}
table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}q,blockquote{quotes:none}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}a img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}a,a:hover{text-decoration:none}
/* Scale included media */
article img,article video,article object,aside img{max-width:100%;height:auto}
article iframe{max-width:100%}
article img,article video,article iframe,article object,article embed{width:100%;-moz-border-radius:0.3em;-webkit-border-radius:0.3em;-o-border-radius:0.3em;-ms-border-radius:0.3em;-khtml-border-radius:0.3em;border-radius:0.3em;-moz-box-shadow:rgba(0,0,0,0.15) 0 1px 4px;-webkit-box-shadow:rgba(0,0,0,0.15) 0 1px 4px;-o-box-shadow:rgba(0,0,0,0.15) 0 1px 4px;box-shadow:rgba(0,0,0,0.15) 0 1px 4px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;border:white 0.5em solid}
.thumbnail{width:auto}
/* Base */
html {
background: #f0f0f0 url('pattern09.jpg');
}
body {
font-family: 'Open Sans', 'Droid Sans', sans-serif;
font-size: 14px;
color: #111111;
cursor: default;
}
p {
line-height: 150%;
}
a {
text-decoration: none;
-moz-transition: background-color 50ms linear, color 50ms linear;
-o-transition: background-color 50ms linear, color 50ms linear;
-webkit-transition: background-color 50ms linear, color 50ms linear;
transition: background-color 50ms linear, color 50ms linear;
}
a:hover {
text-decoration: underline;
}
h1{
font-family: 'Open Sans Condensed', 'Droid Sans', sans-serif;
color: #c0373c;
text-transform: uppercase;
font-size: 32px;
letter-spacing: 5px;
text-decoration: none;
padding: 20px 0;
}
h2, h3, h4, h5, h6 {
font-weight: bold;
}
h2 {
font-size: 24px;
}
h2, h2 a, h3 {
color: #c0373c;
}
h3 {
font-size: 13px;
}
/* Header,Nav */
header[role="banner"] {
text-align: center;
background: url('grasjes.png') no-repeat scroll bottom right;
}
header[role="banner"] a:hover {
text-decoration: none;
}
nav{
font-family: 'Open Sans Condensed', 'Droid Sans', sans-serif;
}
nav[role="navigation"]{
display: inline-block !important;
width: 100%;
background: #c0373c;
margin-bottom:-10px;
}
nav[role="navigation"] ul{
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
padding: 0 25px;
margin:0;
display: block;
}
nav[role="navigation"] ul li{
float: left;
list-style: none;
}
nav[role="navigation"] ul li ul{
padding: 0 25px;
display: none;
z-index: 1;
position: absolute;
}
nav[role="navigation"] ul li ul li{
background: #c0373c;
float: none;
}
nav[role="navigation"] ul li:hover > ul{
display: block;
}
nav[role="navigation"] li a{
display: block;
padding: 10px 25px;
}
nav[role="navigation"] a{
color: #fff;
}
nav[role="navigation"] ul li a:hover, nav[role="navigation"] ul li .current {
text-decoration: none;
background: #f0f0f0;
color: #c0373c;
}
fieldset[role="search"] input {
display: none;
font-size: 16px;
outline: none;
border: none;
float: right;
margin: 10px;
}
/* Body */
#content {
padding: 20px;
background: #fff;
background: -webkit-linear-gradient(#f0f0f0, #fff 300px);
background: -moz-linear-gradient(#f0f0f0, #fff 300px);
background: -o-linear-gradient(#f0f0f0, #fff 300px);
background: -ms-linear-gradient(#f0f0f0, #fff 300px);
background: linear-gradient(#f0f0f0, #fff 300px);
}
#content p{
text-align: justify;
}
#content a{
color: #c0373c;
font-weight: bold;
}
article {
background: -webkit-linear-gradient(#f0f0f0, #fff 300px);
background: -moz-linear-gradient(#f0f0f0, #fff 300px);
background: -o-linear-gradient(#f0f0f0, #fff 300px);
background: -ms-linear-gradient(#f0f0f0, #fff 300px);
background: linear-gradient(#f0f0f0, #fff 300px);
display: block;
margin: -20px;
margin-bottom: 20px;
padding: 20px;
}
article div.meta,article h3,article h3 a{
color: #888 !important;
}
body.article article,article.past-articles {
margin-bottom: 0;
padding-bottom: 0;
}
article.past-articles h2 a{
color:#888 !important;
font-size: 16px;
}
article.past-articles h3{
color:#888 !important;
}
ul.tags {
padding-left: 0;
}
ul.tags li {
list-style: none;
display: inline;
margin-right: 12px;
margin-left: 0 !important;
}
blockquote,pre {
padding-left: 19px;
border-left: 1px solid #d5e0e4;
margin-bottom: 20px;
white-space: pre-wrap;
word-wrap: break-word;
color: #666666;
}
blockquote {
font-style: italic;
}
code {
padding: 4px;
margin: 0 2px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
font-size: 12px;
border: 1px solid #d5e0e4;
}
nav[role="pagination"] .nav-left {
float: left;
}
nav[role="pagination"] .nav-right {
float: right;
}
/* Portfolio */
a.exp h2:after {content:" »"}
a.exp:target h2:after {content:""}
a.exp + div {display:none}
a.exp:target + div {display:block}
/* Footer */
footer {
padding: 10px;
font-size: 12px;
}
footer *{
color: #888 !important;
}
footer .footer-left {
float: left;
}
footer .footer-right {
float: right;
}
footer img {
display:none;
}
/* koppen */
body.koppen #content {
padding: 0;
margin-top: 6px;
background:none;
background-color:#fff;
line-height: 150%;
font-family: 'Open Sans Condensed', 'Droid Sans', sans-serif;
}
body.koppen #columns ul{
background: -webkit-linear-gradient(#f0f0f0, #fff 100px);
background: -moz-linear-gradient(#f0f0f0, #fff 100px);
background: -o-linear-gradient(#f0f0f0, #fff 100px);
background: -ms-linear-gradient(#f0f0f0, #fff 100px);
background: linear-gradient(#f0f0f0, #fff 100px);
background-color: #fff;
}
body.koppen #content ul{
margin: 0 0 10px 0;
padding: 4px 0;
list-style-type: none;
display: inline-block;
width:100%;
}
body.koppen #content li{
margin: 0;
padding: 1px 4px;
font-weight: bold;
}
body.koppen #content li:first-child {
text-transform: lowercase;
}
body.koppen #content article{
margin: 0;
padding: 20px;
}
body.archief #content div{
display: inline-block;
width:100%;
}

/* Bigger screens: */
@media only screen and (min-width: 550px) {
h1 {
padding: 50px 0;
}
#content {
padding: 50px;
}
#content aside{
float:right;
width:30%;
}
fieldset[role="search"] input {
display: inline;
}
body.koppen #columns{
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
column-gap: 10px;
-moz-column-gap: 10px;
-webkit-column-gap: 10px;
}
body.koppen #columns a:visited{
color: #888;
}
body.archief #content{
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
column-gap: 20px;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
}
article{
margin: -50px;
margin-bottom: 50px;
padding: 50px;
}}
@media only screen and (min-width: 801px) {
body {
width: 800px;
margin: 0 auto;
}
h1 {
padding: 50px 0;
}
#content {
padding: 100px;
box-shadow: 6px 6px 4px -4px #ccc, -6px 6px 4px -4px #ccc;
}
body.koppen{
min-width: 800px;
width: 90%;
}
body.koppen #columns {
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
}
body.koppen #columns li{
/*white-space: nowrap;
overflow: hidden;*/
}
article{
margin: -100px;
margin-bottom: 100px;
padding: 100px;
}}