:root {	
	--main-bg: #eeeeee;
	--text-color: #eee;
	--text-color-darker: #ccc;
	
	--main-shadow-color: rgba(0,0,0,0.15);
	--vert-shadow: 0px 3px 3px rgba(0,0,0,0.3);
	
	--bg-l: rgba(255,255,255,0.05);
	--bg-l1: rgba(255,255,255,0.1);
	--bg-l2: rgba(255,255,255,0.2);
	--bg-d: rgba(0,0,0,0.05);
	--bg-d1: rgba(0,0,0,0.1);
	--bg-d2: rgba(0,0,0,0.25);
	--bg-d5: rgba(0,0,0,0.5);
	
	--header-color: #bbb;
	--header-bg: #eee;
	--h1-hea-color: #234;

	--h-border-color: rgba(255,255,255,0.1);
	
	--a-color: #55bb88;
	--a-hover-color: #ddd;	
	--a-outline-c: rgba(255,255,255,0.5);
	
	--list-line-even-bg: rgba(0,0,0,0.1);
	--list-line-odd-bg: rgba(0,0,0,0.2);
	
	--table-line-even-bg: rgba(0,0,0,0.1);
	--table-line-odd-bg: rgba(0,0,0,0.2);
	
	--code-line-even-bg: rgba(0,0,0,0.1);
	--code-line-odd-bg: rgba(0,0,0,0.2);
	
	--bg-fail: rgba(255, 100, 100, 0.3);
	--bg-ok: rgba(100, 255, 255, 0.3);
	
	--ui-username-bg: rgba(255,255,255,0.1);
	--ui-logout-icon-bg: rgba(0,0,0,0.2);
	--ui-logout-icon-hover-bg: rgba(255,255,255,0.1);
	
	--debug-bg: rgba(0,0,0,0.3);
	--debug-color: #ddd;
}
section {	
	/* --section-bg: #0b2f30; */
	/* --section-bg: rgb(60,80,85); */
}

#wrap-main {
	
	/* background-color: rgba(0,20,40,0.1); */
	/* background-color: transparent; */
	
}

footer {
	/* background-color: #33883311; */
	color: #00aa88aa;
	/* margin: 0; */
	font-style: italic;
}
nav.menu.menu--node {
	/* background-color: #33883333; */
	padding: .2rem;
}


/* ==== EDU SPECIFIC ==== */

.ele {
	display: inline-block;
	background-color: #ffffff22;
	width: 4rem;
	text-align: center;
	font-weight: bold;
}
.ei {
	background-color: #ffffff22;
	border: 1px solid #00000033;
	border-radius: .2rem 0 0 .2rem;
}
.et {
	background-color: #00000022;
	border: 1px solid #ffffff33;
	border-radius: 0 .2rem .2rem 0;
}


.icu-num, .icu-baq {
	position: absolute;
	width: 2.7rem;
	height: 2.7rem;
	/* height: 3rem; */
	/* line-height: 2rem; */
	font-size: 1.5rem;
	/* padding: .5rem; */
	
	display: flex;
	align-items: center;
	justify-content: center;
	
	background-color: #ffffff22;
	border-radius: 100%;
	opacity: 0.5;
}
.icu-num {
	transform: translate(-1.4rem, -4.8rem);
	left: 0rem;
}
.icu-baq {
	transform: translate(1.4rem, -4.8rem);
	right: 0rem;
}


h2 {
	clear: both;
}
.clr {
	clear: both;
}

header {
	text-align: center;
	height: 120px;
	padding: 0;
	overflow: hidden;
	
	
	/* background-repeat: no-repeat; */
	/* background-size: cover; */
	background-color: var(--header-bg);

	
}
header div.he-bg {
	/* background-color: #000; */
	background-color: #000;
	background-image: url(../img/thepath-header.jpg);
	background-position: center center;
	position: absolute;
	/* opacity: 0.8; */
	z-index: 10;
	height: 120px;
	width: 100%;
}




img.icu-header-ctr {
  max-width: 95vw;
}

.menu.menu--sub {
	/* display: none; */
}
.menu.menu--node ul {
	margin: .3rem 0 0 0;
	
}

.txt-editable {
	width: 90%;
	white-space: pre-wrap;
	padding: 2rem;
	background-color: #ffffff22;
}


.icu-proc-img-s {
	width: 9rem;
	position: absolute;
	z-index: 9;
	right: -1rem;
	transform: translate(-2rem, -.9rem);

	border-radius: 100%;
	border: 3px solid rgba(180,180,240,0.2);
	/* position: relative; */
	/* top: -1rem; */
}

.icu-img-home {
	position: relative;
	float: left;
	transform: translate(-2rem, -1rem);
	width: 7rem;
}

p.icu-img-fullwidth {
	text-align: center;
}
.icu-img-fullwidth img {
	max-width: 80%;
	border-radius: 5rem;
	border: .5rem solid rgba(180,180,240,0.1);
	margin: auto;
}
.icu-img-home-fr {
	position: relative;
	float: right;
	transform: translate(-2rem, -1rem);
	width: 7rem;
}

.icu-img-fr-s {
	position: relative;
	float: right;
	transform: translate(-2rem, -1rem);
	width: 5.5rem;
	margin-left: 2rem;
}

.icu-img-home-topr {
	/* position: relative; */
	/* float: right; */
	transform: translate(2.5rem, -5.6rem);
	width: 7rem;
}


audio.audio-ctrls {
	vertical-align: middle;
}
audio.acl-l {
	margin-right: .5rem;
}

.icu-in-gallery {
	width: 95%;
	margin: auto;
}
.icu-in-gallery img {
	border: 3px solid rgba(180,180,240,0.2);
}
.icu-in-gallery.iig-4 img {
	width: 24%;
	margin-right: .5%;
}

.icu-search-result {
	background-color: rgba(0,255,255, 0.05);
	padding: .75rem 1.25rem;
	margin-bottom: .5rem;
	font-size: 90%;
}
.icu-search-result mark {
	font-style: normal;
	background-color: rgba(0,255,255, 0.3);
	color: #eee;
	/* padding: 0 .3rem; */
	border-radius: .2rem;
	display: inline-block;
}
.icu-sr-meta {
	background-color: rgba(0,100,100, 0.2);
	padding: .25rem 1rem;
}
.isr-title {
	font-weight: bold;
	font-weight: 700;
}
.isr-pid {
	background-color: rgba(0,0,0, 0.1);
	/* font-size: 85%; */
}
.isr-page {
	color: #888;
	font-size: 75%;
	text-transform: uppercase;
	display: inline-block;
	/* vertical-align: baseline; */
}
.isr-pid a {
	font-size: 80%;
	background-color: #ffffff22;
	padding: .1rem .75rem;
	border-radius: .15rem;
}
.isr-pid a:hover {
	background-color: #ffffff11;
}
.isr-content {
	padding: .5rem 1rem;
	white-space: pre-wrap;
}

form.head_search {
	position: absolute; 
	z-index: 9;
	top: .25rem;
	right: .25rem;
	opacity: 0.5;
	/* background-color: rgba(255,255,255,0.2); */
	/* padding: .2rem; */
}
form.head_search:focus-within {
	opacity: 1;
}

form.results_search {
	text-align: center;
	padding: .75rem 0;
	background-color: #00112244;
	border-radius: .2rem .2rem 0 0;
}
form.results_search input#q {
	min-width: 50%;
}


hr.noprint {
	border-color: #ffffff44;
	margin: 3rem 0 3.5rem;
}


/* Content Addons */

.printonly {
	display: none;
}

img.path-img {
	border: 3px solid rgba(180,180,240,0.2);
	height: 16.5ex;
	border-radius: .5rem;
}
img.imgc {
	width: 50%;
	height: auto;
	margin: auto;
	display: block;
}
img.imgw25 {
	height: auto;
	width: 25%;
}
img.imgw33 {
	height: auto;
	width: 32%;
}
img.imgw90 {
	height: auto;
	width: 90%;
}
img.imgrfh {
	height: 8ex;
	float: right;
	margin-left: 1rem;
}

img.imgrfp {
	height: 12.8ex;
	float: right;
	margin-left: 1rem;	
}

img.imglfs {
	height: 9.8ex;
	float: left;
	margin-right: 1rem;
}
img.imglfh {
	height: 12.8ex;
	float: left;
	margin-right: 1rem;
}

img.imglfp {
	height: 12.8ex;
	float: left;
	margin-right: 1rem;	
}

img.h11 {
	height: 11.2ex;
}

.icu-panel {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: minmax(100px, auto);
	gap: .75rem;
}
.icu-reader {
	/* width: 25%; */
	font-size: 85%;
	background-color: #ffffff11;
	border-radius: .5rem;
	padding: .5rem;
	line-height: 1.6;
}
img.img-rdr {
	height: 15ex;
}


/* GM WIZARD */

.gmw-images {
	display: flex;
	margin: auto;
	width: fit-contents;
	margin-bottom: 1rem;
}

.gmw-images img {
	width: 30%;
}
.gmw-outline {
	/* display: flex; */
	/* display: table-cell; */
	text-align: center;
	margin: auto;
	width: fit-contents;
	margin-bottom: 1rem;
}
.gmw-outline img {
	max-width: 10%;
	min-width: 100px;
	margin: 0 .5rem .5rem .5rem;
	border-radius: .5rem;
	outline: 7px solid #ffffff55;
	outline-offset: -6px;
	vertical-align: middle;
}
.gmw-outline .gm-spacer {
	display: inline-block;
	color: #ffffffaa;
	font-size: 5em;
	/* margin-bottom: 1.5em; */
	
	text-shadow: 0px 0px 3px #00000055;
	vertical-align: middle;
	/* vertical-align: baseline; */
}
.fo {
	border-radius: 100%;
	font-size: 70%;
	font-weight: bold;
	text-align: center;
	line-height: 3.5em;
	margin-left: -1.75rem;
	padding: 0;
	border: 1px solid #ffffff44;
}
.fo1 {
	background-color: #9a4646dd;
}
.fo2 {
	background-color: #8d469add;
}
.fo3 {
	background-color: #469a50dd;
}
.fo4 {
	background-color: #46999add;
}
.fo5 {
	background-color: #e8ab19dd;
}
.fo6 {
	background-color: #d2e819dd;
}
.fo7 {
	background-color: #982d83dd;
}
.fo8 {
	background-color: #ffffffdd;
}

/* Books */

article h4 {
	/* font-size: 90%; */
	background-color: #ffffff05;
}

/* Archetypes */

.arch-wrap {
	font-size: 85%;
	position: relative;
	margin: 2rem 1rem;
}
.arch {
	
	/* display: inline-block; */
}
.archcolor {
	position: absolute;
	right: 0;
	top: 0;
	background-color: #ffffff11;
	padding: 1rem;
	height: 5rem;
	border-radius: 3rem;
}
.archcolor span {
	display: inline-block;
	height: 3rem;
	width: 3rem;
	/* background-color: #ffffff22; */
	border-radius: 3rem;
	border: 5px solid #ffffff11;
	border: 5px solid #00000011;
	margin-right: 1px;
	
}

.archcolor span.ac-a {
	border-radius: 3rem 0 0 3rem;
}
.archcolor span.ac-b {
	border-radius: 0 3rem 3rem 0;
}
.archcolor span.ac-u {
	border-radius: 3rem;
}
.ac-00 {
	background-color: DarkSlateGray;
}
.ac-01 {
	background-color: MediumSeaGreen;
}
.ac-10 {
	background-color: RoyalBlue;
}
.ac-11 {
	background-color: Cornsilk;
}

.ac-000 {
	background-color: IndianRed;
}
.ac-001 {
	background-color: BlueViolet;
}
.ac-010 {
	background-color: ForestGreen;
}
.ac-011 {
	background-color: MediumTurquoise;
}
.ac-100 {
	background-color: DarkOrange;
}
.ac-101 {
	background-color: Yellow;
}
.ac-110 {
	background-color: RebeccaPurple;
}
.ac-111 {
	background-color: HoneyDew;
}


.archi {
	display: inline-block;
	padding: 0 .5rem;
	margin: .5rem;
	border-radius: .2rem;
	text-align: center;
	color: #eee;
	width: 23rem;
}

.arid {
	color: #888;
	width: 5em;
	background-color: #00000011;
	border-radius: .2rem 0 0 .2rem;
}
.artao {
	color: #bbb;
	width: 5em;
	background-color: #ffffff11;
	border-radius: .2rem 0 0 .2rem;
}
.arelem {
	font-weight: bold;
	font-weight: 700;
}

.arch-legend {
	margin: 1rem 2rem 0;
	border-radius: 0 1rem 1rem 0;
	padding: .5rem 1rem;
	background-color: #00000011;
	border-left: .5rem solid #ffffff11;
	color: #eee;
}

.archany {
	color: #bbb;
}

.aa-d1 {
	background-color: #00000011;
}
.aa-l1 {
	background-color: #ffffff11;
}

.aa-d2 {
	background-color: #00000022;
}
.aa-l2 {
	background-color: #ffffff22;
}


img.icu-book-cover {
	max-height: 400px;
	max-width: 50%;
	border-radius: 100%;
	border: 5px solid #ffffff22;
}

p.icu-ch-split {
	text-align: center;
}

ul.toc li {
	text-align: left;
	font-size: 100%;
}


.menu-switcher {
	
}

@media only screen {
	.imgmidpage .imgw90 {
		/* margin-top: 5ex; */
	}
}
@media only screen and (min-width: 900px) {
	.imgmidpage .imgw90 {
		width: 50%;
	}
}

@media only screen and (max-width: 1100px) {


	.icu-proc-img-s {
		width: 9rem;
		position: relative;
		float: right;
		/* right: -1rem; */
		transform: translate(0rem, -.9rem);

		border-radius: 100%;
		border: 3px solid rgba(180,180,240,0.2);
		/* position: relative; */
		/* top: -1rem; */
	}
		
	.icu-img-home {
		position: relative;
		float: left;
		transform: translate(-2rem, -1rem);
		width: 7rem;
	}
		
	.icu-img-fr-s {
		position: relative;
		float: right;
		/* transform: translate(-2rem, -1rem); */
		width: 7rem;
		/* margin-left: 2rem; */
	}
}


@page {
	
  /* size: a5; */
  size: 5.5in 8.5in;
  /* margin: .8cm 1.25cm .6cm; */
  /* margin: 1.1cm 1.25cm 1cm 1cm; */
  margin: 1.25cm;
}

@page :first {
	margin-top: 1.5cm;
}
@page :left {
	margin-left: 1.1cm;
	margin-right: 1.5cm;
}
@page :right {
	margin-left: 1.5cm;
	margin-right: 1cm;
}

@media print {
	section h2 {
		page-break-before: always;
		break-before: always; 
		margin-top: 0;
	}
	article h2#hu {
		page-break-before: avoid; 
		break-before: avoid;
		margin-bottom: 2rem;
	}
	section div.page-break {
		page-break-before: always; 
		break-before: always; 
	}
	
	p {
		/* hyphens: auto; */
	}
	
	.noprint {
		display: none;
	}
	.printpage {
		display: block;
		break-before: always; 
		break-after: always; 
	}
	.printpage.imgmidpage {
		padding-top: 15ex;
	}
	
	wbr {
		display: block;
	}
	
	img.icu-book-cover {
		margin-top: 2rem;
		width: 90%;
		max-width: 90%;
		max-height: 90%;
		border-radius: 100%;
		border: 12px solid #00000011;
	}

}
