<code>Example</code>
<div class="phrase-container">

  <!-- annotations for top row --> 
  <span class="note-center-top" style="background-position: 10px 16px; margin-left: 20px;"><span class="text">parties</span></span>
    <span class="note-center-top" style="background-position: 100px 16px; margin-left: 77px;"><span class="text">reporter volume number</span></span>
    <span class="note-center-top-tall" style="background-position: 50px 16px; margin-left: -30px;"><span class="text">reporter abbreviation<br />(Federal Reporter, 2d series)</span></span>
    <span class="tall-hash" style="margin-left: -90px;"><img src="http://ruraldesigncollective.org/mosh/bluebook.markup/hash.long.png" /></span>
    <span class="note-center-top" style="background-position: 50px 16px; margin-left: 10px;"><span class="text">first page of case</span></span>
    <span class="note-center-top-tall" style="background-position: 50px 16px; margin-left: 5px;"><span class="text">span of specific<br />pages referred to</span></span>
    <span class="tall-hash" style="margin-left: -65px;"><img src="http://ruraldesigncollective.org/mosh/bluebook.markup/hash.long.png" /></span>
    <span class="note-center-top" style="background-position: 30px 16px; margin-left: 35px;"><span class="text">deciding court</span></span>
    <span class="note-center-top-tall" style="background-position: 50px 16px; margin-left: 10px;"><span class="text">date of<br />decision</span></span>
    <span class="tall-hash" style="margin-left: -25px;"><img src="http://ruraldesigncollective.org/mosh/bluebook.markup/hash.long.png" /></span><br />
  <!-- end annotations for top row --> 

 <!-- row one of citation --> 
  <span class="phrase-top">
United States v. MacDonald,
</span>
<span class="phrase-ordm-top">
    &ordm;
</span> 
<span class="phrase-top">
    531
</span>
<span class="phrase-ordm-top">
    &ordm;
</span> 
<span class="phrase-top">
    F.2d
</span>
<span class="phrase-ordm-top">
    &ordm;
</span> 
<span class="phrase-top">
    196,
</span>
<span class="phrase-ordm-top">
    &ordm;
</span> 
<span class="phrase-top">
    199-200
</span>
<span class="phrase-ordm-top">
    &ordm;
</span> 
<span class="phrase-top">
    (4th Cir.
</span>
<span class="phrase-ordm-top">
    &ordm;
</span> 
<span class="phrase-top">
    1976)
</span>
<span class="phrase-ordm-top">
    &ordm;
</span><br />
  
<!-- row two of citation --> 
    <span class="note-center-bottom" style="background-position: 24px 0px; margin-left: 324px;">parenthetical phrase describing<br />decision of Fourth Circuit)</span>
<span class="phrase-bottom">
    (resting review of the dispositive issue on the principle of judicial economy),
</span>
<span class="phrase-ordm"></span><br />

<!-- row three of citation --> 
&ordm;
    <span class="note-center-bottom" style="background-position: 24px 0px;">action of higher court</span>
<span class="phrase-bottom">
    rev'd,
</span>
<span class="phrase-ordm">
    &ordm;
</span>
    <span class="note-center-bottom" style="background-position: 24px 0px; margin-left: 64px;">citation of reversal</span>
<span class="phrase-bottom">
    435 &ordm; U.S. &ordm; 850 &ordm; (1978).
</span>
<span class="phrase-ordm"></span><br />
</div>

.phrase-container { white-space: nowrap; margin: 0px 0px; }
.phrase-container-top { margin-top: -2px; }
.phrase-top { 
    border-top: 1px solid #ccc; 
    padding-top: 4px;
    background:url('http://ruraldesigncollective.org/mosh/bluebook.markup/hash.png') no-repeat top left;
    padding: 0px 0px 4px 4px;
    background-color: none;
    }
.phrase-middle { padding: 0px 0px 0px 4px; }
.phrase-bottom { 
    background:url('http://ruraldesigncollective.org/mosh/bluebook.markup/hash.png') no-repeat bottom left;
    border-bottom: 1px solid #ccc; 
    padding: 0px 4px 0px 4px; 
    }
.phrase-ordm { 
    background:url('http://ruraldesigncollective.org/mosh/bluebook.markup/hash.png') no-repeat bottom left;
    margin-left: -1px;
    padding: 0px 4px 0px 4px; 
    }
.phrase-ordm-top { 
    background:url('http://ruraldesigncollective.org/mosh/bluebook.markup/hash.png') no-repeat top left;
    margin-left: -1px;
    padding: 0px 4px 4px 4px; 
    position: relative;
    top: 0px;
    }       
.note-center-bottom { 
    background:url('http://ruraldesigncollective.org/mosh/bluebook.markup/slash.png') no-repeat top left;
    font-size: 12px; 
    line-height: 12px;
    position: absolute; 
    margin-top: 18px; 
    padding-top: 12px;
    }   
.note-center-top { 
    background:url('http://ruraldesigncollective.org/mosh/bluebook.markup/slash.png') repeat-y bottom right;
    font-size: 12px; 
    line-height: 12px;
    padding: 0px 0px 16px 0px; 
    position: relative; 
    top: 0px;
    text-align: center;
    height: 9px;
    }
.note-center-top-tall { 
    font-size: 12px; 
    line-height: 12px;
    padding: 0px 0px 16px 0px; 
    position: relative; 
    top: -20px;
    display: inline-block;
    overflow: visible;
    }   
.tall-hash { 
    position: relative; 
    top: 19px;
    display: inline;
    }   
.text   { background-color: #fff;}      
code { background-color: #000; color: #fff; padding: 3px; }

.smallcaps { font-variant: small-caps }

/***

This is a Compass-free version of a mapped citation. Our coding objective was to match the original Bluebook citation as close as possible without using JavaScript or code frameworks.

***/