pegjs/website/assets/css/content.css

#content h1 { margin: 0 0 .75em 0; font-size: 200%; }
#content h2 {
  margin: 1.5em 0 .75em 0; border-bottom: 2pt dotted silver;
  font-size: 150%;
}
#content h3 { margin: 1.5em 0 .5em 0; font-size: 125%; }
#content li { margin: .5em 0; }
#content dt { font-weight: bold; }
#content dd { margin-top: 1em; margin-bottom: 1em; }
#content aside.info { margin: 1em 0 1em 2em; color: gray; }
#content pre {
  overflow: auto;
  padding: .5em 1em; border-left: 5px solid silver;
  background-color: #f0f0f0;
}
#content table { border-spacing: 0; }

#content a {
  text-decoration: none;
  color: #1A0BF1;
}

#content a:hover {
  text-decoration: underline;
  color: #9D0BF1;
}

#content .center { text-align: center; }

/* Home */

#content #sidebar {
  float: right; width: 17em;
  font-size: 80%; text-align: center;
}
#content #sidebar a {
  font-weight: bold; text-decoration: none;
  color: #006000;
}
#content #sidebar a:hover { text-decoration: underline; }
#content #sidebar a.try {
  display: block;
  padding: .75em; border-radius: .6em; -moz-border-radius: .6em;
  font-size: 140%;
  color: #e0ffe0; background-color: #499149;
}
#content #sidebar a.try:hover {
  text-decoration: none; background-color: #006000;
}
#content #sidebar .install {
  padding: .75em; border: 1px solid #499149; border-radius: .7em; -moz-border-radius: .7em;
  font-family: "Lucida Console", fixed, monospace; font-size: 120%;
  color: #2c572c; background-color: #e0ffe0;
}
#content #sidebar .label { margin-left: 2.6em; text-align: left; color: #606060; }
#content #sidebar #download { color: gray; font-size: 120%; }
#content #sidebar .separator { color: gray; margin: 1.5em 0 1em 0; }

#content #left-column { margin-right: 17em; }

/* Online Version */

#content .message {
  border-radius: .5em; -moz-border-radius: .5em; padding: .5em 1em;
}
#content .message.info { background-color: #c0ffc0; }
#content .message.info a.download { display: block; float: right; }
#content .message.info .size-and-time { visibility: hidden; float: right; font-size: 70%; margin: .3em 0; color: #80c080; }
#content .message.info:hover .size-and-time { visibility: visible; }
#content .message.error { background-color: orange; }
#content .message.progress {
  padding-left: 40px;
  /* Spinner image generated by http://www.loadinfo.net/. */
  background: #ffff80 url("../img/spinner-16x16-progress.gif") 14px center no-repeat;
}
#content .message.disabled { color: gray; background-color: #f0f0f0; }

#content table.online { table-layout: fixed; };

#content table.form { width: 100%; }
#content table.form td, table.form th { padding: .5em 1em; }
#content table.form td:first-child, table.form th:first-child { padding-left:  0; }
#content table.form td:last-child,  table.form th:last-child  { padding-right: 0; }
#content table.form th { text-align: left; font-weight: normal; }

#content h2.suggestion { border: none; }
#content h2.suggestion.top { margin-top: 0; }
#content h2.suggestion .step-number {
  display: block; float: left;
  width: 1.5em;
  border-radius: .4em; -moz-border-radius: .4em;
  text-align: center;
  color: white; background-color: black;
}
#content h2.suggestion .step-title { margin-left: 2.5em; }

#content textarea.code {
  width: 100%; height: 20em;
  border: 1px solid gray;
  font-family: "Lucida Console", fixed, monospace;
  min-height: 150pt;
}

#content .textarea-wrapper { padding-right: 6px; }

#content #columns { width: 100%; height: 100%; border-spacing: 1em; }
#content #columns td { width: 50%; }

#content table.column { width: 100%; height: 100%; }
#content table.column td { vertical-align: top; }
/* Browsers will enlarge the |.content-height| cells to fit the contents. */
#content table.column td.content-height { height: 1px; }

#content .CodeMirror {
  border: 1px solid gray;
}

#content .CodeMirror pre {
  overflow: visible;
  padding: 0px 0px 0px 2px; border: none;
  background-color: inherit;
}

#content #output-header {
  margin: 1.25em 0 0 0; border: none; padding: .25em 1.2em .25em 1.2em;
  font-size: 80%;
  color: white; background-color: silver;
}
#content #output {
  overflow: auto;
  max-height: 20em;
  margin: 0; padding: .5em 1em; border: 2px solid silver; border-top: none;
  background-color: #f0f0f0;
}
#content #output.disabled { color: gray; }

#content #settings { padding: .5em 0; }
#content #settings label { padding-right: 1em; }
#content #settings label[for=option-optimize] { padding-left: 2em; }
#content #parser-var { width: 15em; }
#content #options { padding-top: 1em; }
#content #parser-download {
  float: right;
  width: 10em;
  margin-top: 2em;
  border-width: 0;
  padding: .5em; border-radius: .4em; -moz-border-radius: .4em;
  font-family: "Trebuchet MS", lucida, sans-serif;
  font-size: 1em;
  line-height: 1.5;
  text-align: center; text-decoration: none;
  color: #e0ffe0; background-color: #499149;
}
#content #parser-download:hover { background-color: #006000; }
#content #parser-download.disabled { color: #e0e0e0; background-color: gray; }


#output {
  max-width: 50vw;
}