// Toolbar
// 
// The toolbar is a few groups of navigation all rolled into one. 
// 
// Styleguide 23

// Toolbar
// 
// Markup:
// <div class="toolbar">
//     <div class="personal-bar">
//         <ul class="list personal-nav">
//             <li class="list-item">
//                 <a href="#" class="txt-link">Item One</a>
//             </li>
//             <li class="list-item">
//                 <a href="#" class="txt-link">Item Two</a>
//             </li>
//         </ul>
//     </div>
//     <div class="bar">
//         <ul class="list user-nav">
//             <li class="list-item">
//                 <a href="#" class="txt-link">Item One</a>
//             </li>
//             <li class="list-item">
//                 <a href="#" class="txt-link">Item Two</a>
//             </li>
//         </ul>
//         <ul class="list nav">
//             <li class="list-item">
//                 <a href="#" class="txt-link">Item One</a>
//             </li>
//             <li class="list-item">
//                 <a href="#" class="txt-link">Item Two</a>
//             </li>
//         </ul>
//     </div>
// </div>
// 
// Styleguide 23.1

.toolbar {
	.fontfamily(sans);

	width: 100%;
	overflow: visible;
	.txt-link {
		font: inherit;
		color: @usernav-item-color;
		&:hover,
		&:active,
		&:focus,
		&:visited {
			color: @usernav-item-color;
		}
	}
	.personal-bar {
		.clearfix;

		width: 100%;

		background-color: @tbar-personal-bgcolor;
		.personal-nav {
			.fontsize(1.2);
			.clearfix;

			width: 100%;
			padding: 9px 10px;
			margin: 0;

			text-align: right;
			list-style-type: none;
		}
		.list-item {
			.clearfix;

			display: inline-block;
			padding: 0 0 0 10px;

			color: @colorS2;
		}
		.txt-link {
			text-decoration: underline;
		}
	}
}
.nav {
	display: inline-block;
	margin: 0;
	.list-item {
		.fontsize(1.3);

		position: relative;

		display: inline-block;
		padding: 0;

		font-weight: bold;
		color: @usernav-item-color;
		vertical-align: top;
		cursor: pointer;
	}
}
.user-nav {
	display: inline-block;
	float: right;
	margin: 0;
	.list-item {
		.fontsize(1.2);

		position: relative;

		display: inline-block;
		float: left;
		width: auto;
		height: auto;
		padding: 0;

		color: @usernav-item-color;
		vertical-align: top;
		cursor: pointer;
		> .icon {
			overflow: hidden;
		}
	}
	.languages {
		// a usernav inside a usernav
		.user-nav {
			display: none;
		}
		.icon {
			width: 10px;
			height: 10px;
			margin: 0 0 0 5px;

			background: url(@usernav-item-language-icon) right -1750px no-repeat;
		}
		&:hover {
			color: #333;

			background-color: @usernav-item-language-bgcolor-hover;
			.icon {
				background-position: right -1800px;
			}
		}
	}
}