@font-face{
	font-family: 'main';
	src:url(../fonts/go-mono/Go-Mono.ttf);
	font-weight: normal;
	font-style: normal;
}
@font-face{
	font-family: 'main';
	src:url(../fonts/go-mono/Go-Mono-Bold.ttf);
	font-weight: bold;
	font-style: normal;
}
@font-face{
	font-family: 'brazil';
	src:url(../fonts/Brazil/Brazil-Regular.otf);
}
body{
	color: magenta;
	background-color: rgb(247, 245, 243);
	font-family: 'main';
	font-size: 16px;
	line-height: 1.7;
	text-align: center;
	margin:0;
	padding:0;
}

/* general */
/* ------- */

div#main{
	margin-top:0em;
}
hr{
	border:0;
	border-bottom:1px dotted magenta;
	margin:5em 0;
	clear: both;
}
small{
	display: block;
	line-height: 1.6;
	margin:2em;
}
.block{
	color:magenta;
	width: calc(50% - 8em);
	float: left;
	padding:0em 4em 3em;
}
.block p{
	margin-top:2em;
}
.info{
	color:magenta;
	padding:1em 0 0;
	font-size: 32px;
	max-width: 1000px;
	margin:0 auto;
	position: relative;
}

/* nav */
div#tools-nav,
div#tools-extra{
	position: fixed;
	top:5px;
	z-index: 10;
}
div#tools-nav button,
div#tools-extra button{
	line-height: 1.5;
}
div#tools-extra{
	right: 5px;
}

/* special font for handles and annotation tools*/
#title,
strong.handle,
strong.annotation,
button{
	font-family: 'brazil';
	font-size: 190%;
	font-weight: normal;
	/*line-height: 0;*/
	line-height: 1.5;
}
#title{
	font-size: 110%;
}
svg#index{
	width: 400px;
}
table{
	width: 100%;
	margin:1em 0 5em;
}
table th,
table td{
	padding:1em;
	border:1px solid;
	vertical-align: top;
	line-height: 1.4;
}
table td textarea{
	width: calc(100% - 2em);
	height: 100%;
	margin: 0.25em 0.5em;
	padding:0.5em;
}
table td select{
	width: 100%;
}


/* forms */
form{
	line-height: 3;
}
input{
	vertical-align: middle;
	margin-left: 1em;
}
input.submit,
input.reset, 
a#reset,
button a{
	margin:0;
	text-decoration: none;
	color:black;
}

/* annotation tools */
/* ---------------- */

/* curves */
svg{
	margin:0 auto;
}
svg.canvas{
	background-color: rgba(220,220,220,0.8);
}
div#curves svg.canvas{
	background-color: transparent;
}
/* color */
#color-preview{
	width: 100px;
	height: 100px;
	float: left;
	border-radius: 100%;
	margin:1em;
}
/* text */

/* visual-traces */
img.traces{
	max-width: 500px;
	vertical-align: middle;
	margin:0 0 1em 1em;
}