/* ezGraph.css */


/* ======= */
/* general */
/* ======= */

.grayBorderClass
{
	border : thin gray solid;
}




/* ============== */
/* main container */
/* ============== */

.mainContainerDivClass
{
	color              : white;
	background-image   : url(backgroundImage.jpg);
	width              : 800px;
	height             : 465px;
	position           : relative;
	font-size          : 18px;
	border             : thin black solid;
	overflow           : hidden;
	border-radius      : 3px;
	box-shadow         : 10px 10px 15px black;
	-moz-box-shadow    : 10px 10px 15px black;
	-webkit-box-shadow : 10px 10px 15px black;
}




/* ===================================== */
/* variable name, eq, and value headings */
/* ===================================== */

#variableNameHeadingSpanId
{
	top        : 5px;
	left       : 5px;
	text-align : center;
}


#variableEqHeadingSpanId
{
	top        : 5px;
	left       : 75px;
}


#variableValueHeadingSpanId
{
	top        : 5px;
	left       : 105px;
	text-align : center;
}


.variableNameValueSpanClass
{
	position      : absolute;
	width         : 70px;
	height        : 20px;
	display       : inline-block;
	overflow      : hidden;
	border-radius : 3px;
}

.variableEqSpanClass
{
	position   : absolute;
	width      : 30px;
	height     : 20px;
	display    : inline-block;
	text-align : center;
	overflow   : hidden;
}




/* =============================== */
/* variable names, eqs, and values */
/* =============================== */

#variableName1TextId
{
	top  : 30px;
	left : 5px;
}


#variableEq1SpanId
{
	top  : 30px;
	left : 75px;
}


#variableValue1TextId
{
	top  : 30px;
	left : 105px;
}


#variableName2TextId
{
	top  : 55px;
	left : 5px;
}


#variableEq2SpanId
{
	top  : 55px;
	left : 75px;
}


#variableValue2TextId
{
	top  : 55px;
	left : 105px;
}


#variableName3TextId
{
	top  : 80px;
	left : 5px;
}


#variableEq3SpanId
{
	top  : 80px;
	left : 75px;
}


#variableValue3TextId
{
	top  : 80px;
	left : 105px;
}


#variableName4TextId
{
	top  : 105px;
	left : 5px;
}


#variableEq4SpanId
{
	top  : 105px;
	left : 75px;
}


#variableValue4TextId
{
	top  : 105px;
	left : 105px;
}


#variableName5TextId
{
	top  : 130px;
	left : 5px;
}


#variableEq5SpanId
{
	top  : 130px;
	left : 75px;
}


#variableValue5TextId
{
	top  : 130px;
	left : 105px;
}


#variableName6TextId
{
	top  : 155px;
	left : 5px;
}


#variableEq6SpanId
{
	top  : 155px;
	left : 75px;
}


#variableValue6TextId
{
	top  : 155px;
	left : 105px;
}




/* ============ */
/* mouse states */
/* ============ */

#xyMouseLabelId
{
	top  : 190px;
	left : 5px;
}


#traceMouseLabelId
{
	top  : 260px;
	left : 5px;
}


#setBoundsMouseLabelId
{
	top  : 340px;
	left : 605px;
}


.mouseStateLabelClass
{
	position : absolute;
	width    : 190px;
	height   : 20px;
	display  : inline-block;
}


.mouseRadioClass
{
}




/* =================== */
/* (x, y) point values */
/* =================== */


#xHeadingSpanId
{
	top   : 210px;
	left  : 5px;
	color : white;
}


#yHeadingSpanId
{
	top   : 230px;
	left  : 5px;
	color : white;
}


.xyHeadingClass
{
	position : absolute;
	width    : 40px;
	height   : 20px;
	display  : inline-block;
}


#xSpanId
{
	top   : 210px;
	left  : 45px;
	color : white;
}


#ySpanId
{
	top   : 230px;
	left  : 45px;
	color : white;
}


.xySpanClass
{
	position : absolute;
	width    : 150px;
	height   : 20px;
	display  : inline-block;
	overflow : hidden;
}






/* =================== */
/* (x, y) trace values */
/* =================== */

#x1TraceHeadingSpanId
{
	top   : 280px;
	left  : 5px;
	color : yellow;
}


#y1TraceHeadingSpanId
{
	top   : 300px;
	left  : 5px;
	color : yellow;
}


#x2TraceHeadingSpanId
{
	top   : 325px;
	left  : 5px;
	color : cyan;
}


#y2TraceHeadingSpanId
{
	top   : 345px;
	left  : 5px;
	color : cyan;
}


.xyTraceHeadingClass
{
	position : absolute;
	width    : 40px;
	height   : 20px;
	diplay   : inline-block;
}


#x1TraceSpanId
{
	top   : 280px;
	left  : 45px;
	color : yellow;
}


#y1TraceSpanId
{
	top   : 300px;
	left  : 45px;
	color : yellow;
}


#x2TraceSpanId
{
	top   : 325px;
	left  : 45px;
	color : cyan;
}


#y2TraceSpanId
{
	top   : 345px;
	left  : 45px;
	color : cyan;
}


.xyTraceSpanClass
{
	position : absolute;
	width    : 150px;
	height   : 20px;
	display  : inline-block;
	overflow : hidden;
}




/* ========== */
/* angle unit */
/* ========== */

#degreesLabelId
{
	top  : 375px;
	left : 5px;
}


#radiansLabelId
{
	top  : 375px;
	left : 100px;
}


.angleUnitLabelClass
{
	position : absolute;
	width    : 90px;
	height   : 20px;
	display  : inline-block;
}




/* ================= */
/* draw graph button */
/* ================= */

#drawGraphButtonId
{
	top  : 410px;
	left : 20px;
}


.drawGraphButtonClass
{
	position : absolute;
	width    : 160px;
	height   : 50px;
	display  : inline-block;
}




/* ============ */
/* (x, y) graph */
/* ============ */

#xyGraphCanvasId
{
	background-color : rgba(0, 0, 0, 0.25);
	top              : 5px;
	left             : 200px;
}


.xyGraphCanvasClass
{
	position      : absolute;
	width         : 400px;
	height        : 400px;
	border-radius : 3px;
}


#xyGraphOverlayCanvasId
{
	top              : 5px;
	left             : 200px;
	background-color : transparent;
}


.xyGraphOverlayCanvasClass
{
	position      : absolute;
	width         : 400px;
	height        : 400px;
	border-radius : 3px;
}


#xyGraphOverlayDivId
{
	top              : 5px;
	left             : 200px;
	background-color : transparent;
}


.xyGraphOverlayDivClass
{
	position      : absolute;
	width         : 400px;
	height        : 400px;
	border-radius : 3px;
}

#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            : lime;
	background-color : gray;
	padding-left     : 2px;
	padding-right    : 2px;
	border-radius    : 3px;
	border           : thin black solid;
}






/* ========= */
/* functions */
/* ========= */

#y1UseCheckboxId
{
	top  : 410px;
	left : 200px;
}


#y1EqSpanId
{
	top   : 410px;
	left  : 230px;
	color : yellow;
}


#y1ExpressionTextId
{
	top  : 410px;
	left : 290px;
}


#y2UseCheckboxId
{
	top  : 435px;
	left : 200px;
}


#y2EqSpanId
{
	top   : 435px;
	left  : 230px;
	color : cyan;
}


#y2ExpressionTextId
{
	top  : 435px;
	left : 290px;
}


.yUseCheckboxClass
{
	position : absolute;
	width    : 30px;
	height   : 20px;
	display  : inline-block;
}


.yEqSpanClass
{
	position : absolute;
	width    : 60px;
	height   : 20px;
	display  : inline-block;
}


.yExpressionTextClass
{
	position      : absolute;
	width         : 290px;
	height        : 20px;
	display       : inline-block;
	border-radius : 3px;
}




/* ============= */
/* (x, y) bounds */
/* ============= */

#boundsHeadingSpanId
{
	top  : 5px;
	left : 605px;
}


.boundsHeadingSpanClass
{
	position   : absolute;
	width      : 190px;
	height     : 20px;
	text-align : center;
}


#xBoundsHeadingSpanId
{
	top  : 30px;
	left : 605px;
}


#yBoundsHeadingSpanId
{
	top  : 30px;
	left : 710px;
}


.xyBoundsHeadingSpanClass
{
	position   : absolute;
	width      : 90px;
	height     : 20px;
	text-align : center;
}


#xBounds1LabelId
{
	top  : 55px;
	left : 605px;
}


#xBounds10LabelId
{
	top  : 80px;
	left : 605px;
}


#xBounds100LabelId
{
	top  : 105px;
	left : 605px;
}


#xBounds1000LabelId
{
	top  : 130px;
	left : 605px;
}


#xBounds360LabelId
{
	top  : 155px;
	left : 605px;
}


#xBounds2PiLabelId
{
	top  : 180px;
	left : 605px;
}


#xBounds10PiLabelId
{
	top  : 205px;
	left : 605px;
}


#xBoundsCustomLabelId
{
	top  : 230px;
	left : 605px;
}


#yBounds1LabelId
{
	top  : 55px;
	left : 705px;
}


#yBounds10LabelId
{
	top  : 80px;
	left : 705px;
}


#yBounds100LabelId
{
	top  : 105px;
	left : 705px;
}


#yBounds1000LabelId
{
	top  : 130px;
	left : 705px;
}


#yBoundsCustomLabelId
{
	top  : 230px;
	left : 705px;
}


.xyBoundsLabelClass
{
	position : absolute;
	width    : 90px;
	height   : 20px;
	display  : inline-block;
}


#xBoundsZoomInButtonId
{
	top  : 260px;
	left : 605px;
}


#xBoundsZoomOutButtonId
{
	top  : 290px;
	left : 605px;
}


#yBoundsZoomInButtonId
{
	top  : 260px;
	left : 705px;
}


#yBoundsZoomOutButtonId
{
	top  : 290px;
	left : 705px;
}


#xBoundsPlusButtonId
{
	top  : 260px;
	left : 655px;
}


#xBoundsMinusButtonId
{
	top  : 290px;
	left : 655px;
}


#yBoundsPlusButtonId
{
	top  : 260px;
	left : 755px;
}


#yBoundsMinusButtonId
{
	top  : 290px;
	left : 755px;
}


.xyBoundsButtonClass
{
	position : absolute;
	width    : 40px;
	height   : 30px;
	display  : inline-block;
}




/* ==================== */
/* custom (x, y) bounds */
/* ==================== */

#boundsCustomMinHeadingSpanId
{
	top  : 375px;
	left : 630px;
}


#boundsCustomMaxHeadingSpanId
{
	top  : 375px;
	left : 715px;
}


.boundsCustomHeadingSpanClass
{
	position : absolute;
	width    : 75px;
	height   : 20px;
	display  : inline-block;
}


#xBoundsCustomHeadingSpanId
{
	top  : 400px;
	left : 605px;
}


#yBoundsCustomHeadingSpanId
{
	top  : 430px;
	left : 605px;
}


.xyBoundsCustomHeadingSpanClass
{
	position : absolute;
	width    : 30px;
	height   : 20px;
	display  : inline-block;
}


#xBoundsCustomMinTextId
{
	top  : 400px;
	left : 630px;
}


#xBoundsCustomMaxTextId
{
	top  : 400px;
	left : 715px;
}


#yBoundsCustomMinTextId
{
	top  : 430px;
	left : 630px;
}


#yBoundsCustomMaxTextId
{
	top  : 430px;
	left : 715px;
}


.xyBoundsCustomTextClass
{
	position      : absolute;
	width         : 75px;
	height        : 20px;
	display       : inline-block;
	border-radius : 3px;
}