html {
  /* Prevents iOS from resizing in landscape mode */
  -webkit-text-size-adjust: none; 

  color: #839496; /* Base0 */
  background-color: #002b36; /* Base03 */
}

* {
  /* Apply natural box layout to all elements */
  box-sizing: border-box;
}

body {
  font-size: 16px;
  font-family: "Source Code Pro", monospace;
  font-weight: 400; /* also loaded 700 */
  height:100%;
}

form input {
}

#colorBar {
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;
}

hr {
  border: 1px solid #b58900; /* Yellow */
}

h1 {
  font-size: 20px;
}

a {
	color: #6c71c4; /* Violet */
}

li {
	margin: 10px;
}

input {
	background-color: #839496; /* Base0 */
	color: #002b36; /* Base03 */
	/* background-color: #fdf6e3; /* Base3 */
	/* color: #657b83; /* Base00 */
	border: 2px solid #002b36;
	/* border-radius: 4px; */
}

input[type=submit] {
 	-webkit-appearance: none;
	background-color: #839496; /* Base0 */
	padding: 5px 10px;
	border-radius: 5px
}

input[type=checkbox] {
	outline-color: #839496;
	outline-style: solid;
	outline-width: 1px;
}

#headerWrapper {
  color: #b58900; /* Yellow */
  background-color: #073642; /* Base02 */
  padding:0.75em;
}

#navWrapper {
  background-color: rgba(0,0,0,0.5);
  /*padding: 0.5em 2%; /* this is causing the div to be visible */
}

#navWrapper li {
	margin: 0;
}

#contentWrapper {
  height:auto;
  min-height:100%;
}

/* This keeps the row aligned across multiple columns */
/*
*/
#contentWrapper .row:after {
  content: "";
  display: table;
  clear: both;
}

.column-12 {
  padding: .75em;
}

#footerWrapper {
  position:absolute;
  bottom:0;
  width:100%;
  background-color: rgba(0,0,0,0.5);
  font-size: 10px;
  padding: 1em;
}

/* I don't really understand what this is doing
*  It is fixing an issue where the ul li styles wipe out the ul li a
*  styles.  This is referred to as "collapsing".
*  It is used as a class in the nav element in index.html (ul items
*  ultimately)
*
* This is copied above too in the contentWrapper .row section.
*/
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}