.grid-container {
  display: none;
  
  > * {
    float: left;
    height: 20px;
  }
  
  .grid {
    background: #FFD3DC;
    margin-right: flex-gutter();
    width: flex-grid(1);
    
    &:last-child {
      margin-right: 0px;
    };
  }

  .gutter {
    background: #E3FFDA;
    display:none;
    width: $fg-gutter();
  }
}

.container {
  
}

.course-info {
  h1, h2, h3, h4, h5, h6 {
    font-family: $sans-serif;
    font-weight: bold;
  }
  
  font-size: 16px;
  
  > * {
    @include box-sizing(border-box);
    margin-top: 20px;
  }
  
  a {
    font-family: $serif;
    font-size: 16px;
  }
  
  section {
  }
  
  h2 {
    font-size: 2em;
  }
  
  h3 {
    font-size: 1.4em;
  }
  
  p {
//    color: rgb(102,102,102);
  }
  
  header {
    background: rgb(240,240,240);
    border: 1px solid rgb(200,200,200);
    @include border-radius(4px);
    @include box-shadow(inset 0 0 1px 1px rgb(255,255,255));
    padding: 20px;
    padding-left: flex-grid(1) + flex-gutter() * 2;
    padding-right: flex-grid(4) + flex-gutter();
    position: relative;
    width: flex-grid(12);
    
    > img {
      float: left;
      max-height: 86px;
      max-width: flex-grid(1) + flex-gutter();
      @include position(absolute, 10px 0 0 10px);
      vertical-align: middle;
    }
    
    h2 {
      margin-bottom: .5em;
      
      .course-number {
        color: $lighter-base-font-color;
      }
    }
    
    h3 {
    }
    
    .course-abstract {
      display: none;
    }
    
    .button {
      @include button(simple, $blue);
      @include box-sizing(border-box);
      @include border-bottom-left-radius(0px);
      @include border-top-left-radius(0px);
      display: block;
      font-size: 1.6em;
      left: flex-grid(8) + flex-gutter();
      padding-top: 1.5em;
      @include position(absolute, -1px -1px -1px 0);
      text-align: center;
      vertical-align: middle;
    }
  } // header
  
  .sidebar {
    background: white;
    float: right;
    margin: 93px 0 0 flex-gutter();
    padding: 0 0 20px flex-gutter();
    padding-bottom: 20px;
    position: relative;
    width: flex-grid(4);
    
    .faded-vertical-divider {
      @include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(200,200,200, 0.6) 10%, rgb(200,200,200) 50%, rgba(200,200,200, 0.6) 90%, rgba(255,255,255, 0)));
      @include position(absolute, 0px 0 0px 0px);
    }
    
    h3 {
      color: #999;
      font-size: 1em;
      margin-bottom: .5em;
    }
    
    .course-staff {
      clear: none;
      position: relative;
      
      .teacher {
        margin-bottom: 1em;
        
        .teacher-image {
          // display: none;
          float: left;
          margin: 0 10px 5px 0;
      
          img {
          }
        }
        
        .teacher-name {
          color: rgb(100,100,100);
          font-size: 1.5em;
          font-weight: bold;
          line-height: 1.3em;
        }
      }
    } // .course-staff
  }
  
  .main-content-wrap {
    float: right;
    margin-top: 40px;
    padding-bottom: 20px;
    width: flex-grid(8);
    
    .video {
      iframe {
        border: 10px solid rgb(106,106,106);
        @include border-radius(10px);
        display: block;
        margin: 0 auto 20px;
      }
    }
    
    .course-description {
      @include box-sizing(border-box);
      margin-bottom: 40px;
      position: relative;
      
      h3 {
        font-size: 2em;
        font-weight: bold;
        margin-bottom: 1em;
      }
      
      .course-times {
        background: #F0F0F0;
        @include border-radius(4px);
        color: #7A7A7A;
        font-size: .8em;
        padding: .3em 1em;
        @include position(absolute, 0px 0px 0 0);
        text-shadow: -1px -1px 0px #e9e9e9;
      
        .start, .length, .final {
          float: left;
          margin-right: 1em;
          
          strong {
            display: block;
          }
        }
      
        .start {
          
        }
      
        .length {
        
        }
      
        .final {
          margin: 0;
        }
      } // .course-times
    }
    
    ul.tabs {
      list-style-type: none;
      font-size: 0;
      padding: 0;
      margin-top: 40px;
      
      li {
        background: #eee;
        @include border-radius(2px);
        display: inline-block;
        color: #444;
        font-size: 16px;
        font-weight: bold;
        margin-right: 10px;
        padding: .3em 1em;
      
        &.enabled {
          color: #fff;
          @include linear-gradient($blue, darken($blue, 5%));
        }
      
        &:hover {
          cursor: pointer;
          background: #ddd;
        
          &.enabled {
            @include linear-gradient(darken($blue, 5%), darken($blue, 10%));
            color: #fff;
          }
        }
      }
    }
  
    .tabs-content {
      
      section.tab {
        display: none;
        margin-top: 0;
        padding-top: 30px;
        
        h3 {
          margin-bottom: .5em;
          font-size: 1.5em;
          font-weight: bold;
        }
      }
    
      section {
        margin-top: 30px;
        color: #666;
      }
    }
  
    .syllabus {
    
      ul {
        list-style: none outside;
        line-height: 1.5em;
      
        li {
        }
      }
    } //.syllabus
  
    .faq {
      ul {
        list-style: none outside;
      
        li {
          margin-bottom: 1em;
        
          p {
            margin-left: 2em;
          }
        }
      }
    } // .faq
  
    .more-info {
    
      p {
        margin-left: 2em;
      }
    }
  } //.main-info-wrap
}