.news-image {
  /* position: relative; */
}
.news-image .news-date-info {
    position: absolute;
}

.img-responsive {
    display: block !important;
}

.news-image .news-date-info {
    z-index: 1;
    background: rgba(0,0,0,0.5);
    width: 75px;
    height: 75px;
}

.news-date-info .news-month,
.news-date-info .news-day,
.news-date-info .news-year {
    width: 50%;
    margin: 0 auto;
    color: white;
    display: block;
    text-align: center;
    font-size: 1em;
}

.news-date-info .news-month {
    text-transform: uppercase;
}

.news-date-info .news-day {
    font-size: 1.8em;
}

.category, .main-category {
  display: inline-block;
  padding-right: 5px;
}
.main-category {
  font-weight: bold;
}
.tag {
  display: inline-block;
  padding-right: 5px;
}

/* this is a hack. There is a problem where the xsl is outputting empty categories.
    I was unable to find where the exact issue was, but settled for hiding it with CSS
    to save development time */
li a[href="#category="] {
    position: absolute;
    left: -10000px;
    top: -10000px;
}