table {
    margin:0;
    padding 0;
}
/* common */

#digraph_editor {
  position:absolute;
  width: calc(100% - 20px);
  height:calc(100% - 20px);
  overflow: hidden;

}

#digraph_scroll {
  position:relative;
  top: 40px;
  width: calc(100% - 20px);
  height: calc(100% - 40px);
  overflow: scroll;
  border : solid 1px #bbbbbb;
}

#paper1 {
          flex: 1;
}

.digraph_base {
  font: normal 1em Arial, Helvetica, sans-serif;
  background:#aaa;
  color: #444;
  padding:2px;
  z-index : 1000;

  border-radius: 5px;
}

.digraph_widget {
    box-shadow: 0 1px 3px #000;
    text-shadow: 0 1px 0 #ffffff;
    position:absolute;   
    display :none;
}
.digraph_widget:focus{
  background:#eee;
}

/* generic text input */
.digraphtext_input{
    list-style:none;
}

.digraphtext_area{
  background:#aaa;
  padding: 3px;
  margin: 3px;
}

.digraphtext_area:focus{
  background:#e8e8e8;
}


/* generic selector */
.digraph_sel {
      margin : 2px;
}
.digraph_sel:focus, .digraph_sel:hover, .digraphtext_fontsize_input:focus {
  background:#ccc;
}

#digraphtext_fontsize1 {
    width: 75px;
    height: 25px;
}

.digraphtext_fontsize_input {
    width: 53px;
    margin-left: -75px;
    border-radius: 0px;
    height: 18px;
}




/* Common stuff */
.picker-wrapper, 
.slide-wrapper {
    position: relative;
    float: left;
}
.picker-indicator,
.slide-indicator {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
}
.picker,
.slide {
    cursor: crosshair;
    float: left;
}

#color-picker-ok, #color-picker-cancel {
  background: #ccc;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* generic buttons */
.button-container {
  padding: 0 3px 3px;
}
.button-ok {
}
.button-cancel {
    float: right;
}

.button {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  padding: 4px 3px;
  background: #888;
  color: #eee;
  font-weight: bold;
}
.button:hover {
  border-radius: 5px;
  background: #ccc;
  color: #444;
}
.button:active {
  border-radius: 5px;
  background: #222;
  color: #888;
}

/* menu */
#digraph_menu ul {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  margin: 0;
  padding: 4px 2px ;
  background: #777;
  line-height: 100%;
  border-radius: 1em;
  font: normal 1em Arial, Helvetica, sans-serif;
  border-radius: 5px;
  width: auto;
}
#digraph_menu li {
  margin: 0 2px;
  padding:3px 10px;
  float: left;
  position: relative;
  list-style: none;
 white-space: nowrap; 
}
#digraph_menu a,
#digraph_menu a:link {
  font-weight: bold;
  padding:3px;
  font-size: 13px;
  comm-color: #e8e8e8;
  color: #e8e8e8;
  text-decoration: none;
  display: block;
  margin: 0;
  border-radius: 5px;

  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#digraph_menu a:hover {
  background: #000;
  color: #fff;
}

#digraph_menu a:active {
  background: #555;
  color: #222;
}

#digraph_menu .active a,
#digraph_menu li:hover > a {
  background: #aaa;
  color: #444;
/*  border-top: solid 1px  #f8f8f8; */
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 0 #ffffff;
}
#digraph_menu ul ul li:hover a,
#digraph_menu li:hover li a {
  border: none;
  color: #e8e8e8;
}

#digraph_menu ul ul a:hover {
  color: #000 !important;
  border-radius: 5px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#digraph_menu li:hover > ul {
  display: block;
}

#digraph_menu ul ul {
  z-index: 1000;
  display: none;
  width: auto;
  position: absolute;
  top: 23px;
  left: 0;
  background: #777;

  border: solid 1px #b4b4b4;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#digraph_menu ul ul li {
  float: none;
  margin: 0;
}
#digraph_menu ul ul li:active {
  background: #007;
}
#digraph_menu ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
* html #digraph_menu ul {
  height: 1%;
}


/* generic popup menu */
#digraph_popup{
  background:#888;
  list-style:none;
  z-index : 1000;
  border:1px solid #eee;
  text-shadow: 0 1px 0 #ffffff;
  position: absolute;
  top : -2px;
  left : -2px;
}
#digraph_popup ul{
  position: absolute;
    left:-4px;    /* to avoid overlapping */
    top:-5px
}

#digraph_popup li{
    position: relative;
    clear:left;   /* verlical list */
    min-width: 160px;
    padding: 2px;
}

#digraph_popup ul ul  {
  left: 80px;
  top : -4px;
}
#digraph_popup ul ul li {
  float: none;
  margin: 0;
}

#digraph_popup span{
    padding: 0px 10px;
  font-weight: bold;
  font-size: 13px;
  comm-color: #e8e8e8;
  color: #e8e8e8;
  text-decoration: none;
  display: block;
  margin: 0;
  border-radius: 5px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

#digraph_popup span:hover {
  background: #aaa;
  color: #444;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 0 #ffffff;
}

#digraph_popup li:active {
  background: #007;
  color: #111;
}

/* generic popup info */
#digraph_popup_info{
  background:#fff;
  color: #000;
  list-style:none;
  z-index : 1000;
  border:1px solid #234;
  text-shadow: 0 1px 0 #ffffff;
  position: fixed;
  top : 2px;
  left : 400px;
}
#digraph_popup_info ul{
  position: absolute;
    left:0px;    /* to avoid overlapping */
    top:0px
}

body.busy-cursor {
  cursor: progress;
}