.partial-file {
    width:202px;
    min-height:234px;
    float:left;
    overflow:hidden;
    
    margin:0px 8px 8px 0px;
    
    border-radius:5px;
}

.partial-file a.file-toggle {
    display:block;
    width:198px;
    height:196px;
    overflow:hidden;
    background-color:#f4f4f4;
    border-radius:5px 5px 0 0;
    
    margin:1px;
    margin-bottom:0;
    
    border:1px solid #b4b4b4;
    /*border-bottom:1px solid #b4b4b4*/
}

/* BEGIN top right triangle */

/* NOTICE: I would have loved to combine this in one element 
instaid of laying the number over the triangle
but that turned out to be to big of a challange. 
TODO: For the bonus points: Combine */
.partial-file {
    position: relative;
}

.partial-file .expired-transparency
{
    background-color:rgba(234, 236, 237, 0.75);
    height: 196px;
    width: 196px;
    position: absolute;
    z-index: 8;
    margin: 2px; /* dont overlay the border from the original container */
    border-radius: 5px;
    cursor: pointer;
}

.partial-file .label-expired
{
    position: absolute;
    background-color: #ba2226;
    z-index: 10;
    transform: rotate(315deg);
    width: 110px;
    height: 29px;
    line-height: 29px;
    text-transform: uppercase;
    color: #fff;
    font-weight: bold;
    text-align: center;
    top: 13px;
    left: -28px;
    overflow:hidden;
}

.partial-file::after {
    color:white;
    position: absolute;
    top: 10px;
    left: 7px;
    
    height:15px;
    width:15px;
    text-align:center;
    
    /* below should be overwritten inline */
    display:none;
    content: '0';
}

.partial-file a.file-toggle {
    position: relative;
}

.partial-file a.file-toggle::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    border-color: transparent;
    border-style: solid;

    border-radius: 5px;
    border-width: 25px;
    border-left-color: #b4b4b4;
    border-top-color: #b4b4b4;
    
    /* below should be overwritten inline */
    display:none;
}
/* END top right triangle */

.partial-file .file-panel {
    width:182px; /* 200 - border - padding */
    height:17px; /* 34 - border - padding */
    overflow:hidden;
    background-color:#f4f4f4;
    
    padding:8px;
    
    margin:1px;
    margin-top:0;
    
    border-radius:0 0 5px 5px;
    border:1px solid #b4b4b4;
    border-top:0;
}

/* make sure text is not underlined */
.partial-file a.file-toggle:hover {
    text-decoration:inherit;
}

/* overwrites */
.partial-file a.file-toggle:hover,
.partial-file a.file-toggle:hover + .file-panel,
.partial-file.fileSelected a.file-toggle,
.partial-file.fileSelected a.file-toggle + .file-panel {
    /*border-color:black;*/
    border-width:2px;
    margin:0;
}

/* overwrites */
.partial-file.fileSelected a.file-toggle,
.partial-file.fileSelected a.file-toggle + .file-panel {
    border-color:black;
}

/* overwrites with the style that was overwritten in the first place (jah...) */
.partial-file.fileSelected a.file-toggle,
.partial-file a.file-toggle:hover {
    border-bottom-color:#b4b4b4;
    border-bottom-width:1px;
}

.partial-file a.file-toggle .thumb-container {
    display:block;
    width:142px;
    height:142px;
    margin:15px 28px;
    margin-bottom:14px;
    overflow:hidden;

    /* for aligning child */
    line-height:140px; /* NOTICE: 142 will push the image border below its container */
    text-align: center;
}

.partial-file a.file-toggle .thumb-container img {
    /* for aligning within parent */
    vertical-align:middle;
    max-width:100%;
    max-height:100%;

    border: 1px solid #e3e3e3;
}

.partial-file a.file-toggle .thumb-container img.transparent-border
{
    border-color: transparent;
}
/*
.partial-file a.file-toggle .thumb-container img.custom-thumb-size
{
    height: 50px;
}*/

.partial-file a.file-toggle .file-title {
    display:block;
    width:198px;
    height:26px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    
    line-height:26px;
    color:black;
    text-align:center;
}

.partial-file .file-downloadselect {
    display:block;
    width:198px;
    height:26px;
    
    border: 1px solid #b4b4b4;
    border-top:0;
    margin:0 1px;
    
    background-color:white;
    
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    
    line-height:26px;
    color:black;
    text-align:center;
}

.partial-file .file-panel .file-extension {
    float:left;
    
    width:36px;
    height:17px;
    line-height:17px;
    border-radius:5px;
    box-sizing:border-box;
    
    background-color:#7f7f7f;
    color:white;
    font-size:9px;
    font-weight:bold;
    text-align:center;
    
    overflow:hidden;
    white-space:nowrap;
}

.partial-file .file-panel a.file-detail {
    float:left;
    width:100px;
    height:17px;
    margin:0 5px;

    background:transparent url('/img/icon-filedetail.png') no-repeat center center;
}

.partial-file .file-panel a.file-detail:hover {
    background-image:url('/img/icon-filedetail-mo.png');
}

.partial-file .file-panel .download-panel {
    float:left;
    width:36px;
    height:17px;
    
    background:transparent url('/img/icon-filedownload.png') no-repeat center center;

    border:0; /*overwrite button style */
    cursor:pointer;
}

.partial-file .file-panel .download-panel:hover {
    background-image:url('/img/icon-filedownload-mo.png');
}

.partial-file .file-panel .stats-panel {
    float:left;
    width:36px;
    height:17px;
    line-height:17px;
    
    overflow:hidden;
    white-space:nowrap;
}

.partial-file .file-panel .downloadselect-panel {
    float:left;
    width:36px;
    height:17px;
    line-height:17px;
    
    overflow:hidden;
    white-space:nowrap;
    
    text-align:center;
    
    /* HACK: Quickly lineout the one button */
    box-sizing:border-box;
    padding-top:2px;
}

.partial-file .file-panel .approve-panel {
    float:left;
    width:36px;
    height:17px;
    line-height:17px;
    
    overflow:hidden;
    white-space:nowrap;
}

.typeselect-tooltip {
    /* overwrite default styling */
	padding: 0px;
	box-shadow: none;
	
	/* add custom styles */
	background-color:#efefef;
	border:solid 1px #aeaeae;
}


.partial-file .file-favorite
{
    position: absolute;
    z-index: 10;
    right: 0;
    font-size: 18px;
    margin: 9px;
    color: #7f7f7f;
}

.partial-file .file-favorite:hover
{
    color: #e9c000;
    text-decoration: none;
}

.partial-file .file-favorite.active
{
    color: #e9c000;
}

/* CC-41: mediabank card v2, only under .cards-v2 (core mediabank); the old card above is untouched */

/* the grid (beeldbank-index.css) sets the width and the spacing, no fixed width or margin here */
.cards-v2 .partial-file {
    width:auto;
    min-height:0;
    margin:0;
    border-radius:4px;
}

/* no frames, no grey background on the card link itself */
.cards-v2 .partial-file a.file-toggle,
.cards-v2 .partial-file a.file-toggle:hover,
.cards-v2 .partial-file.fileSelected a.file-toggle {
    width:100%;
    height:auto;
    margin:0;
    border:0;
    background-color:transparent;
    border-radius:4px 4px 0 0;
}

/* preview area: fixed box, image letterboxed (no crop, no stretch) */
.cards-v2 .partial-file a.file-toggle .thumb-container {
    width:100%;
    height:200px;
    margin:0;
    background-color:#f4f4f4;
    border-radius:4px;

    /* NOTICE: an inner border, an outer box-shadow would be clipped by the overflow:hidden that cuts the expired ribbon */
    box-sizing:border-box;
    border:2px solid transparent;

    /* NOTICE: keep line-height below the box height, see the note at .thumb-container above */
    line-height:196px;
}

.cards-v2 .partial-file a.file-toggle .thumb-container img {
    width:auto;
    height:auto;
    max-width:100%;
    max-height:196px;
    border:0;
    border-radius:4px;
}

/* CO-33 fallback: filetype icon / nothumb.gif has no dimensions on the preview alias */
.cards-v2 .partial-file a.file-toggle .thumb-container img.transparent-border {
    max-height:96px;
}

.cards-v2 .partial-file a.file-toggle .file-title {
    width:100%;
    height:26px;
    line-height:26px;
    margin-top:6px;
    font-size:12px;
    font-weight:bold;
    text-align:left;
}

/* selection / hover state (the old card used borders, which v2 removed) */
.cards-v2 .partial-file a.file-toggle:hover .thumb-container {
    border-color:#b4b4b4;
}

.cards-v2 .partial-file.fileSelected a.file-toggle .thumb-container {
    border-color:#000000;
}

/* action bar below the title */
.cards-v2 .partial-file .file-panel,
.cards-v2 .partial-file a.file-toggle:hover + .file-panel,
.cards-v2 .partial-file.fileSelected a.file-toggle + .file-panel {
    width:100%;
    height:20px;
    padding:0;
    margin:0;
    border:0;
    background-color:transparent;
    overflow:hidden;
    white-space:nowrap;
}

.cards-v2 .partial-file .file-panel .file-extension {
    height:20px;
    line-height:20px;
    margin-right:6px;
}

.cards-v2 .partial-file .file-panel a.file-detail {
    width:24px;
    height:20px;
    margin:0 6px 0 0;
}

.cards-v2 .partial-file .file-panel .download-panel,
.cards-v2 .partial-file .file-panel .downloadselect-panel,
.cards-v2 .partial-file .file-panel .stats-panel,
.cards-v2 .partial-file .file-panel .approve-panel {
    height:20px;
    line-height:20px;
    margin-right:6px;
}

/* the download (variants) button sits at the right edge of the action bar, the labels
   take the room between the detail icon and the button */
.cards-v2 .partial-file .file-panel .download-panel {
    float:right;
    margin:0 0 0 6px;
}

/* label badges live in the action bar, see the mockup */
.cards-v2 .partial-file .file-labels {
    /* flex after the floated icons takes the remaining width. NOTICE: no text-overflow, Chrome paints that ellipsis in the white badge colour */
    display:flex;
    align-items:center;
    height:20px;
    overflow:hidden;
    white-space:nowrap;
}

.cards-v2 .partial-file .file-labels .label-badge {
    flex:0 1 auto;
    min-width:0;
}

.cards-v2 .partial-file .file-labels .label-badge.label-more {
    flex:none;
}

/* expired ribbon over the bigger preview */
.cards-v2 .partial-file .expired-transparency {
    width:100%;
    height:200px;
    margin:0;
    border-radius:4px;
}

.cards-v2 .partial-file .label-expired {
    width:150px;
    top:22px;
    left:-40px;
}

/* download selection count + corner triangle (the v2 card has no 1px border to compensate) */
.cards-v2 .partial-file::after {
    top:8px;
    left:5px;
}

.cards-v2 .partial-file a.file-toggle::after {
    top:0;
    left:0;
    border-radius:4px;
}

.cards-v2 .partial-file .file-favorite {
    margin:8px;
    font-size:22px;
    color:white;

    /* NOTICE: a hard 1px outline, the white glyph also has to be readable on the light letterbox */
    text-shadow:
        -1px -1px 0 rgba(0,0,0,0.75),
        1px -1px 0 rgba(0,0,0,0.75),
        -1px 1px 0 rgba(0,0,0,0.75),
        1px 1px 0 rgba(0,0,0,0.75),
        0 0 4px rgba(0,0,0,0.5);
}

.cards-v2 .partial-file .file-favorite:hover,
.cards-v2 .partial-file .file-favorite.active {
    color:#e9c000;
}

/*
.typeselect-tooltip .row {
    height:30px;
    line-height:30px;
    padding:0 15px;
    box-sizing: border-box;
    
    border-top:solid 1px #dadada;
    width:300px;
}

* overwrites *
.typeselect-tooltip .row:first-child {
    border:0;
    background-color:white;
}
*/

/*
div.files div.item {
    float: left;
    width: 190px;
    height: 184px;
    border: 1px solid #D8D7D7;
    background: white;
    margin: 2px 8px 8px 2px;
    border-radius: 7px 7px 0 0;
    position: relative; * for positioning the child element a.item-enlarge *
}
 
* .item.panel = has a panel *
div.files div.item.panel {
    border-radius: 7px;
    height: 237px;
}

div.files div.item:hover,
div.files div.item.panel-download.fileSelected, 
div.files div.item.editSelected {
    margin: 0 6px 6px 0; * remove 2px from the margin *
    border-width: 3px; * add them to the border *
}

div.files div.item.panel-download.fileSelected, 
div.files div.item.editSelected {
    border-color:black;
}

div.files div.item a.toggle-item-select {
    color:black;
    text-decoration:none;
}

div.files div.item a.item-enlarge {
    display:none;
    position: absolute;
    left:10px;
    top:120px;
    z-index:2; * for putting it on top off .extension*
}

div.files div.item:hover a.item-enlarge {
    display:inline;
}

div.files div.item .title
{
    display:block;
    width: 180px;
    padding: 0 5px;
    height: 23px;
    overflow: hidden;
    text-overflow:ellipsis;
    line-height: 23px;
    text-align: center;
    background: #EAECED;
    border-top: 1px solid #D8D7D7;
    border-bottom: 1px solid #D8D7D7;
    white-space:nowrap;
}

div.files div.item .container
{
    width: 172px;
    height: 142px;
    display: table;
    padding: 9px;
}

div.files div.item .container .placeholder
{
    text-align: center;	
    display: table-cell;
    vertical-align: middle;
    position:relative; * for positioning the child .extension *
}

div.files div.item .container .placeholder img
{
    border: 1px solid #E3E3E3;
    vertical-align: middle;
    border-radius: 3px;
}

div.files div.item .container .placeholder .extension
{
    position:absolute;
    right:-9px;
    bottom:-9px;
    z-index:1; * for putting it on top off it's parent but below a.item-enlarge*
    
    width:34px;
    height:20px;
    border-top-left-radius: 3px;
    background-color:#343434;
    opacity:0.8;
    overflow:hidden;
    white-space:nowrap;

    color:white;
    font-weight:bold;
    font-size:10pt
}

div.files div.panel div.actions
{
    width: 170px;
    background: #F3F4F4;
    height: 42px;
    border-radius: 0 0 7px 7px;
    padding:5px 10px;
}

div.files div.panel div.actions a {
    color:black;
    text-decoration:none;
}

div.files div.panel div.actions a:hover {
    text-decoration:underline;
}

div.files div.panel div.actions .switch-download {
    display:block;
    width:145px;
    height:21px;
    line-height:21px;
    padding-left:25px;
}

div.files div.panel div.actions .approve-action {
    display:block;
    width:150px;
    height:21px;
    line-height:21px;
}

div.files div.panel div.actions .approve-action img {
    vertical-align:-14%;
    margin-right:5px;
}

div.files div.panel div.actions .approve-message {
    float:right;
    height:21px;
}

div.files div.panel div.actions .approve-message img {
    margin-top:4px;
}

div.files div.panel div.actions .switch-download.download {
    background:url('/img/icon-file-download.png') no-repeat left center;
}

div.files div.panel div.actions .switch-download.downloaded {
    background:url('/img/icon-file-downloaded.png') no-repeat left center;
}

div.files div.panel div.actions .switch-download.downloaded:hover {
    background-image:url('/img/icon-file-remove-download.png');
}

div.files div.panel div.actions .switch-download.unavailable {
    opacity: 0.3;
}

div.files div.panel.panel-selection {
    height:216px; *overwrites*
}

div.files div.panel.panel-selection div.actions {
    height:21px; *overwrites*
}

div.files div.panel.panel-selection div.actions .remove {
    display: block;
    height: 21px;
    line-height: 21px;
    padding-left: 25px;
    width: 145px;
    background:url('/img/icon-file-remove-download.png') no-repeat left center;
}

div.files div.panel div.count-panel {
    width: 150px;
    background: #F3F4F4;
    height: 30px;
    border-radius: 0 0 7px 7px;
    padding:11px 20px;
}

div.files div.panel div.count-panel .position {
    float:left;
    width:30px;
    height:30px;
    line-height:30px;
    text-align:center;
    border-radius:15px;
    background-color: #7f7f7f; * fallback; should be overwriten by themeBgColour*
    color:white;
    font-size:20px;
}
    
div.files div.panel div.count-panel .count {
    float:right;
    color:#7f7f7f;
    line-height:30px;
}
*/