/* Styles for wion.com */

/* TYPEFACE 
100 = Extra Light or Ultra Light
200 = Light or Thin
300 = Book or Demi
400 = Regular (or Normal)
500 = Medium
600 = Semibold, Demibold
700 = Bold
800 = Black, Extra Bold or Heavy
900 = Extra Black, Fat, Poster or Ultra Black
*/

/*
— local will pull from local machine, if font exists there
— woff is for Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
— woff2 is for Chrome 26+, Opera 23+, Firefox 39+
*/

/* Goudy Bookletter 1911 Regular */
@font-face {
font-family:'Goudy Bookletter 1911';
src: local('Goudy Bookletter 1911'), local('GoudyBookletter1911'),
	url('/assets/fonts/goudy-bookletter-1911-v8-latin-regular.woff2') format('woff2'),
	url('/assets/fonts/goudy-bookletter-1911-v8-latin-regular.woff') format('woff');
font-weight:400;
font-style:normal;
}

/* Alegreya Italic Regular */
@font-face {
font-family:'Alegreya';
src: local('Alegreya Italic'), local('Alegreya-Italic'),
	url('/assets/fonts/alegreya-v12-latin-italic.woff2') format('woff2'),
	url('/assets/fonts/alegreya-v12-latin-italic.woff') format('woff');
font-weight:400;
font-style:italic;
}

/* HK Grotesk Medium Regular */
@font-face {
font-family:'HK Grotesk';
src: local('HK Grotesk Medium'), local('HK-Grotesk-Medium'),
	url('/assets/fonts/hkgrotesk-medium.woff2') format('woff2'),
	url('/assets/fonts/hkgrotesk-medium.woff') format('woff');
font-weight:500;
font-style:normal;
}

/* HK Grotesk Medium Italic */
@font-face {
font-family:'HK Grotesk';
src: local('HK Grotesk Medium Italic'), local('HK-Grotesk-Medium-Italic'),
	url('/assets/fonts/hkgrotesk-mediumitalic.woff2') format('woff2'),
	url('/assets/fonts/hkgrotesk-mediumitalic.woff') format('woff');
font-weight:500;
font-style:italic;
}

/* HK Grotesk Bold Regular */
@font-face {
font-family:'HK Grotesk';
src: local('HK Grotesk Bold'), local('HK-Grotesk-Bold'),
	url('/assets/fonts/hkgrotesk-bold.woff2') format('woff2'),
	url('/assets/fonts/hkgrotesk-bold.woff') format('woff');
font-weight:700;
font-style:normal;
}

html {font-family:sans-serif;}

/* Serif */
.masthead h1,
main,
article h1,
article h2,
article h3,
article h4,
.standfirst,
.menu-item dt,
.endnotes,
.biblio,
dt {
	font-family:'Goudy Bookletter 1911', serif;
	text-rendering: optimizeLegibility;
}

.menu-item i,
article [lang=fr],
article i, 
article em {
	font-family:'Alegreya', serif;
	text-rendering: optimizeLegibility;
}

/* Sans-serif */
.gui, .tete h1, .tagline, .subtitle, nav, .publine, .datified,
.metainfo dt, .terms dt, .menu-item dd, .filetree,label,
article sup, .annotation, .annotation i, .annotation em,
.paging {
	font-family:'HK Grotesk', arial, sans-serif;
}

caption,
figcaption,
aside,
tr, td,
.shortcut,
kbd {font-family:'Arial Narrow', 'Avenir Next Condensed', sans-serif;}

span.impact,
span.yell {
	font-family:Impact, 'Arial Black'; 
	text-transform: uppercase;
}

.pied {font-family:'HK Grotesk', 'Avenir', arial, sans-serif;}


/*-----------------------------
       WEB DOCUMENT LAYOUT
--------------------------------*/

html {line-height:1.4;}
  
body {margin:0 auto;}

.headwrap,
.mainwrap,
.footwrap {
  width:auto;
  max-width:86em;
  padding:0 3%;
  margin:0 auto;
}

.headwrap .masthead: {margin-top:1em}



.footwrap .pied {}


/*----------------------------------
            FONT SIZES
-------------------------------------*/

html {
	font-size:18px;
	font-size: clamp(18px, 2vw, 20px); /* sets a min/max size range relative to screen width */
	text-size-adjust:100%; /* controls for text inflation on some smartphones and tablets */
}

/* Elements */

article, legend {font-size: 1.2rem;}

article sup {font-size:.65em;}

nav a {font-size:.95rem;}

label, input, select, textarea {font-size:.9rem;}

table {font-size:.8rem;}
tfoot td, figcaption {font-size: .75rem;}
figcaption code {font-size:.69rem;}

blockquote p {font-size:.975rem;}

code {font-size:.875rem;}

.shortcut, kbd {font-size:.8rem;}

small {font-size:75%;}

/* Selectors */

.masthead h1 {font-size:4rem;}

.paging, .example {font-size:.9rem;}

.subtitle,
.tagline,
.publine {font-size:.85rem;}

#contents li::before,
.filetree {font-size:.95rem;}

.sectionmarks h2::before {font-size:95%;}
.sectionmarks h3::before {font-size:90%;}
.sectionmarks h4::before {font-size:85%;}

.datified {font-size:.7rem;}

.comConnectForm p {font-size:.8rem;}
.comThanks span {font-size:.75rem;}

.endnotes code,
.endnotes ol,
.biblio ol {font-size:.83rem;}

.endnotes code {font-size:.78rem;}
.endnotes kbd {font-size:.72rem;}

.endnotes sup {font-size:small;}

.act h1,
.annotation {font-size:.7rem;}

.topiclist dt {font-size:.86rem;}
.topiclist dd {font-size:.83rem;}

.menu-item dt {font-size: 10vw;}
.menu-time dd {font-size: 2vw;}

.gui {font-size:90%;} /* used when indicating UI strings */

.message {font-size:80%;}

.pied p {font-size:.95rem;}

/* Pseudos */

a[rel="external"]::after {font-size:.5rem;} /* external link arrow */

/*----------------------------------
         MASTHEAD and TÉTE
-----------------------------------*/

.masthead {
	text-align:center;
	margin-top:1em;
}

.masthead h1 {
text-transform:uppercase;
line-height:1;
margin:0 auto;
}

.masthead a,
.tete a {
text-decoration: none;
background: none;
}
	
.tagline { 
text-align:center;
margin-top:.5em;
margin-bottom:1.5em;
}

.break { display: block; }

/* NAVIGATION */

nav ul {
display:flex;
flex-direction:row;
flex-wrap: wrap;
justify-content:space-between;
align-items:center;
}

nav ul {
width:auto;
margin:0;
padding-left:0;
list-style:none;
text-align:center;
}

nav li {
width:auto;
text-transform:lowercase;
}

nav li:first-child {
font-weight:700;
text-transform:uppercase;
}

/*---------------------- 
           LINKS
-------------------------*/
a {text-decoration-line: underline;}

a:hover {
	background-image:url('/assets/images/bar-link.png');
	background-position:bottom;
	background-repeat:repeat-x;
}

a[rel="external"]::after {
	position: relative;
	top:0;
	vertical-align:top;
	display: inline-block;
	font-family: arial;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	text-transform: none !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding-left:1px;
	/*content: "⤴︎"; U+2934*/
	/*content: '⤻'; U+293B*/
	content: '⤤'; /*U+2924*/
}

nav a {
text-decoration:none;
background:transparent;
line-height:2;
display:block;
padding:.3em .4em;
}

nav a:hover {transition:all .3s ease-in-out;}

nav a:hover,
nav li.active a {
background-position:45%;
background-repeat:no-repeat;
background-image:url('/assets/images/bar-nav.png');
}

nav li.active a {transition:none;}

/* Put a down arrow on the active link */
nav li a::after {content:'\21E3';}

/* Put an up arrow on the home link */
nav li:first-child a::after,
nav li:first-child a:hover::after {content:'\21E1';}

/*------------------------------
           LE CORPS
-------------------------------*/

h1 {
margin:0;
padding:0;
}

/* LISTS */

.filetree,
.filetree ul,
.filetree ul ul,
.filetree ul ul ul,
.filetree ul ul ul ul {list-style-type:none;}

.filetree {padding-left:0;}

dt {font-weight:bold;}

dd {margin-left:0;}

/*
======== TABLES =======
*/

table {
width:100%;
text-align:left;
margin:2em auto;
border-collapse: collapse;
}

caption {
text-align:left;
margin-bottom:.5em;
}

thead,
tfoot {border: none;}

th,
tbody td {padding:4px 1%;}

tbody tr {
border-bottom-width:1px;
border-bottom-style:solid;
}

.rowgroup-hed {border-bottom-width:2px}

.rowgroup-hed th {
padding-top:.75em;
}

tfoot {
text-align: left;
border-top-width: 3px;
border-top-style: solid;
}

tfoot ol {
list-style-type:none;
text-indent: -.75em;
padding-left: .75em;	
}

tfoot li {
margin:.3em 0;
line-height:1.2;
}

/* Intended for 'ul' but 'ol' works too */
.refmarks {
list-style-type:none;
text-indent: -.75em;
padding-left: .75em;	
}

.refmarks li::before {margin-right:.4em;}

.refmarks li:first-child:before {content:'\002a';} /* asterisk */
.refmarks li:nth-of-type(2):before {content:'\2020';} /* dagger */
.refmarks li:nth-of-type(3):before {content:'\2021';} /* double dagger */
.refmarks li:nth-of-type(4):before {content:'\00a7';} /* section */
.refmarks li:nth-of-type(5):before {content:'\00b6';} /* pilcrow */
.refmarks li:nth-of-type(6):before {content:'\2016';} /* parallel bars */
.refmarks li:nth-of-type(7):before {content:'\002a\002a';} /* dble asterisk */
.refmarks li:nth-of-type(8):before {content:'\2020\2020';} /* dble dagger */


/* 
======= IMAGES, FIGURES, AND ASIDES =========
*/

figure {
	width: auto;
	margin: 1.5em auto;
}

img,
figure img {padding:0;}

figure img {width:100%;}

figcaption {
	padding: .3em 0;
	line-height:1.2;
}

/* for some images in Notes only */
figure.scroll {overflow:auto;}
figure.scroll img {width:auto; height:auto;}

/* 
========= CITES AND QUOTATIONS =========
*/

cite {font-style:normal;}

blockquote {
	width: auto;
	margin: 0;
	padding-left: 4%;
	border-left-width: 10px;
	border-left-style: solid;
}

/* Single marks override browser defaults */
q:before {content: "\2018";}
q:after {content: "\2019";}

/* Language bits */
[lang=fr],
[lang=de],
[lang=la] {font-style:italic;}


/* 
======= PRE, CODE, KEYS =======
*/

code,
pre {
	border-width:1px;
	border-radius:5px;
}

kbd {
	padding:0 2px;
	border-radius:3px;
}

pre,
pre code {word-wrap:normal;}

pre {
	line-height:1.1;
	display:block;
	margin:1em 0;
	padding:.5em;
}

pre code {
	white-space:pre-wrap;
	word-break:normal;
	word-spacing:normal;
	hyphens:none;
}

/* 
======= Supers and Subs =======
*/


sub, sup {
vertical-align: baseline;
position: relative;
font-size: 70%; /* 70% of parent font size. */
} 
/* em adapts to parent font-size */
sub {bottom: -0.6em;} 
sup {top: -0.6em;}


/* 
======= HARD RULES =======
*/

hr {
	width:100%;
	margin:0 auto 1.5em 0;
	height:1px;
	border:0;
}

hr.asterism {
width: auto;
margin:1em auto 2.5em auto;
text-align: center;
overflow: visible;
background: none;
position:relative;
}

hr.asterism:before {
content: '\2042'; /* asterism unicode */
position:absolute;
left: 50%;
right: 50%;
}

hr.startrule,
hr.endrule {
	width: 54%;
	margin-left:0;
}

hr.startrule,
hr.endrule {
	margin-top:0;
	margin-bottom:0;
}

/* div.example, For block element examples
   Currently only used in /guide */
.example {margin-left:5%;}


/*=============================
         SHARED ON PAGES
==============================*/

.doc-header,
.notes-default header {
	margin-top: 1.5em;
	margin-bottom: 2em;
	text-align:center;
	line-height:1.2;
}
	
.doc-title h1 {
	margin:0 auto .3em auto;
	padding-top:0;
	padding-bottom:0;
}

.tagline,
.subtitle {
margin:0 auto 2em auto;
padding:0;
font-weight:normal;
}

.fancytitles {font-style:italic;}

.excerpt-break {
	display:block;
	margin-top:.5em;
}

.onpage {margin-bottom:2em;}

.tfp:after {content:'\3002';}

.standfirst {
	font-weight:600;
	margin:1.5em auto;
	text-align:left;
}

/* CONTENTS LISTS 
   Packaged in a section element. Served via a Txp shortcode. Behaviour provided by soo_toc plugin.
   The list on the Policies page uses a different numbering system. 
*/

section#contents {margin:2.5em auto;}

#contents h1 {
	margin-top:1em;
	margin-bottom:.5em;
}

#contents hr.endrule {margin-top:1.5em;}

#contents ul,
#contents ol {
	list-style-type: none;
	list-style-position:inside;
	padding-left:0;
	margin-top:0;
}

#contents ol ol {padding-left:1.2em;}

/* 
   Notes template: article.sectionmarks
   Contents list on notes page: section#contents 
*/

#contents ul ul {padding-left:.6em;}
#contents ul ul ul {padding-left:1em;}

#contents ul li::before {padding-right:.3em;}

.sectionmarks h2::before,
.sectionmarks h3::before,
.sectionmarks h4::before {padding-right:.3em;}

.sectionmarks h2::before,
#contents ul li::before {content: '\00a7';}

.sectionmarks h3::before,
#contents ul ul li::before {content: '\00a7\00a7';}

.sectionmarks h4::before,
#contents ul ul ul li::before {content: '\00a7\00a7\00a7';}


/* 
   Numbered Contents lists
   Requires 'wraptag="ol" in the contents short-tag.
*/

#contents ol {counter-reset: lev1 -1;}
#contents ol ol {counter-reset: lev2;}
#contents ol ol ol {counter-reset: lev3;}
#contents ol ol ol {counter-reset: lev4;}

#contents ol li {counter-increment: lev1;}
#contents ol li::before {content:counter(lev1, decimal-leading-zero) ' ';}

#contents ol ol li {counter-increment: lev2;}
#contents ol ol li::before {content:counter(lev1) '.' counter(lev2) ' ';}

#contents ol ol ol li {counter-increment: lev3;}
#contents ol ol ol li::before {content:counter(lev1) '.' counter(lev2) '.' counter(lev3) ' ';}

#contents ol ol ol ol li {counter-increment: lev4;}
#contents ol ol ol ol li::before {content:counter(lev1) '.' counter(lev2) '.' counter(lev3) '.' counter(lev4) ' ';}

/* Numbered Headers
   Requires article.numbered
   For Notes articles, requires the value 'sync' in Contents custom field. 
*/
.numbered {counter-reset: section -1;}
.numbered h2 {counter-reset: section2;}
.numbered h3 {counter-reset: section3;}

.numbered h2::before {
	counter-increment: section;
	content: counter(section, decimal-leading-zero) ' ';
}

.numbered h3::before {
	counter-increment: section2;
	content: counter(section) "." counter(section2) ' ';
}

.numbered h4::before {
	counter-increment: section3;
	content: counter(section) "." counter(section2) "." counter(section3) ' ';
}


/*
======= DEFINITIONS LISTS ========
*/

.metainfo dt {
	font-weight:normal;
	display:inline-block;
	min-width:160px;
	margin-left:.5em;
}

.metainfo dd {
	display:inline;
	margin:0;
}

.metainfo dd:after {
	display:block;
	content: '';
}

/* where are these used? */

.notype {list-style-type:none;}

.nopad {padding-left:0;}

.somepad {padding-left:1em;}


/*=============================
         HOMEPAGE
==============================*/

.menu {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-around;
	align-items:flex-start;
	align-content:space-between;
	position:relative;
	margin-top:1em;
}

.menu::before {
	z-index: -1; 
	position:absolute;
	width:100%;
	height:100%;
	content: '';
	background-image:url('/assets/images/ladder.png');
	background-position:50% 50%;
	background-origin:padding-box;
	background-size:contain;
	background-repeat:no-repeat;
	filter:opacity(45%);
}

/* ORIGIN MENU STUFF */
.menu-item {
	width:100%;
	margin:0;
	padding:.5em 0;
	text-align:center;
}

.menu-item dt {line-height:1;}


/*=============================
          ABOUT SECTION
==============================*/

.editor {
	position:relative;
}

.editor::before {
	position:absolute;
	z-index:-1;
	width:100%;
	height:100%;
	content: '';
	background-image:url('/assets/images/editor.png');
	background-position:50% 50%;
	background-origin:border-box;
	background-size:contain;
	background-repeat:no-repeat;
}

.act {
	margin: 3em auto;
  text-align: center;
  line-height: 1;
}

.act h1 {text-transform: uppercase;}

.act h1::after {
    display: block;
    margin-top: -10px;
    margin-bottom: 1.3em;
    content: '⸐⸏⸏⸏⸑';
}

.end {
	width:6.5rem;
	margin:2em auto;
	padding-top:3rem;
	background-image:url('/assets/images/bflo.png');
	background-position:39.5% 50%;
	background-origin:border-box;
	background-size:contain;
	background-repeat:no-repeat;
	text-align:justify;
}

/*================================
        NOTES SECTION
==================================*/

/* Common rules for section */

.notes-default header,
.publine {position:relative;}

.notes-default header::before,
.publine::before {
	z-index:-1; 
	position:absolute;
	left:0; top:0;
	width:100%;
	height:100%;
	content:'';
	background-position:center bottom;
	background-origin:border-box;
	background-repeat:no-repeat;
}

/* Default view */

.notes-default header {
	margin-top:1.5em auto 2em auto;
	text-align:center;
	padding-bottom:50px;	
}

.notes-default header::before {
	background-image:url('/assets/images/bar-branche.png');
	background-size:350px auto;	
}

.noteslist {
	list-style:none;
	padding-left:0;
}

.noteslist li {
	line-height: 1;
	width:auto;
	margin:.65em auto;
} 

/* Articles view */
.publine {
	margin-top:2em;
	margin-bottom:0;
	padding-bottom:70px;
}

.publine::before {
	background-image:url('/assets/images/bar-waves.png');
	background-size:234px auto;	
}

/* .terms class also used in policies page */
.terms dt {
	float:left;
	display:inline;
}

.dropcap::first-letter {
	font-size: 200%;
	vertical-align:baseline;
	line-height: 1;
}

.terms dt::after {content:':\2009';} /* a split space after colon */

.terms dd {margin-bottom:.75em;}

/* FIGURE positioning classes */

.figleft,
.figright {
	margin-top:1.5em;
	margin-bottom:1.5em;
}

/* figcaption > span.source */
.source {display:block; margin-top:.7em;}
.source::before {content:'(Source: ';}
.source::after {content:')';}

/* Comments note */
.comments {
	width: auto;
	margin:2em auto 3.5em auto;
	position: relative;
}

.comments p {padding-left:1em;}

.comments p::before {
	z-index:-1;
	content:'';
	position: absolute;
	width: 50%;
	height: 100%;
	margin-left:-1em;
	background-image:url(/assets/images/parenth-l.png);
	background-size:contain;
	background-origin:border;
	background-position:left center;
	background-repeat:no-repeat;
}

/* Message Box */
.message {
	margin-top: 2.5em;
	padding: .85em;
	border: 2px dashed;
}

.message header {margin: 0 0 .7em 0;}

.message h1,
.message p {
	margin:0;
	padding:0;
}

/* Notes browsing/flipping/paging */

.paging {margin-top:2em;}

.paging ul {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	align-items:flex-start;
	align-content:space-between;
	position:relative;
	margin:0;
	padding:0;
	list-style:none;
}

.paging li {
	width:auto;
	margin:0;
}

.paging li a {
	text-decoration:none;
	background:transparent;
	line-height:2;
	display:block;
	padding:0;
}

.note-prev a::before {content:'⇠'; margin-right:.2em;} /*u+21e0*/
.note-next a::after {content:'⇢'; margin-left:.2em} /*u+21e2*/

.paging li a:hover,
.note-prev a:hover::before,
.note-next a:hover::after {transition:all .3s ease-in-out;}

.note-prev {
	text-align:right;
	padding-right:.5em;
	border-right:1px solid;
}

.note-next {
	text-align:left;
	padding-left:.5em;
	border-left:1px solid;
}


/*================================
        CONTACT PAGE
==================================*/
/* Comm_Connect plugin form.comConnectForm */

* {box-sizing: border-box;}

.comConnectForm {line-height:1;}

form {
	position:relative;
	padding-top:2em;
	margin-top:2em;
}

legend {
	position:absolute;
	top:0;
	left:0;
}

fieldset {
	padding:1em 3%;
	margin-left:0;
	margin-right:0;
	border-width:1px;
	border-style:solid;	
}

label {
	margin-top:.5em;
	margin-bottom:0; 
	line-height:1.2;
}

input, select, textarea {
	width:100%;
	padding:6px;
	border-width:1px;
	border-style: solid;
	resize:vertical;
	margin-top: .2em;
	margin-bottom:1em;
}

select, input {
	line-hight:1.6;
	padding: 5px 3px;
}

div.checkbox {position:relative;}

input.comCheckbox {
	width:5%;
	margin-top:0;
}

label.comCheckbox {
	float:right;
	width:93%;
	margin-top:7px;
}

.comConnectForm p {
	margin-bottom:1em;
	font-family:serif;
	font-style:italic;
}

.submitbox {
	width:50%;
	margin-left:auto;
	margin-right:auto;
}

select.comSelect {
	border-top-left-radius:0;
	border-top-right-radius:0;
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
}

input.comSubmit { 
	margin-top:2em;
	border-radius:4px;
}

.comThanks,
.comError {
	border-width: 2px;
	border-style: solid;
}

.comThanks {
	padding: 1em;
	margin: 1em auto;
}

.comThanks span {
	display: block;
	margin-top: .5em;
}

.comError {
	list-style-type:none;
	margin-left:none;
	padding:.5em;
}

[style^=visibility] {
  height: 0;
  overflow: hidden;
}


/*                ENDNOTES & Bibliography
----------------------------------------------------------------*/

/* Notes Numbering */

article sup {
	line-height:1;
	margin-left:2px;
	margin-right:2px;
}

article sup a {
	border-radius: 3px;
	padding:2px 6px;
	border-bottom: 0;
	text-decoration: none;
}

/* Notes & Biblio Listings */

section.endnotes,
section.biblio {margin:3em auto 2em;}

.endnotes h1,
.biblio h1 {
	text-align:left;
	margin-top: 0;
	margin-bottom:1.5em;
}

.biblio ol {
	list-style:none;
	margin-left:0;
	padding-left:0;
}

.biblio li {
	text-indent: -1em;
	padding-left:1em;
	margin-bottom:.7em;
}

.endnotes ol {
	counter-reset:item;
	margin:0 auto;
	padding:0;
	list-style:none;
}

.endnotes li {
	position:relative;
	display:block;
	line-height:1.2;
	margin-bottom:3em;
	padding:0;
}

.endnotes sup {
	position:absolute;	
	left:39%;
	top:-26px;
}

.endnotes li [id^="note"] {
	position:absolute;
	left:0;
	top:-26px;
}

.endnotes sup a {
	display:block;
	padding-top:5px;
	padding-right:20px;
	padding-bottom:4px;
	padding-left:26px;
}

.endnotes sup a:before {
	content:counter(item) ".";
	counter-increment:item;
}

.annotation {
	display:block;
	margin-top:.75em;
	line-height:1.3;
}

/* These put the straight brackets on the endnote annotations */
.annotation:before { content: '['; }
.annotation:after { content: ']'; }

/*----------------------------------
        LE PIED
-----------------------------------*/
.footwrap {margin:4.5em auto 1.5em auto;}

.pied {
	position: relative;
	margin-bottom:0;
}

.pied::before {
	z-index:-1;
	content:'';
	position: absolute;
	width: 100%;
	height: 100%;
	margin-top:-2em;
	background-image:url('/assets/images/bar-foot.png');
	background-size:390px auto;
	background-origin:border-box;
	background-position:center top;
	background-repeat:no-repeat;
}

.pied p {
	line-height: 1;
	text-align: center;
	margin: .5em auto;
}

a.sly {
	text-decoration:none;
}

a:hover.sly {background-image:none;}


/* --=========== LIGHT MODE COLOURS ===========--
-------------- (via custom properties) ----------*/
:root {
	--document: #222;
	--document-bg: #f5f5f1;
	--footer: #333;
	
	--highlighter: yellow;
	--side-message: #444;
	--general-bg: #e0e0e0;
	--general-border: #929292;
	
	--contents-item-symbols: #929292;
	
	--link-hover: #000;	
	--link-decor-hover: yellow;
	
	--nav-link: #888;
	--nav-link-after: #f5f5f1;
	
	--paging: #c0c0c0;
	
	--sup-number: #327ac2;
	--sup-number-bg: #d1d1d1;
	--sup-number-hover: #000;
	--sup-number-hover-bg: yellow;
	
	--notes-symbol: #d1d1d1;
	--notes-number: #327ac2;
	--notes-symbol-hover: yellow;
	--notes-number-hover: #000;
	
	--caption-color: #000;
	
	--table-bg: none;
	/* --table-border: #ccc; currently using 'general-border' */
	--table-header: #000;
	/* --table-header-bg: #999; currently using 'general-bg' */
	--table-row-group-header: none;
	--table-row-even-bg: #fff;
	--table-row-odd-bg: none;
	--table-footer-border: #ccc;
	--table-variable-one: #cf99df; /* purple-ish */
	--table-variable-two: #8dd1f2; /*blue-ish */
	--table-variable-three: #fae8b2; /* yellow-ish */
	
	/* --form-legend: #c4c4c0; currently using 'document' */
	--form-fieldset-bg: none;
	/* --form-field: #333; */
	--form-field-bg: #f5f5f1;
	/* --form-fieldset-border: #c4c4c0; currently 'general-bg' */
	/* --form-field-border: #ccc; currently using 'general-border' */
	/* --form-submit: ; currently not used */
	--form-submit-bg: #7bb3c4;
	/* --form-submit-hover: ; currently not used */
	--form-submit-bg-hover: #4b92a7;
	
	--code: #000;
	--code-bg:#e6e6e6;
}

html {background-color: var(--document-bg);}
body {color: var(--document);}

.pied {color: var(--footer);}

/* Article things */

blockquote {border-color: var(--general-border);}

section.message {
	color: var(--side-message);
	background-color: var(--general-bg);
	border-color: var(--general-border);
}

.highlight {background-color: var(--highlighter);}

/* Link Colours */

a {color: var(--document);}

a:hover {
	color: var(--link-hover);
	text-decoration-color: var(--link-decor-hover);
}

a[rel="external"]::after {color: var(--link-external-after);}

a.sly,
a:hover.sly {color: var(--document);}

/* Paging */

.paging li a {color: var(--paging);}

.note-prev a::before,
.note-next a::after {color: var(--document-bg);}

.paging li a:hover,
.note-prev a:hover::before,
.note-next a:hover::after {color: var(--document);}

.note-prev {border-right-color: var(--paging);}
.note-next {border-left-color: var(--paging);}


/* Superscripts for notes */

article sup a {
	color: var(--sup-number);
	background-color: var(--sup-number-bg);
}

article sup a:hover {
	color: var(--sup-number-hover);
	background-color: var(--sup-number-hover-bg);
}

/* Navigation Colours */

nav a {color: var(--nav-link);}

nav a:hover,
nav li.active a {color: var(--nav-link-hover);}

nav li a::after {color: var(--nav-link-after);}

nav li.active a::after,
nav li:first-child a:hover::after {color: var(--nav-link-hover);}

/* Contents lists */

#contents ul li::before,
#contents ol li::before,
.sectionmarks h2::before,
.sectionmarks h3::before,
.sectionmarks h4::before,
.numbered h2::before,
.numbered h3::before,
.numbered h4::before {color: var(--contents-item-symbols);}

/* Figures */

figcaption {color: var(--caption);}
.source, .source a {color:#666;}

/* Table Colours */

table {background-color: var(--table-bg);}

th {
	color: var(--table-header);
	background-color: var(--general-bg);
}

table, th, tr, td {border-color: var(--general-border);}

tbody tr:nth-child(even) {background-color: var(--table-row-even-bg);}
tbody tr:nth-child(odd) {background-color: var(--table-row-odd-bg);}

tbody tr.rowgroup-hed,
.rowgroup-hed th {background-color: var(--table-row-group-header); }

.var1 td {background-color: var(--table-variable-one);}
.var2 td {background-color: var(--table-variable-two);}
.var3 td {background-color: var(--table-variable-three);}

tfoot {border-top-color: var(--general-border);}

/* Form Colours */

legend {color: var(--document);}

fieldset {
	background-color: var(--general-bg);
	border-color: var(--general-border);
}

input, select, textarea {
	color: var(--document);
	background-color: var(--form-field-bg);
	border-color: var(--general-border);
}

input.comSubmit {
	color: var(--form-submit);
	background-color: var(--form-submit-bg);
}

input.comSubmit:hover {
	color: var(--form-submit-hover);
	background-color: var(--form-submit-bg-hover);
}

.comThanks {
	color: darkblue;
	border-color: skyblue;
}

.comError {
	color:maroon;
	background-color:pink;
	border-color: red;
}

/* pre, code, Keys */

code {color: var(--code);}

code,
pre {background-color: var(--code-bg);}

kbd {
	color: var(--document-bg);
	background-color: var(--document);
}

/* Endnotes numbering */

.endnotes sup a { /* is the dagger */
	color: var(--notes-symbol);
	background-color: var(--notes-symbol);
} 

.endnotes sup a:before { /* is the number */
	color: var(--notes-number);
}

.endnotes sup a:hover { /* is the dagger */
	color: var(--notes-symbol-hover);
	background-color: ;
}

.endnotes sup a:hover:before { /* is the number */
	color: var(--notes-number-hover);
}

/* Hard rules */

hr.asterism {color: var(--color);}

hr {background: linear-gradient(to right, var(--document-bg), var(--document) 50%, var(--document-bg));}

hr.startrule {background: linear-gradient(to right, var(--document), var(--document) 50%, var(--document-bg));}
hr.endrule {background: linear-gradient(to right, var(--document), var(--document) 50%, var(--document-bg));}


/* =====================================================
                  MEDIA QUERIES
=======================================================*/

/* --=========== DARK MODE COLOURS ===========-- 
   (repeat of :root block w/ dark colours)
------------------------------------------------*/

@media (prefers-color-scheme: dark) {
 
	:root {
		--document: #f9f0d0; /* darker option #f7eed7 */
		--document-bg: #000; /* super dark blue #050c1e */
		--footer: #9f998a;
		
		--highlighter: #444;
		--side-message: #afa993;
		--general-bg: #222; /* slightly lighter #042132 */
		--general-border: #524f45;
		
		--contents-item-symbols: #524f45;
		
		--link: #fed43f; /* only used for dark theme */
		--link-hover: yellow;

		--link-decor: #655419;
		--link-decor-hover: yellow; /* same as for light theme */

		--nav-link: #888;	/* same as for light theme */	
		--nav-link-hover: #f5f5f1;
		--nav-link-after: #050c1e;
		
		--pied-link: #fec211;
		
		--paging: #666;
		
		--sup-number: #d1d1d1;
		--sup-number-bg: #555;
		--sup-number-hover: #000;
		--sup-number-hover-bg: yellow;
	
		--notes-symbol: #555;
		--notes-number: #d1d1d1;
		--notes-symbol-hover: yellow;
		--notes-number-hover: #000;
		
		--caption: #fff;
		
		--table-bg: none;
		--table-border: #f7edc5; /* #042132 */
		--table-header: #f7eed7;
		--table-header-bg: #042132;
		--table-row-even-bg: none; /*#001e29*/
		--table-row-odd-bg: none;
		--table-footer-border: #042132;
		
		--form-legend: #f7eed7;
		--form-fieldset-bg: #222;
		/* --form-field: #f7eed7; */
		--form-field-bg: #000;
		/* --form-fieldset-border:#9a9581; currently 'general-bg' */
		/* --form-field-border: #524f45; currently using 'general-border' */
		--form-submit: #f7edc5;
		--form-submit-hover: #000;
		--form-submit-bg: #5b5b5b;
		--form-submit-bg-hover: #9e9e9e;
	
		--code: #9bdcdd;
		--code-bg: #333;
	}

	
	/* Special links handling */
	
	a {color: var(--link);}
	
	.menu-item a:hover,
	article a:hover,
	.pied a:hover {background-image:none;}
	
	nav a:hover,
	nav li.active a,
	nav li a:focus {background-image:url('/assets/images/darkmode/bar-nav.png');}

	/* In relation to light/dark switching */	
	.invertable img,
	.notes-default header::before,
	.publine::before,
	.comments p::before,
	.pied::before {filter: invert(100%);}
	
	/* In relation to notes stamp */
	#notes-page article.notes-article::before {filter:opacity(75%);}
	

}


/* --=========== SCREEN SIZES ===========-- */


@media screen and (min-width:390px) {

	.break {display: inline;}
	
}


@media screen and (min-width:400px) {
	
	.editor {
	width:300px;
	margin-top:0;
	margin-bottom:1em;
	}
	
}


@media screen and (min-width:576px) {
	
	.notes-default header {background-size:390px auto;}
	
	hr.asterism {
	margin-top:2em;
	margin-bottom:2em;
	}

} 


@media screen and (min-width:665px) {
	
	html {
	font-size:20px;
  }
	
	hr {
	width:85%;
	margin-left:auto;
	margin-right:auto;
	}
	
	/*homepage*/
	
	.masthead {padding-top:1em;}
	
	.menu {
	display:block; 
	/* min-height:345px; */
	width:auto;
	margin:0 auto;
	}
	
	.menu::before {
	background-image:url('/assets/images/ladder.png');
	background-position:11.25rem 0;
	filter: opacity(80%);
	}
		
	.menu-item {
	width:auto; 
	margin-left:15.5rem; /* 34vw */
	} 
	
	.menu-item:nth-child(odd) {text-align:left;}
	.menu-item:nth-child(even) {text-align:left;}
	
	.menu-item dt {font-size: clamp(3vw, 4vw, 5vw);}
	.menu-item dd {font-size: clamp(2vw, 2vw, 4vw);}
	
	.menu-item dd {
	display:block;
	margin-left:0;
	}
	
	/* Common */
	
	.mainwrap {margin-bottom:2em;}
	
	.doc-header,
	.notes-default header {
	margin-top: 1em;
	margin-bottom: 1em;
	font-size: 1.9rem;
	}
	
	h2 {font-size: 1.6rem;}
	
	blockquote: {
	width:80%;
	margin-left: auto;
	padding-left:0;
	border-left: 0;
	}
	
	tfoot {line-height:1.6;}
	
	.message {margin-top: 3.5em;}
	
	/* Notes Section */
	
	.doc-header h1 {
		width:80%;
		margin:0 auto;
	}
	
	.noteslist {
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		align-items:flex-start; /*aligns vertically*/
	}
	
	.noteslist li {width:46%;}
	
	/* Concerns ink stamp
	#notes-page article.notes-article::before {
	background-size:200px auto;
	} */

	/* Contact Form */
	.comConnectForm {
	width:90%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:1em;
	}
	
	fieldset {padding:1em;}
	
	/* Endnotes */
	
	.endnotes {
	margin-top:3em;
	margin-bottom:5em;
	}
	
	.endnotes li {
	margin-bottom:1.3em;
	padding-left:2.5em;
	}

	.endnotes sup {
	left:0;
	top:0px;
	}
	
	.endnotes li [id^="note"] {top:0;}
	
	.endnotes sup a {
	padding-right:0;
	padding-left:6px;
	}
	
	/* footer */
	
	.pied p {font-size:.8rem;}
	
}

@media (prefers-color-scheme: dark) {
	.menu::before {filter: invert(100%) opacity(100%);}	
	
}


@media screen and (min-width:864px) {
	
	html {font-size:22px;}
	
	/* Within these are .tete, main, and .pied, respectively. */
	.headwrap,
	.mainwrap,
	.footwrap {max-width:40em;}
	
	.tete {padding: 0;}

	.tete h1 {
	font-size: 2.9rem;
	margin: 0 auto;
	padding-top: .3em;
	}

	.standfirst {
	font-size: 1.1rem;
	}
	
	.pied p {line-height: 1.2;}
	
	/* Notes FIGURES */
	figure {
	margin-top: 2em;
	margin-bottom: 2em;
	}

	.figleft {
	float:left; 
	margin-right: 1.5em; 
	}

	.figright,
	.editor {
	float:right; 
	margin-left: 1.5em; 
	}
	
	.editor {margin-bottom:.5em;}
	
	.figleft,
	.figright {
	width:350px;
	margin-top:.5em;
	margin-bottom:1em;
	}
	
	.w80 {width:80%;}
	
	hr.asterism {
	margin-top:3em;
	margin-bottom:4em;
	}
	
	/* Contact Form */
	
	fieldset {padding:1.5em;}
	
	.comConnectForm {
	width:80%;
	margin-bottom:1.5em;
	}
	

}


/* --=========== PRINTING ===========-- */

/*
@media print {
	
	html {font-size: 12pt;}
	
	body {
		color: #000
		background-color:#fff;
	}

  .footwrap {display:none;}


}
*/