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

/* otp_dryhire.css v23.3 (13.09.23) */
/* W3C validated 13.09.23 */

/* 20.0 First created */
/* 20.1 */
/* 20.2 */
/* 20.3 */
/* 20.4 */
/* Table styles added from main css file */
/* 20.5 Styles inserted from updated Sound and Lighting files */
/* 23.0 : color: #white corrected to #ffffff , line 621

/* ////////////////////////////////// DRY HIRE /////////////////////////////////// */


/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ LISTING TABLE ////////////////////////////////// */

/*#imgGridWrapper table {
	width:100%;
	width:475px;
	border-collapse:separate;
	text-align:left;
	border-bottom:1px dotted #FF9900;
	margin-bottom:10px;
	}*/
	
/*#imgGridWrapper table caption,
#imgGridWrapper table caption.vat {	
	position:relative;
	display:block;
	left:150px;
	float:right;
	font-weight:normal;
	line-height:1.2em;
	color:#FF9900;
	}*/
	
/*#imgGridWrapper table tr {
	line-height:1.2em;
	color:#FF9900;
	font-weight:bold;
	}*/
	
/*#imgGridWrapper table th {
	border-top:0px dotted #FF9900;
	padding-left:5px;
	text-align:left;
	line-height:1.2em;*/
	/*width:80px;*/
	/*}*/

/*#imgGridWrapper table th:first-child {	
 	font-size:1.4em;
	width:auto;
	}*/	
	
/*#imgGridWrapper table td {
	border-top:1px dotted #FF9900;
	padding-left:5px;
	color:#ffffff;
	font-weight:normal;
	height:20px;
	}*/

/*#imgGridWrapper table td.unavailable {
	color:#888888;
	cursor:pointer;
	}*/

a.dhSubCatLink, a.dhSubCatLink:visited, a.dhSubCatLink:active,
a.dhMainCatLink, a.dhMainCatLink:visited, a.dhMainCatLink:active {
	/*background-image:url(/images12/png/navDropBackground.png);*/
	}

a.dhSubCatLink:hover, a.dhSubCatLink:focus,
a.dhMainCatLink:hover, a.dhMainCatLink:focus{
	/*background-image:none;*/
	}
	
a.infoLink, a.infoLink:visited, a.infoLink:active {
	position:relative;
	display:block;
	height:19px;
	text-indent:-9999px;
	background-image:url(/images12/png/info-blue.png);
	background-position:8px 2px;
	background-repeat:no-repeat;
	}
a.infoLink:hover, a.infoLink:focus {
	background-image:url(/images12/png/info-orange.png);
	}

.listingThumbnailHolder {
	position:relative;
	float:left;
	width:60px;
	margin-top:2px;
	margin-right:5px;
	margin-bottom:2px;
    margin-bottom:10px;
	z-index:600;
    /*border:1px solid yellow;*/ /* DEV only */
	}

.listingThumbnail {
	float:left;
	margin-top:2px;
	margin-right:5px;
    margin-right:0;
    width:100%; /* Of container */
    /*border:1px solid red;*/ /* DEV only */
	}

.thumbnail2 {
	position:absolute;
	width:285px;
	/*height:150px;*/
	height:220px;
	left:-9999px;
	/* Line below needs to be on the page for each item in the display loop */
	/*background-image:url(/images12/png/dryhire/M290-Truss-Straight-h.png);*/
	background-position:bottom right;
	background-repeat:no-repeat;
	/*border:1px solid cyan;*/
	}

img.Thumbnail2 {
	position:absolute;
	left:-9999px;
	display:inline;
	text-align:right;
	}
	
.listingThumbnailHolder:hover img.Thumbnail2 {
	left:60px;
	left:-280px;
	bottom:5px;
	bottom:-50px;
	border:1px solid white;
	}
	
.listingThumbnailHolder:hover .thumbnail2 {
	/*left:60px;*/
	left:-310px;
	bottom:-10px;
	}	
		
/*.listingText {
	position:relative;
	float:left;
	display:block;
	width:215px;
	top:3px;
	margin-bottom:5px;
	}*/

/* ************************************** DRYHIRE GRID from Sound index page ****************************** */

.dryHireGrid,
.dryHireMainGrid { /* The ul flex container */
	position:relative;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
	justify-content:flex-start;
	align-content:flex-start;
	/*height:400px;*/
	/*min-height:400px;*/
	width:100%;
	padding:0;
	margin:0;
	/*margin-bottom:60px;*/
	/*left:-5px;*/	
	/*border:1px dotted white;*/  /* DEV only */
	}	
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px from css */
.dryHireGrid,
.dryHireMainGrid { /* The ul flex container */
	width:494px;
	width:100%;
	}
}

li.dhSubCat {  /* The list item default styling */
	position:relative;
	display:block; 
	width:89px;
	width:30%; /* 30% of whatever the containing ul is */
	height:74px;
	height:0;  /* Maintains aspect ratio of selector boxes using vertical padding in percentages is based on width */
	padding-top:30%;
	margin-right:4px;
	margin-bottom:7px;
	margin-left:4px;
	background-size:cover; /* best fit for pics being used */
	background-position:center center;
	background-position:left bottom;
	background-position:left top;
	background-position:right top; /* Definitely not */
	background-position:right bottom; /* Nope */
	background-position:left center;
	border-top:1px solid #003399;
	border-left:1px solid #003399;
	border-bottom:2px solid #000000;
	list-style-type:none;
	overflow:hidden;
	}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px from css */
li.dhSubCat { /* The list item */
	position:relative;
	display:block;
	width:89px;
	height:74px;
	height:89px; /* May ned to adjust this back towards 74 - see the Lx grid */
	margin-right:3px;
	margin-bottom:6px;
	margin-left:3px;
	padding:0;
	background-size:cover; /* best fit for pics being used */
	background-position:center center;
	background-position:left bottom;
	background-position:left top;
	background-position:right top; /* Definitely not */
	background-position:right bottom; /* Nope */
	background-position:left center;
	border-top:1px solid #003399;
	border-left:1px solid #003399;
	border-bottom:2px solid #000000;
	list-style-type:none;
	overflow:hidden;
	}
}

.dhSubCat:hover{ /* Controls mouseover hover behaviour on border highlights */
	border-top:1px solid #3366FF; /* blue */
	border-left:1px solid #3366FF; /* blue */	
	}

.dhSubCat:hover > .dhSubCatLink { /* Hovering over .dhSubCat list item changes the styling of the link .dhSubCatLink */
	color:#f5a300; /* orange */
	background-color:#000000;
	}

.borders { /* Additional 'invisible' element to mimick border behaviour of parent element on focus of sibling */
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:1px solid transparent;
	overflow:visible;
	z-index:100;
	}
	
.dhSubCat .dhSubCatLink:focus > .borders { /* Tab focus on the text link affects the styling of sibling borders */
	border-top:1px solid #3366FF; /* blue */
	border-left:1px solid #3366FF; /* blue */
	}

.linkText {	 /* The text positioned within and at the top of the link obect */
	position:absolute;
	display:inline-block;
	/*height:20px;*/
	/*width:151px;*/
	width:100%;
	/*bottom:0px;*/
	top:0px;
	/*left:-1px;*/  /* Fine tuning of position */
	padding:4px;
	/*padding-bottom:0px;*/
	font-weight:bold;
	font-size:1.2em;
	font-size:1.1em; /* Slightly smaller than top level selector */
	background-image:url(/images12/png/navDropBackground.png);
	text-decoration:none;
	color:#ffffff;
	/*border-bottom:1px solid #000000;*/ /* Tidies up the bottoms */
	}
	
.dhSubCat a:hover > .linkText,  /* Hovering over .dhSubCat changes the styling of .linkText */
.dhSubCat a:focus > .linkText { /* Tabbing to focus on .dhSubCat changes the styling of .linkText */
	color:#f5a300; /* orange */
	background-color:#000000;
	}


	
/* *************************************  Dryhire Listing Page and Table from Sound index ****************************************** */

.subCatTitleImage {
	width:100%;
	border-top:1px solid #003399;
	border-left:1px solid #003399;
	border-bottom:2px solid #000000;
	margin-bottom:15px;
	}


/* ///////////////////////////////  MASTER GLOBAL listingTable styling 22.12.2020 ///////////////////// */


/*#imgGridWrapper table,
.imgGridWrapper table,*/
.listingTable {
	position:relative;
	left:-3%;
	width:106%;  /* Of imgGridWrapper */
	border-collapse:separate;
	border-spacing:3px 2px;
	text-align:left;
	border-bottom:1px dotted #FF9900;
	margin-bottom:10px;
	/*border:1px dotted yellow;*/ /* DEV only */
	}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px from css */
/*#imgGridWrapper table,
imgGridWrapper table,*/
.listingTable {
	left:0;
	width:100%;
	/*width:475px;*/
	border-collapse:separate;
	/*border:1px dashed yellow;*/  /* DEV only */
	}
}


/*#imgGridWrapper table caption,
#imgGridWrapper table caption.vat*/
.listingTable caption,
.listingTable caption.vat {	
	position:relative;
	display:block;
	left:150px;
	float:right;
	font-weight:normal;
	line-height:1.2em;
	color:#FF9900;
	}

/*#imgGridWrapper table tr */
.listingTable tr {
	/*line-height:1.2em;
	color:#FF9900;*/
	/*font-weight:bold;*/
	}
	
/*#imgGridWrapper table th */
.listingTable th {
	border-top:0px dotted #FF9900;
	padding-left:5px;
	text-align:left;
	line-height:1.2em;
	color:#FF9900;
	/*width:80px;*/
	}

/*#imgGridWrapper table th:first-child */
.listingTable th:first-child {	/* Sizes the tableHead text */
 	font-size:1.4em;
	width:auto;
	}

/*#imgGridWrapper table td */ 
.listingTable td {
	border-top:1px dotted #FF9900;
	padding-left:5px;
	color:#ffffff;
	font-weight:normal;
	height:20px;
	/*background-color:#660066;*/  /* DEV only */
	}

/*#imgGridWrapper table td.unavailable*/
.listingTable td.unavailable {
	color:#888888;
	cursor:pointer;
	}

.listingText {  
	position:relative;
	float:left;
	display:block;
	width:215px;
	width:62%;
	top:3px;
	margin-bottom:5px;
	line-height:1.4em;
	/*background-color:#003300;*/ /* DEV only */
	}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px from css */
.listingText {
	position:relative;
	float:left;
	display:inline-block;
	/*width:215px;*/
	width:76%;
    /*width:50%;*/ /* DEV */
	top:3px;
	margin-bottom:5px;
    /*color:red;*/ /* Dev only */
	/*background-color:#003300;*/ /* DEV only */
	}
}


.subHead {
	font-size:75%;
	font-weight:normal;
	}

/* subHead is the test entry, not the table cell */
th.item {
	width:40%;
	width:36%;
	/*font-size:75%;
	font-weight:normal;*/
	/*background-color:#CC0000;*/  /* DEV only */
	}	
th.info {
	width:10%;
	/*background-color:#CC6600;*/  /* DEV only */
	}
th.perDay {
	width:16%;
	/*background-color:#006600;*/  /* DEV only */
	}
th.perWeek {
	width:18%;
	/*background-color:#0066CC;*/  /* DEV only */
	}		
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px from css */
	th.subHead {
	width:110px;
	background-color:#0099CC;  /* DEV only */
	}	
th.info {
	width:40px;
	}
th.perDay {
	width:55px;
	}
th.perWeek {
	width:65px;
	}
}

.insurance {
	position:relative;
	display:block;
	/*left:75px;*/
	color:#FF9900;
	margin-bottom:15px;
	/*border:1px dotted cyan;*/  /* DEV only */
	}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px from css */
.insurance {
	position:relative;
	display:block;
	left:75px;
	color:#FF9900;
	margin-bottom:30px;
	}
}

.introText.detailBlock ul {
	margin:30px;
	margin-top:10px;
	/*color:#00FF00;*/  /* DEV only */
	}

.itemDetailImage1 {
	position:relative;
	display:block;
	order:2;
	right:0px;
	width:100%;
	/*width:100%;*/ /* of containing imgGridWrapper */
	/* width is set inline below - couldn't find what is causing this issue 26.10.20 */
	/*border:1px dashed fuchsia;*/  /* DEV only */
	}	
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px from css */	
.itemDetailImage1 {
	order:3;
	/*border:1px dashed fuchsia;*/  /* DEV only */
	}
}
	

/* This styling is back in the .asp file for now - needs coordinated with imgGridWrapper styling */	
.forDetailImage { /* for wider displays only */
	/*border:1px solid yellow;*/  /* DEV only */
	}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */	
	.forDetailImage { /* for wider displays only */
	position:absolute;
	float:none;
	top:0px;
	right:0px;
	width:48%; /* of r_contentWrapper */
	/*border:1px solid fuchsia;*/  /* DEV only */
	}	
}







.arrowTextLink {  /* The ul container */
	width:80%;
	/*color:#00FF33;*/
	/*border:1px dotted yellow;*/  /* DEV only */
	}
.arrowTextLink li a,
.arrowTextLink li a:visited,
.arrowTextLink li a:active {
	font-weight:bold;
	text-decoration:none;
	color:#026DFC; /* Bright blue */
	}
.arrowTextLink li a:hover,
.arrowTextLink li a:focus {
	color:#f5a300; /* Orange */
	}








/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\ SPECIFIC TO LITEDECK LISTING TABLE \\\\\\\\\\\\\\\\\\\\\\\\\\\ /*
/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\ SPECIFIC TO LITEDECK LISTING TABLE \\\\\\\\\\\\\\\\\\\\\\\\\\\ /*

/* 22.12.20 - need to apply this, or some of this, to global 'listingTable' styles to sort LiteDeck thumbnail display issue */

/* Someday, all dryhire listings tables will be styled like this ... */
/* Has to be absolutely specific in order to avoid interference from preceding styles */

#imgGridWrapper.dryhire {
	width:482px;
	padding:0;
	/*border:1px dotted white;*/ /* test only */
	}

table.dryhireListing.LiteDeck {
	position:relative;
	/*width:100%;*/ /* removed 10.03.16 */
	/*width:475px;*/ /* removed 10.03.16 */
	width:98%; /* =472px ; introduced 10.03.16 */
	border-collapse:separate;
	text-align:left;
	border-bottom:1px dotted #FF9900;
	margin-bottom:10px;
	}

table.dryhireListing.LiteDeck th { /* tablehead globals */
	border-top:0px dotted #FF9900;
	padding-left:5px;
	text-align:left;
	line-height:1.2em;
	}
	
table.dryhireListing.LiteDeck th:first-child {	/* LiteDeck page 10.03.16 */
 	font-size:1.4em;
	width:auto;
	}	


table.dryhireListing.LiteDeck th.infoTableHead {
	 /*width:40px;*/  /* superseded from inline styling 10.03.16 */
	 width:8%;    /* 40/472 ; 10.03.16 */
	 /*width:9.5%;*/ /* 45/472 */
	 /*color:#3366CC;*/ /* testing only */
	 }

table.dryhireListing.LiteDeck th.perDayTableHead {	 
    /*width:60px;*/  /* superseded from inline styling 10.03.16 */
	width:12.7%;    /* 60/472 ; 10.03.16 */
	/*width:10%; */   /* 60/472 ; 10.03.16 */
	width:16.9%; /* 80/472 */
	/*color:#FF3300;*/ /* testing only */
	}
	
table.dryhireListing.LiteDeck th.perWeekTableHead {	
    /*width:60px;*/ /* superseded from inline styling 10.03.16 */
	width:12.7%;    /* 60/472 ; 10.03.16 */
	/*width:10%;*/    /* 60/472 ; 10.03.16 */
	width:16.9%; /* 80/472 */
	/*color:#FFFF00;*/ /* testing only */
	}

table.dryhireListing.LiteDeck tr { /* LiteDeck page 10.03.16 */
	/*position:relative;*/
	line-height:1.2em;
	color:#FF9900;
	font-weight:bold;
	/*background-color:#00FFFF;*/
	}
	
table.dryhireListing.LiteDeck td { /* LiteDeck page 10.03.16 - global td styling */
	border-top:1px dotted #FF9900;
	padding-left:5px;
	color:#ffffff;
	font-weight:normal;
	height:20px;
	}
	
table.dryhireListing.LiteDeck td.thumbAndDesc { /* specific styling */
	/*background-color:#00FFFF;*/
	}
	
table.dryhireListing.LiteDeck td.thumbAndDesc a { /* LiteDeck page 16.03.16 */	
	text-decoration:none;
	color:#ffffff;
	}

table.dryhireListing.LiteDeck td.thumbAndDesc.unavailable { /* LiteDeck page 10.03.16 */
	color:#888888;
	cursor:auto;
	}

table.dryhireListing.LiteDeck td.itemInfo { /* specific styling */
	/*width:8%;*/ /* 40/472 */
	/*background-color:#00FF99;*/
	}
	
table.dryhireListing.LiteDeck td.itemInfo.unavailable { /* specific styling */
	color:#888888;
	cursor:auto;
	}

table.dryhireListing.LiteDeck td.perDay { /* specific styling */
	/*width:12.7%;*/ /* 60/472 */
	/*background-color:#CCFF66;*/
	}
	
table.dryhireListing.LiteDeck td.perDay.unavailable { /* specific styling */
	color:#888888;
	cursor:auto;
	}

table.dryhireListing.LiteDeck td.perWeek { /* specific styling */
	/*width:12.7%;*/ /* 60/472 */
	/*background-color:#CCCCFF;*/
	}
	
table.dryhireListing.LiteDeck td.perWeek.unavailable { /* specific styling */
	color:#888888;
	cursor:auto;
	}

table.dryhireListing.LiteDeck .listingThumbnailHolder {
	position:relative;
	display:block; /* make the span display as a block=level element */
	float:left;
	/*width:60px;*/ /* the size of this needs to vary with the thumbnail image inside it */
	width:auto; /* countermand the styling from above global */
	min-width:60px; /* 10.03.16 in preference to fixed as above to allow for larger thumbnail images */
    max-width:75px; /* 22.12.20 to give width for text - but this needs to be JUST for smaller screens and needs a media query */
	margin-top:2px;
	margin-right:5px;
	margin-bottom:2px;
	z-index:600;
	/*border:1px dotted yellow;*/ /* test only */
	}
	
table.dryhireListing.LiteDeck .listingThumbnailHolder img.listingThumbnail {
	position:relative;
	display:block;
	/*float:left;*/
	margin-top:2px;
	margin-right:5px;
	z-index:100;
	/*border:1px solid magenta;*/ /* testing only */
	}

table.dryhireListing.LiteDeck .thumbnailh {
	position:absolute; /* to be able to maintain position from table cell */
	width:285px;
	/*height:150px;*/
	height:220px;
	left:-9999px; /* keep it out of the way */
	/* Line below needs to be on the page for each item in the display loop */
	/*background-image:url(/images12/png/dryhire/M290-Truss-Straight-h.png);*/
	background-position:bottom right;
	background-repeat:no-repeat;
	/*border:1px solid cyan;*/
	}
		
table.dryhireListing.LiteDeck .listingThumbnailHolder:hover .thumbnailh { /* not sure this is used */
	/*left:60px;*/
	left:-310px; /* bring it back into position on hover over the thumbnail holder */
	bottom:-10px;
	}		
	
table.dryhireListing.LiteDeck .listingText {
	position:relative;
	float:left;
	display:block;
	/*width:215px;*/ /* 10.03.16 removed in favour of flexible width up to a max-width (below) to allow for larger thumbnail images */ 
	width:auto; /* countermand the above global styling */
	/*max-width:215px;*/
	max-width:60%; /* of table row width - keeps the text contained and floating */
    max-width:40%; /* These items need to be flexed and allowed to re-size to suit */
	top:3px;
	margin-bottom:5px;
    /*color:#red;*/ /* DEV only */
	/*background-color:#00FFCC;*/ /* testing only */
	}
	
table.dryhireListing.LiteDeck .listingTableFooter {
	 position:relative;
	 display:block;
	 left:75px;
	 color:#FF9900;
	 margin-bottom:30px;
	 }
	 
	

	
/* **********************  DRYHIRE SEARCH *********************** */

.dryhireSearchContainer {  /* The invisible positioning container for the orange bordered searchbar */
	position:relative;
	display:inline-block;
	order:4;
	width:100%;
	/*height:120px;*/
	/*border:1px dotted cyan;*/
	}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */
.dryhireSearchContainer {
	/*order:5;
	width:48%;
	float:right;*/
	/*right:0px;*/
	/*margin-right:36px;
	margin-right:0px;
	margin-left:30px;
	border:1px dashed cyan;*/
	}


.dryhireResults .dryhireSearchContainer {
	width:60%;  /* Restrict width for single column desktop page */
	margin:auto;
	}
}

#searchsitecontainer {  /* The orange bordered unit */
	margin:auto;
	margin-top:20px;
	/*margin-bottom:30px;*/
	padding:10px;
	width:100%;
	text-align:center;
	border:1px solid #996633;
	background-color:#000000;
	}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */
#searchsitecontainer {  /* The orange bordered unit */
	margin:auto;
	margin-top:30px;
	margin-bottom:30px;
	padding:5px;
	border:1px solid #996633;
	background-color:#000000;
	}
}


label.searchstring {
	position:relative;
	display:inline-block;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	line-height:1.5em;
	width:100%;
	font-size:1.4em;
	color:#ffffff;
	padding-bottom:10px;
	}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */
label.searchstring {
	display:inline;
	width:40%;
	font-size:1.0em;
	padding-top:3px;
	padding-right:5px;
	}
}

.searchfield { /* DEFAULT STYLING : The entry field for the search term */
	position:relative;
	top:3px;
	width:160px;
	width:40%;
	margin-right:2px;
	padding-left:4px;
	vertical-align:text-bottom;
	font-size:1.8em;
	line-height:1.8em;
	letter-spacing:0.02em;
	color:#00427A;
	background-color:#BFE2FF;
	border-right:1px solid #008AFF;
	border-bottom:1px solid #BFE2FF;
	border-bottom:1px solid #008AFF;
	width:90%;
	margin:auto;
	}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */
.searchfield {
	width:45%;
	height:20px;
	font-size:1.4em;
	line-height:1.8em;
	color:#000000;
	}
}

.searchbutton {
	position:relative;
	display:inline-block;
	top:3px;
	width:50px;
	margin-top:20px;
	margin-right:5px;
	margin-left:2px;
	margin-bottom:10px;
	font-size:2.0em;
	line-height:1.2em;
	font-weight:bold;
	cursor:pointer;
	color:#FFFFFF;
	color:#000000;
	background-color:#f5a300;	
	/*border:none;*/ /* Remove browser default button styling */
	border-top:1px solid #FFCC00;
	border-right:1px solid #CC6600;
	border-left:1px solid #ffcc00;
	border-bottom:2px solid #993300;
	}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */
.searchbutton {
	width:38px;
	height:18px;
	margin-top:0px;
	margin-left:10px;
	margin-bottom:5px;
	top:1px;
	font-size:1.4em;
	border:none;
	}
}

/* ************************* Browse the latest ... *********************************** */

.browseLatestContainer {
	position:relative;
	display:inline-block;
	order:6;
	width:100%;
	/*border:1px dotted white;*/
	}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */
.browseLatestContainer {
	width:100%;
	text-align:right;
	margin-top:-50px;  /* Moved up into position below Search bar */
	/*margin-right:36px;*/
	/*margin-left:30px;*/
	/*border:1px dashed white;*/  /* DEV only */
	}
}

.browseLatestGraphic {
	 position:relative;
	 display:inline-block;
	 width:100%; /* When container is 100% width */
	 min-height:60px;
	 margin-bottom:20px;
	 padding-top:10px;
	 text-align:center;
	 background-color:#000000;
	 background-image:url(/images-dryhire/jpg/latestBlock.jpg);
	 background-repeat:no-repeat;
	 border:1px solid #666666;
	 }
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */
.browseLatestGraphic {
	 position:relative;
	 display:inline-block;
	 width:48%; /* When container is 100% width */
	 min-height:60px;
	 margin-right:36px;
	 padding-top:10px;
	 text-align:center;
	 background-color:#000000;
	 background-image:url(/images-dryhire/jpg/latestBlock.jpg);
	 background-repeat:no-repeat;
	 border:1px solid #666666;
	 }
}
	
@font-face {
	font-family: Swiss924 BT Regular;
	src: url('/fonts/Sw924Rg.ttf');
	}

a.latestLink:link, a.latestLink:visited, a.latestLink:active {
	display:block;
	width:100%;
	height:100%;
	/*font-family:Impact, Arial, Helvetica, sans-serif;*/
	font-family:Swiss924 BT Regular, Impact, Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	font-size:2.4em;
	letter-spacing:0.08em;
	text-decoration:none;
	/*border:1px dotted red;*/  /* DEV only */
	
	}
	
a.latestLink:hover, a.latestLink:focus {
	color:#FF9900;
	}

.browseText {  /* Moves the 'Browse the latest..." text to the right for clarity on smaller screens */
	display:inline-block;
	position:relative;
	left:40px;
	padding-bottom:5px;
	/*border:1px dotted yellow;*/  /* DEV only */
	}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */
	.browseText {  /* Moves the 'Browse the laetest..." text to the right for clarity on smaller screens */
	display:block;
	position:relative;
	left:0px;
	}
}