@icon-font-path: '/desktop/libs/bootstrap/fonts/';
@lightTextColor: #B1B1B1;

.glyphicon-star.btn-link {
    color: lighten(@brand-primary, 33%);
}
.houseCollection.files .houseList {
    span.fileAvatar {
        display: block;
        float: left;
        width: 310px;
        position: relative;
        margin: 8px;
        z-index: 1;
        .panel-body {
            -webkit-transform-style: preserve-3d;
    		-moz-transform-style: preserve-3d;
    		transform-style: preserve-3d;
            
            -webkit-transition: all .4s ease-in-out;
    		transition: all .4s ease-in-out;
            min-height: 111px;
            cursor: pointer;
        }
        .caption {
        }
        .filename {
            .contentTypeIcon {
                position: absolute;
                bottom: 0;
                left: 0;
            }
            word-wrap: break-word;
        }
        .actions {
            display: none;
            position: absolute;
            top: 0;
            right: 0;
            background: @dropdown-bg;
            border: 1px solid @dropdown-border;
            border-radius: 4px;
            -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
            
            > div {
                float: left;
            }
        }
        .contentIcon {
            text-align: center;
            display: block;
            font-size: 56px;
            img {
                max-height: 300px;
            }
        }
        .filename a, .byline a {
        }
        .contentLength {
        }
        .contentType {
            padding: 0px 4px 0px 0px;
        }
        .byline {
            float: right;
        }
        .extraInfo {
            z-index: -1;
            opacity: 0;
            visibility: hidden;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: fadeout(@table-bg-hover, 30%);
            padding: 10px;
            overflow-y: auto;
            word-break: break-word;
            
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            transform: rotateY(180deg); 
            -webkit-transform-style: preserve-3d;
    		-moz-transform-style: preserve-3d;
    		transform-style: preserve-3d;
            
            -webkit-transition: all .4s ease-in-out;
    		transition: all .4s ease-in-out;
    		
    		/* Let's get this party started */
            &::-webkit-scrollbar {
                width: 12px;
            }
             
            /* Track */
            &::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
            }
             
            /* Handle */
            &::-webkit-scrollbar-thumb {
                background: fadeout(@brand-primary, 20%);
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
            }
            &::-webkit-scrollbar-thumb:window-inactive {
            	background: fadeout(@brand-primary, 60%);
            }
            
            h3 {
                margin-top: 0;
            }
        }
        &:hover {
            .actions {
                display: block;
            }
        }
        &[selected] {
            
            .panel-body {
                -webkit-transform: translatez(-1px) rotateY(180deg);
                -moz-transform: translatez(-1px) rotateY(180deg);
                -ms-transform: translatez(-1px) rotateY(180deg);
                -o-transform: translatez(-1px) rotateY(180deg);
                transform: translatez(-1px) rotateY(180deg);
                .contentIcon {
                    -webkit-filter: blur(3px);
                    -moz-filter: blur(3px);
                    -ms-filter: blur(3px);
                    filter: blur(3px);
                }
            }
            .extraInfo {
                z-index: 3;
                display: block;
                opacity: 1;
                visibility: visible;
            }
            .contentIcon, .byline, .filename {
            }
            .actions {
                display: none;
            }
        }
    }
    
    tr.fileRow {
        td.icon {
            width: 40px;
            text-align: center;
            img {
                max-height: 36px;
            }
        }
        td.name {
            word-break: break-all;
            word-wrap: break-word;
        }
        td.at {
            width: 132px;
        }
        td.actions {
            width: 220px;
            div.actions {
                width: 210px;
            }
            div.actions > div {
                float: left;
            }
        }
    }
}
.doc .file {
    .actions {
        position: absolute;
        bottom: 100%;
        right: 0;
    }
    .actions > div {
        float: left;
    }
    .byline {
        float: right;
    }
    .contentLength, .contentType {
        padding: 0 6px;
    }
    .contentIcon {
        text-align: center;
        display: block;
        audio, video {
            width: 100%;
        }
    }
}

.feed-item {
    .byline {
        display: none;
    }
    .byline {
        position: absolute;
        bottom: 8px;
        left: 8px;
        right: 8px;
        padding: 8px;
        background: rgba(0,0,0,0.77);
        color: white;
        font-size: 12px;
        line-height: 28px;
    }
    .byline a {
        color: white;
    }
}
.feed-item:hover .byline {
    display: block;
}

body > .doc {
    position: fixed;
    top: 50px;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 9999;
    overflow: auto;
}

body > .uploadFrame {
    position: fixed;
    top: 50px;
    bottom: 0;
    right: 0;
    left: 0;
    text-align: center;
    z-index: 9999;
    font-size: 24px;
    .dropzone {
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .orTxt {
        display: none;
    }
    .fileForm {
        z-index: 100;
        position: absolute;
        left: 0;
        right: 0;
        font-size: 24px;
        top: 100px;
    }
    ul.uploadFileList {
        position: absolute;
        top: 120px;
        left: 0;
        right: 0;
        text-align: left;
        li {
            position: relative;
            .title {
                position: absolute;
                left: 0;
                color: white;
            }
            .size {
                position: absolute;
                right: 0;
                top: 0;
                color: white;
            }
            .progress {
                height: 32px;
            }
        }
    }
}
.uploadFrame.dragover {
    span {
        visibility: hidden;
    }
    .dropzone {
        background: rgba(0, 0, 0, 0.27);
        display: block;
        visibility: visible;
        border: 3px dashed black;
    }
    .fileForm {
        visibility: hidden;
    }
}

body.appBlurred {
    overflow: hidden;
}
body.appBlurred > .app {
    .blur(3px);
}