html {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  cursor:default;
}


::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 11px;
}

::-webkit-scrollbar:vertical {
    width: 11px;
}

::-webkit-scrollbar:horizontal {
    height: 11px;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid #333333; /* should match background, can't be transparent */
    background-color: rgba(255, 255, 255, .3);
}

::-webkit-scrollbar-track { 
    { background: transparent; } 
    border-radius: 8px; 
} 
::-webkit-scrollbar-corner { background: transparent; }

::-webkit-scrollbar-track-piece{
background: transparent;
border:none;
}
 
::-webkit-scrollbar-track-piece:horizontal{
background: transparent;
border:none;
}


#dataflow_id{
  background-color: #fff;
  width: 100%;
  height: 100%;
}

body
{
  background-color: #2d2d2d;
  width: 100%;
  color: #dddddd;
  position: absolute;
  font-size: 11px;

 
  font-family: 'Open Sans', sans-serif;
  font-weight: normal;
  margin: 0;
  
  overflow: hidden;

  
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}





h1, p {
  color: #333;
}

#dglux_header_logo
{
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0, #2d2d2d), color-stop(1, #1a1a1a) );
  background:-moz-linear-gradient( center top, #2d2d2d 0%, #1a1a1a 100% );
  background-image:linear-gradient(to bottom, #2d2d2d 0%, #1a1a1a 100%);
  
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2d2d2d', endColorstr='#1a1a1a');

  background-color:#2d2d2d;

  /*-webkit-border-top-left-radius:20px;
  -moz-border-radius-topleft:20px;
  border-top-left-radius:20px;*/
  -webkit-border-top-right-radius:20px;
  -moz-border-radius-topright:20px;
  border-top-right-radius:20px;

  border:0px solid transparent;
  height: 35px;
  width: 100px;
  position: absolute;
}

#application_header
{
  border-bottom-color: #3a3a3a;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

#dglux_header_image
{
  margin: auto;
  position: absolute;
  left: 0; bottom: 0; right: 0;
}

#s1
{
  position: absolute;
  left: 100px;
  top: 17px;
  height: 18px;
  width: 20px;
  

  background-image: -webkit-gradient(
  linear,
  left top,
  left bottom,
  color-stop(0, #2d2d2d),
  color-stop(1, #1a1a1a)
  );
  background-image: -o-linear-gradient(bottom, #2d2d2d -100%, #1a1a1a 100%);
  background-image: -moz-linear-gradient(bottom, #2d2d2d -100%, #1a1a1a 100%);
  background-image: -webkit-linear-gradient(bottom, #2d2d2d -100%, #1a1a1a 100%);
  background-image: -ms-linear-gradient(bottom, #2d2d2d -100%, #1a1a1a 100%);
  background-image: linear-gradient(to bottom, #2d2d2d -100%, #1a1a1a 100%);
    
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2d2d2d', endColorstr='#1a1a1a');

  background-color:#2d2d2d;

}

#s2
{
  position: absolute;
  left: 100px;
  top: 17px;
  height: 18px;
  width: 20px;
  
  -webkit-border-bottom-left-radius:20px;
  -moz-border-radius-bottomleft:20px;
  border-bottom-left-radius:20px;
  border:1px solid transparent;
  
  background-color:#2d2d2d;
}

#dataflow_panel, .dataflow_panel
{
    background-size: 10px 10px;    
    background-image:repeating-linear-gradient(0deg, #252525, #252525 1px, transparent 1px, transparent 40px),repeating-linear-gradient(-90deg, #252525, #252525 1px, transparent 1px, transparent 40px);
    background-image:-webkit-repeating-linear-gradient(0deg, #252525, #252525 1px, transparent 1px, transparent 40px),-webkit-repeating-linear-gradient(-90deg, #252525, #252525 1px, transparent 1px, transparent 40px);

    
    background-color:#1d1d1d;
}


#blocks_tree_id {


  float: left;

  width: 100%;
  height: 100%;
}

#blocks_tree_id p
{
  color: #dddddd;
  cursor: pointer;
}


kbd, .key {
        display: inline;
        display: inline-block;
        min-width: 1em;
        padding: .2em .3em;
        font: normal .85em/1 "Lucida Grande", Lucida, Arial, sans-serif;
        text-align: center;
        text-decoration: none;
        -moz-border-radius: .3em;
        -webkit-border-radius: .3em;
        border-radius: .3em;
        border: none;
        cursor: default;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
}
kbd[title], .key[title] {
        cursor: help;
}

/* Dark style for display on light background. This is the default style. */
kbd, kbd.dark, .dark-keys kbd, .key, .key.dark, .dark-keys .key {
        background: rgb(80, 80, 80);
        background: -moz-linear-gradient(top, rgb(60, 60, 60), rgb(80, 80, 80));
        background: -webkit-gradient(linear, left top, left bottom, from(rgb(60, 60, 60)), to(rgb(80, 80, 80)));
        color: rgb(250, 250, 250);
        text-shadow: -1px -1px 0 rgb(70, 70, 70);
        -moz-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
        -webkit-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
        box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
}

/* Light style for display on dark background. */
kbd.light, .light-keys kbd, .key.light, .light-keys .key {
        background: rgb(250, 250, 250);
        background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255));
        background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255)));
        color:  rgb(50, 50, 50);
        text-shadow: 0 0 2px rgb(255, 255, 255);
        -moz-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
        -webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
        box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
}

.keyGroup {
	width: 49%;
	margin-bottom: 10px;
	padding: 15px 0;
	font-size: 22px;
	text-align: center;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7);
	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7);
}

.keyGroup.dark {
	background: rgb(30, 30, 30);
	float: left;
}

.keyGroup.light {
	background: rgb(240, 240, 240);
	color: rgb(40, 40, 40);
	float: right;
}