/* CSS Document */

/*	
Placeholder default colour
WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element: ::-webkit-input-placeholder. [Ref]
Mozilla Firefox 4 to 18 is using a pseudo-class: :-moz-placeholder (one colon). [Ref]
Mozilla Firefox 19+ is using a pseudo-element: ::-moz-placeholder, but the old selector will still work for a while. [Ref]
Internet Explorer 10 and 11 are using a pseudo-class: :-ms-input-placeholder. [Ref]
Internet Explorer 9 and lower does not support the placeholder attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.

User agents are required to ignore a rule with an unknown selector. See Selectors Level 3:

a group of selectors containing an invalid selector is invalid.
So we need separate rules for each browser. Otherwise the whole group would be ignored by all browsers. */

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #cccccc;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #cccccc;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #cccccc;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #cccccc;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #cccccc;
}


body
{
  height:100%;
}
#header
{
  height: 40px;
  overflow: hidden;
}
#tracker
{
  height: 80px;
  overflow: hidden;
}
.touchActionNone 
{
  -ms-touch-action: none;
  touch-action: none;
}
.bordered{
  border: lightsteelblue solid 1px;
}
span{
	 font-size: small;
	 font-style: arial;			
} 
 #drawing{
  position:absolute;
  left:0;
  top:64px;
  right:0;
  bottom:0;
  opacity:1.0;
  cursor: crosshair;
  border: red solid 2px;
}
 #pickcolor{
  position:absolute;
  left:0;
  top:64px;
  right:0;
  bottom:0;
  cursor: crosshair;
  -webkit-user-drag:element;
  opacity:1.0;
}
  #backcontainer{
  position:absolute;
  left:0;
  top:64px;
  right:0;
  bottom:0;
  cursor: default;
  -webkit-user-drag:element;
  opacity:1.0;
}
  #imcontainer{
  position:absolute;
  left:0;
  top:64px;
  right:0;
  bottom:0;
  cursor: default;
  -webkit-user-drag:element;
  opacity:1.0;
}
#touchTarget
{
  position:absolute;
  z-index:6; 
  left:0;
  top:64px;
  right:0;
  width:100%;
  height:100%;
  -webkit-user-drag:element;
}
#log 
{
  position:absolute;
  /* overflow-y:scroll; */
  top:0;
  bottom:0;
  right: 10px;
  left:0;
  -webkit-user-drag:element;
  -ms-touch-action: inherit;
}
#touchTarget > pre
{
  -ms-touch-action: inherit;
  clear:left;
}
#boxes {
  /*position: absolute;*/
  right: 0;
  float: right;
  top: 0;
  bottom: 0;
}

.infront {
  position: absolute;
  top:0px;
  z-index: 1
}

.behind {
  position: absolute;
  top:0px;
  z-index: -1
}

 #gallerycontainer {
  position: absolute;
  top:64px;
  left: 0px;
  width: 800px;              
  height: 120px;
  border: 1px solid gainsboro;
  
}
.box {
  position:relative;
  margin: 0px;
  height: 120px;
  width: 50px;
  border: 0px solid gainsboro;
  left:0;
  top:0;
  float:left;
}

.backcolor
{
  background-color: darksteelblue;
}
#purple
{
  background-color: purple;
  top: 10px;
}
.btns {
	 background-color: white;
	 color: black;
}
#purple:hover
{
  background-color: #D000D0;
}
#purple:active
{
  border: 1px solid red;
}
#purple:hover::after
{
  content: ":hover";
}
#purple:active::after
{
  content: ":active";
}
#purple:hover:active::after
{
  content: ":hover:active";
}
#red
{
  background-color: red;
}
.noevents
{
  opacity: 0.4;
  pointer-events: none;
}
#scroll
{
  overflow: auto;-webkit-overflow-scrolling: touch;
}
.overflowScrollTouch
{
  -webkit-overflow-scrolling: touch;
}
#config
{
  position: absolute;
  top: 40px;
  left: 20px;
  background-color: gainsboro;
  border: 2px solid darkgrey;
  padding: 10px;
  z-index: 100;
}
.hide
{
  display: none;
}
.show
{
  display: inline;
}
.topbox
{
	-moz-box-shadow: 0em 5em 6em -4em #276873;
	-webkit-box-shadow: 0em 5em 6em -4em #276873;
	box-shadow: 0em 5em 6em -4em #276873;
	-moz-border-radius:.6em;
	-webkit-border-radius:.6em;
	border-radius:.6em;
}

#config-summary
{
  font-size: x-small;
}
.backdropg{
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05,  lightsteelblue), color-stop(1,  lightslategray));
	background:-moz-linear-gradient(top,  lightsteelblue 5%,  lightslategray 100%);
	background:-webkit-linear-gradient(top,  lightsteelblue 5%,  lightslategray 100%);
	background:-o-linear-gradient(top,  lightsteelblue 5%,  lightslategray 100%);
	background:-ms-linear-gradient(top,  lightsteelblue 5%,  lightslategray 100%);
	background:linear-gradient(to bottom,  lightsteelblue 5%,  lightslategray 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=' lightsteelblue', endColorstr=' lightslategray',GradientType=0);
	background-color: lightsteelblue;
}
.butcontrol{
	-moz-box-shadow: 0em 5em 6em -4em #276873;
	-webkit-box-shadow: 0em 5em 6em -4em #276873;
	box-shadow: 0em 5em 6em -4em #276873;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05,  lightsteelblue), color-stop(1,  lightslategray));
	background:-moz-linear-gradient(top,  lightsteelblue 5%,  lightslategray 100%);
	background:-webkit-linear-gradient(top,  lightsteelblue 5%,  lightslategray 100%);
	background:-o-linear-gradient(top,  lightsteelblue 5%,  lightslategray 100%);
	background:-ms-linear-gradient(top,  lightsteelblue 5%,  lightslategray 100%);
	background:linear-gradient(to bottom,  lightsteelblue 5%,  lightslategray 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=' lightsteelblue', endColorstr=' lightslategray',GradientType=0);
	background-color: lightsteelblue;
	-moz-border-radius:.6em;
	-webkit-border-radius:.6em;
	border-radius:.6em;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:.8em;
	font-weight:bold;
	padding:.2em .2em;
	text-decoration:none;
	text-shadow:.1em .1em 0em #3d768a;
}

.droptext {
	-moz-border-radius:.6em;
	-webkit-border-radius:.6em;
	border-radius:.6em;
	color:#ffffff;
	font-family:Arial;
	font-size:1em;
	font-weight:normal;
	padding:.2em .2em;
	text-decoration:none;
	/*text-shadow:.1em .1em 0em #3d768a;*/
	border: 1px solid steelblue;
	background-color: steelblue;
	text-align:center;
}

.dropwidth1 {
	width:60px;
}

.dropwidth2 {
	width:200px;
}

.dropwidth3 {
	width:100px;
}

.statusbar {
	/*-moz-border-radius:.6em;
	-webkit-border-radius:.6em;
	border-radius:.6em;*/
	color:#ffffff;
	font-family:Arial;
	font-size:0.75em;
	font-weight:bold;
	padding:.2em .2em;
	text-decoration:none;
	text-shadow:.1em .1em 0em #3d768a;
	border: 1px solid steelblue;
	background-color: #396a93;
	text-align:center;
}

.imgcontrol {
  width: 30px;
  vertical-align: middle;
}
.imgcontrol2 {
  width: 20px;
  vertical-align: top;
  display: inline;
}
.marker{
	-moz-box-shadow: 0em 5em 6em -4em #276873;
	-webkit-box-shadow: 0em 5em 6em -4em #276873;
	box-shadow: 0em 5em 6em -4em #276873;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05,  #264662), color-stop(1,  slategray));
	background:-moz-linear-gradient(top,  #264662 5%,  slategray 100%);
	background:-webkit-linear-gradient(top,  #264662 5%,  slategray 100%);
	background:-o-linear-gradient(top,  #264662 5%,  slategray 100%);
	background:-ms-linear-gradient(top,  #2646625%,  slategray 100%);
	background:linear-gradient(to bottom,  #264662 5%,  slategray 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=' #264662', endColorstr=' slategray',GradientType=0);
	background-color: #264662;
	-moz-border-radius:.6em;
	-webkit-border-radius:.6em;
	border-radius:.6em;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:.3em;
	font-weight:bold;
	padding:.1em .1em;
	text-decoration:none;
	text-shadow:.1em .1em 0em #3d768a;
}

.butcontrol:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05,  lightslategray), color-stop(1,  lightsteelblue));
	background:-moz-linear-gradient(top,  lightslategray 5%,  lightsteelblue 100%);
	background:-webkit-linear-gradient(top,  lightslategray 5%,  lightsteelblue 100%);
	background:-o-linear-gradient(top,  lightslategray 5%,  lightsteelblue 100%);
	background:-ms-linear-gradient(top,  lightslategray 5%,  lightsteelblue 100%);
	background:linear-gradient(to bottom,  lightslategray 5%,  lightsteelblue 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='lightslategray', endColorstr='lightsteelblue',GradientType=0);
	background-color: SkyBlue;
}
.butcontrol:active {
	/*position:relative;*/
	top:1px;
}
.inptext { 
			 border-style:solid;
			 font-size:1em;
			 text-align:center; 
			 padding:.2em; 
			 /*background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05,  lightsteelblue), color-stop(1,  lightslategray));
			 background:-moz-linear-gradient(top,  lightsteelblue 5%,  lightslategray 100%);
			 background:-webkit-linear-gradient(top,  lightsteelblue 5%,  lightslategray 100%);
			 background:-o-linear-gradient(top,  lightsteelblue 5%,  lightslategray 100%);
			 background:-ms-linear-gradient(top,  lightsteelblue 5%,  lightslategray 100%);
			 background:linear-gradient(to bottom,  lightsteelblue 5%,  lightslategray 100%);*/
			 background-color:steelblue; 
			 
			 border-color:#fff7ff; 
			 color:#ffffff;
			 -moz-box-shadow: 0em 5em 6em -4em #276873;
			 -webkit-box-shadow: 0em 5em 6em -4em #276873;
			 box-shadow:inset 0em 0em 1em 0em rgba(42,42,42,.75), 0em 5em 6em -4em #276873;; 
			 text-shadow:.1em .1em 0em rgba(42,42,42,.75); 
			 border-width:0em; 
			 border-radius:.6em;
			 -moz-border-radius:.6em;
			 -webkit-border-radius:.6em;
	  } 
	  
.progress {
			 /*-moz-border-radius:.3em;
			 -webkit-border-radius:.3em;
			 border-radius:.3em;
			 -moz-box-shadow: 0em 5em 6em -4em #276873;
			 -webkit-box-shadow: 0em 5em 6em -4em #276873;
			 box-shadow:inset 0em 0em 1em 0em rgba(42,42,42,.75), 0em 5em 6em -4em #276873;; */
}

.segcell   {
	 -moz-box-shadow: 0em 5em 6em -4em #276873;
	 -webkit-box-shadow: 0em 5em 6em -4em #276873;
	 box-shadow:inset 0em 0em 1em 0em rgba(42,42,42,.75), 0em 5em 6em -4em #276873;; 
}
	  
.inptextdiv { 
             
	  } 
.inptext:focus { outline:none; } 
.spancolor { border-style:solid;
			 display: inline-block; 
             width:1em;
			 height:1em;
			 padding:.2em; 			 
			 border-color:#fff7ff; 
			 color:#ffffff; 
			 box-shadow:inset 0em 0em 1em 0em rgba(42,42,42,.75); 
			 border-width:0em; 
			 border-radius:.6em;
			 -moz-border-radius:.6em;
			 -webkit-border-radius:.6em;
	  } 
.spanline { border-style:solid;
			 display: inline-block; 
             width:0.8em;
			 height:1em;
			 padding:.2em; 			 
			 border-color:#fff7ff; 
			 color:#ffffff; 
			 box-shadow:inset 0em 0em 0.5em 0em rgba(42,42,42,.75); 
			 border-width:0em; 
			 border-radius:.6em;
			 -moz-border-radius:.6em;
			 -webkit-border-radius:.6em;
	  } 	  
.spancolor:focus { outline:none; } 
.spancolorgreen { border-style:solid;
			 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05,  lightgreen), color-stop(1,  green));
			 background:-moz-linear-gradient(top,  lightgreen 5%,  green 100%);
			 background:-webkit-linear-gradient(top,  lightgreen 5%,  green 100%);
			 background:-o-linear-gradient(top,  lightgreen 5%,  green 100%);
			 background:-ms-linear-gradient(top, lightgreen 5%,  green 100%);
			 background:linear-gradient(to bottom, lightgreen 5%,  green 100%);
			 background-color:green; 
	  } 
.spancolorred { border-style:solid;
			 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05,  red), color-stop(1,  crimson));
			 background:-moz-linear-gradient(top,  red 5%,  crimson 100%);
			 background:-webkit-linear-gradient(top,  red 5%,  crimson 100%);
			 background:-o-linear-gradient(top,  red 5%,  crimson 100%);
			 background:-ms-linear-gradient(top,   red 5%,  crimson 100%);
			 background:linear-gradient(to bottom,   red 5%,  crimson 100%);
			 background-color:red; 
	  } 	  	  	  
.spancolorblue{ border-style:solid;
			 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05,  blue), color-stop(1,  darkblue));
			 background:-moz-linear-gradient(top,  blue 5%,  darkblue 100%);
			 background:-webkit-linear-gradient(top,   blue 5%,  darkblue 100%);
			 background:-o-linear-gradient(top,  blue 5%,  darkblue 100%);
			 background:-ms-linear-gradient(top,  blue 5%,  darkblue 100%);
			 background:linear-gradient(to bottom,  blue 5%,  darkblue 100%);
			 background-color:blue; 
	  } 	  	  
.spancoloryellow { border-style:solid;
			 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05,  yellow), color-stop(1,  goldenrod));
			 background:-moz-linear-gradient(top,  yellow 5%,  goldenrod 100%);
			 background:-webkit-linear-gradient(top,  yellow 5%,  goldenrod 100%);
			 background:-o-linear-gradient(top,  yellow 5%,  goldenrod 100%);
			 background:-ms-linear-gradient(top,  yellow 5%,  goldenrod 100%);
			 background:linear-gradient(to bottom,  yellow 5%,  goldenrod 100%);
			 background-color:yellow; 
	  } 	  	  
.spancolororange { border-style:solid;
			 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05,  orange), color-stop(1,  orangered));
			 background:-moz-linear-gradient(top,  orange 5%,  orangered 100%);
			 background:-webkit-linear-gradient(top  orange 5%,  orangered 100%);
			 background:-o-linear-gradient(top,  orange 5%,  orangered 100%);
			 background:-ms-linear-gradient(top,  orange 5%,  orangered 100%);
			 background:linear-gradient(to bottom,  orange 5%,  orangered 100%);
			 background-color:orange; 
	  } 	  	  
.spancolorblack { border-style:solid;
			 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05,  darkslategray), color-stop(1,  black));
			 background:-moz-linear-gradient(top,  darkslategray 5%,  black 100%);
			 background:-webkit-linear-gradient(top,   darkslategray 5%,  black 100%);
			 background:-o-linear-gradient(top,  darkslategray 5%,  black 100%);
			 background:-ms-linear-gradient(top,  darkslategray 5%,  black 100%);
			 background:linear-gradient(to bottom,  darkslategray 5%,  black 100%);
			 background-color:black; 
	  } 	  	  
.spancolorwhite { border-style:solid;
			 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05,  white), color-stop(1,  ghostwhite));
			 background:-moz-linear-gradient(top,  white 5%,  ghostwhite 100%);
			 background:-webkit-linear-gradient(top,   white 5%,  ghostwhite 100%);
			 background:-o-linear-gradient(top,   white 5%,  ghostwhite 100%);
			 background:-ms-linear-gradient(top,  white 5%,  ghostwhite 100%);
			 background:linear-gradient(to bottom,  white 5%,  ghostwhite 100%);
			 background-color:white; 
	  } 
.laybut	 {
		  color:white;
		  font-style:arial;
		  font-size:small;
		  font-weight:bold;
		}