@charset "UTF-8";

/* --------- ZOOM LEVEL -------- */

body {
	zoom: 100%;
}

@media only screen and (min-device-pixel-ratio: 2) { 
	body {
		zoom: 200%;
	}
}

@media only screen and (min-device-pixel-ratio: 3) { 
	body {
		zoom: 200%;
	}
}


/* -------------- INDEX ----------------- */

@media 	all and (-webkit-min-device-pixel-ratio : 1.5),
		all and (-o-min-device-pixel-ratio: 3/2),
		all and (min--moz-device-pixel-ratio: 1.5),
		all and (min-device-pixel-ratio: 1.5)
{
	body {
		background-size: 32px 32px; /* 2X/Retina handling */
	}
}

body{
	height: auto;
}

figure {
	height: 64px;
}

figure.coverimage img {
	height: 64px;
}

.main-info {
	margin: 0px;
}

.coverimage {
	margin: 0px;
}

/* ------------ BODY ---------------------*/

body {
	min-height: 100%;
	height: 100%;
}


html {
    height: 100%;
	transition: none;
	overscroll-behavior: none;
}


@supports(padding:max(0px)) {
    body, footer {
        padding-left: min(0vmin, env(safe-area-inset-left));
        padding-right: min(0vmin, env(safe-area-inset-right));
    }
}

/* notch handling */
@media only screen and (orientation: landscape) and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) { 
	footer {
		display: none;
	}
	.language {
		right: 64px !important;
		top: 32px;
	}
	.menu {
		left: 48px !important;
	}
}

.hidden {
	display: none;
}

/* article li {
	margin-left: 32px;
	list-style-image: url("images/list-item.png");
	list-style-position: outside;
} */

/* --------- MASTHEAD -------------*/

.masthead {
	position: fixed;
	width: 3200vw;
	top: 0px;
	left: -64px;
	padding: 0;
	line-height: 35vw;
	z-index: 1;
}

.content {
	z-index: 100 !important;
}

.footer {
	z-index: 100 !important;
}

.menu {
	z-index: 200 !important;
}

.language {
	z-index: 300 !important;
}


/* ------------ BACKGROUND -----------------*/

.footer {
	/* there are 9 values. 9*32 = 288. This aligns background to rest of grid */
	background-size: 288px;
}

/* ------------  --------------*/

.footer {
	grid-area: footer;
	align-self: flex-flex-start;
}


@supports(position:sticky) {
	.footer {
		position: sticky;
		bottom: -28px;
	}
}

.copyright {
	position: relative;
	display: inline-block;
	left: 105px;
}

/* --------- LANGUAGE --------- */

.language {
	position: absolute;
	right: 32px;
	top: 32px;
	z-index: 1; /* Stay on top */
	display: flex;
	flex-direction: column;
	align-items: center;
}

.language ul li {
	width: 32px;
	height: 32px;
	line-height: 32px;
}

.language ul li a {
	display:inline-block;
	width:100%;
	height:100%;
}

ul.li {
	display: inline;
}

/* ---------- MAIN ------------- */

div.info h2.author p {
	display: inline;
}

div.info h2.timehue {
	height: 28px;
	display: inline;
	margin-top: 0px;
	margin-left: 8px;
	border-left-style: solid;
	border-left-width: 1px;
	border-left-color: lightgray;
	padding-left: 16px;
}

div.info h2.timehue a {
	padding-left: 8px;
	padding-right: 8px;
	margin-left: -8px;
	margin-right: -8px;
}

div.info h2.date {
	height: 32px;
	display: inline;
	color: rgb(134,134,134);
	font-size: 0.8em;
	border-left: solid 1px lightgray;
	margin-left: 12px;
	padding-left: 12px;
	padding-top: 2px;
	padding-bottom: 1px;
}

/* ------------ IMAGES --------------------- */

pre {
	margin-top: 16px;
	margin-left: 16px;
	margin-bottom: 16px;
	padding-left: 16px;
}

/* ------------ TIMEHUE --------------- */

header.entry-info h3.timehue, header.post-info h3.timehue, header.lesson-info h3.timehue, ul.news-list h3.timehue, ul.latest-list h3.timehue {
	display: inline;
	margin-top: 0px;
	margin-left: 8px;
	border-left-style: solid;
	border-left-width: 1px;
	padding-left: 16px;
}

header.entry-info h2.date, header.post-info h2.date, header.lesson-info h2.date, ul.news-list h2.date, ul.latest-list h2.date {
	display: inline;
	border-left: solid 1px;
	margin-left: 12px;
	padding-left: 12px;
	padding-top: 2px;
	padding-bottom: 1px;
}

blockquote {
	border-left: 1px solid lightgray;
	padding-left: 16px;
	margin-left: 5px;
	margin-bottom: 8px;
}

img.timehue {
	position: relative;
	top: 0px;
	left: 0px;
}

/* ------------ ------------- */

hr {
	border: 0px;
	height: 16px;
	/* background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); */
}

ul.thumbnails {
	display: inline;
}

img.thumbnail-empty {
	height: 180px;
	width: 180px;
	background-image: url('../../assets/images/site/Stripes-Transparent.png');
	background-size: 180px;
	background-repeat: none;
	transition: opacity 0.3s;
}

/* ##Device = Low Resolution Tablets, Mobiles (Landscape) ##Screen = B/w 481px to 767px */
@media (min-width: 481px) and (max-width: 767px) and (orientation: landscape) {

	div.main {
		margin-top: 16px;
	}

	img.thumbnail-empty {
		width: 19vw !important;
		height: 19vw !important;
		background-image: none;
	}
}

/* ------ SELECT -------- */

textarea, select, input, button {
	outline: none;
	-webkit-appearance:none;
}

select {
	height: 32px;
	border: 3px solid;
	margin: 0px;
	margin-right: 4px;
	padding: 4px 8px 4px 16px;
	border-radius: 0.4em;
	background-image: url("images/option-menu-arrow.png");
	background-repeat: no-repeat;
	background-position: 4px;
}

option {
	height: 24px;
}