.left {
    width: 50%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    float: left;
}
.right {
    width: 50%;
    float: right;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.CodeMirror-scroll {
    height: 100% !important;
}

.svg-area {
    overflow: auto;
}
#svg-preview {
    background: #eee;
    padding: 8px;
}
#svg-preview > svg, #svg-preview > canvas {
    margin: 0 auto;
    box-shadow: 0 0 5px black;
    display: block;
    -moz-user-select: none; /* if this isn't set, grabbing the svg and dragging will act like a drag and drop event, popping up the drop file dialog! */
}
.svg-stats {
    color: #777777;
    font-size: 0.8em;
}
.svg-stats .item {
    margin-right: 1em;
}
.svg-stat {
    color: #0000AA;
    font-family: monospace;
}
[contenteditable='true']:hover {
	outline: 1px dashed black;
	background: white;
}

emph {
    font-style: italic;
}

.errortooltip {
	font-family: sans;
	padding: 5px 10px 5px 10px;
	margin: 0px;
	color: black;
	background: rgba(200,200,200,1);
	border-radius: 0em .5em .5em .5em;
	position: absolute;
	box-shadow: 0px 0px 4px #2E6E9E;
}


/*
 * Documentation tab
 */
#mathfunctions, #graphingconstants, #graphingfunctions, #colors {
	border: 1px solid black;
	padding: 1em 2em 1em 2em;
	background: #fafafa;
}
#graphingconstants, #graphingfunctions {
	-moz-column-count: 2;
	-moz-column-gap: 1.5em;
	-webkit-column-count: 2;
	-webkit-column-gap: 1.5em;
	column-count: 2;
	column-gap: 1.5em;
}
#mathfunctions li {
	display: inline-block;
	font-family: Droid Sans Mono, Courrier New, monospace;
	width: 10em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-right: 1.5em;
}
#graphingconstants li {
	display: block;
	font-family: Droid Sans Mono, Courrier New, monospace;
	padding-right: 1.5em;
	padding-bottom: .6em;
	/*width: 50%;*/
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
#graphingconstants .name {
	font-weight: bold;
	margin-right: 1em;
	float: left;
}
#graphingconstants .default:before {
	content: "default: ";
	color: gray;
}
#graphingconstants .default {
	display: block;
	margin-left: 10em;
}
#graphingconstants .type:before {
	content: "type: ";
	color: gray;
}
#graphingconstants .type {
	display: block;
	margin-left: 10em;
}
#graphingconstants .options:before {
	content: "options: ";
	color: gray;
}
#graphingconstants .options {
	display: block;
	margin-left: 10em;
}
#graphingconstants .description {
	display: block;
	font-family: sans;
	font-size: .9em;
	margin-left: 2em;
}
#graphingfunctions li {
	display: block;
	font-family: Droid Sans Mono, Courrier New, monospace;
	padding-right: 1.5em;
	/*width: 50%;*/
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding-bottom: .6em;
}
#graphingfunctions .name {
	font-weight: bold;
}
#colors li {
	display: inline-block;
	font-family: Droid Sans Mono, Courrier New, monospace;
	padding-right: 1.5em;
	width: 10em;
}

/*
 * Drag and drop stuff
 */

#dropbox {
	width: 500px;
	height: 300px;
	margin: 50px;
	padding: 70px;
	border: 1px sold;
	text-align: center;
	font-size: 2em;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	display: inline-block;
}

.dropbox-hover, #dropbox:hover {
        box-shadow: 0px 0px 4px #2E6E9E;
}

#hide-dropbox {
	margin: 1em;
	float: right;
}