lesson.less

@import (reference) "../../inbook-client/latest/css/style.less";
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);


.page-layout {
  .inbook-grid-layout;
  width:600px;
  padding-bottom:  4 * @sizer-base;
  padding-top:     4 * @sizer-base;
}


.table-of-contents{
  a.notready{
    opacity:0.2;
  }
}


//  Title page styles



.title-page-info  {
    margin-top: 1 * @sizer-base;
    color:      #fff;
    .module-num  {
      .type-small;
      .bold;

    }
    .section-type  {
      .type-medium;
      .bold;
      margin-bottom:   1 * @sizer-base;
    }
     .module-name  {
      .type-xxsmall;
      margin-top:   1 * @sizer-base;
          
    }

} 

.anim-area  {
  color:      #fff;
  padding-left:     4 * @sizer-base;
  padding-right:    4 * @sizer-base;
  // padding-top:      2 * @sizer-base;
  // padding-bottom:   2 * @sizer-base;
}
.big-operators  {
  font-size:     170px;
  line-height:    80%;
  padding-bottom:    4 * @sizer-base;
  .bold; 
  .center;
}

.credits   {
  color:      #fff;
  .cred  { 
    padding:     10px 0;
      .title  { 
        .type-xxsmall;
        .bold;
        // border-bottom:    1px solid #fff;
        padding-top:      2 * @sizer-base;            
        padding-bottom:   1 * @sizer-base;      
        width:            50%;

      }

  }

}



/////////////////


.header-module {
  .type-xxxxsmall;
  .center;
  margin-top: 2 * @sizer-base;
  margin-bottom: 2 * @sizer-base;
}
.header-module-sub {
  .center;
  padding: 2 * @sizer-base;

  background-color: #53B3E5;
  color: #fff;
  margin-top: 2 * @sizer-base;
  margin-bottom: 4 * @sizer-base;
}
.header-section {
  .type-small;
  .bold;
  .center;
  margin-bottom: 3 * @sizer-base;
}


.inbook-grid-layout.narrow {
  width:650px;
}

.page-container {
  padding: 4 * @sizer-base;
}
.page-layout {
  .inbook-grid-layout;
  width:600px;
  padding-bottom:  4 * @sizer-base;
  padding-top:     4 * @sizer-base;
}

.para {
  margin-top:       5 * @sizer-base;
  margin-bottom:    5 * @sizer-base;
}

.exemple-frame {
  border: 1px solid #ccc;
  padding:12px;
  margin-top: 1 * @sizer-base;
  margin-bottom: 2 * @sizer-base;

  .paper-shadow;


  .exemple-header {
    .bold;
    font-size:  120%;
    margin-bottom: 2 * @sizer-base;   

  }

  .para  {
    margin-top:       2 * @sizer-base;
    margin-bottom:    2 * @sizer-base;
  }

}

.note-frame {
  border: 3px solid #999;
  padding:12px;
  margin-top: 1 * @sizer-base;
  margin-bottom: 2 * @sizer-base;
}

.term-box {
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  display: inline-block;
}

.formula-box {
  .term-box;
  .center;
  .type-medium;
  padding:    4 * @sizer-base;
  display:    block;
}



tr.tr-underline td {
  border-bottom: 1px solid #999;
}
ol.basic-list,
ul.basic-list   {
  margin:         0;
  padding:        2 * @sizer-base;
  padding-right:  0;
  padding-left:   4 * @sizer-base;
}

ul.basic-list   {  
  list-style-type: none;
  li { 
    padding:        8px 0;
    padding-left:   6 * @sizer-base;
    background:     #eee;      
    margin:         (1*@sizer-base) 0;
    transition:     800ms;
    &:hover  {  
      background-color:  darken(#eee, 10%);
      margin-left:     2 * @sizer-base;
    }
  }
}

.vert-add  {
    display:  inline-block;
    .term     {
      text-align:   right;
      &.last {
        border-bottom:    1px solid #333;
      }
    }
}

.basic-table  {
  border-collapse: collapse;
  td {
      border:1px solid #ccc; 
      padding:6px 8px;
      width:  100px;
      vertical-align: top;

      &.small-cell{
        width: 75px;
      }
      &.medium-cell{
        width: 125px;
      }
      &.large-cell{
        width: 175px;
      }

  }
  &.unbordered {
    td {
      border: none;
      vertical-align:  middle;
    }
  }

  &.cells-small {
    td{
      width: 75px;
    }
  }
  &.cells-medium {
    td{
      width: 125px;
    }
  }
  &.cells-large {
    td{
      width: 175px;
    }
  }




} 



.place-value-table    {
  display:  inline-block;
  table { 
    border-collapse: collapse;
    td {
      border:1px solid #ccc; 
      padding:6px 8px;
      width:  75px;
      vertical-align: bottom;
      font-size:    18px;
      line-height:  20px;
    }
    tr:first-child{
      td {
        font-weight:  bold;
        border-top:   none;
      }
    }
    tr:nth-of-type(2){
      td{
        font-size:    12px;
        line-height:  14px;
      }
    }
  }

}


.workbook-textarea  {
    display: inline-block;
    
  .input-ans-icon {
    display:      inline-block;
    vertical-align:       middle;
    background-color:     #333;
    color:                #fff;
    border-radius:        100px;
    
    border:              1px solid #ddd;
    position:           relative;
    left:               20px;
    z-index:            2;
    box-shadow:         inset 0 1px 1px rgba(0,0,0,0.1);

    width:              21px;
    height:             25px;
    padding:            8px 10px;
    font-size:          110%;

    &.input-icon {
      transform:            rotate(180deg);
      -ms-transform:        rotate(180deg);
      -webkit-transform:    rotate(180deg);
      padding:              8px;
      width:                25px;
      height:               25px;
      font-size:            100%;
    }
  }

  textarea {
    width:    100%;
  }

}





/*  !!!!EXERCISE STYLES!!!!  */

.exercise-num  {
  .header-module;
}

.exercise-header  {
  .type-xxsmall;
  .bold;
  margin-top:      3 * @sizer-base;
  margin-bottom:   4 * @sizer-base;
}
.exercise-text   {
  .type-xxsmall;
  .para;
  line-height:    120%;
}

.exercise-box    {
  .paper-shadow;
  .center;
  border:       1px solid #ccc;
  padding:      4 * @sizer-base;
  box-sizing:   border-box;
}

.solution-header  {
  .type-xxsmall;
  .bold;
}

.solution-body  {
  .type-xxsmall;
  margin-top:   3 * @sizer-base;
}

.show-solution-btn  {
    .softbtn;
    .type-xxsmall;
    .green;
}

.question-divider  {

  margin-top:      8 * @sizer-base;
  margin-bottom:   8 * @sizer-base;

}

  

/*=====================*/




/*NOT ACTUALLY USED... */
.exercise-info  {
  width:         100%;
  max-width:        600px;
  margin:       -10px auto 0;
  text-align:    center;
  z-index:      auto;

  .pencil {
    width:              60px;
    height:             50px;
    padding:            10px 0 0;
    margin:             0 auto;
    border-radius:      60px;
    background-color:   #ddd;
    color:              #333;
    box-shadow:         0 0 8px #333;
    font-size:          40px;
    z-index:            2;
    cursor:              pointer;
    position:           relative;
    top:                60px / 2;
  }

  .exercise-info-inner {
    width:              100%;
    // margin:             0 auto;
    // padding:            50px 0 25px;
    background-color:   #F3F3F3; 
    z-index:            1;
    border-top:         1px solid #ccc;

    .inner-margin   {
      padding:          40px 0 25px;
    }

  }

}

.fraction-line-thin {
  opacity: 0.5;
}