@charset "UTF-8";
/* howTo.css */


/* instruction divs */
.instruction {
	display: none;  /* hide all instruction divs */
}

#welcome {
	display: block;  /* show welcome div */
}

.optionList {
	margin-left: 40px;
}

/* collapsing instructable styles */

.collapsible {
	background-color: #006;
	color: white;
	cursor: pointer;
	padding: 15px;
	width: 230px;
	margin: 10px;
	border: 1px solid #FFFFFF;
	text-align: left;
	outline: none;
	font-size: 15px;
}

.active, .collapsible:hover {
	color: #006;
	background-color: #fff;
}

.content {
	padding: 10px 20px 20px 20px;
	display: none;
	overflow: hidden;
	background-color: #006;
}


/* tree manu */
#treeUL li {
	list-style-type: none;
	color: white;
	padding: 5px;
	cursor: pointer;
}

.caret {
	cursor: pointer;
	-webkit-user-select: none; /* Safari 3.1+ */
	-moz-user-select: none; /* Firefox 2+ */
	-ms-user-select: none; /* IE 10+ */
	user-select: none;
	color: white;
}

.caret::before {
  content: "\25B6";
  color: white;
  display: inline-block;
  margin-right: 6px;
}

.caret-down::before {
  transform: rotate(90deg);  
}

#treeUL .nested {
	display: none;
}

#treeUL .active {
	display: block;
	margin-left: 20px;
	background-color: #006;
}