@font-face {font-family: BashKnitting; src: url("BashKnitting.otf?v=1") format("opentype");}
html {user-select: none; margin: 0; font-weight: normal; font-size: .5cm; font-family: BashKnitting;}
button {font-family: BashKnitting;font-size: 1rem; }
@keyframes append-animate {from {transform: scale(0); opacity: 0;} to {transform: scale(1); opacity: 1;}}
#tbl {margin-left: 2.2rem; margin-top: 1.6rem; border-collapse: collapse; table-layout:fixed; background-position: center center; background-size: 100% 100%; }
#tbl td {border: 1px solid lightgray; }
#tbl td div {animation: append-animate .2s linear; width: 1rem; height: 1rem; text-align: center;}
#tbl .cellTH {border-width: 0;  background-color: lightgray; vertical-align: middle; text-align: center; font-size: .8rem; font-family: initial; }
.currentItem {background-color: lightgreen; transform: scale(1.3); transition-duration: .2s;border-radius: 5px;}
#items {position: fixed; top: 1.6rem; left: 0;  background-color: lightblue;}
#menu {position: fixed; left: 2.6rem; top:0; background-color: lightblue;}
#menu div {width:1.5rem; text-align: center; }
#menu_resize {display: none; position: fixed; left: 4rem; top: 3rem; background-color: lightblue; border:1px solid black; box-shadow: 1rem 1rem 1rem gray; animation: append-animate .2s linear; }
.selected {background-color: lightcyan; }
.guides {background-color: #f0f0f0; opacity: 0.7;}
.copyBlock {background-color: #fff0f0; }
.optionOn {background-color: red; transform: scale(1.3); transition-duration: .2s; border-radius: 5px;}
#help {position:fixed;display:inline;bottom:0;right:0;width:100px;height:100px;transition-duration: .2s;}
#help img{bottom:0;right:0;width:100%;height:100%;}
#help:hover{width:300px;height:300px;}
#comments {font-size: .5cm; border: 1px solid black; min-height: 100px; margin-left: 2.2rem; width:50%;font-family: BashKnitting; }
[contentEditable=true]:empty:not(:focus):before { content: attr(placeholder) }
@media print 
{ @page {margin: 1cm;}
  table {display: none;}
  table[id='tbl'] {display:block; max-width: 90%; margin: 1cm; background-image: none;}
  #menu_resize {display:none}
  .selected {background-color: white; }
  .guides {background-color: white;opacity: 1;}
  .copyBlock {background-color: white; }
  #comments {font-size: .5cm; border: 0; margin-left: 1cm; margin-right: 1cm; }
  #help{display:none}
}
