/*CSS by Captainpast*/

html, body {
  height: 100%;
  margin: 0px;
  min-width: 1100px;
  min-height: 800px;
  overflow: hidden;
}

p,h1,h2,h3,h4,h5,a,li,button,span,th,td,th,div {
  font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
}

::selection {}

button {
  cursor: pointer;
}

ul.navbar {
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  background-image: linear-gradient(to right, #8a8a8a 10%, #cbcbcb);
  width: 100%;
  height: 45px;
}
ul.navbar li {
  float: left;
  margin: 8px;
}

ul.navbar div.icon {
  height: 30px;
  width: 30px;
  background-image: url('./data/logo.png');
  background-repeat: no-repeat;
  background-size: contain;
}

ul.navbar li p {
  font-size: 16px;
  margin: 4.5px 0;
  cursor: pointer;
}

div#desk {
  display:flex;
  height: calc(100% - 70px);
  background-image: linear-gradient(to bottom right, #ffffff, #f0f0f0);
}

div#desk div#dp1 {
 width:15%;
 border-style: solid;
 border-width: 1px;
 border-color: black;
 overflow-y: auto;
 overflow-x: hidden;
}
div#desk div#dp2 {
 width:85%;
 border-style: solid;
 border-width: 1px;
 border-color: black;
 overflow: scroll;
}

div#desk div#dp2 div#blockfield {
 width: 2000px;
 height: 2000px;
}

ul.typbar {
  list-style-type: none;
  margin: 0;
  overflow: inherit;
  background-color: #f0f0f0;
  padding: 0;
  width: 100%;
  height: inherit;
}
ul.typbar button {
  margin: 8px;
  background-color: #626262;
  padding: 4px;
  border-radius: 0px 5px 5px 0px;
  border-style: solid;
  border-width: 2px;
  color: #000000;
  border-left-color: #000000;
  transition: background-color 0.5s, color 0.5s;
  width: 35%;
  margin-bottom: 3px;
  margin-top: 3px;
}
ul.typbar button p {
  color: #000000;
  font-weight: bold;
}

ul.typbar.block button#attributes {
  color: #0088ff;
  background-color: #626262;
  border-left-color: #0088ff;
}
ul.typbar.block button#attributes:hover {
  color: #626262;
  background-color: #0088ff;
  border-left-color: #0088ff;
}

ul.typbar.block button#style {
  color: #9060ff;
  background-color: #626262;
  border-left-color: #9060ff;
}
ul.typbar.block button#style:hover {
  color: #626262;
  background-color: #9060ff;
  border-left-color: #9060ff;
}

ul.typbar.block button#control {
  color: #ffcf00;
  background-color: #626262;
  border-left-color: #ffcf00;
}
ul.typbar.block button#control:hover {
  color: #626262;
  background-color: #ffcf00;
  border-left-color: #ffcf00;
}

ul.typbar.block button#var {
  color: #ff9000;
  background-color: #626262;
  border-left-color: #ff9000;
}
ul.typbar.block button#var:hover {
  color: #626262;
  background-color: #ff9000;
  border-left-color: #ff9000;
}

button#start-project, button#end-project {
  margin: 9px;
  background-color: #626262;
  padding: 2px;
  border-radius: 5px;
  border-style: none;
  color: #000000;
  transition: color 0.5s;
  width: 26px;
  height: 26px;
  font-size: 16px;
  float: right;
}

div#blockzone {}

div#desk div#hz1 {
  width:15%;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  overflow-y: auto;
  overflow-x: hidden;
}
div#desk div#hz2 {
  width:65%;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  overflow-y: scroll;
  background-color: #ffffff;
}
div#desk div#hz3 {
  width:20%;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  overflow-y: auto;
  overflow-x: hidden;
}

ul.typbar.element button#normal {
  color: #0088ff;
  background-color: #626262;
  border-left-color: #0088ff;
}
ul.typbar.element button#normal:hover {
  color: #626262;
  background-color: #0088ff;
  border-left-color: #0088ff;
}

ul.typbar.element button#special {
  color: #9060ff;
  background-color: #626262;
  border-left-color: #9060ff;
}
ul.typbar.element button#special:hover {
  color: #626262;
  background-color: #9060ff;
  border-left-color: #9060ff;
}

div#navbar-dropdown {
    background-color: #8a8a8a;
    color: #ffffff;
    position: absolute;
    left: 94px;
    top: 45px;
    border-radius: 0 0 5px 5px;
    width: max-content;
    min-width: 90px;
    padding: 5px;
    z-index: 9;
    overflow: hidden;
    transition: height 0.2s;
}
div#rhigtClik-dropdown  {
    background-color: #8a8a8a;
    color: #ffffff;
    position: absolute;
    border-radius: 5px;
    width: max-content;
    min-width: 90px;
    padding: 5px;
    z-index: 9;
    overflow: hidden;
    transition: height 0.2s;
}

div#navbar-dropdown p, div#rhigtClik-dropdown p {
    margin: 0;
    color: #ffffff;
    cursor: pointer;
    font-size: 16px;
}
div#navbar-dropdown p::after, div#rhigtClik-dropdown p::after {
    color: #ffffff;
    font-size: 10px;
    content: " " attr(hoch);
}

div#navbar-dropdown .li, div#rhigtClik-dropdown .li {
    width: 100%;
    height: 1px;
    background-color: #ffffff;
}

div#elementzone {}