/*=============================================================================
  File:         bluephrase.com/css/banner.css
  Language:     CSS
  Copyright:    Read Write Tools © 2019
  License:      CC-BY-NC-ND 4.0
  Initial date: Sep 13, 2019
  Contents:     Top banner
=============================================================================*/

/* ---------- layout: banner ---------- */
#banner {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--banner-height);
	display: flex;
	align-items: center;
	background-color: var(--black);
	border-bottom: 2px solid var(--dark-gray);
}
#banner div {
	margin: 0;
	text-align: center;
}
#banner #left-ear1 {
	flex-basis: 4em;
}
#banner div#icon {
	line-height: 0;
	padding:0.6rem;
	margin-right: 1rem;
	background-color: var(--pure-black);
	border-top-right-radius: 1.25rem 50%;
	border-bottom-right-radius: 1.25rem 50%;
}
div#icon a:focus {
	outline: none;
}
#banner #left-ear2 {
	text-align: left;
	flex-basis: 7em;
	flex-shrink: 0;
}
#banner #left-ear2 a {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: bold;
	color: var(--white);
}

/* ---------- layout: bannermenu ---------- */
#banner-menu {
	flex-basis: calc(100% - 4em);
}
#banner-menu {
	display: flex;
	justify-content: space-around;
	flex-wrap: nowrap;
	max-width: 60rem;
}
#banner-menu a {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 13pt;
	color: var(--pure-white);
	text-decoration: none;
	padding: 0.15rem 1rem;
	margin-left: 0.25rem;
	background-color: var(--pure-black);
	border-radius: 1rem;
	border: 2px solid var(--dark-gray);
	min-width: 3rem;
	display: inline-block;
	cursor: pointer;
}
#banner-menu a:hover,
#banner-menu a:visited:hover {
	color: var(--yellow);
	background-color: var(--nav-black);
	border: 2px solid var(--pure-black);
}