Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <header>
    <div class="logo"></div>
     <nav class="secondary">
      <a href="">About Us</a>
      <a href="">News &amp; Publications</a>
      <a href="">Careers</a>
      <a href="#" class="search">Search</a>
      
    </nav>
    <nav class="primary">
      <a href="">Our People</a>
      <a href="">Services</a>
      <a href="">Locations</a>
      <a href="">Jurisdication</a>
    </nav>
   
  </header>
  <div class="content">
  We are a top-tier off shore law firm advising in four jurisdictions <span><em>Bermuda</em></span>, the <span>British Virgin Islands</span>, the <span>Cayman Islands</span> and <span>Mauritius</span>. Spanning eight offices worldwide, we provide relevant, sophisticated and solution-driven legal advice.
  </div>
  <section>
    <div class="left">
      <blockquote>Certainly among the leading offshore law firms - we work with leading lawyers in all major offshore jurisdictions and Conyers is certainly in the highest rank.
      </blockquote>
    </div>
    <div class="right">
      <ul class="locations">
        <li>BERMUDA</li>
        <li>BRITISH VIRGIN ISLANDS</li>
        <li>CAYMAN ISLANDS</li>
        <li>MAURITIUS</li>
      </ul>
    </div>
  </section>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----

@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic);

$font-sans: 'Source Sans Pro', sans-serif;
$brand-blue-dark: #002F5F;
$brand-blue-med:#0098DB;
$brand-blue-light: #8FCAE7;
$brand-green-med: #A2AD00;
$brand-silver:#9A9B9C;

body{
  font-family: $font-sans;
}
.container{
  max-width:970px;
  margin:0 auto;
}
.logo{
  position:relative;
  background: url('http://www.conyersdill.com/img/structure/logo-copy.jpg') no-repeat bottom center;
  width:350px;
  height:45px;
  &:before{
    position:absolute;
    left:-40px;
    width:50px;
    height:100px;
    content:" ";
    background: url('http://www.conyersdill.com/img/structure/logo-icon.jpg') no-repeat;
    background-size:69%;
  }
}
nav{
  text-align:right;
}
nav >a{
  text-decoration:none;
  color:black;
}
.secondary{
  text-transform:uppercase;
  padding-bottom:10px;
  margin-left:55%;
  border-bottom:1px solid $brand-silver;
}
.secondary > a{
  font-size:1em;
  color:$brand-silver;
  margin-left:1em;
}
.search{
  font-family: 'zocial', sans-serif;
  text-indent:-9999px;
}
.primary > a{
  color:$brand-blue-dark;
  text-transform:uppercase;
  margin-top:10px;
  display:inline-block;
  font-size:1.1em;
  &:after{
    content:"/";
    padding-left:10px;
    margin-right:5px;
  }
  &:last-child:after{
    content:"";
  }
}
.content{
  color:$brand-silver;
  text-align:left;
  margin-top:40px;
  font-size:4.1em;
  span{
    font-weight:bold;
    color:$brand-blue-light;
  }
}
section{
  background:$brand-silver;
}
.left{
}
.left,.right{
  vertical-align:top;
  width:49%;
  display:inline-block;
}
blockquote{
  color:white;
}
.locations {
  padding:0;
  margin:0;
  width:100%;
  
  > li{
    list-style:none;
    background:shade($brand-silver,10%);
    width:100%;
    display:block;
    padding:1em;
  }
}

SassMeister-output.css

@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic);
body {
  font-family: "Source Sans Pro", sans-serif;
}

.container {
  max-width: 970px;
  margin: 0 auto;
}

.logo {
  position: relative;
  background: url("http://www.conyersdill.com/img/structure/logo-copy.jpg") no-repeat bottom center;
  width: 350px;
  height: 45px;
}
.logo:before {
  position: absolute;
  left: -40px;
  width: 50px;
  height: 100px;
  content: " ";
  background: url("http://www.conyersdill.com/img/structure/logo-icon.jpg") no-repeat;
  background-size: 69%;
}

nav {
  text-align: right;
}

nav > a {
  text-decoration: none;
  color: black;
}

.secondary {
  text-transform: uppercase;
  padding-bottom: 10px;
  margin-left: 55%;
  border-bottom: 1px solid #9a9b9c;
}

.secondary > a {
  font-size: 1em;
  color: #9a9b9c;
  margin-left: 1em;
}

.search {
  font-family: 'zocial', sans-serif;
  text-indent: -9999px;
}

.primary > a {
  color: #002f5f;
  text-transform: uppercase;
  margin-top: 10px;
  display: inline-block;
  font-size: 1.1em;
}
.primary > a:after {
  content: "/";
  padding-left: 10px;
  margin-right: 5px;
}
.primary > a:last-child:after {
  content: "";
}

.content {
  color: #9a9b9c;
  text-align: left;
  margin-top: 40px;
  font-size: 4.1em;
}
.content span {
  font-weight: bold;
  color: #8fcae7;
}

section {
  background: #9a9b9c;
}

.left, .right {
  vertical-align: top;
  width: 49%;
  display: inline-block;
}

blockquote {
  color: white;
}

.locations {
  padding: 0;
  margin: 0;
  width: 100%;
}
.locations > li {
  list-style: none;
  background: #8a8b8c;
  width: 100%;
  display: block;
  padding: 1em;
}

SassMeister-rendered.html

<div class="container">
  <header>
    <div class="logo"></div>
     <nav class="secondary">
      <a href="">About Us</a>
      <a href="">News &amp; Publications</a>
      <a href="">Careers</a>
      <a href="#" class="search">Search</a>
      
    </nav>
    <nav class="primary">
      <a href="">Our People</a>
      <a href="">Services</a>
      <a href="">Locations</a>
      <a href="">Jurisdication</a>
    </nav>
   
  </header>
  <div class="content">
  We are a top-tier off shore law firm advising in four jurisdictions <span><em>Bermuda</em></span>, the <span>British Virgin Islands</span>, the <span>Cayman Islands</span> and <span>Mauritius</span>. Spanning eight offices worldwide, we provide relevant, sophisticated and solution-driven legal advice.
  </div>
  <section>
    <div class="left">
      <blockquote>Certainly among the leading offshore law firms - we work with leading lawyers in all major offshore jurisdictions and Conyers is certainly in the highest rank.
      </blockquote>
    </div>
    <div class="right">
      <ul class="locations">
        <li>BERMUDA</li>
        <li>BRITISH VIRGIN ISLANDS</li>
        <li>CAYMAN ISLANDS</li>
        <li>MAURITIUS</li>
      </ul>
    </div>
  </section>
</div>