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