body {
  margin: 10px;
}

#thePage {
  padding: 10px;
  overflow: visible;
}

.pageGrid {
  background-image:url(../images/page_grid.png);
  background-position: 0px 0px;
}

#eventLogDialog .jxDialogContent {
  background-color: #fff;
}

#eventLogDialog .jxDialogContent ol {
  
}

#eventLogDialog .jxDialogContent li {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 18px;
  font-weight: normal;
  list-style-position: outside;
  list-style-type: decimal;
  margin-left: 30px;
}

.exampleScript {
  width: 600px;
  height: 400px;
}

pre.prettyprint {
  border: none;
  padding: 5px;
}

h1 {
  position: relative;
  display: block;
  clear: both;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
  line-height: 30px;
  font-weight: normal;
  color: #6EAFC5;
  padding: 0px 0px 10px 0px;
  margin: 0px 10px;
  border-bottom: 3px solid #DCEAEE;
}

h2 {
  position: relative;
  display: block;
  clear: both;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 24px;
  font-weight: normal;
  color: #E3996D;
  margin: 10px 10px;
  padding: 6px 0px;
  border-bottom: 1px solid #EEE1D9;
}

h3 {
  display: block;
  position: relative;
  clear: both;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: normal;
  color: #7AC56F;
  margin: 0px 10px;
  padding: 10px 0px 6px 0px;
  border-bottom: 1px solid #A3C59E;
}

p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: normal;
  color: #333;
  margin: 10px 10px;
  clear: both;
  position: relative;
}

dl {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
  margin: 10px 10px;
  color: #333;
  
}

dt {
  display: block;
  font-weight: bold;
}

dd {
  display: block;
  margin-left: 40px;
}

.sourceButton {
  position: absolute;
  right: 0px;
  top: 6px;
  width: 40px;
  background: none;
}

#pageBar {
  position: absolute;
  top: 3px;
  right: 0px;
  width: auto;
  background: none;
}

#pageBar span.jxButtonContent span.jxButtonLabel {
  color: #333;
}

#pageBar a:hover span.jxButtonContent span.jxButtonLabel {
  color: #333;
}

.buttonBox {
  display: block;
  position: relative;
  margin: 10px 10px;
  clear: both;
  overflow: hidden;
}

.toolbarBox {
  display: block;
  position: relative;
  margin: 0px 10px;
  width: auto;
  clear: both;
  overflow: hidden;
}

.tabBox {
  display: block;
  position: relative;
  margin: 0px 10px;
  height: 150px;
  border: 1px solid #ccc; 
  border: 1px solid #ccc;
  width: 600px;
  clear: both;
}

.layoutBox {
  display: block;
  position: relative;
  background: #f0f0f0;  
  margin: 0px 10px;
  padding: 4px;
  width: auto;
  height: 40%;
  border-top: 1px solid #f0f0f0;
  border-left: 1px solid #f0f0f0;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.layoutElement {
  background: #fff;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  margin: 2px;
  overflow: auto;
}

#layoutOffsetContainer {
    border: 2px solid #999;
    padding: 2px;
}

.splitterBox {
  display: block;
  position: relative;
  background: #f0f0f0;  
  margin: 0px 10px;
  padding: 4px;
  width: auto;
  height: 200px;
  border-top: 1px solid #f0f0f0;
  border-left: 1px solid #f0f0f0;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.splitterAdvancedBox {
  width: 600px;
  height: 400px;
}

.jxSplitArea {
  background-color: #fff;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}

.splitContent {
  overflow: auto;
}

.treeBox {
  display: block;
  position: relative;
  width: 400px; 
  height: 300px; 
  border: 1px solid #ccc; 
  margin: 10px; 
  overflow: auto; 
  z-index: 0; 
  background-color: #fff; 
}

.gridBox {
  display: block;
  position: relative;
  margin: 0px 10px;
  border: 1px solid #ccc;
  width: 500px;
  height: 400px;
  clear: both;
}

.panelBox {
  display: block;
  position: relative;
  margin: 0px 10px;
  width: 500px;
  border: 1px solid #ccc;
}

.panelSetBox {
  display: block;
  position: relative;
  margin: 0px 10px;
  width: 500px;
  height: 500px;
  border: 1px solid #ccc;
}

.testContent ul {
  list-style-type: disc;
  margin: 20px;
}

.testContent li {
  margin: 5px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: normal;
  color: #333;
}

ul.testList {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

.testList a {
  text-decoration: none;
}

.testList a:hover {
  text-decoration: underline;
}

/* for the splitter tests */
img.jxSnapOpened {
  position: absolute;
  cursor: pointer;
  width: 5px;
  height: 14px;
  background-image: url(../images/snapper.png);
  background-position: left 0px;
  top: 1px;
  left: 5px;
}

img.jxSnapClosed {
  position: absolute;
  cursor: pointer;
  width: 5px;
  height: 14px;
  background-image: url(../images/snapper.png);
  background-position: left 14px;
  top: 1px;
  left: -5px;
}

/* for the tree.html tests */

.jxTreeBranchOpen .blueFolder,
.jxTreeBranchLastOpen .blueFolder {
    background-position: left -20px;    
}

.jxTreeBranchClosed .blueFolder,
.jxTreeBranchLastClosed .blueFolder {
    background-position: left 0px;
}

/* image swatch position for the combo tests */
img.toggleLight { background-position: 0px 0px; }
.jxButtonActive img.toggleLight { background-position: 0px -16px; }

img.comboSquare  { background-position: 0px -112px; }
img.comboPlus    { background-position: 0px -128px; }
img.comboTriangle { background-position: 0px -144px; }
img.comboCircle  { background-position: 0px -160px; }
img.comboCross   { background-position: 0px -176px; }
img.comboStar    { background-position: 0px -192px; }
img.comboRed     { background-position: 0px -16px; }
img.comboMagenta { background-position: 0px -32px; }
img.comboBlue    { background-position: 0px -48px; }
img.comboCyan    { background-position: 0px -64px; }
img.comboGreen   { background-position: 0px -80px; }
img.comboYellow  { background-position: 0px -96px; }

img.alberta      { background-position:    0px 0px; }
img.bc           { background-position:  -16px 0px; }
img.labrador     { background-position:  -32px 0px; }
img.manitoba     { background-position:  -48px 0px; }
img.newbrunswick { background-position:  -64px 0px; }
img.newfoundland { background-position:  -80px 0px; }
img.northwest    { background-position:  -96px 0px; }
img.novascotia   { background-position: -112px 0px; }
img.nunavut      { background-position: -128px 0px; }
img.ontario      { background-position: -144px 0px; }
img.pei          { background-position: -160px 0px; }
img.quebec       { background-position: -176px 0px; }
img.sask         { background-position: -192px 0px; }
img.yukon        { background-position: -208px 0px; }

/* menu.html needs these */
img.file-new              { background-position:    0px 0px; }
img.file-open             { background-position:  -16px 0px; }
img.file-print-preview    { background-position:  -32px 0px; }
img.file-print            { background-position:  -48px 0px; }
img.file-properties       { background-position:  -64px 0px; }
img.file-save-as          { background-position:  -80px 0px; }
img.file-save             { background-position:  -96px 0px; }
img.edit-clear            { background-position: -112px 0px; }
img.edit-copy             { background-position: -128px 0px; }
img.edit-cut              { background-position: -144px 0px; }
img.edit-delete           { background-position: -160px 0px; }
img.edit-duplicate        { background-position: -176px 0px; }
img.edit-find-replace     { background-position: -192px 0px; }
img.edit-find             { background-position: -208px 0px; }
img.edit-paste            { background-position: -224px 0px; }
img.edit-redo             { background-position: -240px 0px; }
img.edit-select-all       { background-position: -256px 0px; }
img.edit-undo             { background-position: -272px 0px; }
img.format-indent-less    { background-position: -288px 0px; }
img.format-indent-more    { background-position: -304px 0px; }
img.format-justify-center { background-position: -320px 0px; }
img.format-justify-fill   { background-position: -336px 0px; }
img.format-justify-left   { background-position: -352px 0px; }
img.format-justify-right  { background-position: -368px 0px; }
img.format-text-bold      { background-position: -384px 0px; }
img.format-text-italic    { background-position: -400px 0px; }
img.format-text-strikethrough { background-position: -416px 0px; }
img.format-text-underline { background-position: -432px 0px; }

/* multi.html needs these */
img.chart_bar   { background-position:   0px 0px; }
img.chart_curve { background-position: -16px 0px; }
img.chart_line  { background-position: -32px 0px; }
img.chart_pie   { background-position: -48px 0px; }

/* button.html needs these */
img.text-align-center  { background-position: 0px 0px; }
img.text-align-justify { background-position: -16px 0px; }
img.text-align-left    { background-position: -32px 0px; }
img.text-align-right   { background-position: -48px 0px; }