﻿.formulaContainerDivClass
{
	position    : relative;
	width       : 800px;
	height      : 100px;
	font-size   : xx-large;
	font-weight : bold;
}


.formulaPartClass
{
	position : absolute;
	display  : inline-block;
	height   : 40px;
}


/* f(x) = */
#formulaPart1
{
	left : 0px;
	top  : 30px;
}


/* a */
#formulaPart2
{
	left : 110px;
	top  : 0px;
}


/* - */
#formulaPart3
{
	position   : absolute;
	display    : inline-block;
	left       : 100px;
	top        : 48px;
	width      : 140px;
	height     : 4px;
	margin     : 0px;
	padding    : 0px;
	background : black;
	border-width : 0px;
}


/* b(x - h) */
#formulaPart4
{
	left : 110px;
	top  : 50px;
}


/* + k */
#formulaPart5
{
	left : 260px;
	top  : 30px;
}


/* = */
#formulaPart6
{
	left : 350px;
	top  : 30px;
}


/* a */
#formulaPart7
{
	left : 420px;
	top  : 0px;
}


/* - */
#formulaPart8
{
	position   : absolute;
	display    : inline-block;
	left       : 410px;
	top        : 48px;
	width      : 240px;
	height     : 4px;
	margin     : 0px;
	padding    : 0px;
	background : black;
	border-width : 0px;
}


/* b(x - h) */
#formulaPart9
{
	left : 420px;
	top  : 50px;
}


/* + k */
#formulaPart10
{
	left : 670px;
	top  : 30px;
}


.mainContainerDivClass
{
	position : relative;
	width    : 800px;
	height   : 400px;
}


.controlPanelDivClass
{
	position     : absolute;
	width        : 400px;
	height       : 400px;
	left         : 400px;
	top          : 0px;
	padding-left : 40px;
}


.displayPanelDivClass
{
	position : absolute;
	width    : 400px;
	height   : 400px;
	left     : 0px;
	top      : 0px;
}


.canvasClass
{
	position   : absolute;
	width      : 400px;
	height     : 400px;
	left       : 0px;
	top        : 0px;
	background : aqua;
	border     : medium black solid;
}


.numberAdjusterDivClass
{
	display  : inline-block;
	width    : 400px;
	height   : 50px;
	padding  : 2px;
}


.numberAdjusterSpanClass
{
	height         : 90%;
	width          : 10%;
	margin-right   : 2%;
	display        : inline-block;
	text-align     : center;
	vertical-align : middle;
	font-size      : xx-large;
	font-weight    : bold;
}


.numberAdjusterButtonClass
{
	height         : 90%;
	width          : 10%;
	margin-right   : 2%;
	vertical-align : middle;
	border         : medium black solid;
}


.numberAdjusterTextClass
{
	height         : 80%;
	width          : 22%;
	margin-right   : 2%;
	display        : inline-block;
	vertical-align : middle;
	font-size      : xx-large;
	border         : medium black solid;
}


.red
{
	color : red;
}


.green
{
	color : green;
}


.blue
{
	color : blue;
}


.magenta
{
	color : magenta;
}


.orange
{
	color : orange;
}


.brown
{
	color : brown;
}
