/**
* @stylesheet layout.less Layout
* @parent Styles.baseline-elements 3

* @description
* Layout classes are used to structure the main parts of a page.
**/


/**
* @styles header Header
*
* @demo demos/header.html
**/
header {
	display: block;
	background-color: @colorHeader;
	color: @clear;
	position: relative;
}

header {
	.container {
		position: relative;
		height: @headerHeight;
		text-align: left;
	}
}
	

/**
* @styles header-nav Header Nav
*
* @demo demos/header-nav.html
**/
header .nav {
	list-style-type: none;
	padding: 0;
	margin: 0 0 0 15px;
	display: inline-block;
	position: relative;
	top: -2px;
	> li {
		display: inline-block;
		line-height: @headerHeight;
		position: relative;
		> a {
			text-transform: uppercase;
			text-decoration: none;
			font-weight: bold;
			font-size: 12px;
			color: @clear;
			.text-shadow;
			padding: 5px 10px;
			border: 1px solid transparent;
		}
		&:hover > a {
			background-color: rgba(0, 0, 0, 0.1);
			border: 1px solid rgba(0, 0, 0, 0.3);
			border-radius: 2px;
		}
		&.active > a {
			background-color: rgba(0, 0, 0, 0.35);
			border: 1px solid rgba(0, 0, 0, 0.6);
			border-radius: 2px;
		}
		dropdown-menu:before {
			position:absolute;
			content : '';
			height : 15px;
			width: 15px;
			background: @clear;
			-moz-transform : rotateZ(-45deg) skewY(5deg) skewX(5deg);
			-o-transform : rotateZ(-45deg) skewY(5deg) skewX(5deg);
			-webkit-transform : rotateZ(-45deg) skewY(5deg) skewX(5deg);
			-ms-transform: rotate(-45deg);
			transform : rotateZ(-45deg) skewY(5deg) skewX(5deg);
			border: 1px solid @haze;
			top: -8px;
			z-index: -1;
			display: block;
			left: 40px;
			border-left-style: none;
			border-bottom-style: none;
		}
	}
}	


/**
* @styles header-dropdown Header Dropdown Menu

* @description
* This dropdown shows when hovering the logo.
*
* @demo demos/header-dropdown.html
**/
header {
	.dropdown-menu {
		display: none;
		visibility: collapse;
		position: absolute;
		left: 0;
		background-color: @clear;
		border: 1px solid @haze;
		border-top: none;
		z-index: 5;
		margin: 0;
		padding: 0;
		list-style-type: none;
		top: @headerHeight;
		width: 240px;
		li a {
			display: block;
			text-decoration: none;
			border-bottom: 1px solid @fog;
			color: @thunderStorm;
			font-size: 14px;
			line-height: 32px;
			padding-left: 20px;
			padding-right: 20px;
			&:hover:after {
				content: "\e000";
				color: @haze;
				font: 20px/27px Bitstrap;
				position: absolute;
				right: 10px;
			}
		}
	}
	.dropdown-menu li a:hover, 
	.dropdown-menu li.active a {
		background-color: @fog;
		color: @night;
	}
}


/**
* @styles header-bitovi-menu Bitovi Menu
*
* @description
* This dropdown menu shows when hovering the Bitovi bits icon.
* Links placed on this menu link out the external Bitovi sites.
*
* @demo demos/header-bitovi-menu.html
**/
header {
	.bitovi-menu {
		display: inline-block;
		.dropdown-menu {
			right: 0;
			left: auto;
		}
	}
	.bitovi.icon-bits {
		color: @clear;
		text-shadow: 0 -1px 0 rgba(0, 4, 159, 0.49);
		display: block;
		opacity: .2;
		font-size: 26px;
		line-height: @headerHeight;
		text-align: center;
		width: 50px;
		height: 54px;
		&:before {
			position: absolute;
			left: 13px;
		}
	}
	.bitovi-menu:hover .bitovi.icon-bits {
		background-color: @clear;
		border-left: 1px solid @haze;
		border-right: 1px solid @haze;
		color: @colorHeader;
		text-shadow: none;
		opacity: 1;
	}
	.logo-menu {
		position: relative;
		display: inline-block;
	}
	.menu-container {
		position: relative;
	}

	.bitovi-menu:hover .dropdown-menu, 
	.logo-menu:hover .dropdown-menu,
	.menu-container:hover .dropdown-menu {
		display: block;
		visibility: visible;
	}
	.pull-right {
		position: absolute;
		right: 0;
		top: 0;
	}
	
}


/**
* @styles footer Footer
*
* @description
* Styles for the footer used in the pages generated by the documentation. The footer is shown conditionally and 
* currently is not used on documentjs.com
*
* @demo demos/footer.html
**/
footer {
	background-color: @haze;
	color: @darkSkies;
	padding-top: 0px;
	padding-bottom: 0px;
	position: relative;
	text-align: right;
	height:  @footerHeight;
	
	.container {
		text-align: right;
		position: relative;
		height:  @footerHeight;
		overflow: hidden;
	}
	
	li a {
		font-size: 12px;
		font-weight: bold;
		text-transform: uppercase;
		text-decoration: none;
		.text-shadow-light;
		color: @colorHeader;
		padding: 5px 10px;
		height:  @footerHeight;
		line-height: @footerHeight;
		&:hover {
			text-decoration: underline;
		}
	}
	ul {
		list-style-type: none;
		list-style: none;
		margin: 0;
		position: absolute;
		right: 0;
		top: 0px;
	}
	li {
		display: inline-block;
	}
}


// Used to structure the main parts of a page, such as the header, the body, and the footer.
.container {
	width: 960px;
	margin: 0 auto;
}
