/* Colors:

#35C5F5 - playstation blue
#B9B40E - version title yellow
#8C8C8C - button gray
#4F4F4F - inactive gray
#000000 - black

*/

* {
	font-family: Arial;
	background: #00000000;
	color: #4F4F4F;
	font-size: 31px;
	letter-spacing: 1px;
	text-shadow: 2px 2px 1px #000000, 2px -2px 1px #000000, -2px 2px 1px #000000, -2px -2px 1px #000000, 2px 0px 1px #000000, 0px 2px 1px #000000, -2px 0px 1px #000000, 0px -2px 1px #000000;
}

body {
	background: #000000;
}

.menuwrapper {
	position: relative;
	margin: auto;
	width: 900px;
	height: 600px;
	background: #FFFFFF00;
	animation: changeout 3s;
}

@keyframes changeout {
	0% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover, button:hover #browser {
	color: #35C5F5;
}

.menu {
	width: 450px;
	height: 60px;
	position: absolute;
	right: 0px;
	bottom: 258px;
	line-height: 29px;
	font-family: Arial;
	text-shadow: inherit;
	/background: #33000060;
	margin-right: 105px;
	opacity: 1;
}

#browser {
	width: 174px;
	height: 30px;
	position: absolute;
	font-size: 30px;
	/background: #00003360;
	margin: 0px;
	top: 0px;
	left: 138px;
}

#sysconfig {
	height: 30px;
	width: 450px;
	font-size: 30px;	
	/background: #00003360;
	position: absolute;
	bottom: 0px;
	margin: 0px:
}

.select{
	vertical-align: middle;
	font-size: 22px;
	position: absolute;
	color: #8C8C8C;
	bottom: 10px;
}

button {
	font-size: 22px;
	position: absolute;
	color: #8C8C8C;
	bottom: 10px;
	border: none;
	cursor: pointer;
}

button:hover {
	color: #35C5F5;
}

#version, #options {
	right: 63px;
}

#options {
	opacity: 0;
	z-index: -1;
}

#enter {
	right: 474px;
}

#back {
	right: 324px;
	vertical-align: middle;
	font-size: 22px;
	position: absolute;
	bottom: 10px;
}

#menuback {
	right: 324px;
	opacity: 0;
	pointer-events: none;
}

#display {
	left: 36px;
}

div img {
	height: 18px;
	margin-right: 4px;
}

/* Version Information */

.versioncontainer {
	position: absolute;
	width: 510px;
	font-size: 32px;	
	=background: #00003360;
	right: 105px;
	bottom: 174px;
	height: 215px;
	opacity: 0;
	pointer-events: none;
}

h1 {
	font-size: 21px;
	font-weight: normal;
	color: #B9B40E;
	margin-top: 0px;
	margin-left: 172px;
	margin-bottom: 59px;
}

table {
	position: absolute;
	border-collapse: collapse;
	width: 510px;
	height: 129px;
	margin: 0px;
}

table button {
	position: relative;
	size: 100%;
	margin: 0px;
	bottom: 0px;
	font-size: inherit;
}

tr {
	height: 20%;
}

th, td {
	width: 150px;
	font-size: 20px;
}

th {
	text-align: right;
	text-align: right;
	padding-right: 17px;
}

td {
	text-align: left;
	padding-left: 18px;
}

tr:hover .hoverable {
	color: #B2ACAE;
}

tr:hover button {
	color: #35C5F5;	
}

#timeelapsed {
	color: inherit;
	font-size: inherit;
}

#currentcolor {
	cursor: pointer;
}

/* Opacity switcher */

@keyframes switcheroo {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes switchertwo {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* Dancing Dots */

.dots-container {
	height: 172px;
	width: 172px;
	bottom: 208px;
	left: 300px;
	z-index: -2;
	position: absolute;
	animation: shrink 3.5s ease-in-out infinite;
	/background: #300000;
	transform-style: preserve-3d;
}

@keyframes shrink {
	0% {
	transform: rotateX(0deg);
	transform-origin: center center;
	}
	50% {
	transform: rotateX(180deg);
	transform-origin: center center;
	}
	100% {
	transform: rotateX(360deg);
	transform-origin: center center;
	}
}

.dots-container2 {
	animation: spin2 3.5s linear infinite;
	transform-style: preserve-3d;
	/background: #003000;
	height: 172px;
	width: 172px;
	transform: rotateY(90deg);
}

@keyframes spin2 {
	0% {
		transform: rotateZ(0deg);
	}
	100% {
		transform: rotateZ(360deg);
	}
}

.dot1, .dot2, .dot3 {
	position: absolute;
    left: 0;
	border-radius: 100%;
	background: #B7DAED;
	height: 7px;
	width: 7px;
	box-shadow: 0px 0px 2px 2px #B7DAED, 0px 0px 6px 6px #B7DAED;
	transform-style: preserve-3d;
	filter: blur(2px);
}

.dot2 {
    transform: rotateX(90deg);
	opacity: 1;
}

.dot3 {
    transform: rotateY(90deg);
	opacity: 1;
}

.stalk1, .stalk2, .stalk3, .stalk4, .stalk5, .stalk6, .stalk7 {
	height: 7px;
	width: 172px;
	position: absolute;
	top: 50%;
	animation: spin 0s linear infinite;
	transform-style: preserve-3d;
	/background-color: #000030;
}

@keyframes spin {
	0% {
		transform: rotateZ(0deg);
	}
	100% {
		transform: rotateZ(360deg);
	}
}

.stalk1 {
	animation-duration: 8.57142857s;
}

.stalk2 {
	animation-duration: 10s;
}

.stalk3 {
	animation-duration: 12s;
}

.stalk4 {
	animation-duration: 15s;
}

.stalk5 {
	animation-duration: 20s;
}

.stalk6 {
	animation-duration: 30s;
}

.stalk7 {
	animation-duration: 60s;
}

@keyframes hourly {
	0%, 100% {
		transform: scale;
	}
	99% {
		width: 200px;
	}
}
/* 60 is 99% of 60.6061. You will need 3636.366 seconds for this animation. */

/* Infobox */

.infoboxcontainer {
	position: absolute;
	z-index: 10;
	width: 320px;
	height: 400px;
	top: 140px;
}

.infobox {
	width: 96%;
	height: 96%;
	border: 6.4px solid #35C5F500;
	border-radius: 2%;
}

.infoboxtitle {
	/background-color: #35C5F540;
	width: 100%;
	height: 8%;
	text-align: center;
}

.infoboxtitle h1 {
	width: 100%;
	margin: 0px;
}

.infoboxcontent {
	/background-color: #35C5F540;
	width: 100%;
	height: 92%;
	overflow: scroll;
	scrollbar-color: #35C5F540 #000000;
}

.infoboxcontent p, .infoboxcontent i, .infoboxcontent b, .infoboxcontent span {
	font-size: 18px;
	margin-left: 3px;
}

p b {
	color: #35C5F5;
	font-weight: normal;
}

#dancingdotsinfo, #dvdplayerinfo, #consoleinfo {
	opacity: 0;
	pointer-events: none;
	overflow: none;
}