.poietic-page-draw {
    /*
	.ui-content { 
		margin:0; padding: 0; 
	}

    .ui-grid-a { 
		margin:0; padding: 0; 
	}
	*/ }
  .poietic-page-draw .editor,
  .poietic-page-draw .viewer {
    margin: 0;
    padding: 0;
    text-align: center; }
  .poietic-page-draw #canvas-container {
    background-color: #000;
    line-height: 0; }
  .poietic-page-draw #session-editor {
    margin: 0;
    padding: 0; }
  .poietic-page-draw #session-viewer {
    margin: 0;
    padding: 0; }
  .poietic-page-draw #session-overlay {
    margin: 0;
    padding: 0;
    display: none;
    line-height: 0; }
  .poietic-page-draw #current_color {
    border: 1px solid #ffffff;
    margin-right: 0.5em; }
  .poietic-page-draw .ui-li-count {
    right: 10px; }

.poietic-page-index .ui-body-c {
  text-shadow: none; }
.poietic-page-index #index-menu {
  display: block;
  text-align: center;
  border: 1px;
  margin: 1em;
  color: white; }
  @media (min-width: 450px) {
    .poietic-page-index #index-menu #credentials label {
      margin: 0;
      vertical-align: middle;
      width: 20%;
      display: inline-block;
      text-align: right; }
    .poietic-page-index #index-menu #credentials div.ui-select, .poietic-page-index #index-menu #credentials input.ui-input-text {
      box-sizing: border-box;
      max-width: 40%;
      width: 40%;
      text-align: center;
      vertical-align: middle;
      display: inline-block; } }
  .poietic-page-index #index-menu img {
    margin: 1em;
    border: 1em solid white; }
.poietic-page-index #credits {
  text-align: center; }

.poietic-page-view .viewer, .poietic-page-view-standalone .viewer {
  margin: 0;
  padding: 0;
  text-align: center; }
.poietic-page-view #canvas-container, .poietic-page-view-standalone #canvas-container {
  background-color: #000;
  line-height: 0; }
.poietic-page-view .slider, .poietic-page-view-standalone .slider {
  margin: 0;
  padding: 0 20px; }
  .poietic-page-view .slider div.ui-slider, .poietic-page-view-standalone .slider div.ui-slider {
    width: 100%;
    margin: 0;
    padding: 0; }
    .poietic-page-view .slider div.ui-slider .ui-slider-track, .poietic-page-view-standalone .slider div.ui-slider .ui-slider-track {
      margin: 0; }
.poietic-page-view #session-overlay, .poietic-page-view-standalone #session-overlay {
  margin: 0;
  padding: 0;
  display: none;
  width: 100%;
  height: 100%;
  background-color: black;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 0; }
  .poietic-page-view #session-overlay img, .poietic-page-view-standalone #session-overlay img {
    height: 100%;
    border: none;
    width: auto; }
  .poietic-page-view #session-overlay .message, .poietic-page-view-standalone #session-overlay .message {
    display: inline-block;
    vertical-align: middle; }
    .poietic-page-view #session-overlay .message .label, .poietic-page-view-standalone #session-overlay .message .label {
      margin-bottom: 20px; }
  .poietic-page-view #session-overlay:after, .poietic-page-view-standalone #session-overlay:after {
    content: '';
    height: 100%;
    width: 0;
    display: inline-block;
    vertical-align: middle; }
.poietic-page-view #history_slider, .poietic-page-view-standalone #history_slider {
  display: none; }

.poietic-page-view-standalone.ui-page {
  height: 100%;
  background-color: black;
  overflow-y: hidden; }
  .poietic-page-view-standalone.ui-page .ui-content {
    height: 100%;
    background-color: black;
    padding: 0;
    line-height: 0; }

/* 
    Color Picker: Classic : 2011/02/26
    ---------------------------------------
    http://www.colorjack.com/opensource/dhtml+color+picker.html
    
    Native support:  Firefox 2+, Safari 3+, Opera 9+, Google Chrome, IE9+

    This color picker is dual licenced under Creative Commons & GPL.
*/
#colorjack_square {
  /* border: 1px solid rgba(0,0,0,0.5); */
  /* border-radius: 6px; */
  background: #0d0d0d;
  background: -moz-linear-gradient(top, #333 0%, #000000 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333), color-stop(100%, #000000));
  /*   box-shadow:3px 3px 3px rgba(0,0,0,0.35);
     -webkit-box-shadow:3px 3px 3px rgba(0,0,0,0.35);
     -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.35); */
  text-shadow: 1px 1px 1px #000;
  color: #AAA;
  cursor: default;
  display: block;
  font-family: arial,helvetica,sans-serif;
  font-size: 11px;
  padding: 5px 5px 5px;
  position: absolute;
  width: 199px;
  z-index: 1; }

#colorjack_square br {
  clear: both;
  margin: 0;
  padding: 0; }

#colorjack_square .hexString {
  float: left;
  color: #fff;
  cursor: text; }

#colorjack_square .hexBox {
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  background: #FFF;
  float: left;
  font-size: 1px;
  height: 10px;
  margin: 0 5px 0 2px;
  width: 10px; }

#colorjack_square .hexClose {
  color: #FFF;
  cursor: pointer;
  float: right;
  padding: 0 5px;
  margin: 0 4px 3px;
  user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none; }

#colorjack_square .hexClose:hover {
  color: #FFD000; }