<div class="row">
    <div class="col-md-3 hidden-xs">
        <div class="pull-left">
            <h4>Upcoming</h4>
        </div>
        <div id="x-upcoming"/>
    </div>
    <div class="col-md-9 col-xs-12">
        <div id="x-toolbar" class="calendar-toolbar"/>
        <div id="x-calendar" class="calendar"/>
        <div class="legend calendar">
            <ul class='legend-labels'>
                <li class="legend-label"><span class="premiere" title="Premiere episode hasn't aired yet"></span>Unaired Premiere</li>
                <li class="legend-label"><span class="primary" title="Episode hasn't aired yet"></span>Unaired</li>
                <li class="legend-label"><span class="warning" title="Episode is currently airing"></span>On Air</li>
                <li class="legend-label"><span class="purple" title="Episode is currently downloading"></span>Downloading</li>
                <li class="legend-label"><span class="danger" title="Episode file has not been found"></span>Missing</li>
                <li class="legend-label"><span class="success" title="Episode was downloaded and sorted"></span>Downloaded</li>
                <li class="legend-label"><span class="unmonitored" title="Episode is unmonitored"></span>Unmonitored</li>
            </ul>
         </div>
    </div>
</div>
