html, body {
	padding: 0;
	margin: 0;
  width: 100%;
  height: 100%;

    -webkit-user-select: none; /* Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
}

*  {
  padding: 0;
  margin:0;
}

body {
  background-size: cover;
  /*background: url('../images/SplashScreen_DinoCraft.png');*/
}

html, body {
  overflow:hidden;
  -webkit-text-size-adjust: none
}

section {
  display: none;
  width: 100%;
  height: 100%;
}

templates {
  display: none;
}

/*
disableImg {
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
         -o-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
            filter: grayscale(100%); 
}

a:hover img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: none ; /* IE6-9 */
    /*zoom:1; /* needed to trigger "hasLayout" in IE if no width or height is set */
    /*-webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
   /* }
 */

#demoCanvas {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: top left;
}

#overlay_canvas {
  position: fixed;
  top: 0;
}

#bottom_toolbar {
  text-align: center;
}

#save_button {
  display: inline-block;
	transform: scale(0.5);
	cursor: pointer;
}

#draw_base {
	width: 100%;
	position: absolute;
    left: 0;
    top: 0;
    opacity: 0.5;
    pointer-events: none;
}

#canvas_wrapper {
	position: relative;
  width: 1024px;
  height: 1024px;
  float: left;
  background: url('../images/ui/paper-bg.png');
  background-size: cover;
}

#colour_picker {
}

#drawing_toolbar {
  float: left;
  background: #ccc;
  height: 100%;
}

.app-modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: top left;
  opacity: 0;
  transition: opacity 0.5s; 
}

    .app-modal .manager {
      width: 1188px;
      height: 690px;
    /* border: 3px #000 solid; */
    /* transform: scale(0.879); */
    /* transform-origin: top; */
    /* display: inline-block; */
    /* margin: 17px auto; */
      transition: height 0.35s;
    }

    .app-modal .app-print .manager {
      width : 1325px;
    }

.button-dock {
  text-align: center;
  width: 100%;
}

.button-dock button {
  font-size: 40px;
}

.button-dock li {
  display: inline-block;
  position: relative;
  width: 20%;
  vertical-align: top;
  margin: 0 2%;
  perspective-origin: center;
  perspective: 400px;
  opacity: 0;
}

.button-dock li img {
    width: 100%;
    cursor: pointer;
    transform: scale(2);
    opacity: 0;
    transition: transform 1s, opacity 1s;
}

.button-dock li img.active {
  opacity: 1;
  transform: scale(1);
}

#input_canvas, #output_canvas, #interactive_canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5000;
}

.toolbar {
  position: absolute;
  left: 2%;
  top: 10%;
  width: 16%;
}

.brush-size li {
  border: 2px solid #000;
}

.toolbar li[button] {
    position: relative;
}

.toolbar-button {
  width: 100%;
  cursor: pointer;
  vertical-align: top;
}

.toolbar-button-active {
  position: absolute;
  right: 0;
  top: 50%;
  display: none;
  transform: translate(100%,-50%);
  z-index: 99999;
}

.button-dock {
  width: 100%;
  float: left;
  clear: both;
  position: absolute;
  top: 935px;
  transform-origin: top;
}

	/* Print  */
@media print {

  	* {
    	display:none;
      transform: unset !important;
  	}

  	html, body, .app-modal, .app-module, .manager {
    	display:block;
      transform: scale(1);
      left: 0;
      top : 0;
  	}

  	.manager {
      width: 100%; /*  26.67cm !important; */
      transform: scale(1);
      left: 0;
      top : 0;
  	}
}

  /*  .print * {
      display:none;
      transform: unset;
    }

    .print .app-modal {
      overflow: visible;
      width: inherit;
      height: inherit;
    }

    .print html, .print body {
      display: block;
    }

    .print .app-modal, .print .app-module, .print .manager {
      display:block;
      transform: scale(0.9) !important;
      left: 0;
      top : 0;

    } */

    /* .print .manager {
      height: 20.32cm 
      width: 26.67cm !important;
    } */



.display-canvas, .stage-canvas {
  pointer-events: none;
  z-index: 9999;
  top: 0;
  left: 0;
  position: absolute;
  transform-origin: top left;
}

.app-modal {
  background: url('../images/ui/bg-panel.png');
  width: 1188px;
  height: 891px;

  text-align: center;
}
#drawing_section {
  background: url(../images/ui/paper-bg.png);
  background-size: cover;  
}

#paper_crumb_list {

  display: inline-block;
  position: absolute;
  transform: scale(0.77,1.03);
  z-index: 99999;
}

#paper_crumb_list li {
  margin: 17px auto;
  position: absolute;
  top: 0;
  transform-origin: top;
  transform: translate(-50%,0);
  z-index: 99999;
}

#paper_crumb_list li img {
  display: none;
}

#print_canvas {
  transform: scale(1.204);
  transform-origin: top left;
}
  
#draw_outline {
  position: absolute;
    top: 0;
    left: 0;
    z-index: 5001;
    pointer-events: none;
}


.draw-dock {

}

toolset {
  display: none;
  position: absolute;
  top: 0;
  opacity: 0;
  transition: opacity 1s;

}

.draw-mode toolset.draw-toolset {
  display: block;
  opacity: 1;
  width: 100%;
}

.preview-mode toolset.preview-toolset {
  display: block;
  opacity: 1;
  width: 100%;pigment
}

.print-mode toolset.print-toolset {
  display: block;
  opacity: 1;
  width: 100%;
}


#debug_canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  display: none;
}

.mask-canvas {
  position: absolute;
  z-index: 9999;
}

[brush] {
  transition: transform 0.2s;
  cursor: pointer;
}

[brush]:hover {
  transform: scale(1.35) translate(0,-65%);
}

[brush] .outline-image {
  position: absolute;
  left: -5px;
  bottom: 0;
  transition: 0.5s opacity;
  opacity: 0;
}

[brush] .outline-colour-image {
  position: absolute;
  left: 0px;
  bottom: 0;
  transition: 0.5s opacity;
}

[brush] .outline-colour-image-placing {
  position: absolute;
  left: 0px;
  top: -1px;
  bottom: 0;
  transition: 0.5s opacity;
}

[brush].active .outline-image {
  opacity: 1;
}

[brush='marker'] .outline-image {
  left: 0;
}

.brush-list li[brush].pressed {
  transform: scale(1.25) translate(0,-75%);
}

.draw-toolset .redo-button.pressed, .draw-toolset .undo-button.pressed {
  transform: scale(0.9);
}

.draw-disabled {
  pointer-events: none;
  opacity: 0.2;
}

.zoom-in {
  position: absolute;
  top: -60px;
  left : 20px;
  transform: scale( 2 );
}

.zoom-out {
  position: absolute;
  top: -60px;
  right: 20px;
  transform: scale( 2 );
}


.dino-scroll { /* height: 690/215 */;
    width: 1188px;
    height: 690px;
    position: absolute;
    z-index: 9999;
    background: url('../images/DinoScrollSmall.png') repeat-x;
    background-size: 1000%;
    background-position-y: 0;
    top: 0;
    transition: all; 
}

.draw-desktop canvas, .draw-desktop #draw_outline {
  opacity: 0
}

.temp-canvas {
  position: relative;
  z-index: 9999;
}

.debug-log {
  position: absolute;
  width: 100%;
  background: #fff;
}

.nextDinoLeft.faded {
  opacity: 0.5;
  pointer-events: none;
}

.nextDinoRight.faded {
  opacity: 0.5;
  pointer-events: none;
}

.debug-log {
  position: absolute;
  width: 100%;
  background: #fff;
}

#tutorial_video {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 960px;
  height: 720px;
    z-index: 9999;

}

.tutorial-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
    z-index: 9999;
}