body {
	background-color: #008000;
	font-size: 2em;
	font-family: "Arial", Arial, sans-serif;
	
	padding-right: 8px;
}
button {
	font-size: 1em;
	border-radius: 4px;
}
textarea {
	margin: 4px;
}
pre {
	font-family: "Arial", Arial, sans-serif;
}
p {
	margin: 4px;
}
p.direction {
	font-size: 0.5em;
	color: white;
}
p.title {
	margin: 8px;
	font-size: 2em;
	color: rgb(32,192,32);
}
p.heading {
	margin: 8px;
	font-size: 1em;
	color: rgb(32,128,32);
}
.node {
	box-shadow: 8px 10px 5px #888888;
	cursor: default;
	
	text-align: center;
	color: #000000;
	background-color: #c0c0ff;
	position: absolute;
	height: auto;
	width: 128px;
	
	padding: 4px;
	
	border: 8px;
	border-radius: 16px;
	border-color: #9090ff;
	border-style: outset;
	
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Chrome/Safari/Opera */
	-khtml-user-select: none;    /* Konqueror */
	-moz-user-select: none;      /* Firefox */
	-ms-user-select: none;       /* IE/Edge */
}
.description {
	display: inline-block;
	width: 75%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 16px;
	margin-top: 16px;
	
	box-shadow: 8px 10px 5px #888888;
	background-color: #c0c0ff;
	
	border-radius: 8px;
	
}
.answer {
	cursor: default;
	
	display: inline-block;
	width: auto;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 16px;
	margin-top: 16px;
	
	box-shadow: 8px 10px 5px #888888;
	background-color: #ffad33;
	
	border: 8px;
	border-style: solid;
	border-color:#ffad33;
	border-radius: 4px;
	
	padding: 4px;
}
.answer:hover {
	background-color: #ffebcc;
	border-style: double;
	border-color: #ffad33;
}
.answer:active {
	background-color: #e68a00;
}
.answerList {
	display: inline-block;
	margin: 4px;
}
.connector {
	background-color: #cccccc;
	border-color: #ffffff;
	width: 32px;
	height: 32px;
	
	border-radius: 24px;
	border-style: outset;
	border-width: 8px;

}
.connector:hover {
	background-color: #ffffff;
	border-style: solid;
}
.main {
	background-color: #222222;
	display: inline-block;
	padding: 4px;
	
	border-radius: 20px;
	
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Chrome/Safari/Opera */
	-khtml-user-select: none;    /* Konqueror */
	-moz-user-select: none;      /* Firefox */
	-ms-user-select: none;       /* IE/Edge */
}
.viewFrame {
	position: relative;
	background-color: #ccffcc;
	height: 1080;
	
	border-radius: 16px;
	margin: 4px;
}
.button {
	cursor: default;
	
	border-radius: 4px;
	border: 4px;
	border-style: outset;
	
	display: inline-block;
	margin: 4px;
	
	background-color: #cccccc;
	border-color: #ffffff;
	
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Chrome/Safari/Opera */
	-khtml-user-select: none;    /* Konqueror */
	-moz-user-select: none;      /* Firefox */
	-ms-user-select: none;       /* IE/Edge */
}
.button:hover {
	background-color: #f2f2f2;
}
.button:active {
	background-color: #a6a6a6;
	border-color: #d9d9d9;
	
	border-style:  inset;
}
.canvas {
	z-index: 2;
}