$module_path: '/assets/common/module-initiative-searcher';
/////////////////////////////////////////////////////////////////////////////////////////

.module-initiative-searcher { position:relative; width:100%; padding:20px 23px 15px; overflow:hidden;
  &.supreme { @include ff-box(); }
  .header { padding:0 0 5px;  max-width:900px;
    h2 { color:#505a62; text-shadow:#ffffff 1px 1px 0; margin-top:0; padding-bottom:5px; }
    .form-row { position:relative; margin:0; padding:0; z-index:5;
      .gigantic-input { width:auto;
        input { width:100%; font-size:15px; height:30px; padding-left:5px; }
        label.inputhint { font-size:15px; color:#666666; line-height: 27px; padding-top:2px; padding-left:8px; cursor: text; font-weight:normal; }
        .icon { position:absolute; width:14px; height:18px; top:6px; right:0px; padding-left:6px; border-left: 1px solid #CCCCCC; background:url(#{$module_path}/icon-search.png) 6px center no-repeat; }
      }
    }
  }
  .searching { padding: 20px 0; font-weight: normal; color: #afb7c8;
    .spinner { width:20px; height:20px; background:url(#{$module_path}/spinner.gif) 0 0 no-repeat; float:left; margin-right:10px; }
  }
  .results-empty { padding:0 0 25px; max-width:900px; position:relative; clear:both;
    .module-error { padding-top:3px; top:-8px; position: absolute; width:100%; }
    .module-featuretip { position:absolute; width:400px; top:-10px; left:25px; .arrow { left:100px; } }
    button.primary { padding:5px 20px; }
  }
  .results-found { padding:0 0 25px; max-width:900px;
    .module-error { clear:both; }
    .search-results { overflow:hidden; position:relative; background:#e3eef8; @include border-radius(5px); margin-top:-34px; padding-top:40px; padding-bottom:7px; margin-bottom:20px;
      .prev-page, .next-page { position:absolute; top:44px; cursor:pointer; display:block; width:25px; height:67px; margin-top:10px; background:url(#{$module_path}/sprite-arrows.png) 0 0 no-repeat; }
      .prev-page { left:0;
        &:hover { background-position:0 -71px; }
        &.disabled { background-position:0 -142px; cursor:default; }
      }
      .next-page { right:0; background-position: -25px 0;
        &:hover { background-position:-25px -71px; }
        &.disabled { background-position:-25px -142px; cursor:default; }
      }
      ul.video-list { @include reset-ul(); overflow:hidden; margin:0 20px;
        li { float:left; width:20%; min-width: 150px; color:#666666; position:relative; height:110px;
          .result { cursor:pointer; position:absolute; position:absolute; height:87px; width:148px; top:0; left:50%; margin-left:-74px; @include opacity(0.3);
            &.selected, &:hover {
              @include opacity(1);
            }
            .module-video-thumbnail { border:5px solid #b4c9da; }
            .title { width:138px; overflow:hidden; white-space:nowrap; text-overflow: ellipsis; font-size:$font-size-small; text-align:center; }
          }
        }
      }
    }
    .selected-result { float:left; width:100%; }
    .meta { position:relative; height:274px; margin-left: 500px;
      > .title,.desc,.added { margin-bottom:5px; }
      > .title { font-weight:bold; font-size:$font-size-large + 2; }
      .desc, .added { color:#505a62; font-size:$font-size-small; line-height:$line-height; margin-bottom:15px; }
      .desc { max-height:170px; overflow:hidden; }
      .buttons-row { position:absolute; bottom:0; left:0; display:inline-block;
        button.primary { padding:5px 20px; float:left; }
        .module-featuretip { position:absolute; bottom:-20px; right:-284px; .arrow { top:60%; } }
        .module-error { float:left; white-space:nowrap; margin-left:5px; }
      }
    }
    .video { float:left; margin-right:20px; min-height:274px; background:#000000; }
    .page { float:left; margin-right:20px; min-height:274px; width:480px; background:#666666; @include box-shadow(1px 1px 3px #999999); margin:1px; }
  }
}