:root {
  --menu-height-s:48px;
  --menu-height-l:48px;
  --menu-bg-color-l:#f8f8f8;
  --menu-bg-color-s:#555;
  
  --main-bg-color:#fafafc;
  --link-color:#245775;
  --quote-color:#4d91b3;
  
  --font-title: 'Roboto', Tahoma, Arial, Helvetica, sans-serif;
  --font-text: Helvetica, Arial, sans-serif;
}


html, body {
	font-family: var(--font-text);
	line-height: 1.428;
	color: #333;
	margin: 0;
	scroll-behavior: smooth;
	background-color: #777;
}





.container { margin-left: auto; margin-right: auto; 
	max-width:840px;
	text-align: justify;
}

IMG { padding:0; }
IMG.img-nosize-border { border: 4px solid #404040; }


@media (max-width:640px) {	body { font-size:1.12em;}	.container { width:92%; 	padding:0 4.0%;}	.listpage-home-buttonitemimg img{ width:93.7%; height:54.4%; }	}
@media (min-width:640px) {	body { font-size:1.30em;}	.container { width:88%; 	padding:0 6.0%;}	.listpage-home-buttonitemimg img{ width:256px; height:144px; }	}
@media (min-width:760px) {	body { font-size:1.30em;}	.container { width:88%; 	padding:0 6.0%;}	.listpage-home-buttonitemimg img{ width:300px; height:168px; }	}
@media (min-width:880px) {	body { font-size:1.50em;}	.container { width:100%;	padding:0 2.4%;}	.listpage-home-buttonitemimg img{ width:368px; height:205px; }	}



@media (max-width:640px) {
	.listpage-home-buttonitem { width:100%; height:58.1%; border: 0; margin-left: 0;}
	
	IMG.img-float-left	{ float:left ; margin: 1.2% 1.2% !important; }
	IMG.img-float-right	{ float:right; margin: 1.2% 1.2% !important; }
	IMG.img-ratio-horizontal { width:90% !important; height:72% !important; }
	IMG.img-ratio-vertical   { width:68% !important; height:85% !important; }
	IMG.img-ratio-square     { width:81% !important; height:81% !important; }
	
	IMG.imgitem1		{ width:100%; }
	IMG.imgitem2		{ width:88.0%; margin-right:2.0%; }
	IMG.imgitem3
	,IMG.imgitem4		{ width:47.6%; margin-right:2.3%; }
	
	IMG.imgitemp100
	,IMG.imgitemp90
	,IMG.imgitemp80
	,IMG.imgitemp75
	,IMG.imgitemp70
	,IMG.imgitemp65
	,IMG.imgitemp60 
	,IMG.imgitemp55 { width:100%; }
	IMG.imgitemp50 { width:97.1%; margin-right:2.8%; }
	IMG.imgitemp45 { width:87.2%; margin-right:2.4%; }
	IMG.imgitemp40 { width:77.6%; margin-right:2.2%; }
	IMG.imgitemp35 { width:67.8%; margin-right:2%; }
	IMG.imgitemp30 { width:58.3%; margin-right:1.6%; }
	IMG.imgitemp25 { width:48.5%; margin-right:1.4%; }
	IMG.imgitemp20 { width:38.9%; margin-right:1%; }
	IMG.imgitemp15 { width:29.1%; margin-right:0.8%; }
	
	.video-content iframe	{ width:100.0%; max-width:630px; height:250px; border:0; }
	.itchio-content 		{ width:100.0%; max-width:575px; height:142px; border:0; }
}

@media (min-width:640px) {
	.listpage-home-buttonitem { width:46.7%; height:31%; border: 0; margin-left: 0; /*border:4px solid var(--main-bg-color);*/ }
	.listpage-home-buttonitem:hover { /*border: 4px solid rgba(128,128,128,.3);*/ }
	
	IMG.img-float-left	{ float:left ; margin: 10px 12px -2px -4px; }
	IMG.img-float-right	{ float:right; margin: 10px 12px -2px -4px; }
	
	IMG.imgitem1		{ width:90%; max-width:512px; }
	IMG.imgitem2		{ width:47.6%; margin-right:2.3%; }
	IMG.imgitem3		{ width:31.7%; margin-right:1.6%; }
	IMG.imgitem4		{ width:23.9%; margin-right:1.0%; }

	IMG.imgitemp100		{ width:100%; }
	IMG.imgitemp90		{ width:90%; }
	IMG.imgitemp85		{ width:85%; }
	IMG.imgitemp80		{ width:77.6%; margin-right:2.3%; }
	IMG.imgitemp75    { width:72.7%; margin-right:2.1%; }
	IMG.imgitemp70    { width:67.9%; margin-right:2%; }
	IMG.imgitemp65    { width:63%; margin-right:1.8%; }
	IMG.imgitemp60    { width:58.2%; margin-right:1.7%; }
	IMG.imgitemp55    { width:53.3%; margin-right:1.5%; }
	IMG.imgitemp50    { width:48.5%; margin-right:1.4%; }
	IMG.imgitemp45    { width:43.6%; margin-right:1.2%; }
	IMG.imgitemp40    { width:38.8%; margin-right:1.1%; }
	IMG.imgitemp35    { width:33.9%; margin-right:1%; }
	IMG.imgitemp30    { width:29.1%; margin-right:0.8%; }
	IMG.imgitemp25    { width:24.2%; margin-right:0.7%; }
	IMG.imgitemp20    { width:19.4%; margin-right:0.5%; }
	IMG.imgitemp15    { width:14.5%; margin-right:0.4%; }

	.video-content iframe	{ width:75.0%; height:320px; border:0; }
	.itchio-content 		{ width:95.0%; max-width:575px; height:142px; border:0; }

}







.main {
	margin-top: 0px; padding-top: 72px; 
	background-color: var(--main-bg-color);
}

a:link, a:visited {
	color: var(--link-color); 
	text-decoration: underline;
}
a:hover {
	color: #ffffff;
	background-color: #2A6E95;
	text-decoration: none;
}





.highlitable {
	transition-property: background-color;
	transition-duration: 0.5s;
	background-color: rgba(255,255,255, 0) !important;
}

.highlitable:hover {
	background-color: rgba(255,255,255, 1) !important;
	text-decoration: none !important;
}

.decorable {
}

.decorable:hover {
	text-decoration: underline !important;
	background-color: rgba(255,255,255, 0.75);
	color: #000000 !important;
}







.footer {
	background-color: #777;
	margin-top: 50px;
	padding: 8px 0 100px 0;
	color: #ccc;
	font-size:88%;
}
.footer a {
	color: #e0e0e0;
	text-decoration: underline;
}
.footer a:hover {
	color: #fff;
	text-decoration: underline;
	background: none !important;
}


h1.intro, h2.intro {
	font-family: var(--font-title);
	font-weight: normal;
	font-size:200%;
	margin-top: 5px;
	padding-top: 30px;
	text-align:left;
}

h1.pagetext, div.head1, .promotext h1
, .promotext h2
, h2.pagetext {
	font-family: var(--font-title);
	font-weight: normal;
	font-size:175%;
	margin-top: 5px;
	padding-top: 30px;
	clear: both;
	text-align:left;
}

h2.subpagetext
, h3.subpagetext
, div.subpagetext 
, div.credithead {
	font-family: var(--font-title);
	font-weight: normal;
	font-size:150%;
	margin-top: 33px;
	clear: both;
	text-align:left;
}

.thank {
	font-family: var(--font-title);
	font-weight: normal;
	font-size:400%;
	margin-top: 35px;
}

.promotext { font-size:110%; }
.promodesc { font-size:90%; }

.promolink {
	font-family: var(--font-title);
	font-size:138%;
	background-color: #EDF6FF;
	border: 1px solid #7AA7C7 !important;
	border-radius: 8px;
	padding: 9px 4.2%;
	margin: 10px 0 30px;
	width: intrinsic;           /* Safari/WebKit uses a non-standard name */
	width: -moz-max-content;    /* Firefox/Gecko */
	width: -webkit-max-content; /* Chrome */
	width: max-content;
	max-width:90%;
	overflow-wrap: anywhere; word-break: break-all;
}


.intro {
	font-size:115%;
}

.pagetext {
	margin-top: 20px;
}

div.pagetext {
	clear: both;
}

div.sidetext {
	float: left;
	clear: none;
	margin: 0 0 20px 2.4%;
}




.small {
	font-size:90%;
}

.credittext {
	font-size:80%;
}


pre {
	clear: both;
	padding-left:4.8%;
	overflow-x: auto;
	white-space: pre-wrap;
	text-align: left;
	background: #f4f4f4;
	font-weight: normal;
}

.code {
	font-family: monospace;
	font-size:90%;
	color: #000;
	word-break: break-word;
}

span.code {
	font-weight: bold;
	border: 1px rgba(42,110,149, 0.5) solid; border-radius: 8px;
	padding: 0.5% 0.8%;
	background-color: rgba(42,110,149, 0.1);
}






div.pagetext li, div.pagelist li {
	padding: 8px 0 0 0.6%;
}

div.pagelist {
    margin-top:0.6%;
}

div.pagelist ul, div.pagelist ol {
	margin: 0;
}

.divimages {
	margin: 20px 0 0 0;
	padding:0.6%;
	clear: both;
}


.nobullet {
	list-style-type: none;
	padding-left: 0;
}

.quote {
	font-family: var(--font-title);
	font-size:145%;
	position: relative;
	padding-left:5.2%;
	padding-right:1.0%;
	border-left: 8px solid var(--quote-color);
	text-align: justify;
	line-height: 45px;
	font-weight: normal;
	/*margin-bottom: 45px;
	margin-inline-start:2.8%;
	margin-inline-end:2.0%;*/
	margin:35px 2.0% 45px 2.8%;
}
.quote:before {
	content: '\201C';
	font-family: Arial;
	font-size:200%;
	color: var(--quote-color);
	position:absolute;top:4px;left:5.9%;
}
.quote:after {
	content: '\201D';
	font-family: Arial;
	font-size:200%;
	color: var(--quote-color);
	position:absolute;bottom:-32px;
}

DIV.imgdiv {
	padding-top:20px;
}

DIV.divcell {
	font-family: monospace;
	font-weight: bold;
	float: left;
	margin: 0;
	padding: 6px 0 8px 0;
}

DIV.divcell4 { font-size: 80%; width: 25%; }
DIV.divcell3 { font-size: 80%; width: 33.3%; }
DIV.divcell16 { font-size: 70%; width: 6.25%; }
DIV.paletteline { font-size: 100%; clear: both; text-align: left; }
.palettecode {font-family: monospace; font-weight: bold;}

@media only screen and (max-width: 800px){
	DIV.divcell3 { font-size: 100%; width: 100%;}
	DIV.divcell4 { font-size: 100%; width: 100%;}
	DIV.divcell16 { font-size: 50%; width: 6.25%; min-height: 22px;}
	DIV.paletteline { font-size: 80%; }
}

@media only screen and (max-width:640px) {
	DIV.paletteline { font-size: 72%; }
}


.review {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
	clear: both;
	float:left;
	width: 100%;
}

.review a {
	text-decoration: none !important;
	color: inherit;
}
.review a:hover, .review-comment:hover {
	color: var(--link-color);
	text-decoration: none !important;
	background:none !important;
}

.review-date:hover {
	color: var(--link-color);
	text-decoration: underline !important;
	background:none !important;
}

.twitter-icon {
	border-radius: 9999px;
	border-width: 0px;
	margin: 8px 8px 0px 0;
	float:left;
}

.review-size-m { font-size:115%; margin: 6px 0; max-width:96%; text-align:left; }
.review-size-l { font-size:150%; margin: 8px 0; max-width:96%; text-align:left; }

.review-size-m IMG { width:6%; }
.review-size-l IMG { width:8%; }

.review-comment-size-m { max-width:90%; }
.review-comment-size-l { max-width:88%; }


.reviewer {
	color: var(--quote-color);
	font-size:120%;
	margin-right: 6px;
}

.review-date {
	color: #929FAA;
}

.review-comment {
	font-size:97%;
	float:left;
	overflow-wrap: break-word; word-break: break-all;
}


DIV.sitemapitem A {
	/*color: #ff8000;*/
}
h1.sitemapitem
, h2.sitemapitem {
	font-size:160%;
	margin: 20px 0 0 0;
}

.size1 {
	font-size:130%;
}
.size2 {
	font-size:100%;
}


DIV.table {
	padding: 4% 0 2%;
}

DIV.table TABLE {
	border: 1px solid #333;
	border-collapse: collapse;
	width: 100%;
	background-color: rgba(255,255,255, 0.5);
}

DIV.table TABLE TD {
	text-align: center;
	border: 1px solid #333;
	padding: 1%;
}

.hcell {
	font-weight: bold;
	background-color: rgba(77,145,179, 0.15);
}

DIV.table TABLE > TBODY > TR:first-child > TD.hcell {
	background-color: rgba(200,200,200, 0.5);
}

TABLE.cells2 TD { font-size: 95%; width: 50%;   }
TABLE.cells3 TD { font-size: 92%; width: 33.3%; }
TABLE.cells4 TD { font-size: 90%; width: 25%;   }






.keywords {
	width:100%; 
	text-align: left;
	margin-top: 24px;
	margin-bottom: 16px;
	padding: 0px;
}
.keyworditems {
	text-align: center;
	margin-top: 10px;
}
.tag {
	color: #0070f0;
	font-weight: bold;
	font-size:100%;
	display: inline-block; /* float: left; */
	margin : 0px 0.6% 6px 0.6%;
	padding: 0px 0.6% 2px 0.6%;
	position: relative;	top: 0px;
}
.tag:nth-child(even) {
	position: relative;	top: -2px;
	color: #0050b0;
}

.tag:hover {
	background-color: #0070f0;
	color: #ffffff;
}
.tagsize1 { font-size:135%; }
.tagsize2 { font-size:118%; }
.tagsize3 { font-size:100%; }
.tagsize4 { font-size:94%; }



/* form */

.errorbox-bad {border:2px solid #c43b1d; background-color:#ffe6cc; padding: 10px; margin: 6px 0;}
.ss-required-asterisk {color: #602010; font-size:85%; font-weight: bold; }

.ss-form-entry {margin-top: 14px; zoom:1; width:100%; }

.ss-form-entrylabel { width:14.7%; float: left; }

.ss-form-entry input, .ss-form-entry textarea {
margin-top: -5px;
vertical-align:middle;
font-family: Helvetica, Arial, sans-serif;
font-size:100%;
background-color: white; border-width: 1px; border-radius: 4px; border-color: #B0B0B0;
padding: 5px 0.6% 5px 1.2%;
}

.ss-form-entry input { width:60%; max-width:500px; }


.ss-q-long {max-width:97%; margin-top: 0px !important; }

.ss-choices {list-style:none; margin:.5em 0 0 0; padding:0}
.ss-choice-item {margin:0; line-height:1.3em; padding-bottom:.5em}

.ss-q-radio, .ss-q-checkbox { width:10% !important; min-width:55px !important; }


.ss-form-submit {
padding-right: 3%;
}

.ss-form-submit input {
text-align: center !important;
cursor: pointer !important;
font-size:100% !important;
color: #2C5777 !important; background-color: #E1ECF4 !important; border: 1px solid #7AA7C7 !important; border-radius: 4px !important; box-shadow: inset 0 3px 5px rgba(255,255,255,.25);
padding: 10px 7% !important;
margin: -9px 1.2% 8px 1.2% !important;
min-width: 200px !important;
width:auto !important;
}

.ss-form-submit input:hover {
	background-color: #B3D3EA !important;
}


@media only screen and (max-width: 800px){
	.ss-form-entrylabel { width:97%; }
	.ss-form-submit input {margin-top:0 !important; }
	.ss-form-entry input, .ss-form-entry textarea { width:97%; margin-top:0; }
	
}


.listpage-home-buttonitem {
	padding: 0;
	margin-top: 4px;
	margin-right: 1.2%;
	margin-bottom: 4px;
	
	color: #2C5777;
	background-color: #000000;
	border-radius: 12px ;
	text-align: center;
	float: left;
	
	transition-property: box-shadow;
	transition-duration: 0.5s;
	box-shadow: inset 0px 0px 80px rgba(255,255,255,0);
}

.listpage-home-buttonitem:hover {
	background-color: #000000;
	box-shadow: inset 5px 24px 32px rgba(255,255,255,.4);
}


.listpage-home-buttonitems {
	margin: 6px 0 20px 0;
}

.listpage-home-buttonitemlink {
	height: 40px;
	padding: 5px 0 0 0;
	z-index: 2;
	position: relative;
}

.listpage-home-buttonitemlink a {
	font-size:135%;
	display: block;
	color: #FFFFFF !important; 
	text-decoration: none !important;
}

.listpage-home-buttonitemlink a:hover {
	color: #ddd !important;
	background-color: rgba(255,255,255, 0.2);
	text-decoration: none !important;
}
.listpage-home-buttonitemimg a:hover {
	background: none;
	text-decoration: none !important;
}

.listpage-home-textitem {
	font-size:115%;
}
.listpage-home-textitem a {
	text-decoration: none !important;
}

.downloadbutton {
	cursor: pointer;
	width: intrinsic;           /* Safari/WebKit uses a non-standard name */
	width: -moz-max-content;    /* Firefox/Gecko */
	width: -webkit-max-content; /* Chrome */
	width: max-content;
	max-width:80%;

	background-color: #077AEF;
	border: 1px solid #044070;
	border-radius: 8px;
	padding: 12px 30px;
	margin-top: 20px;
	font-size:105%;
	text-align:left;

	transition-property: background-color,box-shadow;
	transition-duration: 0.5s;
	box-shadow: inset 0 3px 5px rgba(255,255,255,.25);
}

.downloadbutton:hover {
	background-color: #055FCF;
	box-shadow: inset 5px 10px 10px rgba(0,0,0,.4);
}

.downloadbutton a {
	display: block;
    color: #fff;
    text-decoration: none;
}

.downloadbutton a:hover{
    text-decoration: none !important;
	background:none !important;
}




/* banner-menu */

.menu-shadow {
	background-color: var(--menu-bg-color-l);
	box-shadow: 0px 4px 1px 0 rgb(224, 224, 224);
	width: 100%;
}

.menu-wrapper {
	height: var(--menu-height-l);
	line-height: var(--menu-height-l);
	/*width: 100%;*/
	width:100%; max-width:840px;
	padding:0 0;
	
	position: fixed; top:0; right:0; left:0;
	z-index: 1000;
}

.header {
	position: relative;
	width: 100%;
	z-index: 1000;
}

.header ul {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
}

ul.menu {
	line-height: var(--menu-height-l);
}

.header .menu li a {
	display: block;
	color: #333;
	padding: 15px 20px;
	text-decoration: none;
}

.item-mobileonly {
	display: none;
}

.header li a:hover,
.header .menu-btn:hover,
.header a.logo:hover {
	background-color: rgba(0, 0, 0, 0.10);
}

.header .logo {
	display: block;
	float: left;
	padding: 4px 0 0;
	text-decoration: none;
	line-height: 0.1;
}



.header .menu {
	clear: both;
	max-height: 0;
	transition: max-height .2s ease-out;
}

.header .menu-icon {
	cursor: pointer;
	display: inline-block;
	float: left;
	padding: 24px 4.5%;
	position: relative;
	user-select: none;
}

.header .menu-icon .navicon {
	background: #fff;
	display: block;
	height: 2px;
	position: relative;
	transition: background .2s ease-out;
	width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
	background: #fff;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transition: all .2s ease-out;
	width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 380px;
  border-bottom: 4px solid #777;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}



.lang-box {
	padding: 4px 8px 4px 10px;
	border: 1px solid rgba(255,255,255, 0.5);
	border-radius: 4px;
	margin: 0px;
	cursor: pointer;
}
.lang-box:hover {
	background-color: rgba(255,255,255, 0.25);
}

.lang-text {
	display: none;
	visibility: hidden;
}

.lang-menuitem {
	font-size:85%;
}

.header .lang-btn {
  display: none;
}

.lang-nav {
 visibility: hidden;
 display: none;
 position: fixed;
}

ul.lang {
	position: relative;
right: 62px;
}

ul.lang li {
	width: 100%;
	background: var(--menu-bg-color-l);
}

.header .lang-btn:checked ~ .lang {
	max-height: 340px;
}

.header .lang-btn:checked ~ .lang-nav {
	visibility: visible;
	display: block;
}

.caret {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 2px;
	vertical-align: middle;
	border-top: 4px dashed;
	border-right: 4px solid transparent;
	border-left: 4px solid
	transparent;
}


.header .lang-btn:checked ~ .lang-icon:not(.steps) .lang-anchor:before,
.header .lang-btn:checked ~ .lang-icon:not(.steps) .lang-anchor:after {
  top: 0;
}



/* banner-menu responsive */

@media only screen and (max-width: 880px){
	.menu-wrapper{
		background: var(--menu-bg-color-s);
		width:100%; max-width:none;
		padding:0 0;
	}
	
	.header .logo {
		width:64%;
		text-align: center;
	}

	.header ul.menu{
		background-color: #fff;
		line-height: 32px;
	}  
	.header li a {
		padding: 15px;
		border-bottom: 1px dashed #e8e8e8;
	}
	
	.item-mobileonly {
		display: block;
	}
	
	.lang-menuitem {
		position: absolute; top: 0; right: 0;
		padding: 10px 6% 10px 6%;
		background: rgba(255,255,255, 0.25);
		color: #fff;
		font-size:90%;
	}
	
	ul.lang {
		position: fixed;
		right: 0px;
		padding: 10px 10px 0 10px;
	}
	

}




@media only screen and (min-width: 880px) {
    
	.header ul.menu li {
		float: left;
	}
	
	.menu-listitem {
		font-family: var(--font-title);
		font-size:88%;
	}
	
	.header ul.lang li {
		float: none;
	}
    .header .logo{
    }
	.header ul.menu li a {
		padding: 0px 11px;
    }

	.header .menu {
		clear: none;
		float: right;
		max-height: none;
	}
	
	.header .menu-icon {
		display: none;
	}

	.header .lang {
		clear: none;
		float: right;
	}

	.lang-menuitem {
		padding: 0 8px;
		/*background: rgba(0,0,0, 0.15);*/
		cursor: pointer;
	}
	
	.lang-text {
		cursor: pointer;
	}
	
	ul.lang li {
		padding: 0px 0px;
	}
	
	.lang-box {
		border: 1px solid rgba(0, 0, 0, 0.1);
		background: rgba(0,0,0, 0.05);
	}
}

/*
@media only screen and (min-width: 880px) {
	.lang-text {
		visibility: visible;
		display: block;
	}
}
*/