a:link {
	color: #00FF00;
}

a:visited {
	color: #00FF00;
}
*/
a:hover {
	text-decoration: underline;
}
a:active {
	color: #FF0000;
}
.bodyBg {
	background-color: #0099FF;
	color: #FFFFFF;
}
body {
	background-color: #0099FF;
	color: #FFFFFF;
	margin: 0;
}

/* Base improvements for new semantic layout */
* { box-sizing: border-box; }
body { font-family:  Arial, Helvetica, sans-serif; line-height: 1.45; }

/* Prevent large images from overflowing narrow viewports */
img, figure img, .content img, .two-column img, table img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Ensure tables stay within container and allow horizontal scroll if needed */
table { max-width: 100%; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Header */
.site-header{ display:flex; align-items:center; gap:16px; padding:12px 0; }
.brand img{ display:block; }
.site-title{ font-size:20px; margin:0; color:#FFFFFF; }
.page-title{ font-size:16px; font-weight:bold; color:#FFFFFF; margin-top:4px; }
.motorway-id img{ display:block; max-width:120px; height:auto; }

/* Site container and two-column layout */
.site-container{
	max-width: 1000px;
	margin: 0 auto;
	padding: 12px;
}
.layout{
	display: grid;
	grid-template-columns: 240px 1fr;
	grid-template-areas: "sidebar content";
	gap: 20px;
}
.sidebar{ padding:8px; grid-area: sidebar; }
.content{ padding:8px; grid-area: content; min-width:0; }

/* Backwards-compatible class used by edited pages */
.two-column{
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 16px; /* add spacing between sidebar and content */
	align-items: start;
	width: 100%; /* match table width="100%" */
	/*border: 2px solid #FFFFFF; /* match border=2 bordercolor="#FFFFFF" */
 	/*background-color: #0000FF; /* match bgcolor="#0000FF" */
 	/*padding: 0; /* match cellpadding=0 */
}

/* Ensure explicit grid placement and responsive fallback */
.two-column > .sidebar{ grid-column: 1 / 2; position: relative;  }
.two-column > .content{ grid-column: 2 / 3; position: relative;  }

@media (max-width: 740px){
	.two-column{ grid-template-columns: 1fr; }
	.two-column > .sidebar,
	.two-column > .content{ grid-column: auto; }

	/* On narrow screens, show content first then sidebar */
	.two-column > .content { grid-row: 1; }
	.two-column > .sidebar { grid-row: 2; }
}

/* Replace legacy blue vote/comment outer tables with semantic block */
.vote-block{
	border: 2px solid #FFFFFF;
	background-color: #0000FF;
	width: 100%;
	margin: 0;
}
.vote-block .subheader{ display: block; padding: 10px 12px; color: #FFFF00; }
.vote-block .vote-inner{ padding: 8px 12px; }

/* Quote box used on service pages */
.quote {
  border: 2px solid #ffffff;
  background: #001f4d; 
  color: #e6f0ff;
  padding: 12px;
  border-radius: 6px;
  margin: 6px 6px; /* outer spacing between border and next object */
}
.quoteHeader {
  font-weight: 700;
  color: #ffd966;
  margin-bottom: 8px;
}
.quoteDetail {
  font-style: italic;
  margin: 0;
  color: #dfefff;
}
/*end of quote box*/
/* Simple media row used inside content to show paired images without sidebar styles */
.media-row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 6px 0;
	flex-wrap: wrap; /* allow wrapping when viewport is narrow */
}
.media-row img {
	width: 100%;
	max-width: 288px;    /* cap image size so text column can sit beside it */
  height: auto;
  display: block;
  border-radius: 4px;
}
/* Gallery of multiple images inside the secondary column: stack vertically */
.media-gallery {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
	min-width: 0;
	flex: 0 0 288px; /* keep gallery column at image width when space allows */
	max-width: 288px;
}
.media-gallery--row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}
.media-body {
  flex: 1 1 0; /* allow text column to shrink/grow */
  min-width: 0;        /* allow text to truncate/wrap inside flex */
}
/* small screens: stack vertically */
@media (max-width: 520px) {
  .media-row { flex-direction: column; }
  .media-row img, .media-gallery { max-width: 100%; width: 100%; flex: 0 0 auto; }
}

/* Soften headings and sidebar text weight */
.two-column .Header{ color: #FFEE99; font-weight:600; }
.Pagesheader{ font-weight:600; color:#FFFFFF; }


/* Sidebar */
.sidebar{ 
	padding:8px; 
 border: 6px solid #ffffff;
 	 border-radius: 10px;
	 background-color: #0000FF; 
	}
.sidebar ul{ list-style:none; padding:0; margin:0; }
.sidebar li{ margin:6px 0; }

/* Comment list styling: show each comment as a small card */
.content .maintext ul { list-style: none; padding: 0; margin: 0; }
.content .maintext ul li {
	padding: 10px 12px;
	margin: 8px 0;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.06);
	border-left: 4px solid #ffd966;
	border-radius: 6px;
	line-height: 1.35;
}
.content .maintext ul li small { display: block; color: #cfe6ff; margin-top: 6px; font-weight: 600; }

/* Content */
.content{ padding:8px;
 border: 6px solid #ffffff;
 background-color: #0000FF; 
 	 border-radius: 10px;
	padding: 4px; }
.content h2, .content h3{ margin-top:0; color:#FFFF00; }
.maintext{ color:#FFFFFF; font-weight:normal; }

/* Operators list: normalize headings and spacing for current/past lists */
.operators-list .operator h2 {
	font-size: 20px;
	margin: 0 0 6px;
	color: #FFFF00;
}
.operators-list .operator { margin-bottom: 14px; }

figure{ margin:0 0 16px 0; }
figcaption{ font-size:0.95em; color:#EEEEEE; }

/* Timeline grid: compact two-column list (date + description) */
.timeline {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 8px 16px;
	align-items: start;
}
.timeline-item { display: contents; }
.chron-date {
	grid-column: 1;
	color: #ffd966;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.chron-desc {
	grid-column: 2;
	margin: 0 0 8px 0;
	color: #FFFFFF;
}
.chron-desc .motorway { color: #cfe6ff; font-weight: 600; margin-left: 8px; font-size: 0.95em; }

@media (max-width: 520px) {
	.timeline { grid-template-columns: 1fr; }
	.timeline-item { display: block; }
	.chron-date { display: block; margin-bottom: 4px; }
	.chron-desc { grid-column: auto; margin-left: 0; }
}

.pollBg {
	background-color: #FF9900;
}

/* Center main layout tables horizontally */
body > table,
table[width] {
	margin-left: auto;
	margin-right: auto;
}
/*
.Title {
	font-family: "Transport",Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;


}
*/
.Header {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #FFFF00;
}
.subheader {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFF00;
}
.Pagesheader {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
}
.maintext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
	
	color: #FFFFFF;
}

/* Hero / Road-sign style navigation (replaces image-map header) */
.hero{
  max-width: 740px;
  margin: 0 auto 10px;
  padding: 12px 6px;
  text-align: center;
}
.hero .site-title{ font-size:20px; margin:0 0 8px; color:#FFFFFF; }
.sign-nav{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center; }
.hero .site-title{ font-size:20px; margin:0 0 8px; color:#FFFFFF; font-family: 'TransportM', Arial, sans-serif; }
.sign-nav{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center; }
.sign{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:150px; height:72px; padding:6px 8px; background:#0000ff; color:#FFFFFF; text-decoration:none; font-weight:700; border-radius:8px; border:6px solid #ffffff; box-shadow:0 4px 0 rgba(0,0,0,0.35); text-align:center; line-height:1.1; font-family: 'Transport', Arial, sans-serif; box-sizing:border-box; }
.sign:focus{ outline:3px solid #ffd24d; outline-offset:3px; }
@media (max-width:560px){ .sign{ width:48%; } }

/* Down-arrow under sign text */
.sign::after{
	content: "";
	display:block;
	width:0;
	height:0;
	border-left:8px solid transparent;
	border-right:8px solid transparent;
	border-top:10px solid #FFFFFF;
	border-bottom:0;
	margin-top:8px;
}

/* Keep existing image-maps as fallback; consider removing later once fully converted */

@font-face{
  font-family: 'Transport';
  src: url('ft/th.woff2') format('woff2'),
       url('ft/th.woff') format('woff'),
       url('ft/th.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'TransportM';
  src: url('ft/tm.woff2') format('woff2'),
       url('ft/tm.woff') format('woff'),
       url('ft/tm.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Outer sign */
.motorway-sign {
	width: 100%;
	max-width: 740px;
	box-sizing: border-box;
	background: #0a19ff; /* motorway blue */
	border-radius: 14px;
	padding: 0;
	margin: 0 auto 4px;
}

/* White border */
.sign-inner {
  border: 6px solid #ffffff;
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Text block */
.sign-text {
  color: #ffffff;
  font-family: "TransportM", Arial, sans-serif;
  font-size: small;
}

.road-id {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 6px;
}

.msa {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 6px;
  color:#FFFFFF; 
}
.sign-nav-road {
	display: grid;
	grid-template-columns: repeat(3, minmax(140px, 1fr));
	
	justify-items: center;
	align-items: start;
	font-size: small;
	color: #FFFFFF;
	font-family: 'TransportM', Arial, sans-serif;
}
.sign-nav-road a {
	text-decoration: none;
	background: #0000ff;
	color: #FFFFFF;
	width: 100%;
	text-align: left;
	font-weight: 500;
	font-size: medium;
	line-height: 1.0;
}
@media (max-width:520px) {
	.sign-nav-road { grid-template-columns: 1fr; }
	.media-row img { max-width: 100%; width: 100%; }
	.media-gallery { width: 100%; }
}


/* Mobile: show motorway road-id above the links and make links wrap into multiple rows */
@media (max-width:520px) {
  .motorway-sign .sign-inner { flex-direction: column; align-items: stretch; gap: 8px; }
  .motorway-sign .road-id { order: -1; display: block; font-size: 36px; text-align: center; margin: 6px 0; }
  .motorway-sign .sign-nav-road { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
  .motorway-sign .sign-nav-road a { white-space: normal; padding: 6px 8px; text-align: center; }
}
.sign-nav-road {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 10px 12px;
  justify-items: center;
  align-items: start;
  font-size: small;
  color: #FFFFFF;
  font-family: 'TransportM', Arial, sans-serif;
}

.title {
  font-size: 30px;
  line-height: 1.1;
  font-weight: normal;
}

.subtitle {
  font-size: 22px;
  margin-top: 6px;
}

/* Distance box */
.distance {
  color: #ffffff;
  font-size: 32px;
  white-space: nowrap;
  padding-left: 12px;
}

/*welcome container*/
.welcome-container {
	max-width: 740px;
	margin: 0 auto 20px;
	padding: 12px;
	background-color: #0066cc;
	border-radius: 8px;
	color: #ffffff;
	font-family: "TransportM", Arial, Helvetica, sans-serif;
	font-size: small;
}
.welcome-container h2, .welcome-container h1 {
	margin-top: 0;
	color: #ffff00;
}
.welcomepic {
	float: left;
	margin: 0 0 10px 10px;
	border: 4px solid #ffffff;
	border-radius: 8px;
}

/*roadworks sign*/

/* Outer sign */
.roadworks-sign {
	max-width: 740px;
  background: #ffe20a; 
  border-radius: 14px;
  padding: 0px;
  width: fit-content;
  margin: 0 auto 4px;
}


.roadworks-sign-inner {
  border: 6px solid #000000;
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Text block */
.roadworks-sign-text {
  color: #000000;
  font-family: "Transport", Arial, sans-serif;
  font-size: small;
}

.roadworks-sign-text a {
	color: #0000FF;
	text-decoration: underline;
}
.roadworks-sign-title {
  color: #000000;
  font-family: "Transport", Arial, sans-serif;
  font-size: large;
}

/*Service area page*/

/* Details header: one row, three columns */
.details-header{
	display:flex;
	align-items:center;
	gap:16px;
	max-width:1000px;
	margin: 0 auto 12px;
	padding:12px;
}
.details-col{ box-sizing:border-box; }
.details-left{ flex:0 0 280px; }
.details-center{ flex:1; text-align:center; }
.details-right{ flex:0 0 140px; text-align:right; }
.details-title .title{ margin:0; color:#FFFFFF; }
.details-title .subtitle{ color:#EEEEEE; margin-top:6px; }

.motorway-number{
	font-family: 'Transport', 'TransportM', Arial, sans-serif;
	font-size:56px;
	font-weight:800;
	color:#FFFFFF;
	line-height:1;
}
.motorway-sign .sign-inner{ 
	justify-content:center;
 }

 .motorway-sign .sign-inner .sign-text{
	font-size: large;
	width: 100%;
	text-align: center;
	display: block;
 	margin: 0;
}

@media (max-width:700px){
	.details-header{ flex-direction:column; text-align:center; }
	.details-left, .details-right{ flex:0 0 auto; }
	.details-right{ text-align:center; }
}