/* ---- GENERAL STYLES - TAGS ----- */
* {padding:0; margin:0;}
body {font:14px Verdana, Arial, sans-serif; background-color:#FFFFFF; color:#083060;}

h1, h2, h3, h4, h5, h6 {color:#1050A0; font-weight:bold;}
h1 {font-size:24px; margin:14px 0;}
h2 {font-size:20px; margin:12px 0;}
h3 {font-size:18px; margin:10px 0;}
h4 {font-size:16px; margin:8px 0;}
h5 {font-size:14px; margin:12px 0 4px 0;}
h6 {font-size:12px; margin:4px 0 2px 0;}

pre {display:inline;}
a {text-decoration:none;} /* no underline */
a:link    {color:#2090FF;} /* unvisited link */
a:visited {color:#2090FF;}
a:hover   {color:#009999;}
a:active  {color:#FF0000;}
a, input, label, select {cursor:pointer;}
p {text-align:justify;}
b {color:#1050A0; font-weight:bold;}
textarea {resize:vertical;}
input[type='text'], input[type='password'], textarea {font-family:inherit; font-size:1.0em; padding:0 2px; color:#304060; background:#FFFFFF; border:1px solid #666; border-radius:4px; cursor:text;}
input[type='text'], input[type='password'] {height:20px; margin:2px 0;}
select {padding:0 2px; font-size:1.0em; height:24px; color:#304060; background:#FFFFFF; border:1px solid #666; border-radius:4px;}
select option {padding:0 2px;}
button {font-size:1.0em; height:22px; padding:0px 4px; color:#FFFFFF; background:#336699; border:1px solid #666; border-radius:4px; cursor:pointer;}
fieldset {margin:0 auto 10px; padding:16px; background:#FFFFFF; border:1px solid #888; border-radius:5px;}
legend {font-weight:bold; padding:0 5px; color:#1050A0; background:#FFFFFF;}
li {margin-left:14px;}

/* ---- GENERAL STYLES - CLASSES ----- */
.floatR {float:right;}
.floatL {float:left;}
.floatC {display:block; margin:auto;}
.alignR {text-align:right;}
.alignL {text-align:left;}
.alignC {text-align:center;}
.alignM {vertical-align:middle;}
.indent {margin:10px 10% 20px 10%;}
.clear {clear:both;}
.press {cursor:pointer;}
.arrow {cursor:default;}
.hide {display:none;}
.bold {font-weight:bold;}
.red {color:#F02020;}
.note {margin:auto; width:400px; text-align:center; color:#2B3856; background:#F0D040;}
.error {color:#B70707;}

/* ---- PAGE BANNER ----- */
#banner {padding:12px 0; position:fixed; top:0px; left:0; right:0; background-color:#012050; background-image:linear-gradient(#012050,#044080); text-align:center; cursor:default; z-index:10;}
#logoImg {height:6vw; vertical-align:middle; cursor:pointer; transition:0.4s;}
#logoTxt {font:italic calc(14px + 3.0vw) calibri,sans-serif; color:#FFFFFF; margin-left:0.6em; vertical-align:middle; transition:0.4s;}

/* ---- PAGE FOOTER --- */
#footer {position:fixed; bottom:0; width:100%; line-height:24px; text-align:center;	color:#FFFFFF; background:#044080; z-index:10;}
span.fullscreen {position:fixed; top:0px; right:10px; color:#F02030; font-size:2em; cursor:pointer; z-index:1000;}

/* ---- NAVIGATION --- */
#nav {margin-top:calc(6vw + 30px); padding:0 4%;}
#nav * {z-index:100;}
#menu, #menu * {list-style:none; margin:0; padding:0;}
#menu a {display:block; color:inherit; text-decoration:none; padding:0.5rem;}
#menu li {display:block; color:#606060; background:#FFFFFF; font:18px Arial; white-space:nowrap; border-radius:5px;}
#menu li ul {position:absolute; display:none;}
#menu li:hover, #menu li.active {color:#FFFFFF; background:#044080; transition:all 0.5s ease;}
#menu li:hover > ul, #menu li ul:hover {display:block; border:1px solid #B0B0F0;}
@media screen and (min-width:761px) { /* horizontal */
	#menu > li {float:left; margin:0 2px;}
}
#nav span.cmButton {font-size:2em; float:right; cursor:pointer; display:none;}
@media screen and (max-width:760px) { /* vertical */
	#menu {display:none; width:40vw;}
	#menu li ul {left:100px; width:40vw;}
	#menu li ul li {background:#E0E0E0;}
	#nav span.cmButton {display:inline-block;}
}

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

#pageBody {position:relative; background:#F0F0F0; padding:4px 4% 20px; max-width:1100px; margin:20px auto 50px;}
p.title {font:bold calc(12px + 1.6vw) arial; color:#336699; text-shadow:12px 5px 0 #C0C0C0; margin:8px 0;}

.blink {animation: blinker 3s linear infinite;}
@keyframes blinker {50%{opacity:0.2;}}

/* ---- HOME --- */
img.webcal {position:absolute; width:20vw; top:20vh; right:1vw;}
img.wide {margin-left:calc(20vw - 62px);}
img.inline {vertical-align:middle;}
@media screen and (max-width:761px) { /* horizontal */
	img.webcal {display:none;}
}
form#donate {position:absolute; right:20px; top:20px;}
ul.mclist li{display:block; width:15vw; float:left;}
div#iBox {
	position:fixed; top:40%; left:50%;
	transform:translate(-50%, -50%);
	opacity:0; transition: opacity 3s;
	color:#083060; background:#F8F8F8;
	font-size:1.1em;
	padding:40px 40px 10px 40px;
	max-width:80%;
	border:1px solid #F04040; border-radius:5px; box-shadow:5px 5px 5px #888;
	cursor:pointer;
	z-index:10;
}

/* ---- DEMO PAGES ----- */
.boxDemo {height:100px; width:260px; padding:8px; margin:10px; background:#FFD; border:1px solid #666; border-radius:15px;}
.arrowTD {margin:10px 15px 15px 0;}
.embed {margin:1vw 2vw 10px 0; border:1px solid grey; border-radius:5px; box-shadow:5px 5px 5px #888;}
iframe#lcIframe {width:100%; height:700px;}
div.display {margin-top:20px;}
iframe.display0 {width:300px; height:233px; overflow:hidden;}
iframe.display1 {width:45%; height:550px; overflow:hidden;}
iframe.display2 {width:45%; height:550px; overflow:hidden;}
iframe.display3 {width:29%; height:550px; overflow:hidden;}
iframe.display4 {width:45%; height:550px; overflow:hidden;}
ul.links {color:#A04060; font-weight:bold;}

/* ---- FORUM ----- */
iframe.forum {width:100%; height:65vh; padding:10px 0; border:1px solid grey; border-radius:5px; box-shadow:5px 5px 5px #888;}

/* ---- DOWNLOAD --- */
.hiliteX {font:bold 1.2em arial black, sans-serif; color:#871727;}
.hiliteM {font:1em arial black, sans-serif; color:#871727;}
.hiliteS {font:1em arial, sans-serif; color:#871727; margin-top:-8px;}
.boxDload {height:90px; width:260px; padding:8px; margin:10px; background:#FFD; border:1px solid #666; border-radius:15px;}
table.verHis {border-collapse:collapse; cursor:default;}
table.verHis th {padding:4px; color:#FFFFFF; background:#044080; border:1px solid #AAA;}
table.verHis td {padding:4px; border:1px solid #AAA;}
table.verHis td:nth-of-type(1) {width:145px; text-align:center;}
table.verHis td:nth-of-type(3) {width:100px; text-align:center;}

/* ---- CONTACT --- */
img.belgium {width:calc(200px + 8vw); margin:0 1vw 0 3vw;}
fieldset.contact {position:relative; width:80vw; max-width:600px;}
img.mail {position:absolute; top:50px; right:30px;}
span.msgCol1 {display:inline-block; width:9em;}
div.n-o-s-p-a-m {display:none;}
textarea.message {width:98%;}
div.confirm {display:flex;}
div.confirm > div:nth-child(1) {font-weight:bold; padding:6px;}
div.confirm > div:nth-child(2) {flex-grow:1; padding:6px;}

/* ---- FREE GAMES ----- */
div.dlText {clear:both; margin:20px 0;}
a.gameTile {float:left; margin:5px 40px 5px 0px;}

/* ---- FREE APPLETS ----- */
div.flex {display:flex;}
div.flex > div {flex-grow:1; text-align:center;}
button.app {height:32px; width:4.0em; font-size:1.6em; line-height:22px;}
iframe#appFrame {width:100%; height:50vh; padding:10px 0; border:1px solid grey; background:#FFEFD5; border-radius:5px; box-shadow:5px 5px 5px #888;}