/** Minimalized Search Bar
 *  Developed by the Wikidot Community
 *  
 *  Minimizes the search bar when not active.  Focusing on the search bar
 *  reveals the search form.
 *  ***************************************************************************/
#search-top-box{
    position: relative;
    width: 200px;
    height: 28px;
}
#search-top-box input.btn{  display: none; }
#search-top-box input.text{
    position: absolute;
    right: 0;
    height: 28px; width: 28px;
    border: 1px solid #E3E3E3;
    border-radius: 14px;
    background: rgba(255,255,255,0);
    box-shadow: none;
    padding: 2px 0;
    color: rgba(51,51,51,0);
    transition: width 500ms,
                color 500ms,
                background 500ms;
    cursor: pointer;
}
#search-top-box-input{  margin: 0; }
#search-top-box form{
    width: 24px;
    height: 28px;
}
#search-top-box form:hover input.text{
    background: rgba(0,0,0,.188);
    border-color: #D7D7D7;
}
#search-top-box form:hover input.text:focus{
    background: rgba(255,255,255,1);
}
#search-top-box form:focus{  width: 200px; }
#search-top-box input.text:focus{
    width: 200px;
    padding: 2px 1em 2px 1em;
    color: rgba(51,51,51,1);
    box-shadow: 1px 1px 2px -1px rgba(0,0,0,0.15) inset;
    border-color: #D7D7D7;
    background: rgba(255,255,255,1);
    cursor: text;
}
#search-top-box input.text.empty{  font-size: 0; }
#search-top-box form:before{
    position: absolute;
    right: 0; top: 0;
    font-family: 'FontAwesome';
    font-size: 13px;
    content: '';
    width: 28px; height: 28px;
    padding: 0;
    color: #333;
    text-align: center;
    background: #FFF;
    border-radius: 14px;
    box-shadow: 0 0 2px rgba(0, 0, 0, .2) inset;
    line-height: 28px;
}