/**
 * Courses
 * jmorrison
 * 12/16/16
 */

body { font-family: 'Lato', sans-serif; color: #333; font-size: 18px; }


/*  GLOBALS
    ----------------------- */

    /* Headings */
    h1 { font-size: 48px; margin: 0 0 30px 0; font-weight: 600; }

    h2 { font-size: 32px; margin: 30px 0; font-weight: 600; }

    h2 i { margin-right: 10px; }

    h3 { margin: 40px 0 20px 0; padding: 0 0 10px 0; font-weight: 600; }

    h3 i { margin-right: 12px; }

    h4 { margin-top: 90px; margin-bottom: 20px; padding: 0 0 20px 0; text-transform: uppercase; font-size: 20px; font-weight: 600; border-bottom: 1px solid #eee; }

    h4 i { margin-right: 10px; }

    h5 { margin: 30px 0 10px 0; font-size: 20px; font-weight: 600; }


    blockquote { font-style: italic; }

    .required { color: red; }

    .has-error { border: 1px solid red; color: red; }

    .help-block { font-size: 80%; font-style: italic; color: red; }

    a:link, a:visited, button { transition: all 0.2s linear; }

    a:hover, a:active { text-decoration: underline; transition: all 0.2s linear; }


/*
    HEADER
    ----------------------- */

    #header-wrap { }

        #header-wrap h1 { padding: 0; margin: 0; }

        #header-wrap { }

        .tagline { display: none; margin-left: 14px; padding-left: 20px; padding-bottom: 6px; color: #666; font-size: 28px; font-weight: 300; border-left: 5px solid #eee; }

        #header-wrap img {  }

    .navbar { min-height: 90px; margin: 0; }

    .navbar-right { margin-top: 20px; }

    .navbar-toggle { border-color: #eee; margin-top: 26px; }

    .navbar-toggle .icon-bar { background: #333; }


/*
    CONTENT
    ----------------------- */

    /* Course Index */
    .course-item { padding: 30px 0 30px 34px; position: relative; }

        .course-item:before { content: "\f097"; font-family: FontAwesome; font-size: 20px; font-weight: normal; position: absolute; top: 29px; left: 0; }

        .course-item h5 { padding: 0; margin: 0 0 10px; }

        .course-item h5 a { }

        .course-item .course-quote { }

        .course-item .course-author { font-style: italic; font-size: 90%; opacity: 0.6; margin-top: 5px; }

        .course-item .divider { display: inline-block; padding: 0 10px; color: #ccc; }

    .course-item + .course-item { border-top: 1px solid #ddd; }


    .course-item.coming-soon { color: #ccc; }

        .course-item.coming-soon a { color: #ccc; cursor: default; text-decoration: none; }

    #container-title-wrap { background: #1b92c1; color: #FFF; padding: 120px 0; }

        h1.course-title { padding: 0; margin: 0 0 10px 0; text-align: center; font-size: 64px; font-weight: 300; }

        h1.course-title a { color: #FFF; text-decoration: none; }

        p.course-author { font-size: 20px; font-style: italic; text-align: center; color: #084e77; }

        p.course-author i { margin-right: 5px; color: #084e77; }

        .course-description { text-align: center; }

        .course-description small { display: block; margin-top: 10px; }

        a.btn-start { text-align: center; font-size: 24px; padding-left: 60px; padding-right: 60px; }

        a.btn-start i { display: inline-block; margin-left: 10px; }

        h2.lesson-title { text-align: center; margin-bottom: 0; }

        h2.lesson-title small { color: #fff; display: block; text-transform: uppercase; margin: 0 0 10px 0; font-weight: 300; font-size: 60%; }


    #container-main-wrap { background: #fff; padding-top: 30px; padding-bottom: 30px; }

        #matieral-body { }

        .anchor { display: block; margin-bottom: 20px; }

        #material-body ol li { padding-left: 10px; }


    /*
        SIDEBAR
        ----------------------- */

        #material-sidebar { position: relative; }

            .lesson-outline { display: none; margin-left: 10px; padding-left: 30px; border-left: 5px solid #eee; }

                .affix { top: 30px; }

                .affix-top { max-width: 100%; }

                .affix-bottom { position: absolute; max-width: 100%; }


/*
    QUIZ
    ----------------------- */

    #container-quiz-wrap { background: #1b92c1; color: #FFF; padding: 60px 0; }

        .quiz { font-size: 110%; }

        .quiz h2 { margin: 0 0 30px; color: #FFF; }

        .quiz-info { margin: 0 0 50px 0; color: #084e77; }

        .quiz input[type=text] { padding: 0 0 1px 0; margin: 0; border: none; border-bottom: 2px dashed #FFF; color: #fff591;
            font-size: 110%; font-weight: bold; width: 120px; max-width: 360px; text-align: center; background: transparent; transition: all 0.2s linear; }

        .quiz input[type=text]:focus { border-bottom-color: #fff591; outline: none; background: rgba(255, 255, 255, 0.1); }

        .messages { margin: 30px 0; padding: 30px; display: none; }

        .messages p { margin: 0; padding: 0; font-size: 22px; }

        .messages p i { margin-right: 10px; }

        .error { display: block; color: #084e77; padding: 10px 0 10px 40px; position: relative; }

        .error:before { content: "\f071"; font-family: FontAwesome; font-weight: normal; color: #084e77; position: absolute; top: 12px; left: 0; }

        .questions { margin: 0; padding: 0 0 0 28px; }

        .questions li { margin: 0; padding: 0 0 20px 6px; }

        .quiz h5 { font-weight: 600; text-transform: uppercase; padding: 0 0 10px 0; margin: 30px 0 20px -28px; color: #6FC6E8;  }

        .quiz button.btn { margin: 20px 0; padding: 10px 20px; font-size: 18px; }


/*
    COURSE OUTLINE & SIGNUP
    ----------------------- */

    #container-course-wrap { margin-top: 30px; }

    .course-outline { margin: 0; padding: 0 0 0 20px; }

    .course-outline li { margin: 0; padding: 10px 0 10px 6px; }

    .course-outline li + li { border-top: 1px dashed #ddd; }

    .course-outline li.outline-active { color: #333; font-weight: 600; }

    .course-outline li.outline-active:after { color: #999; margin-left: 25px; content: "\f06e"; font-family: FontAwesome; font-weight: 300; }

    .course-outline li.outline-completed a { color: #666; }

    .course-outline li.outline-completed:after { color: #999; margin-left: 25px; content: "\f00c"; font-family: FontAwesome; font-weight: 300; }


    /* Modals */

    .modal { }

    .modal h4 { margin: 0; padding: 0; border: none; }

    .modal-body { padding: 30px; }

    .modal-body p { margin-bottom: 10px; }

    .modal-body small { font-style: italic; margin-bottom: 30px; display: block; }

    .modal label { }

    .modal textarea { min-height: 120px; }

    .modal-footer .btn { margin-bottom: 0; }

/*
    FOOTER
    ----------------------- */

    #container-footer { padding-top: 60px; padding-bottom: 30px; text-align: center; font-size: 80%; color: #999; }



/*
    MEDIA QUERIES
    ----------------------- */

    @media (max-width: 767px) {

        h4 { line-height: 1.4; }

        #container-main-wrap { padding: 30px; }

        #container-quiz-wrap { padding: 30px; }

        #container-course-wrap { padding: 30px; margin-top: 0; }
    }

    /* Small devices (tablets, 768px and up) */
    @media (min-width: 768px) {

        #material-body p { margin-left: 60px; }

        #material-body blockquote { margin-left: 30px; }
    }

    /* Medium devices (desktops, 992px and up) */
    @media (min-width: 992px) {  }

    /* Large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) {  }