html {
	height: 100%;				/* must set height, so can set height for internal containers */
}

body.blackglass {
	color: white;
	margin-right: 100px;		/* colored strip on right */
	background: #000000 url("images/overlapBkg.jpg") repeat-y scroll right top;
}
body.whiteglass {
	background: #FFFFFF;
	color: black;
	margin-right: 100px;		/* colored strip on right */
	background: #FFFFFF url("images/overlapBkg.jpg") repeat-y scroll right top;
}
body.grayglass {
	background: #808080;
	color: black;
	margin-right: 100px;		/* colored strip on right */
	background: #808080 url("images/overlapBkg.jpg") repeat-y scroll right top;
}
body.white {
	background: #FFFFFF;
	color: black;
	margin-right: 100px;		/* colored strip on right */
}
body.spotlight {
	background: #FFFFFF;
	color: black;
	margin-right: 100px;		/* colored strip on right */
	background: #f8f8f8 url("images/prism.jpg") repeat-y scroll right top;
	height: 100%;				/* must set height, so can set height for internal containers */
}

img.illustration {
	border-style: solid;
	border-width: 3px;
	border-color: black;
}

#squares {
	position: relative;
	width: 800px;
	height: 250px;
	overflow: hidden;			/* can't drag out of this area */
	border-style: solid;
	border-width: 10px;
	border-color: #707090;
	cursor: move;				/* changes to "move" cursor */
	margin: 0px 0px 10px 0px;	/* adds space below div box */
}
#illusionbars, #illusionbars2 {
	position: relative;
	width: 800px;
	height: 400px;
	overflow: hidden;			/* can't drag out of this area */
	border-style: solid;
	border-width: 10px;
	border-color: #707090;
	cursor: move;				/* changes to "move" cursor */
	margin: 0px 0px 10px 0px;	/* adds space below div box */
}
#ring {
	position: relative;
	width: 500px;
	height: 500px;
	overflow: hidden;			/* can't drag out of this area */
	border-style: solid;
	border-width: 10px;
	border-color: #707090;
	cursor: move;				/* changes to "move" cursor */
	margin: 0px 0px 10px 0px;	/* adds space below div box */
}
#ramps {
	position: relative;
	width: 800px;
	height: 1000px;
	overflow: hidden;			/* can't drag out of this area */
	border-style: solid;
	border-width: 10px;
	border-color: #707090;
	cursor: move;				/* changes to "move" cursor */
	margin: 0px 0px 10px 0px;	/* adds space below div box */
}
#chessboard {
	position: relative;
	/* width: 1060px; height: 838px; for bigger graphic */
	width: 866px;
	height: 687px;
	overflow: hidden;			/* can't drag out of this area */
	border-style: solid;
	border-width: 10px;
	border-color: #707090;
	cursor: move;				/* changes to "move" cursor */
	margin: 0px 0px 10px 0px;	/* adds space below div box */
}
#cube {
	position: relative;
	width: 745px;
	height: 800px;
	overflow: hidden;			/* can't drag out of this area */
	border-style: solid;
	border-width: 10px;
	border-color: #707090;
	cursor: move;				/* changes to "move" cursor */
	margin: 0px 0px 10px 0px;	/* adds space below div box */
}

/* images hold position */
#illusionbars img, #illusionbars2 img, #ramps img, #squares img, #ring img {
	position: absolute;
	border-style: solid;
	border-width: 0px;
	border-color: transparent;
}

#colors {
	position: relative;
	width: 100%;
	height: 800px;
	overflow: hidden;			/* can't drag out of this area */
	border-style: solid;
	border-width: 10px;
	border-color: #707090;
	cursor: move;				/* changes to "move" cursor */
}
/* images hold position */
#colors img, #chessboard img, #cube img {
	position: absolute;
	border-style: solid;
	border-width: 2px;
	border-color: transparent;
}
/* put hover borders around images */
#colors img:hover, #chessboard img:hover, #cube img:hover {
	border-style: solid;
	border-width: 2px;
	border-color: #707090;		/* must contrast with background color(s) */
}

#spotlights {
	position: relative;
	width: 100%;
/*	height: 500px;*/
	height: 95%;
	overflow: hidden;			/* stay in this area */
	border-style: solid;
	border-width: 4px;
	border-color: #707090;
	visibility: hidden;
}
#spotlights img {
	position: absolute;
	border-style: solid;
	border-width: 2px;
	border-color: transparent;
}
/* put hover borders around images */
#spotlights img:hover {
	border-style: solid;
	border-width: 2px;
	border-color: #c0c0c0;
}

#spotlights #lightcolor {
	position: absolute;
	border-style: none;
	margin: 0;
	padding: 0;
	background: #000000;
}
#spotlights #lightcolor:hover {
	border-style: none;
}

#spotlights #paintcolor {
	position: absolute;
	border-style: none;
	margin: 0;
	padding: 0;
	background: #ffffff;
}
#spotlights #paintcolor:hover {
	border-style: none;
}

.floatright {
	float: right;
	margin-left: 20px;
}
.floatleft {
	float: left;
	margin-right: 20px;
}

.denominator {
	font-style: normal;
	font-weight: normal;
	font-size: .75em;
	position: relative;
	top: 0.3em;
}
.numerator {				/* fractions */
	font-style: normal;
	font-weight: normal;
	font-size: .75em;
	position: relative;
	bottom: 0.5em;
}