/*  

CSS for JSLab.

*/

/****************************************

  Global styles

*****************************************/

/* Reset to avoid annoyances */
html, body, fieldset, h1, h2, h3, ul, ol, li, form, dl, dt, dd {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Font selection and base font size */
body, table, input, select, textarea, fieldset, legend {
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 12px;
}

body {
}

h2 {
  font-size: 1.17em;
}

/* Remove dotted border in Firefox */
a {
  outline: none;
}

/* Remove default border on images and align images with text */
img, a img {
  border: 0;
  vertical-align: middle;
}

/* Only display scrollbars when content overflows */
textarea {
  overflow: auto;
}

/* Align input fields and buttons with middle of text */
input {
  vertical-align: middle;
}

/* Numbers are usually right aligned */
input.number {
  text-align: right;
}

/* Select should be as wide as inputs as default */
select {
  /*width: 120px;*/}
/* Some selects should just auto fit width */
select.default {
  width: auto;
}

/* Default table: Autofit to parent container and apply borders */
table {
  width: 100%;
  border: 1px solid #000;
  border-collapse: collapse;
}

/* Alternating rows color 0 */
table tr.row0 {
  background: #fff;
}

/* Alternating rows color 1 */
table tr.row1 {
  background: #ccc;
}

/* For all cells */
table td, table th {
  padding: 4px;
  border: 1px solid #000;
  border-collapse: collapse;
}

table td.number, table th.number {
  text-align: right;
}

/* Table header cells */
table thead td, table thead th {
  padding: 4px;
  border: 1px solid #000;
  border-collapse: collapse;
}

/* Table body cells */
table tbody td, table tbody th {
  padding: 4px;
  border: 1px solid #000;
  border-collapse: collapse;
}

/* Table footer cells */
table tfoot td, table tfoot th {
  padding: 4px;
  border: 1px solid #000;
  border-collapse: collapse;
}

/* Lists */

/* When listing items we usually want a bottom margin */
ul.items li {
  margin-bottom: 20px;
}

/* List in lists are usually indented */
ul li ul {
  margin-left: 10px;
}

/* List in lists with items usually don't have a bottom margin */
ul.items li ul li {
  margin-bottom: 0;
}

/* We rarely use standard bullets */
li {
  list-style: none;
}

/* A normal bulleted list */
ul.list {
  margin-left: 10px;
}
ul.list li {
  list-style-type: disc;
  margin: 0 0 4px 10px;
}

/* A normal ordered list */
ol.list {
  margin: 10px 0 10px 20px;
}
ol.list li {
  list-style-type: decimal;
  margin: 0 0 4px 10px;
}

/****************************************

  Generic styles and fixes

*****************************************/

/* Center page with fixed width */
#center {
  margin: auto;
  text-align: left;
  width: 1200px;
}

/* Clear floats - Clearfix */
.clearfix:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}

/* For IE 6. Hide from IE/Mac - Holly Hack \*/
* html .clearfix {
  height: 1%;
}
/* End hide from IE-mac */

/* Clear individual floating 'rows' */
.clear {
  clear: both;
  margin: 0;
  padding: 0;
  width: 0;
  height: 0;
  font-size: 0;
}

/* Generic row */
.row {
}

/* Generic column */
.row column {
  float: left;
}

/****************************************

  Site specific styles

*****************************************/

/* Page header and graphic */
#header {
  background: url('../gfx/header.jpg') no-repeat left center #000;
  height: 128px;
  border-bottom: 1px solid #000;
}

/* Page body. Lock width to avoid floating boxes to jump lines */
#body {
  width: 77.5em;
  background: url('../gfx/dot.gif') repeat-y 12em 0px;
}

/* Page footer */
#footer {
  border-top: 1px solid #000;
  text-align: center;
}

/* OS logo */
#footer img {
  margin: 10px 20px 0 0;
  clear: both;
}

/* Toolbar just below the header */
#toolbar {
  border-bottom: 1px solid #000;
  color: #fff;
  background: #000;
  font-variant: small-caps;
  /* Don't let nav bar wrap lines */
  min-width: 80em;
}

/* Toolbar captions */
#toolbar a, #toolbar a:hover, #toolbar a:visited {
  color: #fff;
  text-decoration: none;
}

#toolbar a:hover {
  text-decoration: underline;
}

#toolbar ul li {
  float: left;
  margin-right: 20px;
  font-size: 1.17em;
  padding: 4px 0;
}

#toolbar ul li.spacer {
  border-right: 1px solid #000;
  width: 10.08em;
  background: #000;
}

/* Left navigation */
.leftNav {
  float: left;
  padding: 1em;
  width: 10em;
  /*
  border is provided by repeated background pic on div#body
  yes this is ugly - but I avoid messing with heights of div's
  border-right: 1px solid #000;
  */
}

.leftNav h2 {
  margin: 10px 0;
}

/* Main/Left content section */
.content {
  padding: 1em;
  float: left;
  width: 41.66em;
}

/* Aux/Right content section */
.secondaryContent {
  padding: 1em;
  float: right;
}

.content h2, .secondaryContent h2 {
  margin-bottom: 10px;
}

/* Text which needs hightlighting */
span.note {
  color: #d54822;
}

div.note {
  margin: 10px 0;
  color: #d54822;
}

div.infoNote {
  margin: 10px 0;
  background-color: #f6fafd;
  padding: 4px;
  border: 1px solid #000;
}

/* Code coloring */

pre.code {
  background: #f6fafd;
  padding: 4px;
  border: 1px solid #000;
}

span.codeComment {
  color: #008000;
}

span.codeKeyword {
  color: #000;
  font-weight: bold;
}

span.codeString {
  color: #800000;
}

textarea.codeUnformatted {
  width: 100%;
  margin-top: 4px;
  display: none;
}

input.codeDisplay {
  display: block;
  margin-top: 4px;
  background: #fff;
  border: 1px solid #000;
}

/****************************************

  News page

*****************************************/

body#newsPage div.content {
  width: 31em;
}

/* List of news */

body#newsPage div.leftNav h4 {
  font-size: 11px;
  margin-bottom: 0;
}

body#newsPage div.leftNav h4 a {
  color: #000;
  text-decoration: none;
}

body#newsPage div.leftNav span.date {
  color: #a0a0a0;
  font-size: 9px;
}

body#newsPage div.leftNav ul.items li {
  margin-bottom: 6px;
}

body#newsPage div.leftNav ul.items li.current {
  padding: 4px;
  border: 1px solid #000;
  background: #f6fafd;
  position: relative;
  top: -5px;
  left: -5px;
}

/* A piece of news */

body#newsPage div.content h2, body#newsPage div.secondaryContent h2 {
  margin-bottom: 10px;
}

body#newsPage div.secondaryContent p {
  margin-top: 0;
}

body#newsPage div.content h3, body#newsPage div.secondaryContent h3 {
  font-size: 12px;
}

body#newsPage div.content span.date {
  color: #a0a0a0;
  font-size: 10px;
}

body#newsPage div.secondaryContent {
  width: 30em;
}

/* A */
body#newsPage #newsHeader {
  width: 100%;
}

body#newsPage textarea {
  width: 100%;
  height: 300px;
}

/****************************************

  Project page

*****************************************/
body#projectPage div.content h3 {
  margin: 1em 0;
  font-size: 1.17em;
}

body#projectPage div.content ul.list {
  margin-top: 0.5em;
}

body#projectPage div.content ul.list li p {
  margin-top: 0.2em;
}

body#projectPage table#logTable {
  width: 100%;
}

body#projectPage div#changeLog.content {
  width: 61em;
}

body#projectPage table#logTable td {
  vertical-align: top;
}

body#projectPage table#logTable thead td {
  background: #f6fafd;
}

body#projectPage table#logTable thead td#tableLogDate {
  width: 9em;
}

/****************************************

  Library page

*****************************************/

body#libraryPage div.content {
  width: 50em;
}

/* Object members when description of object exist*/
body#libraryPage div.secondaryContent {
  width: 11em;
  background: url('../gfx/dot.gif') repeat-y top left;
}

body#libraryPage div.secondaryContent img.browserIcon {
  margin-right: 0.5em;
}

/* Syntax, parameter etc. headlines */
body#libraryPage div.content strong, body#libraryPage div.secondaryContent strong {
  display: block;
}

/* Name of parameter */
body#libraryPage div.content dt {
  /*font-family: 'Courier new';*/
}

/* Description of parameter */
body#libraryPage div.content dd {
  margin: 0 0 4px 10px;
}

/* Code examples */
body#libraryPage div.content pre {
  padding: 4px;
  border: 1px solid #000;
  background: #fff;
}

body#libraryPage div.content ul li, body#libraryPage div.secondaryContent ul li {
  padding: 4px;
  border: 1px solid #000;
  background: #f6fafd;
}

body#libraryPage div.content textarea {
  width: 99%;
  height: 100px;
}

body#libraryPage div.content textarea.source, body#libraryPageCreate div.content textarea.source {
  width: 99%;
  height: 300px;
  font-family: 'Courier new';
}

body#libraryPage div.leftNav ul li ul {
  margin: 0;
}

body#libraryPage div.leftNav ul li ul li ul {
  margin-left: 10px;
}

body#libraryPage div.secondaryContent label {
  display: block;
  float: left;
  width: 50px;
}

body#libraryPage div.secondaryContent ul li input {
  clear: both;
}

body#libraryPage div.content table.changeLog, body#libraryPage div.content table.changeLog td {
  border: 0;
  font-family: 'Courier new';
  vertical-align: top;
}

body#libraryPage div.content table.changeLog thead td {
  border-bottom: 1px solid #000;
}

body#libraryPage div.content table.changeLog tbody td {
  padding: 4px 10px 0 4px;
}

/* Alpha. list */
body#libraryPage div#overview.content {
  width: 56em;
}

body#libraryPage div.content div#alphaList ul {
  float: left;
  width: 10em;
  margin: 1em 1em 0 0;
}

body#libraryPage div.content div#alphaList ul.selected {
  float: left;
  width: 10em;
  margin: 1em 1em 0 0;
  padding: 4px;
  border: 1px solid #000;
  background: #f6fafd;
  position: relative;
  top: -5px;
}

body#libraryPage div.content div#alphaList ul.selected li.letter {
  font-weight: bold;
}

body#libraryPage div.content div#alphaList ul li {
  background: none;
  padding: 0;
  border: 0;
}

body#libraryPage div.content div#alphaList ul li span.object {
  font-size: 0.8em;
}

body#libraryPage div.content div#alphaList ul li.letter {
  border-bottom: 1px solid #000;
  font-size: 1.17em;
}

body#libraryPage div.content div#alphaList div#listOfLetters {
  word-spacing: 1em;
  color: #a0a0a0;
}

body#libraryPage div.content div#alphaList div#listOfLetters a {
  /*margin-right: 1em;*/
}

/****************************************

  Create library page

*****************************************/

body#libraryPageCreate div.content {
  width: 45em;
}

body#libraryPageCreate div.secondaryContent {
  width: 15em;
}

body#libraryPageCreate div.content div {
  margin-top: 20px;
}

body#libraryPageCreate div.content input {
  display: inline;
  margin-right: 6px;
}

body#libraryPageCreate span.size {
  font-size: 0.8em;
  color: #a0a0a0;
  margin-left: 0.5em;
}

body#libraryPageCreate div.currentSize {
  margin: 0.5em 0;
  font-weight: bold;
}

body#libraryPageCreate li.selected {
  padding: 4px;
  border: 1px solid #000;
  background: #f6fafd;
  position: relative;
  left: -5px;
}

/****************************************

  Article page

*****************************************/
/* Extra width for fitting resources */
body#articlePage div#body {
  width: 90em;
}

body#articlePage h2 {
  margin-bottom: 0;
}

body#articlePage span.date {
  color: #a0a0a0;
  font-size: 10px;
}

body#articlePage textarea {
  width: 100%;
  height: 400px;
  display: block;
}

body#articlePage fieldset.ex {
  border: 1px solid #000;
  background: #f6fafd;
  padding: 4px;
}

body#articlePage fieldset.ex input {
  width: 300px;
  font-family: 'Courier New';
}

body#articlePage table.pages, body#articlePage table.pages td {
  border: 0;
}

body#articlePage ul.comments {
  margin-top: 1em;
}

body#articlePage ul.comments li {
  margin-bottom: 1em;
}

body#articlePage ul.comments li p {
  margin: 0.2em 0 0 1em;
  border-top: 1px solid #000;
}

body#articlePage div.resources {
  padding: 1em;
  width: 30em;
  float: left;
}

body#articlePage div.resources pre {
  margin: 0;
}

body#articlePage table tr th {
  background: #f6fafd;
  font-weight: bold;
  text-align: center;
}

body#articlePage table tr td {
  
}

/****************************************

  Contact page

*****************************************/

body#contactPage textarea {
  width: 600px;
  height: 300px;
}

/****************************************

  FAQ page

*****************************************/

/****************************************

  Download page

*****************************************/

img.icon, img.browserIcon {
  /*width: 1.33em;
  height: 1.33em;*/
  border: 1px solid #000;
}

body#downloadPage ul.items li {
  margin-bottom: 4px;
}

body#downloadPage ul li ul {
  margin-left: 108px;
}

body#downloadPage ul.items li ul li {
  margin-bottom: 0;
}

body#downloadPage div.content {
  width: 45em;
}

body#downloadPage div.secondaryContent {
  width: 15em;
}

body#downloadPage img.question {
  border: 1px solid #000;
  cursor: pointer;
  background: #fff;
}

body#downloadPage div.optionalNote {
  border: 1px solid #000;
  padding: 4px;
  background: #f6fafd;
  display: none;
  margin-bottom: 1em;
}

body#downloadPage div.optionalNote div {
  margin-bottom: 1em;
}

body#downloadPage div.optionalNote div input {
  border: 1px solid #000;
  background: #fff;
  cursor: pointer;
}

body#downloadPage ul.subObjects {
  display: none;
  border: 1px solid #000;
  background: #f6fafd;
  padding: 4px;
  position: relative;
  left: -5px;
}

body#downloadPage ul.subObjects div.optionalNote {
  background: #fff;
  margin: 2px 5px 5px 108px;
}

/****************************************

  Manual page

*****************************************/
body#manualPage div.content {
  width: 45em;
}

body#manualPage div.secondaryContent {
  width: 15em;
}

body#manualPage div.content h3 {
  margin: 1em 0;
  font-size: 1.17em;
}

body#manualPage div.content ul.list {
  margin-top: 0.5em;
  margin-left: 0;
}

body#manualPage div.content ul.list li {
  list-style-type: none;
  margin-left: 0;
}

body#manualPage div.content ul.list li ul.list li {
  margin-left: 2em;
}
body#manualPage div.content ul.list li p {
  margin-top: 0.2em;
}

body#manualPage table#logTable {
  width: 100%;
}

/****************************************

  Tool page

*****************************************/
body#toolPage div.content {
  width: 45em;
}

body#toolPage div.secondaryContent {
  width: 15em;
}

body#toolPage textarea {
  width: 100%;
  height: 300px;
}

body#toolPage h3 {
  font-size: 12px;
  margin: 8px 0;
}

body#toolPage ul.items li {
  margin-bottom: 4px;
}

/****************************************

  Script page

*****************************************/
body#scriptPage div.content {
  width: 45em;
}

body#scriptPage div.secondaryContent {
  width: 15em;
}

/****************************************

  Newt manual page

*****************************************/
body#newtPage div.content {
  width: 45em;
}

body#newtPage div.secondaryContent {
  width: 15em;
}

body#newtPage ul.tocItems {
  margin-bottom: 1em;
}

body#newtPage ul.tocItems li ul {
  margin-left: 1em;
}

body#newtPage ul.tocItems li ul li {
  margin-bottom: 0;
}

body#newtPage a.example {
  margin-top: -10px;
  display: block;
  text-align: right;
}

/* Manual control */
body#newtPage div.manualControl {
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

body#newtPage div.manualControl div.navigation a, body#newtPage div.manualControl div.navigation a:hover, body#newtPage div.manualControl div.navigation a:visited {
  color: #000;
  text-decoration: none;
  padding: 0 6px;
  background: #f6fafd;
  border: 1px solid #000;
  cursor: pointer;
}

body#newtPage div.manualControl div#toc {
  padding: 4px;
  background: #f6fafd;
  border: 1px solid #000;
  position: absolute;
  left: 0;
  top: 20px;
  height: 300px;
  width: 250px;
  overflow: auto;
  z-index: 10;
}

body#newtPage div.manualControl div#toc span {
  margin: 0 4px 0 -13px;
}

/* Syntax, parameter etc. headlines */
body#newtPage div.content strong, body#newtPage div.secondaryContent strong {
  display: block;
}

/* Name of parameter */
body#newtPage div.content dt {
  /*font-family: 'Courier new';*/
}

/* Description of parameter */
body#newtPage div.content dd {
  margin: 0 0 4px 10px;
}

body#newtPage div.content ul.syntax li {
  padding: 4px;
  border: 1px solid #000;
  background: #f6fafd;
}

/****************************************

  JSON Explore

*****************************************/

div#explore {
  padding: 10px 10px 10px 20px;
  border: 1px solid #000;
}

div#explore ul, div#explore li {
  margin: 0;
  padding: 0;
}

div#explore li {
  list-style: none;
}

div#explore li ul {
  margin-left: 10px;
}

div#explore li.toggle img {
  cursor: pointer;
  border: 1px solid #000;
  margin-right: 10px;
  margin-left: -10px;
}

div#explore li.toggle span {
  cursor: pointer;
}

div#explore li ul li {
  margin-left: 10px;
}

div#explore li ul li.toggle img {
  margin-left: -20px;
}

/****************************************

  CSS Format

*****************************************/
#toolPage .options {
  margin-left: 20px;
}

#toolPage #outputContainer {
  margin-top: 20px;
  display: none;
}

#toolPage #output {
  padding: 4px;
  border: 1px solid #000;
}