@import 'variables';
@import 'mixins';

#tracks-page {
    .header {
        background-color:$color-2;
        background-image:image-url('background-overlay-2.png');
        background-size:cover;
        padding:100px 0 35px;
        margin-bottom:35px;

        h1 {
            padding-top:20px;
            @include font-size(40, 40);
            //letter-spacing:-1.56px;
            font-weight:$bold;
            margin-bottom:5px;
            color:#fff;
        }
        .h1-subtitle {
            max-width:70%;
            @include font-size(16, 21);
            color:#fff;
            font-weight:$fw-regular;
        }
    }
    h2 {
        @include font-size(18, 18);
        font-weight:$regular;
        margin-bottom:15px;
    }
    .num-tracks {
        float:right;
        margin-right:20px;
        color:#666;
        margin-top:5px;
        @include font-size(12, 12);
        strong {
            font-weight:$regular;
        }
    }
    .track {
        display:block;
        background:#fff;
        color:#333;
        text-decoration:none;
        border:1px solid #c2c3c3;
        border-radius:2px;
        padding:20px 20px;
        margin: 0 20px 20px 0;
        position:relative;
        overflow:hidden;

        @include width-smaller-than-medium() {
            text-align:center;
        }

        &:hover {
            border-color:$color-2;
        }

        .status {
            float:right;
            display:none;
        }

        img {
            height:78px;
            width:70px;
            display:block;

            @include width-smaller-than-medium() {
                margin: 0 auto 15px auto;
            }
            @include width-medium() {
                margin-right:15px;
                float:left;
            }

        }
        .title {
            overflow:hidden;
            white-space:nowrap;
            h2 {
                @include font-size(18, 18);
                font-weight:$bold;
                margin-right:5px;
                vertical-align:bottom;
                margin-bottom:7px;
                @include width-medium() {
                    display:inline-block;
                }
            }
            .num-exercises {
                padding:4px 7px;
                display:inline-block;
                margin-bottom:7px;
                @include font-size(10, 10);
                font-weight:$regular;
                color:#999;
                background:#f3f3f3;

                @include width-smaller-than-medium() {
                    display:inline-block;
                    margin-top:3px;
                }
            }
            @include width-smaller-than-medium() {
                clear:both;
            }
        }
        summary {
            @include font-size(14, 19);
            //display:inline-block;
            vertical-align:bottom;
            height:76px;
            overflow:hidden;
            @include width-medium() {
                max-width:390px;
            }
        }
    }
}
