body {
  margin: 0;
  max-width:80em
}

#layout-menu-box {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 200px;
  height: 100%;
  z-index: 1;
  background-color: #f4f4f4;
}

#layout-content-box {
  position: relative;
  margin-left: 200px;
  background-color: white;
}

h1 {
  margin-top: 0.5em;
}

#layout-banner {
  color: white;
  background-color: #73a0c5;
  font-family: Arial,Helvetica,sans-serif;
  text-align: left;
  padding: 0.8em 20px;
}

#layout-title {
  font-family: serif;
  font-size: 1.7em;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin: 0;
}

#layout-menu {
  height: 100%;
  border-right: 3px solid #eeeeee;
  padding-top: 0.8em;
  padding-left: 15px;
  padding-right: 0.8em;
  font-size: 1.0em;
  font-family: Arial,Helvetica,sans-serif;
  font-weight: bold;
}
#layout-menu a {
  line-height: 2em;
}
#layout-menu a:link, #layout-menu a:visited, #layout-menu a:hover {
  color: #527bbd;
  text-decoration: none;
}
#layout-menu a:hover {
  color: navy;
  text-decoration: none;
}
#layout-menu #page-source {
  border-top: 2px solid silver;
  margin-top: 0.2em;
}

#layout-content {
  padding-top: 0.2em;
  padding-left: 1.0em;
  padding-right: 0.4em;
}

@media (max-width: 640px) {
	#layout-menu-box {
		position: inherit;
		left: inherit;
		top: inherit;
		width: inherit;
		height: inherit;
		z-index: inherit;
	}

	#layout-content-box {
		margin-left: inherit;
	}

	#layout-menu div {
		display: inline;
	}
	#layout-menu div a {
		display: inline-block;
		padding: 0 10px 0 0;
	}
	#layout-menu #page-source {
		border: none;
	}
}