/*STYLE SHEET FOR ORIGINTECHNICALPRODUCTIONS.CO.UK */
/* LAST EDITED BY: PETER COX */

/* otp_footer.css v21.0 (15.01.21) */
/* W3C validated dd.mm.20 */

/* VERSION NOTES: */
/* v20.1 : fixed measures removed to their own file */
/* v20.2 : border around banner added / "Mobile first" so 'max 370px' specs removed */
/* v20.3 : r_footerWrapper given order for mobile and >799px */
/* v20.4 : works but is not strictly correct */
/* v20.5f: fails */
/* v20.6 : retry starting with 20.4 clean-up */
/* v20.7 : max width limit set for wider screens (r_footerContainer & #r_creditFooterContainer) */
/* v21.0 : Instagram icon added to replace Pinterest icon */

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ FOOTER STYLING \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ FOOTER STYLING \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

/* Should be common across all site pages */

/* For mobile first */
#r_footerWrapper { /* Container for otpFooter - see below for creditFooter */
	/* remember there's a -44px displacement due to backgroundHolder being hoisted up under the topLight */
	order:3; /* Should place it under accessmenu and above creditFooter */
	position:relative;
	display:block;
	width:100%; /* of pageWrapper */
	padding-top:10px;
	background-color:#000000;
	/*border:1px solid green;*/ /* DEV only */
	}

@media only screen and (min-width: 799px) { /* For screen widths down to 799px wide: Tablet vertical*/
#r_footerWrapper { /* Container for otpFooter & creditFooter */
	/* remember there's a -44px displacement due to backgroundHolder being hoisted up under the topLight */
	order:4;
	/*max-width:1000px;*/ /* Added v20.5 to limit width on 1920 HD screens and above */
	/*border:1px solid green;*/ /* For dev only */
	}
}

/* ////////////////////////////////////////// FOOTER CONTAINER ///////////////////////////////////////////*/
/* ////////////////////////////////////////// FOOTER CONTAINER ///////////////////////////////////////////*/
/* ////////////////////////////////////////// FOOTER CONTAINER ///////////////////////////////////////////*/

	
#r_otpFooterContainer { /* For screen widths up to 370px wide */
	position:relative;
	display:flex;
	flex-direction:column;	
	width:94%;
	margin:auto;
	min-height:56px;
	color:#006eff;
	font-size:1.0em;
	padding-top:10px;
	/*border:1px dotted yellow;*/ /* DEV only */
	}

@media only screen and (min-width: 370px) { /* For screen widths above 370px wide */
#r_otpFooterContainer { 
	width:90%; 
	border:0px dotted yellow; /* For dev only */
	}
}
	
@media only screen and (min-width: 600px) { /* For screen widths above 600px wide */
#r_otpFooterContainer { 
	width:90%; 
	border:0px dotted yellow; /* For dev only */
	}
}

@media only screen and (min-width: 900px) { /* For screen widths above 900px wide */
#r_otpFooterContainer { 
	position:relative;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
	width:80%;
	max-width:1100px; /* Added v20.5 to limit width on 1920 HD screens and above */
	/*border:1px dotted cyan;*/ /* For dev only */
	}
}
	
#r_addressContainer { /* For screen widths up to 370px wide */
	position:relative;
	order:2;
	line-height:1.5em;
	width:100%;
	font-weight:bold;
	font-size:1.4em;
	text-align:left;
	margin-bottom:30px;
	/*float:left;*/
	border:0px solid red;
	/*background-color:#999933;*/ /* For dev only */
	}
	
@media only screen and (min-width: 370px) { /* For screen widths above 370px wide */
#r_addressContainer { 
	width:100%; 
	border:0px solid red; /* For dev only */
	}
}
	
@media only screen and (min-width: 600px) { /* For screen widths above 600px wide */
#r_addressContainer {
	/*order:1;*/ 
	width:90%; 
	font-size:1.2em;
	border:0px solid red; /* For dev only */
	}
}
	
@media only screen and (min-width: 900px) { /* For screen widths above 900px wide */
#r_addressContainer { 
	order:1;
	max-width:45%;
	font-size:1.2em;
	margin-bottom:0px;
	border:0px solid red; /* For dev only */
	}
}

/* This bit needs sorted */

@media only screen and (max-width: 900px) { /* For screen widths up to 600px wide */
#r_datelineContainer { /* Holds the Copyright statement, the Day-Date-Time string and the Co. Reg Number */
	position:relative;
	order:3;
	width:100%;
	font-size:0.8em;
	padding-top:10px;
	border:0px solid yellow; /* For dev only */
	}
}

@media only screen and (min-width: 900px) { /* For screen widths above 900px wide */
#r_datelineContainer { /* Holds the Copyright statement, the Day-Date-Time string and the Co. Reg Number */
	position:relative;
	font-size:0.8em;
	padding-top:10px;
	border:0px solid yellow; /* For dev only */
	}
}

/* ///////////////////////////////////// ICON BUTTON LINKS ///////////////////////////////////////////// */
/* ///////////////////////////////////// ICON BUTTON LINKS ///////////////////////////////////////////// */

#r_SMlinkContainer { /* For screen widths up to 370px wide */
	position:relative;
	order:1;
	display:flex;
	flex-direction:row;
	height:50px;
	min-width:200px;
	margin-top:15px;
	border:0px dashed lime; /* DEV only */
	}
	
@media only screen and (max-width: 900px) { /* For screen widths up to 900px wide */	
#r_SMlinkContainer { 
	position:relative;
	order:2;
	width:100%;
	min-width:200px;
	border:0px solid magenta; /* DEV only */
	}
}

@media only screen and (min-width: 900px) { /* For screen widths above 900px wide */	
#r_SMlinkContainer { 
	position:relative;
	order:2;
	min-width:auto;	
	margin-top:10px;
	border:0px solid lime; /* DEV only */
	}
}	


a.emailLink, a.emailLink:visited, a.emailLink:active  { 
	position:relative;
	order:1;
	width:35px;
	height:35px;
	margin-right:15px;
	background-image:url(/images09/png24/emailicon-70.png);
	background-repeat:no-repeat;
	border:0px solid fuchsia; /* DEV only */
	}	
a.emailLink:hover, a.emailLink:focus {
	background-image:url(/images09/png24/emailicon.png);
	background-repeat:no-repeat;
	}

a.facebookLink, a.facebookLink:visited, a.facebookLink:active  { 
	position:relative;
	order:2;
	width:35px;
	height:35px;
	margin-right:15px;
	background-image:url(/images-site/png/facebookicon-70.png);
	background-repeat:no-repeat;
	border:0px solid fuchsia; /* DEV only */
	}	
a.facebookLink:hover, a.facebookLink:focus {
	background-image:url(/images-site/png/facebookicon.png);
	background-repeat:no-repeat;
	}
	
a.instagramLink, a.instagramLink:visited, a.instagramLink:active  { 
	position:relative;
	order:3;
	width:35px;
	height:35px;
	background-image:url(/images-site/png/instagramicon-70.png);
	background-repeat:no-repeat;
	border:0px solid fuchsia; /* DEV only */
	}	
a.instagramLink:hover, a.instagramLink:focus {
	background-image:url(/images-site/png/instagramicon.png);
	background-repeat:no-repeat;
	}

/* ///////////////////////////////////// END ICON BUTTON LINKS ///////////////////////////////////////////// */


/* ///////////////////////////////////// FOOTER ANNOUNCEMENT BANNER ///////////////////////////////////////////// */
/* ///////////////////////////////////// FOOTER ANNOUNCEMENT BANNER ///////////////////////////////////////////// */
/* ///////////////////////////////////// FOOTER ANNOUNCEMENT BANNER ///////////////////////////////////////////// */


/* Mobile first: */
#r_footerAnnouncementBanner { /* the Container, not the image */
	position:relative;
	order:1;
	width:100%;
	max-width:400px;
	/*height:100px;*/ /* This may need to be minimal (or a min setting) when there is no Announcement content */
	margin-bottom:10px;
	border:0px dotted yellow; /* DEV only */
	}
@media only screen and (min-width: 900px) { /* For screen widths above 900px wide */	
#r_footerAnnouncementBanner { /* the Container, not the image */
	position:relative;
	order:1;
	min-width:400px;
	max-width:400px;
	/*max-height:60px;*/ /* Let's override this and see if the Office Hours announcement will work in here */
	height:120px;
	/*border:1px dotted magenta;*/ /* DEV only */
	}
}

#r_footerAnnouncementBanner img { /* the image */
	width:100%;
	/*width:440px;*/ /* as a standard when possible */
	border:1px solid #999999;
	/*margin-bottom:10px;*/ /* Do this on the container, not the image */
	}


.textAnnouncementBanner {
	width:100%;
	max-width:400px; /* Added 11.09.20 */
	padding:10px;
	color:#ff9900;
	font-size:1.2em;
	line-height:1.6em;
	border:1px dotted #ff9900;
	margin-top:10px;
	}



/* ///////////////////////////////////// END FOOTER ANNOUNCEMENT BANNER ///////////////////////////////////////// */

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ END FOOTER STYLING \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ END FOOTER STYLING \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */


	
/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ CREDIT FOOTER  \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ CREDIT FOOTER  \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ CREDIT FOOTER  \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/

/*@media only screen and (max-width: 370px) {*/ /* For screen widths up to 370px wide */	
/* Mobile first: */
#r_creditFooterContainer {
	/*width:900px;*/
	order:5;
	position:relative;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	width:66%; /* 900/1366 */
	width:80%;
	margin:auto;
	margin-top:10px;
	margin-bottom:10px;
	padding-top:10px;
	border-top:1px solid #003780;
	/*border:1px dotted cyan;*/ /* For dev only - overwrites the top blue rule */
	}
/*}*/

@media only screen and (min-width: 370px) { /* For screen widths above 900px wide */	
#r_creditFooterContainer {
	justify-content:space-between;
	margin-top:30px;
	padding-top:25px;
	/*border:0px dotted cyan;*/ /* DEV only - overwrites the top blue rule */
	/*border-top:1px solid #003780;*/
	}
}


@media only screen and (min-width: 900px) { /* For screen widths above 900px wide */	
#r_creditFooterContainer {
	justify-content:space-between;
	width:66%; /* 900/1366 */
	max-width:1200px; /* Added v20.5 to limit width on 1920 HD screens and above */
	padding-top:25px;
	/*border:0px dotted cyan;*/ /* DEV only - overwrites the top blue rule */
	/*border-top:1px solid #003780;*/
	}
}
	
#r_creditFooterContainer a.credit,
#r_creditFooterContainer a.credit:visited,
#r_creditFooterContainer a.credit:active {
	 order:2;
	 color:#FFFFFF;
	 text-decoration:none;
	 margin-bottom:30px;
	 border:0px solid yellow; /* DEV only */
	 }


@media only screen and (min-width: 370px) { /* For screen widths up to 370px wide */	
#r_creditFooterContainer a.credit,
#r_creditFooterContainer a.credit:visited,
#r_creditFooterContainer a.credit:active {
	 order:1;
	 color:#FFFFFF;
	 text-decoration:none;
	 margin-bottom:30px;
	 border:0px solid yellow; /* DEV only */
	 }
}

@media only screen and (min-width: 900px) { /* For screen widths above 900px wide */	
#r_creditFooterContainer a.credit,
#r_creditFooterContainer a.credit:visited,
#r_creditFooterContainer a.credit:active {
	 order:1;
	 color:#FFFFFF;
	 text-decoration:none;
	 margin-bottom:30px;
	 border:0px solid yellow; /* DEV only */
	 }
}

	 
img#pcdsCreditlogo {
	float:left;
	margin-right:10px;
	}
		
#valicons {
	order:1;
	width:180px;
	height:35px;
	margin-bottom:15px;
	border:0px dotted red; /* DEV only */
	}


@media only screen and (min-width: 370px) { /* For screen widths up to 370px wide */			
#valicons {
	order:2;
	width:180px;
	height:35px;
	margin-bottom:15px;
	border:0px dotted red; /* DEV only */
	}
}


@media only screen and (min-width: 900px) { /* For screen widths above 900px wide */		
#valicons {
	order:2;
	width:180px;
	height:35px;
	margin-bottom:15px;
	border:0px dotted red; /* DEV only */
	}
}
	
img#xhtml88 {
	float:left;
	width:88px;
	height:31px;
	}
img#css88 {
	float:right;
	width:88px;
	height:31px;
	}

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ END CREDIT FOOTER  \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/