﻿.mainContainerDivClass
{
	position : relative;
	width    : 800px;
	height   : 400px;
}


.controlPanelDivClass
{
	position : absolute;
	width    : 400px;
	height   : 400px;
	left     : 0px;
	top      : 0px;
}


.displayPanelDivClass
{
	position : absolute;
	width    : 400px;
	height   : 400px;
	left     : 400px;
	top      : 0px;
}


.canvasClass
{
	position   : absolute;
	width      : 400px;
	height     : 400px;
	left       : 0px;
	top        : 0px;
	background : aqua;
	border     : medium gray solid;
}


.numberAdjusterDivClass
{
	display    : inline-block;
	width      : 400px;
	height     : 100px;
	padding    : 2px;
	text-align : center;
}


.numberAdjusterSpanClass
{
	height         : 40px;
	margin-right   : 10px;
	display        : inline-block;
	text-align     : center;
	vertical-align : middle;
	font-size      : x-large;
	font-weight    : bold;
}


.numberAdjusterButtonClass
{
	height         : 50px;
	width          : 50px;
	margin-right   : 10px;
	vertical-align : middle;
	border         : medium gray solid;
	font-weight:bold;
}


.numberAdjusterTextClass
{
	height         : 50px;
	width          : 100px;
	margin-right   : 10px;
	display        : inline-block;
	vertical-align : middle;
	font-size      : xx-large;
	border         : medium black solid;
}


.functionTypeLabel
{
	display : inline-block;
	width   : 150px;
}

.red
{
	color : red;
}


.green
{
	color : green;
}


.blue
{
	color : blue;
}


.magenta
{
	color : magenta;
}


.orange
{
	color : orange;
}


.brown
{
	color : brown;
}


.white
{
	color : white;
}


.black
{
	color : black;
}


/* bounds */

#xyGraphOverlayDivId
{
	position         : absolute;
	width            : 400px;
	height           : 400px;
	left             : 0px;
	top              : 0px;
	border           : medium gray solid;
	background-color : transparent;
}


.xyGraphOverlayDivClass
{
	position         : absolute;
	width            : 400px;
	height           : 400px;
	left             : 0px;
	top              : 0px;
	border           : medium gray solid;
	background-color : transparent;
}

#xMinContainerSpanId
{
	left       : 5px;
	top        : 190px;
	text-align : left;
}


#xMaxContainerSpanId
{
	left       : 295px;
	top        : 190px;
	text-align : right;
}


#yMinContainerSpanId
{
	left       : 150px;
	top        : 375px;
	text-align : center;
}


#yMaxContainerSpanId
{
	left       : 150px;
	top        : 5px;
	text-align : center;
}

.xyContainerSpanClass
{
	position         : absolute;
	width            : 100px;
	height           : 20px;
	display          : inline-block;
}


.xyBoundsSpanClass
{
	color            : black;
	background-color : gray;
	padding-left     : 2px;
	padding-right    : 2px;
	border-radius    : 3px;
	border           : thin black solid;
}
