* {
  box-sizing:border-box;
}

p {
	font-family: Verdana, Arial, sans-serif;
	color: #006;
	font-size: 14px;
}

h1 {
	font-size: 24px;
	font-family: Verdana, Geneva, sans-serif;
	color: navy;
}
h2 {
	font-size: 18px;
	font-family: Verdana, Geneva, sans-serif;
}
h3 {
	font-size: 14px;
	font-family: Verdana, Geneva, sans-serif;
}
h4 {
	font-size: 14px;
	font-family: Verdana, Geneva, sans-serif;
}
.small-12 {
	font-family: Verdana, Arial, sans-serif;
	color: #006;
	font-size: 12px;
}

.left {
  background-color:#fff;
  padding:20px;
  float:left;
  width:18%; /* The width is 20%, by default */
}

.main {
  background-color:#fff;   /* BG-colour was #f1f1f1 */
  padding:20px;
  float:left;
  width:80%; 
}
.vertical-menu {
  width: 250px;
  height: 1200px;
  overflow-y: auto;
}

.vertical-menu a {
  background-color: #eee;
  color: black;
  display: block;
  padding: 12px;
  text-decoration: none;
}

.vertical-menu a:hover {
  background-color: #ff8080;
}

.vertical-menu a.active {
  background-color: #04AA6D;
  color: white;
}
img {
  max-width: 100%;
  height: auto;
}
#header {
	/* height: 200px; */
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	/* background-image: url(images/header.jpg); */
	background-repeat: no-repeat;
	background-color: #ddd;
}
#footer {
	text-align: center;	
	height: 80px;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	color: navy;
	background-color: #ddd;
	background-repeat: repeat;
}
.floatClear {
	clear: both;
}
/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
 .left  , .main, .right {width:100%;}
}