/* ARABIC AND LATIN GLOSSARY WEBSITE STYLESHEET */

/* GRID: 8×6em = 48em / + 7×1em gutters = 55em / + 1em l/r padding = 57em */
/* content width: 1em+6em+1em = 8em padding-left / 7×6em = 42em grid + 6×1em gutters = 48em / 1em padding right*/

/* BASIC PAGE BLOCKS */

html {
	scroll-padding-top: 4rem; /* sum height of navbar: jumping to entry offsets scroll point by one navbar height, so it isn’t covered by the sticky navbar. */
}

body {
	margin: 0 0.5rem 0 17.5rem; /* 0.5em l/r, links + 17em extra: sidebar */
	padding: 0;
}
#pagehead, #navbar, #content, #pagefooter {
	margin-left:auto;
	margin-right:auto; /*centering*/
}
#pagehead {
	max-width: 57rem;
	border-top: 0.5rem solid;
	padding: 1.25rem 0 0 0;
	margin-top: 0;
	margin-bottom: 0;
}
#navbar {
	max-width: 57rem;
	position: sticky;
	top: 0;
	z-index: 1;
}
#content {
	position: relative; /*for gloss/pr positioning*/
	max-width: 48rem;
	padding: 1rem 1rem 1.5rem 8rem;
	overflow: auto;
}
#pagefooter {
	margin-bottom: 1rem;
	max-width: 54.6rem;
	padding: 0 1.2rem;
}
#sidebar {
	position:fixed; 
	top:0; 
	left:0; 
	bottom:0;
	width: 17rem;
	
	display: grid;
	grid-template-rows: 2.5rem 7.25rem auto 0.25rem;
	grid-template-columns: 4rem 13rem;
	grid-template-areas:
		"qsrch qsrch"
		"varswtch varswtch"
		"alphlst lemlst"
		". .";
}
#searchmask {
	grid-area: qsrch;
	padding: 0.25rem 0 0.375rem 0.25rem;
	border-bottom: 0.175rem solid black;
	margin-bottom: 0.25rem;

	overflow: hidden;
}
#varswitch {
	grid-area: varswtch;
	padding: 0;
	border-bottom: 0.125rem solid black;
	margin-bottom: 0.25rem;
	
	overflow: hidden;
}
#alphlist {
	grid-area: alphlst;
	padding-right: 0.1875rem;
	border-right: 0.125rem solid black;
	margin-right: 0.1875rem;
	
	overflow: auto;
}
#lemlist {
	grid-area: lemlst;
	
	overflow: auto;
}

/* ################ */
/* TYPEFACES & CUTS */
/* ################ */

body, a, h1, h2, h3, blockquote, em>em {
	font-family: 'LinuxLibertine', 'DroidNaskh', serif;
	font-weight: normal;
}
blockquote, em {
	font-style: italic;
}
h1, h4, strong, .menubar a, span.navbaritem {
	font-weight: 600;
}
span.ar {
	font-family: 'DroidNaskh', 'LinuxLibertine';
/*	font-size: 1rem;
	line-height: 1.5rem;*/
	direction: rtl;
	
	unicode-bidi: bidi-override;
}

/* ################################### */
/* TEXTFLOW: SIZES, MARGINS & PADDING */
/* ################################### */

html {
	font-size: 100%; /*16px*/
}

/* TEXTFLOW */ 
/* nb.: aenderungen hier auch in gloss.css anpassen */

#content * {
	margin-bottom: 0; /* default styling override: all vertical distance is margin-top. */
}
#content * + * {
	margin-top: 1.5rem; /* LOBOTOMISED OWL! everything is vertically spaced 1.5rem. */
}
#content h2 + section, #content h3 + section, #content h4 + section, #content p * {
	margin-top: 0; /*sections following hx: no margin-top, rules following to give next hx margin-top. also, elements inside p: no margin-top*/
}

#content  h2 {
	margin-top: 3.4rem; /* h2 default: >3rem */
}
#content h2 + * {
	margin-top: 2.6rem; /* h2’s following sibling: <3rem */
}
#content h2 + section>h2:first-child, #content h2 + section>h3:first-child, #content h2 + section>h4:first-child {
	margin-top: 3rem; /* any header following h2: 3rem flat */
}
#content  h3, #content  h4 {
	margin-top: 1.9rem; /* h3/4 default: >1.5rem */
}
#content h3 + *, #content h4 + * {
	margin-top: 1.1rem; /* h3/4’s following sibling: <1.5rem */
}
#content h3 + section>h3:first-child, #content h3 + section>h4:first-child, #content h4 + section>h4:first-child {
	margin-top: 1.5rem; /* any header following h3/4: 1.5rem flat */
}

/* GENERAL STYLING */

/* block elements */
body {
	font-size: 1rem;  /*16px – 1em = 16px from here! */
	line-height: 1.5rem; /* basic leading: 1.5em – 24px; general leading!*/
}
h1 {
	font-size: 3rem;
	line-height: 3rem;
	padding: 0;
	margin: 0 0 0 1.2rem; /* 1rem side margin + 0.2rem inset */
}
h2 {
	font-size: 1.5rem;
	padding: 0;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
h3 {
	font-size: 1.5rem;
	padding: 0;
}
h4 {
	font-size: 1rem;
	padding: 0;
}

p {
	text-align: justify;
	padding: 0;
	margin: 0;
}
section p, ul, ol, h2, h3, h4, dl {
	margin-left: 0.2rem;
}

blockquote {
	margin-left: 7rem;
	margin-right: 7rem;
}

ul, ol {
	display: block;
	list-style-type: disc;
	padding: 0;
}
ul.plain, ol.plain {
	list-style-type: none;
}

#content dl *,#content  ul *,#content  ol * {
	margin-top: 0;
}
dd {
	margin-left: 1.5rem;
}

/* inline elements */

a {
	text-decoration:none;
}
a:hover {
	text-decoration: underline;
}

/* SPECIFIC STYLING */

/* header */
p.subhead {
	margin: 0 0 1.75rem 8.2rem;
}

/* menu bar */
ul.menubar {		/*headermenu noch von em auf % umrechnen und mit min-width im container am zerbrechen hindern?*/
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	height: 3rem;
	
	list-style-type: none;
	padding: 0.5rem 1rem;
	margin: 0;
}
ul.menubar > li {
	display: block;
	flex-basis: 6rem;
	
	vertical-align: top;
	width: 6rem;
	padding: 0 0.4375rem 0 0;
	margin: 0 0.5rem 0 0;
	border-right : 0.0625em /*1px*/ solid #a3b1cc;
}
ul.menubar > li:last-child {
	padding: 0;
	margin: 0;
	border-right : 0;
}

ul.menubar > li > a, span.navbaritem {
	display: block;
	padding-left: 0.2em;
	height: 3em;
}
ul.menubar li a:hover {
	text-decoration: none;
}

/* navbar submenu */
ul.submenu {
	position:absolute;
	z-index: 1;
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: none;
}
ul.menubar > li:hover ul.submenu {
    display:block;
}
ul.submenu > li {
	margin: 0;
	padding: 0;
	width: 150%;
	border: none;
	overflow: auto;
}
ul.submenu > li > a {
	display: block;
	padding: 0 0 0 1em;
	margin: 0;
}
ul.submenu > li > a:before {
	content: "»";
	padding-right: 1em;
}

/* abbreviations */
dl.abbrev dt, dl.abbrev dd {
	display: inline;
	margin: 0;
}
dl.abbrev dt:after {
	content: ' – '
}
dl.abbrev dd:after {
	content: '\A';
	white-space: pre
}

/* sources */
p.sourceslist  {
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 1.5em;
	text-indent: -1.5em;
}

/* headers on search form */
#search-textselect h4 {
	margin-top: 1.5rem;
}
#search-textselect h4 + p {
	margin-top: 0;
}

/* GLOSSARLISTENSELEKTOREN */
ul.gloss-selector {
	position: relative;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
ul.gloss-selector > li {
	display:inline-block; 
	width: 5.8em;
	padding-left: 0.2em;
	margin-right: 1em;
}
ol.gloss-selector-list {
	position: absolute;
	z-index: 1;
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: none;
}
ol.gloss-selector-list li {
	padding-left: 0.2em;
	width: 120%;
}
ul.gloss-selector > li:hover > ol.gloss-selector-list {
	display: block;
}

/* nav elements */
#alphlist ol, #lemlist ol {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
#alphlist li, #lemlist li {
	margin-top: 0;
	line-height: 1rem;
	margin-left: 0.125rem;
	margin-right: 0.125rem;
}
#varswitch .var {
	display: block;
	text-align: center;
	padding: 0.3rem;
	margin: 0 0.125rem;
}
#alphlist li {
	text-align: center;
}
#alphlist li + li, #lemlist li + li, #varswitch * + * {
	border-top: /*0.0625em*/ 0.07rem solid black;
}
#lemlist a, #alphlist a {
	display: block;
	padding: 0.2rem 0.125rem 0.2375rem 0.125rem;
}