.clear {
    clear: both;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
  
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
	background-color: #576077;
	font-family: Franklin Gothic Book, Arial, Helvetica, sans-serif;
	color:black;
}

.wrapper {
  display: flex;
  flex-flow: row wrap;
  min-height:100%;
  position:relative;
}

.main {
    margin: 0 auto 0;
    padding: 1em;
    padding-bottom: 4em;
}

.footer {
    position: absolute;
    bottom: 0;
    width:100%;
    margin:0px;
    padding:1em;
}

/* We tell all items to be 100% width */
.header, .main, .nav, .aside, .footer {
  flex: 1 100%;
  text-align:center;
}

/* We rely on source order for mobile-first approach
 * in this case:
 * 1. header
 * 2. nav
 * 3. main
 * 4. aside
 * 5. footer
 */

/* Medium screens */
@media all and (min-width: 600px) {
  /* We tell both sidebars to share a row */
  .aside { flex: 1 auto; }
}

/* Large screens */
@media all and (min-width: 800px) {
  /* We invert order of first sidebar and main
   * And tell the main element to take twice as much width as the other two sidebars 
   */
  .main { flex: 2 0px; }
  
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { 
  	order: 4;
  	text-align:right;
  	vertical-align:bottom; 
  }
}

a:link {
	color:#303030;
}
a:active {
	color:#A0A0FF;
}
a:visited {
	color:#303030;
}
a:hover {
	color:#A0A0A0;
}