@charset "utf-8";
/* 2019-05-06u: Convert document to utf-8, code must be first line, no excess spaces. Not necessary unless conflict, done so DW loads as utf-8. */
/* Pseudo-class hover MUST COME AFTER pseudo classes link and visited to work */
/* Changes here not seen in localhost, update localhost file also. */

/* div[id] {background-color: #FFF07F;} /* naples yellower */ /* 2019-04-06u: highlight divs */

/* CSS for image enlargement at eof. */
/* div.main has overlapping configuration, default, <=599px and >600px? */
/* classes table.mainmiddle, .mainabove, .mainbelow still used? Delete if not (2019-04-28u: Found on old versions of school details include) */

/* 2019-05-04u: List of colors used. If change one, change here first then do F&R all for same color. Use # in F&R so comment color refs don't get changed. */
.color-guide { /* 2019-05-04u: Selector name not used except in .css file as placeholder for color code reference */
	background-color: #E3F0FA; /* Light blue. For Hx, th, th.navigationth (unset), .highlightblue, tr.shaded, a:hover, .toplink:hover, caption. Lighter: DFF1FF, bluer: E5FEFF. */
	border: 1px solid #3593DB; /* Blue. For Hx bottom, block borders (as .outline-note), blue blue was 0094FF */

	background-color: #F3F3F3; /* .highlightgrey */ /* darker EFEFEF; */
	border: 1px solid #9D9D9D; /* .highlightgrey */
	background-color: #E9E9E9; /* .highlightgrey2 */
	border: 1px solid #9D9D9D; /* .highlightgrey2 */
	background-color: #DEDEDE; /* .highlightgrey3 */
	border: 1px solid #9D9D9D; /* .highlightgrey3 */
}
.textblue { color: #003399; }
.textgrey { color: #999999; }
.textgreen { color: #009900; }
.textmagenta { color: #AA005E; }
.textpink { color: #FF55AA; }
.textpurple { color: #550055; }
.textorange { color: #EC7600; }
.textred { color: #CC0000; }
.textyellow { color: #A8AC0B; }

/* 2019-05-04u: List of table classes */
table {} /* Default */ /* 2019-05-14u: Added max-width: 100% !important; to @media for small screen. Disabled, then narrow tables don't center. */
table.default-center {} /* For tabular information in general content, rather than define properties for table {}, might result in UC for other tables. */
/* 2019-05-14u: table-layout:fixed; might not be necessary if width specified. */
table.center-equalw-cols-2 { table-layout: fixed; max-width: 80%; } /* 2019-05-14u: See falconcity-of-wonders.php. Or colgroup, col, width. */
table.center-equalw-cols-2 th { width: 50%; } /* 2019-05-14u: Equal column width tables. See falconcity-of-wonders.php. */

table.category-items { max-width: 80%; } /* 2019-05-06u: Col1 categories, Col2 CSV items, eg shopping malls, bank branches. Portrait 90% or 100%. */
table.contents-page { table-layout: fixed; } /* 2019-05-05u: For things-to-do-in-dubai.php and similar. Disable row highlight on hover. */
table.data {} /* Not used or redundant? */
table.data-numerical {} /* Not defined yet. Use for predominantly numerical data, set table.data-numerical tr { text-align: right; } as default. See youth-hostel-dubai.php (not done yet). */
table.details {} /* 2019-05-01u: Not defined yet. For detail pages from DB e.g. schools, nursery, tertiary, organisations ... */
table.fees-annual {} /* For schools, but also for any other organisation with similar fee structure. */
table.fees-institute {} /* Not defined yet */
table.fees-nursery {} /* Not defined yet */
table.fees-services {} /* 2019-05-02u: No properties defined yet. Example on british-institute-for-learning-development.php */
table.fees-tertiary {} /* Not defined yet */
table.form-selector {}
table.image-row-top {}
table.index {} /* 2019-04-09u: New for index page format */
/* Tables for lists of items with item-details in each row. Use e.g. table.list-projects or -project? */
table.list {} /* 2019-05-14u: Not defined yet. */
table.list-category-member-details {} /* 2019-05-14u: Not defined yet. Row details of category members e.g. supermarkets, embassies, bank branches ... */
/* 2019-05-14u: Possible selector names (too many, consolidate to few or one): list-bank-branches, list-banks, list-branches, list-category-branches, list-consulates, list-diplomatic, list-education, list-embassies, list-gis, list-mall-outlets, list-malls, list-outlets, list-projects, list-retail, list-services, list-shops, list-stores, list-supermarket-branches, list-supermarkets, list-theme-park-rides, list-theme-parks, list-traffic-fines, list-visas */
  table.list-education {} /* 2019-05-07u: New, for nurseries, schools, institutes, tertiary, etc. */
  table.list-projects {} /* 2019-05-14u: Was project-list. 2019-05-06u: Not defined yet. For developments with dates, value, location, etc. */
  table.list-supermarket-branches-spinneys {} /* 2019-05-14u: Not defined yet. Default to more general table.list- selector? */
  table.list-visas {} /* 2019-05-14u: Was visa-list. 2019-05-06u: Not defined yet. On visa-list-uae.php until better selector name. Or default ok? */
table.main {} /* Replaced by div.main, redundant, delete but do F-all first to check. */
table.mainabove {} /* Not used, redundant, delete? */
table.mainmiddle {} /* Not used, redundant, delete? */
table.mainbelow {} /* Not used, redundant, delete? */
table.navigationsection {} /* For footer category navigation table, rename as nav-category-table or nav-related-list or similar? */
table.timings {} /* 2019-05-18u: Not defined yet. Example: arabian-center-mall.php. */
table.timings-nursery {} /* 2019-05-14u: Not defined yet, only on kotwals-nursery-abu-dhabi.php so far, caption ... nursery timings */

th.sub-heading { font-weight: normal; text-align: left; } /* 2019-05-14u: Added to replace <h5> or <Hx> in tables with multi-level headings. Is better accessibility? So far only spinneys.php. */

/* 2019-04-23u: padding-inline-start gives validation errors, is experimental. Why not just use padding-left? Changed ul.index and #table-index ol */
/* 2019-04-22u: Change breakpoints from 600px and 601px back to 599px and 600px (was changed 2019-04-15u but error). */
/* 2019-04-20u: Set .footertext font size to small instead of x-small? */
/* 2019-04-20u: Check and set Hx font-size and font-weight. Start point: https://www.w3.org/QA/Tips/font-size */
/*
UA style sheet, any prescribed relationship between sizes? Chrome UA style sheet:
H1 2em bold, +33.3%, 32px if 1em = 16px
H2 1.5em bold, +28.2%, 24px if 1em = 16px
H3 1.17em bold, +17%, 18.72px if 1em = 16px
H4 x bold [No font size set, so inherits value from container if set, assume default is medium (16px, 12pt?)], +20.5% if 1em, assume 16px.
H5 0.83em bold, +23.9%, 13.28px if 1em = 16px
H6 0.67em bold, 10.72px if 1em = 16px

Try this:
32px  24px  20px    16px bold 16px normal 13px normal
24pt  18pt  14.5pt  12pt      12pt        10pt
2em   1.5em 1.25em  1em       1em         0.8em
XXL   XL    >L      M         M           S
L = 18px 13.5pt 1.125em?
20px = 14.5pt 1.25em
21px = 15pt 1.3em

Mobile
1.25em bold 1.125em bold 1em bold 1em normal 1em normal 0.8em normal

Update settings changed before 2019-04-20u: Use em so Hx font-size reduced proportionally depending on container e.g. td default font-size set to small. Need to give h4 an em, seems to be not set in UA style sheet.
*H1 large bold > 2em bold [Why was it changed from 2em to large? Ans: to make same size as h2, but that will depend.]
H2 1.5em bold
H3 1.17em bold
H4 x bold > 1em bold
*H5 medium normal > 1em normal
*H6 small normal > 0.83 normal
*/

/* 2019-04-20u: td > h1 { background-color: #3593DB; } /* 2019-04-20u: Set to dark blue so stands out if anywhere there is a td > h1. Do a F-all on "><h1" another day. */ /* [Copy of probably redundant line added.] */
/* 2019-04-20u: Dont use, affects updated Hx styles in td elements. Do F-all to delete class="nomargin" in td > Hx elements. Check if .nomargin used anywhere else. [Copy of .nomargin {} comment] */
/* 2019-04-17u: Why is there #table-index ol {} and ul.index {}? Inconsistent? */
/* 2019-04-15u: Put all @media classes at EOF so rules come after any other declarations. Is one theory. There are others ... */
/* 2019-04-15u: Changed breakpoints from 599px and 600px to 600px and 601px */
/* 2019-04-XXu: Added accordion effect to index page, CSS and JS on page, not here. */
/* 2019-04-09u: Index table changes: ul.index{list-style-position: outside>inside; padding-inline-start: 0px; margin-right: 0>1px; margin-left: 12>1px;} #table-index h5 {} #table-index ol {} */
/* 2019-04-09u: Reordered table related definitions alphabetically. */
/* 2019-04-07u: Don't use <b> or <i> elements in html (Find all, done, all deleted), use <strong> or <em> */
/* 2019-03-31u: Update, use CSS3. */

/* 2019-04-28u: Deleted scrollx and scrolly, not used, was only used for testing. */

/* table[id] {background-color: #FFF07F;} */ /* naples yellower */ /* 2019-04-02u: Make fee tables background yellow (and any other table with id=""). */

/* 2019-04-20u: Added class="form-selector" for selection table form. */
table.form-selector {
	margin: 20px auto; /* 2019-04-20: Quick hack to add T&B spacing. Default for table is 0 auto. Should do it for form not table? */
}
/* 2019-04-21u: CSS3 to auto-resize images within containing <div> or <td>. Also works if set for iframe videos, see test page video. */
img {
	max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    height: auto; /* 2019-04-21u: Width and height of image adjust proportionally but not container (see top image row) unless add this line. */
    width: auto; /* 2019-04-21u: Assumed to be needed similar to height: auto; but not found any images on site to check this setting. */
}
/* 2019-04-10u: CSS attributes to replace obsolete HTML attributes. Do simple F&R for e.g. <p align="center"> to <p class="center">, but careful not to end up with > 1 class per element */
.right { text-align: right; } /* 2019-04-20u: Added to replace html elements containing align="right" with class="right". */
.left { text-align: left; } /* 2019-04-20u: Added to replace html elements containing align="left" with class="left". */
.center { text-align: center; } /* 2019-04-20u: Added to replace html elements containing align="center" with class="center". */
/* 2019-04-20u: Next two lines were in .center {}. Delete, maybe was for table-default-center or something? */
/*	margin: 0 auto; /* 2019-04-19u: margin+max-width is alternative centering instruction. Conflict if use with text-align? */
/*	max-width: fit-content; /* 2019-04-19u: margin+max-width is alternative centering instruction. Conflict if use with text-align? */

.nowrap {white-space: nowrap;}
/* End 2019-04-10u: Add CSS attributes ... */

/* 2019-04-10u: New CSS attributes */
q {font-style: italic; color: #555555; background-color: #EEEEEE;} /* Default is quotation marks only */
/* End 2019-04-10u: New CSS attributes */

body {
/*	background-color: #EFEFEF; /* set in @media depending on width */ /* FFEABF; /* light brown */
/*	font-size: 76%; */ /* to use with ems < 1 and IE but doesn't seem to do the trick */
	margin-top: 0px;
	margin-bottom: 5px; /* top of main table almost flush with top of browser */ /* 2019-04-10u: What? */
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; /* set in @media */
/* 2019-04-15u: Don't allow long URLs (or words) to overflow container, problem more on mobile. What effect on tables on mobile? URL nowrap persists on Opera mobile older versions (v45 no but v50 is ok). Is ok in most other browsers says caniuse. */
	overflow-wrap: break-word; /* 2019-04-17u: Is word-wrap renamed. Not recognized by MS Edge? */
	word-wrap: break-word; /* 2019-04-17u: Renamed as overflow-wrap. */
/*	word-break: break-word; /* 2019-04-16u: Try without, breaks words in tables e.g. "map" in carrefour-dubai.php. Is similar to overflow-wrap anyway. */
	hyphens: auto; /* 2019-04-15u: 'auto' not supported in Chrome? */
}
button, input, select, textarea { /* fieldset, label? */ /* inherit not supported in IE < 8? */
	font-family: inherit; /* for elements with font-family property not inherited by default */
	font-size: inherit; /* same for font-size? */
}
p {
/*	margin-left: 10px;
	margin-right: 10px; */ /* 2019-04-17u: Remove, padding 10px set in div.main. */
}
h1 {
/*	font-size: large; /* reduces size from default to same as h2 */ /* 2019-04-20u: Delete, see Hx definition list. */
}
/* 2019-04-20u: Hx font settings for desktop. */
h1 { font-size: 1.5em; } /* 2019-04-20u: Leave as UA default 2em. Or use 1.5em if want same size as h2. */
h2 {} /* 2019-04-20u: Leave as UA default 1.5em. */
h3 { font-size: 1.25em; } /* 2019-04-20u: Increase to 1.25em (20px 14.5pt) from UA default 1.17em. */
h4 { font-size: 1em; } /* 2019-04-20u: UA does not specify font-size? Or depends on browser? */
h5 { font-size: 1em; font-weight: normal; } /* 2019-04-20u: Increase from 0.83em but set to normal. Default UA Chrome 0.83em. */
h6 { font-size: 0.8em; font-weight: normal; } /* 2019-04-20u: 0.8em 10pt Default UA Chrome 0.67em. */

h1 {
	margin-top: 10px; /* 2019-04-20u: Disabled class="nomargin". Set default margin for T and B. */
	margin-bottom: 10px; /* 2019-04-20u: Disabled class="nomargin". Set default margin for T and B. */
}
h2, h3, h4, h5, h6 { /* h1 not included to leave as plain text in page header */ /* 2019-04-20u: Copy background-color and border-bottom to th. */
/*	border-bottom: 1px solid #00A7B1; /* darkish blue */
	background-color: #E3F0FA; /* light blue */
	border-bottom: 1px solid #3593DB; /* blue blue was 0094FF */
	padding-left: 10px; /* 2019-04-17u: Change from 5px to 10px to align with other elements, default to 10px for headings. */
	padding-right: 10px; /* 2019-04-17u: Add default 10px padding. */
	margin-left: -10px; /* 2019-04-17u: Compensate for default div.main padding 10px */
	margin-right: -10px; /* 2019-04-17u: Compensate for default div.main padding 10px */
	margin-top: 10px; /* 2019-04-17u: Set default margin for T and B. */
	margin-bottom: 10px; /* 2019-04-17u: Set default margin for T and B. */
}

/* div { margin: 10px; } /* 2019-05-14u: Instead of repeatedly setting margins for different div.selectors, try a default setting. Fail, bad idea. */
div.ad-top { margin: 10px; text-align: center; } /* 2019-05-14u: add some whitespace above and below. */
div.main { /* 2019-04-17u: Replaces table.main removed from main content html, forgot to add class earlier. Default UAE block border is gray. */
	border: 1px solid #9D9D9D; /* 714D00; /* main table brown thin border */
	padding: 10px; /* 2019-04-17u: Stop text up against border. But review top and bottom. Adjust heading margins -ve to compensate. */
}
div.pressrelease { /* 2019-04-17u: Changed from .pressrelease to div.pressrelease. All elements with class="pressrelease" changed to div. */
	border: 1px solid gray;
	background-color: #F9F9F9; /* 2019-04-17u: Unset or set to white for print CSS. */
	padding: 10px; /* 2019-04-17u: Change from 5px so is same as div.main. */
	margin: 20px auto; /* 2019-04-21u: Use one margin for all sides, and auto LR for centering div block. Dont need container div to center. */
	font-style: italic;
	width: 90%;
}

.tr-heading { /* 2019-04-16u: For heading elements in td, tr. So far only h4 in list-of-restaurants-in-dubai.php. */
/* margin: 0 -4px; /* 2019-04-16u: Override default heading element margins, and compensate for th and tc padding (-ve padding not permitted). */ /* 2019-04-21u: Disable, redundant after editing other CSS for th to default to blue background, and Hx in tr, td. F-all and delete - done, was only restaurants. */
}

tr { vertical-align:top; } /* 2019-04-09u: Default to top of cell if content on multiple lines in one cell (<br> or auto), td and th should inherit. */
tr:hover { background-color: #EAEAEA; } /* EAEAEA gray, FFF07F yellow */
tr.index:hover { background-color: transparent; } /* Unset or none are not valid values for background-color. */ /* EAEAEA gray, FFF07F yellow */
table.contents-page tr:hover { background-color: transparent; } /* 2019-05-05u: Unset hover background change, looks annoying on contents table. Better is to have a class="no-change-on-hover" or something. */

#tablesmall td {
	font-size: small; /* 2019-05-01u: Change to small, GW giving text too small error */ /* 2019-04-16u: Change from xx-small to x-small, xx is too small on mobile. */
/*	white-space: nowrap; */ /* 2019-04-16u: Wide tables overflow body with no scroll bar if screen > 599px */
}
#tablesmall th {
	font-size: small; /* 2019-05-01u: Change to small, GW giving text too small error */ /* 2019-04-16u: Change from xx-small to x-small, xx is too small on mobile. */
/*	white-space: nowrap; */ /* 2019-04-16u: Wide tables overflow body with no scroll bar if screen > 599px */
}
#tablesmall h5 {
   margin-top: 1px;
   margin-bottom: 1px;
}
#table-index td {
/*	display: inline-block; /* 2019-04-17u: Default for flexible number of columns. No, messes up print version. */
/* 2019-04-17u: Add margins LR for space between heading highlight and next column bullets, unset for mobile single column view. */
	margin-left: 5px;
	margin-right: 5px;
}
#table-index h5 { /* 2019-04-09u: Added for heading format on index page. */
/*	margin: 15px 0px 5px; /* 2019-04-09u: Top LR Bottom */
/*	padding: 0 0 0 15px; /* 2019-04-17u: Disable since changed default h5 padding. */
	margin-right: unset; /* 2019-04-17u: Overlaps with bullets if position is outside. Set again for single column layout on mobile. */
	border-bottom: 1px solid #3593DB; /* blue blue was 0094FF */ /* 2019-04-20u: Added for index page because unset as default for td > h5 childs. */
}
#table-index ol { /* 2019-04-09u: Added, same as ul.index except for bullet style. */
/*	list-style-position: inside; /* 2019-04-17u: Don't need, only set for single column layout on mobile */
	margin-right: 1px;
	margin-left: 1px;
/*	font-size: x-small; */ /* 2019-04-09u: See td.index. */
/*	padding-inline-start: 15px; /* 2019-04-09u: Not supported in IE or Edge. */ /* 2019-04-17u: Move ol and ul right after changing to position outside. */
	padding-left: 15px; /* 2019-04-23u: Why not use instead of padding-inline-start? */
}

div.show-px600 { /* Only show on mobile */
	text-align: center;
}
div.hide-px599 { /* Dont show on mobile */
	width: 100%;
/*	margin: 0 auto; */ /* fail */
	text-align: justify;
	text-align-last: justify; /* Default is left for last line of block with justify. Limited or no support in IE, Edge, most mobile browsers? */
	border-bottom: 1px solid;
	border-color: #DDDDDD;
/*	white-space: nowrap; */ /* unnecessary, allow child divs to wrap rather than overflow */
	margin-top: 5px;
	margin-bottom: 5px;
}
div.head-nav {
	display: inline-block;
	font-size: small;
	text-align: left;
	text-align-last: left; /* keep left if overflow to next line otherwise inherits justify from parent */
/*	width: 32%; */ /* unecessary */
	white-space: normal; /* allow internal elements to wrap, otherwise inherits parent white-space: nowrap; if set */
/*	border-bottom: 1px solid;
	border-color: #DDDDDD; */	
}
div.title {
/*	display: inline-block; */ /* 2019-04-15u: Remove after moving <div> to next line under search box, and width setting. */
	text-align: center;
	text-align-last: center; /* keep center if overflow to next line otherwise inherits justify from parent */
/*	width: 40%; /* need width set otherwise no text wrap in center inline-block for title, and rh block will overflow */
	white-space: normal; /* allow internal elements to wrap, otherwise inherits parent white-space: nowrap; if set */
/*	border-bottom: 1px solid;
	border-color: #DDDDDD; */
}
div.current-date-uae {
	display: inline-block;
	text-align: right;
	text-align-last: right; /* keep right if overflow to next line otherwise inherits justify from parent */
/*	width: 32%; */ /* unnecessary */
	font-size: x-small;
	font-weight: bold;
	white-space: normal; /* allow internal elements to wrap, otherwise inherits parent white-space: nowrap; if set */
/*	border-bottom: 1px solid;
	border-color: #DDDDDD; */
}
div.g-translate {
	display: inline-block;
/*	width: 10%; */
	text-align: right;
	text-align-last: right; /* keep right if overflow to next line otherwise inherits justify from parent */
	white-space: normal; /* allow internal elements to wrap, otherwise inherits parent white-space: nowrap; if set */
/*	border-bottom: 1px solid;
	border-color: #DDDDDD; */
}
div.ga-text-links {
/*  display: block; /* default is block for div but parent might be inline-block, but display property not inherited? */ /* Don't use, will override hide-px599 display:none */
  text-align: center;
  text-align-last: center; /* keep center otherwise inherits justify from parent */
  margin-top: 5px;
  margin-bottom: 5px;
  padding-bottom: 5px
}
div.g-cse-search {
/*  display: block; /* default is block for div but parent might be inline-block, but display property not inherited? 2019-04-15u: Comment out, overrides display: none for print CSS */
  display: inline-block;
/*  width: 40%; */ /* 2019-04-15u: Comment out, alignment messed up when set container div to text-align-last: justify. */
  font-size: small;
  text-align: center;
/*  text-align-last: center; /* keep center otherwise inherits justify from parent */ /* but affects search text entered in input */
  margin-top: 5px;
  margin-bottom: 5px;
  padding-bottom: 5px
}

.newpage {
	page-break-before: always;
	}
table.navigationsection {  /* 2019-05-04u: Change from .navigationsection to table.navigationsection */
/*	border: 1px solid #9D9D9D; /* gray */ /* 2019-05-03u: Disabled, looks unnecessary. */
/*	background-color: #EFEFEF; */
/*	padding-left: 10px; /* 2019-05-04u: Disabled, unnecessary, use new table default CSS */
/*	padding-right: 10px; /* 2019-05-04u: Disabled, unnecessary, use new table default CSS */
/*	padding-top: 5px; /* 2019-05-04u: Disabled, unnecessary, use new table default CSS */
/*	padding-bottom: 5px; /* 2019-05-04u: Disabled, unnecessary, use new table default CSS */
/*	font-size: x-small; */ /* Do not change here [why not?], set in th and td */
	}

th.navigationth {
	font-size: small; /* 2019-10-26u: Try again medium > small, looks ok on mobile and desktop. */ /* 2019-05-14u: Try again */ /* 2019-05-11u: Try to resolve GW clickable elements too close together for mobile error. Fail. */
/*	font-size: x-small; /* 2019-04-20u: Disable after setting default th, td font size to small, x-small too small especially on mobile. */
/*	text-align: right; /* 2019-05-04u: Disabled, unnecessary, set scope="row" and use new th[scope="row"] CSS. */
/*	vertical-align: top; /* 2019-05-04u: Disabled, unnecessary, set scope="row" and use new th[scope="row"] CSS. */
/*	background-color: unset; /* 2019-04-20u: Unset color set for th default. */ /* 2019-05-04u: Disabled, unnecessary, set scope="row" and use new th[scope="row"] CSS. */
	}
table.navigationsection th[scope="row"] {
/* font-weight: bold; /* 2019-05-04u: To override default th[scope="row"] { font-weight: normal; } */ /* No, leave default th and change for specific table classes. */
	}
td.navigationtd {
	font-size: small; /* 2019-10-26u: Try again medium > small, looks ok on mobile and desktop. */ /* 2019-05-14u: Try again */  /* 2019-05-11u: Try to resolve GW clickable elements too close together for mobile error. Fail. */
/*	font-size: x-small; /* 2019-04-20u: Disable after setting default th, td font size to small, x-small too small especially on mobile. */
/*	text-align: left; /* 2019-05-04u: Disabled, unnecessary, default td is left. */
	}
.footertext {
	font-size: x-small;
	text-align: center;
	}
hr {
	border: none 0; 
	border-top: 1px dashed #AAAAAA;
	width: 100%;
	height: 1px;
/*	margin: 5px auto 2px 0; /* 2019-04-17u: Disable, try default padding and margin. */
	text-align: left;
	}	

.nomargin {
/*	margin-top: 0px; /* 2019-04-20u: Dont use, affects updated Hx styles in td elements. Do F-all to delete class="nomargin" in td > Hx elements. Check if .nomargin used anywhere else. */
/*	margin-bottom: 0px; /* 2019-04-20u: Dont use, affects updated Hx styles in td elements. Do F-all to delete class="nomargin" in td > Hx elements. Check if .nomargin used anywhere else. */
}
/* 2019-04-20v: Found a <p class="nomargin">, maybe only in test page table. */
p.nomargin {
	margin-top: 0;
	margin-bottom: 0;
}

.smallmargin {
	margin-top: 10px;
	margin-bottom: 10px;
}

.highlighttextyellow {
/*	border: 1px solid #714D00; */
	background-color: #FFF07F; /* naples yellower */
	padding-left: 3px;
	padding-right: 3px;
	padding-top: 0px;
	padding-bottom: 0px;
	}
.outlinegrey {
	border: 1px solid #9D9D9D;
/*	background-color: #EFEFEF; */
	padding-left: 3px;
	padding-right: 3px;
	padding-top: 2px;
	padding-bottom: 2px;
	}
.highlightgrey {
	border: 1px solid #9D9D9D;
	background-color: #F3F3F3; /* darker EFEFEF; */
	padding-left: 3px;
	padding-right: 3px;
	padding-top: 2px;
	padding-bottom: 2px;
	}
.highlightgrey2 {
	border: 1px solid #9D9D9D;
	background-color: #E9E9E9;
	padding-left: 3px;
	padding-right: 3px;
	padding-top: 2px;
	padding-bottom: 2px;
	}
.highlightgrey3 {
	border: 1px solid #9D9D9D;
	background-color: #DEDEDE;
	padding-left: 3px;
	padding-right: 3px;
	padding-top: 2px;
	padding-bottom: 2px;
	}
.highlightrera09q1 {
	border: 1px solid #9D9D9D;
	background-color: #E3FFC8;
	padding-left: 3px;
	padding-right: 3px;
	padding-top: 2px;
	padding-bottom: 2px;
	}
.outlineyellow {
	border: 1px solid #B29D00; /* dark yellow */
	}
.highlightyellow {
	border: 1px solid #B29D00; /* dark yellow */
	background-color: #FFF07F; /* naples yellower */
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	}
.highlightyellow2 {
	border: 1px solid #B29D00; /* dark yellow */
	background-color: #FFF5AF; /* naples lighter yellow */
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	}
.highlightyellow3 {
	border: 1px solid #B29D00; /* dark yellow */
	background-color: #FFFBCF; /* naples lighter lighter yellow */
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	}
.outline-note { /* 2019-05-03u: See notes. */
	border: 1px solid #3593DB; /* blue blue, same as Hx underling, lighter is 0094FF */
	color: initial; /* 2019-05-03u: Return text to black color if class nested in archive page with gray text. */
	}
.highlightblue {
	background-color: #E3F0FA; /* light blue */	
	border: 1px solid #0094FF; /* blue blue */
/*	border: 1px solid #00A7B1; /* darkish blue */
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	}
.highlightred {
/*	background-color: #FFF07F; /* naples yellower */
/*	border: 1px solid #B29D00; /* dark yellow */
	border: 1px solid #970000; /* red */
	background-color: #FFDDDD; /* light burgundy */
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	}
.highlightredlist {
	border: 1px solid #970000; /* red */
	background-color: #FFDDDD; /* light burgundy */
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 2px;
	padding-bottom: 2px;
	}
.highlightgreen {
	border: 1px solid #4A9500; /* dark olive green */
	background-color: #E3FFC8; /* light green */
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	}
.highlightgreenlist {
	border: 1px solid #4A9500; /* dark olive green */
	background-color: #E3FFC8; /* light green */
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 2px;
	padding-bottom: 2px;
	}
.detailsbox {
/*	border: 1px solid #0094FF; /* blue blue */ /* 2019-04-10u: comment out when changing table to display: block because picks up border from block. */
	}
.date {
	vertical-align: baseline;
	text-align: center;
/*	border-bottom: 1px solid #714D00; /* thin brown border */
/*	background-color: #FFF4DF; /* */
	font-size: 70%;
	font-weight: bold; /* */
	}

.nodisplay {
	display: none;
	}

.googlebox {
/*	border: 1px solid #714D00; */
	background-color: #FFF07F; /* naples yellower */
	border-top: 1px solid #B29D00;
	border-bottom: 1px solid #B29D00;
/*	text-align: center; */
	padding-top: 5px;
	padding-bottom: 5px;
}

a:link {
	color: #0000FF; /* blue blue 0094FF */
	text-decoration: none;
}
.toplink:link {
	color: #0000FF; /* blue blue */
	text-decoration: none;
	margin-left: 1px;
	margin-right: 1px;
	padding-left: 2px;
	padding-right: 2px;
}
a:visited {
	color: #875FBF; /* mauvish */
	text-decoration: none;
}
.toplink:visited {
	color: #875FBF; /* mauvish */
	text-decoration: none;
	margin-left: 1px;
	margin-right: 1px;
	padding-left: 2px;
	padding-right: 2px;
}
a:hover {
	color: #000000; /* text black on hover */
/*	color: #0000FF; */
/*	background-color: #E3F0FA; /* light blue */
	background-color: #FFF07F; /* naples yellower */
	text-decoration: underline; /* */
}
.toplink:hover {
/*	border: 1px solid #544E1C; /* olive yellow */
	color: #000000;
/*	color: #0000FF; */
	background-color: #E3F0FA; /* light blue */
	text-decoration: underline; /* */
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 3px;
	padding-right: 3px;
}
.external:hover {
	background-color: #FFFFFF; /* white */
	}

.small {
	font-size: xx-small;
}
li {
    padding-top: 3px;
    padding-bottom: 3px;
}

table {
	border-collapse: collapse;
/*	white-space: nowrap; */
}
/* 2019-04-10u: Delete class .data from CSS and content pages, redundant since table default is border-collapse: collapse? Or keep for possible future reference? Seen on schools-nearby-areas.php*/
table.data {
	border-collapse: collapse;
/*	border-width: thin; */
/*	border-style: solid; */
}
table { /* 2019-03-31u: Added to test horizontal scroll for tables if bigger than screen width. CSS white-space: nowrap messes up tables with long data string in single cell. Can override with white-space: unset; or similar, but tedious to find such cells manually, how to automate? */
/*	display: block;
	overflow-x: auto;
	white-space: nowrap;
/*	overflow-y: auto;
	height: 100px */
	
	/* 2019-04-19u: Try again default table settings to have centered and overflow scroll when smaller width screen. */
	margin: 10px auto; /* text-align: center; not for Block level Elements */ /* 2019-05-03u: Change margin TB from 0 to 10px */
	display: block;
	overflow-x: auto;
	max-width: fit-content;
	width: 100%; /* 2019-04-19u: Not sure this is needed, maybe for FF? Doesn't seem to make a difference in FF. Not centered in FF anyway. */
	border: none; /* 2019-04-19u: To avoid double border. Table gets border from tbody, tr, th, td, or something. */
}

table.details tr th:nth-child(1){ width: 33%; } /* 2019-05-03u: */
table.details tr th:nth-child(2){ width: 66%; } /* 2019-05-03u: */

table.fees-services { } /* 2019-05-02u: */

table.fees-annual { } /* 2019-05-02u: See notes */
table.fees-annual td, table.fees-annual th { font-size: small; }  /* 2019-05-02u: See notes */ /* 2019-05-11u: font-size: small > medium or 1em; to try fix GW mobile unfriendly error. Fail. */
/* table.fees-annual td { text-align: right; }  /* 2019-05-02u: See notes */
table.fees-annual tr { text-align: right; } /* 2019-05-03u: Do tr instead of all td since most cells are fee amounts. */
td.price { text-align: right; } /* 2019-05-03u: Align price amounts right in td cells. */
table.fees-annual th[scope="col"] { text-align: center; } /* 2019-05-03u: For col headings, because tr align right. */
table.fees-annual th[scope="row"] { /* 2019-11-06u: Redundant? Overriden by table th[scope="row"]? Why a repeated table.fees-annual th[scope="row"]? */
/*	text-align: left; /* 2019-05-04u: Set default table th[scope="row"] align left, so this line redundant. */
/*	font-weight: normal; /* 2019-11-06u: Disabled, has higher specificity than th[scope="row"].th-corner? Is normal in table th[scope="row"] anyway. */
} /* 2019-05-03u: Attribute selector scope="row" then align left and don't make bold. */
/* table.fees-annual > thead > tr { background-color: pink; } /* 2019-05-03u: */
/* table.fees-annual > tbody > tr { background-color: lightgreen; } /* 2019-05-03u: */
/* table.fees-annual > tbody > tr { background-color: khaki; } /* 2019-05-03u: */

table.default-center { /* 2019-04-09v: border: width style color, default style is none */
/*	border: 1px solid gray; */ /* 2019-04-16u: Try no border, <tbody> has a border? */
	margin: 10px auto; /* text-align: center; not for Block level Elements */
/*	border-spacing: 2px; */ /* set for all tables? */
	/* set CSS for cellpadding in td (use 2px default for all td), for cellspacing in table (border-spacing), HTML was cellpadding="2" cellspacing="2" */
	display: block;
	overflow-x: auto;
	width: 100%; /* 2019-04-18u: For FF so table will scroll when width small, otherwise FF breaks words with hyphens. Table not centered though. Hmmmm. FF still hyphenates words in some tables instead of scroll. */
	max-width: fit-content; /* 2019-04-18u: Does both center and overflow scroll when screen width not wide enough to fit table. Tables centered in Chrome but not FF. A job for another day. */
}
table.image-row-top {
	display: block; /* scroll when viewport < table width */
	overflow-x: auto; /* scroll when viewport < table width */
	white-space: nowrap; /* scroll when viewport < table width */
	border: 0px; /* unnecessary, or use border-collapse? */
	margin: 0 auto; /* 0px top bottom, auto L R, center table horizontally, width must be set or default 100% [(display: block AND width not auto) OR display: table]? auto 0; fails */
	border-spacing: 2px;
/*	width: 75%; */ /* Trying to get it centered */
}
table.index { /* 2019-04-09u: Previous: <table width="100%" border="0" cellspacing="2" cellpadding="2">. New: ... */
	width: 100%;
	border: none;
	white-space: normal; /* 2019-04-11u: Override nowrap setting in table {} */
	/* cellpadding default set in th, td; leave cellspacing for now */
	display: unset; /* 2019-04-11u: Unset display:block for index page table, affects H element margin-right, won't show -ve margin */
}

/* see also th.
, td.navigationtd */
td, th { /* 2019-04-07u: Why was <p> included? Removed. */
	font-size: small;
	padding: 2px 4px; /* 2019-04-20u: Reset margin, padding for td,th > Hx children. 2019-04-09u: Added to set default cell padding TB 2px, LR 4px. */
	border: 1px solid gray; /* 2019-04-09u: Added default cell border setting. */
}
/* 2019-04-20u: Copy h2-h6 style to th. Not sure about bottom border, mismatch with td > Hx bottom border (white space). */
th {
	background-color: #E3F0FA; /* lighter blue was DFF1FF */
/*	border-bottom: 1px solid #3593DB; /* blue blue was 0094FF */ /* 2019-04-20u: Disable unless can do Hx < td bottom-border also. */
}
table th[scope="row"] {
	text-align: left; /* 2019-05-04u: Default left align for th rows, looks better than center. */
	font-weight: normal;
	}
table.fees-annual th[scope="row"] { /* 2019-11-06u: Why is this class defined twice? */
	white-space: nowrap; /* 2019-05-12u: Default was nowrap for th scope="row", disable for default, enable for fee tables. */
	}
th[scope="row"].th-corner { /* 2019-11-06u: To unset font-weight: normal and text-align: left in table th[scope="row"], and anywhere else needed. */
	font-weight: bold;
	text-align: center;
}

/* Not td > h1 since even though h1 current default is no background-color or border, shouldnt have td > h1 anywhere, max 1x h1 per page. */
td > h1 { background-color: #3593DB; } /* 2019-04-20u: Set to dark blue so stands out if anywhere there is a td > h1. Do a F-all on "><h1" another day. */

/* 2019-04-20u: Want a Hx < td option to change border-bottom of td to blue if td contains Hx, i.e. "parent" selector, but not available in CSS. Not the same as td > Hx i.e. Hx style defined if td is parent, but Hx > td would be td style defined if Hx is parent. Could do using js. */
/* h4 < td { border-bottom: 1px solid #3593DB; } */

/* 2019-05-01u: Can delete this th > Hx section? Did F&R all <th><h and <td><h to remove Hx from th and td? */

/* 2019-04-20u: Do margin,padding so Hx elements without whitespace or table border overflow. Cannot group unless use :match() (or :is() if renamed, or :has() if supported), -moz-any(), -webkit-any(), but limited support so no point. */
td > h1, /* 2019-04-20u: H1 inclusion redundant because white background now, but include for consistency and future-proof in case background changes. */
td > h2,
td > h3,
td > h4,
td > h5,
td > h6 {
	margin: -2px -4px; /* 2019-04-20u: Margin to offset td,th default padding. */
	padding: 2px 4px; /* 2019-04-20u: Padding same as td,th default padding. */
	border-bottom: unset; /* 2019-04-20u: Use td border, don't have additional Hx border, unless unset td border-bottom, but multi-colored table borders probably looks a bit odd. */
}
/* 2019-04-20u: Need for th > Hx also, th includes h5 on selector form for school lists, maybe other places. Should just change to default th because has same background color as Hx. But this is quicker than F&R. */
th > h1, /* 2019-04-20u: H1 inclusion redundant because white background now, but include for consistency and future-proof in case background changes. */
th > h2,
th > h3,
th > h4,
th > h5,
th > h6 {
	margin: -2px -4px; /* 2019-04-20u: Margin to offset td,th default padding. */
	padding: 2px 4px; /* 2019-04-20u: Padding same as td,th default padding. */
	border-bottom: unset; /* 2019-04-20u: Use td border, don't have additional Hx border, unless unset td border-bottom, but multi-colored table borders probably looks a bit odd. */
}

td.image-row-top {
/* for <td width="180" align="center"> */
	width: 180px;
	text-align: center;
	border: 1px solid gray;
}
td.index {
/*	font-size: x-small; */ /* 2019-04-09u: Set in too many places. In h5, ul, ol, li. Set only in h5 (leave as default) and li (small inherited from td). */
	border: none;
}
th.index {
/*	font-size: x-small; */ /* 2019-04-09u: See td.index. */
	border: none;
}
tr.shaded {
/*	background-color: #E3F0FA; /* light blue */ /* 2019-05-03u: Disabled, tables now have highlight on hover. Can also use CSS zebra striping. */
}

ul {
/*	margin-right: 20px; /* 2019-04-08u: Why 20px? Centering on mobile disrupted, commented out. */
}
ul.index {
	list-style-type: square;
/*	list-style-position: inside; /* 2019-04-17u: Don't need, only set for single column layout on mobile */
	margin-right: 1px;
	margin-left: 1px;
/*	font-size: x-small; */ /* 2019-04-09u: See td.index. */
/*	padding-inline-start: 15px; /* 2019-04-09u: Not supported in IE or Edge. */ /* 2019-04-17u: Move ol and ul right after changing to position outside. */
	padding-left: 15px; /* 2019-04-23u: Why not use instead of padding-inline-start? */
/*	text-indent: -1em; /* Attempt to decrease distance between bullet and text. Fail */
/*	padding-left: -1em; /* Attempt to decrease distance between bullet and text. Fail */
}

/* 2019-05-06u: .widthxx selectors all deleted, tables edited to new classes. */

.strikethrough {
   text-decoration: line-through;
}
/* text advertisements */
.normal {
/*	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; /* 2019-04-17u: Redundant? Set in body {}. */
	font-size: 10px;
}
.linktitle {
/*	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; /* 2019-04-17u: Redundant? Set in body {}. */
	font-size: 10px;
	font-weight: bold;
	text-decoration: underline;
}
.linktext {
/*	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; /* 2019-04-17u: Redundant? Set in body {}. */
	font-size: 10px;
}
.linktext a:link { color: #336699; text-decoration: none; }
.linktext a:visited { color: #336699; text-decoration: none; }
.linktext a:hover { color: #000000; text-decoration: underline; }
.adtable {
/*	border: 1px solid #919191; */
/*	border: 1px solid #B29D00; */ /* dark yellow */
/*	background-color: #FFF07F; */ /* yellow */
	border: 1px solid #4A9500; /* dark olive green */
	background-color: #E3FFC8; /* light green */
}
.linktitle a:link { color: #000000; text-decoration: underline; }
.linktitle a:visited { color: #000000; text-decoration: underline; }
.linktitle a:hover { text-decoration: none; }

div.head-top-row { /* 2019-04-15u: Wasn't this done already somewhere? */
	text-align: justify;
	text-align-last: justify;
}

caption.table-title, caption.table-title-fees { /* 2019-05-04u: Add <caption> as table title, style as th. No bottom border otherwise double line. */
	border: 1px solid gray;
	border-bottom: 0;
	background-color: #E3F0FA;
	font-weight: bold;
	text-align: center;
	/* font-size: small; /* 2019-05-04u: Same as td font-size. Undecided if better than default or not. */ /* 2019-11-11u: try larger, default is 16px? */
	padding: 5px;
	caption-side: top;
}
caption.table-title-fees {
	font-size: small; /* 2019-11-12u: Added fee tables caption class, and small size font. */
}

/**************************************************************/
/* <!-- OpenLayers page CSS modified to have map container with responsive size --> */
/**************************************************************/
      .container-map {
		width: 95%;
		max-width: 768px;
/*		border: 1px dotted red; /* Testing */
/*		padding: 2%; /* Testing */
		margin: 0 auto;
	  }
      .container-responsive {
        position: relative;
		padding-bottom: 66%; /* 75% is 4:3 aspect ratio */
		width: 100%;
/*		border: 1px solid; /* Testing */
	  }
	  .map {
        position: absolute;
		top: 0; bottom: 0; left: 0; right: 0;
/*		height: /* default was 400px; */
		width: 96%; /* default was 100%; */
		border: 1px solid gray; /* Testing */
/*		padding: 5px; /* No, use margin */
        margin: 2%;
      }

/**************************************************************/
/***** @media queries section, use screen or only screen? *****/
/**************************************************************/

/* .nodisplay already defined for anywhere use */
/* .hide-xs (only xs), .hide-s (xs or s), .hide-m (only m), .hide-l (l or xl), .hide-xl (only xl) */
/* .show-xs (only xs), .show-s (xs or s), .show-m (only m), .show-l (l or xl), .show-xl (only xl) */
/* Possible BP to use: (240), 320, (360), 480, (600), 768, 800, 992, (1024), 1200 */
/* 2019-04-23u: Use 599px and 600px instead of 480px and 481px, most or all smartphones max 480px, min tablet width is 600px, but responsive CSS already done for 600px breakpoint. Need to edit home page styles also if change BP. */
@media handheld, screen and (max-width: 320px) { .hide-xs { display: none;} } /* 2019-04-23u: Hide on any < 321px i.e. very small smartphones */
@media handheld, screen and (max-width: 599px) { .hide-s { display: none;} } /* 2019-04-23u: Hide on any < 481px i.e. most smartphones portrait */
@media screen and (min-width: 600px) and (max-width: 991px) { .hide-m { display: none;} } /* 2019-04-23u: Hide on most tablets portrait */
@media screen and (min-width: 992px) { .hide-l { display: none;} } /* 2019-04-23u: Hide on any > 991px i.e. most keyboard devices */
@media screen and (min-width: 1200px) { .hide-xl { display: none;} } /* 2019-04-23u: Hide on any > 1199px i.e. larger computers */

@media all and (min-width: 321px) { .show-xs { display: none;} } /* 2019-04-23u: Hide all > 320px i.e. only show on x-small. */
@media all and (min-width: 600px) { .show-s { display: none;} } /* 2019-04-23u: Hide all > 480px. i.e. show on s or xs. */
@media all and (max-width: 599px), all and (min-width: 992px) { .show-m { display: none;} } /* 2019-04-23u: Hide <481px or >991px i.e. most tablets portrait. */
@media all and (max-width: 991px) { .show-l { display: none;} } /* 2019-04-23u: Hide <992px i.e. only show on laptop or larger screens. */
@media all and (max-width: 1199px) { .show-xl { display: none;} } /* 2019-04-23u: Hide <1200px i.e. only show on large screens. */

@media handheld, screen and (max-width: 599px) { /* Trebuchet MS not common on mobile? */
/*	table { max-width: 100% !important; } /* 2019-05-14u: Hack to override any table selectors max-width < 100%, default to full width on small screen. No, fail, then <100% width tables not centered. */
	body {
		margin: 0px;
		background-color: #FFFFFF; /* white not gray for mobile */
		font-family: "Trebuchet MS", Helvetica, Tahoma, "Lucida Sans", Arial, Verdana, sans-serif; /* Tahoma, Arial first, not as wide as Verdana */
/*		word-break: break-word; /* 2019-04-17u: Commented out in default body because can affect td entries but set for small screen, ok for td because small screen default table behaviour is horizontal scroll with td nowrap. */ /* 2019-04-19u: Comment out if td nowrap disabled. Check body effect, maybe have to set to initial (unset has no effect) in @media table {}. */
	}
	div.main {
/*		border: 1px solid #9D9D9D; /* 2019-04-11u: Remove for mobile */ /* 714D00; /* main table brown thin border */
/*		background-color: #FFFFFF; */
/*		margin: 0 auto; /* block-level element, 0 = no margin top/bottom, auto = center horizontally */
/*		padding: 0 15px; /* 2019-04-14u: Change from right 3% to LR 15px, reset <p> to 0. 2019-04-11u: So text does not run up against screen edge, but set Head Element margins corresponding -ve value. */ /* 2019-04-17u: Try default 10px set in div.main */
	}
	p {margin-right: 0; margin-left: 0;} /* 2019-04-14u: Inherit top and bottom padding, reset LR to 0px from 10px */

/*	table.fees-annual {display:none;} /* 2019-05-11u: See if fixes GW mobile usablility errors. Fail. Even if hidden, still get not m-friendly error. */
/*	table.navigationsection {display: none;} /* 2019-04-30u: Don't display on mobile, see if resolves GW clickable elements too close, or is somewhere else. Looks messy on mobile anyway, do a better fix later. 2019-05-11u: Fail, this table not the problem, is fees tables. */ /* 2019-05-12u: Was not cause of GW error. */
	div.title {display: none;} /* 2019-04-15u: Need because div.title has display: inline-block; Don't try div.hide-px599, messes up header. */
	div.head-nav {display: none;} /* 2019-04-15u: related. */
	div.current-date-uae {display: none;} /* 2019-04-15u: related. */
	div.g-translate {display: none;} /* 2019-04-15u: related. */
	div.g-cse-search {width: unset; margin-left:20px;} /* 2019-04-15u: related. */
/*	div.head-top-row {display: inline-block;} /* 2019-04-15u: related. */
	div.head-nav-mobile {display: inline-block;} /* 2019-04-15u: related. */
	/* Must be an easier way. If 2x CSE search boxes (one hidden) on one page, CSE logo doesn't show. */
	div.mobile-small { /* For restricting adsense on mobile, try 340x60 to get 320x50 ad. */
		width: 340px;
		height: 60px;
	}

	table { /* 2019-04-16u: Only use for tables on mobile, not for desktop otherwise get scroll bar for wide tables, not a good setting, better content flows to multiple lines. */
/* 2019-04-10u: Added for horizontal scroll on all tables if bigger than screen width. If width 90% then block (table) is set to 90% of container. */
		margin: 10px auto; /* text-align: center; not for Block level Elements */
		display: block; /* 2019-04-16u: Block needed so table expands to fit contents, otherwise overflow looks odd. But block adds additional border around table, with extra space RH side. */
		overflow-x: auto;
/*		white-space: nowrap; /* 2019-04-19u: Same as desktop table layout. Added max-width. Change from nowrap which results in some extreme scrolling. */
/*		width: 95%; /* 2019-04-10u: Block is centered, not Table, but set Block width to < 100% to get Table indented a bit */
		border: none; /* 2019-04-16u: Add so don't get extra border from display: block; and on mobile RH side cells will have no border so might imply scroll possibility. */
		max-width: fit-content; /* 2019-04-19u: Same as desktop table layout. Change from nowrap which results in some extreme scrolling. */
}
	table.category-items { max-width: 100%; } /* 2019-05-06u: Default 80%. Do 100% on portrait view devices. */
	h1, h2, h3, h4, h5, h6 {
/*		margin-right: -15px; /* 2019-04-11u: Compensate for padding-right in div.main for mobile. */ /* 2019-04-17u: Try new default -10px setting. */
/*		margin-left: -15px; /* 2019-04-14u: Changed from -3% to -15px. Added margin-left to compensate for change in div.main. */ /* 2019-04-17u: Try new default -10px setting. */
/*		margin-top: 15px; /* 2019-04-15u: Margins 15-30px on mobile look too big. Note h2 margin-top done again. */ /* 2019-04-17u: Disable, try default padding and margin. */
/*		margin-bottom: 15px; /* 2019-04-15u: Do it all in one, margin: 15px -15px; */ /* 2019-04-17u: Disable, try default padding and margin. */
/*		padding: 0 15px; /* 2019-04-17u: Disable, try default padding and margin. */
/*		font-weight: normal; /* 2019-04-15u */
	}
/*	h1, h2, h3 {font-size: 1.25em;} /* 2019-04-15u: Set to large for mobile. */
/* 2019-04-20u: Hx font settings for mobile. Try 1.25em bold 1.125em bold 1em bold 1em normal 1em normal 0.8em normal. */
	h1 { font-size: 1.25em; } /* 2019-04-20u: Smaller than desktop. */
	h2 { font-size: 1.125em; } /* 2019-04-20u: Smaller than desktop. */
	h3 { font-size: 1em; } /* 2019-04-20u: Smaller than desktop. */
	h4 { font-weight: normal; } /* 2019-04-20u: font-size:1em; same as desktop. */
/*	h5 { font-size: 1em; font-weight: normal; } /* 2019-04-20u: Same as desktop. */
/*	h6 { font-size: 0.8em; font-weight: normal; } /* 2019-04-20u: Same as desktop. */

	h2 {margin-top: 5px;} /* 2019-04-15u */
	ul, ol {
		margin: 5px;
		padding: 5px;
/*		list-style-type: none; /* 2019-04-14u: added */
		list-style-position: inside; /* 2019-04-14u: First line indent only, further lines flush with bullet and <p> text */
	}
/* Messy, is it really necessary? */
	ul > li > ul {
		margin-left: 20px; /* 2019-04-14u: Indent descendants not children. Output not as expected. */
	}
	ol > li > ol {
		margin-left: 20px; /* 2019-04-14u: Indent descendants not children. Output not as expected. */
	}
	ol > ul {
		margin-left: 20px; /* 2019-04-14u: Indent descendants not children. Output not as expected. */
	}
	ul > ol {
		margin-left: 20px; /* 2019-04-14u: Indent descendants not children. Output not as expected. */
	}

/*	li {padding-left: 0;} */
	
	#table-index td {
		display: inline-block;
		margin-left: unset; /* 2019-04-17u: Unset 5px default for multicolumn layout. */
		margin-right: unset; /* 2019-04-17u: Unset 5px default for multicolumn layout. */
		width: 100%; /* 2019-04-09u: index page 1 column */
		padding: 0;  /* 2019-04-11u: Remove padding for mobile on index page table */
	}
	#table-index h5 { /* 2019-04-14u: Comment out previous settings, use new settings after div.main update. */
/*		padding-left: 5%; */
/*		margin-right: -3%; /* 2019-04-11u: Default #table-index h5 margin settings override h5 for <600px, need to set again here */
		margin-right: -10px; /* 2019-04-17u: Set as default h5 but unset for default #table-index h5 so set again for single column. 2019-04-21u: Or not set again, overflows after other changes? No, problem seems to be full width auto ads on mobile, only showing on Opera 45. */
/*		padding-left: 20px; /* 2019-04-17u: Disable, try default padding and margin. */
/*		margin: 15px -15px 5px; /* To override #table-index h5 set before */ /* 2019-04-17u: Disable, try default padding and margin. */
		margin-top: 10px; /* 2019-04-20u: Set margin again because unset in td > Hx elements. Or set in accordion class on index page? */
		margin-bottom: 10px; /* 2019-04-20u: Set margin again because unset in td > Hx elements. Or set in accordion class on index page? */
		margin-left: -10px; /* 2019-04-20u: Set margin again because unset in td > Hx elements? Or something. Or set in accordion class on index page? */
		padding: 2px 25px 2px 25px; /* 2019-04-20u: Set padding again because unset in td > Hx elements. Or set in accordion class on index page? */
		font-weight: bold; /* 2019-04-20u: Default set to normal. Or set in accordion class on index page? */
		font-size: large; /* 2019-04-20u: Default is 1em, reduced in td > Hx. Or set in accordion class on index page? */
	}
	#table-index li {
/*		padding-left: 5%; */ /* 2019-04-14u: Comment out so bullets line up with h5 text with new margin and padding */
	}
}
@media screen and (min-width: 600px) and (max-width: 834px) {
	#table-index td {
		display: inline-block; /* 2019-04-17u: Set as default in #table-index td {}. No, messes up print version. */
		width: calc(33.3% - 18px); /* 2019-04-09u: index page 3 columns */ /* 2019-04-17u: Updated with calc (100/3 - (padding+margin)) (was just 29%). */
		}
	table.category-items { max-width: 90%; } /* 2019-05-06u: Default 80%. 100% on small portrait, 90% on medium and print. */
}
@media screen and (min-width: 835px) {
	#table-index td {
		display: inline-block; /* 2019-04-17u: Set as default in #table-index td {}. No, messes up print version. */
		width: calc(20% - 18px); /* 2019-04-09u: index page 5 columns */ /* 2019-04-17u: Updated with calc (100/5 - (padding+margin)) (was just 20%). */
		}
}
@media screen and (min-width: 600px) {
	body {
/*	background-color: #EFEFEF; /* FFEABF; /* light brown */
/*	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; /* 2019-04-17u: Redundant? Set in body {}. */
	}
	div.main {
		border: 1px solid #9D9D9D; /* 714D00; /* main table brown thin border */
		background-color: #FFFFFF;
		width: 95%;
		margin: 0 auto; /* block-level element, 0 = no margin top/bottom, auto = center horizontally */
	}
}

@media projection, screen, tv, handheld, tty {
	.printonly {
		display: none;
	}
}

/********************************************************************************************************************************************/
/* 2009-06-19u: added css for large image display on hover, from http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/  */
/********************************************************************************************************************************************/
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #FFFFFF; /*lightyellow;*/
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 140px;
left: 0px; /*60px position where enlarged image should offset horizontally */
}
/*********************************************************end css enlarge image on hover ****************************************************/
/********************************************************************************************************************************************/

/* 2019-04-06u: List possible redundant code below here for deletion consideration. */
/* 2019-04-06u: Obsolete table classes after changing to div.main? Do F-all to check. */
table.main {
	border: 1px solid #9D9D9D; /* 714D00; /* main table brown thin border */
}
table.mainabove {
	border: 1px solid #9D9D9D; border-width: 1px 1px 0px 1px /* 714D00; /* main table brown thin border top right !bottom left */
}
table.mainmiddle {
	border: 1px solid #9D9D9D; border-width: 0px 1px 0px 1px /* 714D00; /* main table brown thin border !top right !bottom left */
}
table.mainbelow {
	border: 1px solid #9D9D9D; border-width: 0px 1px 1px 1px /* 714D00; /* main table brown thin border !top right bottom left */
}
/* position logo at top right corner of every page */ /* 2019-04-06: Delete? Not found class="logo" anywhere, logo not in header */
.logo {
	position: absolute;
	right: 25px;
	top: 25px;
	z-index: 1;
}

/* 2019-04-23u: Redundant after new CSS for show-xs to xl and hide-xs to xl classes defined. */
/* Hide element for small screens, smartphone breakpoint 599px */
@media handheld, screen and (max-width: 599px) { /* If class="hide-px599" no display on handheld (not common) or screen size <= 599px. */
	.hide-px599 {
		display: none;
	}
}
/* Show element only on small screens, smartphone breakpoint 600px (hide on big screens) */
@media screen and (min-width: 600px) { /* If class="show-px600" hide if screen size >= 600px (only shows on small screens). */
	.show-px600 {
		display: none;
	}
}