body {
  font-family: "Trebuchet MS", sans-serif;
	font-size: 14px;
  text-align: center;
  margin: 0; padding: 0;
 }
h1, h2, h3, h4 {
	font-weight: normal;
    margin: 10px 16px; padding: 0;
}
h1 { font-size: 48px; }

h1 {color: black;}

h2 { font-size: 24px; }

textarea, pre, code {
	font-family: "Lucida Console", monospace;
}

h3 { font-size: 12px; }

a, li { font-size: 24px; }

a,a:link,a:visited {
	color: #077dC1;
}
a:hover {
	color: #F73d31;
}
a:active {
	color: #dddddd;
}
a img { border: none; }
input.keyboard-selector-input {
    position: fixed;
    top: 0;
    _position: absolute;
    _top: expression(eval(document.body.scrollTop));
    left: -300px;
}
#wrapper {
  position: absolute;
  width: 100%;
}
#container {
  text-align: left;
	padding: 10px 20px 90px 20px;
}
#corner1 {
  position: absolute;
  top: 0px;
  left: 0px;
}
#corner2 {
  position: absolute;
  top: 0px;
  right: 0px;
}
#topside {
  position: absolute;
  top: 0px;
  left: 0px;
  background: url(/static/menu-top.png) repeat-x;
  width: 100%;
  height: 45px;
}
#leftside {
  position: fixed;
  top: 0px;
  left: 0px;
  background: url(/static/menu-left.png) repeat-y;
  width: 45px;
  height: 100%;
}
#rightside {
  position: fixed;
  top: 0px;
  right: 0px;
  background: url(/static/menu-right.png) top right repeat-y;
  width: 45px;
  height: 100%;
}
#header {
  clear: both;
  float: right;
	text-align: left;
  padding-right: 20px;
}
#lilBrowser {
    position: absolute;
    background-color: white;
    top: -540px;
    left: -440px;
    width: 510px;
    height: 430px;
    padding: 5px;
    border: solid 1px #444;
    z-index: 100;
}
h3#lbTitle {
    color: #444;
    font-family: verdana, arial, sans-serif;
    font-size: small;
    float:left;
    line-height: 90%;
    margin: 0; padding: 3px;
}
p#lbClose {
    font-size: small;
    float: right;
    margin: 0; padding: 3px;
}
p#lbClose a {
    display: inline;
}

/* main menu */
h1 img, h2 img, h3 img, h4 img {
	margin: 0px 8px -5px 0px;
}
#options {
  clear: both;
  float: right;
  font-weight: bold;
  font-size: 11px;
  padding-right: 20px;
  margin-top: -14px;
}
#mainmenu ul {
	list-style: none;
	margin: 0 auto;
	padding: 40px 0 0 40px;
}
#mainmenu ul li {
  padding: 4px 0;
}
#start h3 {
	color: black;
	background: #e5f5c4;
	border-bottom: solid 1px #CE9;
	padding: 2px 2px 6px 2px;
	font-weight: bold;
	margin: 10px;
}
#start h3#db {
	clear: both;
	background: #d4e5f5;
	border-bottom: solid 1px #9CE;
}
#no_apps {
  background: url(/static/no-app-hand.png) no-repeat;
  padding: 28px 50px 34px 180px;
  margin: 20px auto;
  width: 360px;
  color: #077;
}
#no_apps h1 {
  margin: 0;
  color: #555;
}
#no_apps a {
  font-weight: bold;
  color: #790;
}
#no_apps a:hover {
  color: #033;
}
#apps, #tables {
	margin-bottom: 20px;
}
#apps ul, #tables ul {
	list-style: none;
}
#apps > ul > li, #tables li {
	width: 150px;
	float: left;
	font-size: 12px;
	margin-right: 14px;
	margin-bottom: 10px;
}
#apps h4, #tables h4 {
	font-size: 17px;
	font-weight: bold;
	text-align: left;
	padding: 0; margin: 0;
}
#apps p {
	color: #888;
	margin: 5px 0;
}
#apps .actions, #tables .actions {
  position: absolute;
  display: none;
  margin-left: -6px;
  margin-top: 1px;
	font-size: 12px;
  line-height: 24px;
}
#tables .actions ul {
  padding: 5px 4px 8px 4px;
  background: url(/static/hackety-tabledrop.png) no-repeat;
  width: 97px;
  height: 55px;
  line-height: 15px;
}
#apps .actions ul {
  padding: 2px 4px 8px 4px;
  background: url(/static/hackety-progdrop.png) no-repeat;
  width: 97px;
  height: 81px;
}
#apps .actions a, #tables .actions a {
  color: #555;
	padding: 4px 4px 4px 22px;
}
#apps .actions a:hover, #tables .actions a:hover {
	color: #F73d31;
}

/* tutor */
#tutor {
  background: #333 url(/static/tutor-back.png);
  color: white;
  text-align: left;
}
#tutor .controls {
  background-color: #888;
  clear: both;
  text-align: right;
  color: #333;
  font-size: 11px;
  padding: 2px 6px 4px 0;
}
#tutor .controls img {
  padding: 2px;
  margin-top: -4px;
  margin-bottom: -6px;
}
#tutor .page {
  background: url(/static/tutor-grad.png) bottom left repeat-x;
  padding: 8px 16px;
}
#tutor .nextpage {
  text-align: right;
  padding: 4px 8px;
}
#tutor .page a {
  color: #ff3;
  font-weight;
  text-decoration: none;
  border-bottom: dotted 1px #ff3;
}
#tutor .page {
  color: #edc;
}
#tutor .page strong {
  color: #fff;
}
#tutor .page code {
  color: #dec;
  font-weight: bold;
}
#tutor .page h1,
#tutor .page h2,
#tutor .page h3,
#tutor .page h4 {
  margin: 0 0 6px 0; padding: 0;
  color: #fff;
  font-weight: bold;
}
#tutor .page h4 {
  margin: 0;
  line-height: 100%;
  color: #cc9;
  font-size: 11px;
}

/* execution pane */
#edit #output {
	margin-right: 20px;
}
#edit #stdout {
	display: none;
	width: 100%;
	background-color: white;
	padding: 10px;
	color: #555;
	text-align: left;
}
#edit #stdout h1,
#edit #stdout h2,
#edit #stdout h3,
#edit #stdout h4,
#edit #stdout h5,
#edit #stdout h6,
#popup .scrollboxclass h1,
#popup .scrollboxclass h2,
#popup .scrollboxclass h3,
#popup .scrollboxclass h4,
#popup .scrollboxclass h5,
#popup .scrollboxclass h6 {
	color: #333;
	text-align: left;
	margin: 0; padding: 0;
	font-weight: bold;
}
#edit #stdout h1 { font-size: 24px; }
#edit #stdout h2 { font-size: 21px; }
#edit #stdout h3 { font-size: 18px; }
#edit #stdout h4 { font-size: 16px; }
#edit #stdout h5 { font-size: 14px; }
#edit #stdout h6 { font-size: 12px; }
#popup .scrollboxclass h1 { font-size: 24px; }
#popup .scrollboxclass h2 { font-size: 21px; }
#popup .scrollboxclass h3 { font-size: 18px; }
#popup .scrollboxclass h4 { font-size: 16px; }
#popup .scrollboxclass h5 { font-size: 14px; }
#popup .scrollboxclass h6 { font-size: 12px; }
#edit #stdout div.entry a,
#popup a {
	color: #36C;
}
#edit #stdout div.entry,
#popup div.entry {
	font-size: 12px;
}
#popup div.entry strong,
#edit #stdout div.entry strong {
	color: #BBB;
	font-weight: normal;
}
div.entry span.url {
  display: block;
}
#popup strong a,
#edit #stdout div.entry strong a {
	color: #259;
	font-weight: bold;
}
#popup .scrollboxclass img {
  border: solid 1px black;
  background: white;
  padding: 1px;
}
#stdout #waiting {
	width: 400px;
	margin: 0 auto;
	padding: 40px;
	text-align: center;
}

#stdout #waitingInfo {
	font-size: 12px;
}

#stdout .cancelButton {
	text-align: center;
	padding: 10px;
}

#learn {
	color: #558;
	padding: 42px 20px;
}
#learn h1, #help h4 {
	text-align: left;
	color: #448;
	padding: 0; margin: 0;
  font-size: 18px;
  margin-top: 12px;
}

/* script editor */
#edit {
	margin: 0 30px;
}
#prefs h1,
#edit h1 {
	font-size: 32px;
	margin: 64px 0 0px 0;
	color: #555;
	text-align: left;
}
#edit h2 {
  margin: 0;
  color: #999;
}
.required label,
.optional label,
#edit label {
	display: block;
	font-size: 11px;
	padding: 4px 0;
}
.required input,
.optional input {
  font-family: monospace;
  font-weight: bold;
  font-size: 16px;
  width: 96%;
	padding: 2px;
	margin: 3px 2px;
}
#edit #input input {
	float: right;
	width: 80px;
	font-size: 12px;
	border: outset 2px;
	padding: 2px;
	margin: 3px 2px;
	background-color: #E1E3D0;
}
#edit input#save {
	color: black;
}
#edit input#run {
	background-color: #DFA;
	font-weight: bold;
	color: #F39;
}
#edit .banner {
	padding: 7px 4px 7px 4px;
	background-color: #F1F3E0;
	border-bottom: solid 3px #F39;
}
#edit #input textarea {
	font-size: 14px;
	width: 100%;
	height: 240px;
	margin: 4px 0;
}
#edit div.required {
	margin: 12px;
}

/* preferences page */
#prefs fieldset {
  margin: 10px 0;
  padding: 5px 10px;
  background-color: #555;
  color: white;
  border: none;
  -moz-opacity: 0.70;
}
#prefs legend {
  margin: 0 5px;
  padding: 2px 8px;
  background: url(/static/menu-gray.png);
  font-weight: bold;
  color: #222;
}

/* help pages */
#helppage #header {
  position: fixed;
  z-index: 100;
  top: 3px; right: 10px;
}
#helppage #headergrad {
  position: fixed;
  z-index: 99;
  top: 0; left: 0;
  width: 100%;
  height: 54px;
  background: url(/static/hackety-helpgrad.png) repeat-x;
}
#helppage h1 {
  position: fixed;
}
#help {
	text-align: left;
	color: #333;
	font-size: 12px;
}
#help .helptext {
  padding: 60px 10px 40px 100px;
}
#help .summary > p:first-child {
  font-size: 20px;
  line-height: 120%;
}
#help h1 {
  color: white;
  background-color: black;
  margin: 0;
  padding: 6px 12px;
  width: 100%;
}
#help h3 {
	margin: 0; padding: 0;
	font-weight: bold;
	padding: 4px;
	background-color: #333;
	color: #eee;
}
#help .meth {
	padding: 1px 8px 4px 8px;
}
#help code {
	color: #636;
	font-weight: bold;
}
#help pre,
#tutor pre {
	color: #636;
	background-color: #eee;
	font-size: 11px;
	overflow: auto;
	padding: 5px;
}
#tutor pre .outputs,
#help pre .outputs {
	color: #299;
}
#tutor pre .comment,
#help pre .comment {
	color: #955;
}
#help .summary,
#help .summary pre {
	font-size: 14px;
}
#help .summary code {
	font-size: 16px;
}
#help img {
  display: block;
  margin: 0 auto;
}
#help img.inline {
  margin: 0 20px;
  float: right;
}
#toc {
  position: fixed;
	top: 48px;
	left: 10px;
	width: 80px;
  font-size: 15px;
}
#toc h4 {
	padding: 0; margin: 10px 0 0 0;
	font-weight: bold;
  font-size: 14px;
}
#toc h4 a {
  color: #333;
}
#toc ul {
	list-style: none;
	border-right: solid 2px #DDD;
	text-align: right;
	margin: 0; padding: 10px 10px 50px 0;
}
#toc li {
	margin: 0; padding: 0;
  font-size: 12px;
}
#toc ul.tocsub {
  padding: 0;
  display: none;
  border: none;
}

/* tutorial panes */
.stretcher {
    margin: 0;
    padding: 0;
    height: 1%;
    padding-left: 12px;
}
.stretcher a, .stretcher a:link, .stretcher a:visited, .stretcher a:active {
	text-decoration: none;
	color: #a7ed91;
}
.stretcher a:hover {
	text-decoration: underline;
	color: #b7fd91;
}
.stretcher p {
    margin: 10px 16px;
}
.stretcher dl, .stretcher ul {
    background-color: white;
    color: #333;
    padding: 4px 8px;
	font-size: 12px;
    margin-left: 16px;
    list-style: none;
}
.stretcher li {
    margin: 6px;
}
.stretcher p code {
    background-color: #4C1929;
    color: #eee;
    padding: 1px 4px;
}
.stretcher p code.cmd {
    background-color: #eeeeec;
    color: #204a87;
}
.stretcher dt {
    font-weight: bold; 
}

.chapmark {
    margin-left: 12px;
    margin-right: 22px;
    color: #553;
}
.stretcher h3 {
  font-weight: bold;
  background-color: none;
  border: none;
  color: #335;
  margin-left: 0;
}
.chapmark a, .chapmark a:link, .chapmark a:visited, .chapmark a:active {
	text-decoration: none;
	color: #372d61;
}
.chapmark a:hover {
	text-decoration: underline;
	color: #477d51;
}
.note { color: #ddc; text-align: center; font-size: xx-small; }
.stretcher ul li strong { color: #286; border-bottom: solid 2px #cca; }
.stretcher ul li code { background-color: #f1f1f1; padding: 1px 3px; border-bottom: solid 2px #ddd; }
.stretcher ul li code.faded { color: #899; }
.stretcher code strong { background-color: #dcffb9; padding: 1px 3px; }
.stretcher ul.commands li strong { display: block; float: left; width: 60px; border: none; }

/* irb terminal */
#shellwin {
  background: url(/static/console/hackety-console.png) no-repeat;
  padding: 20px 9px;
}
#terminal {
  width: 534px;
  height: 222px;
  overflow-y: auto; 
  overflow-x: hidden; 
}
#irb {
  visibility: hidden;
  padding: 4px 0 0 4px; margin: 0;
  font-family: "Lucida Console", monospace;
  font-size: 12px;
  line-height: 14px;
  color: #eee;
  text-align: left;
}
#irb div {
    margin: 0; padding: 0;
}
#irb div b {
    background-color: #FD5396;
    color: #fff;
}
div.answer, div.stdout, div.no_answer, div.load {
    display: none;
}

/* terminal escape colors */
span.fore_black { color: #2e3436; }
span.fore_dark_gray { color: #888a85; }
span.fore_gray { color: #babdb6; }
span.fore_white { color: #eeeeec; }
span.fore_blue { color: #204a87; }
span.fore_lt_blue { color: #729fcf; }
span.fore_green { color: #788600; font-weight: bold; }
span.fore_lt_green { color: #cbe134; }
span.fore_cyan { color: #c4a000; } /* using cyan for yellows */
span.fore_lt_cyan { color: #fc994f; }
span.fore_red { color: #a40000; }
span.fore_lt_red { color: #FD5396; font-weight: bold; }
span.fore_purple { color: #5c3566; }
span.fore_lt_purple { color: #ad7fa8; }
span.fore_brown { color: #8f5972; }
span.fore_lt_brown { color: #e9b9de; }
span.back_black { background-color: #2e3436; }
span.back_dark_gray { background-color: #888a85; }
span.back_gray { background-color: #babdb6; }
span.back_white { background-color: #eeeeec; }
span.back_blue { background-color: #204a87; }
span.back_lt_blue { background-color: #729fcf; }
span.back_green { background-color: #788600; }
span.back_lt_green { background-color: #cbe134; }
span.back_cyan { background-color: #c4a000; } /* using cyan for yellows */
span.back_lt_cyan { background-color: #fce94f; }
span.back_red { background-color: #a40000; }
span.back_lt_red { background-color: #ef2929; }
span.back_purple { background-color: #5c3566; }
span.back_lt_purple { background-color: #ad7fa8; }
span.back_brown { background-color: #8f5902; }
span.back_lt_brown { background-color: #e9b96e; }

/* about window */
#about_hackety_hack, #popup_hackety_hack {
	z-index: 99;
	position: fixed;
	width: 100%; height: 100%;
	top: 0; left: 0;
	display: none;
}

#about_hackety_hack .overlay, #popup_hackety_hack .overlay {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: url(/static/stripe.png);
	-moz-opacity: 0.8;
}

#popup_hackety_hack #popup_wrapper {
	position: absolute;
	top: 0; left: 0;
	width: 93%;
	margin: 4% 3%;
  padding: 2px 2px 2px 0;
}

#popup {
  margin: 0 6px;
	border: solid 8px #DDE3C2;
  background: white;
	overflow: auto;
	max-height: 500px;
}

#popup .webpage {
	padding: 6px;
}

#popup_wrapper .rightpp {
	background: url(/static/hackety-popup-rightside.png) top right repeat-y;
}

#popup_wrapper .leftpp {
	background: url(/static/hackety-popup-leftside.png) top left repeat-y;
}

.webpage h1, .webpage h2, .webpage h3, .webpage h4, .webpage h5 {
	text-align: center;
}

#popup label {
	display: block;
	font-size: 11px;
}

#popup textarea {
	width: 97%;
}

#popup_wrapper .toppp {
  height: 26px;
  width: 99%;
  margin: 0 4px 0 2px;
  background: url(/static/hackety-popup-topleft.png);
}

#popup_wrapper #popup_close {
	position: absolute;
	top: 1px; right: 2px;
}

#popup_wrapper .bottompp {
  height: 11px;
  margin-right: 8px;
  text-align: right;
  background: url(/static/hackety-popup-bottomleft.png) 2px 0 no-repeat;
}

#popup_wrapper .bottompp img {
  display: block;
  float: right;
  margin-top: -4px;
  margin-right: -8px;
}

#popup .required {
	padding: 4px;
}

#popup #buttons {
  text-align: right;
}

#popup div.scrollboxclass {
  border: solid 1px #777;
  width: 95%;
  height: 300px;
  overflow: auto;
  background-color: #E1E3D0;
}

#popup div.scrollboxclass div.scrollboxitem {
}

div.says {
  font-weight: bold;
  color: #555;
  background-color: white;
  padding: 4px;
}

div.indent {
  padding: 4px 4px 4px 12px;
}

#popup #buttons input {
	margin: 6px;
}

#popup {
	text-align: left;
}

#about_hackety_hack .box {
	position: absolute;
	top: 24%;
	left: 50%;
	margin-left: -180px;
	width: 372px;
	padding: 0;
}