Top Bar

by Charles Butler

HTML

<div class="header-top-social">
</div>
<div class="header-menu-top-wrapper">
  <div class="header-menu-top">
    <div class="logo-top">
      <a href="#"><img src="http://i.imgur.com/bGSBwna.png" title="Capital Off-Track Betting"></a>
    </div>
    <div class="menu-top">
      <a href="https://www.capitalotbbet.com/account/register?promo_code=corporate&utm_source=corporate&utm_campaign=new_account&utm_medium=link" target="_blank">SIGNUP</a>
      <a href="http://www.capitalotbbet.com/?utm_source=corporate&utm_campaign=wager_now&utm_medium=link" target="_blank">BET NOW</a>
      <a class="highlight" href="http://www.capitalotb.com/otb-tv-video-player/">WATCH LIVE</a>
    </div>
    <div class="clearfix"></div>
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

img.logo-top {
width: 220px;
height: 50px;
}
.clearfix {
  clear: both;
}
* {
    box-sizing: border-box;
}
.header-top-social {
    background-color: #f5f5f5;
    border-bottom: 1px solid #e1e8ed;
    height: 28px;
    width: 100%;
}


.header-menu-top-wrapper {
  margin: 0 auto;
  width: 100%;
  background: #FFF;
  margin: 0 auto;
  box-shadow: 0 2px 2px -2px gray;
}

.header-menu-top {
  width: 100%;
  max-width: 1044px;
  background: #FFF;
  margin: 0 auto;
  padding: 14px 6px;
}

.header-menu-top .logo-top {
  float: left;
  display: inline-block;
  padding: 0px 6px;
}

.header-menu-top .menu-top {
  float: right;
  display: inline-block;
  margin-right: 8px;
  padding: 0 6px 0 0;
  background: #efefef;
}

.header-menu-top .menu-top a {
  font-size: .8rem;
  color: #222;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  text-decoration: none;
  display: inline-block;
  border: none;
 ...