@import "../_yaml-var-globals";

@media all {

	/* 4 navigation levels defined */
	.ym-vlist {
		margin:0 0 1.5em 0;
		list-style-type:none;
		background: transparent;
		border: 0 none;

		ul {
			list-style-type:none;
			margin:0;
			padding:0;
			width:100%;
			overflow:hidden;
			border-top:2px #ddd solid;
			border-bottom:2px #ddd solid;
		}

		ul ul {
			border: 0 none;
		}

		li {
			float:left; // LTR
			width:100%;
			margin:0;
			padding:0;
			background-color:#fff;
		}

		a,
		strong,
		span {
			display:block;
			padding:3px 0px 3px 10%;
			text-decoration:none;
			border-bottom:1px #ddd solid;
		}

		a,
		a:visited {
			color:#444;
		}

		li span {
			display:block;
			font-weight:bold;
			border-bottom:1px #ddd solid;
		}

		// active list element
		li.active {
			color:#fff;
			background-color:#444;
			strong {
				font-weight:bold;
			}
		}

		// Level 1
		li {
			a,
			strong,
			span { width:90%; padding-left:10%; } // LTR

			a:focus,
			a:hover,
			a:active { background-color:#888; color:#fff; outline: 0 none; }
		}

		// Level 2
		li ul li  {
			a,
			strong,
			span { width:80%; padding-left:20%; } // LTR

			a,
			a:visited { background-color:#f8f8f8; color:#333; }
			a:focus,
			a:hover,
			a:active { background-color:#888; color:#fff; }
		}

		// Level 3
		li ul li ul li {
			a,
			strong,
			span { width:70%; padding-left:30%; } // LTR

			a,
			a:visited{ background-color:#f0f0f0; color:#222; }
			a:focus,
			a:hover,
			a:active { background-color:#888; color:#fff; }
		}

		// Level 4
		li ul li ul li ul li {
			a,
			strong,
			span { width:60%; padding-left:40%; } // LTR

			a,
			a:visited { background-color:#e8e8e8; color:#111; }
			a:focus,
			a:hover,
			a:active { background-color:#888; color:#fff; }
		}
	}

	/* title */
	.ym-vtitle {
		font-weight:bold;
		font-size:100%;
		width:90%;
		padding:3px 0px 3px 10%; // LTR
		margin:0;
		color:#444;
		background-color:#fff;
		border-top:2px #ddd solid;

		& + ul {
			border-top:4px #888 solid;
		}
	}
}