/*** Courses stylesheet for manchester.ac.uk v2 (2013) ***/
/*** Copyright: (c) 2013 The University of Manchester, UK, all rights reserved. ***/

/*********** Table of Contents **************
:: Global / Desktop
:: Fluid, Responsive Layouts
::: Tablet
::: Mobile 480px-
::: Mobile 320px-
::: Mobile 240px-
*/


/* ====================================================================================================
== MAIN FEATURE PANELS
** =========================================================================================================  
 */
.panel { position: relative; min-height: 380px; margin-bottom: 15px; padding: 200px 15px 15px 15px; overflow: hidden; background: #f4f4f4; background-attachment: scroll; background-repeat: no-repeat; background-position: top center; border: solid 1px #e6e6e6; }
/* .panel img { top: 20px; left: 20px; border: 0; } */
.panel h2 { padding: 10px 0 2px 0; color: #000; font-weight: normal; font-size: 30px; border: 0; margin: 0px; }
.panel p { padding: 0 10px 0 0px; margin: 0 0 8px 0; font-size: 1.1em; line-height: 1.4em; font-weight: normal; color: #000; }
.panel p a { color: #000; text-decoration: none; line-height: 1em; }
/* .panel p a:hover { color: #fff; background: #ef4623; text-decoration: none; } */
.panel .cover { position: absolute; top: 340px; left: 0; height: 420px; width: 100%; float: left; padding: 0 15px 10px 15px; overflow: auto; color: #000; background: #fff; opacity: .96; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=96);
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=96)"; }
.panel .cover a { display: block; }
.panel .cover h3 { margin: 10px 0 20px 0; font-size: 1.2em; }
.panel .cover h4 { margin: 12px 0 0px -2px; }
/* .panel .cover ul { margin: 0px 0; padding: 0;  line-height: 0.4em; list-style: none; }
.panel .cover ul li { margin: 0px; line-height: 0.9em; }
.panel .cover>a, .panel .cover ul li a { padding: 2px; font-size: 0.8em;  color: #000; }
.panel .cover a:hover { border-bottom: none; }*/
/* .panel .cover>a:hover, .panel .cover ul li a:hover { color: #fff; text-decoration: none; -webkit-transition: 0.2s all ease-out; -moz-transition: 0.2s all ease-out; -ms-transition: 0.2s all ease-out; -o-transition: 0.2s all ease-out; transition: 0.2s all ease-out; } */
.panel.home.study { background-image: url("/medialand/shared/images/home_panel_study.jpg"); }
.panel.home.research { background-image: url("/medialand/shared/images/home_panel_ourresearch.jpg"); }
/*******  Painfully trying to show the overflow scrollbar in IE7 on small screens  *******/
.lt-ie8 .panel li { margin: 0; padding: 0; }
.lt-ie8 .panel li, .lt-ie8 .panel li a { margin: 0; padding: -2px 2px 0 1px; }
.lt-ie8 .panel { position: relative; }
.lt-ie8 .panel .cover { overflow: scroll; }
/*******  Sod it! just hide it  *******/
.lt-ie8 .panel .cover { display: none; }
.no-js .panel .cover { display: none; }
 @media only screen and (max-width: 1200px) {
.panel .cover ul li a { font-size: 0.8em; }
}
@media only screen and (max-width: 1100px) {
.panel p { font-size: 1.0em; line-height: 1.3em; }
.panel .cover ul li a { font-size: 0.8em; }
/* #HomePage_YouTubeVideo { height: 250px; } */
}
@media only screen and (max-width: 1000px) {
.panel .cover h3 { font-size: 17px; }
.panel .cover ul li a { padding: 1px; font-size: 0.8em; }
}
@media only screen and (max-width: 900px) {
.panel .cover h2 { font-size: 16px; }
.panel .cover ul li a { font-size: 0.8em; }
}
/*******  Tablet  *******/
@media only screen and (max-width: 768px) {
.panel .cover h2 { font-size: 15px; }
.panel .cover ul li { line-height: 1.1em; }
.panel .cover ul li a { font-size: 0.9em; }
}
/*******  Mobile 2  *******/
@media only screen and (max-width: 767px) {
.panel p { font-size: 1.2em; line-height: 1.4em; }
.panel .cover ul li a { font-size: 0.8em; }
}
/*******  Mobile 1  *******/
@media only screen and (max-width: 480px) {
.panel .cover ul li { line-height: 1em; }
.panel .cover ul li a { font-size: 0.8em; }
/* #HomePage_YouTubeVideo { height: 200px; } */
}
.panel-social-media { text-align: right; width: 100%; /* float: right;*/ margin: 0; background: #f8f8f8; border: solid 1px #e6e6e6; margin-bottom: 20px; }
/* .panel { float: left; max-width: 100%; margin: 10px 10px 0 0; padding: 10px; color: #5a6070; background: #fff; text-align: center; border: 1px solid #E4E4E4; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; }
.panel h3 { color: #000; font-weight: normal; font-size: 32px; border: 0; margin-top: 10px; text-align: left; }
.panel p { font-size: 16px; line-height: 1.25em; margin: 0; text-align: left; } */
.lt-ie8 .panel { height: 160px; }
/* ==========================================================================================================
== SOCIAL MEDIA ICONS
** ============================================================================================================ */
.panel-social-media {/*  float: right; */ margin: 10px 0 0 0; }
/******************************universal**********************************/
/* ===================================================================================================================
== BLUE QUOTE
** ================================================================================================================== */
.blue-quote, .blue-quote p, .blue-quote a { color: #fff; }
.blue-quote { position: relative; padding: 15px 24px; margin: 0px 0 24px 0; background: #425072; /* css3 */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.blue-quote p { font-size: 1.2em; color: #fff; line-height: 1.35em; margin-bottom: 0; }
.blue-quote a:hover { border-bottom: 1px solid #fff; }

/***  creates the triangle  ***/
.blue-quote:after { content: ""; position: absolute; margin-left: auto; margin-right: auto; padding-top: 30px; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #425072; bottom: -50px; }
/***  display of quote author (alternatively use a class on the element following the blockquote)  ***/
h1.quote { margin: 20px 0 5px 0; padding: 0; font-size: 2em; line-height: 0; font-weight: normal; line-height: 1em; }
p.quote { padding: 0; font-size: 1.2em; color: #7e7e7e; font-weight: normal; line-height: 1em; }
/* 
#blue-quote { margin: 50px 0 20px 0; }
#blue-quote .blue-quote p { font-size: 1.4em; line-height: 1.4em; color: #fff; }
#blue-quote .blue-quote h1.quote { font-size: 1.5em; }
#blue-quote .blue-quote p.quote { font-size: 1.2em; }
#blue-quote { margin-top: 0px;}
#blue-quote .blue-quote p { font-size: 1.3em; line-height: 1.4em; } 
*/
@media only screen and (min-width: 1801px) {
.blue-quote p { font-size: 2.1em; line-height: 1.7em; letter-spacing: 0.1em; }
h1.quote { font-size: 2.2em; }
p.quote { font-size: 1.2em; }
}
@media only screen and (max-width: 1800px) {
.blue-quote p { font-size: 2.0em; line-height: 1.6em; }
}
@media only screen and (max-width: 1600px) {
.blue-quote p { font-size: 1.9em; line-height: 1.4em; }
}
@media only screen and (max-width: 1400px) {
.blue-quote p { font-size: 1.8em; line-height: 1.4em; }
h1.quote { font-size: 2em; }
}
@media only screen and (max-width: 1200px) {
.blue-quote p { font-size: 1.4em; line-height: 1.4em; }
h1.quote { font-size: 1.6em; }
}
@media only screen and (max-width: 1000px) {
.blue-quote p { font-size: 1.2em; line-height: 1.3em; }
}
@media only screen and (max-width: 800px) {
.blue-quote p { font-size: 1.0em; line-height: 1.2em; }
}
/******************************************
 * Tablet Portrait Layout: 768px
************************************************/
@media only screen and (max-width: 768px) {
}
/******************************************
 * Mobile Layout: 
************************************************/
@media only screen and (max-width: 767px) {
.blue-quote p { font-size: 1.3em; line-height: 1.4em; }
}
@media only screen and (max-width: 480px) {
}
/******************************************
 * Mobile Layout: 320px-
************************************************/
@media only screen and (max-width: 320px) {
}
/******************************************
 * Mobile Layout: 240px-
************************************************/
@media only screen and (max-width: 240px) {
}
/* 
@media only screen and (min-width: 1801px) {
#blue-quote .blue-quote p { font-size: 1.8em; line-height: 1.7em; }
}
@media only screen and (max-width: 1800px) {
#blue-quote .blue-quote p { font-size: 1.7em; line-height: 1.6em; }
}
@media only screen and (max-width: 1600px) {
#blue-quote .blue-quote p { font-size: 1.5em; line-height: 1.4em;  }
}
@media only screen and (max-width: 1400px) {
#blue-quote .blue-quote p { font-size: 1.3em; line-height: 1.4em;  }
}
@media only screen and (max-width: 1200px) {
#blue-quote .blue-quote p { font-size: 1.2em; line-height: 1.4em; }
}
@media only screen and (max-width: 1000px) {
#blue-quote .blue-quote p { font-size: 1.1em; line-height: 1.3em; }
}
@media only screen and (max-width: 800px) {
#blue-quote .blue-quote p { font-size: 1.0em; line-height: 1.2em; }
} 
*/