/*----------------------------*/
* {
	background-color:#F9FAD8;   /* fix 120ish spanned */
}
/* -- flex defs  --*/
.wrapper {
  display: flex;
  flex-flow: row nowrap;
  justify-content:center;
  text-align:center;
}
.wrapperDown {
  display: flex;
  flex-flow: column wrap;
  justify-content:center;
  text-align:center;
}
footer {
  flex: 1 100%;
  text-align:center;
} 
div .select{
  flex: 1 %17; 
  flex-grow: 1;
  font:  bold 12px sans-serif;
  /* color:pink; */
  transition: flex 1s, font 0.5s ease-in-out;
}
div .selectPlus {
  flex: 10 %70; 
  font:  bold 20px sans-serif;
  color: black;
  flex-grow: 7;
  /*background-color:blue; */
  transition: flex 0.5s,font 0.5s ease-in-out;
}
div .selectMinus{
  flex: 2 %7; 
  font:  bold 12px sans-serif;
  flex-grow: 1;
  /* background-color:red; */
  transition: flex 0.5s,  font 0.5s ease-in-out;
}
.interface {
  display: block;
  border: 1px solid grey;
  border-radius:4px;
  color: grey;
  font:  bold 18px sans-serif;
  text-align: center;
  padding:2px;
  margin:2px 10px 2px 2px;
}
.loose {
  flex: 3 %100;
  flex-grow:1; 
  border: 1px solid grey;
  border-radius:4px;
  color: grey;
  font:  bold 20px sans-serif;
  overflow:hidden;
  text-align: center;
  padding:2px;
  margin:2px 10px 2px 2px;
}
.borderEx{
  border: 1px solid grey;
} 
.borderInput{
  border: 1px dashed grey;
  min-width:50px;
}
.borderEx, .borderInput{
  border-radius:4px;
  color: grey;
  font:  bold 20px sans-serif;
  min-height:27px;
  max-height:200px;
  overflow:hidden;
  text-align: center;
  padding:2px;
  margin:2px 10px 2px 2px;
}
.tight {
  flex: 1 %20;
  flex-grow:0; 
  border: 1px solid grey;
  border-radius:4px;
  color: grey;
  min-height:50px;
  max-height:150px;
  overflow:hidden;
  text-align: center;
  padding:2px;
  margin:2px 10px 2px 2px;
}
.expand {
  flex: 1 %100;
  flex-grow:1; 
  font:  bold 20px sans-serif;
}

/*----------------------------*/
/* functional */
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.spanned .spanned:hover{ 
  /* cursor: none; */
  padding:1px;
  margin:0px 3px 0 3px;
}
.spanned { 
  /*background: white; */
  border: 1px solid #F9FAD8;
  color:#444;
   /*min-height:100px;   // not working
  height:100px;  */
  padding:10px 0px 10px 0px;
}
.spanned:hover {   
  /* background: #FFFFCC;
  border: 1px solid grey; */
  color:black;
}
/*.interface {
  display: block;
  float:left;
  border: 1px solid grey;
  border-radius:4px;
  color: grey;
  font:  bold 18px sans-serif;
  min-width:120px;
  min-height:27px;
  text-align: center;
  padding:2px;
  margin:2px 10px 2px 2px;
} */
/*----------------------------*/
/* general */
ul.nodot{
	list-style-type: none;
    padding: 0px;
    margin: 3px;
}
.border {
  margin:2px;
  border:1px solid  #EEDC7D;
  border-radius:3px;
  padding:4px;
}
.borderSmall, .borderSmallLI {
  margin:2px;
  border:1px solid  #EEDC7D;
  border-radius:3px;
  padding:0px;
}
.borderSmallLI {
  	background-color:pink;
}
.inactive { 
  /* background-color:#eeeeee; */
}
.dataList {
  overflow: auto; 
  height:100px;
  background-color:white;
  font:  12px sans-serif;
  text-align: left;
}
.interface:hover {
  border: 1px solid black;
  color: black;	
}
#define, #defineD {
	background-color:#e0efe7;
}
#pronouce, #pronouceD {
	background-color:#e9e0ef;
}
#root, #rootD{
	background-color:#efe0e0;
}
#picture, #pictureD{
	background-color:#efeee0;
}
#translate, #translateD{
	background-color:#eeeeee;
}
.top {
    font: 24px sans-serif;
    /* *********************************************** */
	cursor:none; /* hide mouse so that it doesn't distract */
	overflow:hidden;
	max-height:670px;
	min-height:550px;
	height:500px;
}
#theDoc {
    line-height:220%;   /* helps with to mitigate the calibration errors */
}
#theDoc.debug {
   cursor:default;  /*just for debugging theDoc */
}
#signIn {
	display: flex;
	justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */
	cursor:default;  /*just for debugging theDoc */
}
#signName{
	background-color:beige;
}
footer img {
	max-height:200px;
	max-width:200px;
}
.inter {
	color:black;
}
span .focus {
	background-color:pink;
}
div.inactive .spanned {
	background-color:white;
    border: 1px solid black;
    color: black;	
}
div.inactive span.focus {
	background-color:pink;
}
.return {
    border: 1px solid black;
    color: black;	
}