/*

***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** *****

*	FILE NAME:			master_masthead.css												*

*	FILE PURPOSE:		css styles for masthead											*

***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** *****

*/





/*

***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** *****

*	NAME:		masthead																*

*	TYPE:		id																		*

*	PURPOSE:	masthead base class														*

***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** *****

*/

[id*="masthead"] {

	display:					none;

	position:					fixed;

	padding-top:				5px;

	top:						0;

	right:						0;

	left:						0;

	text-align:					center;

	font-size:					11.7pt;

	font-family:				'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

	color:						white; 

	text-shadow:				0 0 6px yellow;

	z-index:					1000;

	background-color:			black;

	background-color:			rgba(0,0,0,.8);

}





/*

***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** *****

*	NAME:		masthead a																*

*	TYPE:		id																		*

*	PURPOSE:	masthead link style														*

***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** *****

*/

#masthead a {

	padding:					10px;

	color:						white;

}



#masthead a:hover {

	color:						rgb(240, 222, 119);

}





/*

***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** *****

*	NAME:		title																	*

*	TYPE:		id																		*

*	PURPOSE:	masthead title banner style												*

***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** *****

*/

#title {

	width:						fit-content;

	display:					block;

	margin:						auto;

	font-size:					16pt;

	font-weight:				bold;

}





/*

***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** *****

*	NAME:		drop_btn																*

*	TYPE:		class																	*

*	PURPOSE:	nonclickable dropdowns													*

***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** *****

*/

.drop_btn {

	padding:					16px;

	border:						none;

	font-size:					11.7pt;

	color:						white; 

	text-shadow:				0 0 6px yellow; 

	background-color:			transparent;

	user-select:				none;

}





/*

***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** *****

*	NAME:		dropdown																*

*	TYPE:		class																	*

*	PURPOSE:	holds entire dropdown menu for one element of masthead					*

***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** *****

*/

.dropdown {

	display:					inline-block;

	position:					relative;

	user-select:				none;

}



.dropdown:hover .dropdown_content {

	display:					block;

}





/*

***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** *****

*	NAME:		dropdown_content														*

*	TYPE:		class																	*

*	PURPOSE:	holds all hideable dropdown content in menu								*

***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** *****

*/

.dropdown_content {

	min-width:					160px;

	display:					none;

	position:					absolute;

	box-shadow:					0px 8px 16px 0px rgba(0,0,0,0.2);

	background-color:			rgba(0,0,0,.8);

	z-index:					1;

}



.dropdown_content a {

	color: 						initial;

	text-decoration:			none;

	display:					block;

}





/*

***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** *****

*	NAME:		masthead_mobile															*

*	TYPE:		id																		*

*	PURPOSE:	mobile masthead															*

***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** *****

*/

#masthead_mobile {

	display:					block;

	position:					relative;

	margin:						-105px -28px 0 -30px;

	font-size:					14pt;

}



#masthead_mobile a {

	width:						100%;

	padding:					4px 0 4px 0;

	display:					block;

	color:						white;

}





/*

***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** *****

*	NAME:		dropdown_mobile															*

*	TYPE:		class																	*

*	PURPOSE:	holds entire dropdown menu for one element of mobile masthead			*

***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** *****

*/

.dropdown_mobile {

	display:					none;

	font-size:					13pt;

}





/*

***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** *****

*	NAME:		button_mobile															*

*	TYPE:		class																	*

*	PURPOSE:	button to open or close submenu											*

***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** *****

*/

.button_mobile {

	padding:					4px 0 4px 0;

	cursor:						pointer;

	user-select:				none;

	font-size:					14pt;

}





/*

***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** *****

*	NAME:		menu_button_mobile														*

*	TYPE:		class																	*

*	PURPOSE:	button to open or close menu											*

***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** *****

*/

.menu_button_mobile {

	padding:					2px;

	cursor:						pointer;

	user-select:				none;

}





/*

***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** *****

*	NAME:		masthead, masthead_mobile												*

*	TYPE:		id																		*

*	PURPOSE:	determine which version of masthead is used based on screen size		*

***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** *****

*/

@media screen and (min-width: 850px) {

	#masthead {

		display:				block;

	}

	#masthead_mobile {

		display:				none;

	}

}