<ul class="sg-colors">
  <li>
    <div class="sg-swatch" style="background: #027EA4;"></div>
    <div class="sg-label">#027ea4</div>
    <div class="sg-label">rgb(2, 126, 164)</div>
    <div class="sg-label">$ben-franklin-blue</div>
  </li>
  <li>
    <div class="sg-swatch" style="background: #F2BA13;"></div>
    <div class="sg-label">#f2ba13</div>
    <div class="sg-label">rgb(242, 186, 19)</div>
    <div class="sg-label">$bell-yellow</div>
  </li>
  <li>
    <div class="sg-swatch" style="background: #ffffff;"></div>
    <div class="sg-label">#ffffff</div>
    <div class="sg-label">rgb(255, 255, 255)</div>
    <div class="sg-label">$white</div>
  </li>
  <li>
    <div class="sg-swatch" style="background: #f7f7f7;"></div>
    <div class="sg-label">#f7f7f7</div>
    <div class="sg-label">rgb(247, 247, 247)</div>
    <div class="sg-label">$ghost-gray</div>
  </li>
  <li>
    <div class="sg-swatch" style="background: #edf4f7;"></div>
    <div class="sg-label">#edf4f7</div>
    <div class="sg-label">rgb(237, 244, 247)</div>
    <div class="sg-label">$whitesmoke</div>
  </li>
  <li>
    <div class="sg-swatch" style="background: #dbe1e3;"></div>
    <div class="sg-label">#dbe1e3</div>
    <div class="sg-label">rgb(219, 225, 227)</div>
    <div class="sg-label">$geyser</div>
  </li>
  <li>
    <div class="sg-swatch" style="background: #9299A5;"></div>
    <div class="sg-label">#9299A5</div>
    <div class="sg-label">rgb(146, 153, 165)</div>
    <div class="sg-label">$manatee</div>
  </li>
  <li>
    <div class="sg-swatch" style="background: #666;"></div>
    <div class="sg-label">#666666</div>
    <div class="sg-label">rgb(102, 102, 102)</div>
    <div class="sg-label">$sidewalk</div>
  </li>
  <li>
    <div class="sg-swatch" style="background: #353535;"></div>
    <div class="sg-label">#353535</div>
    <div class="sg-label">rgb(53, 53, 53)</div>
    <div class="sg-label">$mine-shaft</div>
  </li>
  <li>
    <div class="sg-swatch" style="background: #000000;"></div>
    <div class="sg-label">#000000</div>
    <div class="sg-label">rgb(0, 0, 0)</div>
    <div class="sg-label">$black</div>
  </li>
</ul>

<p>Primary font: "Open Sans", "Arial", sans-serif;</p>
<p><em>Primary font italic: "Open Sans", "Arial", sans-serif;</em></p>
<p><strong>Primary font bold: "Open Sans", "Arial", sans-serif;</strong></p>
<h1> Secondary font: 'Montserrat', 'Tahoma', sans-serif;</h1>

<span class="accessible"> Opens in new window</span>

<div class="vcard">
  <div class="email"><span class="vcard-label">Email: </span><a href="mailto:email@email.com">email@email.com</a></div>
  <div class="org">Department Name</div>
  <div class="adr">
    <span class="vcard-label">Address: </span>
    <div class="street-address">1234 Main Street</div>
    <span class="locality">Philadelphia</span>,
    <span class="postal-code">19107</span>,
    <abbr class="region" title="Pennsylvania">PA</abbr>
  </div>
  <div class="tel"><span class="type vcard-label">Phone: </span><a href="tel:+18881234567">888-123-4567</a></div>
  <div class="fax"><span class="type vcard-label">Fax: </span>215-234-1234</span></div>
</div>

<blockquote>
  <p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.</p>
</blockquote>

<div class="callout">
<p>You may need the following information before you pay online: Federal Entity Identification Number (EIN) or your Social Security Number (SSN) or Philadelphia Tax Account number and Philadelphia Department of Revenue PIN (personal identification number).</p>
</div>

<hr>

<a href="http://phila.gov">Phila.gov</a><br>
<a href="http://alistapart.com/" class="external">A List Apart</a>

<p class="intro">The intro text may be a lead-in to the passage of text, or it may just be used to create a visual distinction between the rest of the passage of text.</p>

<p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>

<div class="small-text">Look how meta we are!</div>

<time datetime="2013-04-06T12:32+00:00">2 weeks ago</time>

<h1>The City of Philadelphia</h1>
<h2>The City of Philadelphia</h2>
<h3>The City of Philadelphia</h3>
<h4>The City of Philadelphia</h4>
<h5>The City of Philadelphia</h5>
<h6>The City of Philadelphia</h6>

<h6 class="h1">The City of Philadelphia</h6>
<h1 class="h2">The City of Philadelphia</h1>
<h2 class="h3">The City of Philadelphia</h2>
<h3 class="h4">The City of Philadelphia</h3>
<h4 class="h5">The City of Philadelphia</h4>
<h5 class="h6">The City of Philadelphia</h5>

<h1 class="alternate divide">The City of Philadelphia</h1>
<h6 class="alternate">The City of Philadelphia</h6>

<dl class="row">
  <dt class="small-12 column">The word</dt>
  <dd class="small-12 column">The definition</dd>
</dl>

<ul class="inline-list">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
</ul>

<ul class="no-bullet">
  <li>List item with a much longer description or more content.</li>
  <li>List item</li>
  <li>List item
    <ul>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
    </ul>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

<ol>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
</ol>

<ul>
  <li>List item with a much longer description or more content.</li>
  <li>List item</li>
  <li>List item
    <ul>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
    </ul>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

<div id="filter-list">
  <form>
    <input class="search" type="text" placeholder="Filter results...">
  </form>
  <ul class="list">
    <li>List item with a much longer description or more content.</li>
    <li>List item</li>
    <li>List item
      <ul>
        <li>Nested List Item</li>
        <li>Nested List Item</li>
        <li>Nested List Item</li>
      </ul>
    </li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
  </ul>

</div>

<form action="#">
  <fieldset class="options">
    <legend>Checkbox <abbr title="Required">*</abbr></legend>
    <ul class="no-bullet">
      <li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
      <li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
      <li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
    </ul>
  </fieldset>
</form>

<p>
  <label class="error">Danger, Will Robinson!</label>
  <input class="is-error" type="text" placeholder="Text Input">
</p>

<label  class="valid">Valid</label>
<input  class="is-valid" type="text" placeholder="Text Input">

<p>
  <label for="number">Number Input <abbr title="Required">*</abbr></label>
  <input id="number" type="number" placeholder="Enter a Number" pattern="[0-9]*">
</p>

<p>
  <label for="password">Password</label>
  <input id="password" type="password" placeholder="Type your Password">
</p>

<form action="#">
  <fieldset class="options">
    <legend>Radio</legend>
    <ul class="no-bullet">
      <li><label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label></li>
      <li><label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label></li>
      <li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label></li>
    </ul>
  </fieldset>
</form>

<label for="select">Select</label>
  <select id="select">
    <optgroup label="Option Group">
        <option>Option One</option>
        <option>Option Two</option>
        <option>Option Three</option>
    </optgroup>
</select>

<p>
  <label for="text">Text Input <abbr title="Required">*</abbr></label>
  <input id="text" type="text" placeholder="Text Input">
</p>

<p>
  <label for="textarea">Textarea</label>
  <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
</p>

<p>
  <label for="webaddress">Web Address</label>
  <input id="webaddress" type="url" placeholder="http://yoursite.com">
</p>

<form class="search">
  <input type="text" placeholder="Search alpha.phila.gov"><input type="submit">
</form>

<a href="#" class="button">Button</a>
<a href="#" class="button alternate">Button Alternate</a>
<a href="#" class="button disabled">Disabled Button</a>

<a href="#" class="button no-margin">Start Now</a>
<div class="small-text">On the ePay website</div>

<a href="#" class="button icon">Button with Icon<i class="fa fa-bell"></i></a>
<a href="#" class="button icon alternate">Button with Icon Alternate<i class="fa fa-beer"></i></a>

<div class="row">
  <div class="call-to-action small-8 column">
    <a href="#" target="_blank" aria-label="Submit a Request to 311" role="button">
      <span class="fa-stack fa-3x">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-stack-1x fa-inverse"><span class="h6">311</span></i>
      </span>
      <h2 class="h5">Submit a Request</h2>
      <span class="accessible"> Opens in new window</span>

    </a>
  </div>

<img src="/patterns/images/internships.jpg" alt="Mayor Nutter talking with interns">

<a href="http://alpha.phila.gov"><img src="//cityofphiladelphia.github.io/patterns/images/city-of-philadelphia-logo.png" class="logo" alt="City of Philadelphia">
</a>

<div class="row">
  <div id="breadcrumbs" class="large-24 columns">
    <ul class="inline-list">
      <li><a href="#">Home</a></li>
      <li><a href="#">Grandparent</a></li>
      <li><a href="#">Parent</a></li>
      <li>Child</li>
    </ul>
  </div>
</div>

<ul class="tabs vertical" data-tab>
  <li class="tab-title active"><a href="#panel1">Tab 1</a></li>
  <li class="tab-title"><a href="#panel2">Tab 2</a></li>
  <li class="tab-title"><a href="#panel3">Tab 3</a></li>
  <li class="tab-title"><a href="#panel4">Tab 4</a></li>
</ul>
<div class="tabs-content">
  <div class="content active" id="panel1">
    <h2>This is a heading</h2>
    <p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p>
    <p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p>
    <p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p>
  </div>
  <div class="content" id="panel2">

    <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel3">
    <p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel4">
    <p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
  </div>
</div>

<table role="grid" summary="A description of the table should go here for screenreaders.">
  <thead>
    <tr>
      <th width="200">Table Header</th>
      <th>Table Header</th>
      <th width="150">Table Header</th>
      <th width="150">Table Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content Goes Here</td>
      <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
      <td>Content Goes Here</td>
      <td>Content Goes Here</td>
    </tr>
    <tr>
      <td>Content Goes Here</td>
      <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
      <td>Content Goes Here</td>
      <td>Content Goes Here</td>
    </tr>
    <tr>
      <td>Content Goes Here</td>
      <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
      <td>Content Goes Here</td>
      <td>Content Goes Here</td>
    </tr>
  </tbody>
</table>

<table role="grid" summary="A description of the table should go here for screenreaders.">
  <tbody>
    <tr>
      <th>Content Goes Here</th>
      <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
      <td>Content Goes Here</td>
      <td>Content Goes Here</td>
    </tr>
    <tr>
      <th>Content Goes Here</th>
      <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
      <td>Content Goes Here</td>
      <td>Content Goes Here</td>
    </tr>
    <tr>
      <th>Content Goes Here</th>
      <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
      <td>Content Goes Here</td>
      <td>Content Goes Here</td>
    </tr>
  </tbody>
</table>

<div id="alpha-alert">
  <div class="row">
    <div class="large-15 columns">
      <p>This service is in <a href="http://alpha.phila.gov/about/">Alpha</a>: it is a work in progress and may contain errors or inaccuracies.</p>
      <a class="go-back small-text" href="http://phila.gov" target="_blank">
        <i class="fa fa-reply"></i> Take me back to Phila.gov<span class="accessible"> Opens in new window</span></a>
    </div>
    <div class="large-9 columns contact">
      <i class="fa fa-comments"></i> <a class="feedback" href="#" target="_blank">Provide Feedback<span class="accessible"> Opens in new window</span></a>
      <i class="fa fa-globe"></i><div id="google_translate_element"></div>
        <script type="text/javascript">
          function googleTranslateElementInit() {
            new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
          }
        </script>
        <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    </div>
  </div>
</div>

<div id="site-wide-alert">
  <div class="row">
    <div class="large-8 columns">
      <h2><i class="ionicons ion-alert-circled"></i>Winter Weather Advisory</h2>
        <div class="alert-start"><time datetime="2015-01-05T+06:00">01-05-2015 06:00pm</time> <strong>to</strong> <time datetime="2015-01-08T+02:00">01-08-2015 02:00</time>pm</div>
      </div>
        <div class="large-16 columns">
          <strong>Code Blue Effective: </strong>Severe cold weather is expected. If you see a homeless person on the street, please call the Project Home Outreach Hotline 215 232 1884. For all other winter-related inquiries, call 311.
        </div>
    </div>
</div>

<a href="#" data-reveal-id="modal-name" class="button">Check out this great modal</a>

<div id="modal-name" class="reveal-modal" data-reveal aria-labelledby="modal-title" aria-hidden="true" role="dialog">
  <h1 id="modal-title">An h1</h1>
  <p>A paragraph tag. You can basically put anything in here.</p>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

<p><span data-tooltip aria-haspopup="true" class="has-tip" title="A tooltip! <p>You can enter paragraph text.</p> <p>Or, more complex markup, like definition lists.</p>
<dl class='row'>
  <dt class='small-12 column'>The word</dt>
  <dd class='small-12 column'>The definition</dd>
  <dt class='small-12 column'>A longer example</dt>
  <dd class='small-12 column'>A longer definition example that might wrap onto two lines</dd>
</dl>">Simple tooltip</span></p>

<title>Phila.gov Patterns | phila.gov</title>

<!-- Begin .header -->
<header data-swiftype-index='false' class="site-header" role="banner">
  <div class="row site-branding">
    <div class="small-24 medium-12 columns">
      <a href="http://alpha.phila.gov"><img src="//cityofphiladelphia.github.io/patterns/images/city-of-philadelphia-logo.png" class="logo" alt="City of Philadelphia">
</a>

      <h1 class="site-title">phila.gov</h1>
      <h2 class="site-description">City of Philadelphia</h2>
    </div>
    <div class="small-24 medium-12 columns">
      <form class="search">
  <input type="text" placeholder="Search alpha.phila.gov"><input type="submit">
</form>

    </div>
  </div>
</header>

<!-- Begin .header -->
<header data-swiftype-index='false' class="site-header app" role="banner">
  <div class="row">
    <div class="small-24 medium-24 column">
      <a href="http://alpha.phila.gov"><img src="//cityofphiladelphia.github.io/patterns/images/city-of-philadelphia-logo.png" class="logo" alt="City of Philadelphia">
</a>

      <h1 class="page-title"><a href="#">Application Name With a Long Title</a></h1>
      <h1 class="site-title">phila.gov</h1>
      <h2 class="site-description">City of Philadelphia</h2>
    </div>
  </div>
</header>

<!-- Begin .header -->
<header data-swiftype-index='false' class="site-header" role="banner">
  <div class="row site-branding">
    <div class="small-24 medium-12 columns">
      <a href="http://alpha.phila.gov"><img src="//cityofphiladelphia.github.io/patterns/images/city-of-philadelphia-logo.png" class="logo" alt="City of Philadelphia">
</a>

      <h1 class="site-title">phila.gov</h1>
      <h2 class="site-description">City of Philadelphia</h2>
    </div>
    <div class="small-24 medium-12 columns">
      <form class="search">
  <input type="text" placeholder="Search alpha.phila.gov"><input type="submit">
</form>

    </div>
  </div>
</header>

<div class="row">
  <div class="small-24 columns">
    <div class="divider"></div>
  </div>
</div>
<div class="row">
  <div id="breadcrumbs" class="large-24 columns">
    <ul class="inline-list">
      <li><a href="#">Home</a></li>
      <li><a href="#">Grandparent</a></li>
      <li><a href="#">Parent</a></li>
      <li>Child</li>
    </ul>
  </div>
</div>

<!-- Begin .header -->
<header data-swiftype-index='false' class="site-header" role="banner">
  <div class="row site-branding">
    <div class="small-24 medium-12 columns">
      <a href="http://alpha.phila.gov"><img src="//cityofphiladelphia.github.io/patterns/images/city-of-philadelphia-logo.png" class="logo" alt="City of Philadelphia">
</a>

      <h1 class="site-title">phila.gov</h1>
      <h2 class="site-description">City of Philadelphia</h2>
    </div>
    <div class="small-24 medium-12 columns">
      <form class="search">
  <input type="text" placeholder="Search alpha.phila.gov"><input type="submit">
</form>

    </div>
  </div>
</header>

<div id="site-wide-alert">
  <div class="row">
    <div class="large-8 columns">
      <h2><i class="ionicons ion-alert-circled"></i>Winter Weather Advisory</h2>
        <div class="alert-start"><time datetime="2015-01-05T+06:00">01-05-2015 06:00pm</time> <strong>to</strong> <time datetime="2015-01-08T+02:00">01-08-2015 02:00</time>pm</div>
      </div>
        <div class="large-16 columns">
          <strong>Code Blue Effective: </strong>Severe cold weather is expected. If you see a homeless person on the street, please call the Project Home Outreach Hotline 215 232 1884. For all other winter-related inquiries, call 311.
        </div>
    </div>
</div>

<div class="row">
  <div class="small-24 columns">
    <div class="divider"></div>
  </div>
</div>
<div class="row">
  <div id="breadcrumbs" class="large-24 columns">
    <ul class="inline-list">
      <li><a href="#">Home</a></li>
      <li><a href="#">Grandparent</a></li>
      <li><a href="#">Parent</a></li>
      <li>Child</li>
    </ul>
  </div>
</div>

<!-- Begin Footer -->
<footer data-swiftype-index='false' class="site-footer" role="contentinfo">
  <section class="fat">
    <div class="row">
      <div class="large-8 columns">
        <h1>Government</h1>
        <nav>
          <ul>
            <li><a href="http://alpha.phila.gov">alpha.phila.gov</a></li>
            <li><a href="http://alpha.phila.gov/departments">Department Directory</a></li>
            <li><a href="http://www.phila.gov/mayor">Mayor's Office</a></li>
            <li><a href="http://iframe.publicstuff.com/#?client_id=242">Report an Issue / 311</a></li>
            <li><a href="http://cityofphiladelphia.wordpress.com/">News</a></li>
          </ul>
        </nav>
      </div>
      <div class="large-16 columns">
        <h1>Browse alpha.phila.gov</h1>
        <nav>
          <ul class="columns-2">
            <li><a href="http://alpha.phila.gov/browse/business">Business</a></li>
            <li><a href="http://alpha.phila.gov/browse/health">Health</a></li>
            <li><a href="http://alpha.phila.gov/browse/jobs-and-contracts">Jobs and Contracts</a></li>
            <li><a href="http://alpha.phila.gov/browse/legal">Legal</a></li>
            <li><a href="http://alpha.phila.gov/browse/payments-and-taxes">Payments and Taxes</a></li>
            <li><a href="http://alpha.phila.gov/browse/permits-licenses">Permits and Licenses</a></li>
            <li><a href="http://alpha.phila.gov/browse/property-housing">Property and Housing</a></li>
            <li><a href="http://alpha.phila.gov/browse/public-safety">Public Safety</a></li>
            <li><a href="http://alpha.phila.gov/browse/recreation">Recreation</a></li>
            <li><a href="http://alpha.phila.gov/browse/streets-and-utilities">Streets and Utilities</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </section>
  <div class="row classic">
    <div class="large-6 columns">
      <a href="#">Feedback</a>
    </div>
    <div class="large-12 columns">
      <nav>
        <ul class="inline-list">
          <li><a href="http://alpha.phila.gov/terms-of-use">Terms of use</a></li>
          <li><a href="http://www.phila.gov/privacy/pdfs/FinalCityOpenRecords.pdf">Right to know (pdf)</a></li>
          <li><a href="http://alpha.phila.gov/privacypolicy">Privacy Policy</a></li>
        </ul>
      </nav>
    </div>
  </div>
</footer>

<!-- End Footer -->

<div class="row">
    <div class="small-24 column">1/1</div>
  </div>

<!--Grid 3/4up-->
<div class="row">
  <div class="medium-16 column">3/4</div>
  <div class="medium-8 column end">1/4</div>
</div>

<div class="row">
  <div class="medium-8 column">1/3</div>
  <div class="medium-8 column">1/3</div>
  <div class="medium-8 column end">1/3</div>
</div>

<div class="row">
  <div class="medium-12 column">1/2</div>
  <div class="medium-12 column end">1/2</div>
</div>

<aside id="secondary" class="related" role="complementary">
  <h3>Related Content</h3>
<ul>
  <li>List item with a much longer description or more content.</li>
  <li>List item</li>
  <li>List item
    <ul>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
    </ul>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

</aside>

<div class="row">
  <div class="medium-8">
    <div class="event-box">
      <div class="event-row">
        <a href="#" target="_blank">
          <div class="date-time">Monday, May  11 <br>
          12:00 PM - 2:00 PM</div>
        </a>
          <div class="event-title">Summer in Love Park 2015</div>
          <div class="event-location">JFK Plaza, 1599 John F. Kennedy Boulevard</div>
      </div>
       <div class="event-row">
         <a href="#" target="_blank">
          <div class="date-time">Wednesday, May 13 <br>
          11:00 AM - 3:30 PM</div>
        </a>
          <div class="event-title">Veteran's Fair</div>
          <div class="event-location">Thomas Paine Plaza (MSB)</div>
      </div>
      <div class="event-row">
        <a href="#" target="_blank">
          <div class="date-time">Friday, May 15 <br>
          7:00 AM - 6:00 PM</div>
        </a>
          <div class="event-title">Stotesbury Cup Regatta</div>
          <div class="event-location">Schuylkill River; Kelly Drive</div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="equal-height news">
    <div class="medium-8 columns">
      <div class="story s-box">
        <a href="http://www.phila.gov/experiencephila/mayor.html">
          <img src="/patterns/images/internships.jpg" alt="Apply to Philadelphia Internships">
          <h3>Apply to the Mayor’s Internship Program</h3>
          <div class="small-text">Experience Philadelphia</div>
          <p>Undergraduate and graduate students interested in City government or gaining valuable workplace experience should apply to the MIPs before January 30th, 2015.
          </p>
        </a>
      </div>
    </div>
  </div>
</div>

<div class="panel center"><p>Is this information correct? <a href="#">Let us know</a>.</p></div>

<nav class="top-bar" data-topbar role="navigation">
	<section class="top-bar-section">
		<ul class="right">
      <li class="has-dropdown"><a href="#">Dropdown</a>
	       <ul class="dropdown">
	         <li><a href="#">Link</a></li>
		       <li><a href="#">Link</a></li>
	       </ul>
      </li>
      <li class="has-dropdown"><a href="#">Dropdown 3 levels</a>
        <ul class="dropdown">
          <li class="has-dropdown"><a href="#">2nd level with dropdown</a>
            <ul class="dropdown">
              <li><a href="#">3rd level</a></li>
	          </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </section>
</nav>