html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body { margin: 0 auto; }

footer, header, .left-column { position: relative; clear: both; }

.wrapper {
  max-width: 62.5em;
  margin: 0 auto;
}


footer, header a {
     color: black;
}

footer, header a:hover {
     color: grey;
}


hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid blue;
    margin: 1em 0;
    padding: 0; 
}


.left-column, footer, header {  border: 1px solid  #ccc; padding: 1.25em; margin: .5em; }

.left-column { line-height: 150%; font-family: Sans-Serif;}

.left-column > h1, h2, h3 { color: blue;}

.left-column > h1 { font-size: 300%; line-height: 110%; }


.in-column-container-left {
	max-width: 30em;
	line-height: 100%;
	font-size: 110%;
	float: left;
	overflow: hidden;
	display: inline;
	clear: both;
}

.in-column-container-right {
	max-width: 30em;
	line-height: 100%;
	font-size: 110%;
	float: right;
	overflow: hidden;
	display: inline;
	clear: both;
}

.in-column-container-center {
	clear: both;
	line-height: 100%;
	font-size: 110%;
	float: center;
	overflow: hidden;
	display: inline;
	
}

.nav {
  list-style: none;
  margin-left: 0;
  margin-bottom: 0;
  padding-left: 0;
}

.nav > li,
.nav > li > a {
  display: inline-block;
  *display: inline;
  zoom: 1;
}

.inline-items {
  margin-top: 0;
}

.inline-items li {
  margin-left: 0;
  border-left: 1px solid black;
  padding-left: 10px;
  padding-right: 10px;
}

.inline-items li:first-child {
  margin-left: 0;
  border: none;
  padding-left: 0;
  padding-right: 10px;
}

.inline-items li:last-child {
  padding-right: 0;
}


/* MEDIA QUERIES */
@media screen and (min-width: 47.5em ) {

	.columns-container { 
		float: left;
	}

  .left-column { 

		float: left;
  }
  
}


@media (min-width: 61em) {

      .left-column {
        min-width: 61em;
    }
}