* {
  font-family: Helvetica
}
#canvas { width:90%; text-align: center;  margin:0px auto;}
#list_section {
  text-align: center;
}

h1 {
  color: white;
  margin: 25px; 
  text-align: right;
  border-bottom:1px solid white;
}

ul {
  padding: 0;
}

li {
  background-color: #fff;
  color: #000;
  font-size: 20px;
  list-style-type: none;
  width: 20%;
  margin: 0px auto;
  border-radius: 3px;
  border: 1px solid #000;
  padding: 10px;
  margin-bottom: 10px;
}

p {
  background-color: #fff;
  color: #666;
  padding: 10px;
  display: inline-block;
  margin: 20px auto 20px auto;
  width: 80%;
  border-radius: 5px;
  text-align: center;
}
.pianoKey { 
fill:rgb(255,255,240);
stroke:rgb(200,200,140);
stroke-width:1;
}
.pianoKeyBlack { 
fill:rgb(20,10,10);
stroke:rgb(255,255,240);
stroke-width:10;
}

#tTexture, #tMode { display:none; }
.item {
  background-color: #fff;
  color: #000;
}

input[type='text'] {
  font-size: 12px;
  padding: 6px;
  border: 1px solid #000;
  border-radius: 3px;
}

input[type='submit'] {
  background-color: #fff;
  color: #000;
  border-radius: 8px;
  border: none;
  padding: 5px;
}
.seqNote { 
  cursor: pointer;
  padding:4px;
  border-radius:10px;
  margin:4px;
  display: inline-block;
  border:1px solid black;
  background-color: white;
}
#newItemButton {
  display: none;
}

#itemField {
  margin-top: 60px;
  width: 10%;
}

/* https://spin.atomicobject.com/2015/07/14/css-responsive-square/ */
.square {
  position: relative;
  width: 7%;
  border:1px solid red;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
}

.gridline {clear:both; }

.square { float:left; }

.lucasSquare { 
  stroke: blue;
  stroke-width: 1px;
  stroke-opacity: .8;
  fill: grey;
  fill-opacity: .5;
}

.lucasSquareText { 
  font: italic 20px serif; 
  fill:black; fill-opacity:.8;
}
.P5 { fill:red; stroke:red; }
.UN { fill:lightblue; stroke:lightblue; }
.M2 { fill:#CC5500; stroke:#CC5500;}
.n3 { fill:darkgreen; stroke:darkgreen; }
.M3 { fill:orange; stroke:orange; }
.n2 { fill:darkgrey; stroke:darkgrey; }
.TT { fill:pink; stroke:pink;}


.lucasSquare:hover { 
  fill-opacity:.1;
  stroke:red;
  stroke-width: 3px;
 }

.lucasSquare { 
  fill-opacity:.5;
 }
.lucasSquare.combined { 
  stroke:white;
  stroke-width:6px;
 }
 
 .lucasCircle { 
  fill:#338;
  fill-opacity:.2;
  }

#welcome { 
  font-size:8px;
  white-space: pre;
  background:rgba(255,255,255,.8);
  cursor: pointer;
}
#svg1 { 
display:none; 
width:70vh;
height:70vh;
}

.submenu.selected { 
  background-color:rgba(255,255,255,1);
}
.submenu { 
  background-color:rgba(255,255,255,.2);
  border:1px solid black;
  border-radius:3px;
  padding:2px;
  margin:2px;
  width:20%;
  font-size:11px;
  display:inline;
}
.menu { 
display:none; margin-right:20px ; text-align: left;
 }
 .label { 
clear:both; font-size:11px; 
  }