title: Implementing typeahead.js CSS issue
body: <p>Im having a problem using the typeahead.js, a new plugin from twitter you can view an example of how this plugin is supposed to look: <a href="http://twitter.github.com/typeahead.js/examples/" rel="nofollow">http://twitter.github.com/typeahead.js/examples/</a></p>
  
  <p>You can see my implementation here: <a href="http://mypcisbroke.co.uk/problem/" rel="nofollow">http://mypcisbroke.co.uk/problem/</a></p>
  
  <p>My issues</p>
  
  <ul>
  <li>The textbox should change to white on focus (this worked prior to installation of plugin)</li>
  <li>Suggestions which autocomplete in textbox should be in a lighter colour</li>
  </ul>
  
  <p>Here is my site css</p>
  
  <pre><code>.navbar .top-search form { margin: 0 10px 0 0; padding-top: 5px; position: relative; }
  .navbar .top-search input, .navbar .top-search button { -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; }
  .navbar .top-search input { padding: 2px 24px 2px 10px; border: none; margin: 0; width: 150px; background: #999; -webkit-border-radius: 20px; moz-border-radius: 20px; -ms-border-radius: 20px; border-radius: 20px; }
  .navbar .top-search input:focus { background: #f5f5f5; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; box-shadow: none; }
  .navbar .top-search button { opacity: .6; position: absolute; right: 7px; top: 9px; padding: 0; margin: 0; line-height: 12px; background: none; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; box-shadow: none; }
  .navbar .top-search input:focus + button { opacity: 1 }
  </code></pre>
  
  <p>This is the styling of typeahead</p>
  
  <pre><code>.typeahead,
  .tt-query,
  .tt-hint {
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    -webkit-border-radius: 8px;
       -moz-border-radius: 8px;
            border-radius: 8px;
    outline: none;
  }
  
  .typeahead:focus {
    border: 2px solid #0097cf;
  }
  
  .tt-query {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  }
  
  .tt-hint {
    color: #999
  }
  </code></pre>
  
  <p>Any help on this would be really appreciated. </p>
  
  <p>Thanks</p>