/* Simple style sheet for displaying on handheld devices */



:root {
	
	--gradient: linear-gradient(90deg, rgb(53 53 57) 0%, rgba(141, 127, 172, 1) 35%, rgba(233, 239, 240, 1) 100%);

	--style_text_colour: #222522;

	--cwcol_15: rgb(223, 232, 243);
	--cwcol_14: rgb(187, 203, 223);
	--cwcol_13: rgb(80 80 80 / 44%);
	--cwcol_12: rgb(137, 168, 146);
	--cwcol_11: rgb(132, 142, 155);
	--cwcol_10: rgb(128, 142, 158);
	--cwcol_9: rgb(90, 105, 122);
	--cwcol_8: rgb(150, 121, 150);
	--cwcol_7: rgb(102, 115, 131);
	--cwcol_6: rgb(101, 114, 131);
	--cwcol_5: rgb(65, 74, 85);
	--cwcol_4: rgb(67, 95, 130);
	--cwcol_3: rgb(53, 63, 75);
	--cwcol_2: rgb(55, 59, 63);
	--cwcol_1: rgb(62, 64, 66);
	--cwcol_0: hsl(240, 5%, 13%);
	--cwcol_shad0: rgba(22, 52, 68, 0.1);
	--background_color:#7a8185;
	--defaultboxshadow: 2px 2px 5px 1px rgb(25 30 32 / 51%);
}


@media only screen and (min-width: 600px) {
  body {
    font-size:2vh;
  }

  .maincontentcontainer
	{
		width:100%;
		max-width:95%;
	}

	.maincontentcontainer p 
	{
		padding-left:1rem;
		padding-right:1rem;
	}
}

	

@media only screen and (max-width: 600px) {
  body {
    font-size: 1.7vh;	
  }

  .maincontentcontainer
	{
		width:100%;
		max-width:35%;
	}

	.maincontentcontainer p 
	{
		padding-left:1rem;
		padding-right:1rem;
	}
	


}

#version
{
	width:fit-content;
	height:fit-content;
	background: #0d72ca;
	position:absolute;
	/* left:30%; */
	bottom: 0px;
	font-size:2vh;
	padding-left:0.8vh;
	padding-right:0.8vh;
	left: 0;
	z-index: 20;
}

.buttonrow
{
	margin-left:auto;
	margin-right:auto;
	width: fit-content;
}

.formWrapper
{
	width:50%;
	border:1px solid;
	border-radius:1vh;
	padding:1vh;
	margin-left: auto;
	margin-right: auto;
}

.formWrapper input
{
	height:3vh;
	border-radius:0.5vh;
	border:2px solid black;
	margin-left:1vh;
	background:#ababab;
	color:black;
	
}

.formWrapper label
{	
display: contents;
}

.formWrapper label:after
{
	content:none;
}

.buttonbar
{
	display:block;
	margin-top:1vh;
}

.formWrapper .btn
{
	border:2px solid black;
	width:fit-content;
	padding:0.5rem;
	border-radius:0.5rem;
	background:#4b4a4a;
	box-shadow: 2px 2px 5px black;
	pointer-events:all;
	cursor:pointer;
	transition:0.1s ease;
	color:#cfdcde;
	display:inline-block
}

.listbox
{
	border: 2px solid;
	margin-top:2vh;
	min-height:10vh;
	border-radius:0.5vh;
	box-shadow: inset 1px 1px 5px #000000b0;
	border-right-color: #ffffff12;
	border-bottom-color: #ffffff12;
	background: #6d6d6d;
	padding: 1vh;
}

.formWrapper .btn:hover 
{
	transform:translate(3px, 3px);
	box-shadow: 0px 0px 2px black;
}

.inputblock
{
	border:1px solid black;
	margin:1vh;
	padding:1vh;
	border-radius:0.5vh;
	width:fit-content;
	margin-left:auto;
	margin-right:auto;
}

.kofilink
{
	
}


a {color: #39499f;transition: 0.4s;}

a:hover {
    color: #d2e3ef;
    text-shadow: 0px 0px 4px #a5bcd9;
    transition: 0.2s;
}

.eventcard
{
	border: 1px #6a96bdbd solid;
	margin:0.5rem;
	margin-bottom:1.0rem;
	box-shadow:2px 2px 5px 1px rgb(42 72 88 / 6%);
	border-radius: 0.5rem;
	overflow: hidden;
}

.eventcard h4
{
	margin: 0px;
	border-radius: 0px;
	overflow: hidden;
	z-index: 0!important;
	position: relative;
}

.eventrow
{
	padding: 0.4rem;
	background-color:#b7c2cc5c;
	margin: 0.4rem;
}

.gamebar ul 
{
	left: 0px;
	margin-block-start: 1rem;
	padding-inline-start: 0.8rem;
	margin-block-start: 0px;
	margin-top: 0px;
	padding-top: 0px;
}

.gamebar ul li 
{
	border: 2px solid rgb(45 48 50);
	display: inline-block;
	color: rgb(29 30 31);
	user-select: none;
	padding: 0.2rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-bottom: 0.4rem;
	font-size: 2.0rem;
	font-family: Agency2;
	vertical-align: top;
	transition: 0.2s;
	text-shadow: 4 4 var(--cwcol_14);
	cursor: pointer;
	border-radius: 1rem 1rem 1rem 1rem;
	box-shadow: 1px 1px 3px 3px #05041508;
	z-index: 0;
	background-size:cover;
	background-repeat: no-repeat;
	background-position-x: center;
	background-position-y: center;
}

#kofilink
{
	width: 4.5vh;
	color:rgb(247, 248, 238);
	height: 4vh;
	position:static;
	right:0rem;
	background-image:"";
	background:rgb(13, 114, 202);
	border-radius: 0.0vh 0.0vh 1.0vh 1.0vh;
	cursor:pointer;
	padding: 0.4vh;
	display: flex;
	overflow: hidden;
	transition: width 0.2s !important;
	font-family: "alef";
	user-select: none;
}

.kofiiconinrow
{
	width: 4.5vh!important;
	height: 4.5vh!important;

	vertical-align: super;
}

.kofiiconinrow img
{
	width:5.0vh;
	height:4.0vh;

}

.topbaranimation
{
	transition: transform 2.0s cubic-bezier(0.16, 0.01, 0.11, 1.01) !important;
	transition-property: transform;
}

.topbaroffscreen
{		
	transform: translate(0px, -5vh);
}

.kofilinkwide
{
	background-color:#7facda;
	transform:scale(1.02);
	width: 31vh!important;
}

#kofilink:hover
{
	background-color:#7facda;
	transform:scale(1.02);
	width:20rem;
}

#kofilink:hover .kofitext 
{
	text-shadow: 0px 0px 5px #ffffff;
}

.footer
{
	font-size: 15pt;
	margin-top: 2rem;
}

.inlinelogo
{
	height: 2.5vh;
	vertical-align: sub;
}

#kofilink:hover .kofiimg
{
	transform: rotate(-15deg);
	transform-origin:center;
	white-space: nowrap;
}

#kofilink span 
{
	margin: 0.3vh;
	margin-left: 0.5vh;
	display: inline;

	margin-top: auto;
	margin-bottom: auto;
	font-size: 2.5vh;
	overflow: hidden;
	position: relative;
	white-space: nowrap;
	width: fit-content;
}
#kofilink img 
{
	height: 90%;
	transition: 0.2s;
	transition-timing-function: cubic-bezier(0.25, -2.28, 0.58, 3.18);

	margin-top: auto;
	margin-bottom: auto;
}

.kofiimghelp
{
	height: 2.5vh;
	vertical-align: sub;
	transition: 0.2s;
	transition-timing-function: cubic-bezier(0.25, -2.28, 0.58, 3.18);
}

.kofiimghelp:hover 
{
	transform:rotate(-25deg);
}

#kofilink img:hover 
{

}

.gamebar ul li:hover {	
	color: var(--cwcol_15);
	text-shadow: 2px 2px 5px 2px var(--cwcol_15);
	scale:1.05;
}

.safeword
{
	background-image: url('../games/SafeWord/assets/safeword.png');
	
}

.Pilkapel
{
	background-image: url('../games/pilkapel/logo_256.png');
	
}

.Exominer
{
	background-image: url('../games/Exominer/img/newbulbshipshot.png');
	
}


.gamelink
{
	border:2px;
	width:7rem;
	height:7rem;

	border: 2px;
    width: 10rem;
    height: 10rem;
    border-color: var(--cwcol_14);
    border-width: 2px;
    border-radius: 3px;
    background-color: #b7c2cc5c;
	box-shadow: var(--defaultboxshadow);	
	text-align: center;
}

.gamebar
{
	width:100%;
	margin:0.5rem;
	align-content: center;
	display: flex;
	align-items: baseline;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
}

.gamelink p
{
	text-align:centre;
}


.eventfieldtitle
{
	font-size:11pt;
	font-style:italic;	
}

.eventcontentsrow
{
	padding:1rem;
}

a:visited {
	opacity:80%;
	color: #b4adad;
}

a:focus-visible {}

h1 {
	font-size: 5vh;
	display: block;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	padding-left: 1vh;
	text-align: center;
	text-shadow: 0px 0px 18px #d5d5d5;
	font-family: Agency2;
	font-weight: normal;
}

p {
	margin: 1vh;
	font-size: 2.0vh;
	color: #181717;
}


.logospan
{
	/* height: 6.0rem!important; */
	padding: 0.6rem;
	max-width: 20%!important;
}

.logospan img
{
	height: 100%;
	position: relative;
}

.eventimgspan
{
	margin: 1.5rem;
	margin-left:auto;
	margin-right:auto;
	display: grid;
	flex-direction: column;
	align-content: flex-end;
	justify-content: center;	
}

.eventimg
{
	width: 30rem;
	max-width: 95%;
}

.backplate
{
	width:100vw;
	height: 100%;
	background-color:#b9a5a533;
	position:absolute;
	z-index:-11;
	overflow: hidden;
	filter:contrast(100%),blur(100%);
}

.backplate img
{
	width:100%;
	filter: blur(3px);
	offset-anchor: unset;
}

.bodyp
{
	margin-bottom:1rem;
}

.backplatefader {
	width: 100vw;
	height: calc(100% + 0.4rem);
	/* background: linear-gradient(0deg, var(--background_color), rgb(255 255 255 / 0%) 85%, rgb(255 255 255 / 0%)); */
	position: absolute;
	top: 0px;
	z-index: 100;
	filter: blur(10px);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url(../img/fogshot.png);
}

.mobilemenubutton
{
	width: 3rem!important;
	height: 3rem!important;
	border: solid #475b6b 3px;
	border-radius:0.5rem;
	float: right;
	right:0px;
	vertical-align: middle;
	margin: 1rem!important;
	background: #bbcdddbf;
	cursor: pointer;
	pointer-events: all;
	transition:0.2s;
	font-size: 2.7rem;
	text-align: center;
}


.mobilemenubutton
{
	height:50%!important;
	
	
}

.mobilemenubutton:hover
{
	scale:1.1;
}


body {
	ext-align: justify;
	background: #32373a;	
	font-family: "Arial, Gill Sans MT", "Gill Sans", GillSans, Helvetica, sans-serif;
	padding: 2px;
	color: var(--cwcol_0);
	display: flow-root;
	padding: 0px;
	margin: 0px;
	overflow-x: hidden;
}	

.topbar {
	background: rgb(62 65 67);
	background-image: url("../img/topbar.svg");
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 0;
	display: inline-block;
	z-index: 100;
	box-shadow: var(--defaultboxshadow);
	width: calc(100vw);
	margin: 0px;
	padding: 0px;
	top: 0px;
	position: relative;
	overflow: hidden;
	height: 8vh;
}

.rightcontainer
{
	float:right;

	position: absolute!important;
	right: 0px;
}

.topbar span {
	height: 100%;
	display: inline-block;

	max-width: 50%;

	position: relative;
	overflow: visible;
	white-space: nowrap;
	padding: 0px;
	margin: 0px;

	margin-left: 0.3rem;

	z-index: 1000;

}

.titlecontainer
{

	max-width: 50%!important;
	overflow: hidden;
	position: relative!important;
}

.maintitle {
	font-family: 'Agency2';
	font-size: 3.5em;
	width: 100%!important;

	height: 100%!important;
	top: 1.3rem;
	left: 0rem;
	position: absolute!important;
}

.subtitle {
	font-family: 'Lobster';
	font-size: 1.2em;
	width: 100%!important;

	margin-top: 1rem;
	opacity: 80%;

	position: absolute!important;
	top: 0.5rem;
	left: -0.2em;
}

p {}

.nav
{
	margin-left: auto;
	margin-right: auto;
	width: fit-content;
	overflow: hidden;

	top: -4px;
	z-index: 10000;
	position: relative;
	display: block;
}

.nav ul {
	left: 0px;
	margin-block-start: 1rem;
	padding-inline-start: 0.8rem;
	margin-block-start: 0px;
	margin-top: 0px;
	padding-top: 0px;
	padding-left: 1vh;
	padding-right: 1vh;
}

.nav ul li {
	border: 2px solid rgb(45 48 50);
	display: inline-block;
	background: linear-gradient(0deg, rgb(75 83 93), rgb(75 78 82) 85%, rgb(44 51 60));
	color: rgb(165 190 209);
	user-select: none;
	padding: 0.2rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-bottom: 0.4rem;
	font-size: 4vh;
	font-family: Agency2;
	vertical-align: top;
	transition: 0.2s;
	text-shadow: 4 4 var(--cwcol_14);
	cursor: pointer;
	border-radius: 0px 0px 1rem 1rem;
	box-shadow: 1px 1px 3px 1px #05041508;
	z-index: 0;
	border-top: 0px;
	text-shadow: 0 0 12px #7098bb;
}

@media only screen and (max-width: 600px) {

	.hide_on_phone
	{
		visibility: hidden!important;
		display: none!important;
	}

	.show_on_phone
	{
		visibility: visible!important;
		z-index: 10000!important;
		pointer-events: all;
	}


	.nav
	{
		width: 100%;
		overflow: hidden;
		position:unset;
		height: fit-content;
	}
	.nav ul {
		left: 0px;
		margin-block-start: 1rem;
		padding-inline-start: 0.8rem;
		margin-block-start: 0px;
		position:absolute;
		width: 95%;
		z-index:2000;
		background: #1e1f23d1;
		padding: 1rem;
		padding-right: 1rem;
	}

	.nav ul li {
		border: 2px solid var(--cwcol_5);
		display: block;
		background: linear-gradient(0deg, var(--cwcol_10), var(--cwcol_10) 85%, var(--cwcol_10));
		color: var(--cwcol_1);
		padding: 0.2rem;
		padding-left: 1rem;
		padding-right: 1rem;
		padding-bottom: 0.4rem;
		font-size: 4.4vh;
		
		vertical-align: top;
		transition: 0.2s;
		text-shadow: 4 4 var(--cwcol_14);
		cursor: pointer;
		border-radius: 0.0			;
		box-shadow: 1px 1px 3px 1px #05041508;
		z-index: 0;
		border-top: 0px;
		text-align:center;
		margin-bottom:0.5rem;
		z-index:2000;
	}
}


.hide_on_phone {
	visibility: visible;
	display: block;
}
	
.show_on_phone {
	visibility: hidden;
}

.separator {
	height: 3px;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	background: var(--cwcol_1);
	border-radius: 2px;

}

h2
{
	background-color: rgb(114 117 120);
	padding:0.5rem;
	border-radius:0.3rem;
	text-align:center;
	box-shadow: 1px 1px 3px 1px #05041521;
	margin-top: 0px;
}

h3
{
	background-color:var(--cwcol_13);
	padding:0.5rem;
	margin-top: 0px;
	font-size: 3vh;
	border-radius:0.3rem;
	text-align: center;
}

h4
{
	background-color:var(--cwcol_13);
	padding:0.5rem;
	margin:0.1rem;
	border-radius:0.2rem;
}

.pdflink
{
	border-radius:0.2rem;
	width:5rem;
	height:5rem;
	display: inline-flex;
	margin:0.5rem;
	background: #595e6129;
	transition: 0.2s;
	align-content: center;
	text-shadow: 0px 0px 7px #000000;
	text-align: center;
	background-image:url("../img/pdf.svg");
	background-size: cover;
	background-blend-mode: soft-light;
	color: white;
	FONT-WEIGHT: 100;
	box-shadow: 0px 0px 8px 2px #00000061;
}

.pdflink:hover
{
	border-radius:0.25rem;
	transform:scale(1.1,1.1);
	transition: 0.3s;
}


.pdflink:after
{
	
}

.centreinner
{
	width:100%;
	height: 2rem;
	margin-top: auto;
	margin-bottom: auto;
	font-size: 20pt;
	background: #70879b61;
	padding: 2px;
	box-shadow:0px 0px 0px white;
	vertical-align: middle;
}

.linktable
{
	padding-left:1rem;
}

.topnavcontainer {
	display: flexbox;
	height: 15vh;
}

.note
{
	background:#dadabb;
	width:fit-content;
	padding:0.5rem;
	box-shadow: 0px 3px 3px 1px #0000004a;
	margin-left: 0.2rem;
	margin-bottom: 0.9rem;
}

.nav ul li:hover {
	background: linear-gradient(0deg, rgb(91 96 103), rgb(84 90 97) 85%, rgb(33 38 43)) !important;
	color: rgb(225 239 255);
	text-shadow: 0 0 12px rgb(124 186 255);
	transform: scale(1.1);
	z-index:1000!important;
}

.select {
	background: linear-gradient(0deg, rgb(91 96 103), rgb(84 90 97) 85%, rgb(33 38 43)) !important;
	color:  rgb(225 239 255)!important;
	text-shadow: 0 0 12px rgb(124 186 255) !important;	
	transition: 0.2s;
	transform: scale(1.1);
	z-index:999;
}

.date
{
	font-style:italic;
	font-size:10pt;
	vertical-align: middle;
	margin-top: auto;
	margin-bottom: auto;
	position: relative;
}

.bodyimg
{
	margin-left: auto;
	margin-right: auto;
	position:relative;
	width: 80%;
}

.bodyimg img
{
	width: 100%;
}

.addendum
{
	background:#c2cfd042;
	width:fit-content;
	padding: 0.2vh;
	margin-left: auto;
	margin-right: auto;
	font-size:10pt;
	font-style:italic;
	width:60%;
	position:relative;
}

.linkblock
{
	margin-bottom:1rem;
}

.maincolumncontainer
{
	display:flow-root;
	position:relative;
}

.maincontentcontainer {
	background: rgb(29 29 29 / 32%);
	color:var(--cwcol_0);
	border: 2px solid rgb(49 53 60 / 99%);
	border-radius: 0.5rem;
	height: 100%;
	width: calc(100vw - 3.0rem);
	/* min-height: calc(100vh - 18vh); */
	height: calc(100vh - 20vh);
	display: flex;
	flex-direction: column;
	padding: 0.5rem;
	margin: 0.5rem 0.5rem 0.5rem 0.5rem;
	max-width: 95%;
	width: 90rem;
	margin-left: auto;
	margin-right: auto;
}

.maincontentscrollcontainer  -webkit-scrollbar {
	  display: none;
	}

.maincontentscrollcontainer {
	overflow-y: auto;
	height: 100%;
	background-color: #69767d87;
	padding-top: 1vh;
	display: block;
	border-radius: 0.3vh;
}

#logo {
	
}


.menub {
	
}

.menuc {
	text-align: center;
	background-color: lightblue;
	line-height: 21px;
	margin: 0px 3px 0px 3px;
	padding: 3px 3px 6px 3px;
	width: 120px;
	height: 24px;
	border: 2px solid;
	border-radius: 6px;
	border-color: maroon;
}


.tac {
	text-align: center;
}

.tar {
	text-align: right;
}

.fll {
	float: left;
}

.cll {
	clear: left;
}

.tdp
{
	width:calc(100% - 0.5rem);	
}

.tdp tr
{
	padding:0.2rem;
}

.tdp tr th
{
	margin:0.2rem;
	padding:0.2rem;
	background:#6d8f9b73;
	text-align:center;
}

.tdp tr td
{
	background:#cad7dc82;
	border:0px;
	padding:0.2rem;
	font-weight: 100;
	font-size: 12pt;
	vertical-align:top;
		
}

.tdp tr td a
{
	
}

.tdp tr td .info
{
	font-style:italic;
	font-size:9pt;
	text-align:right;
}

.tdp tr td .info:after
{
	content: "\a";
	white-space:pre;		
}

.login
{
	float: right;
	position:relative;
	top:0px;
	background: rgb(223 226 227 / 86%);
	color:var(--cwcol_0);
	border: 2px solid rgb(37 65 100 / 31%);
	border-radius: 0.5rem;
	width: 3.0rem;
	display: flex;
	flex-direction: column;
	padding: 0.5rem;
	margin: 0.5rem 0.5rem 0.5rem 0.5rem;
	max-width: 15%;
	width: 50rem;
	margin-left: auto;
	margin-right: auto;
}

body
{
  font-family: 'alef', sans-serif;
  font-size: 12pt;
  background-color: #293237;
  color: #282a2a;
  border:0px;
  margin:0px;
  border:0px;
  padding:0px;
  /*overflow: hidden;*/
  color: #ffffff96;
  overflow: hidden;
}

#document
{
	text-align:center;
}


@keyframes slider 
{
  0% {
    left: 0%;
  }

  35% {
    left: 0%;
  }

  50% {
    left: -101%;
  }
  85% {
    left: -101%;
  }
  
  100% {
    left:0%;
  }
}


.slideanim
{
	left: 0%;	
	animation: slider 10s infinite;
}



.span_span
{
	width: 100vw;
	display: inline-block;
}

.subtitle
{
	font-size:1.5rem;
}

.pilkapel_splash_text
{
	position: absolute;
	font-size:5rem;
	bottom: 1rem;
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: fit-content;
	z-index: 1000;
	height: fit-content;
	width: 100%;
	overflow: visible;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
	font-family: monospace;
	text-shadow: 1px 1px 13px #374b58;
}

.titlelogo
{
	position: relative;
	width: auto;
	height: 10rem;
	margin-left: auto;
	margin-right: auto;
	top: 0rem;
	left: 0rem;
	display: block;
	z-index: 1000;
	filter:  brightness(1.2) drop-shadow(2px 4px 6px #000000) contrast(0.4);
	filter: blur(-1px);
}

.pilkapel-background
{
	background-color: #0e1c25;
}

.fullcontainer
{
	width:100%;
	height:100%;
	position:absolute;
	display: block;
	padding: 0px;
	overflow: auto;
}

.splashcontainer
{height: 100%;width: 1000%;position: absolute;top: 7.5rem;display: block;}

.splash
{
	margin: auto;
	position: relative;
	display: inline-block;
	width: 100%;
	vertical-align: middle;
	top: 0;
	white-space: nowrap;
	overflow: auto;
}


#expand_ue4 {
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;  
}


#expand_exo{
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;  
}


#expand_pil {
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;  
}


#expand_cwan {
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;  
}
section {
  padding: 0 20px;
}

label {
  display: block;
  padding: 0.5em;
  text-align: center;
}

/*
label::after {
	background-image:url(/img/ns_plus_circle.svg);	
	width:4vh;
	height:4vh; 
	background-size:contain;
	background-repeat:no-repeat;
	display:inline-block;
	cursor:pointer;
}*/

label:hover {
  color:#8BA8A8;  
  text-shadow: 0 0 0.8em #44DDFF, 0 0 0.2em #a9FFff;
}
label::after {
  
  font-weight: bold;
  font-size: 25px;
  content: "+";  
  padding-left:1px;
  padding-right:1px;
  vertical-align: middle;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 3px;
  color:#526666;

	background: -moz-radial-gradient(center, ellipse cover, rgba(123,152,152,1) 2%, rgba(123,152,152,1) 39%, rgba(123,152,152,1) 54%, rgba(86,107,107,1) 64%, rgba(82,102,102,0.5) 65%, rgba(82,102,102,0) 66%, rgba(82,102,102,0) 71%, rgba(82,102,102,0) 99%); 
	background: -webkit-radial-gradient(center, ellipse cover, rgba(123,152,152,1) 2%,rgba(123,152,152,1) 39%,rgba(123,152,152,1) 54%,rgba(86,107,107,1) 64%,rgba(82,102,102,0.5) 65%,rgba(82,102,102,0) 66%,rgba(82,102,102,0) 71%,rgba(82,102,102,0) 99%); 
	background: radial-gradient(ellipse at center, rgba(123,152,152,1) 2%,rgba(123,152,152,1) 39%,rgba(123,152,152,1) 54%,rgba(86,107,107,1) 64%,rgba(82,102,102,0.5) 65%,rgba(82,102,102,0) 66%,rgba(82,102,102,0) 71%,rgba(82,102,102,0) 99%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b9898', endColorstr='#00526666',GradientType=1 ); 
}

.floatleft
{
	float:left;
	margin:8px;
}

.minHeight200
{
	min-height: 200px;
}

#toggle_ue4:checked ~ #expand_ue4 {
  height:1400px;
}
#toggle_ue4:checked ~ label::after {
  content: "-";
}

#toggle_exo:checked ~ #expand_exo {
  height:2580px;
}
#toggle_exo:checked ~ label::after {
  content: "-";
}

#toggle_pil:checked ~ #expand_pil {
  height:900px;
}
#toggle_pil:checked ~ label::after {
  content: "-";
}

#toggle_cwan:checked ~ #expand_cwan {
  height:2150px;
}
#toggle_cwan:checked ~ label::after {
  content: "-";
}
.title_logo
{	
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	vertical-align: middle;	
}

.title_logo img
{
	padding-left:20px;
	padding-right:20px;
	height: 20vh;
}

.bigfont
{
	font-size:50pt;
	text-shadow: 0 0 0.8em #44DDFF, 0 0 0.2em #a9FFff;
	vertical-align: middle;
}

.cwan_title
{
	font-family: 'Agency2', serif;
	font-size:30pt;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	padding-left:20px;
}

.logotitle
{
	font-family: 'Agency2';
	font-size: 10vh;
	text-align: center;
}


.contentinfo
{

}

.lighterbackground
{
	background-color:#7B9898;  
	text-align:center;	
	border-radius: 13px 13px 13px 13px;
}

.video_border
{	
	margin-left:auto;
	margin-right:auto;
	margin-top:2px;
	margin-bottom:5px;
	width:970px;
	border-radius: 13px 13px 13px 13px;
	-moz-border-radius: 13px 13px 13px 13px;
	-webkit-border-radius: 13px 13px 13px 13px;
	border: 4px double #474747;	
}

.text_border
{
	border-radius: 13px 13px 13px 13px;
	-moz-border-radius: 13px 13px 13px 13px;
	-webkit-border-radius: 13px 13px 13px 13px;
	border: 4px double #474747;		
}

.subtle_text_box
{
	margin-left:auto;
	margin-right:auto;
	margin-bottom:5px;
	width:50%;
	
	text-align:center;
	vertical-align: top;
	padding:10px;
}

.text_box
{
	border-radius: 13px 13px 13px 13px;
	-moz-border-radius: 13px 13px 13px 13px;
	-webkit-border-radius: 13px 13px 13px 13px;
	border: 4px double #474747;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:5px;
	width:950px;
	border: 1px #474747;
	background-color: #505050;
	text-align:left;
	vertical-align: top;
	padding:10px;
}

.image_caption
{
	font-style: italic;
	font-size: 10pt;
	border-radius: 10px 10px 0px 0px;
	background-color:#22475a;
	text-align:left;
	padding:5px;
}

.seperator
{
	width:100%;	
	border:0px;
	border-bottom: 4px double  #CCC;
	border-style:double;
	border-color:#5B5555;
	vertical-align: middle;
	margin-top:10px;
	margin-bottom:10px;
}

#main_img
{
	position:absolute;

	top:50% ;
	left:50% ;
	margin-left:-368px;
	margin-top:-380px;
	
	horizontal-align:center;
}
#plus_badge
{
	position:absolute;
	top:0px ;
	left:px ;
}

p:first-letter
{
	font-size: 110%;
}


.address
{
	text-align:left;
	vertical-align:middle;
	color:#554444;
}

.address a
{
	text-align:left;
	color:#554444;
}

.address a:link
{
	text-align:center;
	color:#554444;
}

table.main_table
{
	position:relative;
	background-color:#8B8888;
	background-image:url(images/bg.png);
	width:650px;
	overflow:hidden;
	padding:0px;
	margin:0px;
	border:4px;
	border-style:double;
	border-color:#5B5555;
	vertical-align: middle;
}

.chooser_list
{
	
	font-family:Arial,serif;
	position:relative;
	top:82px;
	left:230px;
	text-decoration:none;
	list-style-image:none;	 	
	vertical-align:top;

   	 margin: 0;
   	 padding: 0;    
    	border:0px none;
    	list-style-type: none;
}

.chooser_list tr td
{	
	 text-indent:-4px;
	text-align:center;
   	 background:url(images/tab.png) no-repeat top left;   		
   	 background-position:left top ;
	background-repeat:no-repeat;
	color:#CCBBBB;
	width:87px;
	height:30px;	
}

.chooser_list tr td a
{
	color:#DDCCCC;
	text-decoration:none;

}
.chooser_list tr td:hover
{

color:#EEDDDD;
}

.chooser_list tr td:hover a
  {
	
	
  }

ul.chooser_list li span
{
	width:87px;
	height:30px;	
}

.title_cell 
{	
	 background-image:url(images/titlebar.png);
	 background-position:left bottom;
	 background-repeat:no-repeat;
	
	 height:112px;
}



table.main_table tr
{
	padding:0px;
	margin:0px;
	border:0px;
}

table.main_table tr td
{
	padding:0px;
	margin:0px;
	border:0px;
}

table.paper
{
	border:0px;
	margin:0px;
	padding:0px;
	width:480px;
}

table.paper tr
{
	border:0px;
	margin:0px;
	padding:0px;
	
}

td.paper_tl
{
	border:0px;
	margin:0px;
	padding:0px;
	background-image:url(images/page_tl.png);
	background-position:right bottom;
	background-repeat:no-repeat;
	width:29px;
	height:26px;	 
}

td.paper_t
{
	border:0px;
	margin:0px;
	padding:0px;
	background-image:url(images/page_t.png);
	background-position:right bottom;
	background-repeat:no-repeat;
	width:421px;
	height:26px;
}

td.paper_tr
{
	border:0px;
	margin:0px;
	padding:0px;
	background-image:url(images/page_tr.png);
	background-position:left bottom;
	background-repeat:no-repeat;
	width:34px;
	height:26px;	 
}

td.paper_l
{
	border:0px;
	margin:0px;
	padding:0px;	
	background-image:url(images/page_l.png);
	background-position:right top;
	background-repeat:no-repeat;
	width:34px;
	height:397px;	 
}

td.paper_c
{
	border:0px;
	margin:0px;
	padding:0px;
	text-align:left;
	vertical-align:top;
	background-image:url(images/page_c.png);
	background-position:right bottom;
	background-repeat:no-repeat;
	width:421px;	
	overflow:hidden;
	
		
}

td.paper_r
{
	border:0px;
	margin:0px;
	padding:0px;
	background-image:url(images/page_r.png);
	background-position:left bottom;
	background-repeat:no-repeat;
	width:34px;
	height:397px;	 
}

td.paper_bl
{
	border:0px;
	margin:0px;
	padding:0px;
	background-image:url(images/page_bl.png);
	background-position:right top;
	background-repeat:no-repeat;
	width:29px;
	height:43px;	 
}

td.paper_b
{
	border:0px;
	margin:0px;
	padding:0px;
	background-image:url(images/page_b.png);
	background-position:right top;
	background-repeat:no-repeat;
	width:421px;
	height:43px;
	
}

/* width */
::-webkit-scrollbar {
	width: 7px;
	height: 7px;
	}
  
  /* Track */
  ::-webkit-scrollbar-track {
	background: #212020;
	}
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
	background: #9e9d9d;
	}
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
	background: #555;
  }

td.paper_br
{
	border:0px;
	margin:0px;
	padding:0px;
	background-image:url(images/page_br.png);
	background-position:left top;
	background-repeat:no-repeat;
	width:34px;
	height:43px;	 
}

.main_text_style
{
	padding:4px;	
	height:389px;
	overflow:auto;
	display:block;
	
}

.main_text_style ul
{
	line-height:14pt;
	list-style-type:square;
}

.left_bar
{
	background-image:url(images/left_violin.png);
	background-repeat:no-repeat;
	background-position:left top;
}

.main_text 
{
	align:left;
	text-align: left;
	font-size: 1.4rem;
}

.main_text a 
{
	color:aliceblue;
}

.green
{
	color:green;
}

.red
{
	color:red;
}

.yellow
{
	color:yellow;
}


#helpicon
{
	background-image: url("../img/an_help.svg");
}

#appmenuicon
{
	background-image: url("../img/appmenu.svg");	
}

#facebook
{
	background-image: url("../img/icons8-facebook.svg");
}
#discord
{
	background-image: url("../img/icons8-discord.svg");
}
#twitch
{
	background-image: url("../img/twitch.svg");
}
#bluesky
{
	background-image: url("../img/icons8-bluesky.svg");		
}


#socialiconcontainer
{
	bottom:0px;
	position:fixed;	
}

.iconcontainer
{
	right:0px;
	width:fit-content;
	height:fit-content;
	display: block;
	margin:auto;
	pointer-events: all;	
	/* background:red; */
}

.socialiconcontainer
{
	margin-top: 0;
}

.iconcontainer span 
{
	width:4.5vh;
	height:4.5vh;
	margin:0.5vh;
	max-height:15vw;
	max-width: 15vw;
	background-size: contain;
	background-repeat: no-repeat;
	transition: 0.2s cubic-bezier(0.44, -1.02, 0.54, 2.04);
	display: inline-block;
	cursor: pointer;
	pointer-events: all;
}


.iconcontainer span:hover
{
	transform:scale(1.15);	
}