/* THIS IS THE CORE-LEVEL STYLING OF THE AJAXY LIVE-SEARCH FORM */

#page .sf_container,
#page .sf_container form,
#page .sf_search,
#page .sf_block,
#page .sf_input,
#page .sf_button{ 
    height: auto !important;
    width: 100% !important;
    }

#page .sf_container{}
#page .sf_container form{}
#page .sf_search{}

#page .sf_block{
    padding: 0px;
    }

#page .sf_input{
    background: url("../images/search.png") no-repeat  98% 7px !important;
    padding: 5px !important; 
    margin: 0px !important;
    }

#page .sf_container .sf_button{display: none !important;}

.sf_sb_cont #sf_results {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 0px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2) !important;
    font-family: inherit !important;    
    text-align: left !important;
    width: 100% !important;
    z-index: 9999 !important;
    }
#sf_results li {
    font-size: 1.3rem !important;
    line-height: 120% !important;
    font-weight: 100 !important;
    padding: 4px 5px !important;
    }
#sf_results li.sf_header { 
    font-size: 1.3rem !important;
    font-weight: 100 !important;
    padding: 4px 10px !important;
    text-transform: uppercase;
    }
.sf_sb_cont #sf_val ul li.sf_header {
    background: none repeat scroll 0 0 #EEEEEE;
    border-top: 0px solid #DDDDDD;
    }
#sf_val li.sf_item img {
    margin-right: 10px !important;
    position: static !important;
    float: left !important;
    }
#sf_sb{margin-top: 10px;}


/* Tophat Mods */

#page #section-tophat .sf_container{
    float: right;
    width: auto !important;
    }

#page #section-tophat .sf_input{
    float: right;
    width: 40px !important;
    background: url("../images/search.png") no-repeat 10px 7px !important;
    text-indent: -999px !important;
    transition: width 0.5s ease-out 0s;
    }

#page #section-tophat .sf_input:focus{
    width: 200px !important;
    text-indent: 25px !important;
    }