/*** Elements stylesheet for *@manchester.ac.uk v2 (2013) ***/
/*** Copyright: (c) 2013 The University of Manchester, UK, all rights reserved. ***/
/*** Authors: Robert J Lambert, Ayodele Kolade ***/

/*********** Table of Contents **************
:: Banner, Key Facts, colour
:: Banner, Key Facts, plain
:: Buttons
:: Info Graphics
:: Impact Case Study
:: 
:: IE8, IE7 tweakes & fixes
:: Fluid, Responsive Layouts
*/




/******************************************
 * Banner, Key Facts, colour
* 
* Notes:  .key-facts .details p { padding-left: 0 !important; } to stop indenting 
************************************************/
.banner.key-facts { margin-bottom: 30px; padding: 0 15px; }
.banner.key-facts section { margin-bottom: 0; }
.banner.key-facts figure, .key-facts .img-overlay { width: 75.75%; }
.banner.key-facts figure { display: block; float: left; height: 300px; }
.banner.key-facts .img-overlay { height: 260px; position: absolute; left: 0; top: 20px; display: table-row; padding: 0 5%; background: #fff url('//epsassets.manchester.ac.uk/medialand/shared/images/graphics/nubs/nub-left-orange-med.png') no-repeat right center; opacity: 0.85; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; filter: alpha(opacity=85); }
.banner.key-facts .overlay-text { height: 260px; display: table-cell; vertical-align: middle; font-size: 1.4em; line-height: 1.4em; }
.banner.key-facts .overlay-text a { color: #333; border-bottom: 1px dotted #333; }
.banner.key-facts .overlay-text a:hover { color: #000; border-bottom: 1px dotted #000; }
.banner.key-facts .overlay-text h2, .key-facts .overlay-text h3 { margin: 5px 0; font-weight: bold; line-height: 1em; }
.banner.key-facts .key-details, .key-facts .key-details p, .key-facts .key-details a { /* font-size: 1em; line-height: 1.5em; */ color: #fff; }
.banner.key-facts .key-details { display: block; clear: none; float: left; width: 24.25%; /* height: 300px; overflow: auto; */ padding: 10px 15px; background: #ff8100; /*  scrollbar-base-color: #ff6600;  scrollbar-3dlight-color: #C0C0C0;  scrollbar-highlight-color: #C0C0C0;  scrollbar-arrow-color: black;  scrollbar-shadow-color: #C0C0C0;  scrollbar-dark-shadow-color: #C0C0C0;  scrollbar-track-color: #dd3300;scrollbar-face-color: #C0C0C0; */ }
.banner.key-facts .key-details h4, .key-facts .key-details h5, .key-facts .key-details h6 { margin: 5px 0 0 0; font-weight: bold; }
.banner.key-facts .key-details h4 { margin-top: 0; }
.banner.key-facts .key-details p { margin: 0 0 5px 0; padding-left: 0 !important; line-height: 1.4em; }
.banner.key-facts .key-details a { border-bottom: 1px solid #ddd; }
.banner.key-facts .key-details a:hover { border-color: #fff; }
.banner.key-facts .shadow-paper { margin: 0; padding: 0; text-shadow: none; background: #ff8100; }
.banner.key-facts table, .key-facts table tr, .key-facts table td { background: none; border: none; box-shadow: none; }
/*
******  IE8, IE7 tweakes & fixes  *******/
.lt-ie8 .banner.key-facts .img-overlay { width: 65.8%; height: 50%; padding: 5%; clear: none; }
.lt-ie8 .banner.key-facts .key-details { position: absolute; top: 0; right: 0; width: 20%; padding: 3%; clear: none; }
.lt-ie8 .banner.key-facts br { height: 1px; visibility: hidden; }
/*
******  Fluid, Responsive Layouts  *******/
@media only screen and (max-width: 767px) {
.banner.key-facts figure { width: 100%; height: 200px; background-size: 100% auto !important; }
.banner.key-facts .img-overlay, .banner.key-facts .key-details { display: table-cell; position: relative; float: none; width: 50%; top: auto; vertical-align: top; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
.banner.key-facts .img-overlay { display: -moz-inline-stack; vertical-align: top; zoom: 1; *display: inline;
_height: 250px; }
.banner.key-facts .overlay-text { font-size: inherit; }
.banner.key-facts .key-details { }
/* .key-facts-banner .overlay-txt { display: table-cell; position: relative; float: none; width: 50%; height: 100%; display: -moz-inline-stack; vertical-align: top; zoom: 1; *display: inline;
_height: 250px; }
.key-facts-banner .key-facts { display: table-cell; position: relative; float: none; width: 50%; top: auto; border-left: 1px dotted #666; } */
.banner.key-facts br.clear-both { display: none; }
}
@media only screen and (max-width: 550px) {
.banner.key-facts figure { width: 100%; background-size: auto 100% !important; }
}
@media only screen and (max-width: 320px) {
.banner.key-facts .img-overlay, .banner.key-facts .overlay-text, .banner.key-facts .key-details { display: block; width: auto; height: auto; }
.banner.key-facts .img-overlay { padding: 5% 5% 10% 5%; background: #fff url('//epsassets.manchester.ac.uk/medialand/shared/images/graphics/nubs/nub-up-orange-med.png') no-repeat center bottom; }
}
/******/





/******************************************
 * Banner, Key Facts, plain
************************************************/
.key-facts-banner { margin-bottom: 15px !important; }
.key-facts-banner .key-facts, .key-facts-banner .key-facts p { font-size: 1em; }
.key-facts-banner .key-facts { display: block; float: left; width: 25%; padding: 5px 15px; }
.key-facts-banner .key-facts h4, .key-facts-banner .key-facts h5, .key-facts-banner .key-facts h6 { margin: 5px 0 0 0; font-weight: bold; }
.key-facts-banner .key-facts p { margin: 0 0 5px 0; padding-left: 0 !important; }
.key-facts-banner .overlay-txt { position: absolute; bottom: 0; width: 75%; z-index: 2; padding: 15px; background: rgba(255, 255, 255, 0.8); }
.key-facts-banner .overlay-txt h2, .key-facts-banner .overlay-txt h3 { margin-top: 0; font-weight: bold; line-height: 1em; }
.key-facts-banner .image { display: block; float: left; width: 75%; height: 300px; }
.key-facts-banner .shadow-paper { margin: 0; padding: 0; text-shadow: none; background: #f1f5f4; }
/*
******  IE8, IE7 tweakes & fixes  *******/
.lt-ie9 .key-facts-banner .bg { position: absolute; bottom: 0; width: 75%; height: 35%; z-index: 1; padding: 15px; background: #fff; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=90); }
.lt-ie8 .key-facts-banner .bg, .lt-ie8 .key-facts-banner .overlay-txt { position: absolute; left: 0; bottom: 0; width: 65.1%; height: 22%; padding: 5%; clear: none; }
.lt-ie8 .key-facts-banner .key-facts { position: absolute; top: 0; right: 0; width: 20%; padding: 3%; clear: none; }
/*
******  Fluid, Responsive Layouts  *******/
@media only screen and (max-width: 1100px) {
.key-facts-banner .key-facts, .key-facts-banner .key-facts p { font-size: 0.98em; }
}
/*
******  Mobile Layout: 767px-  *******/
@media only screen and (max-width: 767px) {
.key-facts-banner .key-facts { display: table-cell; position: relative; float: none; top: auto; width: 50%; border-left: 1px dotted #666; }
.key-facts-banner .overlay-txt { display: table-cell; position: relative; float: none; width: 50%; height: 100%; display: -moz-inline-stack; vertical-align: top; zoom: 1; *display: inline;
_height: 250px; }
.key-facts-banner .image { width: 100%; height: 200px; background-size: auto 220px !important; }
.key-facts-banner br.clear-both { display: none; }
}
/******/



/******************************************
* Buttons
************************************************/
.button { display: inline-block; position: relative; width: auto; margin: 0 5px 5px 0; padding: 7px 14px 8px; font-size: 1em; font-weight: bold; text-align: center; text-decoration: none; line-height: 1; color: #1d1d1d !important; background-color: #e1e1e1; border: 1px solid #c3c3c3; -webkit-box-shadow: 1px 1px 4px rgba(222,222,222,0.4); -moz-box-shadow: 1px 1px 4px rgba(222,222,222,0.4); box-shadow: 1px 1px 4px rgba(222,222,222,0.4); }
.button:hover { cursor: pointer; color: #1d1d1d; background-color: #efefef; border: 1px solid #c3c3c3; -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); }
/* .button:focus { -webkit-box-shadow: 0 0 5px #e9e9e9, 0 1px 0 rgba(255,255,255,0.5) inset; -moz-box-shadow: 0 0 5px #e9e9e9, 0 1px 0 rgba(255,255,255,0.5) inset; box-shadow: 0 0 5px #e9e9e9, 0 1px 0 rgba(255,255,255,0.5) inset; }
.button:active { -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2) inset; -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2) inset; box-shadow: 0 1px 0 rgba(0,0,0,0.2) inset } */
.button.tiny { font-size: 0.7em; padding: 5px 10px 6px; }
.button.small { font-size: 0.8em; padding: 7px 14px 8px; }
.button.medium { font-size: 1em; padding: 9px 21px 10px; }
.button.large { font-size: 1.2em; padding: 15px 30px 16px; }
.button.primary { color: #fff !important; background-color: #ff5734; border: 1px solid #cd2401; }
.button.primary:hover { background-color: #ef4623; }
.button.secondary { color: #fff !important;
    background-color: #660099; 
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A100F2), to(#34014D));
    background-image: -webkit-linear-gradient(#A100F2, #34014D));
    background-image: -moz-linear-gradient(#A100F2, #34014D));
    background-image: -o-linear-gradient(#A100F2, #34014D));
    border: 1px solid #203050; border-radius: 2em; font-size: 1.5em; font-weight: normal; margin-bottom: .5em;text-shadow: 2px 2px #000;
}
.button.secondary:hover { background-color: #34014D;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#34014D), to(#34014D));
    background-image: -webkit-linear-gradient(#34014D, #34014D));
    background-image: -moz-linear-gradient(#34014D, #34014D));
    background-image: -o-linear-gradient(#34014D, #34014D));
    box-shadow: 0 10px 6px -6px #777;
}
.button.tertiary { color: #fff !important; background-color: #7bc5e0; border: 1px solid #59a3d0; text-shadow: -1px -1px 0 #59a3d0, 1px -1px 0 #59a3d0, -1px 1px 0 #59a3d0, 1px 1px 0 #59a3d0; }
.button.tertiary:hover { background-color: #6ab4d0; }
/* .button.primary:hover { background-color: #2284a1 }
.button.primary:focus { -webkit-box-shadow: 0 0 4px #ffcc33, 0 1px 0 rgba(255,255,255,0.5) inset; -moz-box-shadow: 0 0 4px #ffcc33, 0 1px 0 rgba(255,255,255,0.5) inset; box-shadow: 0 0 4px #ffcc33, 0 1px 0 rgba(255,255,255,0.5) inset; } */
/* .button.secondary { margin-right: 5px; margin-bottom: 5px; color: #1d1d1d; background-color: #e1e1e1;  }
.button.secondary:hover { background-color: #efefef; color: #000;  } */
.button a, .button:hover a { color: inherit; background: none; border: none; }
/*******/



/******************************************
 * Info Graphics
************************************************/
.info-graphics { margin-bottom: 1em; }
.info-graphics figure { margin-bottom: 15px; display: table-row; }
.info-graphics figure img { float: left; margin-right: 15px; }
.info-graphics figure h4 { margin-bottom: 0.3em; }
.info-graphics figcaption { display: table-cell; vertical-align: middle; height: 145px; }
@media only screen and (max-width: 600px) {
.info-graphics figcaption { display: block; clear: both; height: auto; }
}
@media only screen and (max-width: 400px) {
.info-graphics figure { display: block; }
.info-graphics figcaption { display: table; -dt-display: table; height: auto; }
}
@media only screen and (max-width: 200px) {
.info-graphics figure img { margin-right: 0; }
}
/*******/



/******************************************
 * Impact Case Study
************************************************/
.impact-case-study .lead.intro { font-weight: bold; }
/*******  Lead Academics section of an Impact Case Study (not currently used)  *******/
.lead-academics { display: block; clear: both; margin: 30px 0; padding: 15px 0; border: solid #ddd; border-width: 1px 0 1px 0; }
.lead-academics div.columns { padding: 0; }
.lead-academics h2 { margin-bottom: 0; text-transform: uppercase; }
.lead-academics p { font-size: 1em; }
.lead-academics ul li, .lead-academics a { display: block; padding: 2px 0; color: #222; line-height: 1.3em; background: none; border-bottom: none; }
.lead-academics ul { list-style: none; left: 0; margin: 0 0 0 15px; padding-right: 0; }
.lead-academics ul li { margin-bottom: 0.2em; font-size: 1.2em; font-style: italic; }
.lead-academics ul li:last-of-type { margin-bottom: 0; }
.lead-academics a:before { content: "\00BB "; position: absolute; left: -15px; color: #a9a9a9; font-size: 1.2em; line-height: 0.9em; }
.lead-academics a:hover:before { color: #ec5330; }
/*******/