html, body { height: 100%; }

h1{
	color : #FFFFFF;
	text-align: center;
	text-transform: uppercase; 
	font-size: 200%;
	font-family: serif, Arial, "Times New Roman";
}
header{
	display: inline-block;
	height: 140px;
	width: 100%;
	padding: 20px;
	background: #BBBBBB;
	background-image: url("../images/SITerminal-2.jpg");
	/*background-repeat: no-repeat;*/
	background-position: center top;
}

nav a {
	color: #000000;
	background: #FFFFFF88;
	display: inline-block;
	text-align: center;
	width: 10%;
	height: 20px;
	margin-right: 1%;
	padding: 10px;
	border-radius: 5px;
	text-decoration: none;
	font-family: serif, Arial, "Times New Roman";
	white-space: nowrap;
}

nav a.long-nav {
	padding-left: 5px; 
	padding-right: 5px;
	width: 15%;

}



.active {
	color: #000000;
	background: #FFFFFF;

}

.left{
display: inline-block;
/*margin-left: auto;
margin-right: auto;*/
width: 70%;
}

.right{
float:right;
display: block;
width:25%;
font-family: serif, Arial, "Times New Roman";
}

.half-pic{
	width:40%;
	display: inline-block;
}

figure img{ border: solid; }

figcaption{font-size: x-large;}

h2{
	text-align: center;
	font-family: serif, Arial, "Times New Roman";
	font-size: xx-large;
}

h3{
	margin: 0;
	text-decoration: underline;
	font-size: x-large;

}

aside {


}

aside img {
	border: 1px solid #000000;
	width: 100%;
	margin: 2%;
}

body{
	display: inline-block;
	margin: 10px;
	padding: 10px;
	width: 90%;
}

.chart{
	display: none;
}
@media screen and (min-width: 480px) {
	.chart{
		display: inline-block; 
		float:right; 
		width:20%;
		border:1px;
		margin: 1em;
	}
}

.large-chart{
	display: none;
}
@media screen and (min-width: 480px) {
	.large-chart{
		display: inline-block; 
		float:right; 
		width:40%;
		border:1px;
		margin: 1em;
	}
}

div{
	display:inline-block; 
	width:100%;
}

img.chart:hover{
	box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

img.large-chart:hover{
	box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

p.song{
font-style: italic;
}

p, li{
	font-size: x-large;
}