Google Currents: Social Header Template

GoogleCurrentsSocialHeader

<style type="text/css">
html,body,.tHeader {
  margin:0; padding:0; vertical-align:baseline;
  border:0; outline:0; font-size:100%;
  background-color:transparent; background-repeat:no-repeat;
}

.tHeader {
  font-family: 'Currents-Regular-Sans';
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  width: 100%;
  height: 50px;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8);
  background: #333; /* Old browsers */
  background: -moz-linear-gradient(top, #333 0%, #333 85%, #444 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333), color-stop(85%, #333), color-stop(100%, #444) );
  background: -webkit-linear-gradient(top, #333 0%, #333 85%, #444 100%);
}

.tTitle {
  -webkit-box-flex: 1;
  padding-left: 20px;
  line-height: 50px;
  color: #626262;
  font-size: 18px;
  text-overflow: ellipsis;        
  overflow: hidden;        
}

.tTitle a {
  color: #e9e9e9;
  text-decoration: none;
  font-weight: bold;
}

.tName {
  padding-right: 20px;
  text-overflow: ellipsis;        
  overflow: hidden;        
  display: block;
  height: 50px;
  line-height: 50px;
  padding: 0px 34px;
  margin: 0px;
  text-decoration: none;
  color: #e9e9e9;
  font-weight: bold;
}

</style>
<div style="height: 10px; width:100%; display: -webkit-box;-webkit-box-orient: horizontal;">
  <div style="background-color:rgb(213, 15, 37); -webkit-box-flex: 1;"></div>
  <div style="background-color:rgb(51, 105, 232); -webkit-box-flex: 1;"></div>
  <div style="background-color:rgb(0, 153, 57); -webkit-box-flex: 1;"></div>
  <div style="background-color:rgb(238, 178, 17); -webkit-box-flex: 1;"></div>
</div>
<div class="tHeader">
    <div class="tTitle">
      <g:link toc="true">
        <g:text textid='editionName'>
      </g:link>
    </div>
    <div class="tName">
      <g:text textid='sectionName'>
    </div>
</div>