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

/* otp_selector_grids.css v21.1 (07.01.21) */
/* W3C validated 31.08.20 */

/* 21.0 Original file from inline/onpage styling */
/* 21.1   */
/* 21.2   */


/* *****************  THIS FILE DOES NOT INCLUDE DRYHIRE SELECTOR GRIDS ***************** */



 @media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */
#r_contentWrapper { /* the new flex contentWrapper */
	/*position:relative;*/
	order:2;	/* Places it after the navbar */ /* Same for all layouts */
	/*display:flex;
	flex-direction:row ltr;
	flex-wrap:wrap;*/
	flex-direction:column; /* Different to body global */
	justify-content:flex-start;
	text-align:left; /* Different to body global */
	/*padding-top:40px;*/
	/*padding-bottom:40px;*/
	width:70%; /* 900/1366 = 66% of pageWrapper width / vw : let's go 70% */
	max-width:1000px; /* Added v20.5 to limit width on 1920 HD screens and above */
	/*margin:auto;*/
	/*border:2px dashed red;*/  /* DEV only */
    min-height:550px;
	}
}






/* Copied from global.css */
/* ////////////////////////////////  SELECTOR GRIDS (Based on Dryhire Selector) ///////////////// */
/* ////////////////////////////////  SELECTOR GRIDS (Based on Dryhire Selector) ///////////////// */


#imgGridWrapper,  /* Global, mobile-first, styling unless overridden below */
.imgGridWrapper {
	position:relative;
	order:3;
	display:inline-block;  
	width:100%; /* of r_contentWrapper for mobile screens */
	margin-top:0;
	margin-right:0;
	margin-bottom:30px;
	overflow:visible; /* To allow over-width list container to display at both edges */
	/*border:1px dotted fuchsia;*/  /* DEV only */
	}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */
#imgGridWrapper,
.imgGridWrapper {
	position:absolute; /* Has to be positioned independantly from the other content elements due to flex e-ordering for smaller screens */ 
    display:block;
    float:right; /* may not be necessary */
	order:3;
    right:0px;
	width:48%; /* of r_contentWrapper */ /* Was 475px before responsive layout  */
	height:auto; /* Override body_global */
	margin-top:30px; /* Better positioning over current background Roundel */
	margin-right:79px; /* Better positioning over current background Roundel */
	margin-bottom:30px; /* To create visual break above footer */
	/*border:1px dashed fuchsia;*/  /* DEV only */
   	}
}
 
.selectorMainGrid { /* The ul flex container */ /* Global, mobile-first, styling unless overridden below */
	position:relative;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
	width:110%; /* Allow the grid to fill the width of smaller screens without affecting other element widths */
    left:-5%;  /* Compensate for the grid growing 10% to the right from line above */
	padding:0;
	margin:0;
	/*border:1px dotted white;*/  /* DEV only */
	}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px from css */
.selectorMainGrid { /* The ul flex container */
	position:relative;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
	width:100%;
    left:-5px; /* Better centering over background Roundel */
    /*border:1px dashed white;*/  /* DEV only */
	}
}


li.selectorSubCat { /* The list item default link object, mobile-first, styling */
	position:relative;
	display:block;
	width:32%; /* Can make them a bit bigger now flex is spacing without need for margins */
	height:0;  /* Maintains aspect ratio of selector boxes using vertical padding in percentages is based on width */
	padding-top:32%;
	margin-right:0; /* Let flex space it */
	margin-bottom:7px;
	margin-left:0; /* Let flex space it */
	background-size:cover; /* best fit for pics being used */
	background-position:left center;
	border-top:1px solid #003399; /* Dark blue */
	border-left:1px solid #003399; /* Dark blue */
	border-bottom:2px solid #222222; /* NOTE! This 2px border must be repeated below in order to prevent movement on hover */
	list-style-type:none;
	/*overflow:visble;*/  /* DEV only */
    /*border:1px solid red;*/ /* DEV only */
	}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px from css */
li.selectorSubCat { /* The list item */
	width:151px; /* Stay with fixed widths for now */
    width:152px; /* Increase to fit longer link text */
	height:145px; /* Stay with fixed heights for now */
	padding:0; /* Override padding settings in default styling above */ 
	border-bottom:2px solid #000000; /* Override grey bottom border above and go to black for wider screens */
	/*overflow:hidden;*/
	}
}

.selectorLinkText {	 /* The arrow bullet and text positioned on a tinted background within and at the bottom of the link obect */
	position:absolute;
	display:block;
	height:20px;
    bottom:0px; /* Puts it at the bottom of the selector button */
    /*padding-top:2px;
    padding-left:0;
	padding-bottom:0px;*/
	color:#ffffff;
	font-weight:bold;
	font-size:0.8em; /* Make it smaller for smaller screens */
	background-image:url(/images-nav/png/navDropBackground.png);
    background-position:3px 3px; /* Move the dart to the right and down for smaller screens */
    /*left:-5px;*/ /* Move the text to the left for smaller screens */
    width:105%;  /* Compensate for the shift left above */
	text-decoration:none;
	border-bottom:1px solid #000000; /* Tidies up the bottoms */
    border-left:1px solid #003399; /* Dark blue */
	}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */    
.selectorLinkText {	 /* The text positioned within and at the top of the link obect */
	padding:4px; /* Overrides padding from styling above */
	font-size:1.0em;
    background-position:0 0; /* Move the dart back to its zero position */
    left:0; /* Move the text back to its zero position */
    width:100%;  /* Counteract the width increase above */
    /*left:-2px;*/ /* Adjust it to the left to prevent tight RHS */
	} 
}


.selectorSubCat a /* alternative addressing */
/*a.selectorSubCatLink*/ { /* The active link area within the link object */
	position:absolute;
	display:block;
	bottom:0;
	top:0px;
	padding-top:0;  /* Override above? */
	width:100%;
	}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px from css */
a.selectorSubCatLink {
	/* no differences */
	}
}

/* Highlighting when hovering */

.selectorSubCatLink:hover {
    border-top:1px solid #3366FF; /* blue */
	border-left:1px solid #3366FF; /* blue */
}

.selectorSubCatLink:hover > .selectorLinkText { /* Maintains static positioning of the link text when hovering over the selector link area */
    border-left:none; /* Counteracts the effect of adding a 1px border to the link area  */
    color:#f5a300; /* orange */
	background-color:#000000;
    }

/* Highlighting when tabbing (focusing) */

.selectorSubCatLink:focus {
    border-top:1px solid #3366FF; /* blue */
	border-left:1px solid #3366FF; /* blue */
}

.selectorSubCatLink:focus > .selectorLinkText {
    border-left:none; /* Keeps the linkText static on hovering and focus */
    color:#f5a300; /* Highlight the text orange */
	background-color:#000000;
}


/* ///////////////////////////////////// END SELECTOR STYLING ////////////////////////////////////////// */