@import url("/Assets/CSS/Fonts/Fonts.css");

/* General page layout */
* {
	padding: 0;
	border: 0;
	margin: 0;
}

body {
	overflow-x: hidden;
}
	body::-webkit-scrollbar {
		display: none;
	}

header, footer {
	margin: 2vh auto;
	text-align: center;
}

/* Page layouts and colors */
.discover {
	background: url("/Assets/Images/KidsPattern.png") repeat fixed;
	background-size: auto;
	color: #000;
}
@media screen and (min-width: 1025px) {
	.discover {
		background: url("/Assets/Images/KidsBorder.png") repeat-y fixed, url("/Assets/Images/KidsPattern.png") repeat fixed;
		background-size: 20vh 20vh, auto;
	}
}
	.discover.dark {
		color: #3E7D70;
	}
	.discover.lite {
		color: #58B09F;
	}

.activity {
	background: url("/Assets/Images/Greenboard.jpg") center fixed;
	background-size: cover;
	color: #FFF;
}
	.activity.dark {
		color: #E74A22;
	}
	.activity.lite {
		color: #ED7455;
	}

.exercise {
	background: url("/Assets/Images/Blackboard.jpg") center fixed;
	background-size: cover;
	color: #FFF;
}
	.exercise.dark {
		color: #A6529A;
	}
	.exercise.lite {
		color: #C183B6;
	}

/* Generic attributes */
.below {
	clear: both;
	padding-top: 5vh;
}
.shadow {
	filter: drop-shadow(0 0 2vh #555);
}
.quotes {
	text-align: justify;
}
	.quotes::before {
		content: url("/Assets/Images/Quotes.svg");
		padding-right: 5px;
	}
.construction {
	display: block;
	margin: 5vh auto;
	width: 10vw;
}
	.construction::after {
		content: url("/Assets/Images/Construction.svg");
	}
.acrobat {
	display: block;
	margin: auto;
	width: 5vw;
}
	.acrobat::after {
		content: url("/Assets/Images/Acrobat.svg");
	}

/* Text coloring */
.highlight {
	color: #3E7D70;
}
.english {
	color: #0088FF;
}

.easy {
	color: #4CAF50;
}
.medium {
	color: #FF9800;
}
.difficult {
	color: #F44336;
}

.mas {
	color: #0000FF;
}
.fem {
	color: #FF0000;
}
.aux {
	color: #23A20A;
}
.pst {
	color: #A6529A;
}
.erg {
	color: #666699;
}

/* Headings, separator */
h1 {
	margin: 0 0 4rem 0;
	font-size: 2.4rem;
	text-align: center;
}
h2 {
	margin: 4rem 0 0 -1rem;
	font-size: 1.8rem;
}
h3 {
	margin: 3rem 0 0 -0.5rem;
	font-size: 1.4rem;
}
h4 {
	margin: 2rem 0 0 0;
	font-size: 1.2rem;
}
h2 + h3 {
	margin: 1rem 0 0;
}
h3 + h3 {
	margin: 1rem 0;
}
h3 + h4 {
	margin: 2rem 0;
}

hr {
	margin: 5rem auto;
	display: block;
	width: 20vw;
	height: 5px;
}

/* Ordered and unordered lists */
ol, ul {
	margin: 0 1rem;
}

/* Special anchors */
a[href^=http]::after {
	content: "\2750";
}
	a.without::after {
		content: "";
	}

#Top {
	font-size: 1.8rem;
	display: none;
	position: fixed;
	right: 3vh;
	bottom: 3vh;
	cursor: pointer;
	z-index: 100;
}

/* Form labels */
form.labels {
	text-align: center;
	margin: 5vh auto;
}
	form.labels input[type="radio"] {
		display: none;
	}
	form.labels label {
		display: inline-block;
	}

/* Tables */
table {
	margin: 5vh auto;
	border-collapse: collapse;
	border-spacing: 0;
}
	th, td {
		padding: 2vh;
		vertical-align: baseline;
	}

table.zero {
	margin: 0 auto;
}
	.zero th, .zero td {
		padding: 0;
	}
table.center td {
	text-align: center;
}
table.top td {
	vertical-align: top;
}
table.middle td {
	vertical-align: middle;
}
table.bottom td {
	vertical-align: bottom;
}

table.left {
	float: left;
	margin: 0 0 2vh 0;
	width: 100%;
}
	table.left td:first-of-type {
		padding-left: 0;
		padding-right: 5vw;
	}
	table.left td:last-of-type {
		padding-left: 5vw;
		padding-right: 0;
	}

table.notes {
	width: 100%;
	margin: 5vh 0;
}
	table.notes td {
		padding: 0;
	}
		table.notes td:first-of-type {
			padding-right: 1vw;
			text-align: right;
		}

/* Images, objects, videos */
img, object, video {
	margin: 0;
	border-width: 0;
}
	img.left, object.left, video.left {
		margin: 1vh 1vw 1vh 0;
		float: left;
	}
	img.center, object.center, video.center {
		margin: 1vh auto;
		display: block;
	}
	img.right, object.right, video.right {
		margin: 1vh 0 1vh 1vw;
		float: right;
	}

	img.small, object.small, video.small {
		width: 10vw;
	}
	img.medium, object.medium, video.medium {
		width: 20vw;
	}
	img.portrait, object.portrait, video.portrait {
		width: 30vw;
	}
	img.landscape, object.landscape, video.landscape {
		width: 40vw;
	}

	img.inside, object.inside, video.inside {
		max-width: 100vmin;
		max-height: 100vmin;
	}
	img.watermark, object.watermark {
		position: fixed;
		left: calc(50vw - 50vh);
		top: 5vh;
		height: 90vh;
		opacity: 0.2;
		z-index: -10;
	}

/* SlidePoint generic styles */
slides {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

slide {
	position: absolute;
	width: 100vw;
	height: 100vh;
	visibility: hidden;
}

#Controls * {
	position: fixed;
	z-index: 100;
}

#Info {
	font: normal 0.5rem Noto;
	line-height: 1.5rem;
	text-align: center;
	vertical-align: middle;
	right: 2rem;
	bottom: 2rem;
	width: 1.5rem;
	height: 1.5rem;
}

#Up, #Right, #Down, #Left {
	font: normal 1.8rem Noto;
	cursor: pointer;
}
	#Up {
		text-align: center;
		vertical-align: bottom;
		right: 2.3rem;
		bottom: 3rem;
	}
	#Right {
		text-align: left;
		vertical-align: middle;
		right: 0.9rem;
		bottom: 1.7rem;
	}
	#Down {
		text-align: center;
		vertical-align: top;
		right: 2.2rem;
		bottom: 0.4rem;
	}
	#Left {
		text-align: right;
		vertical-align: middle;
		right: 3.6rem;
		bottom: 1.7rem;
	}

#Progress {
	left: 0;
	bottom: 0;
	height: 5px;
}