/* CSS document for all englesaxe pages */

/* ### FRAMEWORK ### -  major page divisions & common elements*/
html {background:#eee}
body {font:15.5px/1.5em Georgia, "Times New Roman", Times, serif; width:980px; padding:0; margin:0 auto; background:#fff; box-shadow:2px 0 7px #555, -2px 0 7px #555; -moz-box-shadow:2px 0 6px #444, -2px 0 6px #444; -webkit-box-shadow:2px 0 7px #555, -2px 0 7px #555}
header {padding:10px 0 0 2%; min-height:92px; z-index:400}
header > h3 {font:normal 50px/50px "Times New Roman", Times, serif; margin:0}
header > h3 > a {text-decoration:none}
.tagline {float:right; position:relative; top:-27px; margin:0 300px -5px 0}
/* menu link for non-js browsers: */
header > a[href*="sitemap"] {display: block; clear: both}
/* note need apply basic styling to header list items in non-js browsers, in next 2 rules: */
.topnav, header > nav > ul {margin:0; padding:0; clear:both}
.topnav > li {float:left; border-left:1px solid #f0f0f0; z-index:501}
.topnav > li:first-child, header > nav > ul > li:first-child {border-left:none}
.subnav {margin:0; padding:0; z-index:500; background:#eee; display:none}
.subnav > li {width:220px; padding:0 .5em; border:1px solid #666; border-top:none; color:#666}
.subnav > li:first-child {border-top:1px solid #666}
.topnav > li > a {padding-right:.5em}
.topnav > li > a:hover {text-decoration:underline}
.topnav > li > h4:hover, .subnav > li:hover {background:rgba(255, 255, 255, 0.2)}
.topnav > li > h4.focus {background:rgba(255, 255, 255, 0.35)}
.topnav > li.down, .topnav > li.down:hover, .subnav > li.down, .subnav > li.down:hover {background:#666; color:#fff}
.topnav > li.down, .topnav > li.down:hover, .subnav > li.down, .subnav > li.down:hover {background:rgba(0, 0, 0, 0.3)}
.topnav > li > h4 {cursor:pointer; font-weight:normal; margin-bottom:0; padding:0 .5em}
/* note - the 2nd selector enables links within hidden text, in Firefox: */
h4.focus ~ .subnav, .subnav:hover {display:block}

#content {clear:left; float:left; width:67%; padding:1.5em 0 1em 2%}
.without-tears > #content {background:url(../images/audrey61x61.jpg) 95% 30px no-repeat}
.wide-table > #content, .wide-table > aside {width:auto; float:none; display:block}
.wide-table > #content {padding-right:2%}
.wide-table > #content > h1 > small {display: block; margin-top: .5rem}
aside {float:right; width:27%; padding:1.5em 2% 1em 0}
.wide-table > aside {padding-left:2%}
.wide-table > aside > .include > section {float:left; width:45%; margin-right:4.5%}
.switch {position:absolute; top:125px; right:0; padding-right:2%; text-align:right; z-index:5}
.switch + .switch {margin-top:2.25em}
.switch + article + aside {padding-top:4.5em}
.switch + .switch + article + aside {padding-top:7em}
.switch > label {margin-right:5px}
.switch > select {max-width:185px}
.linklist {padding-left:1.2em; line-height:1.1em}
.linklist > li {padding:.2em 0}
footer {min-height:1.4em}

/* ### CSS PROPERTIES ### in alphabetical order */
/* background */
.highlight {background:#ffc} /*cream */
.conflict {background-color:#fc6} /* mustard */
.resolution, footer, #curr-def {background-color:#eee} /* grey */
.option + dd {background:#fff} /* white */
/* border */
.option + dd {border:1px solid #333}
ol.legend, .footnote, h2.major {border-top:1px dotted #666}
cite, a[name][href] {border-bottom:1px dotted #666}
.col.last, .row > li, footer > a {border-left:1px solid #666}
.row > li:first-child, footer > a:first-child {border-left:none}
/* clear */
footer, #source, .launcher, .verbclass > dt, #not-traditional-course {clear:both}
#content:after, .row:after, .topnav:after, .subnav:after, header > nav > ul:after, .verbclass:after {content:"."; display:block; clear:both; height:0; visibility:hidden}
/* color */
.option:hover, .option.over, .OE > sup, .ME > sup, .ModE > sup, .OE > li::marker, .ME > li::marker {color:#000} /* black */
.L {color:#036} /* blue grey */
.ModE {color:#066} /* blue teal */
.ON, .MDu, .MLG {color:#a85111} /*brown */
.speech, .erase, .arch, .close:hover, em.minor, .grammar > em, .grammar > li > em, .grammar > dt > em, .grammar > dd > em {color:#999} /* grey; archaic */
h1, code, ins, .option, .close, aside > .include > section > h4, .verbclass > dt:after, h5.minor {color:#666} /* grey dark */
h2, th, .summary {color:#333} /* grey darker */
.IPA {color:#300} /* grey very dark */
.ME {color:#090} /* green */
.ModE > .var {color:#C90} /* mustard #636*/
.AN {color:#639} /* purple */
.C {color:#606} /* purple dark */
.OE, .lOE, .A {color:#c00} /* red */
.on:hover, .off:hover {color:#C33} /* red dark */
.topnav > li.down > a, .topnav > li.down:hover > a, .subnav > li.down > a, .subnav > li.down > a:hover, #entry-points > a, #entry-points > a:hover {color:#fff} /* white */
/* column */
/* CSS columns work for Mozilla, Webkit, IE11 & Edge; note - definitions disappeared in 2nd CSS column in old Webkit (at 22/12/10) */
.verse {column-count:2; column-gap:1.6em; column-rule:1px solid #666}
/* content */
.row > dt:after {content:": "}
.row > dd:after {content:", "}
.row > dd:last-child:after {content:""}
.verbclass > dt:after {content:" - "}
/* cursor */
[title], .option, .close, .IPA {cursor:pointer}
cite[title], a[name][href] {cursor:help}
.no-def {cursor:text}
/* display */
header, footer, nav, main, article, section, aside, figure, small.major, .launcher > dl:hover > dd {display:block}
.row > dt, .row > dd {display:inline}
i, .up, .speech {display:inline-block} /* needed i.a. for translateY */
.skip-link, .hidden, .option + dd, .launcher.touch > dl:hover dd {display:none}
/* float */
.col, .row > li, .dialect, .verbclass > dt, .verbclass > dd {float:left}
.verse > div > code, .close, .dialect + a, aside > a[href*="selectedLinks"] {float:right}
/* font-family */
input, select, textarea {font-family:Georgia, "Times New Roman", Times, serif; font-size:1em}
.IPA, code {font-family:"Lucida Sans Unicode","Courier New",Courier,serif}
em i, .arch, .tagline, .subheading, h3.minor {font-family:"Palatino Linotype", "Times New Roman", Times, serif}
/*@font-face {font-family:Orrm; src:url(../includes/orrm.ttf) format("truetype")}
#source.orm-font {font-family:Orrm, Georgia, "Times New Roman", Times, serif} ORRM___.TTF BEOWULF.TTF*/
/* font-size */
h1, h2.major {font-size:1.8em}
h2, caption.major {font-size:1.4em}
h4.major {font-size:1.1em}
h5 {font-size:1em}
.arch {font-size:.9em}
.legend, .IPA, code, .option + dd, em.minor, .launcher > .overview, .apology, .speech, .grammar > em, .grammar > li > em, .grammar > dt > em, .grammar > dd > em {font-size:.85em}
.footnote, sub, sup {font-size:.75em}
i.h {font-size:.65em}
/* font-style */
em i, .arch, .tagline, .subheading, .wright > caption, h3.minor, .amend, .amend i {font-style:italic}
i {font-style:normal}
/* font-variant */
.s-caps, .wright [colspan] {font-variant:small-caps}
/* font-weight */
caption, dt, .summary {font-weight:bold}
.option, h3.minor, .wright > caption, small.minor, span.minor, th.ME > sup, dl.minor > dt, .case-studies > li > dl > dt, .verbclass > dt:after {font-weight:normal}
/* line-height */
.footnote {line-height:1.4em}
.option + dd, aside p, article h2 {line-height:1.2em}
sub, sup {line-height:0}
table, article > h1 {line-height:1.1em}
/* list-style */
ul.row, ul.minor, .topnav, .subnav, header > nav > ul {list-style-type:none}
ol > li > ol {list-style-type:lower-alpha}
ol > li > ol[type="i"] {list-style-type:lower-roman}
/* margin */
dl, h1, h2, h3, h4, h5, p, table {margin:0 0 1em 0}
ol, ul {margin-top:0}
dd.discussion, .verse p {margin-top:.5em}
h2.major, li > ol + p {margin-top:1em}
#weak-short-vowel, #one-off-changes {margin-top:1.5em}
.listhead, .launcher > dl, li > ol, .paradigm > li > ul {margin-bottom:0}
caption, h2, h3, h4, h5, .instruction, .verse p, article > h1, .switch {margin-bottom:.5em}
ol, ul, .subheading, .group > li > ol, h2.major {margin-bottom:1em}
figure, .section, #one-off-changes {margin-bottom:1.5em}
ul.row, .row > li:first-child, .row > dd, .option + dd {margin-left:0}
.row > li, .close, .verbclass > dt:after {margin-left:.5em}
.verse .even, .verbclass > dd {margin-left:1em}
/* padding */
.option {padding:.2em .3em}
.option + dd {padding:5px}
.speech, #curr-def {padding:.5em}
ol.legend, .footnote, h2.major {padding-top:.5em}
.col.first {padding-right:2%}
ul.row, .row > li:first-child, ul.minor, footer a:first-child {padding-left:0}
.row > li, footer a {padding-left:.5em}
.wright [colspan] {padding-left:1em}
footer, .col.last {padding-left:2%}
/* position */
.access, .speech, .subnav, .option + dd, #curr-def {position:absolute}
body, .topnav > li, #content, .launcher > dl {position:relative}
/* text-align */
html, th, figure {text-align:center}
body, caption.major, th.ME {text-align:left}
.back, .wright td:first-child:not([colspan]) {text-align:right}
/* text-decoration */
ins, .topnav > li > a, .subnav > li > a, footer > a, .linklist > li > a {text-decoration:none}
footer > a:hover, .linklist > li > a:hover, .close:hover {text-decoration:underline}
/* text-indent */
.access {text-indent:-9000px}
/* vertical-align*/
td[rowspan] {vertical-align: middle}
/* width */
.col {width:47.75%}
/* word-wrap */
/* NB - cannot add '#curr-def span.ME' or 'p > span.ME' as selectors here, because these spans can encompass many words: */
.nobreak, span[title][rel] {white-space:nowrap}

/* multiple properties - unique properties - modules */
.offscreen {clip:rect(1px, 1px, 1px, 1px); height:1px; padding:0; position:absolute; overflow:hidden; width:1px}
.option + dd {width:350px; left:-362px; top:0}
.touch .option + dd {position:static; width:auto; left:0}
.option.down, .option.down:hover {color:#fff; background:#666}
a[name][href] {text-decoration:none}
#curr-def {width:350px; border-radius:10px; z-index:5; -moz-box-shadow:3px 3px 7px #888,inset 0 150px 50px rgba(255, 255, 255, .1),inset 0 100px 50px rgba(255, 255, 255, .2),inset 0 50px 50px rgba(255, 255, 255, .5); -webkit-box-shadow:3px 3px 7px #888,inset 0 150px 50px rgba(255, 255, 255, .1),inset 0 100px 50px rgba(255, 255, 255, .2),inset 0 50px 50px rgba(255, 255, 255, .5); box-shadow:3px 3px 7px #888,inset 0 150px 50px rgba(255, 255, 255, .1),inset 0 100px 50px rgba(255, 255, 255, .2),inset 0 50px 50px rgba(255, 255, 255, .5)}
.inner > h4 {font-weight:normal; font-size:1.1em; border-bottom:1px dotted #666}
.inner > h4 > em, .inner > div > em, .OE > em, .OE > li > em, .A > em, .lOE > em, .ME > em, .ME > li > em, .AN > em, .ON > em, .MDu > em, .L > em, .ModE > em {color:#666; font-size:.85em}
i.cap {transform:translateY(-.2em)}
table {border-collapse:collapse; border-right:1px dotted #999; border-bottom:1px dotted #999}
td, th {padding:2px 5px 4px 5px; border-top:1px dotted #999; border-left:1px dotted #999; vertical-align:top}
th.minor, .minor > th, .minor > tr > th, .minor > tbody > tr > th {font:italic normal 1em "Palatino Linotype","Times New Roman",Times,serif; color:#333}
.OE > caption, .ME > caption, .ModE > caption {color:#000}
.verse hr {background:#fff; color:#fff; height:1px; margin:.5em 0; border:none}
.weblog > p:first-child {font-style:italic; color:#666; float:right; margin:-2.5em 0 1em 0}
.weblog > h3 {color:#666; font-size:1.1em; margin-bottom:0}
blockquote {position:relative; float:left; width:50%; margin:0 10px 10px 40px; font:italic 1.75em/1.5em Georgia, "Times New Roman", Times, serif; color:#999}
blockquote:before {position:absolute; top:5px; left:-40px; font:normal 600 2.4em/.6em "Arial Black", "MS Sans Serif", "Lucida Console", Impact, Gadget, sans-serif; color:#ebebeb; content:"\201c"}
#sounds-spellings {width:60%; float:left; margin-right:6%}
#commentary {overflow:hidden}
#commentary + .footnote {clear:both}
.stats {display: flex; flex-wrap: wrap; justify-content: space-between}
/* to do - change section.division to article once article has become main: */
.division {padding-top:1.5em; border-top:1px dotted #666; margin-top:1.5em}
h1 > small {color:#333; font-size:1rem; line-height:1.2rem}
h4.ME > small {color:#333; font-weight:normal; font-size:1em}
h4.ME > small.ME {color:#090}

/* AS without tears */
.photo {position:relative; float:left; margin:0 25px 10px 0}
.photo > .caption {position:absolute; bottom:0; left:0; width:94%; max-width:290px; padding:0 3%; line-height:1.1em; color:#fff}
.photo > .caption > a {color:#fff}
.drophead {float:left; margin:0 .5em 0 0; font:italic normal 1.8em/1.2em "Palatino Linotype","Times New Roman",Times,serif}
.drophead > a {text-decoration:none}
.drophead > a:hover {text-decoration:underline}
.drophead > a > strong {font-size:2.1rem}

/* home */
body#home {background:url(../images/ash_thorn.png) #fff 20px -160px no-repeat}
#home > header {position:relative; top:123px; margin-bottom:187px; padding:4px 125px 9px 18px}
#home > header:before {display:block; content:""; height:123px; width:100%; position:absolute; left:0; top:-123px; background:url(../images/orm_text_911x100.png) 20px 14px no-repeat}
header > h1 {font:normal 72px/72px "Times New Roman", Times, serif; margin:0}
#home > header > .tagline {float:right; margin:0; color:#fff; position:relative; top:-50px; font:bold italic 2.1em/1.1em "Times New Roman", Times, serif}
#home > #content {padding-top:0; margin-top:-47px; width:64%}
#home > article > section > h4 {margin-bottom:0}
.spruik {font:normal 1.3em Georgia, "Times New Roman", Times, serif; margin-right:-214px}
.spruik > i {font-family:"Segoe Script", "Bradley Hand", cursive; font-size:14px; float:right; color:#999}
#entry-points {background:url(../images/midlands.png) 100% 80% no-repeat; margin-bottom:1.4em}
#entry-points > a {padding:.5em 1em; background:#333; display:inline-block; border-radius:10px; font-size:1.2em; margin:0 1rem 10px 0; text-decoration:none}
#entry-points > a + a {background:#999; margin-right:0}
#face-attercop {background:url(../images/wes_thu_hal.png) 50% 100% no-repeat; padding-bottom:10px}
#face-attercop > p {padding-bottom:60px; margin-bottom:0; position:relative}
#face-attercop > p > img {float:left; margin-right:.5em}
/* NB - max-width required by Chrome: */
.speech {font-family:"Comic Sans MS", "Chalkboard SE", sans-serif; bottom:15px; left:40px; border-radius:50px / 20px; max-width:90px; border:1px solid #999}
.speech:after, .speech:before {content:"\00a0"; display:block; position:absolute; width:0; height:0; border-left:0 none; border-right:12px solid transparent; -webkit-transform:rotate(345deg); -moz-transform:rotate(345deg); -ms-transform:rotate(345deg); transform:rotate(345deg)}
.speech:after {border-bottom:15px solid #999; left:17px; top:-14px}
.speech:before {border-bottom:15px solid #fff; left:19px; top:-11px; z-index:2}
#home > #content, #home > aside {padding-bottom:.2em}
#home > aside {width:30%}
#home > .switch {top:300px}
#home > aside > h4 {clear:both}
#home > aside > ul {list-style:none; padding:.5em; line-height:1.1em; background:#eee}
#home > aside > ul > li {padding:0 0 5px 60px; background:url(../images/orm_text_border_50x50.png) 0 0 no-repeat; min-height:50px}
#home > aside > ul > li:first-child {background-image:url(../images/man_on_phone_50x50.png)}
#home > aside > ul > li:nth-child(2) {background-image:url(../images/man_with_helmet_50x50.png)}
#home > aside > ul > li:nth-child(3) {background-image:url(../images/scribe_50x50.png)}

/* start variable rules (varied by alternate style sheets) */
/* IE8 declaration appears first and is then overridden for modern browsers: */
header {background:#ccc; background:rgba(0,0,0,0.3); position:relative}
header:after {position:absolute; z-index:0}
header > h3, header > h1 {text-shadow:rgba(0,0,0,0.5) 1px 1px 2px}
header > h3 > a > em, header > h1 > em {text-shadow:rgba(255,255,255,0.5) 1px 1px 2px}
header > h3 > a, header > h3 > a:hover, header > h1 {color:#fff}
header > h3 > a > em, header > h1 > em {color:#333}

/*=========================================
	"grey scale" theme rules
=========================================*/
/* NB - these need to be overriden in each theme style sheet */
/* IE8 background-color declaration appears first and is then overridden for modern browsers; rgba color will be ignored by IE8 */
header {background:url(../images/strickland_brooch_combo_342x90.png) #ccc no-repeat bottom right}
header {background-color:rgba(0,0,0,0.3)}
a, .topnav > li > h4 {color:#666}
a:hover, .topnav > li > h4:hover, .topnav > li > h4:focus {color:#000}
.topnav > li.down > h4 {color:#fff}
footer {background:#eee}

/*=========================================
	$@media Queries
=========================================*/

/* ### table of contents ### */
/* > 1010px */
/* <= 1010px */
/* 1010px - 769px */
/* 1010px - 641px */
/* > 768px */
/* <= 768px */
/* 768px - 641px */
/* 768px - 481px */
/* <= 640px */
/* <= 480px */
/* <= 320px */

/* issues to be dealt with:
	# tabular data, especially wide tables - reformat as definition lists: 1st cell in row becomes the 'dt' and each remaining cell becomes a 'dd'; use ':before' via css to insert the text of the corresponding 'thead th' before each cell;
	# at what width do verses become single column?
*/

/*		"Wide Landscape"; for viewports > 1010px; (990 + 8 + 8 px + scrollbar width)
		main content and sidebar sit side-by-side;
		both main content and sidebar have fixed width.

@media screen and (min-width:1011px) {
}    */

/*		anything narrower than "Wide Landscape"; for viewports <= 1010px;
		main content sits above the sidebar;
		both main content and sidebar have width set to 'auto' but with max-width of 720px.    */

@media only screen and (max-width: 1010px) {
	body {width:auto}
	#content, aside {width:auto; max-width:657px; float:none; display:block}
	#content {padding-right:2%; padding-top:2.4em}
	aside {padding-left:2%}
	.wide-table > aside > .include > section {float:none; width:auto; margin-right:0}
	.wide-screen, .topnav > li:first-child {display:none}
	.topnav > li:nth-of-type(2) {border-left:none}
	header > nav {margin-left:-.5em}
	.tagline {margin-right:130px}
	#sounds-spellings {float:none; width:auto; margin-right:0}
	.option + dd {width:auto; left:180px; z-index:10}
	.without-tears > #content {background-position:95% 50px}
	.switch {position:relative; top:0; float:right; width:49.95%; padding-top:1.25em; padding-bottom: .75em; box-sizing:border-box; z-index:2}
	.switch + .switch {margin-top:0; text-align:left; padding-left:2%}
	.switch + article + aside, .switch + .switch + article + aside {padding-top:1rem}
	article {clear:both}
	/* home */
	#home > header {top:0; margin-bottom:0; padding:4px 2%}
	#home > header:before {top:-12px}
	header > h1 {float:left; margin-right:1em}
	#home > header > .tagline {color:#666; float:left; font-size:1.7em; line-height:1.2em; margin-right:1em; margin-top:1em; top:0}
	#home > #content {margin-top:0; width:auto}
	.spruik {margin-right:0; margin-top:10px}
	.spruik i {float:none}
	#entry-points {background-position:top right}
	#home > .switch {top:0}
	#home > #content {padding-top:1.2em}
	#home > aside {width:auto}
}

/*		Tablet and higher; for viewports > 768px;
		room enough for a variety of fixed widths for subnav lists.    */

@media screen and (min-width:768px) {
	.topnav > li:nth-of-type(2) > .subnav > li {width:270px}
	.topnav > li:nth-of-type(4) > .subnav > li {width:290px}
	.topnav > li:nth-of-type(5) > .subnav > li {width:260px}
	.topnav > li:nth-of-type(6) > .subnav > li {width:100px} /* li:nth-last-of-type(2) */
	.topnav > li:nth-of-type(7) > .subnav > li {width:150px} /* li:last-of-type */
	.grid {display:grid; grid-template-columns:1fr 1fr; gap:0 1rem}
	.gtc-3 {grid-template-columns:1fr 1fr 1fr}
}

@media screen and (min-width:320px) {
	.grid-sm {display:grid; grid-template-columns:1fr 1fr; gap:0 1rem}
}

@media only screen
and (min-width : 768px)
and (max-width : 1011px) {
	.very-wide {font-size:.9em}
}

.lt-768 {display:none}

@media only screen and (max-width: 760px) {
	.gt-768 {display:none}
	.lt-768 {display:block}
	/* tables ; NB - the only descendent selectors (rather than child selectors) appear here: */
	.multi-col {border:none}
	.multi-col th, .multi-col td {display:inline; border:none; line-height:1.5em}
	.multi-col tr:not(.gt-768) {display:block; border-top:1px dotted #666; padding:.5em 0}
	#future tr:first-of-type th {font-weight:normal;}
	/* X tables - (re sound changes) */
	.X tr:first-of-type, .Y tr:first-of-type {display:none}
	.X tr:nth-of-type(2):before {color:#666; font-style:italic; display:block; line-height:1.5em; content:"Sound (and spelling) changes from OE to eME, with examples;"; padding-bottom:.5em; margin-bottom:.5em; border-bottom:1px dotted #666}
	.X tr:nth-of-type(2) {border-top:none}
	/* table cells */
	.X td.IPA {font-size:1em}
	.X td:before, .X td:after, .Y td:before, .V td:before, .P td:before {color:#999; font-weight:normal}
	.X td:nth-of-type(2):after, .X td:nth-of-type(4):after {content:">"; margin-left:1em}
	.X td:nth-of-type(4):before {content:"Examples: "}
	.X td:nth-of-type(6):before {content:"Orm/PC2: "}
	.X td:nth-of-type(7):before {content:"Ch: "}
	.X td:nth-of-type(8):before {content:"ModE: "}
	/* Y table - alt spellings */
	.Y td:nth-of-type(2):before, .P td:nth-of-type(6):before {content:"eME: "}
	.Y td:nth-of-type(3):before {content:"alt eME: "}
	.Y td:nth-of-type(4):before {content:"PC1: "}
	.Y td:nth-of-type(5):before {content:"PC2: "}
	.Y td:nth-of-type(6):before {content:"Orm: "}
	.Y td:nth-of-type(7):before {content:"Orm (mod.): "}
	.Y td:nth-of-type(8):before {content:"PH3: "}
	.Y td:nth-of-type(9):before {content:"SO: "}
	.Y td:nth-of-type(10):before {content:"Ch: "}
	.Y td:nth-of-type(11):before {content:"late ME: "}
	.Y td:nth-of-type(12):before, .P td:nth-of-type(5):before {content:"ModE: "}
	/* V tables - ME spelling differences */
	.V td:nth-of-type(2):before, .P td:nth-of-type(1):before {content:"OE: "}
	.V td:nth-of-type(3):before {content:"PC2: "}
	.V td:nth-of-type(4):before {content:"Orm: "}
	.V.v1 td:nth-of-type(5):before {content:"PC1: "}
	.V.v1 td:nth-of-type(6):before {content:"HA: "}
	.V.v1 td:nth-of-type(7):before {content:"VH: "}
	.V.v1 td:nth-of-type(8):before {content:"BH: "}
	.V.v1 td:nth-of-type(9):before {content:"HR: "}
	.V.v1 td:nth-of-type(10):before {content:"PM: "}
	.V.v1 td:nth-of-type(11):before {content:"Other: "}
	.V.v1 td:nth-of-type(12):before, #secondary-source-examples td:nth-of-type(11):before {content:"eME: "}
	.V.v2 td:nth-of-type(5):before {content:"Owl: "}
	.V.v2 td:nth-of-type(6):before {content:"Lmn: "}
	.V.v2 td:nth-of-type(7):before {content:"AW: "}
	.V.v2 td:nth-of-type(8):before {content:"PH3: "}
	.V.v2 td:nth-of-type(9):before {content:"SO: "}
	.V.v2 td:nth-of-type(10):before {content:"Ch: "}
	.V.v2 td:nth-of-type(11):before {content:"alt eME: "}
	/* P tables - OE dual-stem paradigms in eME and ModE */
	.P td:nth-of-type(2):before {content:"alt OE: "}
	.P td:nth-of-type(3):before {content:"PC2/Orm/Ch: "}
	.P td:nth-of-type(4):before {content:"MED: "}
	/* specific tables */
	#sounds-spellings {width:auto; float:none}
	/* other elements */
	blockquote {float:none; width:auto}
	.dialect {margin-right:10px}
	/* specific pages */
	.weblog > p:first-child {float:none; margin:-.5em 0 1em 0}
	h1 > small {display:block; margin-top:.5rem}
}

@media screen and (max-width: 600px) {
	.tagline {float:left; margin-left:260px; margin-right:0}
	.verse {column-count:1; column-gap:0; column-rule:none}
	.col {width:auto; float:none}
	.col.first {padding-right:0}
	.col.last {padding-left:0; border-left:none}
	.switch > label {display:none}
}

@media only screen
and (min-width : 481px)
and (max-width : 767px) {
	.topnav > li:nth-of-type(6) > .subnav > li, .topnav > li:nth-of-type(7) > .subnav > li {width:100px}
}

@media screen and (max-width:480px) {
	img {max-width:300px}
	ul, ol {padding-left:1rem}
	dd {margin-left:1rem}
	header {padding-top:0}
	.tagline {float:none; top:5px; left:0; margin:0}
	#curr-def {width:auto; margin-right:10px}
	.switch {padding-top:.5em}
	.switch > select {max-width:150px}
	/* home */
	header > h1 {font-size:56px; line-height:56px; margin-right:0}
	#home > header > .tagline {color: #fff; font-size: 1.2em; margin-top: .25em}
	#entry-points > a {padding:.35em .8em; font-size:1.1em}
	#face-attercop {background-position:100% 100%}
	.speech {left:5px}
	.photo {float:none; margin-right:0}
	header > nav {margin-top:12px}
	header > nav > h4 {height:0; overflow:hidden}
	.tablet {display:none}
	.topnav {position:relative; display:flex}
	.topnav > li {position:static; flex:1; text-align:center; white-space:nowrap}
	/*.topnav > li:last-of-type > h4:before {content:"ná "} - for Englisc buten taeres*/
	.topnav > li > .close {top:-1em; right:2%; font-size:1.6em}
	.subnav {left:0; width: 100%}
	.subnav > li {width:auto}
	.subnav > li > a {padding:.5em; display:inline-block}
	.subnav > li:first-child > a[href*="/about/"]:before {content:"about the Englesaxe site - an "}
	.subnav > li:first-child > a[href*="/language/"]:before {content:"the language of Early Middle English - an "}
	.subnav > li:first-child > a[href*="/texts/"]:before {content:"texts in Early Middle English - an "}
	.subnav > li:first-child > a[href*="/OEtoME/"]:before {content:"from Old English to Middle English - an "}
	.subnav > li:first-child > a[href*="/weblog/"]:before {content:"a weblog in Early Middle English - "}
	.subnav > li:first-child > a[href*="/ASwithoutTears/"]:before {content:"Audrey and the attercop - an "}
}

/* prevent initial upscaling of text in landscape orientation in iPhone (observed in iPhone 5) */
@media only screen
and (device-aspect-ratio: 40/71)
and (orientation : landscape) {
	body {-webkit-text-size-adjust: 100%;}
}