style.css

* {
	font-family: Arial, Helvetica, sans-serif;
}

@font-face {
    font-family: mayQueen;
    src: url(mayqueen.ttf);
}

body {
	margin: 0;
}

header {
	display: block;
	padding: 5pt;
	color: #000000;
	background-color: #B0B0B0;
	border-style: solid none;
	border-width: 1pt;
	border-color: black;
}

/* TODO vertically center h1 */

header h2 {
	font-family: mayQueen;
}

@media screen and (orientation:portrait) {
	/* portrait-specific styles */
	*  {
		font-size: 110%;
	}
	
	header h1,h2 {
		font-size: 200%;
		display: block;
		margin: 0px;
	}
	
	#padding-box1, #padding-box2 {
		width: 100%;
		padding: 0;
		margin: 0;
	}

	#padding-box1 {
		float: none;
		display: block;
	}

	#padding-box2 {
		float: none;
		display: flex;
		justify-content: center;
	}

	.clear {
		clear: none;
	}
}

@media screen and (orientation:landscape) {
	/* landscape-specific styles */
	header h1,h2 {
		display: inline;
	}
	
	#padding-box1, #padding-box2 {
		width: 50%;
		padding: 0;
		margin: 0;
	}

	#padding-box1 {
		float: left;
		display: block;
	}

	#padding-box2 {
		float: right;
		display: flex;
		justify-content: flex-end;
	}

	.clear {
		clear: both;
	}
}

#welcome-box  {
	display: inline-block;
	border: 1pt solid black;
	padding: 5pt;
	background-color: #C0C0C0;
}

#welcome-box h4 {
	margin: 0px;
}

#welcome-box img{
	vertical-align: middle;
	border: 1px solid black;
	margin: 0pt 5pt;
}

content {
	display: block;
	margin: 8pt;
}

.overlap {
	color: red;
	font-weight: bold;
}

.overlap a:link{
	color: inherit;
	text-decoration: none;
}

.overlap a:visited{
	color: #8B0000;
	text-decoration: none;
}

*[id^='alert-box-'] {
    color: #050505;
	background-color:#ffecec;
    border-radius: 10pt;
    padding: 10pt 10pt 10pt 36pt;
    margin: 10pt;
    border:1pt solid #f5aca6;
}

*[id^='alert-box-'] strong {
    text-transform:uppercase;
}

.li {
	display: list-item;
}

table {
	border-collapse: collapse;
	border: 1px solid black;
	margin: 5pt;
}

th, td {
    border: 1px solid black;
	padding: 5pt;
}