body {
  font-family:courier;
  letter-spacing:1px;
  font-size:14px;
  width: 810px;
  margin-left:auto;
  margin-right:auto;
  text-align: justify;
}

a { color:black; }
.footer a { color:#555; border-bottom:1px solid #555; text-decoration:none; }

.title a { text-decoration:none; border-bottom:1px solid black; color:black;}
a:hover { border-bottom:none; }

p a { color:#555; border-bottom:1px solid #555; text-decoration:none; }
a:hover { border-bottom:none; }

h1 a { text-decoration:none; }

h1 { font-size: 46px; font-weight:normal;
     margin-left:auto; margin-right:auto; text-align:center;
     margin-top:5px; margin-bottom:2px;
     padding-bottom:5px;
   }
h2 {
  font-size: 20px; font-weight:normal; margin: 8px 0 14px 0;
}
h3 { font-size: 15px; font-weight:normal; margin-top:16px; margin-bottom:16px;}
h4 { font-size: 15px; font-weight:normal; margin-top:16px; margin-bottom:16px;}

p { line-height:15px; margin:16px 0 16px 0; font-size:12px; }

.strapline {
  margin-left:auto; margin-right:auto;
  width:472px;
  text-align:center;
  margin-top:-13px;
  font-size:13px;
  padding-bottom:5px;
  border-bottom:1px solid #555;
}

.main-text {
  width:472px;
  margin-left:auto; margin-right:auto;
  margin-bottom:25px;
}

.footer {
  width:472px;
  margin-left:auto; margin-right:auto;
  margin-top:-16px;
  text-align:center;
  font-size:13px;
  padding-top:5px;
  border-top:1px solid #555;
}

.title a { border-bottom:none; }

.demo { width:400px; }
.demo .title {
  margin-left:auto; margin-right:auto; text-align:center;
  width:400px;
}

.grid {
  width: 540px;
  height:300px;
  margin-left:auto; margin-right:auto; text-align:center;
}

.grid-element {
  width:200px;
  padding:35px;
  float:left;
}

span.keyword { color: #FFF286; }
span.literal { color: white; }
span.type { color: #89FB95; }
span.variable { color: #F3AFFF; }
span.attribute { color: #87C4FF; }
span.function { color: #B0A5FF; }

span.jquery-console-prompt span.variable {
  border-bottom:1px dotted #926999;
}
span.jquery-console-prompt span.attribute {
  border-bottom:1px dotted #517699;
}

.code {
  margin-left:auto; margin-right:auto;
  background-color:#000;
  width:420px;
  padding:20px 24px;
  color: #fff;
}

#tutor {
  color:#666;
  text-align: left;
  border:1px solid black;
  height:17px;
  width:798px;
  padding:6px;
  margin-bottom:10px;
}

#tutor .code {
  background-color: #000;
  color:#fff;
  padding:6px 12px 7px 12px;
  margin:0 -2px 0 -2px;
}

#help {
  border:1px solid black;
  height:64px;
  width:386px;
  padding:6px;
  text-align:left;
  margin-top:10px;
}

.console-canvas-container {
  height:400px;
}

#canvas {
  border:1px solid black;
  float:right;
}

#console {
  color:white;
  width:398px;
  background-color:black;
  height: 398px;
  border: 1px solid #000;
  float:left;
  font-size: 16px;
  font-family:'courier';
  margin-bottom:8px;
}

#console div.jquery-console-inner {
 width:380px;
 height:380px;
 margin: 6px;
 overflow:auto;
 text-align:left;
 cursor:default;
}
#console span.jquery-console-prompt-label {
padding:0 6px 0 0;
}

#console div.jquery-console-message-value {
  padding-left:17px;
}

#console div.jquery-console-message-error {
 color:#f33;
 padding-left:17px;
}
#console div.jquery-console-message-success {
 color:#187718;
 padding:0.1em;
}
#console span.jquery-console-prompt-label {
 font-weight:bold;
}

#console span.jquery-console-cursor {
  background: rgb(0, 0, 0); /* Fall-back for browsers that don't support rgba */
  background: rgba(0, 0, 0, 0);
}