body {
  font: 100% arial, helvetica, sans-serif;
}
	
h1 {
  font-size: 200%;
}

h2 {
  font-size: 135%;
}

pre {   /* Yellow code box */
  font-family: Courier, mono;
  font-size: 18px;
  font-weight: bold;
  color: #003399;
  border-left : solid 6px #ffcc00;
  border-right : solid 6px #ffcc00;
  border-top: solid 1px #ffcc00;
  border-bottom: solid 1px #ffcc00;
  padding : 5px;
  margin: 0 5px 0 5px;
  background: url(pre.jpg) top left repeat-y;
  width: auto;
}

code {   /* Code box with pencil on left */
  background: #f0f0f0 url(code.gif) left top repeat-y;
  border: 1px solid #ccc;
  color:#333;
  display:block;
  margin: 20px 25px;
  padding: 10px 10px 10px 35px;
  white-space:pre;
}

    
em {
  font-weight: bold;
  font-style: normal;
  color: maroon;
}
	
.firstletter {
  float: left;
  font-size: 3.3em;
  line-height: 1;
  font-weight: bold;
  margin-right: 0.2em;
}

.pencil {
  background: #f0f0f0 url(code.gif) left top repeat-y;
  border: 1px solid #ccc;
  color:#333;
  display:block;
  margin: 20px 25px;
  padding: 10px 10px 10px 35px;
  white-space:pre;
}