_section.scss

section#unit-wrapper {
  section.filters {
    @include clearfix;
    display: none;
    opacity: .4;
    margin-bottom: 10px;
    @include transition;

    &:hover {
      opacity: 1;
    }

    h2 {
      @include inline-block();
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 14px;
      padding: 6px 6px 6px 0;
      font-size: 12px;
      margin: 0;
    }

    ul {
      @include clearfix();
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        @include inline-block;
        margin-right: 6px;
        border-right: 1px solid #ddd;
        padding-right: 6px;

        &.search {
          float: right;
          border: 0;
        }

        a {
          &.more {
            font-size: 12px;
            @include inline-block;
            margin: 0 6px;
            font-style: italic;
          }
        }
      }
    }
  }

  div.content {
    display: table;
    border: 1px solid lighten($dark-blue, 40%);
    width: 100%;
    @include border-radius(3px);
    @include box-shadow(0 0 4px lighten($dark-blue, 50%));

    section {
      header {
        background: #fff;
        padding: 6px;
        border-bottom: 1px solid lighten($dark-blue, 60%);
        @include clearfix;

        h2 {
          color: $bright-blue;
          // float: left;
          font-size: 14px;
          letter-spacing: 1px;
          // line-height: 20px;
          text-transform: uppercase;
          margin: 0;
        }
      }

      &.modules {
        @include box-sizing(border-box);
        display: table-cell;
        width: flex-grid(6, 9);
        border-right: 1px solid lighten($dark-blue, 40%);

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

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

        ol {
          list-style: none;
          margin: 0;
          padding: 0;

          li {
            border-bottom: 1px solid lighten($dark-blue, 60%);

            a {
              color: #000;
            }

            ol {
              list-style: none;
              margin: 0;
              padding: 0;

              li {
                padding: 6px;
                position: relative;

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

                &:hover {
                  background-color: lighten($yellow, 10%);

                  a.draggable {
                    opacity: 1;
                  }
                }

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

                &.group {
                  padding: 0;

                  header {
                    padding: 6px;
                    background: none;

                    h3 {
                      font-size: 14px;
                      margin: 0;
                    }
                  }

                  ol {
                    border-left: 4px solid #999;
                    border-bottom: 0;
                    margin: 0;
                    padding: 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;
          margin: 0;
          padding: 0;

          li {
            background: $light-blue;

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

            &.new-module a {
              background-color: darken($light-blue, 2%);
              border-bottom: 1px solid darken($light-blue, 8%);

              &:hover {
                background-color: lighten($yellow, 10%);
              }
            }

            a {
              color: $dark-blue;
            }

            ul {
              list-style: none;
              margin: 0;
              padding: 0;

              li {
                padding: 6px;
                border-collapse: collapse;
                border-bottom: 1px solid darken($light-blue, 8%);
                position: relative;

                &:last-child {
                  border-bottom: 1px solid darken($light-blue, 8%);
                }

                &:hover {
                  background-color: lighten($yellow, 10%);

                  a.draggable {
                    opacity: 1;
                  }
                }


                &.empty {
                  padding: 12px;

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

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