body {
	background-color:#ccccff;
	font-family: 'Cantarell', sans-serif;
	font-size: 14px;
	color:#333;
	padding: 0px;
	margin: 0px;
}

/* Styles for Mondlango website, including banner, menu, content, and responsive menu toggle functionality */
.menu-button {
	display: none;
}
@media screen and (max-width: 600px) {
	.menu-button {
		display: table-cell;
	}
}

.banner {
	width:100%;
	height:100px;
	background-color:#5b92e5;
	padding:0px;
	border: 0px;
	margin:0px;
}

.banner-left {
	font-size: 1.6em;
	vertical-align: bottom;
	padding:4px 4px;
	color:#ffffff;
}

.banner-right {
	height:100px;
	padding:2px 2px;
	color:#ffffff;
	text-align:right;
}

td {
	font-family: 'Cantarell', sans-serif;
	color:#333;
}

p {
	margin:10px 0px 8px 4px;
}

.centered {
	text-align:center;
}

.line {
	margin:0px;
}

.bar {
	width:900px;
	height:5px;
	background-color:#333;
}

.menu {
	margin:1px 0px 0px 0px;
	padding:0px;
	width:140px;
	list-style:none;
	background-color:#fff;
	transition: transform 0.3s ease;
	transform: translateX(0);
	overflow: hidden; /* hide content when sliding out */
}

.menu-container.menu-open .menu {
	transform: translateX(0);
}

@media screen and (max-width: 600px) {
	.menu-container.menu-open {
		transform: translateX(0);
	}
}

@media screen and (max-width: 600px) {
	.menu-container {
		position: absolute;
		top: 100px;
		left: 0;
		width: 140px;
		transform: translateX(-100%);
		transition: transform 0.3s ease;
		z-index: 1000;
	}
}

.menu li {
	padding:0px;
	margin:0px 0px 1px 0px;
	height:30px;
	display:block;
	font-family: 'Cantarell', sans-serif;
	font-size: 1em;
	line-height:30px;
}

.menu li a {
	text-align:left;
	height:30px;
	padding:0px 15px;
	color:#ffffff;
	display:block;
	background-color:#5b92e5;
	text-decoration:none;
}
.menu li a:hover {
	background-color:#0044aa;
	color:#ffffff;
}

.menu li a.active, .menu li a.active:hover {
	background-color:#0044aa;
	color:#ffffff;
}

.submenu {
	margin:1px 0px 0px 0px;
	padding:0px 0px 0px 15px;
	width:125px;
	list-style:none;
	background-color:#fff;
}

.submenu li {
	padding:0px;
	margin:0px 0px 1px 0px;
	height:30px;
	display:block;
	font-family: 'Cantarell', sans-serif;
}

.submenu li a {
	text-align:left;
	height:30px;
	padding:0px 12px;
	color:#ffffff;
	display:block;
	background-color:#5b92e5;
	text-decoration:none;
}
.submenu li a:hover {
	background-color:#0044aa;
	color:#ffffff;
}

.submenu li a.active, .menu li a.active:hover {
	background-color:#0044aa;
	color:#ffffff;
}

.content {
	width:860px;
	padding:20px;
	background-color:#fff;
}

pre {
	font-family: 'Inconsolata', monospace;
	font-size: 1.2em;
	white-space: pre-wrap;       /* css-3 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

.hometext {
	font-size: 1.2em;
}

.tinytext {
	font-size: 0.75em;
}

.big {
	font-size: 2em;
	font-weight:bold;
}

.heading {
	font-size: 1.5em;
	font-weight:bold;
	text-align:center;
}

.subHeading {
	font-size: 1.2em;
	font-weight:bold;
}

a:link {
	color:#5b92e5;
	text-decoration:none;
}

a:visited {
	color:#5b92e5;
	text-decoration:none;
}

a:hover {
	color:#0044aa;
	text-decoration:none;
}

.button {
	width:100px;
	height:20px;
	border:0px;
	font-family: 'Cantarell', sans-serif;
	background-color:#5b92e5;
	color:#ffffff;
}

.element {
	font-family:verdana, sans-serif;
	border:1px solid #333333;
	background-color:#ffffff;
}