// ---------------------- Utility Nav

.navutility {  
	text-transform: none;
	// these borders give the entire element the appearance of uniform top/bottom padding
	// border-top: 5px solid $utility-nav-holder-bg;
	// border-bottom: 5px solid $utility-nav-holder-bg; 
}

.navutility__links,
.navutility__search,
.navutility__social {
	display: inline-block;
	text-align: top;
	vertical-align: top;
}

.navutility__links li {
	display: inline-block; 
	float: left; // the float keeps them flush
}
.navutility__links a {
	display: block; 
	background-color: $utility-nav-bg; 
	color: $utility-nav-color; 
	padding: $utility-nav-pad; 
	text-decoration: none; 
	white-space: nowrap; 
	text-transform: $utility-nav-text-transform;

	// we shouldn't need these:
	//font-size: $navutility-global-font-size;
	//line-height: $nav-global-line-height;

	&:active,
	&:focus,
	&:hover {
		color: $utility-nav-hover; 
		background-color: $utility-nav-bg-hover; 
	}

}

.navutility__search {
	@extend .cf;
}

/*
We need to add some styles to the utility nav search bar to over-ride the form styles.
We might need to throw some !important; bombs on the font sizes
*/

.navutility__search form {}

.navutility__input,
.navutility__button {
	float: left;
	display: inline;
}

.navutility__input {
	margin: 0 !important;
	padding: $navbar-search-padding; 
	background-color: $navbar-search-bg-color; 
	font-size: $navutility-font-size !important;
	line-height: $nav-global-line-height !important;
	border: 0px !important;
	outline: none !important;

	&:hover {
		outline: none !important;
		border: 0px !important;
		background-color: $navbar-search-bg-color-hover;
	}
	&:active,
	&:focus {
		outline: none !important;
		border: 0px !important;
		background-color: $navbar-search-bg-color-active;
	}

}

.navutility__button {
	margin: 0 !important;
	padding: $navbar-search-padding;  
	//font-size: $navbar-search-font-size !important;
	//line-height: $navbar-search-line-height !important;
	border: 0px !important;
	outline: none !important;	
	background-color: $button-navbar-background-color;

	&:hover {
		outline: none !important;
		border: 0px !important;
		background-color: $button-navbar-background-color-hover;
	}
	&:active,
	&:focus {
		outline: none !important;
		border: 0px !important;
		background-color: $button-navbar-background-color-active;
	}

}

// the font-awesome icons

.navutility__social { // the ul
	//vertical-align: middle !important;
}
.navutility__social li {
	display: inline-block;
	float: left;
	margin: $navbar-social-icons-margin;
}
.navutility__social a {
	display: block; // this forces the a tag to respect the padding after the inline-block li setting
	font-size: $navutility-font-size;
	line-height: $nav-global-line-height;
	padding: $navbar-social-icons-padding;
}