html, body {
  margin:0; padding:0;
  font-size:24px;
}

body {
	font-family:Helvetica, Arial, Sans;
  font-size:16px;
  line-height:1rem;
}

/** Styles for the tokens **/

pre, code { 
  font-size:13px;
	color:white;
	background:#202020;
	font-family:Menlo, Monaco, Monospace;
	tab-size:2;
}

/* Css colors
...
 */

.invalid,
.string-end-badstring,
.delim-invalid, 
.group-badend {
  background:#60315A; /* purple */
  padding:1px 0 0;
}

.group-noend {
	color:#202020;
} 

.comment,
.CDC, 
.CDO, 
.comment-start, 
.comment-data, 
.comment-end
 {
	color:#746D74;
	font-style:italic;
	font-weight:normal;
}

.string,
.string-start,
.string-chars,
.string-end
 {
	color:#8F9D6A;
}

.escape,
.escape-char, 
.escape-hex, 
.escape-eof,
.ignore-newline
 {
	color: #DDF7AC; /* light-green */
}

.hashid,
.hash,
.ident-hash-start,
.ident-hashid-start,
.boolean,
.number {
	color:#CF6A4C; /* red */
}

.at,
.symbol,
.func,
.ident-at-start
{
	color:#7587A6; /* blue */
}

.column, 
.operator {
	color:#D4BD7F; /* light brown */
}

.delim, 
.delim-invalid, 
.sep {
  
}

.ident,
.ident-chars
{
	color:#D4BD7F; /* light brown */
	color:#B38243; /* orange-brown */
}


/** Some additional stying for the rest of the sample page **/

body {
  padding:1rem 1rem;
}
h1 {
  font-size:48px;
  line-height:2rem;
  min-height:2rem;
}
pre {
  display:block;
  line-height:1rem;
  padding:.7rem 1rem 1.3rem;
  border-radius:.3rem;
}

#colors {
  cursor:default;
}
#colors span {
  padding:.15rem 0;
  border-radius:.1rem;
}
#colors span:hover {
  background:#444;
}