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

/* otp_header.css v20.3 (26.08.20) */
/* W3C validated 31.08.20 */



/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ HEADER STYLING \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ HEADER STYLING \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

/* Should be common across all site pages */


/* ////////////////////////////////////////// HEADER CONTAINER ///////////////////////////////////////////*/
/* ////////////////////////////////////////// HEADER CONTAINER ///////////////////////////////////////////*/
/* ////////////////////////////////////////// HEADER CONTAINER ///////////////////////////////////////////*/

	
/* Styling for ALL widths unless overidden above 798px */
#r_headerWrapper { /* Provides a boundary for all the Header components */
	order:1; /* The Header is the first item in the page layout on small screens */
	position:relative;
	display:block;
	width:100%; /* Of the width of pageWrapper */
	/*min-height:150px;*/
	background-color:#000000;
	z-index:200;
	/*border:1px solid red;*/ /* For dev only */
	}

/*@media only screen and (min-width: 799px) {*/ /* NEED TO CHECK IMPLICATION OF 'media all' - BELOW */	
@media all and (min-width: 799px) { /* Modifications to style at widths above 799px */
#r_headerWrapper { /* Provides a boundary for all the Header components */
	order:2; /* The Access Bar is the first page item at the top of the screen at widths above 799px */
	/*position:relative;
	width:100vw;*/
	/*min-height:150px;*/
	/*background-color:#000000;
	z-index:200;*/
	/*border:1px solid cyan;*/ /* For dev only */
	}
}



/* ///////////////// MASTHEAD CONTAINER ///////////////////// */

/* Styling for ALL widths unless overidden above 798px */
#r_mastheadContainer { /* Container for OTP Masthead and Nav Bar includes */
	position:relative;
	display:flex;
	flex-direction:row;
	justify-content:center;
	/*min-width:500px;*/
	/*width:830px;*/
	/*width:900px;*/
	/*max-width:960px;*/
	/*max-width:70%;*/ /* 960/1366 */
	/*width:98vw;*/ /* for mobile */
	height:50px; /* THIS NEEDS ASSESSED */
	margin:auto;
	padding-top:5px;
	/*margin-bottom:20px;*/ /* pushes topLight down independently to menu text! */
	/*min-height:70px;*/
	color:#FFFFFF;
	/*border:1px dotted yellow;*/ /* For dev only */
	/*background-color:#999999;*/  /* DEV only */
	}


@media only screen and (min-width: 370px) { /* For screen widths down to 370px wide */
#r_mastheadContainer { /* Container for OTP Masthead and Nav Bar includes */
	position:relative;
	display:flex;
	flex-direction:row;
	justify-content:center;
	/*min-width:500px;*/
	/*width:830px;*/
	/*width:900px;*/
	/*max-width:960px;*/
	/*max-width:70%;*/ /* 960/1366 */
	/*width:98vw;*/ /* for mobile */
	height:80px; /* THIS NEEDS ASSESSED */
	margin:auto;
	/*margin-bottom:20px;*/ /* pushes topLight down independently to menu text! */
	min-height:70px;
	color:#FFFFFF;
	/*border:1px dotted magenta;*/ /* For dev only */
	/*background-color:#666666;*/  /* DEV only */
	}
}

@media only screen and (min-width: 600px) { /* For screen widths down to 600px wide: Samsung wide */
#r_mastheadContainer { /* Container for OTP Masthead and Nav Bar includes */
	/*position:relative;
	display:flex;
	flex-direction:ltr;
	justify-content:center;
	width:95vw;*/ /* for mobile */
	/*max-width:72%;*/ /* 960/1366 */
	/*max-width:86%; 
	max-width:94%;
	height:90px;*/ /* THIS NEEDS ASSESSED */
	/*margin:auto;
	min-height:70px;
	color:#FFFFFF;
	border:1px dotted cyan;*/ /* For dev only */
	/*background-color:#333333;*/  /* DEV only */
	}
}

@media only screen and (min-width: 799px) { /* For screen widths down to 800px wide: Tablet vertical*/
#r_mastheadContainer { /* Container for OTP Masthead and Nav Bar includes */
	position:relative;
	display:flex;
	flex-direction:row;
	justify-content:center;
	/*width:95vw;*/ /* for mobile */
	/*max-width:82%;*/ /* 960/1366 */
	/*max-width:90%;*/
	height:90px; /* THIS NEEDS ASSESSED */
	margin:auto;
	/*margin-bottom:20px;*/ /* pushes topLight down independently to menu text! */
	min-height:70px;
	color:#FFFFFF;
	/*border:1px dashed yellow;*/ /* DEV only */
	}
}


/* ////////////////////////////////  HEAD ROUNDEL ////////////////////////////////////// */

/* Styling for ALL widths unless overidden above 798px */
#headRoundel { /* The Roundel image : Stays original graphic size (111px) on all platforms */
	position:relative;
	order:1;
	top:-2px;
	z-index:50; /* Needs to sit over the toplight strip */
	/*width:18%;*/ /* Reduce the size of the roundel on small screens to 20% of the Container */
	height:140%; /* So height / size of Roundel is relatively larger than actual graphic size */
	border:0px dashed green; /* For dev only */
	}

@media only screen and (min-width: 799px) { /* For screen widths down to 600px wide: Samsung wide */
#headRoundel { /* The Roundel image : Stays original graphic size (111px) on all platforms */
	position:relative;
	order:1;
	top:-2px;
	left:-15%;
	z-index:50;
	/*width:111px;*/ /* Reduce the size of the roundel on small screens to 20% of the Container */
	height:111px;
	/*border:1px solid green;*/ /* For dev only */
	}
}	

@media only screen and (min-width: 1300px) { /* For screen widths down to 600px wide */
#headRoundel { /* The Roundel image : Stays original graphic size (111px) on all platforms */
	position:relative;
	order:1;
	top:-2px;
	z-index:50;
	/*left:-15%;*/
	/*width:111px;*/ /* Reduce the size of the roundel on small screens to 20% of the Container */
	height:111px;
	/*border:1px dotted green;*/ /* For dev only */
	}
}	


/* ////////////////////////////////  OTP TITLE  ////////////////////////////////////// */

/* Styling for ALL widths unless overidden by styling below */	
#r_otpTitle { /* The image - still only referenced within the include file */
	position:relative;
	order:2;
	/*padding-left:2px;*/
	/*width:79%;*/ /* Of the Container */
	width:116%;
	width:98%; /* Of the space available */
	width:115%;
	margin-left:-42px; /* Unlike 'left' this doesn't leave the line at the original width */
	top:15px;
	margin-bottom:10px; /* Creates black space between strapline and topLight */
	/*padding-bottom:5px;*/
	border:0px solid teal; /* For dev only */
	}


@media only screen and (min-width: 370px) { /* For screen widths down to 370px wide: narrowest reduction on desktop  */
#r_otpTitle { /* The image - still only referenced within the include file */
	position:relative;
	order:2;
	padding-left:1%;
	width:95%; /* Of the space available */
	top:25px;
	margin-left:-2%;
	margin-bottom:10px; /* Creates black space between strapline and topLight */
	/*border:1px solid teal;*/ /* For dev only */
	}
}

@media only screen and (min-width: 600px) { /* For screen widths above 900px wide */
#r_otpTitle { /* The image - still only referenced within the include file */
	margin-left:10px;
	}
}

@media only screen and (min-width: 799px) { /* For screen widths above 900px wide */
#r_otpTitle { /* The image - still only referenced within the include file */
	position:relative;
	order:2;
	padding-left:4%;
	/*padding-left:4%px;*/
	/*width:82%;*/
	width:85%; /* This breaks on wide tablet */
	width:80%; /* of its own original size, with Flex? */
	width:100%;
	top:25px;
	margin-left:0;
	margin-bottom:10px;  /* Creates black space between strapline and topLight */
	/*padding-bottom:20px;*/
	/*border:1px solid teal;*/ /* For dev only */
	}
}