/* Modern CSS Custom Properties */
:root {
	--primary-red: #BD2701;
	--primary-green: #00896C;
  --primary-orange: #fc7f03;
	--text-primary: #333333;
	--text-secondary: #4D4F53;
	--text-light: #666666;
	--background-white: #ffffff;
	--background-light: #fffbfb;
	--border-light: #969494;
	--border-medium: #d0d0d0;
	--border-dark: #d0d0d0ad;
	--shadow-subtle: 0 2px 4px rgba(0, 0, 0, 0.04);
	--shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.08);
	--shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.12);
	--border-radius: 8px;
	--border-radius-small: 4px;
	--transition-fast: 0.2s ease;
	--transition-medium: 0.3s ease;
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 1.5rem;
	--spacing-lg: 2rem;
	--spacing-xl: 3rem;
	--font-headline: "Trebuchet MS", Arial, Helvetica, sans-serif;
	--font-brand: thesansregular, "Trebuchet MS", Arial, sans-serif;
	--font-serif: Georgia, "Times New Roman", serif;
	/* --paper and --font-body moved to tokens.css. They were declared here
	   too, with different values; the copy on `body` in base.css silently won
	   because a direct declaration beats an inherited one. Do not reintroduce
	   them here — tokens.css is now the only source. */
}

/* Modern Smooth Scrolling and Focus States */
html {
	scroll-behavior: smooth;
}

*:focus-visible {
	outline: 2px solid var(--primary-red);
	outline-offset: 2px;
	border-radius: var(--border-radius-small);
}

/* Accessibility: Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Modern Reset and Base Styles */
body {
	background: var(--background-white);
	margin: 0;
	padding: 0;
	font-family: var(--font-body);
}

a {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	color: var(--primary-red);
	text-decoration: none;
	transition: all var(--transition-fast);
}

a:hover {
	color: var(--primary-green);
	text-decoration: none;
}

p {
	line-height: 1.6;
	color: var(--text-primary);
	margin-bottom: var(--spacing-sm);
}

p.underH {margin-top: 0;}

#floatingAdWrapper, .loginBox, .menu, #leftAds {display:none;}

.greyBck {background:none;}

.spannavleft {width: 100%;}
.spannavright {display:none;}

.col.span14, .hidden {
	display:none;  /* kill off ads in old format */
}

/* Navigation Menu - Hidden by default */
.navigation {
	display: block;
	list-style: none;
	width: 280px;
	height: 100vh;
	/* !important dropped from position/right: header-modern.css flips the drawer to
	   the left edge via `ul.navigation` (0,1,1), which already out-specifies this
	   `.navigation` (0,1,0) rule. Neither side needs the flag. */
	position: fixed;
	top: 0;
	right: -280px; /* Hidden off-screen by default */
	z-index: 2000;
	padding: var(--spacing-lg) var(--spacing-md) 0 var(--spacing-lg);
	margin: 0;
	background: var(--background-white);
	box-shadow: none; /* Only show shadow when open */
	transition: right var(--transition-medium), box-shadow var(--transition-medium);
	backdrop-filter: blur(10px);
}

/* Legacy #searchPanel styling removed — the search overlay is owned entirely by
   header-modern.css (.searchCard system, matching menu.php). The old rules were a
   centred 420px card; header-modern reimplements it as a full-screen overlay.
   Note the old `#searchPanel.open { transform: translateX(-50%) }` outranked
   header-modern's base `transform: none` on specificity, displacing the overlay.
   .searchPanelTitle / .searchBarWrapper / .searchHeader / .searchBar went with it:
   no markup references any of them. */


/* Modern Overlay */
div.overlay, #menuoverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
	z-index: 2000;
	display: none;
	transition: all var(--transition-medium);
	cursor: pointer;
}

/* Login/offers backdrop. Deliberately scoped to #loginOverlay rather than
   div.overlay: the base rule above is what hides #menuoverlay and makePayment's
   #pleaseWait, neither of which has a display toggle of its own. The backdrop
   IS the panel here, mirroring #searchPanel in header-modern.css. */
#loginOverlay {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: min(10vh, 100px) 2% 5%;
	overflow-y: auto;
	background: rgba(15, 0, 0, 0.78);
	color: #333;
	cursor: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.22s ease, visibility 0.22s ease;
}

#loginOverlay.open {
	opacity: 1;
	visibility: visible;
}

#menuoverlay {
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition-medium), visibility var(--transition-medium);
}

#searchoverlay {
	opacity: 0;
	visibility: hidden;
	z-index: 1001;
	display: none;
}

#searchoverlay.active {
	display: block;
	opacity: 1;
	visibility: visible;
}

.nav-trigger:checked ~ #menuoverlay {
	display: block;
	opacity: 1;
	visibility: visible;
}

/* Generic panel chrome — still used by makePayment.php's #pleaseWait, which
   nests .overlayPanel > .panelOuter > .panelInner.noHeader. Leave it alone;
   the login/offers cards override it wholesale below. */
div.overlayPanel {
	background: #fff;
	border-radius: 8px;
	padding: 0;
	width: 96%;
	max-width: 480px;
	box-sizing: border-box;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	box-shadow: 0px 0px 6px 0 rgba(0,0,0,0.36);
}

div.panelHeader {
	color: #4D4F53;
	padding: 8px 0;
	font-size: 1.25em;
	border-bottom: 1px solid #ccc;
	margin-bottom: 0.5em;
}

div.panelOuter {overflow-y: scroll; max-height: 98vh;}

div.panelInner {
	padding: 50px 10% 20px 10%;
}

div.panelInner.noHeader {padding-top: 20px; text-align: center;}


/* =============================================
   LOGIN / OFFERS CARDS
   Everything below is scoped to #loginOverlay so it cannot leak into the
   generic panel chrome above.
   ============================================= */

#loginOverlay .overlayPanel {
	display: none;
	position: static;
	transform: none;
	width: 100%;
	min-width: 0;
	max-width: 520px;
	padding: 22px 24px 18px;
	border-radius: 14px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
	font-family: var(--font-furniture);
}

/* searchCardIn lives in header-modern.css, loaded on every page that includes
   the login partial. */
#loginOverlay .overlayPanel.open {
	display: block;
	animation: searchCardIn 0.22s ease both;
}

#loginOverlay .panelOuter {
	overflow: visible;
	max-height: none;
}

#loginOverlay .panelInner {
	padding: 0;
}

#loginOverlay .panelHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 0 12px;
	margin-bottom: 14px;
	border-bottom: 1px solid #eee;
}

#loginOverlay .panelHeader img {
	max-height: 28px;
	width: auto;
}

#loginOverlay .panelTitle {
	margin: 0 0 6px;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--masthead-bg);
}

#loginOverlay .loginMessage,
#loginOverlay .offersMessage {
	color: var(--muted);
	letter-spacing: 0.3px;
	line-height: 1.45;
}

#loginOverlay .loginMessage p,
#loginOverlay .offersMessage p {
	margin: 0 0 8px;
  font-size: 14px;
  font-weight: 400;
}

#loginOverlay .srOnly {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.btn_panelClose {
	position: absolute;
	right: 8px;
	top: 10px;
	width: 24px;
	height: 24px;
	cursor: pointer;
}

.btn_panelClose:before, .btn_panelClose:after {
	position: absolute;
	left: 12px;
	content: ' ';
	height: 25px;
	width: 2px;
	background-color: #fff;
}

.btn_panelClose.grey:before, .btn_panelClose.grey:after {
	background-color: #888;
}

.btn_panelClose.grey:hover:before, .btn_panelClose.grey:hover:after {
	background-color: #111;
}


.btn_panelClose:before {
	transform: rotate(45deg);
}
.btn_panelClose:after {
	transform: rotate(-45deg);
}

.panelButton {
	/* width: 220px; */
	padding: 0.35em 1.5em;
	margin-top: 5px;
	background: #00896C;
	color: #fff;
	border: none;
	border-radius: 3px;
	font-size: 1.2em;
	cursor: pointer;
}

.panelButton.grey {
	background: #B9B9B9;
}

.popupPanel {
	position: fixed;
	bottom: -450px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	padding: 8px 4% 20px 4%;
	background: #fff;
	box-shadow: 0 -2px 5px 0 #B9B9B9; 
	z-index: 500;
	transition: all 0.2s;
}

.popupPanel.open {
	bottom: 0;
}

#loginPanel.welcome {
	max-width: 640px;
	max-height: 90vh;
}

#loginPanelMessage, #setPassword, #searchMessage {display: none;}
#loginPanelMessage.welcome, #setPassword.welcome {display: block;}
#searchMessage.notLoggedIn {display: block;}

#emailDiv.welcome ,#href_forgot.welcome, #href_subscribe.welcome {display: none;}

#loginPanel input[type="checkbox"] {display: inline; width: auto; margin: 0;}


#btn_panelPwdLogin {
	width: 100%; 
}

/* Email row: icon + input + submit arrow, mirroring .searchInputRow */
#loginOverlay .loginInputRow {
	display: flex;
	align-items: center;
	margin-top: 6px;
	border: 2px solid #e0e0e0;
	border-radius: 10px;
	overflow: hidden;
	transition: border-color 0.15s;
}

#loginOverlay .loginInputRow:focus-within {
	border-color: var(--masthead-bg);
}

#loginOverlay .loginpanelicon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin: 0 10px 0 14px;
	color: #999;
	pointer-events: none;
}

#loginOverlay .loginInputRow:focus-within .loginpanelicon {
	color: var(--masthead-bg);
}

#loginOverlay .loginInputRow input {
	flex: 1;
	margin: 0;
	padding: 11px 8px;
	border: none;
	outline: none;
	box-shadow: none;
	font-size: 1rem;
	color: #222;
	background: transparent;
}

#loginOverlay .btn_login {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border: none;
	background: var(--masthead-bg);
	cursor: pointer;
	opacity: 0.9;
	transition: opacity 0.15s;
}

#loginOverlay .btn_login:hover {
	opacity: 1;
}

#loginOverlay .btn_login svg {
	width: 18px;
	height: 18px;
	color: #fff;
}

/* Password fields are retained but unreachable: checkUser.php forces
   $passwordsMatch = true, so the server never returns reset/initPassword. */
#loginOverlay #passwordDiv,
#loginOverlay #setPassword {
	margin-top: 12px;
}

#loginOverlay #passwordDiv input,
#loginOverlay #setPassword input {
	width: 100%;
	margin-top: 6px;
	padding: 11px 12px;
	box-sizing: border-box;
	border: 2px solid #e0e0e0;
	border-radius: 10px;
	outline: none;
	font-size: 1rem;
	transition: border-color 0.15s;
}

#loginOverlay #passwordDiv input:focus,
#loginOverlay #setPassword input:focus {
	border-color: var(--masthead-bg);
}

#loginOverlay .errorMsg {
	min-height: 1.2em;
	padding: 4px 2px 0;
	font-size: 0.85rem;
	color: #BD2701;
}

/* Stacked full-width actions. The old row was justify-content: space-between,
   which pinned a lone button hard left and split two to opposite edges — the
   panel never shows more than two at once. */
#loginOverlay .offersActions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 16px;
}

#loginOverlay .panelButton {
	width: 100%;
	margin: 0;
	padding: 11px 18px;
	border: none;
	border-radius: 10px;
	background: var(--masthead-bg);
	color: #fff;
	font-family: var(--font-furniture);
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: opacity 0.15s, box-shadow 0.15s;
}

#loginOverlay .panelButton:hover {
	opacity: 0.88;
}

#loginOverlay .panelButton.secondary {
	background: #fff;
	color: var(--masthead-bg);
	box-shadow: inset 0 0 0 2px #e0e0e0;
}

#loginOverlay .panelButton.secondary:hover {
	opacity: 1;
	box-shadow: inset 0 0 0 2px var(--masthead-bg);
}

#loginOverlay .panelFooter {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid #eee;
	font-size: 0.9rem;
	color: var(--muted);
}

#loginOverlay .panelFooter a {
	color: var(--masthead-bg);
	font-weight: 700;
	text-decoration: none;
}

#loginOverlay .panelFooter a:hover {
	color: var(--masthead-bg);
	text-decoration: underline;
}

#loginOverlay .switchAccountRow {
	margin-top: 10px;
	font-size: 0.85rem;
	color: var(--muted);
}

#loginOverlay .switchAccountRow a {
	color: var(--muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

#loginOverlay .switchAccountRow a:hover {
	color: var(--masthead-bg);
}

#spinner.open {
	display: block;
}

#showHide {
	/*
	position: absolute;
	top: 30px;
	right: 10px;
	*/
	cursor: pointer;
}

#showHide img {
	height: 1.1em;
	opacity: 0.5;
}

div.overlayPanel a {
  color: #4D4F53;
}

div.overlayPanel a:hover {color: #000; text-decoration: underline; cursor: pointer;} 

/* Hide the navigation trigger checkbox */
.nav-trigger {
	position: absolute;
	clip: rect(0, 0, 0, 0);
	opacity: 0;
	pointer-events: none;
}

/* Modern Hamburger Menu Button */
label[for="nav-trigger"] {
	position: relative;
	width: 32px;
	height: 32px;
	cursor: pointer;
	background-image: url("/assets/img/hamburger.svg");
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: center;
	transition: all var(--transition-fast);
	border-radius: var(--border-radius-small);
	display: flex;
	align-items: center;
	justify-content: center;
	order: 2; /* Menu button on the right */
}

label[for="nav-trigger"]:hover {
	background-color: var(--background-light);
	transform: scale(1.05);
}


/* Modern Navigation Menu - List items */
.nav-item {
  width: 100%;
  border-bottom: 1px solid var(--border-light);
  transition: all var(--transition-fast);
}

.nav-item:last-child {
  border-bottom: none;
}

.nav-item a {
  display: block;
  padding: var(--spacing-md) 0;
  color: var(--text-secondary);
  font-size: 1.1em;
  font-weight: 500;
  text-decoration: none;
  text-align: left;
  transition: all var(--transition-fast);
  border-radius: var(--border-radius-small);
}

.nav-item a:hover {
  color: var(--primary-red);
  background: var(--background-light);
  padding-left: var(--spacing-sm);
  transform: translateX(4px);
}

/* Modern Navigation Animation */
ul.navigation, #overlay {
  transition: all var(--transition-medium);
}

/*
.nav-trigger:checked + label {
   right: 0; 
}
*/

/* When menu is opened - slide in from right */
/* Open state. header-modern.css declares this exact same selector later in the
   cascade and wins on order, flipping `right` to auto and sliding `left` to 0. */
.nav-trigger:checked ~ ul.navigation {
  right: 0;
  box-shadow: var(--shadow-strong);
}

/* Removed - now handled above in the overlay section */

/* Belt-and-braces: hide the search overlay if the nav drawer is opened while it's
   up. showSearchPanel() already calls closeMenu(), so this state is normally
   unreachable. The legacy `transform: translateX(-50%)` was dropped with the rest
   of the old panel styling — header-modern's overlay is full-screen (inset: 0) and
   must not be translated. */
.nav-trigger:checked ~ #searchPanel.open {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}




.moreNewsButton {
	position: absolute;
	clip: rect(0, 0, 0, 0);
}

label[for="moreNewsButton"] {
	
	position: fixed;
	top:0;
	right:0;
	padding: 10px;
	padding-left: 12px;
	background: #bd2701;
	font-weight:bold;
	color: #fff;
	display:none;
	cursor: pointer;
	
	border-radius: 0px 0px 0px 8px; 
}
	/* Micro reset */
*,*:before,*:after{
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  margin:0;
  padding:0; 
  text-overflow: ellipsis;
}

html, body { 
  height: 100%; 
  width: 100%; 
}

.col {margin-bottom: 2%;}
.col.static {width: 100%;}
.last {margin-right: 0;}

.span51 {width: 54%;}
.span37 {width: 70%; /*54%;*/}
.span28 {width: 28.35%; /*44%;*/}
.span14 {width: 27%;}
.span70 {margin-top:41px; float:right;}

.span50 {width:49%;}

/* Full-width background wrapper */
#uberwrapper {
	width: 100vw;
	position: relative;
	margin: 0;
	top: 0;
  	bottom: 100%;
	min-height: 100vh;
	overflow-x: hidden;
}

#loginOverlay .loginForm {
  margin-top: 30px
}

/* Content wrapper with constrained width */
#wrapper {
	max-width: 1450px;
	margin: 0px auto;
	background: var(--background-white);
  min-height: 100vh;
  position: relative;
  top: 0;
  bottom: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  transition: all var(--transition-medium);
	/* border: 5px solid black; */
	/* box-shadow: 0 8px 100px rgba(0, 0, 0, 0.12); */
}

div.hr {
	border-top: 1px solid #ccc;
	width: 100%;
	height: 0;
	margin: 4px 0 10px 0;
}






.flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
}











div.iconGroup img {
	width: 24px;
	height: 24px;
	opacity: 0.8;
	transition: opacity var(--transition-fast);
	cursor: pointer;
}

div.iconGroup img:hover {
	opacity: 1;
}


div.theSans {
	flex-shrink: 1;
	min-width: 0;
	overflow: hidden;
	font-size:1.4em;
	line-height: 0.9em;
	text-align: left; 
	float: none;
	padding: 0;
}

div.theSans p {
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mastheadDateText {
	display: none;
	font-size: 0.92rem;
	line-height: 1.2;
	font-weight: 600;
	color: var(--text-secondary);
}

/* Container for search and menu buttons */
div.menuContainer {
	width: 80px;
	height: 32px;
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}







.minimenu {display: flex; align-items: center;}
.minimenu img {height: 1em; padding: 0 0.5em; margin-top: 3px;}
.minimenu div {cursor: pointer; padding-left: 0.5em; margin-top: 2px;}
#btn_login, #btn_subscribe {margin-left: 0.5em;}

#btn_login.disabled {cursor:auto;}

/* Navigation positioning handled above in main navigation styles */

/*
#mastheadSpacer {
	display:block;
	height:120px;
}
*/


/* Modern Container — the single `.container` definition for the whole site.
   `position: relative` came from layout.css, which is now retired; it is kept
   because absolutely-positioned descendants on the payment pages (.close-icon
   uses `right: 25%`, #formCheckBtn uses top/left) resolve against this box.
   layout.css's 1.57894% side/bottom margins are deliberately NOT carried over:
   the 3% padding already provides the inset, and every other page on the site
   has always run without those margins. */
.container {
	padding: 3%;
	position: relative;
}

[contenteditable="true"]:active,
[contenteditable="true"]:focus{
  border: none;
  outline: none;
}

div.greyOutline {border: 2px dotted #ccc;}

table.searchResultTable {
	border: 0;
}



table.searchResultTable td {
	border:0;
	padding: 0.3em 0;
}

#inline-date {
	display:none;
}

.logoSmall {width: 100px !important;}

p.breakout {
	font-size: 120%; /* 1.3em; */
	color: #BD2701;
	margin: 7% 5% 5% 5%;
	line-height: 1.2em;
}

p.breakout:before {  /* decorative big topleft quote */
  color: #EDEEEF;
  content: open-quote;
  content:"\201C";
  font-size: 5em;
  line-height: 0.0em;
  margin-right: -0.25em;
  margin-left: -0.1em;
  vertical-align: -0.4em;
  z-index:100;
}

p.standfirst {margin:0;}

.sideBannerAds {
	padding-top: 0.25em;
	position: relative;
}

/* 
.bottomBannerAds {
	display: none;
}
*/

#articleIndex {
	display:none;
} 

.carouselContainer {
	display:none;
}

.carouselHeading {  /* more news */
	color: #00896C;
	font-size: 0.8em;
	text-align: center;
	margin: 0 auto;
	display:none;
}

.floatingBannerSpacer {position:relative; width:100%; height: 120px; display:none;}

.ad {
	text-align: center;
}

/* Ad display rules moved to main ad styling section */


/* Modern Footer */
/* font-size/padding/margin are restated from base.css so the footer renders
   identically on article.php and search.php, which don't load base.css. */
.footer {
	border-radius: 0;
	height: auto;
	color: var(--text-light);
	text-align: center;
  background: var(--background-white);
	/* Pinned, not inherited — page stylesheets set their own body type (jobs.css
	   uses --font-furniture at 15px, editorial.css and search.css 15px) and the
	   footer must be identical on every page. rem so it ignores body font-size. */
	font-family: var(--font-body);
	font-size: 0.75rem;
	padding: 0.9em 0em 0em;
	margin: 0;
}

.footerContainer {
	padding-left: 3%;
	padding-right: 3%;
}

#leftArrow, #rightArrow {display:none; padding:12px;}

/* Duplicate removed - ad display handled in main styling */

/* Modern Footer Links */
/* The .section.group.footer selector is here to out-specify page-scoped link
   styling — body.home a in editorial.css otherwise recolours the footer and
   adds its animated underline. */
.footer a,
.section.group.footer a {
	color: var(--text-light);
	transition: all var(--transition-fast);
	text-decoration: none;
	background-image: none;
}

.footer a:hover,
.section.group.footer a:hover {
	color: var(--primary-red);
	text-decoration: underline;
}
div.bodyblue {
	padding: 2.5em 0.4em 0.4em 0.6em !important;
	margin-top: -1.8em;
}

div.printBar {
	border-top-style: solid;
	border-top-color:#999;
	font-weight: bold;
	text-align: center;
}

div.printBar a {
	text-decoration: none;
	color:#999;
	font-weight: normal;
	border-bottom: none;
}

div.printBar a:hover {
	text-decoration: none;
	border-bottom: none;
}

div.newsListWrapper ul li {
	font-size: 1.0em;
}


#allJobsInner ul li a {
	font-size: 16px;
	line-height: 16px;
}


/*
div.headerBox span {
	background-color: none;
	color: #00896C;
}
*/

div.newsBody h1 {
	padding: 0.25em 0 0.25em 0;
	font-size: 42px; /* starting at largest size */
}

div.newsBody h1.static {font-size: 32px;}

div.newsBody h4 {
	font-weight: normal;
	color: #4D4F53;
	margin: 0.5em 0;
	font-size: 1.4em;
	line-height: 1.3em;
}

div.newsBody p.headingAbout {
	background-color: #333;
}

div.newsBody ul {
	padding: 0 0 10px 10px;
	list-style: none;
	margin: 0;
}

div.newsBody ul li {
	margin-bottom: 0.5em;
}

label, .smaller {
	color: #4A4A4A;
	font-size: 0.9em;
	text-align: left;
	margin-bottom: 0;
}


/*
input[type="text"] {
	width: 100%;
	
	-webkit-box-shadow: inset 2px 2px 3px 0px rgba(0,0,0,0.15);
	-moz-box-shadow: inset 2px 2px 3px 0px rgba(0,0,0,0.15);
	box-shadow: inset 2px 2px 3px 0px rgba(0,0,0,0.15);
	
	
	background: transparent;
	padding: 6px;
	border-radius: 0;
	border: 0;
	border-bottom: 1px solid #333;
	margin-bottom: 12px;
}
*/

input, textarea {
	display: block;
	text-align: left;
	width: 100%;
	border: 1px solid #dfe1e5;
	border-radius: 2px;
	margin-top: 4px;
	padding: 0.5em;
	font-size: 1em;
	margin-bottom: 12px;
}

textarea {resize: none;}

input:focus, textarea:focus {outline: none;}

input.error {border-color: #BD2701;}

div.errorMsg {
	color:#BD2701;
	margin: -9px 0 12px 0;
	font-size: 0.9em;
}

textarea {border-radius:2px;}


form select {
	font-size: 20px;
	width: 100%;
}


table label {
	font-size: 70%;
	color: #00896C;
	display:none;
	margin-top: 12px;
	margin-bottom: -8px;

	transition: 0.3s all;
}

form.lostAccess input[type=submit], form.lostAccess input[type=Reset], form.signUp input[type=submit], form.signUp input[type=Reset] {
	text-transform: none;
	border-radius: 4px;
}


span.formspan {
    display: block;
    overflow: hidden;
}

.control {
	font-size: 18px;
	position: relative;
	display: inline-block;
	margin-bottom: 15px;
	padding-left: 30px;
	cursor: pointer;
}

.control input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}

.control__indicator {
	position: absolute;
	top: 2px;
	left: 0;
	width: 20px;
	height: 20px;
	background: #FFF;
	border: 1px solid #00896C;
}

/* Checked state */
.control input:checked ~ .control__indicator {
	background: #00896C;
}

/* Check mark */
.control__indicator:after {
	position: absolute;
	display: none;
	content: '';
}

/* Show check mark */
.control input:checked ~ .control__indicator:after {
	display: block;
}

/* Checkbox tick */
.control--checkbox .control__indicator:after {
	top: 2px;
	left: 6px;
	width: 6px;
	height: 12px;
	transform: rotate(45deg);
	border: solid #fff;
	border-width: 0 2px 2px 0;
}

/* Disabled tick colour */
.control--checkbox input:disabled ~ .control__indicator:after {
	border-color: #7b7b7b;
}


.select {
	position: relative;
	/* display: inline-block; */
	width: 65%;
	margin-bottom: 15px;
	float: right;
	top: 6px;
}

.select.narrow { width:50%;}

.select select {
	display: inline-block;
	width: 100%;
	padding: 8px 12px;
	cursor: pointer;
	color: #7b7b7b;
	border: 0;
	border-radius: 0;
	outline: 0;
	background: #edeeef;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.select select::-ms-expand {
	display: none;
}

.select__arrow {
	position: absolute;
	top: 16px;
	right: 15px;
	width: 0;
	height: 0;
	pointer-events: none;
	border-width: 8px 5px 0 5px;
	border-style: solid;
	border-color: #7b7b7b transparent transparent transparent;
}

.select select:hover ~ .select__arrow,
.select select:focus ~ .select__arrow {
	border-top-color: #000;
}

.select select:disabled ~ .select__arrow {
	border-top-color: #ccc;
}

div.newsListWrapper.jobsWrapper ul li {
	padding: 0em 0 0.3em 0 !important;
	font-size: 1.2rem !important;
	font-weight: normal !important;
}

.formBate {display: none;}

span.trending {
	font-weight: normal; 
	background:#BD2701; 
	color:#fff;
	padding: 1px 0.4em;
	margin-left: 1em;
}

span.comment {
	font-weight: normal; 
	background:#e79e00; 
	color:#fff;
	padding: 1px 0.4em;
	margin-left: 1em;
}

span.approvals {
	font-weight: normal; 
	background:#00896C; 
	color:#fff;
	padding: 1px 0.4em;
	margin-left: 1em;
}

span.dinkus {
	font-weight: normal; 
	background:#2f80c2; 
	color:#fff;
	padding: 1px 0.4em;
	margin-left: 1em;
}

/* Legacy popular styling - now handled by boxgreen */
div.popular {
	border-top: none !important; 
}

div.popular span {	
	background: none !important;
	color: inherit !important;
	padding: 0 !important;
	font-size: inherit !important;
	font-weight: inherit !important;
}

#btn_moreNews {
	/* 
	position: fixed; 
	bottom: 0;
	*/
	text-align:center;
	margin: 0.5em auto;
	color: #BD2701;
	cursor: pointer;
}

.downArrow {
	display: inline-block;
	position: absolute;
	width: 12px;
	height: 12px;
	margin: -4px 0 0 0;
	transform: rotate(45deg);
	border-left: none;
	border-top: none;
	border-right: 1px #BD2701 solid;
	border-bottom: 1px #BD2701 solid;
  	animation-duration: 1.5s;
  	animation-iteration-count: infinite;
  	animation-name: arrowbounce;
}

@keyframes arrowbounce {
  	0%, 100% {margin-top: -4px;}
	50% {margin-top: 0px;}
}
  

/* media calls for responsive screens */

@media screen and (max-width: 600px) {
	div.newsListWrapper ul li {font-size: 1em;}
	
}

/* Modern Advertisement Styling */
div.ad728container, div.ad320container {
	position: relative;
	width: 100%;
	margin-bottom: 0.5rem;
	text-align: center;
}

/* Ad placeholders - visible by default */
div.ad.placeholder728, div.ad.placeholder320 {
	display: block;
	margin: 0 auto;
	overflow: hidden;
}

/* Actual ads - positioned absolutely over placeholders */
div.ad.ad728, div.ad.ad320 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0;
	padding: 0;
	border-radius: var(--border-radius-small);
	overflow: hidden;
	z-index: 10; /* Ensure ads appear on top of placeholders */
}

/* Ensure ad images fill the container */
div.ad.ad728 img, div.ad.ad320 img, 
div.ad.placeholder728 img, div.ad.placeholder320 img {
	width: 100%;
	height: auto;
	display: block;
}

/* Modern News Wrapper Styling */
div.newsWrapper { /* Reduced from var(--spacing-lg) */
	padding: 2% 0 0 0;
	background: var(--background-white);
	/* border-radius: var(--border-radius); */
	transition: all var(--transition-fast);
	/* border: 1px solid var(--border-dark); */
}

/* Hide/ignore <br> tags within newsWrapper */
div.newsWrapper br {
	display: none;
}

/* div.newsWrapper:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-medium);
	border-color: var(--border-medium);
} */

div.newsWrapper.dinkus {
	background: var(--background-white);
	border: none;
	padding: 0;
}

div.newsWrapper div.body, div.newsWrapper div.bodyhide {
	margin-bottom: 0;
	line-height: 1.2em;
	font-size: 1em;
	overflow: hidden;
	/* text-overflow: ellipsis; */
}

div.postedDate {
	font-weight: 600; 
	text-transform: uppercase; 
	font-size: 0.75em; 
	line-height: 1.5; 
	color: var(--primary-red);
	margin-bottom: var(--spacing-xs);
	letter-spacing: 0.5px;
}

/* Remove newsWrapper styling from section containers (Most Popular, More News sections) */
div.newsListWrapper > div.newsWrapper:first-child,
div.newsListBox > div.newsWrapper:first-child,
.popular.newsWrapper,
div.popular > div.newsWrapper:first-child {
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin-bottom: 0 !important;
}

/* Modern Section Headers - Text surrounded by green with thin line */
div.boxgreen {
	position: relative;
	/* margin: var(--spacing-lg) 0 var(--spacing-md) 0; */
	text-align: left;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
	padding: 0;
	/* Expand to full width of parent container */
	margin-left: calc(-1 * var(--spacing-md));
	/* padding-left: var(--spacing-md);
	padding-right: var(--spacing-md); */
}

div.boxgreen:before {
	content: '';
	position: absolute;
	top: auto;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--primary-green);
}


div.boxgreen span {
	background: var(--primary-green);
	color: var(--background-white);
	padding: 0.35em 0.65em;
	font-size: 0.8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: var(--border-radius-small);
	display: inline-block;
	position: relative;
	z-index: 2;
}

/* Modern Story Links */
div.newsWrapper div.body a,
div.newsWrapper div.bodyhide a {
	line-height: 1.4;
	font-size: 1.3em; 
	color: var(--text-primary) !important;
	font-weight: 600;
	text-decoration: none;
	display: block;
	margin-bottom: var(--spacing-xs);
	transition: all var(--transition-fast);
}

div.newsWrapper div.body a:hover,
div.newsWrapper div.bodyhide a:hover {
	color: var(--text-primary);
}

@media (hover: hover) {
	div.newsWrapper div.body a:hover,
	div.newsWrapper div.bodyhide a:hover {
		transform: translateX(4px);
	}
}

div.twinColumn.headline div.firstList div.newsWrapper div.flexLeft div.body a {
	line-height: 1.3;
	color: var(--primary-red) !important;
	font-weight: 600;
	word-wrap: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
	margin-bottom: 0.25rem;
	display: block;
}

div.twinColumn.headline div.firstList div.newsWrapper div.flexLeft div.body a:hover {
	color: var(--text-primary);
}


div.standFirstContainer p.standfirst a {
	color: inherit !important;
	text-decoration: none;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: inherit;
	font-size: inherit;
	font-family: inherit;
}

div.standFirstContainer p.standfirst a:hover {border-bottom-color: inherit;}

/* Modern Lead Story Styling */
div.newsWrapper div.body a.leadStory,
div.newsWrapper div.bodyhide a.leadStory {
	line-height: 1.2;
	font-size: clamp(1.8rem, 4vw, 2.2rem);
	margin-bottom: var(--spacing-sm);
	display: block;
	font-weight: 700;
	transition: all var(--transition-fast);
}

div.newsWrapper div.body a.leadStory:hover,
div.newsWrapper div.bodyhide a.leadStory:hover {
	color: var(--primary-red) !important;
}

@media (hover: hover) {
	div.newsWrapper div.body a.leadStory:hover,
	div.newsWrapper div.bodyhide a.leadStory:hover {
		transform: translateX(1px);
	}
}

div.twinColumn.headline div.newsWrapper.singleLead div.body a.leadStory,
div.twinColumn.headline div.newsWrapper.singleLead div.bodyhide a.leadStory {
	font-size: clamp(2rem, 4.5vw, 3rem); 
	line-height: 1.1;
	font-weight: 800;
	margin-bottom: var(--spacing-md);
  color: var(--primary-red) !important;
}

div.twinColumn.headline div.newsWrapper:first-child {width: auto;}
div.twinColumn.headline div.firstList {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 8px;
	height: 100%; /* Take full height of parent */
}
div.twinColumn.headline div.firstList div.newsWrapper {
	flex: 1;       /* equal share of column height regardless of story count */
	min-height: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
}

/* Dynamic layout for Latest News section */
/* Default layout (1 lead + 2 stories) — grid handles sizing via 55fr 35fr */
div.twinColumn.headline div.newsWrapper.singleLead {
    width: auto;
}

div.twinColumn.headline div.firstList {
    width: auto;
}

/* Layout with 1 lead + 3 stories */
div.twinColumn.headline.four-stories div.newsWrapper.singleLead {
    width: auto;
}

div.twinColumn.headline.four-stories div.firstList {
    width: auto;
}


div.newsListWrapper.jobsWrapper ul li.carouselOverride {
	font-size: 0.7rem !important;
	/* line-height: 1.2rem !important; */
}

div.newsListWrapper.jobsWrapper div.newsWrapper a {font-size:1.0em;}

.twinColumn {display: flex;align-items: top;justify-content: space-between;}
.twinColumn div.newsWrapper {width: 48%; }
.twinColumn div.newsWrapper.singleLead {
	width: 100%; 
	margin-right: 0;
	border: none;
	background: transparent;
	padding: 0;
	min-height: auto; /* Override consistent height for lead stories */
	display: flex;
	flex-direction: column;
	height: 100%; /* Take full height to match right column */
}

.twinColumn div.newsWrapper.singleLead:hover {
	transform: none;
	box-shadow: none;
}

/* .twinColumn div.newsWrapper.singleLead img{max-height: 120px; } */

div.flexRow {
	display: flex; align-items: center; justify-content: space-between;
}

.heroContainer img {width: 100%;}
div.flexLeft {
	display: flex; 
	align-items: flex-start; 
	height: auto; 
	min-height: 0; /* Allow shrinking */
	overflow: visible; /* Ensure overflow is visible */
	flex-wrap: nowrap; /* Prevent wrapping of flex items */
}

/* Make lead story flexLeft fill available height */
div.newsWrapper.singleLead div.flexLeft {
	flex: 1; /* Take remaining space after headline */
	height: auto;
	min-height: 0;
	display: flex; /* Make it a flex container */
	align-items: stretch; /* Stretch children to full height */
}
/* div.headline div.flexLeft div { height: 160px; overflow:hidden;} */
div.flexLeft div:first-child {margin-right: 18px; /* margin-top: 3px; */}

div.headline div.firstList div.flexLeft {
	min-height: 120px;
}

div.newsWrapper.singleLead div.standFirstContainer p.standfirst {
	width: 100%;
	margin: 0;
}

/* Ensure body content can grow in flex containers */
div.headline div.firstList div.newsWrapper div.flexLeft div.body {
	flex: 1;
	overflow: visible;
	min-width: 0; /* Allows text to wrap */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	word-wrap: break-word; /* Break long words */
	overflow-wrap: break-word; /* Modern property for word breaking */
	hyphens: auto; /* Enable hyphenation */
}

/* Improve date styling in firstList items */
div.headline div.firstList div.newsWrapper div.flexLeft div.body div.postedDate {
	font-size: clamp(0.6rem, 1.5vw, 0.7rem);
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: 0;
}

/* Improve teaser text styling in firstList items */  
div.headline div.firstList div.newsWrapper div.flexLeft div.body div.hide {
	font-size: clamp(0.85rem, 1.8vw, 0.95rem);
	line-height: 1.3;
	margin-top: 0;
	margin-bottom: 0.25rem;
	color: var(--text-secondary);
}

div.headline div.flexLeft {height: auto;min-height: 120px;}
div.headline div.firstList div.flexLeft {
	flex: 1;             /* fills the newsWrapper's flex-column space */
	align-items: stretch; /* image stretches to match body text height */
	height: auto;
	min-height: 0;
}
div.headline div.firstList div.storyImgContainer {
	flex: 0 0 100px;
	height: auto; /* stretches via align-items: stretch on flexLeft */
}

/* Modern Image Containers */
div.storyImgContainer {
	flex: 0 0 124px;
	position: relative;
	min-height: 70px;
	margin-top: 3px; 
	background-repeat: no-repeat;
	transition: all var(--transition-fast);
}

/* Remove border when hero image uses contain background-size */
div.heroImgContainer {
	border: none;
}

/* Override: Make hero image responsive to container height */
div.newsWrapper.singleLead div.heroImgContainer {
	flex: 1 1 50%;
	height: auto;
	min-height: 0;
	align-self: stretch;
	margin: 0;
	background-size: cover !important;
	background-position: center !important;
}
/* div.newsWrapper.singleLead div.flexLeft { height: 234px; } */ /*211px;} */

/* Modern Image Styling */
img.storyImg {
	min-width: 100%; 
	min-height: 100%; 
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	transition: all var(--transition-medium);
	object-fit: cover;
}

div.newsWrapper div.bodyhide div.hide {display: block;}

#allJobsList {z-index: 1000;}
#allJobsInner ul {list-style: none; padding-left: 0;}
#allJobsInner ul li {padding-bottom: 0.5em;}
#allJobsInner ul li a {text-decoration: none; color: #4D4F53;}
#allJobsInner ul li a:hover {
	color: #00896C;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #00896C;
}

.success {color: #00896C;}
.fail {color: #BD2701; }

button {cursor:pointer;}
#btn_sendEmail {width: 130px; height: 35px;}

button.disabled {
	cursor: auto;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none; /* Safari */
}

/**** 3 dot spinner ****/

#spinner {
	display:none;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

.lds-ellipsis {
	display: inline-block;
    position: relative;
    width: 72px;
    height: 16px;
    margin: 0 auto;
}
.lds-ellipsis div {
	position: absolute;
	top: 33px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #ccc;
	animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

#sendSpinner {display:none;}
#sendSpinner.lds-ellipsis div, #spinner.lds-ellipsis div {
	position: absolute;
    top: 4px;
    width: 10px;
    height: 10px;
    background: #FFF;
}

.lds-ellipsis div:nth-child(1) {
	left: 8px;
	animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
	left: 8px;
	animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
	left: 32px;
	animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
	left: 56px;
	animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes lds-ellipsis3 {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(0);
	}
}
@keyframes lds-ellipsis2 {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(24px, 0);
	}
}

/*** end 3 dot spinner ***/

@media screen and (max-width: 1140px) {
	/* div.headline div.flexLeft {height: 9.3vw;} */
	div.flexLeft {margin-bottom: 0.5em;}
	
	/* Regular story images - use viewport-based sizing with minimum */
	div.newsWrapper:not(.singleLead) div.heroImgContainer {
		flex: 0 0 max(16.5vw, 120px); /* Ensure minimum 120px width */
		min-height: 80px; /* Ensure minimum height */
	}
	
		/* Keep lead story children equal-height by avoiding fixed container height */
		div.newsWrapper.singleLead div.flexLeft {height: auto; min-height: 0;}
	div.newsWrapper.singleLead div.heroImgContainer {
		flex: 1 1 50%;
		min-height: 0;
	}
}

/* Keep lead image exactly equal-height with standfirst in the tablet/desktop transition zone */
@media screen and (min-width: 651px) and (max-width: 1140px) {
	div.newsWrapper.singleLead div.flexLeft {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 18px;
		align-items: stretch;
		height: auto !important;
		min-height: 0 !important;
	}

	div.newsWrapper.singleLead div.standFirstContainer,
	div.newsWrapper.singleLead div.heroImgContainer {
		height: 100%;
		min-height: 0 !important;
	}

	div.newsWrapper.singleLead div.heroImgContainer {
		width: 100%;
		max-width: none;
		margin: 0;
	}
}

@media screen and (max-width: 900px) {
	div.storyImgContainer {flex: 0 0 70px;}
}

@media screen and (max-width: 850px) {
	/* Ensure proper sizing around problematic 789px area */
	div.newsWrapper.singleLead div.heroImgContainer {
		flex: 1 1 50%;
		width: auto;
		max-width: none;
		min-height: 0;
	}
}

@media screen and (max-width: 800px) {

	div.ad728container, div.ad320container {background: none;}
	div.twinColumn.headline div.newsWrapper:first-child {width: 100%; margin-right: 24px;}
	div.twinColumn.headline div.firstList {width: 100%;}
	div.flexLeft{overflow: hidden; text-overflow: ellipsis}

	div.standFirstContainer {margin-right: 0;}
	div.newsWrapper.singleLead div.heroImgContainer {
		margin-bottom: 0;
		flex: 1 1 50%;
		min-height: 0;
	}
	

	div.twinColumn.headline div.newsWrapper.singleLead div.body a.leadStory,
	div.twinColumn.headline div.newsWrapper.singleLead div.bodyhide a.leadStory {
		font-size: clamp(1.8rem, 4.5vw, 2.5rem); 
		line-height: 1.2em;
	}
	/* form select {font-size: 1em;} */
	/* #searchPanel button.btn_search {padding: 15px 24px 15px 8px;}*/
	div.body {
		overflow: hidden;
		text-overflow: ellipsis;
	}

}

@media screen and (max-width: 650px) {

	.twinColumn {
		grid-template-columns: 1fr;
	}
	div.twinColumn.headline {
		grid-template-columns: 1fr;
	}

	div.singleLead div.body div.flexLeft {flex-direction:column-reverse; height: auto;}
	div.newsWrapper.singleLead div.heroImgContainer {
		min-height: 180px;
	}

	

	

	/* Navigation positioning handled in main styles */

	div.theSans {
		font-size: 1.2em;
		line-height: 0.9em;
	}

	.container {margin-left: 5%; margin-right: 5%;}
	
	.span70 {margin-top:24px; float:right; width: auto;}
	.span37, .span51 {width:100%;}
	.span28 {width:100%;}
	
	.ad-inline {display:none; }
	
	
	.col {float:none;}
	
	#featureCol {float:none; position:relative; width:78%}
	
	#rightAdsWrapper {position:absolute; right:0; top:0;}
	
	div.newsBody h4 {font-size: 1.1em; line-height: 1em;}
	/* label[for="nav-trigger"] {top:50px; position:fixed;} */

	#wrapper {margin-bottom:70px;}
	
	#articleIndex {
		position:relative;
		/* background:#fff; */
		/* font-size: 100%; */
		
		width: 100%;
		display: block;
		
		transition: all 0.2s;
	}

	#leftArrow {display:block; position: absolute; left:0; top:45%; transform: translateY(-50%); cursor:pointer ; cursor: hand;}
	#rightArrow {display:block; position: absolute; right:0; top:45%; transform: translateY(-50%); cursor:pointer ; cursor: hand;}

	#leftArrow img {transform: scaleX(-1);} /*flip right arrow */

	#carousel {
		width: 84%;
		margin-left: 8%;
		overflow: hidden; 
		position:relative;
		margin-top: -4%;
		/* border: 1px solid #00c; */
	}

	.carouselContainer {
		display:block;
		width: 100%;
		position: fixed;
		bottom: 0;
		background: #fff;
		border-top: 1px solid #ccc;
		box-shadow: 0 -4px 3px -3px#B9B9B9; 
		z-index: 400;
		padding-bottom: 1%;
	}

	.carouselHeading {  /* more news */
		display:block;
		margin-top: 2%;
		margin-bottom: 4%;
	}

	#carousel div.newsListBox, #carousel div.boxgreen, #carousel .freeContentWrapper {display:none;}

	#carousel div {
		background: none;
		white-space: nowrap;
		padding:0;
		margin:0;
		/* transition: all 0.3s; */
		position:relative;
	}

	#carousel ul {
		-webkit-margin-before: 0;
		-webkit-margin-after: 0;
		-webkit-margin-start: 0px;
		-webkit-margin-end: 0px;
		-webkit-padding-start: 0;
		position:relative;
		margin-bottom: 10px;
		display: block;
	}

	#carousel ul li {
		width: 100%;
		padding: 7px 0;
		font-weight: normal;
		text-align: center;
		font-size: 120%;
		/* border: 1px solid #F00; */
		display: inline-block;
		/* overflow: hidden; */
	}

	div.newsListWrapper ul li div.body, div.newsListWrapper ul li div.bodyhide  {
		white-space: nowrap; 
		text-overflow: ellipsis; 
		overflow:hidden;
		padding: 0 3% 0 3%;
		/* text-align: center; */
	}

	#carousel ul li a, #carousel ul li a:hover {
		text-decoration: none;
		color: #000;
		border-bottom-width: 0;
	}

	label[for="moreNewsButton"] {display: block; z-index: 100;}
	
	.moreNewsButton:checked ~ #newsArticle {
	  filter: blur(2px);
	  opacity: 0.8;
	}
	
	.moreNewsButton:checked ~ #articleIndex {
	  left: 2px;
	}

	.floatingBannerSpacer {display:block;}

	div.newsBody {font-size: 120%;}

	.carouselOverride {
		display: inline !important;
		text-align: left !important;
	}

	.carouselOverride div.body, .carouselOverride div.bodyhide {
		text-align: left !important;
		padding: 0 !important;
		font-family: var(--font-headline) !important;
		margin-bottom: -0.7em;
	}

	/*
	.carouselOverride div.bodyhide {
		 display: none;
	}
	*/

	.carouselOverride div.body a, .carouselOverride div.bodyhide a {
		/* color: #BD2701 !important; */
		padding: 0 !important;
		font-size: 120% !important;
	}

	div.newsListWrapper ul li.carouselOverride {
		margin-top: -0.6em;
	}

	div.newsListWrapper ul li.carouselOverride div.body a {
		font-size: 1.2em !important;
		padding: 0;
	}

	
	.newsEndBannerAds, .sideBannerAds {
		display: none;
	}

	.bottomBannerAds {
		display: block;
		position: relative;
	}

	.bottomBannerAds div.ad.ad728, .bottomBannerAds div.ad.ad320 {
		
		position:absolute;
		top:0;
		left: 0;
		right: 0;
	
		margin:0;
		padding:0;
	}

}

@media screen and (max-width: 560px) {

	div.twinColumn.headline div.firstList div.newsWrapper div.flexLeft div.body a {
		line-height: 1.3;
		font-size: clamp(0.9rem, 2.1vw, 1.05rem) !important;
		color: #BD2701 !important;
	}
	
	/* Responsive hide text for 560px breakpoint */
	div.headline div.firstList div.newsWrapper div.flexLeft div.body div.hide {
		font-size: clamp(0.65rem, 1.6vw, 0.8rem);
	}
	
	div.twinColumn.headline div.newsWrapper.singleLead div.body a.leadStory, 
	div.twinColumn.headline div.newsWrapper.singleLead div.bodyhide a.leadStory {
		font-size: clamp(1.5rem, 4vw, 2rem);
		line-height: 1.1em;
		padding-bottom: 8px;
		display: block;
	}
	div.newsWrapper.singleLead div.heroImgContainer {
		flex: 1 1 50%;
		max-width: none;
		min-height: 150px;
	}
	div.headline div.firstList div.flexLeft {height: auto; min-height: 80px;}
	div.headline div.firstList div.storyImgContainer{flex: 0 0 124px;}

	div.storyImgContainer {flex: 0 0 124px; }

	/* Keep lead hero minimum height at this breakpoint */
	div.newsWrapper.singleLead div.heroImgContainer, div.headline div.heroImgContainer {
		margin-bottom: 0;
		width: auto; /* Let flex-basis control width */
		height: auto; /* Let aspect ratio determine height */
		min-height: 150px;
	}
	/* div.newsWrapper.singleLead div.flexLeft, div.headline div.flexLeft {display: block; height: auto;} */

	p.standfirst {
		font-size: clamp(1rem, 2.5vw, 1.2rem); 
		line-height: 1.3em;
	}

	div.twinColumn {display:block;}
	.twinColumn div.newsWrapper:not(.singleLead) {
		width: 100%;
		min-height: 120px; /* Smaller consistent height on mobile */
	}
	
	/* Adjust image and layout for mobile (exclude single lead) */
	.twinColumn div.newsWrapper:not(.singleLead) div.flexLeft {
		height: 100px; /* Smaller height on mobile */
	}
	
	.twinColumn div.newsWrapper:not(.singleLead) div.storyImgContainer {
		flex: 0 0 80px;
		aspect-ratio: 5 / 4;
		height: auto;
	}

	div.newsWrapper div.body {margin-bottom: 0.2em;}	

	div.newsListWrapper.jobsWrapper div.newsWrapper ul {padding: 0 ; margin: 0;}
	div.newsListWrapper.jobsWrapper div.newsWrapper:first-child ul {padding-top: 1em ; margin: 0;}
	div.newsListWrapper.jobsWrapper {padding-bottom: 1em;}

	

	

	div.theSans {
		display:none;
	}

	div.theSans .mastheadTagline {
		display: none;
	}

	div.theSans .mastheadDateText {
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	
	

	label[for="nav-trigger"] {color:#FFF;font-size:0;}

	div.menuContainer {width: 80px; gap: var(--spacing-xs);}

	/* label[for="nav-trigger"] {top:36px;} */


	div.newsListWrapper ul li {
		font-size: 150%;
	}

	.flexLeft.wrap-560 {display: block; overflow-wrap: break-word; }
	.flexLeft.wrap-560 a, a.fitWidth {font-size:4.5vw;}
}

@media screen and (max-width: 420px) {

	div.twinColumn.headline div.firstList div.newsWrapper div.flexLeft div.body a {
		line-height: 1.3;
		font-size: clamp(0.85rem, 2vw, 1rem) !important;
		color: #BD2701 !important;
	}
	
	/* Responsive hide text for 420px breakpoint */
	div.headline div.firstList div.newsWrapper div.flexLeft div.body div.hide {
		font-size: clamp(0.6rem, 1.4vw, 0.75rem);
	}
	
	/* Further adjust Most Popular and More News for small screens (exclude single lead) */
	.twinColumn div.newsWrapper:not(.singleLead) {
		min-height: 110px;
	}
	
	.twinColumn div.newsWrapper:not(.singleLead) div.flexLeft {
		height: 85px;
	}
	
	.twinColumn div.newsWrapper:not(.singleLead) div.storyImgContainer {
		flex: 0 0 70px;
		aspect-ratio: 5 / 4;
		height: auto;
	}

	

	

	

	div.theSans .mastheadTagline {
		display: none;
	}

	div.theSans .mastheadDateText {
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 0.82rem;
	}

	
	
	
	div.iconGroup img {
		width: 20px;
		height: 20px;
	}

	#weekday {display:none;}

	/* label[for="nav-trigger"] {top:31px;} */
	

	/*
	p.breakout {
		font-size: 1.2em;
	}
	*/

	div.printBar {
		font-size: 90%;
	}
	div.newsListWrapper ul li {
		font-size: 110%;
	}

	h1 {
		font-size:1.6em; /*!important;*/
	}

	
	div.newsBody h1.static {
		font-size:1.5em;
	}

	/*
	div.heroImgContainer {text-align: center; margin-bottom: 5px;} 
	div.headline div.flexLeft {display: block;}
	*/

	/* div.heroImgContainer {flex: 0 0 100px; } */
	div.storyImgContainer, div.headline div.firstList div.storyImgContainer {flex: 0 0 100px; }

	div.ad728container, div.ad320container {
		margin-bottom: 8px;
	}

}

/* Mobile Ad Display Logic */
div.ad728container {
	display: block;
}

div.ad320container {
	display: none;
}

/* 480px so large phones (iPhone Pro Max / Plus are 428-430 CSS px) get the
   320 mobile banner, not the 728 desktop one. */
@media screen and (max-width: 480px) {
	div.ad728container {
		display: none;
	}

	div.ad320container {
		display: block;
	}
}

@media screen and (max-width: 320px) {

	div.twinColumn.headline div.firstList div.newsWrapper div.flexLeft div.body a {
		line-height: 1.3;
		font-size: clamp(0.8rem, 1.8vw, 0.9rem) !important;
		color: #BD2701 !important;
	}
	
	/* Responsive hide text for 320px breakpoint */
	div.headline div.firstList div.newsWrapper div.flexLeft div.body div.hide {
		font-size: clamp(0.55rem, 1.2vw, 0.65rem);
	}

	
	div.newsWrapper div.body a {
		font-size: 1.7em;
		line-height: 1.7em;
	}
	

	div.newsWrapper div.body {
		font-size: 0.8em;
		line-height: 1.2em;
	}

	div.featureWrapper div.bodyblue a {
		font-size: 1.7em;
	}

	div.newsBody h1.static {
		font-size:1.4em;
	}

	div.newsBody {font-size: 110%;}

	#articleIndex {font-size: 0.9em;}
}

@media screen and (orientation:landscape) and (max-width: 768px) {
	

	

	

	div.theSans {
		display: block;
		font-size: 1em;
	}

	#inline-date {
		display: none;
	}

	label[for="nav-trigger"] {
		height: 22px;
		width: 24px;
		color: #FFF;
		font-size: 0;
	}

	div.menuContainer {width: 70px; height: 24px; gap: var(--spacing-xs);}

	ul.navigation {
		overflow-y: scroll;
	}
}