/**
 * Header (Topbar, Header, Main Nav Menu)
 * ========================================================
 */


/************* Topbar *************/

#topbar {
	background: @bgHighlightColor;
	ul, li { display: inline; }
}
#topbar-left {
	text-align: left;
	color: @baseFontColor * 2;
	.small-font(); // same as #topbar-right-inner input below
	padding-top: 8px; // same as #topbar-right-inner input below
	padding-bottom: 7px; // same as #topbar-right-inner input below
	width: 50%;
	.widget_text { font-style: italic; }
}
#topbar-right {
	text-align: right;
	overflow: hidden;
	padding-right: 5px;
	width: 50%;
}
#topbar-right-inner {
	float: right;
	background: @bodyBackground;
	line-height: unit( 1.333333 * 0.857142, em);; // to match .small-font() same as #topbar-left above
	.box-shadow( 0 0 6px 0 rgba(0, 0, 0, 0.3); );
	.social-icons-icon {
		line-height: inherit;
		height: auto;
		padding: 8px 0 9px 0; // top,bottom: same as #topbar-left above
		border-right-style: none;
		border-top: none;
		border-bottom: none;
	}
	.social-icons-icon:last-child { border-right-style: solid; }
	.searchbody { display: inline; }
	.searchform {
		margin-bottom: 0;
		position: relative;
		display: inline-block;
	}
	input {
		background: @bodyBackground;
		color: inherit;
		border-top: none;
		//border-right: none;
		border-bottom: none;
		.small-font(); // same as #topbar-left above
		padding: 8px 7px 7px 35px; // top,bottom: same as #topbar-left above
		vertical-align: bottom;
		&:focus { .box-shadow(none); }
	}
	i.fa-search {
		position: absolute;
		top: 50%;
		margin-top: -0.5em;
		left: 13px;
	}
}
#topbar .widget { margin: 0; }
#topbar .widget-title {
	display: none;
	margin: 0;
	font-size: @baseFontSize;
	line-height: @baseLineHeight;
}

/*** Responsive Topbar ***/

@media only screen and (max-width: @breakPoint) {
	#topbar-left {
		text-align: center;
		width: auto;
	}
	#topbar-right {
		text-align: center;
		width: auto;
		padding: 0;
		margin: 0 -15px;
	}
	#topbar-right-inner { float: none; }
}


/************* Header Layout *************/

#header {
	position: relative;
	.table { table-layout: fixed; /*To word wrap loooong Titles*/ }
}
#branding { width: 40%; }
#header-aside { width: 60%; }

/*** Responsive Header ***/

@media only screen and (max-width: @breakPoint) {
	#header .table, #branding, #header-aside {
		width: 100%;
	}
}


/************* Logo *************/

#branding {
	padding-top: 13px;
	padding-bottom: 13px;
}

/*** Text Logo ***/

#site-logo-text {}
#site-title {
	margin: 0;
	font-size: 54px;
	line-height: 1em;
	font-weight: bold;
	text-transform: uppercase;
	a { color: inherit; }
	a:hover { text-decoration: none; }
}
.site-logo-with-icon {
	#site-title {
		position: relative;
		padding-left: 54px;
	}
	#site-title i {
		font-size: 0.888888em; // 48px from 54px
		position: absolute;
		top: 4px;
		left: 0;
		width: 1em;
		text-align: right;
	}
	#site-description { padding-left: 54px; }
}
#site-description {
	margin: 0;
	font-size: 14px;
	line-height: 1em;
	text-transform: uppercase;
	.opacity(60);
}

/*** Img Logo ***/

#site-logo-img img { max-height: 120px; }

/*** Responsive Logo ***/

@media only screen and (max-width: @breakPoint) {
	#page-wrapper {
		#site-title, #site-description {
			text-align: center;
			padding-left: 0;
		}
	}
	.site-logo-with-icon {
		#site-title i {
			position: relative;
			top: -4px;
			margin-right: 7px;
		}
	}
}


/************* Header Aside - Main Nav Menu *************/

#header-aside { text-align: right; }
#menu-primary { }
#menu-primary-items {
	display: inline-block;
	text-align: left;
	font-size: @baseFontSizeSmall;
	text-transform: uppercase;
	font-weight: bold;
	font-weight: 800;
	vertical-align: middle;
}
#menu-primary-items li {
	margin-right: 0;
	display: list-item;
}
#menu-primary-items li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ }
#menu-primary-items > li {
	margin: 0 0 0 18px;
	float: left;
}
#menu-primary-items > li a {
	// line-height: @baseLineHeight; // reset line height for custom font size via admin panel
}
#menu-primary-items > li > a { padding: 15px 10px; }
#menu-primary-items li.current-menu-item > a, #menu-primary-items li:hover > a {
	// background: @bgHighlightColor;
}


/*** Superfish Menu ***/

.sf-menu a {
	display: block;
	position: relative;
}
.sf-menu li { position: relative; }
.sf-menu li:hover > ul, .sf-menu li.sfHover > ul { display: block; }
.sf-menu ul {
	position: absolute;
	display: none;
	top: 100%;
	left: 0;
	z-index: 99;
	min-width: 13em;
	background: @contrastColor;
	padding: 6px 0;
}
.sf-menu ul ul {
	top: -6px;
	left: 100%;
}
.sf-menu ul li { }
.sf-menu ul li:hover { background: @contrastColor + #222222; }
.sf-menu ul li a {
	padding: 6px 8px 6px 15px;
	line-height: 1.333333em;
}

/*** Superfish Menu Arrows ***/

#menu-primary .sf-menu.sf-arrows li a.sf-with-ul { padding-right: 17px; }
.sf-menu.sf-arrows .sf-with-ul:after {
	position: absolute;
	right: 5px;
	.fontawesome();
	content: "\f0d7";
}
.sf-menu.sf-arrows ul .sf-with-ul:after {
	content: "\f0da";
	right: 8px;
	top: 50%;
	margin-top: -0.5em;
	line-height: 1em;
}

/*** Responsive Menu ***/

.menu-toggle {
	display: none;
	cursor: pointer;
	border: solid 1px rgba(255,255,255,0.2);
	background: @contrastColor + #222;
	padding: 5px 0;
}
.menu-toggle .fa { margin-left: 5px; }

@media only screen and (max-width: @breakPoint) {
	#header-aside { text-align: center; }
	#menu-primary { margin-bottom: 20px; }

	/* Responsive Menu */
	.menu-toggle { display: block; }
	#menu-primary-items {
		display: none;
		border: solid 1px rgba(255,255,255,0.3);
		background: @contrastColor + #222;
		border-top: none;
		text-align: left;
	}
	#menu-primary-items > li {
		float: none;
		margin: 0px;
	}
	#menu-primary-items a { }//border-bottom: solid 1px @bgHighlightToneColor;
	#menu-primary-items ul {
		border: none;
		background: @contrastColor + #222;
	}
	#menu-primary-items ul a { border-top: none; }
	//#menu-primary-items li.current-menu-item > a, #menu-primary-items li:hover > a { color: @baseFontColor * 2; }
	#menu-primary-items > li > a, .sf-menu ul li a { padding: 6px 6px 6px 15px; }
	.sf-menu ul li a { padding-left: 40px; }// line-height: inherit;
	.sf-menu ul ul { top: 0; }
	.sf-menu ul ul li a { padding-left: 65px; }
	.sf-menu ul ul ul li a { padding-left: 90px; }

	/* Responsive Menu - Override Superfish */
	.sf-menu a:hover { background: @contrastColor; }
	.sf-menu ul {
		position: relative;
		top: auto;
		left: auto;
	}
	.sf-menu ul {
		display: block !important;
		height: auto !important;
		opacity: 1 !important; /* Override inline styles for jquery animation by superfish */
	}
	ul.sf-menu ul li:hover { background: transparent; } // Overqualify to override dynamic css that follows for non mobile
	.sf-menu ul ul { left: auto; }
	.sf-menu.sf-arrows .sf-with-ul:after {
		margin-left: 5px;
		right: auto;
	}
	.sf-menu.sf-arrows ul .sf-with-ul:after {
		right: auto;
		content: "\f0d7";
	}
}

@media only screen and (min-width: @breakPointUpper) {
	#menu-primary-items { display: inline-block !important; /*Override any leftover inline style applied by responsive JS in smaller screens. Example: if a screen is resized when the menu is toggled off */ }
}