.navbar.top{
  top: 0;
  left: 0;
  right: 0;
}

/*Styling the overall navigation bar*/
.navbar{
  background-color: #757575;
  overflow: hidden;
  width: 100%;
}

/*styling the specific elements of the navigation bar*/
.navbar a{
  float: left;
  display: block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-weight: bold;

}

/*A different style for the selected page*/
.navbar a.active{
  color: #f2f2f2;
  background-color: #757575;
  background-color: #007100;
}

/*styling for when the mouse hovers over the button*/
.navbar a:hover{
  background-color: white;
  color: #007100;
}

.footer{
  background-color: #757575;
  overflow: hidden;
  width: 100%;

  /*Text*/
  color: #007100;
}

.footer li{
  list-style-type: none;
}
.footer a{
  float: left;
  color: white;
  padding-right: 14px;
}

/*Got this from http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/*/
html,
body {
	margin:0;
	padding:0;
	height:100%;
}
#wrapper {
	min-height:100%;
	position:relative;
}
#header {
}
#content {
	padding-bottom:100px;   /* Height of the footer element */
}
#footer {
	width:100%;

	position:absolute;
	bottom:0;
	left:0;
}
#content{
  margin-top: 50;
}