/*** News and events List stylesheet for manchester.ac.uk v2 (2013) ***/
/*** Copyright: (c) 2013 The University of Manchester, UK, all rights reserved. ***/
/*** Authors: Robert J Lambert ***/

/*********** Table of Contents **************
:: News List
:: Summary News List
:: Other
:: Fluid, Responsive Layouts
::: Tablet 
::: Mobile 480px- 
::: Mobile 320px- 
::: Mobile 240px- 
*/


/**********************************************************************
 * News List
* Full page default view.
***************************************************************************/
.news-list { margin: 0px; padding: 0px; }
.news-list h1 { padding: 0 0 0 60px; font-size: 40px; line-height: 1em; min-height: 50px; color: #000000; background-image: url("/medialand/shared/images/icons/headings/news-and-events.png"); background-repeat: no-repeat; }
.news-list article { display: block; margin: 0 0 15px 0; }
.news-list article a { display: block; padding: 15px; text-decoration: none; background: #ddd; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; border: 1px solid #ccc !important; -webkit-box-shadow: 1px 1px 5px rgba(222,222,222,0.4); -moz-box-shadow: 1px 1px 5px rgba(222,222,222,0.4); box-shadow: 1px 1px 5px rgba(222,222,222,0.4); }
.news-list article a:hover { background: #eee; border: 1px solid #ddd !important; -webkit-box-shadow: 1px 1px 5px rgba(222,222,222,0.8); -moz-box-shadow: 1px 1px 5px rgba(222,222,222,0.8); box-shadow: 1px 1px 5px rgba(222,222,222,0.8); }
.news-list article img { max-width: 30%; }
.news-list article h2 { margin: 0 0 4px 0; line-height: 1.2em; color: #292929; font-weight: normal; font-size: 22px; }
.news-list article time { margin: 20px 0; font-size: 16px; font-style: italic; color: #3f3148; }
/* .news-list article br.clear-both { height: 0; } */
.news-list article .post-details { display: none; margin: 6px 0 0 0; font-size: 16px; color: #292929; clear: left; }
.news-list.highlights article .post-details { display: block !important; margin: 0; padding: 0; font-size: 0.8em; line-height: 1.2em; }
.lt-ie9 .news-list article h2 { margin: 0 0 4px 0; line-height: 1.2em; color: #292929; font-weight: normal; font-size: 26px; }
.no-js .news-list article a { margin: 0 0 20px 0; }
/*******/



/**********************************************************************
 * Summary News List (Home page)
* When used aside other content in a column and the width is much less.
***************************************************************************/
.news-list.summary h1 { padding: 5px 0 0 50px; font-size: 30px; line-height: 1.1em; background-size: 40px; min-height: 40px; }
.news-list.summary h1 a { color: #000; }
/* .news-list.summary h1 a:hover { color: #FFF; } */
.news-list.summary article { margin-bottom: 10px; }
.news-list.summary article a { padding: 10px; }
.news-list.summary article h2 { margin-bottom: 0; font-size: 16px; line-height: 1.2em; }
.news-list.summary article time { margin: 10px 0; font-size: 14px; font-style: italic; color: #3f3148; }
.news-list.summary article p, .news-list.summary article p.post-details, .news-list.summary article p { margin-bottom: 0px; padding-bottom: 0px; }
.lt-ie9 .news-list.summary h1 { padding: 15px 0 10px 60px; font-size: 1.5em; line-height: 1em; background-size: 22px; /* background-image: none; background-repeat: no-repeat; */ ; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/icons/pen_icon_large.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/icons/pen_icon_large.png',sizingMethod='scale')"; }
.lt-ie9 .news-list.summary article h2 { margin: 0 0 4px 0; font-size: 16px; line-height: 1.2em; color: #292929; font-weight: normal; }
/*******/



/**********************************************************************
 * Highlights
***************************************************************************/
.news-list.highlights article a:hover { cursor: default; }
/*******/


/******************************************
 * Top Stories 
************************************************/
.news-photoframe-xsmall { float: left; padding: 7px; margin:0 5px 0 0; background: #fff; color: #5a6070; border: 1px solid #d7d7d7; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.news-list.summary article a { margin-left: 0; }
.news-list article div { max-width: 80px; line-height:0;}
.news-list article div img { max-width: 100%;}
.news-list time { padding: 5px 0; margin: 25px 0; font-size: 14px; }
.news-list article p { color: #000; }
/*.news-list article h3 { font-size: 1.3em; line-height: 1.1em; margin: 5px 0 8px 0; color: #292929; }
.news-list h3 {padding: 0 0 0 60px; min-height: 50px; background-image: url("/medialand/shared/images/icons/headings/news-and-events.png"); background-repeat: no-repeat; } */
.news-list h2 { font-size: 28px; }
/*******/



/**********************************************************************
 * Other
***************************************************************************/
.news-photoframe-small { float: left; /*padding: 0;*/ margin: 0 10px 6px 0; background: #fff; color: #5a6070; padding: 7px; border: 1px solid #d7d7d7; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
/*******/


/******************************************
 * Fluid, Responsive Layouts
************************************************/
@media only screen and (max-width: 1600px) {
.news-list.summary h1 { padding: 7px 0 0 50px; font-size: 25px; line-height: 1.1em; background-size: 40px; min-height: 40px; }
.news-list.summary article { margin-bottom: 10px; }
.news-list.summary article a { padding: 10px; }
.news-list.summary article h2 { font-size: 16px; line-height: 1.1em; }
.news-list.summary article time { margin: 20px 0 10px 0; font-size: 14px; font-style: italic; color: #3f3148; }
}
@media only screen and (min-width: 1401px) {
.news-list article .post-details { display: block; font-size: 1.1em; line-height: 1.4em; }
.news-list.summary article .post-details { display: none; }
/* .news-list.highlights article .post-details { font-size: 1.2em; line-height: 1.4em; } */
.news-list.highlights article .post-details { font-size: 1em; line-height: 1.3em; }
}
@media only screen and (max-width: 1400px) {
.news-list.summary h1 { padding: 5px 0 0 40px; font-size: 20px; line-height: 1.1em; background-size: 30px; min-height: 30px; }
.news-list.summary article h2 { font-size: 15px; line-height: 1.1em; }
.news-list.highlights article .post-details { font-size: 1.1em; line-height: 1.3em; }
.news-list article .post-details { display: block; font-size: 1.1em; line-height: 1.3em; }
.news-list.summary article .post-details { display: none; }
}
@media only screen and (max-width: 1200px) {
.news-list article img { max-width: 30%; padding: 4px }
.news-list article h2 { font-size: 1.4em; line-height: 1.1em; }
.news-list.summary h1 { padding: 6px 0 0 40px; font-size: 17px; line-height: 1.1em; background-size: 30px; min-height: 30px; }
.news-list.summary article h2 { font-size: 14px; line-height: 1.1em; }
.news-list.highlights article .post-details { font-size: 0.9em; line-height: 1.2em; }
.news-list.summary article .post-details { display: none; }

.news-photoframe-xsmall	{padding:2px;}
.news-list article div { max-width: 70px;}
.news-list article .post-details { display: block; font-size: 1.1em; line-height: 1.2em; }
}

/******************************************
 * Tablet Landscape Layout: 1024px
************************************************/
@media only screen and (max-width: 1024px) {
.news-photoframe-xsmall	{padding:1px;}
.news-list article div { max-width: 60px;}
.news-list.summary article a { padding: 6px; }
.news-list.summary article {margin-bottom:5px;}
.news-list article .post-details { display: none;}
}
@media only screen and (max-width: 1000px) {
.news-list.summary article h2 { font-size: 13px; line-height: 1.1em; }
.news-list.summary article time { font-size: 12px; }
}

/******************************************
 * Tablet Portrait Layout: 768px
************************************************/
@media only screen and (max-width: 768px) {
.news-list article h2 { font-size: 1.2em; line-height: 1.1em; }
.news-list.summary article a { padding: 6px; }
.news-list.summary article {margin-bottom:5px;}
}

/******************************************
 * Mobile Layout: 767px-
************************************************/
@media only screen and (max-width: 767px) {
.news-list article .post-details { display: block; font-size: 1em; line-height: 1.4em; }
.news-list.summary article h2 { font-size: 1.3em; line-height: 1.1em; }
.news-list.summary article time { clear: both; font-size:1.1em; }
.news-list.highlights article .post-details { font-size: 1.2em; line-height: 1.4em; }
.news-list article a time {font-size:14px;}
.news-list.summary article a { padding: 8px; }
}

/******************************************
 * Mobile Layout: 480px-
************************************************/
@media only screen and (max-width: 480px) {
.news-list h1 { padding: 6px 0 0 50px; font-size: 1.1em; line-height: 1em; background-size: 40px; min-height: 40px; }
.news-list article h2, .news-list.summary article h2 { font-size: 1.1em; line-height: 1.1em; }
.news-list article .post-details { display: none; }
.news-list.summary article .post-details { display: none; }
.news-list.highlights article .post-details { font-size: 1em; line-height: 1.2em; }
.news-photoframe-xsmall		{padding:1px;}
.news-list h2				{font-size:16px;}
}

/******************************************
 * Mobile Layout: 320px-
************************************************/
@media only screen and (max-width: 320px) {
.news-list h1 { padding-left: 36px; font-size: 1.1em; line-height: 1em; background-size: 30px; min-height: 30px; }
.news-list article h2 { font-size: 1em; line-height: 1.0em; }
.news-list article a { padding: 8px; }
.news-photoframe-xsmall	{padding:1px;}
.news-list article a time {font-size:12px;}
}

/******************************************
 * Mobile Layout: 240px-
************************************************/
@media only screen and (max-width: 240px) {
.news-list h1 { font-size: 17px; }
.news-list article h2 { font-size: 13px; line-height: 1.0em; }
.news-list article time { margin: 20px 0; font-size: 14px; font-style: italic; color: #3f3148; }
}