#news {
  position: relative;
  top: 135px;
  text-align: left;
  margin: 0 auto;
}

#news .nav {
  height: 24px;
  margin: 0 auto;
}

#news a {
  font-size: 14px;
  color: black;
  cursor:pointer;
}

#news a:hover {
  text-decoration: none;
}

#news .nav-pills > li > a {
  color: #cccccc;
  border-radius: 0;
  font-weight: 700;
  text-transform: uppercase;
  text-align: left;
  padding: 3px 13px;
  margin: 0;
}

#news .nav-pills > li.active > a{
  color: black;
  background-color: inherit;
}

#news .tab-content {
  overflow: hidden;
  clear: both;
}

#news .feeds-container {
  border: 1px solid black;
  margin: 0 auto;
  height: 800px;
  overflow-y: scroll;
  overflow-x: hidden;
}

@media (min-width: 780px){
  #news .feeds-container, #news .nav {
    width: 700px;
  }
}

@media (max-width: 780px){
  #news .feeds-container, #news .nav {
    width: 500px;
  }
}

@media (max-width: 600px) {
  #news .feeds-container, #news .nav {
    width: 450px;
  }
}

@media (max-width: 400px) {
  #news .feeds-container, #news .nav {
    width: 250px;
  }
}

@media screen and (max-height: 1420px) {
  #news .feeds-container {
    height: 1100px;
  }
}

@media screen and (max-height: 1320px) {
  #news .feeds-container {
    height: 1000px;
  }
}

@media screen and (max-height: 1220px) {
  #news .feeds-container {
    height: 900px;
  }
}

@media screen and (max-height: 1120px) {
  #news .feeds-container {
    height: 800px;
  }
}

@media screen and (max-height: 1020px) {
  #news .feeds-container {
    height: 700px;
  }
}

@media screen and (max-height: 920px) {
  #news .feeds-container {
    height: 600px;
  }
}

@media screen and (max-height: 820px) {
  #news .feeds-container {
    height: 500px;
  }
}

@media screen and (max-height: 720px) {
  #news .feeds-container {
    height: 400px;
  }
}

@media screen and (max-height: 620px) {
  #news .feeds-container {
    height: 300px;
  }
}

@media screen and (max-height: 520px) {
  #news .feeds-container{
    height: 200px;
  }
}

#news .infinite-scroll {
  background-color: #fafbfb;
}

#news .item {
  display: block;
  height: 122px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px #cccccc solid;
}

#news .item:hover {
  background-color: #eeeeee;
}

#news .feed-thumbnail {
  float: left;
  width: 145px;
  height: 88px;
  margin: 17px 21px;
  overflow: hidden;
  border: 1px solid #000000;
}

#news .feed-thumbnail img {
  min-width: 145px;
  min-height: 88px;
}

#news .content {
  text-align: left;
  padding: 0 21px;
}

#news p {
  font-weight: 400;
  font-size: 10px;
}

#news p.feed-meta {
  padding-top: 13px;
  font-size: 10px;
}

#news h4 {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/ */
#news p.snippet {
  position: relative;
  line-height: 16px;
  max-height: 32px;
  overflow: hidden;
  padding-right: 1em;
  text-align: justify;
}

#news p.snippet:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}

#news p.snippet:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: #fafbfb;
}

#news p.snippet img {
  display: none;
}

#news .item:hover p.snippet:after {
  background-color: #eeeeee;
}
	