/* MAIN STYLE SET 
  ALSO SEE MAIN.CSS
  a, a:hover, body, caption, code, div, h1, h2, h3, img, input, li, 
  p, table, th, td
  .css, .header, .hidden, .html, .js, .smaller, .transparent
  #main, #movemenu, #topimage, #topPCimage, #toptext
*/
body { 
  font: normal 12px/18px verdana,arial,helvetica,sans-serif; 
  background-color: #cccc99;
}
a img { border: 0px none; }
a:hover { color: #cccc99; background: #000099 none; }
caption { font: italic bold 1.2em; text-align: left; 
  padding: 8px 0px 4px 2px; }
code { font: normal normal 14px "Lucida Console",monospace; }
p.header { font-weight: bold; font-style: italic; }
h1 { font: italic bold 2em; }
h2 { font: normal bold 1.5em; }
h3 { font: normal bold 1.2em; }
input.button { 
	font: normal bold 10px; background: #cccc99 none; width: 80px; 
}
th { background-color: #9999cc; }
td { background-color: #ffffff; 
     vertical-align: top; padding: 4px; }

/* Top of page */
#topimage { 
  visibility: hide; position: absolute;
}
#topPCimage { 
  visibility: hide; position: absolute;
}
#toptext { width: 410px; }

/* MAIN EDITING AREA */
#main { width: 400px; }
#main p code { color: navy; }

#movemenu {
  visibility: hide;
}

/* META for "about this page" info: URI, breadcrumbs, etc 
   It is intended to look like CODE (monospace, etc)
*/
#meta, .meta { font: normal .8em "Lucida Console", monospace; }
#meta { position: absolute; top:4px; left:4px; }

/* CODE SAMPLES - HTML, CSS, JS - inline CODE and DIVs */
code.html {
  color: #000066; background: none #ccffff; text-transform: none;
}
code.css {
  color: #003300; background: none #ccffcc; text-transform: none;
}
code.js {
  color: #660000; background: none #ffcccc; text-transform: none;
}

/* CODE SAMPLES - html, css, js - bordered DIVs */
div.html {
  font: normal verdana,arial,sans-serif;
  color: #000066; background: none white;
  padding: 1em; border: 1px #0000ff solid;
  margin: 1em 0em; width: 400px;
}

div.html p.header span { color: #0000ff; }

div.css {
  font: normal verdana,arial,sans-serif;
  color: #003300; background: none white;
  padding: 1em; border: 1px #00ff00 solid;
  margin: 1em; width: 400px;
}

div.css p.header span { color: #009900; }

div.js {
  font: normal verdana,arial,sans-serif;
  color: #660000; background: white none;
  padding: 1em; border: 1px #ff0000 solid;
  margin: 1em; width: 400px;
}

div.js p.header span { color: #ff0000; }

.hidden { display: none }

.smaller { font-size: 90%; }
.smaller code { font-size: 10px; }

.transparent { background-color: transparent; text-align: center; }