/* Force component machine styles */

div.mainContainer
{
	position : relative;
	width    : 900px;
	height   : 400px;
}


div.displayPanel
{
	position : absolute;
	width    : 400px;
	height   : 400px;
	left     : 0px;
	top      : 0px;
}


div.controlPanel
{
	position : absolute;
	width    : 460px;
	height   : 400px;
	left     : 440px;
	top      : 0px;
}


div.numberAdjuster
{
	width   : 460px;
	height  : 50px;
	display : inline-block;
	padding : 2px;
}


.numberAdjusterSpanClass
{
	height         : 45px;
	width          : 100px;
	margin-right   : 8px;
	display        : inline-block;
	text-align     : center;
	vertical-align : middle;
	font-size      : x-large;
	font-weight    : bold;
}


.numberAdjusterButtonClass
{
	height         : 45px;
	width          : 55px;
	margin-right   : 8px;
	vertical-align : middle;
	border         : medium black solid;
	font-size      : x-large;
	font-weight    : bold;
}


.numberAdjusterTextClass
{
	height         : 45px;
	width          : 60px;
	margin-right   : 4px;
	display        : inline-block;
	vertical-align : middle;
	font-size      : x-large;
	font-weight    : bold;
	border         : medium black solid;
	text-align     : center;
}



canvas.canvas
{
	position   : absolute;
	width      : 400px;
	height     : 400px;
	left       : 0px;
	top        : 0px;
	background : white;
	border     : medium black solid;
}


span.output
{
	display : inline-block;
	font-size      : x-large;
	font-weight    : bold;
}


.FLegend
{
	color : #ff0000;
}


.FxLegend
{
	color : #ff6666;
}


.FyLegend
{
	color : #ffaaaa;
}


h2.legend
{
	display : inline-block;
}