/* Finite Arts Web CSS © 2024 Hal Barwood */

/* tags */

body	{ background-color: #222220;}
h1	{ font-family: "Arial", "Helvetica", sans-serif; font-style: oblique; font-size: 32px; font-weight: 500; color: #FF9900; }
h2	{ font-family: "Arial", "Helvetica", sans-serif; font-size: 32px; font-style: italic; color: #FF9900; }
p	{ font-family: "Times New Roman", Times, serif; font-size: 16px; font-weight: normal; color: #000000; }
ul	{ font-family: "Arial", "Helvetica", sans-serif; font-size: 16px; }

a:link	{ text-decoration: none; color: #cc8800; }
a:visited	{ text-decoration: none; color: #cc9900; }
a:focus	{ text-decoration: none; color: #cc9900; }
a:hover 	{ text-decoration: none; color: #eebb00; }
a:active	{ text-decoration: none; color: #ffdd00; }

/* classes that declare heights */

.background
{
	/* ruling element */
	position: relative;
	top: -8px; left: 0px; /* why the negative top? do not know */
	width: 1100px; height: 920px;
	margin-left: auto; margin-right: auto;
	padding: 0px;
	z-index: 1;
	background-color: #bbbbb0;
}

.debug
{
	position: absolute; 
	top: 10px;
	left: 10px;
	font-family: "Arial", "Helvetica", sans-serif;
	font-size: 20px;
	color: #FFFF00;
	text-align: left;
	margin: 0px;
	padding: 0px;
	background: transparent;
	border: 0px
}

.tileframe
{
	/* border around tiles */
	position: absolute; 
	top: 68px; left: 36px;
	width: 1028px; height: 624px;
	/* vertical-align: middle; */
	margin-left: auto; margin-right: auto;
	padding: 0px;
	z-index: 2;
	background-color: #555555;
}

.tilepix
{
	/* changing tile overlay */
	position: absolute;
	top: 76px; left: 44px;
	width: 1012px; height: 610px;
	/* vertical-align: middle; */
	margin-left: auto; margin-right: auto;
	padding: 0px;
	z-index: 10;
	background-color: transparent;
}

/* these classes declare tops way down the page... */

.shadowspot
{
	position: absolute;
	top: 725px; left: 38px;
}

.broomspot
{
	position: absolute;
	top: 725px; left: 125px; /*+87*/
}

.whiskeyspot
{
	position: absolute;
	top: 725px; left: 212px; /*+87*/
}

.glitterspot
{
	position: absolute;
	top: 725px; left: 299px; /*+87*/
}

.happenspot
{
	position: absolute;
	top: 725px; left: 386px; /*+87*/
}

.fulfillspot
{
	position: absolute;
	top: 725px; left: 473px; /*+87*/
}

.sandspot
{
	position: absolute;
	top: 725px; left: 560px; /*+87*/
}

.prayerspot
{
	position: absolute;
	top: 735px; left: 647px; /*+87*/
}

.tinspot
{
	position: absolute;
	top: 725px; left: 734px; /*+87*/
}

.craterspot
{
	position: absolute;
	top: 725px; left: 820px; /*+86*/
}

.madspot
{
	position: absolute;
	top: 735px; left: 907px;
}

.cosmospot
{
	position: absolute;
	top: 735px; left: 995px;
}

.footer
{
	position: absolute;
	top: 890px;
	left: 848px;
	padding: 0px;
	font-family: "Arial", san-serif; font-size: 14px; font-style: normal; font-weight: normal;
	color: #0077aa;
	z-index: 20;
}

.dotcover
{
	/* this is a terrible HACK to cover a dot created by the slideshow script */
	position: absolute;
	top: 670px; left: 26px;
	z-index: 3;
}

.top
{
	position: absolute; top: 0px;
	padding-top: 0px;
}

/* floating control stuff */

.slidertrack
{
	position: absolute; top: 275px; left: 1064px; width: 36px;
	padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;
	z-index: 15;
}

.uparrowfloat
{
	position: absolute; top: 0px; left: 0px;
	padding: 0px;
	display: block;
	z-index: 15;
}

.gohomefloat
{
	position: absolute; top: 45px; left: 0px;
	padding: 0px;
	display: block;
	z-index: 15;
}

.dnarrowfloat
{
	position: absolute; top: 90px; left: 0px;
	padding: 0px;
	display: block;
	z-index: 15;
}

/* IDs */


#fade_package
{
	list-style-type: none;
}

#fabg_0, #fabg_1, #fabg_2, #fabg_3, #fabg_4, #fabg_5, #fabg_6, #fabg_7, #fabg_8, #fabg_9, #fabg_10, #fabg_11,
#fabg_12, #fabg_13, #fabg_14, #fabg_15, #fabg_16, #fabg_17, #fabg_18, #fabg_19, #fabg_20

{
	position: absolute;
	top: 78px;
	left: 46px;
	display: none;
	z-index: 3;
}