/* ---------------------------------------------------------------

Roster

*/

#lcc-roster,
lcc-roster {
    margin-left: 0;
    margin-right: 0;
    overflow: visible;

    &>.row {
        margin-left: 0;
        margin-right: 0;
    }

    #current,
    #instructor,
    current,
    instructor {
        .avatar-container {
            min-height: 175px;
        }
        .text-container {
            min-height: 0;
        }
        .bio {
            margin-bottom: 30px;

            &.bio-expanded {
                top: -15px;
            }
        }
    }

    .instructor-details + .instructor-details {
        .avatar-container,
        .details-container {
            margin-top: 15px;
            border-top: 1px solid #eee;
            padding-top: 15px;
        }
    }
    
    .text-container {
        background-color: #fff;
        background-color: rgba(255,255,255,0.85);
        min-height: 145px;
    }
    .actions-container {
        padding-bottom: 15px;
    }
    
    h2 {
        border-bottom: 1px solid $divider-grey;
        color: $neutral-medium;
        font-size: 14px;
        font-weight: 100;
        letter-spacing: 1px;
        margin-bottom: 15px;
        padding-bottom: 5px;
        text-transform: uppercase;
    }
    h3 {
        margin-top: 0;
    }
    .avatar {
        background: url('/assets/am/profile/_default-50.png') no-repeat 50% 50%;
        background-color: #f3f3f3;
        border-radius: 50%;
        display: block;
        float: left;
        height: 50px;
        line-height: 0;
        margin-right: 15px;
        overflow: hidden;
        width: 50px;

        &.large {
            background-image: url('/assets/am/profile/_default-100.png');
            height: 100px;
            width: 100px;

            img {
                height: 100px;
                width: 100px;
            }
        }

        img {
            height: 50px;
            width: 50px;

            &[src=""] {
                display: none;
            }
        }
    }

    ul.user-actions {
        margin: 0;
        padding: 0;

        li {
            display: block !important;
            line-height: 1.2;

            a,
            .lp-link {
                color: #00f;
                display: inline;
                font-size: 11px;
                font-weight: 600;
                margin-bottom: .416666667em;
                text-transform: uppercase;

                /*border-bottom: 1px solid rgba(219,224,211,0.35);
                box-shadow: inset 0 -6px 0 rgba(219,224,211,0.35);*/
                cursor: pointer;
                position: relative;

                &:hover,
                &:focus {
                    /*border-bottom: 1px solid rgba(219,224,211,0.75);
                    box-shadow: inset 0 -6px 0 rgba(219,224,211,0.75);
                    color: @linkhovercolor-alt;*/
                    text-decoration: none;
                }
            }
        }
    }

    #classmates,
    classmates {
        .classmate {
            margin-bottom: 15px;

            h3 {
                font-size: 14px;
            }
            .bio {
                &.bio-expanded {
                    bottom: 40px;
                    margin-right: 10px;
                    
                    &.bio-repositioned {
                        bottom: -100px;

                        .pointer.left {
                            bottom: 209px;
                        }
                    }

                    .pointer.left {
                        bottom: 69px;
                        top: auto;
                    }
                }
            }
        }
    }
}


.bio {
    color: #777;
    font-size: 12px;
    margin-bottom: 10px;

    &.bio-collapsed {
        overflow: hidden;
        height: 105px;
        position: relative;

        .btn-collapse {
            display: none;
        }
        .btn-expand {
            bottom: 0;
            cursor: pointer;
            display: inline-block;
            left: 0;
            position: absolute;
            text-transform: uppercase;
            z-index: 3;
        }
        .collapse-overlay {
            background-color: transparent;
            background-position: 0 100%;
            background-repeat: repeat-x;
            hcimg: '/gradient_white_bottom.png';
            bottom: 0;
            display: block;
            height: 70px;
            left: 0;
            position: absolute;
            right: 0;
            z-index: 2;
        }
    }
    &.bio-expanded {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-shadow: 0 0 10px #bbb;
        box-shadow: 0 0 10px rgba(100,100,100,0.3);
        margin: -15px -25px 0 -15px;
        padding: 10px 15px;
        position: absolute;
        z-index: 999;

        .pointer.left {
            border-top: 10px solid transparent;
            border-right: 10px solid #ddd;
            border-bottom: 10px solid transparent;
            left: -10px;
            position: absolute;
            top: 75px;

            &:before {
                border-top: 10px solid transparent;
                border-right: 10px solid #fff;
                border-bottom: 10px solid transparent;
                content: '';
                left: 2px;
                position: absolute;
                top: -10px;
            }
        }

        .btn-expand {
            display: none;
        }
        .btn-collapse {
            display: inline-block;
        }
    }
}


@media screen and (max-width: $screen-sm-max) {
    .bio {
        &.bio-expanded {
            margin-right: 10px;
        }
    }
}


@media screen and (min-width: $screen-lg-min){
    #lcc-roster,
    lcc-roster {
        ul.user-actions {
            border-left: 1px solid $divider-grey;
            padding: 0 0 0 15px !important;
        }
    }
}