/* CSS Document */
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #0C2C52;
}

h1 { color: #0C2C52; font-size: 36px;}
h2 { color: #0C2C52; font-size: 28px;}


.header {
  background-color: #DCF0F7;
  text-align: center;
  padding: 20px;
}


/* Horizontal Menu Bar with colors */

li {
  float: left;
}


a {
  display: inline;
  text-align: center;
  color: #0c2c52;
  background-color: #DCF0F7;
}

a.navbar {
  display: inline;
  padding: 16px;
  text-align: center;
  color: #0c2c52;
  background-color: #DCF0F7;
}
.active {
  background-color: #DCF0F7;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 16px;
  overflow: hidden;
  background-color: #DCF0F7;
}


li.navbar {
  display: inline;
}

li {
  display: block;
  text-align: left;
}

/* Change the link color on hover */
li a:hover {
  background-color: #0C2C52;
  color: #DCF0F7;
}


/* Columns of unequal width */

.column {
  float: left;
}

/* Left and right column */
.column.side {
  width: 25%;
}

/* Middle column */
.column.middle {
  width: 75%;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

/* Footer */

.footer {
  background-color: #DCF0F7;
  text-align: center;
  padding: 10px;
}

/* Float image to left to wrap text */
img {
  float: left;
}