*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

body { margin: 20px; }
.columnsContainer {
  height:800px;
}

#playground{
  height:600px;
  width:100%;
}
.columnsContainer, footer, header { position: relative; margin: .5em; }

.leftColumn, .rightColumn { padding: 1.25em; }

.rightColumn {
  border-right: 1px solid  #ccc;
  border-left: 1px solid  #ccc;
}

.leftColumn { margin-bottom: .5em; }

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

#playground div {
  display:inline-block;
}


nav li,
nav li a,
footer li {
  display: inline-block;
  *display: inline;
  padding-right:20px;
  zoom: 1;
}

nav ul, footer ul {
    font-family:'Helvetica', 'Arial', 'Sans-Serif';
    padding: 0px;
    list-style: none;
    font-weight: bold;
    color: #999;
}

footer {
    border-top: 1px solid #d5d5d5;
    font-size: .8em;
}
a {
    text-decoration: none;
    color: #999;
}

p {
  font-family:'sans-serif';
}
a:hover {
    text-decoration: underline;
}

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

.inline-items li {
  margin-left: 0;
  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 ) {
  .leftColumn { margin-right: 19.5em; }

	.rightColumn { position: absolute; top: 0; right: 0; width: 30.75em; }
}