/* index site stylesheet */

/* Give it enough room to host the image, plus some */
#wokintro {
	min-height: 250px;
	min-height: calc(200px + 3ex);
}

.idxintro {
	margin: .5em;
}

#logoside {
	float:right;
	text-align: center;
	margin-left: 1em;
}

#logo {
	margin:0
}

#content > .inlinepage {
	display: inline-block;
	vertical-align: top;
	width: 32em;
	max-width: 32em;
	margin: .5em;
	text-align: justify;
	position: relative;
}

.pageheader,
#content > .indexpage > .inlineheader
{
	font-variant: small-caps;
}

.indexpage .feedlink {
	top: 0;
}

body {
	text-align: center;
}

#content {
	position: relative;
	display: inline-block;
	text-align: justify;
	max-width: none;
	padding: .4em;
	border-width: .1em;
}

#rubriche {
	display: table;
	width: 100%;
	border: none;
	border-spacing: 1ex;
	list-style-position: inside;
	list-style-type: none;
	padding: 0 0;
	margin: -1ex 0 0 0;
	position: relative;
	/* with calc support; the fractional em compensates
	 * the #container border width */
	width: calc(100% + 2ex - .2em);
	margin-top: calc(-1ex + .1em);
	margin-left: calc(-1ex + .1em);
}

#rubriche li {
	font-size: 120%;
	height: 3ex;
	padding-left: 1.44em;
	padding-right: 1.44em;
	background: aqua;
	display: table-cell;
	text-align: center;
	font-variant: small-caps;
	/* padding: 0 1em; */
}

#rubriche li .links {
	position: relative;
}

#rubriche li .ownpage {
	display: none;
}

#rubriche li:hover .ownpage {
	position: absolute;
	display: inline;
	width: 1em;
	padding: 0;
	text-align:right;
	right: -1em;
}

#rubriche li p {
	display: none;
	position: absolute;
	font-variant: normal;
	font-size: 83%;
	background: turquoise;
	vertical-align: bottom;
	margin: .4rem 0 0 0;
	padding: .5ex 0;
	left: 1ex;
	right: 1ex;
	bottom: 0;
	z-index: 10;
}

#rubriche li:hover p {
	display: block;
}

/*
 try and configure the width of the main container in all case,
 up to the maximum needed to host all of the columns
 */

@media (max-width: 67em) {
	#content {
		width: 96%;
		max-width: 96%;
	}
	#content > .inlinepage, .inlinepage {
		width: 100%;
		max-width: none;
	}
}

@media (min-width: 67em) {
	#content { width: 67em }
}

@media (min-width: 100em) {
	#content { width: 100em }
}

@media (min-width: 133em) {
	#content { width: 133em }
}

@media (min-width: 166em) {
	#content { width: 166em }
}

@media (min-width: 199em) {
	#content { width: 199em }
}

@media (min-width: 232em) {
	#content { width: 232em }
}

@media (min-width: 265em) {
	#content { width: 265em }
}

/*
@media (min-width: 801px) {
	body {
		font-size: 10pt;
	}
}

@media (max-width: 800px) {
	body {
		font-size: 9pt;
	}
}
*/

@supports (flex-flow: row wrap) {
/* wrapping container with flex */
#content {
	width: auto;
	max-width: 96%;
	display: flex;
	flex-flow: row wrap;
}

.idxintro {
	flex: 1 8 100%;
}

#content > .inlinepage {
	width: 32em;
	max-width: none;
	flex: 1 1 32em;
}

/* wrapping menus with flex */
#rubriche {
	display: flex;
	flex-flow: row wrap;
	padding-bottom: 2.4rem;
	margin: 0;
	gap: .4rem;
}

#rubriche li {
	display: inline-block;
	flex: 1 1 8em;
}

#rubriche li:first-of-type {
	margin-left: 0;
}

#rubriche li p {
	left:0; right:0;
}

}

img { max-width: 100% }
.inlinecontent img { max-width: 100% }
.inlinecontent .inlinecontent img { max-width: 100% }

@media (prefers-color-scheme: dark) {
	#logoside {
		background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(31, 31, 31, 0) 72%);
	}
	#rubriche li {
		background: #b53011;
	}
	#rubriche li p {
		background: #bf1f2f;
	}
}