@font-face {
	font-family: "Roboto";
	src: url("fonts/Roboto-Regular.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Gamaliel";
	src: url("fonts/Gamaliel.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
}

/*****************************************************************
 * General layout options
 ****************************************************************/
body {
	background-color: #a0a0a0;
	font-family: Roboto, "Times New Roman", Arial, Helvetiva, sans-serif;
}

/*****************************************************************
 * Overall page elements
 ****************************************************************/
#container {
	/* TODO: This seems like a dirty hack to get rid of the overflow from gx-0 in the top-most container */
	overflow-x: clip;
}
/* TODO: Color, Font */
#container > header {
	background-color: #4080b0;
	font-family: Gamaliel;
}

/* TODO: Color */
footer {
	color: #ffffff;
	background-color: #4080b0;
}

/* TODO: Color */
section#main {
	background-color: #eaeaea;
}

nav .active {
	background-color: #eaeaea;
}

/*****************************************************************
 * Main elements
 ****************************************************************/
h1 {
	color: #4080b0;
	font-family: Gamaliel;
	text-align: center;
}

h2 {
	color: #4080b0;
	font-family: Gamaliel;
}

.spare {
	font-size: 0.75em;
	vertical-align: middle;
}

.spare::before {
	content: "(";
}

.spare::after {
	content: ")";
}