.Class {
	position: absolute;
	top: 0px;
	left: 160px;
	width: 100px;
	height: 100px;
	background-color: #1c85f8;
	box-shadow: 0px 3px 10px #0467c3;
	text-align: center;
	color: #fff;
	text-shadow: 0px 2px 3px #555;
	font-size: 100%;
}

.Function {
	position: absolute;
	top: 0px;
	left: 160px;
	width: 100px;
	height: 35px;
	background-color: #56d53f;
	box-shadow: 0px 3px 10px #4cb735;
	text-align: center;
	color: #fff;
	text-shadow: 0px 2px 3px #555;
	font-size: 100%;
}

.Variable {
	position: absolute;
	top: 0px;
	left: 160px;
	width: 100px;
	height: 35px;
	background-color: #fad316;
	box-shadow: 0px 3px 10px #e4ba04;
	text-align: center;
	color: #fff;
	text-shadow: 0px 2px 3px #555;
	font-size: 100%;
}

.Class-Function {
	background-color: #39AD9C;
}

.Function-Variable {
	background-color: #A8D42A;
}

.Class-Variable {
	background-color: #B7BC5A;
}

nav {
	display: grid;
	float: left;
	overflow-y: hidden;
	overflow-x: hidden;
	width: 35px;
	height: 4%;
	box-shadow: 2px 2px 10px grey;
	background-color: #099bb6;
	margin-right: 10px;
	-webkit-transition: All 0.15s ease;
	-moz-transition: All 0.15s ease;
	-o-transition: All 0.15s ease;
	-ms-transition: All 0.15s ease;
	transition: All 0.15s ease;
}

nav ul {
	padding-left: 10px;
	font-size: 18px;
	color: ffffff;
}

nav:hover {
	width: 150px;
	height: 29%;
}

nav p {}

nav p:hover {
	background-color: #04b0b6;
	cursor: default;
}

.class-handle {
	width: 20px;
	height: 20px;
	background-color: black;
}

#demo {
	width: 100%;
	height: 100%;
}

icon {
	width: 30px;
	height: 30px;
	padding-left: 2.0px;
	padding-top: 3.0px;
	opacity: 1.0;
	filter: alpha(opacity=100);
}

body {
	background-image: url("res/pattern.png");
	background-repeat: repeat-x repeat-y;
	font-family: Segoe UI;
}