styles.css

h2 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[text], button {
  color: #888;
  font-family: Cambria, Georgia;
}
button {
  font-family: Arial;
  background-color: #eee;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  cursor: hand;
}
button:hover {
  background-color: #cfd8dc;
}
button:disabled {
  background-color: #eee;
  color: #aaa;
  cursor: auto;
}
/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}


/*
 *  Grid
 */
 [class*='col-'] {
   float: left;
 }
 *, *:after, *:before {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
 [class*='col-'] {
   padding-right: 20px;
   padding-bottom: 20px;
 }
 [class*='col-']:last-of-type {
   padding-right: 0;
 }
 .grid {
   margin: 0;
 }
 .col-1-3 {
   width: 33%;
 }
 .col-2-3 {
   width: 67%;
 }
 .col-1-2 {
   width: 50%;
 }
 .col-1-4 {
   width: 25%;
 }
 .col-3-4 {
   width: 75%;
 }
 .grid-pad {
   padding: 10px 0;
 }
 .grid-pad > [class*='col-']:last-of-type {
   padding-right: 20px;
 }
 @media (max-width: 1024px) {
     .grid {
       margin: 0;
     }
 }