#gdgt-product-selector {

  // the main body of the postbox
  .inside {
    margin: 10px 0;
  }

  // displayed, deleted list titles
  h4 {
    font-size: 1.2em;
    font-weight: bold;
    padding: 0;
    margin: 15px 0 8px;
  }

  // container for displayed and deleted product lists
  #gdgt-product-selector-results {

    ol, ul {
      margin: 0 0 10px 10px;
      max-width: 500px;

      li {
        list-style: none;
        font-size: 1.1em;
        margin-bottom: 10px;
      }
    }

    // delete and undelete buttons
    .gdgt-delete-product, .gdgt-undelete-product {
      float: right;
      margin-top: -4px;
      text-align: center;

      &:focus {
        color: #464646;
      }
    }

    .gdgt-product-name {
      display: inline-block;
      max-width: 60%;
    }

    .gdgt-drag-handle {
      cursor: move;
    }

    .gdgt-drag-handle-icon {
      background-color: transparent;
      background-image: url( 'images/drag.png' );
      background-repeat: no-repeat;
      background-position-x: center;
      background-position-y: center;
      display: inline-block;
      float: right;
      font-weight: bold;
      height: 16px;
      margin-top: -2px;
      margin-bottom: 0;
      margin-left: 8px;
      margin-right: 8px;
      overflow: hidden;
      text-indent: -99999px;
      vertical-align: middle;
      width: 16px;
    }

    .gdgt-product-instances {
      margin: 4px 0 0;
      font-size: 0.8em;
      color: #888;

      li {
        display: inline;

        &:before {
          content: ", ";
        }

        &:first-child:before {
          content: none;
        }
      }
    }
  }

  #gdgt-product-selector-typeahead {
    font-size: 1em;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #ccc;

    label {
      display: block;
      padding: 12px 0 6px;
    }

    #gdgt-typeahead {
      padding: 7px 7px 6px;
      width: 90%;
      max-width: 400px;
    }

    // menu generated by jQuery UI autocomplete
    .ui-autocomplete {
      width: 90%;
      max-width: 415px;
      max-height: 300px;
      background: #fff;
      border-width: 1px;
      border-style: solid;
      border-color: #ccc;
      font-size: 13px;
      overflow-y: auto;

      .ui-menu-item a {
        color: #000;
        cursor: pointer;
        text-decoration: none;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        padding: .2em .5em;
        line-height: 1.5;
        zoom: 1;
      }

      .gdgt-product-instance {
        text-indent: 15px;
      }

      .ui-state-hover {
        background-color: #eee;
      }
    }

    .gdgt-error-invalid-key, .gdgt-no-results {
    	font-style: italic;
    }

	// highlighted search term
    .searchterm {
      font-weight: bold;
    }
  }

  #gdgt-refresh-container {
    float: right;
    vertical-align: center;
  }
}