@import "fonts.css";

#header { display: flex; flex-direction: row; align-items: center; background-color: #060d87; margin: 0px; height: 60px; }
#headerleft { height: 60px; }
#headerright { height: 52px; padding-right: 4px; }

h1 { font-family: "Noto Sans Extra Condensed Bold"; background-color: #060d87; color: #f4b142; width: calc(100vw - 60px - 111px); padding-left: 16px; font-size: 2.5em };
h2 { font-family: "Noto Sans Extra Condensed Bold", "Open Sans", sans-serif; color: #060d87; font-size: 2em; line-height: 0; }
h3 { font-family: "Noto Sans Extra Condensed Light", "Open Sans", sans-serif; color: #060d87; font-size: 1.5em; line-height: 0; }

body { font-family: 'Open Sans', sans-serif, sans; font-weight: 300; background-color: white; margin: 0px;}

#navigationholder { margin-bottom: 0.5em; }
#pagetitle { background-color: #060d87; margin: 0px 0px 2.5em 0px; height: 30px; padding: 0px 0px 0.5em 2em; border-top: 2px solid #f4b142; }
#pagenavigation { display: flex; flex-direction: row; align-items: start; background-color: #060d87; margin: 0px 0px 0em 0px; height: 30px; padding: 0px 0px 0px 2em; border-top: 2px solid #f4b142; }
#pagemenubutton { display: none; flex-direction: row; align-items: start; background-color: #060d87; margin: 0px 0px 0em 0px; height: 30px; padding: 0px 0px 0px 5px; border-top: 2px solid #f4b142; color: #f4b142; }
#menubuttonimage { height: 24px; margin-top: auto; margin-bottom: auto; }
#menubuttonimage:hover { filter: brightness(90%); cursor: pointer; } 
#verticalnavigation { flex-direction: column; align-items: start; background-color: #060d87; margin: 3px; padding: 5px; border: 1px solid #F9C013; border-radius: 5px; }

.navigationdiv > span { color: #aaa; font-weight: 400; }
.navigationdiv > div { color: #aaa; font-weight: 400; }
.navigationdiv > span > a:link { text-decoration: none; color: #fff; font-weight: 700; }
.navigationdiv > span > a:hover { text-decoration: none; filter:brightness(75%); font-weight: 700; }
.navigationdiv > span > a:visited { text-decoration: none; color: #fff; font-weight: 700; }
/*.navigationdiv > span:last-child { margin-left: auto; margin-right: 0.25em; color: #fff; }
.navigationdiv > span:last-child::before { content: "👥"; filter: saturate(0%) brightness(200%); margin-right: 2px; }*/
.navigationdiv > div > span > a:link { text-decoration: none; color: #fff; font-weight: 700; }
.navigationdiv > div > span > a:hover { text-decoration: none; filter:brightness(75%); font-weight: 700; }
.navigationdiv > div > span > a:visited { text-decoration: none; color: #fff; font-weight: 700; }

#pagenavigation > span { height: 26px; margin-right: 2em; }
#pagenavigation > div { height: 26px; margin-right: 2em; }

#pagenavigation > span.currentpage { border-bottom: 4px solid #f4b142; }
#pagenavigation > div > span.currentpage { border-bottom: 4px solid #f4b142; }
#pagenavigation > div > span > a.currentpage { border-bottom: 4px solid #f4b142; }

#verticalnavigation > span.currentpage { border-left: 4px solid #f4b142; padding-left: 2px; }
#verticalnavigation > div > span.currentpage { border-left: 4px solid #f4b142; padding-left: 2px; }
#verticalnavigation > div > span > a.currentpage { border-left: 4px solid #f4b142; padding-left: 2px; }

#pagenavigation > .doublemenu { display: flex; flex-direction: row; }
#pagenavigation > .doublemenu > .extramenu::before { content: ">" }
#verticalnavigation > .doublemenu { display: flex; flex-direction: column; }
#verticalnavigation > .doublemenu > .extramenu { margin-left: 1em; }

.extramenu { display: block; }

.tabnavigation { width: 95%; margin-left: auto; margin-right: auto; flex-direction: row; align-items: start; /*height: 24px;*/; height: 30px; }
.tabnavigation > div { margin-left: 5px; border-top: 2px solid #fff; border-left: 2px solid #fff; border-right: 2px solid #fff; border-top-left-radius: 4px 4px; border-top-right-radius: 4px 4px; padding-left: 2px; padding-right: 2px; background-color: #eee; cursor: pointer; color: #555; height: calc(100% - 2px); }
.tabnavigation > div > div { padding: 3px 2px 5px 2px; background-color: #eee; }
.tabnavigation > div:hover { filter: brightness(90%); }
.tabnavigation > div.selected { margin-left: 5px; border-color: #000; background-color: #eee; color: #000; font-weight: 700; }
.tabnavigation > div.selected > div { font-weight: 700; color: #000; }

.hiddentabs { display: none; }
.visibletabs { display: flex; }

#content { background-color: #eee; padding: 1em; border-radius: 1em 1em; width: calc(100vw - 4em); display:grid; margin-left: auto; margin-right: auto; height: calc(100vh - 122px - 4em); grid-template-rows: calc(100% - 5em) 5em; /*height: calc(100vh - 108px - 4em); grid-template-rows: calc(100% - 3em) 3em; */ grid-row-gap: 1em; }
/*#content > :first-child { grid-row-start: 1; grid-row-end: 1 };*/

.shrinkcolumns { justify-items: center; }
.shrinkrows { align-items: center; }

.shrinkcolumnsstart { justify-items: start; }
.shrinkrowsstart { align-items: start; }

.shrinkcolumnsend { justify-items: end; }
.shrinkrowsend { align-items: end; }

#pagecontrol { display: flex; flex-direction: row; justify-content: end; grid-row-start: 2; grid-row-end: 2; width: calc(100vw - 6em); height: 2.25em; margin-top: 0.25em; column-gap: 1em; grid-column-gap: 1em; padding-top: 0.6em; }

.gridholder { display: grid; grid-column-gap: 1em; column-gap: 1em; grid-row-gap: 1em; row-gap: 1em; }

.reversegridcolumnflow { align-items: end; }
.reversegridrowflow { justify-items: end; }

.textcontent { background-color: #fff; border-radius: 1em 1em 1em; padding: 1em; }

.firstcolumn { grid-area: 1 / 1 / 1 / 1; }
.secondcolumn { grid-area: 1 / 2 / 1 / 2; }
.thirdcolumn { grid-area: 1 / 3 / 1 / 3; }
.fourthcolumn { grid-area: 1 / 4 / 1 / 4; }
.fifthcolumn { grid-area: 1 / 5 / 1 / 5; }

.fullheight { height: calc(100vh - 122px - 11em); }
.halfheight { height: calc((100vh - 122px - 11em) / 2); }

.fullwidth { width: calc(100vw - 6em); }
.halfwidth { width: calc((100vw - 6em) / 2); }

.firstrow { grid-area: 1 / 1 / 1 / 1; }
.secondrow { grid-area: 2 / 1 / 2 / 1; }
.thirdrow { grid-area: 3 / 1 / 3 / 1; }
.fourthrow { grid-area: 4 / 1 / 4 / 1; }
.fifthrow { grid-area: 5 / 1 / 5 / 1; }

#popup { z-index: 10; position: absolute; left: 50%; top: 50%; margin-right: -50%; background-color: #fff; border: 1em solid #fff; border-radius: 1em 1em; display: none; box-shadow: 4px 4px 4px black, -4px -4px 4px black, 4px -4px 4px black, -4px 4px 4px black; transform: translate(-50%, -50%); justify-content: center; align-items: center; }
#popup > div { background-color: #eee; border: 1em solid #eee; border-radius: 1em 1em; width: 500px; }

dialog#popupdialog { background-color: #fff; border: 1em solid #fff; border-radius: 1em 1em; box-shadow: 4px 4px 4px black, -4px -4px 4px black, 4px -4px 4px black, -4px 4px 4px black; overflow-x: hidden; overflow-y: hidden; }
dialog#popupdialog::backdrop { background-color: #7777; }
dialog#popupdialog > div { background-color: #eee; border: 1em solid #eee; border-radius: 1em 1em; width: 500px; }

.popupcontrolrow { display: grid; grid-template-columns: auto auto auto auto; grid-column-gap: 0.5em; margin-top: 0.25em; grid-row-gap: 0.25em; width: 100%;}

dialog#popupdialog .popup-inner { max-width: 70vw; }

.linkblock { display: flex; flex-flow: column wrap; justify-content: left; width: 100%; height: calc(100vh - 84px - 4em); }
.linkblock > a { margin: 1em; }

.horizontallinkblock { display: flex; flex-flow: row wrap; justify-content: left; width: 100%; row-gap: 3em; }
.horizontallinkblock > * { margin: 1em; height: 220px; }

.verticalblock { display: flex; flex-direction: column; }
.verticalblock > span { width: 160px; margin-top: 2em; }

.imagelink { position: relative; text-align: center; }
.imagelink > img { border-radius: 8px; filter: drop-shadow(8px 8px 8px #0007); }
.imagelink:hover > img { filter: brightness(90%) drop-shadow(4px 4px 4px #000c); }
.imagelinklabel { position: absolute; top: -200%; left: 50%; transform: translate(-50%, -50%); font-size: 150%; color: white; background-color: #0007; padding: 4px; border-radius: 4px; font-weight: 400; }

textarea { resize: none; border-radius: 0.5em 0.5em 0.5em; padding: 0.5em; }

/* Change 1800px here to whatever width won't show all your links in the #pagenavigation div */
@media screen and (max-width: 1800px) { 
	#pagemenubutton { display: flex; }
	#pagenavigation { display: none; }
}

@media screen and (max-width: 1680px) {
	.tabnavigation {
		display: flex;
	}
}

.notice { background-color: #fbf9ed; padding: 0.75em; display: inline; border-radius: 5px; }

@keyframes duplicateflash {
        0% {
                background-color: #fbf9ed;
        }
        50% {
                background-color: rgb(255, 0, 0);
        }
        100% {
                background-color: #fbf9ed;
        }
}

.noanim {
        animation-name: none;
}

.doflash {
        animation-name: duplicateflash;
        animation-duration: 0.5s;
        animation-iteration-count: 1;
        animation-play-state: running;
}

details[open] { margin-bottom: 1em; }
details[open] > summary { margin-bottom: 1em; }
details > p { background-color: #fbf9ed; padding: 0.75em; display: inline; border-radius: 5px; margin-left: 1em; }