courses.scss

gistfile1.txt

@import 'mixings';

.single_lesson_wrapper, .single_course_wrapper{
  .course, .lesson{
    width: 1000px;
    border: 1px #c2c6bd solid;
    background: url("course-icon.png") #e7ebe2 no-repeat;
    padding: 17px 19px 19px 19px;

    .title{
      line-height: 32px;
      color: #264db0;
      font-family: Arial;
      font-size: 19px;
      font-style: italic;
      font-weight: bold;
      text-decoration: none;
    }

    .body{
      .hint{
        font: {
          family: Arial;
          style: italic;
          size: 13px;
        }
        line-height: 22px;
        color: #323232;
      }
      .left{
        border: 1px #c2c6bd solid;
        background-color: #f5f4f3;
        padding: 7px 10px 4px 12px;
        margin: 5px 0 16px 0;
        float: left;
        width: 692px;
        min-height: 117px;
        font: {
          family: Arial;
          size: 13px;
        }
        color: #323232;
      }

      .right{
        margin-top: 5px;
        float: right;
        width: 251px;
        background-color: #e9dcc9;
        border: 1px #bab19f solid;
        padding: 5px 0 5px 19px;

        .field, .content{
          font: {
            family: Arial;
            size: 13px;
          }
          line-height: 19px;
        }

        .field{
          color: #323232;
          padding-right: 12px;
        }

        .content{
          font-weight: bold;
          a{
            font-weight: auto;
            color: #264db0;
            text-decoration: none;
          }
        }

        .course_administration{
          .edit_button, .add_lesson_course_button{
            @include lesson_button("orange-button-bg.png", #916c10, 112px);
            float: left;
            margin-top: 5px;
            margin-bottom: 5px;
          }

          .add_lesson_course_button{
            margin-left: 10px;
          }
        }
      }
    }
  }

  .lesson{
    border: 1px #99cccc solid;
    background: url("lesson-icon.png") #d9e8e8 no-repeat;
    width: 924px;
    margin: 2px auto 0 auto;

    .body{

      .hint{
        &.left_hint{
          float: left;
          padding-bottom: 7px;
        }

        &.right_hint{
          font-style: normal;
          float: right;

          span.start_datetime{
            font-weight: bold;
          }
        }
      }

      .left{
        min-height: auto;
        p, ul, ol{
          margin: 2px 0;
        }
      }

      .right{
        background: none;
        border: 0;
        width: 181px;
      }

      .bot{
        width: 900px;
        border: 1px #c2c6bd solid;
        background-color: #f5f4f3;
        padding: 5px 10px 4px 12px;
        margin: 5px 0 16px 0;
        height: 25px;
        overflow: hidden;

        .text_block{
          float: left;
          padding-right: 7px;
          font-family: Arial;
          color: #535353;
          font-size: 13px;
          line-height: 23px;
          overflow: hidden;

          .places_count{
            color: #cd5b33;
            color: #6b8b15;
            font-weight: bold;
          }
        }

        .lesson_delimiter{
          float: left;
          border-left: 1px #aaaaaa solid;
          width: 7px;
          height: 17px;
          margin-top: 4px;
        }
      }
    }
  }

  .comments_wrapper{
    width: 500px;
    border: 1px #c5c5c5 solid;
    margin: 6px 0 0 18px;

    .comment_wrapper{
      padding: 20px 20px 30px 20px;

      .commenter_info{
        float: left;
        width: 175px;

        .avatar{
          width: 28px;
          height: 28px;
          float: left;

          img{
            width: 28px;
            //height: 28px;
          }
        }

        .name{
          float: left;
          margin-left: 8px;

          .full_name{
            font: {
              family: Arial;
              style: italic;
              weight: bold;
              size: 13px;
            }
            line-height: 13px;
            color: #181818;
          }

          .commenter_type{
            font: {
              family: Arial;
              style: italic;
              size: 12px;
            }
            line-height: 15px;
            color: #464646;
          }
        }
      }

      .comment_delimiter{
        float: left;
        width: 1px;
      }

      .body_wrapper{
        float: left;
        font: {
          family: Arial;
          size: 13px;
        }
        overflow: hidden;
        padding-left: 14px;
        width: 268px;
        min-height: 27px;
      }

      &.teacher{
        .body_wrapper{
          color: #da5122;
          border-left: 1px #da5122 solid;
        }
      }

      &.student{
        .body_wrapper{
          color: #225993;
          border-left: 1px #225993 solid;
        }
      }

      &.guest{
        .body_wrapper{
          color: #7e793f;
          border-left: 1px #7e793f solid;
        }
      }
    }

    .comment_form{
      padding: 6px;
      position: relative;

      &.with_top_border{
        border-top: 1px #c5c5c5 solid;
      }

      textarea{
        border: 1px #C5C5C5 solid;
        outline: none;
        resize: none;
        height: 40px;
        width: 479px;
        font: {
          size: 13px;
          family: Arial;
        }
        padding-left: 5px;

        &::-webkit-input-placeholder{
          font:{
            style: italic;
            size: 13px;
          }

        }
      }

      .submit{
        float: right;
        @include blue_button(160px, 26px);
      }

      .ajax_loader{
        top: 32px;
        left: 227px;
      }
    }

    .submit_error{
      width: 200px;
      float: left;
      font:{
        size: 12px;
        family: Arial;
        style: italic;
      }
      color: #c60000;
    }
  }

}


.course_lesson_panel{
  border: 1px #c2c6bd solid;
  background-color: #e7ebe2;
  padding: 3px 14px 3px 19px;

  .left{
    float: left;
    span.label{
      font-style: italic;
    }
  }

  .right{
    float: right;
  }

  .left, .right{
    span{
      font: {
        family: Arial;
        size: 13px;
      }
    }
  }

}