root, document, info, navigation, item, link {
	display: block;
}

root, document {
	background: #fff;
	color: #000;
}

info {
	margin: 0.5em;
}

navigation[type="flyout"] {
	width: 20%;
	background: #000;
	color: #fff;
	margin-left: 0.5em;
}

navigation[type="flyout"] > item {
	width: 100%;
	position: relative;
}

navigation[type="flyout"] > item > link {
	padding: 0 0.2em;
	height: 1.4em;
	line-height: 1.4em;
	font-weight: bold;
	cursor: pointer;
	border-bottom: 1px solid;
	
}

navigation[type="flyout"] > item > link:hover {
	background: #c00;
}


navigation[type="sub-menu"] {
	width: 100%;
	background: #000;
	color: #fff;
	position: absolute;
	top: -1000em;
}

navigation[type="sub-menu"] > item {
	width: 100%;
	height: 1.4em;
}

navigation[type="sub-menu"] > item > link {
	height: 100%;
	font-weight: bold;
	cursor: pointer;
	padding: 0 0.2em;
	border-bottom: 1px solid #fff;
	line-height: 1.4em;
}

navigation[type="sub-menu"] > item > link:hover {
	background: #c00;
}


item:hover > navigation[type="sub-menu"] {
	top: 0;
	left: 100%;
}