/*************************************
Base for code highlighting
*************************************/
pre {
  background: #232323;
  color: #fff;
  margin: 10px 0;
  padding: 1em 10px;
  margin-bottom: 1.5em;
  border-top: solid 3px #000;
  border-left: solid 3px #000;
  border-right: solid 3px #ccc;
  border-bottom: solid 3px #ccc;
  overflow: auto;
}

code {
  font: 100% monospace;
}

 /*************************************
RUBY Highlighting
*************************************/
#content code.ruby span.comment {
  color: #C2C2D0;
}

#content code.ruby span.string {
  color: #A5C261;
}

#content code.ruby span.brackets {
  color: #E3C2F8;
}

#content code.ruby span.symbol {
  color: #6D9CBE;
}

#content code.ruby span.keywords {
  color: #BF7833;
}

 /*************************************
JAVASCRIPT Highlighting
*************************************/
#content code.javascript span.comment {
  color: #C2C2D0;
}

#content code.javascript span.string {
  color: #A5C261;
}

#content code.javascript span.brackets {
  color: #E3C2F8;
}

#content code.javascript span.symbol {
  color: #6D9CBE;
}

#content code.javascript span.keywords {
  color: #BF7833;
}

 /*************************************
HTML Highlighting
*************************************/
#content code.html span.comment {
  color: #C2C2D0;
}

#content code.html span.string {
  color: #A5C261;
}

#content code.html span.tag {
  color: #6D9CBE
}

#content code.html span.attribute {
  color: #BF7833;
}

#content code.html span.doctype {
  color: #E3C2F8;
}

 /*************************************
CSS Highlighting
*************************************/
#content code.css span.comment {
  color: #C2C2D0;
}

#content code.css span.keywords {
  color: #BF7833;
}

#content code.css span.selectors {
  color: #BF7833;
}

#content code.css span.properties {
  color: #6D9CBE;
}

#content code.css span.units {
  color: #A5C261;
}