pyramid_game_title.css

/*
<!--------------------------------------------------------------->
<!--                                                           -->
<!--             Copyright (C) Jesbus Technology               -->
<!-- Written by Jesse Busman <info@jesbus.com>, September 2017 -->
<!--                                                           -->
<!--------------------------------------------------------------->
*/

/***************************************************************/
/***************************************************************/
/*********************** TITLE BAR *****************************/
/***************************************************************/
/***************************************************************/

#titleBar
{
	border-bottom: 2px black solid;
	background-color: #000000;
	padding: var(--title-bar-padding-top) 20px var(--title-bar-padding-bottom) 20px;
	color: var(--menu-font-color);
	position: fixed;
	width: 100%;
	top: 0;
	left: 0; 
	height: var(--title-bar-inner-height);
	transition: background-color 0.5s, border-color 0.5s;
	text-align: center;
	z-index: 10;
}
#titleBar > #title
{
	font-size: 34pt;
	font-weight: normal;
	margin: 0;
}
#titleBar > #subtitle
{
	font-size: 11pt;
	font-weight: normal;
	margin: 0;
}




/***************************************************************/
/***************************************************************/
/************************ ABOUT BOX ****************************/
/***************************************************************/
/***************************************************************/

#aboutBox
{
	display: table-cell;
	border: 0;
	background-color: #000000;
	font-size: 10pt;
	padding: 0;
	margin:0;
	outline: 0;
	position: fixed;
	top: 0px;
	right: 0px;
	height: 90px;
	width: 120px;
	z-index: 100000;
}
#aboutBox > div
{
	color: white;
	padding-top: 10px;
}
#aboutBox > a
{
	display: inline-block;
	text-align: center;
	width: 100%;
	height: 25px;
	padding-top: 7px;
	margin-bottom: -10px;
	color: white;
	transition: color 0.4s, font-size 0.4s;
}
#aboutBox > a:hover
{
	color: yellow;
	font-size: 12pt;
}



/***************************************************************/
/***************************************************************/
/********************** SETTINGS BOX ***************************/
/***************************************************************/
/***************************************************************/

#settingsBox
{
	position: fixed;
	top: 0px;
	right: 120px;
	color: white;
	width: 200px;
	height: 80px;
	z-index: 100000;
	font-size: 10pt;
	padding-top: 10px;
	padding-left: 5px;
	background-color: black;
	opacity: 1.0;
}





/***************************************************************/
/***************************************************************/
/*********************** STATUS BOX ****************************/
/***************************************************************/
/***************************************************************/


.statusBoxMiddleOfScreen
{
	position: fixed;
	top: 100px;
	left: calc(50% - 250px);
	
	width: 500px;
	border: black solid 2px;
	background-color: #000000;
	padding: 10px;
	min-height: 400px;
	height: 400px;
}
.statusBoxTopLeft
{
	border: black solid;
	border-width: 0px 2px 2px 0px;
	background-color: #000000;
	font-size: 9pt;
	padding: 10px;
	position: fixed;
	top: 0px;
	left: 0px;
	height: 60px;
	width: 120px;
	transition: background-color 0.5s, border-color 0.5s;
}
.statusBoxTopLeft > #statusBoxLoadingBar
{
	width: 0px;
	height: 0px;
	border-width: 0px;
}

#statusBox
{
	margin-bottom: 5px;
	color: var(--menu-font-color);
	transition: top 0.5s, left 0.5s;
	text-align: center;
	vertical-align: middle;
	z-index: 10;
}

#statusBoxStatus > a, #statusBoxStatus > a:visited, #statusBoxStatus > a:active
{
	color: white !important;
	transition: color 0.4s;
}
#statusBoxStatus > a:hover
{
	color: yellow !important;
}

#statusBoxStatus
{
	display: inline-block;
	transition: font-size 0.5s, margin-top 0.5s;
}
#statusBoxLoadingBar
{
	border: 2px solid white;
	border-radius: 10px;
	display: inline-block;
	width: 400px;
	height: 50px;
	overflow: hidden;
	transition: width 0.5s, height 0.5s, border-width 0.5s;
	margin-top: 50px;
	text-align: left;
	padding: 0px 0px 0px 3px;
}
#statusBoxLoadingBar > div
{
	height: 40px;
	width: 40px;
	background-color: #DDDDDD;
	display: inline-block;
	margin: 5px 2px 0px 2px;
	border-radius: 5px;
}


.statusBoxTopLeft > #statusBoxStatus
{
	margin-top: 20px;
	font-size: 11pt;
}
.statusBoxMiddleOfScreen > #statusBoxStatus
{
	margin-top: 25px;
	font-size: 17pt;
}





/***************************************************************/
/***************************************************************/
/**************** ERROR ANNOUNCEMENT BOX ***********************/
/***************************************************************/
/***************************************************************/

.errorAnnouncementBoxDisplayed
{
	left: calc(50% - 250px) !important;
}
#errorAnnouncementBox
{
	position: fixed;
	bottom: 0;
	left: -1000px;
	
	width: 500px;
	border: black solid 2px;
	background-color: #000000;
	padding: 10px;
	min-height: 240px;
	height: 240px;
	
	color: var(--menu-font-color);
	transition: top 0.5s, left 0.5s;
	text-align: center;
	vertical-align: middle;
	z-index: 10;
	
	
}

#errorAnnouncementBox > a, #errorAnnouncementBox > a:visited, #errorAnnouncementBox > a:active
{
	color: white !important;
	transition: color 0.4s;
}
#errorAnnouncementBox > a:hover
{
	color: yellow !important;
}

#errorAnnouncementBox
{
	margin-top: 25px;
	font-size: 10.5pt;
}

#errorAnnouncementBox > ol
{
	font-size: 10.5pt;
	text-align: left;
}

#errorAnnouncementBox > ol > li
{
	margin-bottom: 10px;
}