Google Custom Search Style - User Agent Styles | CSS: Presentation Layer

Standards Based Development

Markup

<div class="fullbox">
<div id="searchbox" role="search" title="Search the Site">
<style type="text/css">
@import url(http://www.google.com/cse/api/branding.css);
</style>
<div class="cse-branding-right" style="background-color: #FFFFFF;color:#000000">
  <div class="cse-branding-form">
    <form action="http://maccessibility.net/search/" id="cse-search-box">
      <div>
        <input type="hidden" name="cx" value="partner-pub-7351698632254235:9pc7ni-3xwa" />
        <input type="hidden" name="cof" value="FORID:11" />
        <input type="hidden" name="ie" value="ISO-8859-1" />
        <input type="text" name="q" size="31" title="Search Mac-cessibility sites:" />
        <input type="submit" name="sa" value="Search" />
      </div>
    </form>
  </div>
  <div class="cse-branding-logo">
    <img src="http://dev.bowdenweb.com/ua/browsers/chrome/i/powered-by-google-fff.gif" alt="Google" />
  </div>
  <div class="cse-branding-text">
    Search Mac-cessibility Sites
  </div>
</div>
</div> <!-- end searchbox -->
</div> <!-- end fullbox -->

Style

.fullbox{width:450px; margin:10px auto; outline:1px solid #c0c0c0}
/** http://www.google.com/cse/api/branding.css **/
.cse-branding-bottom,
.cse-branding-right {
margin:0;
padding:0
}
.cse-branding-bottom,
.cse-branding-right {
zoom: 1;
}
.cse-branding-bottom:after,
.cse-branding-right:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
}
.cse-branding-text { 
font: 10px Arial;
}
.cse-branding-form form {
margin-bottom: 0;
padding-bottom: 0;
}
/* Bottom-specific selectors */
.cse-branding-bottom .cse-branding-logo, 
.cse-branding-bottom .cse-branding-text {
display: block; 
float: left
}
.cse-branding-bottom .cse-branding-form {
margin-bottom: 3px;
}
.cse-branding-bottom .cse-branding-logo {
padding: 0
}
.cse-branding-bottom .cse-branding-text {
padding-top: 4px
}
.cse-branding-right .cse-branding-form {
float: left;
}
/* Right-specific selectors */
.cse-branding-right .cse-branding-logo, 
.cse-branding-right .cse-branding-text {
margin-left: 4px;
}
.cse-branding-right .cse-branding-form {
float: left;
margin-right: 4px;
}
.cse-branding-right .cse-branding-logo {
padding: 0
}
.cse-branding-right .cse-branding-text {
margin-top: -4px
}