//wysiwyg editor
div.wysiwyg {

  border: 1px solid #ccc;
  padding: 5px;
  background-color: #fff;
  * {
    margin: 0;
    padding: 0;
  }

  ul.panel {
    border-bottom: 1px solid #ccc;
    float: left;
    width: 100%;
    padding: 0;
    li {
      list-style: none;
      float: left;
      margin: 1px 2px 3px 0;
      background: #fff;
      -moz-user-select: none;
      -webkit-user-select: none;
      user-select: none;
    }
    li.separator {
      width: 1px;
      height: 16px;
      margin: 0 4px;
      border-left: 1px solid #ccc;
    }
    li {
      text-indent: -5000px;
      opacity: 0.85;
      filter: alpha(opacity=85);
      display: block;
      width: 16px;
      height: 16px;
      background: url('/tao/views/js/lib/jwysiwyg/jquery.wysiwyg.gif') no-repeat -64px -80px;
      border: 0;
      cursor: pointer;
      margin: 1px;
      &.wysiwyg-button-hover, &.active {
        opacity: 1.00;
        filter: alpha(opacity=100);
      }
      &.active {
        background-color: #f9f9f9;
        border: 1px solid #ccc;
        border-left-color: #aaa;
        border-top-color: #aaa;
        margin: 0;
      }

      &.bold {
        background-position: 0 -16px;
      }
      &.italic {
        background-position: -16px -16px;
      }
      &.strikeThrough {
        background-position: -32px -16px;
      }
      &.underline {
        background-position: -48px -16px;
      }

      &.justifyLeft {
        background-position: 0 0;
      }
      &.justifyCenter {
        background-position: -16px 0;
      }
      &.justifyRight {
        background-position: -32px 0;
      }
      &.justifyFull {
        background-position: -48px 0;
      }

      &.indent {
        background-position: -64px 0;
      }
      &.outdent {
        background-position: -80px 0;
      }

      &.subscript {
        background-position: -64px -16px;
      }
      &.superscript {
        background-position: -80px -16px;
      }

      &.undo {
        background-position: 0 -64px;
      }
      &.redo {
        background-position: -16px -64px;
      }

      &.insertOrderedlist {
        background-position: -32px -48px;
      }
      &.insertUnorderedlist {
        background-position: -16px -48px;
      }
      &.insertHorizontalRule {
        background-position: 0 -48px;
      }

      &.h1 {
        background-position: 0 -32px;
      }
      &.h2 {
        background-position: -16px -32px;
      }
      &.h3 {
        background-position: -32px -32px;
      }
      &.h4 {
        background-position: -48px -32px;
      }
      &.h5 {
        background-position: -64px -32px;
      }
      &.h6 {
        background-position: -80px -32px;
      }

      &.cut {
        background-position: -32px -64px;
      }
      &.copy {
        background-position: -48px -64px;
      }
      &.paste {
        background-position: -64px -64px;
      }
      &.insertTable {
        background-position: -64px -48px;
      }

      &.increaseFontSize {
        background-position: -16px -80px;
      }
      &.decreaseFontSize {
        background-position: -32px -80px;
      }

      &.createlink {
        background-position: -80px -48px;
      }
      &.insertImage {
        background-position: -80px -80px;
      }

      &.html {
        background-position: -47px -46px;
      }
      &.removeFormat {
        background-position: -80px -63px;
      }

      &.empty {
        background-position: -64px -80px;
      }
    }
  }

  iframe {
    border: 0;
    clear: left;
    margin: 4px 0 0 1px;
  }

}