/* article editor */

div.editor {
  font-size: 1em;
  position: relative;
  width: 100%;
  height:100%;
  margin: 0px;
  padding: 0em;

  background-color: white;
  border: 4px solid white;
}


div.panel {
  text-align: left;
  vertical-align: bottom;
  font-weight: bold;
  color: #3c3c3c;
  overflow: auto;
  background-color: #303030;
  padding-left: 1em;
}

div.title_panel {
  color: white;
  vertical-align: middle;
  background-color: #303030;
  height: 32px;
  padding-left: 8px;
}


form#editform {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}


div.editor textarea {
  font-size: 1em;
  line-height: 1.5em;
  resize: none;
  width: 40%;
  height: 90%;
  height: ~"calc(100% - 1.5em - 8px - 32px)";
  border-left: 0px solid transparent;
  border-right: 0px solid transparent;
  border-top: 4px solid #c0c0c0;
  border-bottom: 4px solid #c0c0c0;
  display: inline-block;
  margin: 0px;
}

div#apreview {
  display: inline-block;
  width: 60%;
  height: 90%;
  height: ~"calc(100% - 1.5em - 8px - 32px)";
  border-left: 0px solid transparent;
  border-right: 0px solid transparent;
  border-top: 4px solid #c0c0c0;
  border-bottom: 4px solid #c0c0c0;
  vertical-align: top;
  overflow: auto;
  padding: 0px 1em 0px 1em;

  background-color: white;
  color: black;
}

img#closebutton {
  float: right;
  height: 100%;
}

/*** pop-up div to cover entire area ***/
.divModalDialog  {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    /*! important !*/
    display:none;
    /* last attribute set darkness on scale: 0...1.0 */
    background-color:rgba(0,0,0,0.7);
    z-index:1010;
    padding: 1em;
}

/*** ! target attribute does the job ! ***/
.divModalDialog:target  { display:block; }

input.modaledit {
  width: 300px;
  font-size: 1em;
  border: 2px solid #808080;
  height: 1.5em;
  margin-top: 4px;
  margin-bottom: 4px;
}

input.modalauth {
  width: 100px;
  font-size: 1em;
  border: 2px solid #808080;
  height: 1.5em;
  margin-top: 4px;
  margin-bottom: 4px;
}

div.panel input {
  border: 2px solid #808080;
  font-size: 1em;
  height: 1.5em;
}



h1.sysmessage {
  background-color: yellow;
}