$module_path: '/assets/common/module-search-to-add-initiative';
/////////////////////////////////////////////////////////////////////////////////////////

.module-search-to-add-initiative { position:relative; float:left; width:100%; padding-bottom:15px; padding-top:20px;
  &.supreme { @include ff-box(); }
  &.spinner {
    .header, .results-empty, .results-found { visibility:hidden; }
    .spinner { display:block; }
  }
  .spinner { @extend h2; height:100px; position:absolute; left:0; margin-top:100px; width:100%; color:#b9cddc; text-shadow:#ffffff 1px 1px 0; display:none; text-align:center;
    .img { width:64px; height:64px; background:url(#{$module_path}/spinner.gif) 0 0 no-repeat; margin:0 auto 20px; }
  }
  .header { padding:0 0 15px;  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; margin-right:6px; z-index:5;
      .gigantic-input { width:auto;
        input { width:100%; font-size:15px; }
        label.inputhint { font-size:15px; color:#666666; line-height: 27px; padding-top:2px; padding-left:8px; }
        .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; }
      }
    }
  }
  .results-empty { padding:0 0 25px; max-width:900px; position:relative; clear:both;
    .module-error { margin-right:43px; padding-top:3px; top:-18px; }
    .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;
    .search-results { overflow:hidden; position:relative; background:#e3eef8; @include border-radius(5px); margin-top:-44px; 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-video { 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; }
  }
}