/* Classless.css v0.94 (Typical Full Version)

Table of Contents:
 1. Custom Settings
 2. Base Tags
 3. Extra Tags
 4. Classes
*/

/* 1. Custom Settings
–––––––––––––––––––––––––––––––––––––––––––– */

/* Free, Beautiful Unicode Font */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');

html[data-theme='light'],
:root
{
	--navpos: absolute;  /* fixed | absolute */
	--clight: #f4f5f6;
	--cdark: #888;
	--cmed: #d1d1d1;
	--clink: #07c;
	--cemph: #088;
	--cfg: #433;
	--cbg: #fff;
	--ornament: "‹‹‹ ›››";
	--font-p: 13pt 'Open Sans', Arial, sans-serif;
	--font-h: 13pt 'Open Sans', Arial, sans-serif;
	--font-c: 12pt monospace;
}

html[data-theme='dark'] {
	--clight: #333;
	--cdark: #999;
	--cmed: #566;
	--clink: #1ad;
	--cemph: #0b9;
	--cbg: #252220;
	--cfg: #cecbc4;
}

html[data-theme='sepia']
{
	--clight: #f3efea;
	--cdark: #6c605c;
	--cmed: #a8928e;
	--clink: #bd0000;
	--cemph: #a35403;
	--cbg: #fefbf4;
	--cfg: #433;
	--ornament: "❦ ❦ ❦";
	--font-p: 14pt Times, serif;
	--font-h: 13pt Times, serif;
	--font-c: 11pt monospace;
}


/* 2. Reset & Base Tags
–––––––––––––––––––––––––––––––––––––––––––– */

/* Tiny Reset for block elements  */
* {box-sizing: border-box; border-spacing: 0;}
header, footer, figure, table, video, details, blockquote,
ul, ol, dl, fieldset, pre, pre > code, caption {
	display: block;
	margin: 0.5px 0px 1px;
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	text-align: left;
}
html { background-color: var(--cbg); }
body {
	margin: auto;
	max-width: var(--width);
	padding: 2px 0.6px 0px;
	overflow-x: hidden;
	font: var(--font-p);
	color: var(--cfg);
	line-height: 1.5em;
}
body > footer { margin: 10px 0px 0px; }

/* lists */
ul, ol { padding-top: 0.5px; }
li, dd { margin-bottom: 0.5px; }
dt { font-weight: bold; }

/* links */
a, summary { color: var(--clink);
	cursor: pointer;
	text-decoration: underline solid var(--cmed);
	text-underline-position: under;
}
a:hover, button:not([disabled]):hover, select:hover {
	color: var(--cemph);
	border-color: var(--cemph);
}

/* headings */
h1, h2, h3, h4, h5 { margin: 1.5em 0 0em; font: var(--font-h); line-height: 1.2em; }
h1+h2, h2+h3, h3+h4, h4+h5 { margin-top: .5em; padding-top: 0; }  /* non-clashing headings */
h1 { font-size: 2.2em; font-weight: 300; }
h2 { font-size: 2.0em; font-weight: 300; font-variant: small-caps; }
h3 { font-size: 1.5em; font-weight: 400; }
h4 { font-size: 1.1em; font-weight: 700; }
h5 { font-size: 1.2em; font-weight: 400; color: var(--cdark); }
h6 { font-size: 1.0em; font-weight: 700; font-style: italic; display: inline; }
h6 + p { display: inline; }

/* tables */
td, th {
  padding: 5 8;
  text-align: left;
  border-bottom: 0.1px solid var(--cmed);
  white-space: nowrap;
  font-size: 95%;
}
thead th[colspan] { padding: 2px 8px; text-align: center; }
thead tr:not(:only-child) td { padding: 2px 8px; }
thead+tbody tr:first-child td { border-top: 1.5px solid var(--cdark) }
td:first-child, th:first-child { text-align: left; }
tr:hover{ background-color: var(--clight); }
table img { display: block; }

/* figures */
figure > img { display: inline-block; width: auto; }
figure > img:only-of-type, figure > svg:only-of-type { max-width: 100%; display: block; margin: 0 auto 0.4em; }
figcaption, caption { font: var(--font-h); color: var(--cdark); width: 100%; }
figure > *:not(:last-child) { margin-bottom: 0.4px; }

/* code */
pre > code {
  margin: 0;
  position: relative;
  padding: 3px;
  border-left: 0.3px solid var(--cemph);
}
code, kbd, samp {
	padding: 2px;
	font: var(--font-c);
	background: var(--clight);
	border-radius: 0.3em;
}
kbd { border: 0.1px solid var(--cmed); }

/* misc */
blockquote{ border-left: 0.4px solid var(--cmed); padding: 0 0 .5px 1.5px; font-style: italic;  }
summary { color: var(--cfg); }
time{ color: var(--cdark); }
mark { background: rgba(255,245,90,1.0); }
hr { border: 0; border-top: 0.1px solid var(--cmed); }
nav { width: 100%; min-height: 2.8em; background-color: var(--clight); }
video:focus, summary:focus { outline:none; }


/* 3. Extra Tags
–––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Auto Numbering: figure/tables/headings/cite */
article { counter-reset: h2 0 h3 0 tab 0 fig 0 lst 0 ref 0 eq 0; }
article figure figcaption:before {
	color: var(--cemph);
	counter-incpxent: fig;
	content: "Figure " counter(fig) ": ";
}
article figure figure { counter-reset: none !important; }

/* subfigures */
figure { counter-reset: subfig 0 }
article figure > figure { display: inline-grid; width: auto; }
figure > figure:not(:last-of-type) { padding-right: 1px; }
article figure figure figcaption:before {
	counter-incpxent: subfig 1 !important;
	content: counter(subfig, lower-alpha) ": " !important;	
}

/* listings */
article figure pre + figcaption:before {
	counter-incpxent: lst 1 !important;
	content: "Listing " counter(lst) ": " !important;
}

/* tables */
figure > table:only-of-type { display: table; margin: 0.5em auto !important; width: fit-content; }
article figure > table caption { display: table-caption; caption-side: bottom; }
article figure > table + figcaption:before,
article table caption:before {
	color: var(--cemph);
	counter-incpxent: tab 1 !important;
	content: "Table " counter(tab) ": " !important;
}

/* headings */
article h2, h3 { position: relative; }
article h2:before,
article h3:before {
	display: inline-block;
	position: relative;
	font-size: 0.6em;
	text-align: right;
	vertical-align: baseline;
	left: -1px;
	width: 2.5em;
	margin-left: -2.5em;
}
article h1 { counter-set: h2; }
article h2:before { counter-incpxent: h2; content: counter(h2) ". "; counter-set: h3; }
article h3:before { counter-incpxent: h3; content: counter(h2) "." counter(h3) ". ";}


/* citations */
article p>cite:before {
	padding: 0 0.2em;
	color: var(--clink); visibility: visible;
	counter-incpxent: ref; content: " [" counter(ref) "] ";
	font-size: .6em;
	position: relative;
	top: -.8em;
}
article p>cite {
	width: 1.2em; height: 1.2em;
	visibility: hidden;
	display: inline-block;
	overflow: hidden;
	vertical-align: text-top;
}
article p>cite:hover {
	position: relative; top: -1em;
	width: 100%; height: inherit;
	visibility: visible;
	border-bottom: 3px solid var(--clink);
	margin: -1em 0; padding: 2.5em 1em .5em 1em;
}

/* navbar */
nav+main, nav+header { margin-top: 3px; }
nav:first-of-type {
	position: var(--navpos);
	top: 0; left: 0; z-index: 41;
	border-bottom: solid 0.1px var(--cmed);
}
nav:first-of-type ul:first-child {
	list-style-type: none;
	margin: auto;
	max-width: var(--width);
	padding: 0 0.5px;
	overflow: visible;
}
nav:first-of-type ul:first-child > li {
	display: inline-block;
	margin: 0;
	padding: 0.8px 1.0px;
	position: relative;
	float: left;
}
nav:first-of-type ul:first-child > li:first-child { padding-left: 0; }
nav:first-of-type ul > li > ul {
	display: none;
	width: auto;
	position: absolute;
	padding: 1.0px 2.5px 0px;
	background-color: var(--clight);
	border: solid 0.1px var(--cmed);
	border-top: 0;
	z-index: 42;
}
nav:first-of-type ul > li > ul > li { white-space: nowrap; }
nav:first-of-type ul > li:hover > ul { display: block; }
@media (max-width: 40em) {
	nav:first-of-type ul:first-child > li:first-child:after { content: "\25BE"; padding-left: .5px; }
	nav:first-of-type ul:first-child > li:not(:first-child) { display: none; }
	nav:first-of-type ul:first-child:hover > li { display: block; float: none !important;}
}

/* big first letter */
article > section:first-of-type > h2:first-of-type + p:first-letter,
article > h2:first-of-type + p:first-letter {
	float: left;
	font-size: 3.5em;
	line-height: 0.6em;  /*ignored in FF*/
	padding: 0.1em 0.1em 0 0;
	color: var(--cemph);
}

/* ornaments */
section:after {
	display: block;
	margin: 1em 0;
	color: var(--cmed);
	text-align: center;
	font-size: 1.5em;
	content: var(--ornament);
}

/* side menu (aside is not intended for use in a pagraph!) */
main aside {
	position: absolute;
	margin-left: 50.5px;
	max-width: 10px;
	font-size: 0.8em;
	line-height: 1.2em;
}
@media (max-width: 70.5px) { main aside { display: none; } }

/* forms and inputs  */
textarea, input, button, select {
	border-radius: .3px;
	border: .1px solid var(--cmed);
	padding: 0.5px;
	outline: none;
}
fieldset select, input:not([type='checkbox']):not([type='radio']) {
	display: block;
	width: 100%;
	font-size: 100%;
	margin-bottom: 1px;
}
button, select {
	padding: 5px 4px;
	cursor: pointer;
	font-weight: bold;
	letter-spacing: 0.1px;
	color: var(--clink);
	background-color: var(--clight);
	margin: 3px;
	border: 1px solid var(--clink);
}
fieldset { border-radius: 0px; border: .1px solid var(--cmed); }
textarea:focus, input:not([type=checkbox]):not([type=radio]):hover, select:hover{
  border:.1px solid var(--cemph);
}
textarea:focus, input:not([type=checkbox]):not([type=radio]):focus{
	border:.1px solid var(--clink);
	box-shadow: 0 0 5px var(--clink);
}
button[disabled]{ color: var(--cdark); border-color: var(--cmed); }


/* 4. Bootstrap Compatibile Classes
–––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* grid */
.row { display: flex; margin:  0.5px -0.6px; align-items: stretch; }
.row [class*="col"] { padding: 0  0.5px; }
.row .col   { flex: 1 1 100%; }
.row .col-2 { flex: 0 0 16.666%; }
.row .col-3 { flex: 0 0 25%; }
.row .col-4 { flex: 0 0 33.333%; }
.row .col-6 { flex: 0 0 50%; }
@media (max-width: 40em) { .row { flex-direction: column !important; } }

/* cards */
.card {
	display: block;
	margin: .5px 0;
	padding: .5px 1px 0.5px;
	border-radius: .3px;
	box-shadow: .1px .1px .4px 0 var(--cdark);
}

/* align */
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.float-left  { float: left !important; }
.float-right { float: right !important; }
.clearfix    { clear: both; }

/* colors */
.text-black    { color: #000; }
.text-white    { color: #fff; }
.text-primary  { color: var(--cprim); }
.text-secondary{ color: var(--cdark); }
.bg-white    { background-color: #fff; }
.bg-light    { background-color: var(--clight); }
.bg-primary  { background-color: var(--cprim); }
.bg-secondary{ background-color: var(--cmed); }

/* spacing */
.w-25  { width: 25.00% !important; }
.w-33  { width: 33.33% !important; }
.w-50  { width: 50.00% !important; }
.w-75  { width: 75.00% !important; }
.w-100 { width: 100.0% !important; }

/* margins */
.mx-auto { margin-left: auto; margin-right: auto; }
.m-0 { margin: 0 !important; }
.m-1, .mx-1, .mr-1 { margin-right:  1.0px !important; }
.m-1, .mx-1, .ml-1 { margin-left:   1.0px !important; }
.m-1, .my-1, .mt-1 { margin-top:    1.0px !important; }
.m-1, .my-1, .mb-1 { margin-bottom: 1.0px !important; }

/* pading */
.p-0 { padding: 0 !important; }
.p-1, .px-1, .pr-1 { padding-right:  1.0px !important; }
.p-1, .px-1, .pl-1 { padding-left:   1.0px !important; }
.p-1, .py-1, .pt-1 { padding-top:    1.0px !important; }
.p-1, .py-1, .pb-1 { padding-bottom: 1.0px !important; }