/** NOTICE: Tried to clean this up but there might still be some file and filter partial css in here **/

#beeldbank-index {
    margin-top:10px;
}
#beeldbank-index #search-leftcol {
    width: 245px;
    background: url('/img/search-shadow.png') 234px top no-repeat;
    min-height:791px; /* 791 is shadow.png height*/
}

#beeldbank-index div.search-pager {
    padding-top:12px;
    padding-bottom:12px;
    /*height:26px;*/
}

div#filter-middlecol {
    margin: 0;
    width: 20px;
}

div#filter-middlecol a#slide-sidebar {
    position: absolute;
    top: 0;

    color: #000;
    border-bottom: 0 none;
    width: 10px;
    height: 100%;
    margin-left: 5px;
}

div#filter-middlecol a.slided {
    background: url('/img/icon-slide-out.png') left 390px no-repeat;
}

div#filter-middlecol a.slide {
    background: url('/img/icon-slide-in.png') left 390px no-repeat;
}

div#beeldbank-index div#filter-rightcol {
    margin-left: 265px;
}

div#beeldbank-index div#filter-rightcol div.files {
    overflow: hidden;
}
div#beeldbank-index div#filter-rightcol div.files div.file-container {
    padding: 20px 0;
    border-top: 1px solid #F5F5F5;
    border-bottom: 1px solid #D2D4D5;
    width:100%;
}

div#beeldbank-index div#filter-rightcol div.files div.file-container a#next-page {
    background: url('/img/next-page.png') no-repeat center center #f3f4f4;
    border: 1px solid #D8D7D7;
    border-radius: 5px;
    float: left;
    height: 232px;
    margin: 0px 8px 8px 0px;
    width: 200px;

    text-align:center;
    color:black;
    font-size:13px;
    line-height:320px;
}

/* CC-41: the v2 cards in a grid that fills the row (columns of at least 300px), only under .cards-v2 */
div#beeldbank-index div#filter-rightcol div.files div.file-container.cards-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    /* 16px, the margin of the old card */
    gap: 16px;
    align-items: start;
    /* NOTICE: 12px, not 16: with 16 a 1920px screen drops from 5 to 4 cards */
    box-sizing: border-box;
    padding-right: 12px;
}

/* feedback messages and the "no files" text span the row; an empty feedback span is hidden (no whitespace inside it, see index.phtml) */
div#beeldbank-index div#filter-rightcol div.files div.file-container.cards-v2 > .feedback-container,
div#beeldbank-index div#filter-rightcol div.files div.file-container.cards-v2 > .no-files {
    grid-column: 1 / -1;
}
div#beeldbank-index div#filter-rightcol div.files div.file-container.cards-v2 > .feedback-container:empty {
    display: none;
}

div#beeldbank-index div#filter-rightcol div.files div.file-container.cards-v2 a#next-page {
    border-radius: 4px;
    height: 252px;
    margin: 0;
    width: auto;
    line-height: 340px;
}

div#filter-rightcol #rightcol-edit {
    min-height:30px;
    /*padding-top:10px;
    padding-bottom:10px;*/
    width:100%;
    border-bottom: 1px solid #D2D4D5;
}

div#filter-rightcol #rightcol-edit #edit-actions {
    float:left;
    padding-top:10px;
    padding-bottom:10px;
    height:30px;
}

/* button reset */
div#filter-rightcol #rightcol-edit #edit-actions button {
    padding:0;
    margin:0;
    border:0;
    background-color:transparent;
    cursor:pointer;
}
/* unfortunetly needed by FF (<=50) to scale the button to its content */
div#filter-rightcol #rightcol-edit #edit-actions button::-moz-focus-inner {
    border:0;
    padding:0;
}

div#filter-rightcol #rightcol-edit #edit-actions a,
div#filter-rightcol #rightcol-edit #edit-actions button {
    float:left;
    color:#202020;
    height:30px;
    /*line-height:21px;*/
    margin-right:10px;
    text-decoration:none;
    border-bottom:0; /* overwrite (crap ass) default style */
}

div#filter-rightcol #rightcol-edit #edit-actions .admin-button.disabled {
    opacity:.3;
    cursor:default;
    pointer-events:none;
}

div#filter-rightcol #rightcol-edit #edit-actions .actions-multiselect {
    position:relative; /* for positioning .actions-multiselect::after */
}

div#filter-rightcol #rightcol-edit #edit-actions .actions-multiselect::after {
    display:inline-block; /* this turned out the only way to respect the min-width */
    border-radius: 7px;
    font-weight: bold;
    height: 15px;
    line-height: 15px;
    text-align: center;
    min-width: 15px;
    max-width: 45px;

    padding-left:2px;
    padding-right:2px;

    box-sizing: border-box;

    color:white;
    overflow:hidden;
    text-overflow: ellipsis;

    position:absolute;
    right:-7px;
    top:-7px;

    background-color:#343434; /* default, should be overwritten inline */
    content:'0'; /* default, should be overwritten inline */
}

div#filter-rightcol #rightcol-edit #edit-actions .actions-multiselect.hide {
    display:none;
}

div#filter-rightcol #rightcol-edit #edit-actions #multidownload-options {
    display:none; /* will be overwritten by js */
}

/** START multidownload. Looks a lot like download-thunbtypes //TODO: Combine? **/

#multidownload-options #multidownload-heading {
    height: 21px;
    width:227px;
    padding: 7px 0 0 10px;
    background: #F1F2F3;

    font-weight: bold;
    font-size: 9pt;
}

#multidownload-options .switch-multidownload {
    float:right;
    width:227px;
    height:16px;
    border-top: 1px solid #B6B5B5;
    padding: 8px;
    padding-left:35px;
    line-height: 16px;

    color: #000000;
    text-decoration:none;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;

    background:white url('/img/icon-file-download.png') no-repeat 8px center;
}

#multidownload-options .switch-multidownload.unavailable {
    opacity: 0.3;
}

/** END multidownload. **/

div#filter-rightcol #rightcol-bottom {
    min-height:30px;
    /*padding-top:10px;
    padding-bottom:10px;*/
    width:100%;
    border-top: 1px solid #F5F5F5;
}