body {
  background-color: #F8F8F8;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.2em;
  margin: 15px;
}

#loading {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    margin-left: -100px;
}

p {
  color: #333;
}

.error-field {
  border: 2px solid #ff0000;
}

#container {
  width: 100%;
  height: 400px;
  position: relative;
  border: 1px solid #ccc;
  background-color: #fff;
}

#text {
  font-size: 24pt;
  text-align: center;
  margin-top: 140px;
}

.cw-DockPanel td {
  border: 1px solid #BBBBBB;
  padding: 3px;
}

.headerPanel {
    width: 150px;
    height: 100px;
    border: 2px solid black;
}
.header {
    margin: 3px;
    border: 2px solid red;
}
.middle {
    margin: 3px;
    border: 2px solid orange;
}
.footer {
    margin: 3px;
    border: 2px solid green;
}

.cw-FlexTable td {
  border: 1px solid #BBBBBB;
  padding: 3px;
}
.cw-FlexTable-buttonPanel td {
  border: 0px;
}

.sc-FixedWidthButton {
  width: 10em;
}

/******/
/* Prevent the text contents of draggable elements from being selectable. */
[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.column {
  background-color: #ccc;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border: 2px solid #666;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 3px #000;
  -ms-box-shadow: inset 0 0 3px #000;
  box-shadow: inset 0 0 3px #000;
  cursor: move;
  height: 150px;
  float: left;
  margin-right: 5px;
  text-align: center;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  -moz-transition: -moz-transform 0.2s ease-out;
  -ms-transition: -moz-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  width: 150px;
}

.column header {
  background: -moz-linear-gradient(left center,
      rgb(0, 0, 0), rgb(79, 79, 79), rgb(21, 21, 21));
  background: -webkit-linear-gradient(linear, left top, right top,
      color-stop(0, rgb(0, 0, 0)),
      color-stop(0.5, rgb(79, 79, 79)),
      color-stop(1, rgb(21, 21, 21)));
  background: -webkit-linear-gradient(left center,
      rgb(0, 0, 0), rgb(79, 79, 79), rgb(21, 21, 21));
  background: -ms-linear-gradient(left center,
      rgb(0, 0, 0), rgb(79, 79, 79), rgb(21, 21, 21));
  border-bottom: 1px solid #ddd;
  -webkit-border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -ms-border-radius-topleft: 10px;
  border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topright: 10px;
  -ms-border-radius-topright: 10px;
  border-top-right-radius: 10px;
  box-shadow: 5px;
  color: #fff;
  padding: 5px;
  text-shadow: #000 0 1px;
}

.column.over {
  border: 2px dashed #000;
}

.column.moving {
  opacity: 0.25;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
}

.table-center
{
  margin-left         : auto;
  margin-right        : auto;
}

/**********************************************************************************
*             Popup Demo
**********************************************************************************/
.demo-popup, .demo-Composite
{
  background-color      : #ffc;
  border            : 3px solid #009;
}
.demo-Composite
{
  margin            : 0 auto;
}
.demo-popup-header, .demo-Composite-header
{
  background-color      : #ff0;
  font-size         : 90%;
  font-weight         : bold;
  border-bottom       : 3px solid #009;
  padding           : 5px;
  text-align          : center;
}
.demo-popup-message, .demo-Composite-data
{
  font-size         : 80%;
  padding           : 15px;
}
.demo-popup-footer
{
  padding           : 5px;
  text-align          : center;
  width           : 100%;
}

/**********************************************************************************
*               Demo Pages
**********************************************************************************/
.demo-panel, .demo-panel-borderless, .demo-panel-padded
{
  margin            : 15px auto;
  background-color      : #ddd;
}
.demo-panel
{
  border            : 5px solid #999;
}
.demo-panel-padded
{
  border            : 5px solid #999;
  padding           : 10px;
}
.demo-panel-padded td
{
  padding           : 5px;
}
.demo-buttons
{
  margin            : 15px;
  margin-left         : auto;
  margin-right        : auto;
}
.demo-label, .demo-label-bigborder
{
  margin            : 0 auto;
  background-color      : #ff0;
  text-align          : center;
  border            : 1px solid #009;
}
.demo-label-bigborder
{
  margin            : 7px;
  border            : 7px solid #66f;
}
.demo-label-over
{
  background-color      : #00f;
  color           : #ff0;
}
.demo-table
{
  border-collapse       : separate;
  border            : 5px solid #999;
  background-color      : #ddd;

}
.demo-table-cell
{
  border            : 1px solid #009;
    background-color            :   #ff0;
    padding           : 5px;
}

