:root { --fa-secondary-opacity: 0.4; } /* resetting opacity for duotone secondary layer */

.outlink:link, .outlink:visited, .outlink:hover, .outlink:active {color: #856; font-family: 'Glory', Sans-Serif;}

@font-face {font-family: "Ambrosia Cap"; src: url("AmbrosiaCap.woff") format('woff');}
@font-face {font-family: "ISOCP V2"; src: url("ISOCPV2.woff") format('woff');}

body {height:100vh; font-family: 'Baloo 2', sans-serif; font-size: 18px; color:Black; padding:0px; margin:0px;}
body {background-image: url("beautiful.png"); background-position: center center; background-size: 200vh;}
#page, #home {height:100%; width:70%; margin:0px auto;}

header {padding:10px; padding-right:0px; margin-right:0px; position:relative; margin-bottom:30px; width: 60%}
main { padding-right: 15px;  padding-left: 15px; width: 60%}

main a img {border: 3px solid #AA7676 !important;}
main a:hover img {border: 3px solid FireBrick !important;} /*2 looks interesting but causes problems*/
main a .byellow {border: 3px solid darkgoldenrod !important;}
section {float:left; width:60%;}
aside {display:inline-block; width:40%; vertical-align:top; padding-left:26px;}
.bigletter {font-size: 75px; font-weight:normal;}
.beta {font-size:20px;}
#inspire { width: 100%; text-align: center; color: #333; align-self: flex-end; text-shadow: 0 0 10px Pink;}

.news img {width:100%; border:1px solid ForestGreen; margin:5px 0px -8px 0px;}
.phonenr {color:ForestGreen;font-size:24px; margin-left:20px;}
/*H1 = site logo H2 = page header H3 = topic/event titles H4 = subtitle gebruikt voor name-font op gewone text H5 = title functie (gebruik samen met icon) H6 = //not used/ */
h1 {font-family: "ISOCP V2"; font-size: 60px; letter-spacing: 0px; line-height: 1;margin-block-start: 0; margin-block-end: 0; padding:0; margin-top: -14px; text-shadow: -3px 1px #F8F8F8, 0 2px #F8F8F8, 3px 1px #F8F8F8; color:#222;  white-space: nowrap;text-shadow: 1px 0px 0px black; margin-top:10px;}
h2, h3, h4 { font-family: 'Alumni Sans', Sans-Serif; margin:0; line-height: 3rem; color:#111; font-weight: normal;}
h2 {font-size: 3.5rem; margin-bottom:5px;}
h3 {font-size:24px; border-bottom:2px solid ForestGreen; line-height:1; padding-bottom:5px;} /*JEME*/
h4 {font-size:24px; border-bottom:2px solid #856; line-height:1; padding-bottom:5px;} /*JEME*/
h5 { font-family: 'Glory', Sans-Serif; display:inline; font-size: 20px; color:#111; letter-spacing: 1px;}
h6 { font-family: 'Fira Code', Sans-Serif; display:inline; font-size: 20px;}
.hlower {font-size: 18px; display: inline-block; padding-top: 5px;}

/*Form*/
button {cursor:pointer;border-radius: 15% 30%; border:0px; outline: none !important; font-family: 'Glory', Sans-Serif; box-shadow: 3px 2px 2px #BBB;}
	/*buttons moeten een zeer specifiek font hebben!*/      /*momenteel is er een horizontal padding*/
	/*Apparte look en font voor tabs*/ /*moeten iets donkere kleur en dan nog een donkere hooverkleur hebben*/
button:hover:not([disabled]):not(.disabled) { background-color: #f4f4f4;}
button:disabled { cursor: default;  pointer-events: all !important; box-shadow: 0px 0px 0px #BBB;}
button img {margin:5px; border-radius: 15% 30%; border: 2px solid silver;opacity: 0.85;}
.bred img {border-color:FireBrick;}
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; margin-bottom:-6px; display:contents;} 
figcaption {text-align:center;}
option:disabled { display: none; }
label {margin-bottom:-3px;}

/*Structure*/
.flex {display:flex;} 
.grow {flex-grow:100;}
.column {flex-direction: column;}
.right {float:right;}
.left {float:left;}
.clear {clear:both;}
.crimp {width:0;height:0;}
.halfwidth {width:45%;}
.width96 {width:96%;}
.flexhalf {width:0;}
.bottom {display: flex; align-items: flex-end;}

/*Scrolling*/
.panning {cursor:all-scroll;touch-action:none;}
.no-scroll { -ms-overflow-style: none; /* IE and Edge */  scrollbar-width: none; /* Firefox */ }
.no-scroll::-webkit-scrollbar { display: none; } /* Chrome, Safari and Opera */

/*Colors*/
.border {border:1px solid black;}
.yellow {color:DarkGoldenRod !important;}
.myellow {color:GoldenRod !important;}
.silver {color:Silver;}
.green {color:ForestGreen !important;}
.black {color:Black !important; font-style: normal;}
.bgyellow {background-color:#FFFFBB;}
.bgpink { background:#faeeed !important;}
.fadein {-webkit-transition:background 1s;-moz-transition:background 1s;-o-transition:background 1s;transition:background 1s;}
.bghalftone {background:#bc8686;}
.darkred {color:DarkRed;}
.grey {color:grey !important;}
.sgrey {color:DarkSlateGray;}
.dgrey {color:#333 !important;}
.red {color:FireBrick !important;}
.dred {color:DarkRed !important;}
.bwhite {background:#FFF;}
.bgbody {background:#F8F8F8;}
.bgold {border-color:GoldenRod;}
.bgreen {border-color:#558855;}
.bred {border-color:DarkRed;}
.bgred {background-color: DarkRed !important; box-shadow:0 0 5px 5px DarkRed;}
.white {color:white;}
.bgwhite {background-color:white;}
.faded {opacity:0.5;}
.fading {opacity:0.9;}

/*Block*/
.padded {padding:7px;}
.marged {margin:7px;}
.rounded {border-radius:5px;}
.sharp {border-radius:3px;}
.bordered {border:1px solid silver;}
.underborder {border-bottom:1px solid silver;}
.overborder {border-top:1.5px solid silver;}
.leftborder {border-left:1.5px solid silver;}
.rightborder {border-right:1.5px solid silver;}
.underpadding {padding-bottom:15px;}
.backed {background: rgba(245,255,245,0.5); padding:10px; border-radius:5px; margin:0px 20px 20px 20px; border:1px solid #D8D8D8; display: block;}
.backed iframe {aspect-ratio: 16 / 9;	height: 100%;	width: 100%; border:2px solid ForestGreen; border-radius:2px; box-sizing: border-box; margin-bottom:0px;}
.backedbg {background: rgba(227,227,227,0.75); text-shadow: 2px 2px #e8e8e8, 2px -2px #e8e8e8, -2px 2px #e8e8e8, -2px -2px #e8e8e8;}
.sectionbg {background-repeat: no-repeat; background-position: center; background-size: cover;}
.mirrorbg {background-image: url(/img/glyph/Square2.png); background-size: 90%;} .circlebg {background-image: url(/img/glyph/Circle.png);} .heartbg {background-image: url(/img/glyph/Heart.png); background-position-y: 35%;} .scenebg {background-image: url(/img/glyph/Eye.png);} .instantbg {background-image: url(/img/glyph/Bolt.png);} .groupbg {background-image: url(/img/glyph/Group.png);} .eventbg {background-image: url(/img/glyph/Star.png);} .localebg {background-image: url(/img/glyph/Pin.png);} .bazaarbg {background-image: url(/img/glyph/Gate.png);}
#boxconvo {background-position: -9vw -8vh;}
.section {width:60%; display:inline-block;}
.aside {display:inline-block; width:40%; vertical-align:top; padding-left:26px;}
.cell {display: table-cell; vertical-align: middle;} /*unused*/
.pointer {cursor:pointer;}
.nobg {background-image:none !important;}
.line0 {line-height: 0 !important;}
/*Font*/
/*.content {font-family: 'Luxurious Roman', cursive; color:DarkSlateGray;}*/
.alumni {font-family: 'Alumni Sans', sans-serif; font-size:24px; line-height:1; color:#555;}
.alumni2 {font-family: 'Alumni Sans', sans-serif; font-size:24px; line-height:1; color:#555;}
.glory {font-family: 'Glory', Sans-Serif; line-height:1;}

/*text*/
.bold {font-weight:bold;}
.none {text-decoration: none; font-style:normal; font-weight: normal; text-shadow:none;}
.italic {font-style:italic !important;}
.underline {text-decoration:underline;}
.noline, .noline:hover {text-decoration: none !important;}
.nobr { white-space: nowrap; }
.solid {text-shadow: 0.5px 0 0 currentColor;}
.thicker {-webkit-text-stroke: 0.5px;}
.narrow {letter-spacing: -1.5px;} /*margin-block-start: 0px;*/
.narrowish {letter-spacing: -0.75px;} /*margin-block-start: 0px;*/
.smaller {font-size:smaller !important;}
.larger {font-size:larger !important; line-height:1;}
.wide  {letter-spacing: 1px !important;}
.wider {letter-spacing: 3px !important;}
.tright{text-align:right;}
.tcenter{text-align: center;}
.tleft{text-align: left !important;}
.center{text-align: center;} /*usethisone!*/
.zeromargin {margin:0;}
.justify {line-height:2; text-align:justify; text-justify:inter-word; text-align-last:justify;}
.evenly {justify-content: space-evenly;}

/*spacing*/
.pad {padding: 0px 3px;}
.padx {padding:0 10px;}
.pad5 {margin: 5px;}
.pad10 {margin: 10px;}
.right0 {margin-right:0px;}
.right5 {margin-right:5px;}
.right10 {margin-right:10px;}
.right15 {margin-right:15px;}
.right20 {margin-right:20px;}
.left5 {margin-left:5px;}
.left10 {margin-left:10px;}
.left15 {margin-left:15px;}
.left20 {margin-left:20px;}
.left50 {margin-left:50px;}
.left200 {margin-left:200px;}
.top4 {margin-top: 4px;}
.top5 {margin-top: 5px;}
.top10 {margin-top: 10px !important;}
.bottom0 {margin-bottom: 0px !important;}
.bottom5 {margin-bottom: 5px;}
.bottom10 {margin-bottom: 10px !important;;}
.bottom15 {margin-bottom: 15px;}
.bottom20 {margin-bottom: 20px;}
.minus5 {margin-left:-5px;}
.minus2 {margin-left:-2px;}
.noborder {border:0 !important;}
.maxheight, .maxheight2, .maxheight3 {height: 100%;}
.alldown {min-height: 100%;}
.lineherit {line-height:inherit !important;}

/*Menu*/
#menu {}
.navbar-brand { display: inline-block;  padding-top: 0.3125rem;  padding-bottom: 0.3125rem;  margin-right: 1rem;  font-size: 1.3rem;  line-height: inherit;  white-space: nowrap;}
.navbar-brand:focus, .navbar-brand:hover { Z}
.tokennav { margin-top: -17px !important; margin-right: 10px !important;}
#submenu {min-width:11%; position:absolute; right:8px; top:63px; z-index:50;}

/*Console*/
.infoline {font-size: 15px; font-style: italic; line-height:2; margin:3px 0 0px; display:inline-block; max-width:85%; text-align: justify;} /*letter-spacing: -0.75px;*/
.sysbar {width:46%; padding: 0px; margin: 0px 0px 3px auto;}
.syspage {position:relative; width:46%; padding: 5px 15px; margin: 0px; margin-left:auto; background:#D8D8D8; font-family: 'Fira Code', monospace; font-size: 16px; color:black; letter-spacing: -0.5px; border-style: solid; border-width: 0px 3px; border-color: #CCC; margin-bottom: 3px;}
.notifpage {line-height: 3;}
.adminpage {line-height: 2;} 
.syspage, .sysbar {min-width: 645px;} /*temp solution*/
.systitle {height:50px; margin:0px; padding-left:20px; display: flex; background:#888; align-items: center; color:white;}
.systab {height:50px; min-width:20%; margin:0px; margin-left:3px; padding: 5px 15px; background:#D8D8D8; border-radius: 0; font-size:20px; border-bottom: 2px solid #CCC !important; border-top:2px solid #CCC !important;box-shadow: 0px 0px 0px #BBB;}
.systab :focus, .systab:hover {background:#EEE; border-color: #DDD !important;}
.curtab {background:#EEE; border-color: #DDD !important; color:#222;}
.halftab {width:50px !important; min-width: 50px !important;}
.newtab {background:rgba(140,0,0,0.25);}
/*.newtab {  text-decoration: underline; text-decoration-color: FireBrick;}*/
.navtab {height:50px; width:100%; margin:0px; margin-bottom:3px; padding: 5px 15px; background:#D8D8D8; border-radius: 0; font-size:21px; border-right: 3px solid #CCC !important; border-left: 3px solid #CCC !important; box-shadow: -3px 3px 5px #555;}
.navtab :focus, .navtab:hover {background:#EEE; border-color: #DDD !important;}
.navtab .slicon {font-size: 20px !important;} /*fa-regular {color:Black;*/
/* Works on Firefox */
/*.syspage {scrollbar-width: initial; scrollbar-color: initial;}*/
/* Works on Chrome, Edge, and Safari */
.syspage ::-webkit-scrollbar {width: 14px;}
.syspage ::-webkit-scrollbar-track {background: #D8D8D8;  border-radius: 0;}
.syspage ::-webkit-scrollbar-thumb {background-color: #D8D8D8; border-radius: 2px; border: 1px dashed gray; border-right: 0;border-bottom: 0;}
.button {cursor:pointer;border-radius: 15% 30%; font-family: 'Glory', Sans-Serif; background-color:#EEEEEE; color:black;}
.disa {cursor:default !important; background-color: rgba(239, 239, 239, 0.3) !important; color: rgba(16, 16, 16, 0.3) !important;}
.histbut {padding:5px 7px 3px; margin-left:10px;}
.return {margin-right:2px; height:60px;} /*?*/

.mabutton {width:27%; margin:3%; height:60px; font-size: 30px; background:#F0E0FF;}

/*Forgebox*/
.forgebox {margin-block-end:0; margin: 10px 0; padding: 10px; border-radius: 5px; background: #E0E0E0; margin-bottom: 17px; border: 2px solid #EEE;}
.forgemini {margin-block-end:0; margin: 10px 0; padding: 0 10px; border-radius: 5px; background: #E0E0E0; border: 2px solid #EEE;}
.forgecol {margin-left:17px;}
.forgecol2 {margin:0px; margin-right:17px;}
.syspage input, .syspage select, .syspage textarea {background:#E0E0E0; line-height:1.2; margin-bottom:-10px;}
.syspage textarea {line-height:1.5;}
.syspage input, .syspage select { border: 1px dashed gray;border-style: none none dashed none; outline: none; color:DarkBlue;font-family: 'Luxurious Roman', 'FontAwesome', sans-serif; font-size: 18px;font-weight: 400;}
.syspage textarea { border: 1px dashed gray;border-style: none dashed dashed none; outline: none; color:DarkBlue;font-family: 'Luxurious Roman', sans-serif; font-size: 18px;resize: none; border-radius: 0 0 10px; margin-bottom: 0px;}
.forgeform {line-height:2.2; margin: 10px 0; padding: 5px 0;}
.forgeform .infoline {margin:-8px 0 10px;}
.imagefile {}
/*.syspage select {letter-spacing: -1px;}*/
 .clipspan {color:blue; cursor:pointer;}
 input[type="number"] { width: 9ch; line-height:1;}
 input[type="email"] { text-transform: lowercase;}
 /*input[type="text"] { width: 32ch; }
 input[type="password"] { width: 32ch; }
 input[type="email"] { width: 32ch; }*/
 input[type="url"] { width: 35ch; }
.short {width: 20ch !important; }
.medium {width: 27ch !important; }  
.long {width: 35ch !important; }
.tiny {width: 13ch !important; }
.code {width: 2ch !important; text-align:center;} /* border-bottom:1px solid grey;*/
/*.unhide {margin-left: -30px; cursor: pointer;}*/
.unhide {cursor: pointer; border-bottom:1px dashed grey; padding-bottom:3px;}
.syspage .fa-circle-arrow-right {color:DarkBlue;}
.syspage .fa-circle-check {color:DarkGreen;}
.syspage .fa-circle-xmark {color:DarkRed;}
/*.save { width:52px;height:52px;text-align:left;padding-left:11px; border-radius: 10% 25%; border:0px !important; outline: none !important;}*/
.save { width:52px;height:52px;text-align:left; border-radius: 10% 25%;margin-top:2px;}
.savestate {margin-left:14px;margin-top:15px;}
.smallsave {text-align:left;margin-top:3px;}
.largesave {padding:15px;}
.smallstate {margin-top:8px !important;}
.shaded {text-shadow: -1px 0 Black, 0 1px Black, 0px 0 Black, 0 0px Black;}
.lighted {text-shadow: -1px 0 Silver, 0 1px Silver, 0px 0 Silver, 0 0px Silver;}
.card {width:48%;}
.card img {width:100%; margin:0;}
.card img:hover {opacity:1;}

.namespan {display: inline-block;} /* min-width:20%;*/
#relationfields {line-height:1.8;}
#customfields {line-height:2.5;}
.highline {line-height:2.2;}
.superline {line-height:2.5;}

.collapsed { color: FireBrick; }
.history {line-height:2.1;margin:-16px 0 16px 10px; letter-spacing:0;}
.infotitle {border-bottom:2px solid grey;}
.infotext {line-height:1.9;}

ul {margin-top:5px; margin-bottom:5px;}

.sceneselect .alumni {font-size:27px !important;}
.sceneselect .tree {padding-left:7%;}
.sceneselect button {font-size:larger;}
.syspage ul {list-style-type: none; padding-left: 0;}

#menu a {color: ForestGreen;}
#menu a:hover, #menu .current {color: MediumSeaGreen;}

/*Links*/
.inlink {color: Indigo; font-family: 'Alumni Sans', sans-serif; text-decoration: none; font-size:24px; font-weight: normal; line-height:1; white-space:nowrap;}
.innum {font-family: 'Glory', Sans-Serif !important; text-decoration:none !important;}
.up {margin-top: -10px;}
.inlink i {margin-right:3px;}
.inlink:hover, .inlink .current {color: BlueViolet; text-decoration: underline;}
.link {background: none!important; border: none; padding: 0!important; font-family: arial, sans-serif; color: #069; text-decoration: underline; cursor: pointer;} /*?????*/
.tablink {color: FireBrick; font-family: 'Alumni Sans', sans-serif; font-weight: normal; white-space:nowrap;}
.tablink .titledot {visibility:hidden;}
.black .titledot {visibility:visible;}
.tablink:hover .titledot {visibility:visible;}
.tablink:hover ~ .tablink .titledot {display:none;} /*Doesn't work*/

.current {text-decoration: underline;}

/*Icons*/
.slicon {font-size: 18px !important;} /*fa-regular {color:Black;*/
.token {margin-top:-10px;margin-left:-10px;margin-bottom:-5px; margin-right:-7px; font-size: 16px;}
.smallicon {font-size:12px !important;}
.tokenicon {margin:-2px 0 0 -4px;}
.tokenbase {color:#111;font-size:36px !important;margin-left:3px;text-shadow: 0.5px 0 0 #888;}
.tokennum {color:firebrick;font-size:20px;margin:10px 0 0 -11px; text-shadow: 0.5px 0 0 currentColor, 1.5px 1px 1px #FFF, -1px -1px 1px #FFF;} /*darkgreen*/
button:disabled .tokenbase {color:grey;}
button:disabled .tokennum {color:rgb(178,34,34,0.6);}
input:disabled {color:rgb(72,61,139,0.8);}

.tab {border-right: 2px solid !important; border-top: 2px solid !important; border-radius: 30% 30% 0 10%; border-color:grey !important; padding: 5px 15px !important; margin-right:2px;}	
.linebox {}
.rows1 {height:30px;}
.rows2 {height:60px;}
.rows3 {height:90px;}
.rows5 {height:150px;}
.rows6 {height:180px;}
.rows7 {height:210px;}
.rows8 {height:240px;}

/*overlays*/
#dark {position:absolute; top:0; left:0; width:100%;height:100%; z-index:80; background:rgba(125,120,120,0.5);}	
#dark {background: repeating-linear-gradient(-60deg,rgba(200,200,200,0.7) 0px,rgba(200,200,200,0.7) 20px,rgba(190,190,190,0.7) 20px,rgba(190,190,190,0.7) 40px );}	
#error {position:absolute; width:340px;height:100px;z-index:100; margin:auto; top: 50%; left: 50%; margin-top: -65px; margin-left: -170px; background:rgba(255,230,230,0.5); border: 4px dashed darkred; box-shadow: -5px 5px 8px #999;}
#alert {width:100%; height:100%; padding: 7px 10px; background:rgba(100,100,100,0.8); font-size:19px; line-height:1.6; color:#eee; letter-spacing: 0px;}
#alert a {cursor: pointer; border-radius: 15% 30%; border: 0px; box-shadow: 3px 2px 2px #bbb; background-color: buttonface; padding: 1px 6px; display: inline-block; text-decoration: none !important;} /*buttonlook*/
#missive {position:absolute; top:0; left:0; width:100%;height:100%;z-index:99; text-align: center; color: #FDE969; font-family: Gothenburg Fraktur; justify-content: center; align-items: center; justify-content: center;  align-items: center;    flex-direction: column;} /*Gold*/
#mistext {font-size:75px;}
#missub {font-size:25px;}
#positive {background-image: linear-gradient(rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0.7) 45%, rgba(0,0,0,0.7) 55%, rgba(0,0,0,0.8) 70%, rgba(0,0,0,0.9) 100%); }
#missive {background-image: linear-gradient(rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.7) 30%, rgba(0,0,0,0.8) 45%, rgba(0,0,0,0.8) 55%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0.6) 100%); }
.glow {-webkit-animation: glow 3s ease-in-out infinite alternate; -moz-animation: glow 3s ease-in-out infinite alternate; animation: glow 3s ease-in-out infinite alternate;}
@-webkit-keyframes glow { from { text-shadow: 0 0 10px OrangeRed, 0 0 15px DarkRed; } to { text-shadow: 0 0 15px OrangeRed, 0 0 40px DarkRed;} }
.helper {position:absolute; top:0; left:0; width:100%;height:100%;z-index:98;}
.helped {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -55%); border: 2px solid grey; padding: 20px; min-width:30%; min-height:30%; max-width:80%; max-height:80%; overflow:auto; background:#F8F8F8;} 
.helped a {pointer-events: none; cursor: default;}
.helper {background-image: linear-gradient(rgba(200,200,200,0.9) 0%, rgba(200,200,200,0.8) 30%, rgba(200,200,200,0.7) 45%, rgba(200,200,200,0.7) 55%, rgba(200,200,200,0.8) 70%, rgba(200,200,200,0.9) 100%); }
.helped button:not([.postform]) {width:80%; margin:20px 0; }
.helped {text-align:center;}
.spread {box-shadow: 0px 0px 20px 10px #AAA;}
#spinner {position:absolute; top:0; left:0; width:100%; height:100%; z-index: 80; background: rgba(255,240,240,0.2);}
#spinimg {position:absolute; width:10%; top:50%; left:50%; margin-top:-5%; margin-left:-5%;}



.smalltext{	font-family: 'Glory', Sans-Serif; padding-top: 5px;	font-size: 20px; color:black;}
.gradient {height:100%; width: 20%; position: absolute; right:0; top:0; background: linear-gradient(to right, rgba(239, 239, 239, 0), rgba(239, 239, 239, 1));}
.list1 button:hover .gradient {background: linear-gradient(to right, rgba(244, 244, 244, 0), rgba(244, 244, 244, 1));}

@media screen and (orientation: landscape) {
	.lands { display: inline-block; } 
	.lands2 { display: initial; } /*Does weird things sometimes*/
	.lands3 { display: flex; } /*Does weird things sometimes*/	
	.ports { display: none; }
	/*.topic .column {margin-left: 83; border-left: 1px solid silver;}
	.topic .column .depiction {margin-left: -84px;}*/
}
    
/*@media screen and (orientation: portrait) {*/
@media screen and (max-device-aspect-ratio: 1/1), (max-aspect-ratio: 1/1) {
    /*because phone keyboard chages aspect ratio*/
	h2, h3, h4 {font-size:4vw; border-width:3px; line-height: 5.3vw;} 
	.phonenr {font-size:4vw;}
	#home {width:90%;}
	.ports { display: initial; } /*inline-block*/
	.lands, .lands2, .lands3 { display: none; }
	body {}
	#menu {clear:both; position:absolute; bottom:0; width:100%; height:17vw; background-image: url("/img/system/background8s.png"); background-position: center top; background-size: 140vw; z-index:98;}
	#page {clear:both; width:100%;}
	header {width:100%;}
	h1 {font-size: 10vw; letter-spacing: 0.4vw; margin-top:4vw;}
	.bigletter {font-size: 9.75vw;}
	.navbutton {font-size: 6.7vw !important; margin-left:0.4vw; margin-top:0.3vw;}
	#submenu {min-width:25vw; right:1.5vw; top:8.9vw;}
	#headerline {height:1%; margin-bottom:1%; width:98%; background-color: grey; border-top: 0.4vh solid #F8F8F8; border-bottom: 0.4vh solid #F8F8F8; border-radius:40px;  margin-left:0.5%;}	
	main { padding-top: 1vw; width:100%;}
	.glyph {font-size: 5vw; margin-left: 0;}
	#glyphs {width:100%; height:66%; position:absolute; bottom:0px; border:0px solid; text-align:center; display: flex; flex-direction: row; justify-content: space-evenly;}
	/*.glyphimg {width:7.6vw; height:7.6vw; margin-left:0; background-color: rgba(255,255,255,0.15); border-radius: 15%; box-shadow: 0px 0px 5px 0.8vw rgb(255 255 255 / 15%);}*/
	.glyphimg {width:8.44vw; height:8.44vw; margin-left:0; background-color: rgba(0,0,0,0.1); border-radius: 18%; box-shadow: 0px 0px 5px 0.75vw rgb(0 0 0 / 10%);}
	/*#inspire { position:absolute; width:auto; max-width:60%; z-index: 100; left:40%; transform:translateX(-50%); text-shadow: 0px 0px 5px White, 3px 0px 2px White, -3px 0px 2px White, 0px -3px 2px White, 0px 3px 2px White, 2px 2px 2px White, -2px 2px 2px White, 2px -2px 2px White,-2px -2px 2px White, 5px 0px 5px White, -5px 0px 5px White, 0px -5px 5px White, 0px 5px 5px White, 4px 4px 6px White, -4px 4px 6px White, 4px -4px 6px White,-4px -4px 6px White; background-color: rgba(255,255,255,0.4); box-shadow: 0 0 2px 1px rgba(255,255,255,0.4); padding:0px 10px; font-size:1.5em !important;}*/
	#mistext { font-size: 10vw;}
	#missub {font-size:3.3vw;}
	#inspire { position:absolute; width:auto; max-width:70%; z-index: 98; left:50%; transform:translateX(-70%); background-color: rgba(250,248,248,0.9); box-shadow: 0 0 15px 15px rgba(250,248,248,0.9); padding:8px 16px; font-size:2.5vw !important; border-radius:20%; white-space: nowrap;}
	.sysbar {width:100%;}
	.syspage {width:100%;}
	section, .section {clear:both; display:block; width:100%;}
	aside {width:100%; padding-left:0px;}
	aside div {display:inline-block; width:100%;}
	/*hier een oplossing voor maar halfbrede divs in een aside*/
	/*main, #helped { font-size: 3vw;}*/
	body { font-size: 3vw;}
	.slicon { font-size: 3vw !important; }
	.baricon { width: 6vw; }
	h2 {font-size:8vw; line-height: 5.3vw; margin-bottom:0.83vw;}
	h4 {font-size:4vw; line-height: 5.3vw;}
	h5 {font-size: 3vw;}
	h6 {font-size: 3.33vw;}
	.backed {padding:1.3vw; border-radius:0.5vw; margin-bottom:2vw;}
	#pagetitle {letter-spacing:-0.5;}
	#pagetitle button {min-width:20vw; padding: 5px 15px; font-size: 3.8vw; margin:0 0.8vw 1.5vw 1.5vw !important; text-align:left;}
	.redbutton {font-size: 3.8vw; margin-left: 3vw !important; }
	.alumni {font-size: 4vw;}

	.helped {width:80%;} 

	.postform input, .postform select, .postform button, .classlabel {height: 5vw;}
	.postform button {min-width: 5.6vw; /*padding: 0 1.3vw;*/}
	.rows1 {height:5vw;}
	.rows2 {height:10vw;}
	.rows3 {height:15vw;}
	.rows4 {height:20vw;}
	.rows5 {height:25vw;}
	.rows6 {height:30vw;}	
	.rows7 {height:35vw;}	
	.rows8 {height:40vw;}	
	.reply {padding-top:2.5vw;}
	.reply button, .reply textarea {height:5.83vw;}
	.replyform { margin: 1.16vw 1.66vw 1.5vw 1.16vw !important;}
	.topic .depiction {width:20vw !important; height:40vw !important;}
	.brief .depiction, .write .depiction {width:20vw; height:20vw;}
	.portmini .depiction { width:15vw; height:15vw; }
	.instant .depiction { width:15vw; height:15vw; }
	.comment .depiction {width:11.66vw !important; min-width:11.66vw !important; height:11.66vw; margin-top: 0.33px;}
	.reply .depiction {width:8.33vw !important; min-width:8.33vw !important; height:8.33vw !important; margin-top: -0.33px;}
	.list .depiction {width:6.8vw !important; min-width:6.8vw !important; height:6.8vw !important; border-right:3px solid silver;}
	.list button { font-size: 4vw; }
	.pad10 {margin: 1.7vw 1vw 1.1vw;}
	.top5 {margin-top: 1.2vw !important;}
	.top4 {margin-top: 0.9vw !important;}	
	.top10 {margin-top: 1.7vw !important;}


	.ripostes {margin: 0 0 0 2.5vw; padding: 0 0 0 2.5vw; border-right: 0;} /* margin-bottom: -10px;*/
	.topic .contentbox { padding-left: 1.6vw; }
	/*.topic .contentbox { padding-left: 10px;}	*/
	.topic .reactbox {border-bottom: 1px solid silver;  border-radius: 0 0 0 10px; padding-left: 1.6vw;}
	.topic .replyuser {margin-left:-12.5vw; padding-left:12vw;}
	.topictitle {font-size:3.33vw;}
	.topicbutton {padding:5px; border-bottom-right-radius: 16vw;}
	.topicbutton img {width:10vw; height:10vw; margin-right:1.66vw;}
	.contribbutton {padding:5px; border-top-left-radius: 16vw;}
	.contribbutton img {width:10vw; height:10vw; margin-left:1.66vw;}

	.classyfont {font-size: 3.66vw; letter-spacing:0.33vw;}
	.gothicfont {font-size: 3.33vw; letter-spacing:0.41vw;}
	.horrorfont {font-size: 3.33vw; letter-spacing:0.16vw;}
	.cyberfont {font-size: 3.16vw; letter-spacing:0.125vw;}
	.grungefont {font-size: 3.33vw; letter-spacing:0.083vw;}
	.paganfont {font-size: 3vw; letter-spacing:-0.041vw;}
	.systemfont {font-size: 3vw;}
	/*px->vw = /6
	/*em->vw = *2.5
	/*rem->vw = */
	.markupt { margin-top: -0.33vw;}
	.markupsign { margin-left: 1.5vw; margin-top: 0.16vw;}	

	.navtab {height: 8.33vw; margin-bottom: 0.5vw; padding: 1vw 3vw; font-size: 3.5vw; border-right: 0.5vw solid #CCC !important; border-left: 0.5vw solid #CCC !important; box-shadow: -0.5vw 0.5vw 0.5vw #555;}
	.navtab .slicon { font-size: 3.5vw !important;}

	/*.inlink {font-size:3.2vw;}*/
	.inlink {font-size:4vw;}
	.inboxbutton {height: 6.8vw; margin-bottom:1.2vw; padding:1vw 2vw; font-size:3.2vw;}	
	/*#boxcontacts {width: 100%; overflow: initial;}*/
	#boxcontacts {width: 100%; box-shadow: 0px 0px 0px 17px #f8f8f8;}
	.maxheight {height:99%; margin-bottom:1%;}
	.maxheight2 {height:100%; border-bottom:13vw solid #f8f8f8;}
	.maxheight3 {height:calc(100% - 10vw);} /*minus menu*/
	.alldown {min-height:99%; margin-bottom:1%;}
	.instant .tablepop { bottom: 20.2vw;}
	.comment .tablepop {bottom:15.15vw;}
	.reply .tablepop {bottom:5.95vw; left:-2.5vw;}
	.emojipop {font-size: 3vw;}
	.emojirow {height:5.0vw;}
	.emojicol {width:5.6vw; text-align:center;}

	#portrait, .portmini {font-size: 2.2vw;}
	#portrait i {font-size: 2.8vw;}
	.outlink {font-size: 3vw;}
	.hlower { font-size: 3vw; padding-top: 0.83vw; }
	.instant .rows3 {height:10vw;}
	.circle {width:100%;}

	.react {width:11.66vw; height:11.66vw; font-size:5vw;}
	.comment .react {width: 9.16vw; height: 9.16vw; margin-top: 0.66vw; margin-left: 1.166vw; font-size: 4vw;}
	.comments {margin-left:4vw; padding-top:2vw;}
	.replies {margin-left:0; margin-top:4vw;}
	.reply .react {width: 6.66vw; height: 6.66vw; margin-top: 0.16vw; margin-left: 0.83vw; font-size: 3vw;}
	#helped .react {width:21.3vw; height:21.3vw;}

	.mediabox img { max-height: none; }
	.comment .mediabox img { max-height:60vw;}	
	.instagram { height:64vw !important; width:59.8vw !important; }

	.notebox { margin-top: 2vw; font-size: 5vw; padding: 9vw;}

	.sizeXXL { font-size: 7vw; padding-bottom:12vw;}
	.sizeXL { font-size: 6vw; padding-bottom:11vw;}
	.sizeL { font-size: 5vw; padding-bottom:10vw;}
	.sizeM { font-size: 4vw; padding-bottom:9vw;}
	.sizeS { font-size: 3.2vw; padding-bottom:8vw;}
	.sizeXS { font-size: 2.6vw; padding-bottom:7vw;}
	.sizeXXS { font-size: 2vw; padding-bottom:6vw;}	

	.stam .inlink, .branch .inlink, .leaf { font-size: 4.5vw !important; }
	.branch { font-size: 3.83vw; padding:0 1vw;}

	.sysbar { margin-bottom: 0.7vw;	}
	.syspage { font-size: 2vw;}
	.systitle { height: 8.33vw;  padding-left: 4vw;}
	.systab { height: 8.33vw; margin-left: 0.7vw; padding: 0.83vw 0vw; font-size: 3.33vw; }	
	.halftab { width: 8.33vw !important; min-width: 8.33vw !important;}
	.infoline {font-size: 2vw; margin: 0.5vw 0 1.16vw; max-width:85%;}
	.syspage input, .syspage select, .syspage textarea { font-size: 3vw; max-width:85%;}
	.save { width: 8.66vw; height: 8.66vw; text-align:center;}
	.manabutton { width: 8.66vw; height: 5vw;  margin-bottom: 1.66vw;}
	.largesave { padding: 2.5vw; }
	.fa-stack {height: 5.5vw !important; line-height: 5.5vw !important; width: 5.5vw !important; }	
	.fa-stack-2x { font-size: 5.5vw !important; }
	.tokennum {font-size: 3.33vw; margin: 1.66vw 0 0 -1.83vw;}
	.tokennav {margin-top: -4.3vw !important; margin-right: 1.75vw !important; }
	.savestate { margin-left: 2.33vw; margin-top: 2.7vw; font-size:larger;}
	.smallstate { margin-top: 1.33vw !important; }
	.smallsave {text-align:left;margin-top:0.83vw;}
	.largesave {padding:2.5vw;}
	.smallstate {margin-top:1.33vw !important;}	
	.smallsave .fa-stack {height: 3.4vw !important; line-height: normal !important; width: 5.5vw !important; }
	input[type=checkbox], input[type=radio] { transform: scale(2);  -webkit-transform: scale(2); margin: 0vw 1vw;}	
	/*main a img { border: 0.33vw solid #AA7676 !important;}   why??*/ 
	main a .byellow { border: 0.33vw solid darkgoldenrod !important;}

	.brief #mapwrap, .forgebox #mapwrap {height:60vw;}
	.citypicture {width: 30vw;}
	.citybutton {height:5vw; width:12vw;}
	.zoombutton {width:16.5vw; height:7vw;}
	#zoomin {left:16.4vw;}
	/*Next are patches... for some reason aspect ratio is ignored here*/
	.worldmap {width: 1099.79vw; height:540vw;} /*based on 3230px*/
	.citymap, .manamap {width: 7739.28vw; height:3800vw;} /*based on 22784px*/
	.pinmap {width: 6517.29vw; height:3200vw;} /*based on 18880px*/

	.brief #mapwrap {height:60vw;}
	#revelation #mapwrap {height:40vw;}
	.forgebox #mapwrap {height:66.66vw;}
	
	.beaconbutton { width: 45vw; font-size: 5vw;}
	.progressbar {margin-left:0.83vw;}
	.progressval {padding: 0 1.66vw; font-size:2.33vw;border-radius:0.5vw;}	

	.legicon { width: 8.33vw !important; height:8.33vw !important; padding-top:4.16vw; margin:0 0.83vw; font-size: 5vw !important;}
	.legicon .fa-circle {font-size: 5vw;}
	.legicon .fa-skull {font-size: 2.5vw;}
	.legitoken {padding-top: 1vw;} /*this is all patchwork */

	.instantbg {background-size:120%; background-position: -12vw -8vh;}
	#boxconvo {background-size:120%; background-position: -12vw -15vh;}
	#ibeempty {border-bottom:7vw solid #f8f8f8;}

	.list1 button {height:10.83vw;}
	.list2 button {height:9.66vw;}
	.list1 .depiction {height:10.83vw !important;}
	.list2 .depiction {height:9.66vw !important;}
	.list1 .leftbutton {width:72%; float:left;}
	.guildbutton {height:7.5vw !important;}


	.zeromargin {margin:0px !important;}

	/*footer {height:12vw;display:block;}*/

	/*workaroud because browsers mess up aspect ratio when things get big*/
	/*.citymap {width: 38452px; height:18880px;}*/
	/*.citymap {width: 6517.29vw; height:3200vw;}*/
	/*13391 / 6575*/

	/*main > :last-child, .bottombox { border-bottom: 11vw solid #F8F8F8;}*/
/*
	main:after {
	  content: "";
	  display: block;
	  height: 200px;
	  width: 100%;
	}*/

}

.fa-link {margin: 0 -2px;} /*.postbuttons*/
.fa-image-polaroid {margin: 0 1px;}

input[type=file]::file-selector-button {
  width:0;
  height:30px;
  background-color: #a29bfe;
  transition: 1s;
  visibility:hidden;
  margin-left:-10px;
}

.icoplus {font-size:20px !important;}

/*display*/
.hidden {display:none;}
.invisible {visibility:hidden;}
.inline {display:inline;}
.inblock {display:inline-block !important;}
.block {display:block;}
.scroll {overflow:auto;}
.force {overflow:scroll;overflow-x: hidden;} /*used?*/
.overhide {overflow: hidden;}
.relative {position: relative;}