@charset "UTF-8";
/* CSS Document */
/* THIS Bb FRIENDLY SET OF STYLES IS BASICALLY EVERYTHING APART FROM STYLES THAT STYLE UP STANDARD HTML TAGS */
/* THESE TAGS ARE NOT INCLUDED HERE AS WHEN THIS CSS IS CALLED ON Bb PAGES THEY WILL AFFECT THE STANDARD Bb STYLES */
/* THE STYLES THAT STYLE UP STANDARD HTML TAGS ARE IN THE IHL-HTMLFILES.CSS FILES AS THESE STYLES ARE ONLY NEEDED FOR THE HTML PAGES */
/* =============================================================================================================================================== */


/* GENERAL CSS CLASSES */


img { border-radius: 12px; max-width: 100%; height: auto; }

img.75pc { max-width: 75%; }

hr {  }
hr.activity-hr-clear { clear: both; }

h5 { font-size: 1.25em; color: #e36159#; font-weight: bold; margin-bottom: 10px; padding-top: 10px; margin-top: 20px; }


/* HEADER TITLE BOX FOR ALL PAGES (BB & HTML) */
/* see IHL-HTMLfiles.css for the H1 & H2 styles */
#content-title {
	height: 90px;
	padding: 0px 0px 5px 10px;
	color: #ffffff;
	background-image: url(../images/banner/page-header-bg200.jpg);
	background-color: #3398c4;
	background-position: top right;
	background-repeat: no-repeat;
	border-bottom: solid 5px #e36159#;  
	margin: 20px 0px 25px 0px;
	overflow: hidden;	
	text-align: center;
}

/* these two styles are needed for when the content-title banner code is pasted into a Bb item as the Bb theme H styles mess things around, 
	the div at the start is key so don't remove it */
div #content-title h1 { font-size: 18pt; margin-top: 0.7em; margin-bottom: -10px; }
div #content-title h2 { font-size: 14pt; }


/* HOME PAGE */
#home-page {
   	/* border-radius: 30px; border: 2px solid #129aae; background-color: #129aae; */
	width: 100%;
	/*height: 1000px;*/
	color: #ffffff;
	background-image: url(../images/hp-images/home-page-bg.jpg);
	background-color: #3398c4;
	background-position: top right;
	background-repeat: no-repeat;
	/*border-bottom: 10px solid #e36159#;
	padding-bottom: 10px;*/
}
	
#home-page hr { width: 95%; text-align: center; }
#home-page a { color: #fff; text-decoration: none; } 
#home-page a:hover { text-decoration: underline; }
#home-page .hpmodules img { border-radius: 12px 12px 0px 0px; box-shadow: 3px 0px 10px #444; }
#home-page .hpmodules { padding-bottom: 10px; }
#home-page .hpmodules img:hover { opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ }
#home-page .hpmodtitle { display: block; margin-left: auto; margin-right: auto; width: 225px; background-color: #e36159#; color: #fff; font-weight: bold; padding: 5px 0px; border-radius: 0px 0px 12px 12px; box-shadow: 3px 3px 10px #444;  } 
#home-page .hptitle { padding: 25px 0px 5px 10px; }
#home-page .hptitle p { font-size: 16pt; line-height: 0.05em; /*text-shadow: 1px 2px #888;*/ }
#home-page .hptitle h1 { font-size: 24pt; line-height: 1.2em; /*text-shadow: 1px 2px #888;*/ margin-top: -5px;  padding-bottom: 5px; }
#home-page .hptitlecircles-bg { background-image: url(../images/hp-images/hp-purple-circles-bg.png); background-repeat: repeat-x; height: 50px; margin-top: -59px; }
#home-page .hptitlecircles { background-image: url(../images/hp-images/hp-purple-circles.png); background-repeat: no-repeat; background-position: right; height: 50px; position: relative; top: -50px; } 


/* HPFOOTER (ALSO USED ON 'OUR TEAM' AND 'PROG OVERVIEW' PAGES) */
.hpfooter { clear: both; background-color: #e36159#; color: #fff; padding: 10px; min-height: 55px;  margin-top: 25px; vertical-align: middle; }
.hpfooter p { margin-top: 5px; margin-bottom: 0px; }
.hpfooter img { float: right; }
.hpfooter a { color: #fff; text-decoration: none; } 
.hpfooter a:hover { text-decoration: underline; }


/* STANDALONE PAGES TITLE (ALSO ON MODULE SECTIONS PAGES AS INLINE CODE - SEE CODE SNIPPETS PAGE)  */
#sptitle { 
	color: #ffffff;
	background-color: #3398c4;
	background-image: url(../images/banner/page-header-bg200.jpg);
	background-position: top right;
	background-repeat: no-repeat;
	padding: 25px 0px 15px 10px;
	border-bottom: #e36159# 5px solid;
	height: 50px;
}
#sptitle p { font-size: 16pt; line-height: 0.05em; /*text-shadow: 1px 2px #888;*/ }
#sptitle h1 { font-size: 24pt; line-height: 1em; /*text-shadow: 1px 2px #888;*/ margin-top: -5px; }
/*#sptitlecircles-bg { background-image: url(../images/hp-images/hp-purple-circles-bg.png); background-repeat: repeat-x; height: 50px; margin-top: -60px;  } */
#sptitlecircles { background-image: url(../images/hp-images/hp-purple-circles.png); background-repeat: no-repeat; background-position: right; height: 50px; position: relative; top: -28px; }


/* LINE HEIGHT SETTING FOR OUR-TEAM, PROG-OVER, HOME-PAGE */
#our-team, #prog-mod-over, #home-page { line-height: 1.4em; } /* different from IHL-HTMLfiles.CSS */


/* OUR TEAM PAGE */
#our-team { margin: -25px 0px 0px 0px; }
#our-team div.otmember {  box-shadow: 3px 3px 10px #888888; float: left; margin: 10px 10px; width: 425px; height: 180px; }
/*#our-team a { color: #000; text-decoration: none; } 
#our-team a:hover { text-decoration: underline; }*/
#our-team div.otmember p { padding-left: 5px; }
#our-team div.otmember h5 { font-weight: bold; font-size: 11pt; margin-top: 0px; margin-bottom: 5px; background-color: #e36159#; color: #fff; padding: 5px 0px 5px 5px; }
#our-team div.otmember img { float: right; margin-left: 4px; margin-top: -5px; height: 152px; width: 104px; border-radius: 0px; }
#our-team div.otmember ul { margin-left: -15px; }


/* PROGRAMME & MODULE OVERVIEW PAGE */
#prog-mod-over { margin: -25px 0px 0px 0px; }
#prog-mod-over h5 { margin-top: 10px; font-size: 12pt; } /* extra font-size needed here for PO page - not sure why! */
#prog-mod-over div.pohighlight-box { background-image: url(../images/highlight-border-top.jpg); background-repeat: repeat-x; padding: 10px 10px 0px 10px; color: #e36159#; background-color: #ded1e6; } 
#prog-mod-over div.pohighlight-box a { color: #e36159#; }
/* these 2 styles below are specific to the module overview pages */
#prog-mod-over #pmo-rightbox { width: 27%; float: right; margin-left: 10px; }
#prog-mod-over #pmo-leftbox { width: 70%; }


/* INFO & DATA TABLES (WHEN USED, WHICH SHOULD BE LITTLE) */
.infoTable { /*border: 1px solid #e36159#;*/ width: 95%; margin-left: auto; margin-right: auto; }
.infoTable td, .dataTable td { padding: 1px; }
.infoTable th, .dataTable th { color: #fff; background-color: #94609d; padding: 1px; }
.infoTable p, .dataTable p { margin: 5px; }


/* SIDE BY SIDE TEXT */
.SbS-box { display: table; margin-top: 10px; }
.SbS-box div.SbS-cell { display: table-cell; border-right: 1px solid #990066; width: 49%; padding: 0px 10px 0px 0px; }
.SbS-box div.SbS-cell:nth-child(2) { border-right: none; padding: 0px 0px 0px 10px; }
.SbS-box div.SbS-cell h5 { margin-top: 0px; }


/* COLOURS TEXT PURPLE */
.purple-text { color: #e36159#; }


/* FOR WHEN SHOWING UL (or OL) AS COLUMNS, NEEDED TO SHOW BULLETS ON ALL COLUMNS (NO. OF COLUMNS SPECIFIED INLINE) */
.ULcolumns { list-style-position: outside; column-gap: 25px; margin-bottom: 30px; } 
.ULcolumns li { margin-left: 1em; }

/* BOTTOM SPACING FOR LIST ELEMENTS */
ol li {margin-bottom: 20px;}
ul li {margin-bottom: 10px;}
ul li.dropdown-title, ul li.dropdown {margin-bottom: 0px;}


/* OPENING PARAGRPAH STYLE IF REQUIRED */
.open-para { color: #3398c4; font-size: 110%; font-weight: bold; /*width: 95%; text-align: center; display: block; margin-left: auto; margin-right: auto; margin-top: 0px;*/ }



/* MAINLY USED  AFTER LINKS (EG THE STUFF IN BRACKETS THAT SAYS STUFF LIKE OPENS IN NEW WINDOWS ETC.) */
.instruction-text { font-style: italic; font-size: 95%; }


/* STYLES FOR QUOTE, TIP & TASK CALLOUTS */
.quote, .tip, .task, .question  {
	color: #3398c4;
	padding-top: 30px !important;
	background-position: top left;
	background-repeat: no-repeat; 
	margin-left: 25px;
	padding-left: 5px;  
	/*min-height: 35px;*/
	border-left: 5px solid #e36159#;
}
.task { background-image: url(../images/icons/task-sm-purple.png); }
.tip { background-image: url(../images/icons/tip-sm-purple.png); }
.quote { background-image: url(../images/icons/quote-sm-single-purple.png); }
.question { background-image: url(../images/icons/question-sm-purple.png); }
.quote strong, .question strong { color: #e36159#; }


/* STYLES FOR THE HIGHLIGHT BOXES (!!ADDITIONAL MOBILE ONLY STYLE NEEDED AS WELL!!) */	
#highlight-box, #highlight-box-wide, #highlight-box-nofloat {
	/*border-top: 5px solid #e36159#;
	border-radius: 20px;*/
	background-image: url(../images/highlight-border-top.jpg);
	background-repeat: repeat-x;
	padding:  20px 20px 10px 20px;
	overflow: auto;
	color: #e36159#;
	background-color: #ded1e6; /*#b8e9ee;*/ /*#ccecef;*//*#9363a3;*/
	text-align: left;
	margin: 60px 0px;
	clear: both;
}
/*#highlight-box .quote, #highlight-box-wide .quote, #highlight-box-nofloat .quote { border-left: 0px; }*/
#highlight-box { width: 30%; float: right; margin-left: 15px; }
#highlight-box-wide, #highlight-box-nofloat { margin-left: 0px; display: block; margin-left: auto; margin-right: auto; }
#highlight-box-nofloat { width: 80%; } 
#highlight-box-wide { width: 95%; }
#highlight-box img { /* margin-bottom: 10px;*/  display: block; margin-left: auto; margin-right: auto;  }
#highlight-box h5, #highlight-box-wide h5, #highlight-box-nofloat h5 { padding-top: 0px; }

/* STYLES FOR THE HIGHLIGHT BOXES (!!ADDITIONAL MOBILE ONLY STYLE NEEDED AS WELL!!) === CLASS not ID === */	
.highlight-box, .highlight-box-wide, .highlight-box-nofloat {
	/*border-top: 5px solid #e36159#;
	border-radius: 20px;*/
	background-image: url(../images/highlight-border-top.jpg);
	background-repeat: repeat-x;
	padding:  20px 20px 10px 20px;
	overflow: auto;
	color: #e36159;
	background-color: #AE9E85; /*#b8e9ee;*/ /*#ccecef;*//*#9363a3;*/
	text-align: left;
	margin: 60px 0px;
	clear: both;
}
/*#highlight-box .quote, #highlight-box-wide .quote, #highlight-box-nofloat .quote { border-left: 0px; }*/
.highlight-box { width: 30%; float: right; margin-left: 15px; }
.highlight-box-wide, .highlight-box-nofloat { margin-left: 0px; display: block; margin-left: auto; margin-right: auto; }
.highlight-box-nofloat { width: 80%; } 
.highlight-box-wide { width: 95%; }
.highlight-box img { /* margin-bottom: 10px;*/  display: block; margin-left: auto; margin-right: auto;  }
.highlight-box h5, .highlight-box-wide h5, .highlight-box-nofloat h5 { padding-top: 0px; }


/* VARIOUS TYPES OF ALIGNING STYLES */
.img-float-right { float: right; padding-left: 5px; padding-bottom: 5px; }
.img-float-left { float: left; padding-right: 5px; padding-bottom: 5px; }
.img-middle-align { vertical-align: middle; padding: 0px 5px 0px 0px; }
.img-center-align { display: block; margin-left: auto; margin-right: auto; }
.portrait-float-left { float: left; text-align: center; padding: 0px 10px 10px 0px; }
.text-align-centre { text-align: center; }
.centreObject { margin-left: auto; margin-right: auto; }


/* VIDEO WRAPPER WHICH MAKES EMBEDDED VIDEOS (AND IFRAMES) RESPONSIVE TO SCREEN SIZE */
#video-wrap { width: 60%; height: 60%; clear: both;}
#prog-mod-over #video-wrap { width: 70%; height: 70%; } /* ALTERS VIDEO SIZE ON MODULE & PROGRAMME OVERVIEW PAGEs AS THE CONTAINERS THEY SIT IN ALSO ALTER THE WIDTH OF THE VIDEO */
#video-wrap div { position: relative; padding-bottom: 56.25%; /* 56.25 16-9 */ padding-top: 0px; height: 0; }
#video-wrap div iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#video-wrap p { margin-top: 0px;  text-align: center; }

/* VIDEO WRAPPER WHICH MAKES EMBEDDED VIDEOS (AND IFRAMES) RESPONSIVE TO SCREEN SIZE == CLASS not ID == */
.video-wrap { max-width: 60%; height: auto; clear: both;}
#prog-mod-over .video-wrap { max-width: 70%; height: auto; } /* ALTERS VIDEO SIZE ON MODULE & PROGRAMME OVERVIEW PAGEs AS THE CONTAINERS THEY SIT IN ALSO ALTER THE WIDTH OF THE VIDEO */
.video-wrap div { position: relative; padding-bottom: 56.25%; /* 56.25 16-9 */ padding-top: 0px; height: 0; }
.video-wrap div iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.video-wrap p { margin-top: 0px;  text-align: center; }

/* WRAPPER FOR EMBEDDED ISPRING MODULES */
#ispring-wrap-wide { width: 70%; height: 70%; }
#ispring-wrap-wide div { position: relative; padding-bottom: 56.25%; /* 56.25 16-9 */ padding-top: 0px; height: 0; }
#ispring-wrap-wide div iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#ispring-wrap-wide p { margin-top: 0px; text-align: center; }


/* STYLES ASSOCATED WITH VARIOUS TASK LINKS (THE ONES WITH THE CIRCLE ICONS), ALLOWS FOR TEXT WRAPPING WHILST STILL ALIGNING WITH CENTRE OF IMAGE */
#task-iconlink { max-width: 600px; height: 76px; padding: 5px 0px; display: table; }
#task-iconlink a { font-weight: bold; }
#task-iconlink img { padding-left: 5px; float: left; }
#task-iconlink div { display: table-cell; vertical-align: middle; padding-left: 20px; } /*position: relative; top: 50%; perspective: 1px; transform: translateY(-50%);*/ 
/* extra styles needed for homepage */
#home-page #task-iconlink { margin-left: auto; margin-right: auto; }
#home-page #task-iconlink div p { margin-top: -15px; }
#home-page #task-iconlink div h2 { margin-top: 0px; }
/* extra style needed for module overview pages */
#prog-mod-over #task-iconlink { height: 60px; }

/* STYLES ASSOCATED WITH VARIOUS TASK LINKS (THE ONES WITH THE CIRCLE ICONS), ALLOWS FOR TEXT WRAPPING WHILST STILL ALIGNING WITH CENTRE OF IMAGE */
.task-iconlink { max-width: 600px; height: 76px; padding: 5px 0px; margin-left: 20px;  display: table; }
.task-iconlink a { font-weight: bold; }
.task-iconlink img { padding-left: 5px; float: left; }
.task-iconlink div { display: table-cell; vertical-align: middle; padding-left: 20px; } /*position: relative; top: 50%; perspective: 1px; transform: translateY(-50%);*/ 
/* extra styles needed for homepage */
#home-page .task-iconlink { margin-left: auto; margin-right: auto; }
#home-page .task-iconlink div p { margin-top: -15px; }
#home-page .task-iconlink div h2 { margin-top: 0px; }
/* extra style needed for module overview pages */
#prog-mod-over .task-iconlink { height: 60px; }


/* STYLE FIRST USED ON M0-WK3_1.5 TO HOVER TEXT OVER AN IMAGE AND CHANGE OPACTIY OF IMAGE ON HOVER (!!ADDITIONAL MOBILE ONLY STYLE NEEDED AS WELL!!) */
div.imagetextfloats { margin-top: 30px; }
div.imagetextfloats ul { list-style: none; column-count: 3; margin-left: -5px; }
div.imagetextfloats a { color: #fff; text-decoration: none; }
div.imagetextfloats a:hover { text-decoration: underline; }
div.imagetextfloats img { width: 225px; height: 225px; position: relative; left: 20px; }
div.imagetextfloats img:hover { opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ }
div.imagetextfloats a div { background-color: #3398c4; font-weight: bold;  width: 150px; padding: 5px 0px; position: relative;  top: -60px; text-align: center; border-left: 8px solid #e36159#; }


/* NEXT/BACK BUTTONS IN FOOTER */
div#nextback { margin: 50px 0px; padding-top: 10px; border-top: 2px groove #ddd; clear: both;  }
div#nextback div.back { float: left; }
div#nextback div.next { float: right; }
div#nextback div span { font-weight: bold; color: #fff; background-color: #e36159#; padding: 2px; }


/* AMENDS SOME STYLINGS FOR OLDER SQUARE MONITORS - KEEP AT BOTTOM */
/* ======================================================================= */
@media only screen and (min-device-width : 1024px) and (max-device-width : 1280px)  {
#video-wrap { width: 70%; height: 70%; } 
#prog-mod-over #video-wrap  { width: 80%; height: 80%; }
#ispring-wrap-wide { width: 90%; height: 90%; }
    
.video-wrap { max-width: 70%; height: auto; } 
#prog-mod-over .video-wrap  { max-width: 80%; height: auto; }
}

/* MOBILE DEVICE STYLES - KEEP AT BOTTOM */
/* ======================================================================= */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  { /*and (-webkit-min-device-pixel-ratio: 2)*/
/* MAKES CHANGES TO THE VARIOUS HIGHLIGHT BOXES SO THAT ACT DIFFERENTLY ON SMALLER SCREENS, OFTEN NOT FLOATING LEFT AND CHANGING THE IMAGE FLOATS */
#highlight-box { float: none; width: 95%; margin-left: 0px; display: block; margin-left: auto; margin-right: auto; }
#highlight-box img { float: right; } 
#highlight-box-nofloat { width: 95%; }

/* RECDUCES THE IMAGE SIZE FOR THE SMALLER SCREEN (CURRENTLY ONLY USED ON m0-wk3_1.5.html) */
div.imagetextfloats img { width: 150px; height: 150px; }

/* SHIFTS THE BACKGROUND IMAGE OF THE TITLE BAR SO THAT THE BRIGHTER CIRCLES DON'T OBSCURE THE TEXT ON SMALLER SCREENS 
#content-title { background-position: 85% 0%; }*/

/* AMENDS THE SIZE OF THE STAFF IMAGES (& PURPLE BOX) ON THE MODULE OVERVIEW PAGES */
#prog-mod-over div.pohighlight-box p img { width: 75px; height: 108px; }

/*MAKES VIDEOS/ISPRINGS FILL THE SCREEN A BIT MORE ON SMALLER SCREENS, WHICH SOUNDS WEIRD I KNOW! */
#video-wrap { width: 80%; height: 80%; } 
#prog-mod-over #video-wrap  { width: 80%; height: 80%; }
.video-wrap { width: 80%; height: auto; } 
#prog-mod-over .video-wrap  { width: 80%; height: auto; }
    
#ispring-wrap-wide { width: 90%; height: 90%; }

/* REDUCES TEXT SIZE OF THESE TITLES IN ORDER TO BE MORE USER FRIENDLY 
#sptitle p, #home-page .hptitle p { font-size: 14pt; }
#sptitle h1, #home-page .hptitle h1 { font-size: 22pt; }*/

/* AMENDS THE SPACING THE CONTENT-TITLE HEADING TAGS ON THE CODE THAT IS PASTED INTO Bb (Bb's THEME IS MESSING AROUND WITH THESE), THESE MARGINS NEEDS TO BE SLIGHTLY DIFFERENT ON SMALL SCREEN FOR SOME REASON */
div #content-title h1 { margin-top: 0.5em; margin-bottom: -20px; }

}