* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

body {
  margin: 20px;

  font-size: 14px;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  color: #555;
}

.hide {
  display: none;
}

// example code blocks
pre {
  margin: 0 !important; // override prism.css
  display: inline-block;
}
// override weird rule in prism.css that puts a background on '='
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
  background: none;
}

// select useful for examples
input, select {
  border: 1px solid #CCC;
  width: 490px;
}
::-webkit-input-placeholder {
   color: #BBB;
}
::-moz-placeholder {  /* Firefox 19+ */
   color: #BBB;
   opacity:  1; 
}
:-ms-input-placeholder {  
   color: #BBB;  
}

// examples
#result {
  margin-bottom: 100px;
}