body 
{
	margin-top: 5px; 
	margin-bottom: 5px; 
	margin-left: 5px; 
	margin-right: 5px; 
	background: #F0F0F0;
	color: #000000;
	font-size: 1.0em;
	line-height: 1.4; 
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
}

:focus
{
	outline: none;
}

img
{
	border: none;
}

.nwrp
{
	white-space: nowrap;
}

a
{
	hyphens: none;
	text-decoration: none;
}

a:link    { color: #2222EE; }
a:visited { color: #2222AA; }
a:hover   { color: #FFFFFF; background-color: #AAAAAA; }
a:active  { color: #FFFFFF; background-color: #CCCCCC; }

a.dbg:link    { color: #AAAAAA; }
a.dbg:visited { color: #888888; }
a.dbg:hover   { color: #000000; background-color: #CCCCCC; }
a.dbg:active  { color: #000000; background-color: #AAAAAA; }

input, select, #filbl, div.ebtn, #coords, #toolbx
{
	background: #CCCCCC; 
	padding: 0.0rem 0.5rem 0.0rem 0.5rem;
	color: #000000;
	border: 1px solid #AAAAAA;
	border-radius: 0.2rem;
	transition: background 100ms;
	font-size: inherit;
	height: 2.55rem;
	cursor: pointer;
}

input:focus { border-color: #000000; background: #FFFFFF; } 
input:hover { border-color: #000000; }  

input[type="text"], input[type="number"]
{	
	cursor: text;
}

input[type="color"]
{ 
	display: inline-block;
	height: 2.55rem;
	vertical-align: top;
	padding: 0.5rem 0.5rem 0.5rem 0.5rem;
}
#filbl 
{
	display: inline-block;
	height: 2.55rem;
	line-height: 2.55rem;
	min-width: 11rem;
}
#filbl:hover { border-color: #000000; }  

span.btn, span.inbtn
{
	display: inline-block;
	border: 1px solid #AAAAAA;
	border-radius: 0.2rem;
	background: #CCCCCC; 
        box-shadow: 1vh 1vh 2vh rgba(0,0,0,0.2);
	color: #000000;
	width: 1.5em; 
	height: 1.5em;
	line-height: 1.5em;
	font-size: 1.7rem;
	text-align: center;
	cursor: pointer;
}
span.btn:hover  { background: #EEEEEE; }
span.btn:active { background: #FFFFFF; }

span.inbtn
{
	background: rgba(0,0,0,0.0); 
	color: #FFFFFF; 
	border: 1px solid #FFFFFF;
        box-shadow: none;
	margin: 0.5rem 0.25rem 0.5rem 0.25rem;
}
span.inbtn:hover  { color: #CCCCCC; border: 1px solid #CCCCCC; }
span.inbtn:active { color: #555555; border: 1px solid #555555; }

.navtr0, .navtr1, .navtr2, .navtr3, .navbr0, .navbr1, .navbl0, .navtrC, .bctr, .brloc
{
	position: fixed;
        z-index: 1;
}
.navtr0 { top: 0.7rem; right: 0.7rem; }
.navtr1 { top: 4.2rem; right: 0.7rem; }
.navtr2 { top: 7.7rem; right: 0.7rem; }
.navtr3 { top: 11.2rem; right: 0.7rem; }
.navbr0 { bottom: 0.7rem; right: 0.7rem; }
.navbr1 { bottom: 0.7rem; right: 4.2rem; }
.navbl0 { bottom: 0.7rem; left: 0.7rem; }

.navtrC { top: 1.2rem; right: 1.2rem; }
.bctr   { width: 100vw; bottom: 5vh; left: 0px; max-height: 90vh; overflow-y: auto; }
.brloc   
{ 
	max-height: 90vh; 
	bottom: 0.7rem; 
	right: 4.2rem; 
	overflow-y: auto; 
	text-align: right; 
	display: inline-block; 
	background: #FFFFFF; 
	padding: 0.7rem; 
	border: 1px solid #AAAAAA;
	border-radius: 0.2rem;
        box-shadow: 1vh 1vh 2vh rgba(0,0,0,0.2);
}

div.ebtn, #coords, #toolbx
{
        box-shadow: 1vh 1vh 2vh rgba(0,0,0,0.2);
	display: inline-block;
	height: 2.55rem;
	line-height: 2.55rem;
	min-width: 16rem;
}
div.ebtn:hover  { background: #EEEEEE; }
div.ebtn:active { background: #FFFFFF; }

#toolbx, #coords 
{ 
	min-width: 10rem; 
	background-color: rgba(0,0,0,0.90);
        color: #FFFFFF;
	cursor: default;
}
#coordx, #coordy 
{ 	
	text-align: left;
	display: inline-block;
	min-width: 4.5rem; 
}

textarea
{
	background: #CCCCCC; 
	padding: 0.5rem 0.5rem 0.5rem 0.5rem;
	color: #000000;
	border: 1px solid #AAAAAA;
	border-radius: 0.2rem;
	font-size: inherit;
	max-width: 90vw;
}

#figure
{
	position: absolute;
        top: 2%;
        left: 2%;
        width: 96%;
        height: 96%;
        box-shadow: 1vh 1vh 2vh rgba(0,0,0,0.2);
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
	cursor: crosshair;
	touch-action: none;
}
#figure *
{
	pointer-events: none;
}

div.ovl, div.ovlx
{       
        display: none; 
        position: fixed;
        padding: 0.5rem 0.7rem 0.5rem 0.7rem;
        left: 0;
        top: 0;
        width: calc(100% - 1.4rem);
        height: 100%;
        overflow: auto;
        background-color: rgb(10,10,10);
        background-color: rgba(0,0,0,0.90);
        text-align: center;
        color: #FFFFFF;
	margin-bottom: 0.7rem;
}
div.ovl { z-index: 2; }
div.ovlx { z-index: 3; }

div.light
{
        background-color: rgba(0,0,0,0.10);
	color: #000000;
}

table.iform
{
	border: none;
	margin-top: 4.8rem; 
	margin-bottom: 1.4rem; 
	display: inline-table;
	border-spacing: 0.0rem;
	border-collapse: collapse;
}
table.iform tr 
{ 
	height: 2.55rem;
}

table.iform tr td 
{ 
	vertical-align: baseline;
	text-align: left; 
	padding: 0.4rem;
}
table.iform tr td:first-child 
{ 
	text-align: right; 
}

tr.brow
{
	vertical-align: baseline;
	cursor: pointer;
}
tr.brow:hover
{
	color: #000000;
	background: rgba(255,255,255,0.5);
}
#datatbl
{
	border: 2px solid rgb(180,180,180);
	margin-top: 0.7rem; 
	margin-bottom: 0rem; 
        background-color: rgb(10,10,10);
        background-color: rgba(0,0,0,0.90);
	padding: 0.4rem;
	color: #FFFFFF;
}

.iblock
{
	padding: 0.8rem 1.6rem 0.8rem 1.6rem;
	color: #FFFFFF;
	border: 1px solid #FFFFFF;
	border-radius: 0.2rem;
	font-size: inherit;
	display: inline-block;
	text-align: left;
	max-width: 35rem;
}
#messagetext
{
	text-align: center;
}

ul.ilist
{	
	list-style-type: none;
	padding: 0rem;
	margin: 0rem;
	text-align: left;
}
ul.ilist li span:first-child
{
	display: inline-block;
	width: 2rem;
	padding-right: 0.5rem;
	text-align: right;
}
ul.ilist li span:first-child::after
{
	content: ' : ';
}

.ititle
{
	color: #AAAAAA;
	margin-bottom: 0.2rem;
}
.idark
{
	color: #AAAAAA;
}

