/**
 * Assets CSS
 * Assets are referring to assets withing OU Campus. This is all the styling for block elements on the 
 * Krake redesign. Note that although Photo Galleries are assets within OU Campus, they have there
 * own CSS file. This file is used in conjuction with kraken.css
 * 
 * @see    n/a
 * @author Jonathan Volks <jvolks@skidmore.edu> and Melissa Haas <mhaas1@skidmore.edu>
 * @unit   Office of Communications and Marketing
 */



/* ==================================================================================================== */
/* Blog/News Feed */
/* ==================================================================================================== */
.feed { clear: both; width: 100%; }
.feed__header { margin: 0 0 30px 0; }
.feed__header h2 { margin: 0; }
.feed__header hr { margin: 5px 0 0 0; }
.feed__list { margin: 0; padding: 0; list-style: none; }
.feed__list li { margin: 0 0 30px 0; padding: 0; list-style: none; background-image: none; }
.feed__list li:after { content: ""; display: block; clear: both; }
.feed__image { float: left; width: 100px; height: 100px; }
.feed__image a { width: 100%; height: 100%; display: block; }
.feed__image a:hover { background-color: transparent!important; }
.feed__image img { border-radius: 50%; width: 100%; height: 100%; display: block; }
.feed__text { float: left; width: calc(100% - 115px); padding: 0; margin: 0 0 0 15px; border-bottom: 1px solid #dbe2e9;  } 
.feed .feed__title a { color: #000000; border-bottom: none; background-color: transparent; } 
.feed .feed__title a:hover { background-color: transparent; }
.feed .feed__content { font-size: 1.4rem; line-height: 1.3; margin: 0 0 5px 0; }
.feed__extra { clear: both;  }
.feed__extra:after { content: ""; display: block; clear: both; }
.feed__more { float: left; width: 50%; }
.feed__timestamp { float: left; width: 50%; font-size: 1.1rem; line-height: 2.45; text-align:  right; opacity: 0.7; }

.feed.feed--large { max-width: 1070px; margin: 0 auto; }
.feed--large .feed__header { margin-bottom: 50px; }
.feed--large .feed__list li { margin-bottom: 50px; position: relative; }
.feed--large .feed__image { width: 200px; height: 200px; padding-right: 0; }
.feed--large .feed__text { width: calc(100% - 230px); position: absolute; top: 50%; left: 230px; transform: translateY(-50%); margin: 0; }
.feed--large .feed__title { margin: 0 0 5px 0; }
.feed--large .feed__title a { font-size: 2.2rem; }
.feed--large .feed__content { font-size: 1.8rem; line-height: 1.5; }

@media (max-width: 767px) {  
    .feed__image, .feed--large .feed__image { width: 50px; height: 50px; }
    .feed__text, .feed--large .feed__text { width: calc(100% - 60px); margin: 0 0 0 10px; }
    
    .feed--large .feed__text { position: relative; top: auto; left: auto; transform: none; }
    .feed--large .feed__title a { font-size: 1.8rem; }    
    .feed--large .feed__content { font-size: 1.4rem; line-height: 1.3; }
}




/* Don't print link hrefs */
@media print {
  a[href]:after {
    content: none
  }
}