body { margin: 0px; font-family: Arial, Helvetica, sans-serif; }
h1, h2, h3, h4 { margin: 0px; }
tr { vertical-align: top; }
input.num { text-align: center; }
a, label, .nowrap { white-space: nowrap; }
.hidden { display: none; }
a:hover { background-color: #ccf; }

div.content { margin: 10px; }
div.floatleft { float: left; margin: 10px; }
a.tooltip, div.materialnote { font-size: smaller; }
.big { font-size: larger; }
div.tooltip { display: none; position: absolute; background-color: #fff; border: solid 1px #999; padding: 5px; width: 20%; }
select.units { margin: 5px; }
input[type=number] { text-align: right; width: 70px; }

table.palette { float: left; }
.coloroption { display: inline-block; text-decoration: none; text-align: center; margin: 1px; height: 20px; width: 20px; font-size: 20px; font-weight: bold; border: solid 1px #999; }
span.coloroption { cursor: pointer; }
a.patternbox { display: inline-block; text-decoration: none; border: dotted 1px #999; }
table.pattern { border: dotted 1px #999; background-image: url("icons/clearBG.png"); }
#gridcontainer { background-image: url("icons/clearBG.png"); }
#loadmessage { display: none; margin: 10px; padding: 10px; border: solid 2px #c00; background-color: #f99; color: #c00; font-weight: bold; }
a.setbindingcolor { display: block; padding: 5px 20px 20px 20px; border: dotted 1px #999; }
table.materialslist { display: none; }

div.quiltdiv { float: left; width: 200px; margin: 5px; padding: 5px; border: solid 1px #ccc; text-align: center; }
div.materialslist div { margin: 5px; }
span.swap { display: none; }
img.tool { cursor: pointer; padding: 5px; }
img.tool:hover { background-color: #ccf; }
img.tool.selected { background-color: #99f; }
span.tooltip { display: none; margin: 50px 0px 0px 0px; }

table.settings td:not(.tools) { white-space: nowrap; }
#pattern { cursor: pointer; border: solid 1px #000; }
#pattern table { background-color: #fff; border-bottom: dotted 1px #999; border-right: dotted 1px #999; }
#pattern td { font-size: 1px; border-top: dotted 1px #999; border-left: dotted 1px #999; }

#materials tr { vertical-align: middle; }
td.square { cursor: pointer; height: 30px; width: 30px; min-width: 30px; border: solid 1px #ccc; }

div#currentcolor, div#currentbg { cursor: pointer; float: left; margin-right: 10px; font-weight: bold; display: flex; justify-content: center; align-items: center; height: 32px; width: 32px; border: solid 1px #ccc; }
div#colorpalette { display: none; position: absolute; top: 50; padding: 5px; background-color: #fff; border: solid 1px #ccc; }
div#colorpalette td { cursor: pointer; font-weight: bold; text-align: center; vertical-align: middle; height: 20px; width: 20px; border: solid 2px #ccc; }
div#colorpalette td:hover { border-color: #000; }

div.marker, div.colorcap, span.tooltip { position: absolute; padding: 2px; font-size: 10px; color: #000; background-color: #fff; border: solid 1px #999; border-radius: 10px; }
div.colorcap { display: none; margin: -20px 0px 0px 30px; padding: 2px 5px; }
.red { color: #c00; }
.blue { color: #00c; }

div.menu { background-color: #00c; padding: 10px 10px 4px 10px; }
div.menu a { margin: 0px 10px; padding: 5px 10px; text-decoration: none; color: #fff; border-top-left-radius: 10px; border-top-right-radius: 10px; }
div.menu a:hover { background-color: #66f; }
a.activetab { background-color: #fff !important; color: #000 !important; }

div.pleasewait { max-width: 400px; margin: 10px; padding: 10px; border: solid 2px #c00; background-color: #ccc; }
div.pleasewait h3 { text-align: center; color: #c00; }

.left { float: left; }
.right { float: right; }
div.delete { display: none; position: absolute; background-color: rgba(255, 0, 0, 0.5); z-index: 2; }
div.insert { display: none; position: absolute; background-color: rgba(0, 255, 0, 0.5); z-index: 2; }
div.moveclip { display: none; position: absolute; background-color: rgba(192, 192, 255, 0.5); z-index: 2; pointer-events: none; }
div.backgrounds { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 10px; background-color: #fff; border: solid 1px #ccc; z-index: 2; }
div.background { cursor: pointer; float: left; margin: 5px; border: solid 2px #fff; }
div.background:hover { border-color: #99f; }