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

/* ---------- layout: masthead ---------- */
#masthead {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: var(--masthead-height);
	display: flex;
	align-items: center;
}
#masthead div#leftmast {
	flex-basis: 13rem;
	min-width: 13rem;
	text-align: left;
	padding-left: 1rem;
}	
#masthead div#rightmast {
	flex-basis: 12rem;
	min-width: 12rem;
	text-align: right;
	padding-right: 1rem;
}
#masthead div#centermast {
	flex-basis: 100%;
	min-width: 0;
}
#masthead div#centermast p {
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
div#masthead p {
	margin-top: 1rem;
	font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.8rem;
    line-height: 1.2em;
    letter-spacing: 1px;
}

/* ---------- masthead colors ---------- */
#masthead {
	background-color: var(--black);
	color: var(--pure-white);
	border-top: 2px solid var(--dark-gray);
}
#masthead a {
	color: var(--js-blue);
	cursor: pointer;
}
#masthead a:visited {
	color: var(--js-blue);
}
#masthead a:visited:hover,
#masthead a:hover {
	color: var(--yellow);
}
#masthead span#vocab,
#masthead span#group,
#masthead span#name {
	color: var(--js-blue);
}

/* ---------- search button ---------- */
#masthead a.masthead-button {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 10pt;
	color: var(--pure-white);
	text-decoration: none;
	padding: 0.15rem 0.5rem;
	margin-left: 0.25rem;
	background-color: var(--pure-black);
	border-radius: 1rem;
	border: 2px solid var(--dark-gray);
	min-width: 1rem;
	display: inline-block;
	text-align: center;
}
#masthead a.masthead-button:hover,
#masthead a.masthead-button:visited:hover {
	color: var(--yellow);
	background-color: var(--nav-black);
	border: 2px solid var(--pure-black);
}

#masthead a.masthead-button:focus {
	outline-offset: 1px;
	outline: 1px dotted #777;
}