@CHARSET "ISO-8859-1";

.helpArea {
	display: grid;
	grid-template-columns: 35vw 35vw;
	grid-template-rows: 2vw auto;
	grid-template-areas: "help_info help_info" "help_text help_img";
	position: absolute;
	z-index: 33;
	top: 200px;
	left: 100px;
	width: 70vw;
	height: 35vw;
	background-color: #576680;
	color: #fff;
	border-radius: 6px;
	border: 5px solid #576680;
	box-shadow: 0px 0px 0px 1px #fff inset;
}

.helpInfo {
	grid-area: help_info;
	font-weight: 800;
	font-size: 1.2vw;
	margin-top: 10px;
	margin-left: 10px;
}

.helpInvisible {
	visibility: hidden;
}

.helpMessages {
	grid-area: help_text;
}

.helpImg {
	grid-area: help_img;
	margin: 20px;
}

.helpPic {
	max-width: 100%;
}

.helpNode {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: 15px auto;
	grid-template-areas: "header" "text";
	margin-top: 5px;
	margin-left: 5px;
	border-left: 3px solid transparent;
}

.helpNode:hover {
	border-left: 3px solid #FFFFFF;
}

.helpHeader {
	grid-area: header;
	margin-left: 10px;
	font-size: 1vw;
	font-weight: 800;
}

.helpText {
	grid-area: text;
	margin-left: 20px;
	padding-top: 2px;
	font-size: 0.8vw;
}