/* Header
----------------------------------------------- */

.header #top-bar-primary {
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyYWRpYWxHcmFkaWVudCBpZD0iZyI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMykiLz48c3RvcCBvZmZzZXQ9IjAuMzIiIHN0b3AtY29sb3I9InJnYmEoMjU1LCAyNTUsIDI1NSwgMCkiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9InJnYmEoMjU1LCAyNTUsIDI1NSwgMCkiLz48L3JhZGlhbEdyYWRpZW50PjxyZWN0IHg9IjAlIiB5PSIwJSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0icmdiYSgyNTUsIDI1NSwgMjU1LCAwKSIgLz48cmVjdCB4PSItNjguOTk0OSUiIHk9Ii0xNDEuNDIxNCUiIHdpZHRoPSIxOTcuOTg5OSUiIGhlaWdodD0iMjgyLjg0MjclIiBmaWxsPSJ1cmwoI2cpIiAvPjwvc3ZnPg==); /* IE9 SVG */
	background: radial-gradient(ellipse at 30% top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%);
}

.header .header-branding-wrap {
	@include breakpoint(medium) {
		padding: 3em 0;
	}

	.site-branding {
		@include breakpoint(small only) {
			margin: 2em 0;
			text-align: center;
		}
	}

	.description {
		margin-top: 5px;
		font-style: italic;
	}
}

#header .menu-primary {
	@include breakpoint(small only) {
		display: none;
	}
}

#header .tinynav {
	display: block;

	@include breakpoint(medium) {
		display: none;
	}
}

.header .top-bar-right {
	padding: 15px 0;
}

#header .menu-primary {
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 23px;

	li {
		a {
			color: #FCFDFD;
			font-weight: bold;
			padding: 10px 20px;
			text-align: left;
			text-decoration: none;
			text-shadow: 0 1px 0 #666;
			text-transform: uppercase;
			background: none;
			line-height: inherit;

			&:hover {
				color: #E8E8E8;
			}
		}
	}
}

#header .menu-primary > li {
	margin-right: 5px;
	border-radius: 3px 3px 0 0;

	&:hover {
		margin-top: -2px;
		position: relative;
	}
}

#header .menu-primary li.active {
	background-color: #FFF;
	box-shadow: inset 0 15px 25px -4px rgba(0,0,0,0.23);

	&:hover {
		margin-top: 0;
	}

	&.is-dropdown-submenu-parent > a::after {
		border-color: #838484 transparent transparent;
	}


	&.is-dropdown-submenu-parent .opens-right > a::after {
		border-color: transparent transparent transparent #838484;
	}

	a {
		color: #838484;
		font-weight: bold;
		text-shadow: 0 1px 0 #FFF;

		&:hover {
			text-decoration: none;
		}
	}

	.is-dropdown-submenu li {
		background-color: #FFF;
		box-shadow: none;
	}
}

#header .add-nav > li {
	border-right: 1px solid #FFF;
	padding-right: 0.75rem;

	&:last-child {
		border-right: none;
		padding-right: 0;
	}
}

#header .menu.simple li + li {
	margin-left: 0.75rem;
}

#header .add-nav li a {
	color: #FFF;

	&:hover {
		text-decoration: underline;
	}
}

/* =Header social icon styles
-------------------------------------------------------------- */
#header .soc-container {
	padding: 0;
	list-style: none;
	float: right;
}

#header .soc-container li {
	float: left;
	margin-right: 10px;
}

#header .soc-container li:last-child {
	margin-right: 0;
}

#header .soc-container li i.fa {
	vertical-align: top;
	font-size: 1rem;
}

.rss-link {
	font-size: 1.25rem;
}

#header .soc-container li a {
	color: #FFF;
}

#header .soc-container li a:hover {
	opacity: 0.7;
}

.site-branding .description {
	padding-top: 5px;
}

/* Search box styles
-------------------------------------------------------------- */

#header .search-box {
	padding: 15px;
	border-radius: 5px;
	background-color: #DDD;

	.input-group {
		margin-bottom: 0;

		.button {
			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;
		}
	}

	.input-group-field {
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
		color: $suva-grey;
		box-shadow: inset 0 5px 20px -5px rgba(0, 0, 0, 0.15);
	}
}


#header .search-box .btn-submit {
	border: none;
	width: 53px;
	height: 46px;
	cursor: pointer;
	text-indent: -9999px;
	overflow: hidden;
}

#header .search-box span {
	font-size: 11px;
	line-height: 13px;
	color: #011C2D;
	margin-left: 2px;
	padding: 2px 0 2px 23px;
	background: url('#{$clpr-image-path}/store.png') no-repeat scroll 0 0 transparent;
}

.ui-autocomplete-loading {
	background: url('#{$clpr-image-path}/indicator.gif') no-repeat right 10px center !important;
	background-color: #FFF !important;
}

ul.ui-autocomplete {
	li {
		padding: 10px 0;
		font-size: 14px;

		a {
			padding: 10px;
		}
	}

	.ui-state-hover,
	.ui-widget-content .ui-state-hover,
	.ui-widget-header .ui-state-hover,
	.ui-state-focus,
	.ui-widget-content .ui-state-focus,
	.ui-widget-header .ui-state-focus {
		color: #565656 !important;
		background-color: #FFF !important;
		font-weight: normal !important;
	}
}

a.tax-link {
	padding: 0 5px 0 0;
}