html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,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,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

body {
    font-size: 16px;
    line-height: 1.5;
    font-family: sans-serif;
    color: #333;
}
h1 {font-size: 3rem;}
h2 {font-size: 2rem;}
h3 {font-size: 1.2rem;}
h1, h2 {margin-top: 1.5rem; margin-bottom: 1.5rem;}
h3 {margin-top: 1.5rem; margin-bottom: 0.8rem;}
a {
    color: #9BC53D;
    font-weight: bold;
    text-decoration: none;
}
a:hover {
    color: #9BC53D;
    text-decoration: underline;
}
p {
    line-height: 1.4;
    margin-bottom: 1.5rem;
}
b {
    font-weight: bold;
}
i {
    font-style: italic;
}
li {
    line-height: 1.8rem;
}
span.notice {
    display: block;
    margin: 1rem 0;
    padding: 1.2rem 1rem;
    background-color: #F0F0F0;
    border-left: 0.5rem solid #FA7921;
}
span.notice.warning {
    background-color: #FEE;
    font-style: italic;
    border-left: 0.5rem solid #F89;
}
input[type="text"], input[type="search"] {
    padding: 0.8rem 1rem;
    font-size: 1.2rem;
}

header {
    width: 100%;
    height: 6rem;
    text-align: center;
    vertical-align: middle;
    border-bottom: 3px solid #FA7921;
}
header h1 {
    margin: 0;
    font-size: 4rem;
    line-height: 6rem;
}
header h1 a {
    text-decoration: none;
}
#content {
    display: block;
    width: calc(100% - 2rem);
    max-width: 700px;
    min-height: calc(100vh - 14rem - 3px);
    margin: 0 auto;
    padding: 1rem;
}
#featured_image_container {
    display: block;
    width: 40%;
    float: right;
    margin: -1.5rem 0 1.5rem 1.5rem;
}
#featured_image_container img {
    display: block;
    max-width: 100%;
    max-height: 50vh;
    min-height: 5rem;
    margin: 0 auto;
}
#featured_image_container .credit {
    float: right;
    color: #DDD;
}
#featured_image_container .credit::before {
    content: 'Credit: ';
}
span.alternative_names {
    display: block;
    margin-bottom: 0.5rem;
}
span.alternative_names::before {
    content: "Andere namen: "
}
ul {
    display: block;
    color: #888;
    list-style: none;
    margin: 1rem 0 2rem 0;
}
ul.english_names::before {
    content: "Engels:"
}
ul.external_links::before {
    content: "Links:"
}
ul li {
    padding-left: 1rem;
}
p.last_modified {
    font-size: 70%;
    color: #888;
}
footer {
    width: 100%;
    height: 6rem;
    background-color: #222;
    color: #666;
    text-align: center;
    vertical-align: middle;
}
footer p {
    display: block;
    height: 100%;
    line-height: 6rem;
    margin: 0;
}
footer a {
    color: #999;
}

@media only screen and (max-width : 600px) {
    header h1 {
        font-size: 10vw;
    }
    #title {
        float: none;
    }
    #featured_image_container {
        width: 100%;
        float: right;
    }

}