@font-face {
    font-family: 'GothamBold';
    src:    url('/wp-content/themes/grebbeberg/fonts/GothamBold.ttf')  format('truetype'); /* Safari, Android, iOS */
}
@font-face {
    font-family: 'GothamLight';
    src: url('/wp-content/themes/grebbeberg/fonts/GothamLight.ttf')  format('truetype'); /* Safari, Android, iOS */
}
@font-face {
    font-family: 'GothamBook';
    src:    url('/wp-content/themes/grebbeberg/fonts/GothamBook.ttf')  format('truetype'); /* Safari, Android, iOS */
}

body{
    background-color: #404040;
    font-family: GothamLight;
}

b,
strong {
    font-family: GothamBold;
}

#container{
    /*min-width: 840px;*/
    /* max 9x150px = 9 tiles */
    max-width: 1024px;
    margin: 0 auto;
}

header#pageheader{
    width: 100%;
    height: 100px;
    background-color: black;
    padding-bottom: 10px;
}

header #logo{
    width: 100px;
    height: 100%;
    float: left;
    padding: 10px;
}

header #subtitle,
header #title
{
    color: white;
    width: 100%;
    height: 50%;
}

header #subtitle {
    padding-top: 10px;
}

header #title {
    font-size: 1.5em;
}

input {
    font-size: 1.5rem;
}

/* search part */
#searchform{
    width: 80%;
    margin: 0;
}

#searchbar{
    width: 100%;
    padding-left: 10%;
    padding-top: 10px;
    padding-bottom: 20px;
    height: 103px;
    background-color: #7f776e;
}

#searchbar input{
    width: 45%;
    height: 30px;
    float: left;
    margin-right: 20px;
    padding-left: 30px;

    background-image: url('../img/loep.jpg');
    background-color: white;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 2% 50%;
}

#searchbar .label{
    font-size: 20px;
    margin-bottom: 10px;
}

#searchbar, #searchbar a{
    color: white;
}

#searchbar a.search{
    margin-top: 7px;
    float: left;
}

#advancedsearch {
    width: 100%;
    background-color: #85778b;
    color: white;
    padding-top: 1%;
    padding-left: 1%;
    padding-bottom: 10px;
    margin-top: 10px;
}

select#searchtype{
    height: 35px;
    padding-top: 7px;
}

#searchresults{
    background-color: #dadadb;
    width: 100%;
    padding: 10px;
}

table#results thead tr .header {
    background-image: url('../img/dbg.gif');
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}

table#results thead tr .headerSortDown {
    background-image: url('../img/desc.gif');
}

table#results thead tr .headerSortUp {
    background-image: url('../img/asc.gif');
}

table#results tr:hover{
    background-color: lightgray;
}

div.searchelement{
    width: 100%;
    margin-bottom: 10px;
}

input.searchelement,
div.searchelement {
    float: left;
}

.removeblock{
    float: left;
    margin-left: 10px;
    cursor: pointer;
}

#searchbuilder{
    margin-top: 10px;
}

.searchLabel{
    float: left;
    width: 18%;
}

table#results,
table#results td{
    border: 0;
}

table#results th{
    border-right: 0;
    font-family: GothamBold;
}

.clickable-row{
    cursor: pointer;
}

.highlighted{
    background-color: aliceblue;
}
/* END SEARCHBAR */


/* MAIN */
main#main{
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
}

main article{
    line-height: 19px;
    font-size: 15px;
    padding-top: 0;
}

article.category-dark a,
article.category-dark a:hover,
article.category-dark a:visited,
article.category-dark a:active,
article.category-dark{
    background-color: #7f776e;
    color: white;
    border-bottom: 1px solid #FFF;
}

article.category-dark a.post-edit-link,
article.category-dark a.post-edit-link:hover,
article.category-dark a.post-edit-link:visited,
article.category-dark a.post-edit-link:active{
    background-color: inherit;
    color: black;
}

article.hentry{
    margin: 0;
    padding: 0;
}

article.hentry img{
    width: 100%;
}

article h2.entry-title{
    font-size: 1.4em;
    padding-top: 2%;
    margin-bottom: .2em;
}

.entry-content h3{
    margin-bottom: 0;
    margin-top: 1.1818em;
}

button
{
    color: black;
    height: 35px;
    padding-top: 7px;
    padding-left: 45px;

    background-image: url('../img/loep.jpg');
    background-color: #dadadb;
    background-size: 25px 25px;
    background-repeat: no-repeat;
    background-position: 11% 50%;
}


#comments{
    margin: 0;
}

nav.navigation{
    margin: 0;
}

/* image type */
p,
.hentry + .hentry,
article.hentry.post_format-post-format-image,
article.hentry.post_format-post-format-image img{
    margin: 0;
    border: 0;
}

article.format-standard p{
    padding-top: .8em;
}


.entry-content{
    padding-bottom: 2%;
}

.entry-footer{
    padding: 1% 10%;
}


#imagewall {
    width: 100%;
    float: left;
    display: block;
}

.clear{
    clear: both;
}

article.type-slachtoffers{

    float: left;
    margin:0;
    padding-top:0;
}

.card-thumbnail{
    z-index: 80;
}

.site-footer{
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: black;
}

.site-info{
    color: white;
    padding: 2% 10%;
}

/**
 * 404 page
 */
section.error-404{

}

section.error-404 header{
    border: 0;
}

section.error-404 header{
    margin: 0;
    padding-bottom: 5px;
}

section.error-404 div.page-content {
    margin: 0;
    padding-top: 10px;
}


.site-info a,
.site-info a:active,
.site-info a:visited,
.site-info a:hover {
    color: white;
    font-weight: bold;
}

.site-info a:hover {
    text-decoration: underline;
}


/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/

#results td,
#results th{
    font-size: .8em;
}

.rank{
    width: 90px;
}

.between{
    width: 67px;
}

.lastname{
    width: 95px;
}

.dob,
.dod{
    width: 88px;
}

.birthplace{
    width: 96px;
}

#result .edit{
    width: 50px;
}


/*==========  Mobile First Method  ==========*/


/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
    article h2.entry-title{
        font-size: 1.2em;
    }

    #searchbar{
        height: 121px;
    }

    /* search results */
    #results .dob,
    #results .dod,
    #results .between,
    #results .rank {
        display: none;
    }

    /* /end search results */
    header #title{
        font-size: 1.3em;
    }

    #searchbar input{
        width: 100%;
    }

    table#results{
        font-size: 60%;
    }
}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

    #searchbar{
        height: 103px;
    }

    #searchbar input{
        width: 50%;
    }


    /* container mag max 5 artikels breed zijn */
    #container{
        max-width: 750px;
    }


    table#results{
        font-size: smaller;
    }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    /* container mag max 5 artikels breed zijn */
    #container{
        max-width: 900px;
    }

    article h2.entry-title{
        font-size: 1.4em;
    }

    /* search results */
    /* everything visible */
    #results .rank,
    #results .lastname,
    #results .between,
    #results .firstname,
    #results .dob,
    #results .dod,
    #results .birthplace,
    #results .deathplace {
        display: table-cell;
    }


    /* /end search results */
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    #searchbar {
        height: 100px;
    }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

.voetnoot{
    font-size: 0.7em;
}