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

#exercise-page,
#solutions-page {
    .header {
        background-size:cover;
        background-color:$color-2;
        padding:20px 0;
        overflow:hidden;
        margin-bottom:20px;
        .track {
            margin-right:20px;
            float:right;
            img {
                width:50px;
                display:inline-block;
                vertical-align:middle;
            }
            .title {
                display:none;
                font-weight:$regular;
                color:#fff;
            }
        }
        .icon {
            float:left;
            height:55px;
            padding-right:15px;
            border-right:1px solid rgba(#fff, 0.5);
            margin-right:15px;
            img {
                display:block;
                height:100%;
                height:55px;
                width:55px;
            }
        }

        h1 {
            @include font-size(25, 25);
            letter-spacing:-0.30px;
            font-weight:$regular;
            margin-bottom:6px;
            padding-top:6px;
            color:#fff;
            strong {
                font-weight:$bold;
            }
        }
        .h1-subtitle {
            color:#eee;
            @include font-size(12, 12);
            a {
                font-weight:$fw-regular;
                color:#fff;
            }
        }
    }
}

#exercise-page {
    .info-section {
        padding-bottom:20px;
        border-bottom:1px solid #ddd;
        margin-bottom:30px;
        .difficulty, .length {
            float:right;
            text-transform:uppercase;
            @include font-size(11, 11);
        }
        .length {
            display:inline-block;
            margin-right:5px;
            padding-right:5px;
            border-right:1px solid #aaa;
            color:#aaa;
            font-weight:$regular;
        }
        .difficulty {
            display:inline-block;
            font-weight:$bold;

            &.easy { color: $color-1; }
            &.medium { color: #f48b00 }
            &.hard { color: #f34a56 }
        }

        h2 {
            @include font-size(16, 16);
            font-weight:$regular;
            margin-bottom:8px;
        }
        p.blurb {
            margin-bottom:8px;
            line-height:1.3;
        }
        .topics {
            overflow:hidden;
            height:21px;
            .topic {
                @include font-size(11, 11);
                display:inline-block;
                font-weight:$regular;
                background:#eee;
                color:#999;
                padding:3px 6px 4px;
                border-radius:2px;
            }
        }
    }
    .more-button {
       display:block;
       width:100%;
       padding:20px;
       border:1px solid $color-2;
       color:$color-2;
       background:#fff;
       font-weight:$regular;
       margin-bottom:20px;
    }
}

