_week.scss

section.week-edit,
section.week-new,
section.sequence-edit {

  > header {
    border-bottom: 2px solid #333;
    @include clearfix();

    div {
      @include clearfix();
      padding: 6px 20px;

      h1 {
        font-size: 18px;
        text-transform: uppercase;
        letter-spacing: 1px;
        float: left;
      }

      p {
        float: right;
      }

      &.week {
        background: #eee;
        font-size: 12px;
        border-bottom: 1px solid #ccc;

        h2 {
          font-size: 12px;
          @include inline-block();
          margin-right: 20px;
        }

        ul {
          list-style: none;
          @include inline-block();

          li {
            @include inline-block();
            margin-right: 10px;

            p {
              float: none;
            }
          }
        }
      }
    }

    section.goals {
      background: #eee;
      padding: 6px 20px;
      border-top: 1px solid #ccc;

      ul {
        list-style: none;
        color: #999;

        li {
          margin-bottom: 6px;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }

  > section.content {
    @include box-sizing(border-box);
    padding: 20px;

    section.filters {
      @include clearfix;
      margin-bottom: 10px;
      background: #efefef;
      border: 1px solid #ddd;

      ul {
        @include clearfix();
        list-style: none;
        padding: 6px;

        li {
          @include inline-block();

          &.advanced {
            float: right;
          }
        }
      }
    }

    > div {
      display: table;
      border: 1px solid;
      width: 100%;

      section {
        header {
          background: #eee;
          padding: 6px;
          border-bottom: 1px solid #ccc;
          @include clearfix;

          h2 {
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 12px;
            float: left;
          }
        }

        &.modules {
          @include box-sizing(border-box);
          display: table-cell;
          width: flex-grid(6, 9);
          border-right: 1px solid #333;

          &.empty {
            text-align: center;
            vertical-align: middle;

            a {
              @extend .button;
              @include inline-block();
              margin-top: 10px;
            }
          }

          ol {
            list-style: none;
            border-bottom: 1px solid #333;

            li {
              border-bottom: 1px solid #333;

              &:last-child{
                border-bottom: 0;
              }

              a {
                color: #000;
              }

              ol {
                list-style: none;

                li {
                  padding: 6px;

                  &:hover {
                    a.draggable {
                      opacity: 1;
                    }
                  }

                  a.draggable {
                    float: right;
                    opacity: .5;
                  }

                  &.group {
                    padding: 0;

                    header {
                      padding: 6px;
                      background: none;

                      h3 {
                        font-size: 14px;
                      }
                    }


                    ol {
                    border-left: 4px solid #999;
                    border-bottom: 0;

                      li {
                        &:last-child {
                          border-bottom: 0;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }

        &.scratch-pad {
          @include box-sizing(border-box);
          display: table-cell;
          width: flex-grid(3, 9) + flex-gutter(9);
          vertical-align: top;

          ol {
            list-style: none;
            border-bottom: 1px solid #999;

            li {
              border-bottom: 1px solid #999;
              background: #f9f9f9;

              &:last-child {
                border-bottom: 0;
              }

              ul {
                list-style: none;

                li {
                  padding: 6px;

                  &:last-child {
                    border-bottom: 0;
                  }

                  &:hover {
                    a.draggable {
                      opacity: 1;
                    }
                  }

                  &.empty {
                    padding: 12px;

                    a {
                      @extend .button;
                      display: block;
                      text-align: center;
                    }
                  }

                  a.draggable {
                    float: right;
                    opacity: .3;
                  }

                  a {
                    color: #000;
                  }
                }
              }

            }
          }
        }
      }
    }
  }
}