﻿*
{
	box-sizing:border-box;
	padding:0px;
	margin:0px;
}
html
{
	width:100%;
	height:100%;
	background-color:#5d00a8;
	/* this was gonna be sick but then Microsoft Edge happened */
	/*
	background-image:linear-gradient(to right,red,blue),url(shadedEdges.png),url(bg.png);
	background-size:auto,100% 100%,auto;
	background-blend-mode:hue,normal,normal;
	*/
	background-image:url(shadedEdges.png),url(bg.png);
	background-size:100% 100%,auto;
	font-family:Verdana;
	font-size:10px;
	color:#000;
	overflow:hidden;
}
.nosel,.title,.li,#head,#back
{
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none; 
	-ms-user-select:none;
	user-select:none;
}
body
{
	width:100%;
	height:100%;
	display:grid;
	align-items:center;
	overflow:auto;
	text-align:center;
}
.window
{
	display:inline-block;
	border:1px solid #cccccc;
	border-width:16px 5px 5px 4px;
	border-image:url(borderWindow.png) 16 5 5 4 repeat;
	position:relative;
	text-align:initial;
	width:200px;
}
.window:before,.window:after
{
	content:'';
	display:block;
	position:absolute;
	top:-16px;
	z-index:1;
	width:14px;
	height:16px;
}
.window:before
{
	left:-4px;
	background-image:url(borderTL.png);
}
.window:after
{
	right:-4px;
	background-image:url(borderTR.png);
}
.title
{
	position:absolute;
	padding:0px 4px;
	left:50%;
	transform:translateX(-50%);
	top:-14px;
	height:12px;
	background:#cccccc;
	text-align:center;
	line-height:10px;
}
.desc
{
	background:#dddddd;
	padding:2px 4px;
}
.inner,.li a>div,#head
{
	background:#eeeeee;
	border:3px solid #cccccc;
	border-image:url(borderInner.png) 3 repeat;
}
.li
{
	background:#eeeeee;
	border-bottom:1px solid #ffffff;
	font-size:11px;
	height:25px;
	position:relative;
}
.li:first-of-type
{
	border-top:1px solid #ffffff;
}
.li a
{
	width:100%;
	height:100%;
	display:inline-block;
	padding-left:28px;
	padding-top:3px;
	padding-right:4px;
}
.li img
{
	position:absolute;
	left:4px;
	top:0px;
	border-right:1px solid #ffffff;
	padding-right:4px;
	padding-top:4px;
	padding-bottom:4px;
	/*filter:drop-shadow(1px 1px 0px rgba(0,0,0,0.25));*/
}
.li a:hover img{border-right:1px solid #666666;}
.li a:active img{border-right:1px solid #000;}
.li:first-of-type img{padding-bottom:3px;}
.li a>div
{
	display:none;
	background:#3f1c70;
	/*background:#6929bd url(shadedEdges.png);
	background-size:100% 100%;*/
	text-shadow:0px 1px #000;
	color:#fff;
	position:absolute;
	left:4px;
	bottom:100%;
	right:4px;
	z-index:100;
	padding:10px;
	box-shadow:0px 0px 0px 1px #000,2px 0px 0px #000;
	/*box-shadow:0px -1px 0px #000 inset,0px 0px 0px 1px #fff inset;*/
	pointer-events:none;
	font-size:10px;
}
.li a>div b{text-shadow:1px 0px 0px #fff,0px 1px 0px #000;}
.li a:hover>div
{
	display:block;
}

b,.title
{
	font-weight:normal;
	text-shadow:1px 0px 0px #000,0.5px 0px 0px #000;
}
a{color:#03f;}
a:visited{color:#90f;}
.li a:hover,.li a:active{color:#fff;background:#000;}
.li a:active{background:#000 url(busy.png);text-shadow:1px 1px 0px #000;}

p
{
	text-indent:8px;
	line-height:110%;
	margin-bottom:6px;
}

/*#anchor
{
	position:absolute;
	left:50%;
	top:50%;
}*/
/*#Wgames,#Wtoys,#Wexps,#Wlinks
{
	position:absolute;
	margin:4px;
}
#Wgames{right:0px;bottom:0px;}
#Wtoys{left:0px;bottom:0px;}
#Wexps{right:0px;top:0px;}
#Wlinks{left:0px;top:0px;}*/

#Wabout,#Wgames,#Wtoys,#Wexps,#Wlinks
{
	margin:4px;
}
#Wabout,#Wgames,#Wtoys{vertical-align:bottom;}
/*#Wexps,#Wlinks{vertical-align:top;}*/

#firstBox
{
	vertical-align:bottom;
	display:inline-block;
}

#head
{
	/*font-family:Courier New;
	font-weight:bold;
	font-size:22px;
	color:#fff;
	background:url(busyT.png);
	text-shadow:1px 1px 0px #000,2px 2px 0px #000;*/
	
	font-family:Palatino;
	font-size:19px;
	letter-spacing:2px;
	text-shadow:1px 1px 0px #000;
	background:url(titleBG.png);
	color:#fff;
	
	font-variant:small-caps;
	box-shadow:0px 0px 0px 1px #000,2px 2px 0px #000;
	padding:6px 0px;
	display:inline-block;
	margin:4px auto;
	width:197px;
	overflow:hidden;
	white-space:nowrap;
	margin-bottom:0px;
}
#back
{
	box-shadow:0px 0px 0px 1px #000,2px 2px 0px #000;
	text-shadow:0px 1px 0px #fff;
	display:inline-block;
	background:#eeeeee;
	padding:2px 6px;
	margin-top:-2px;
	padding-bottom:3px;
}
#back:hover{text-decoration:none;background:#fff;}
#back:active{background:#000 url(busy.png);color:#fff;text-shadow:1px 1px 0px #000;}
#credits
{
	display:inline-block;
	color:#fff;
	text-shadow:1px 1px 0px #000;
	font-size:9px;
}

#dudes
{
	background:url(2dudes.png);
	position:absolute;
	right:2px;
	bottom:0px;
	width:35px;
	height:16px;
	cursor:pointer;
}
#dudesHi
{
	display:none;
	background:#000;
	color:#fff;
	position:absolute;
	left:-2px;
	right:-2px;
	bottom:100%;
	margin-bottom:4px;
	padding:3px;
	text-align:center;
	font-size:9px;
	height:20px;
	border-radius:2px;
	pointer-events:none;
	box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 2px #000;
}
#dudes:hover #dudesHi{display:block;}

.window
{
	animation:open 0.2s;
	transform:scale(1,0);
	animation-fill-mode:forwards;
}
@keyframes open{
	0% {transform:scale(1,0);}
	50% {transform:scale(1,1.05);}
	100% {transform:scale(1,1);}
}
#Wabout{animation-delay:0.03s;}
#Wgames{animation-delay:0.09s;}
#Wtoys{animation-delay:0.06s;}
#Wexps{animation-delay:0.15s;}
#Wlinks{animation-delay:0.12s;}
#heartBox {
  display: block;
  margin: 20px auto;
}
