section#unit-wrapper {
  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.content {
    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;
                }
              }
            }

          }
        }
      }
    }
  }
}