header('Content-type: text/css');
/* 
 * CSS Document 
  transition: max-height 0.3s, padding 0.3s;
  transition: all .35s;
 * https://jqueryui.com/demos/
 * https://www.w3schools.com/cssref/css_selectors.php
 * https://www.w3schools.com/cssref/tryit.php?filename=trycss_cursor
 */
html, body {
}
/* 
 * **************
 * SIZE VARIABLES 
 */
:root {
}
.box {
  border-color: var(--themeDarker);
  -moz-border-top-colors: none;
  -moz-border-right-colors: none;
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  background: var(--white);
  }
.box_head {
  border-color: var(--themeDarker);
  }
.box_menu {
  border-color: var(--themeDarker);
  }
.box_footer {
  border-color: var(--themeDarker);
  }
.box_pre_head {
  border-color: var(--themeDarker);
  }
.box:hover {
/*  background-color: var(--selectedHover); */
  }

/*  box main structure
-------------------------------------------------------------- */
.box {
/*  width: 98%; */
/*  width: 47%; */
  float: left;
  margin: var(--boxMargin);
  font-size: 1.1em;
  line-height: 1.0em;
  border-image: none;
  border-radius: 0.4em;
  border-width: 0.2em;
  border-style: solid;
  outline: none ;
  box-shadow: 0 0.4em 0.5em 0 var(--blackFour), 0 0.4em 1em 0 var(--blackThree);
/*  padding: 0.3em; */
}
.box_head {
  width: calc( 100% - 1.2em );
  padding: 0.6em;
  text-align:center;
  float: left;
  border-style: solid;
  border-width: 0em 0em 0.15em 0em;
}
.box_menu {
  width: calc(100% - 0.0em);
  margin: 0em;
  float: left;
  border-style: dotted;
  border-width: 0.15em 0em 0.15em 0em;
}
.box_content {
  width: calc(100% - 0.6em);
  padding: 0.3em ; /*margin*/
  float: left;
}
.box_content .box_menu {
  width: calc(100% - 0.0em);
}
.box_footer {
  width: 100%;
  min-height: 1.4em;
  margin: 0 auto 0.5em;
  float: left;
  border-style: solid;
  border-width: 0.15em 0em 0em 0em;
}
.box_pre_head {
  display: none;
  float: left;
  width: 100%;
  border-style: solid;
  border-width: 0em 0em 0.15em 0em;
}
.box .cell {
	line-height: 1.4em; 
	margin: var(--boxMargin);
/*	max-width: 50% ; */
	overflow: auto;
/*	min-height: 1.4em; */
}
.box textarea {
  width: 98%;
/*  width: 47%; */
}
.box ~ [id^="n"]{
	background-color: var(--greyLighter) ;
	box-shadow: 0 0.4em 0.5em 0 var(--blackFour), 0 0.4em 1em 0 var(--blackThree);
  }
.box.data.new {
  background-color: var(--greyLighter);
  box-shadow: none ;
  }