@charset "UTF-8";
/* CSS Document */
body {
	margin: 0px;
}
/* COMMON CLASSES */
.flip { /*https://css-tricks.com/snippets/css/flip-an-image/*/
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
} .hover {
	opacity: 0.5;
}
/* DIALOGUE*/
#textBox {
	position: absolute;
	left: 100px;
	bottom: 0px;
	z-index: 2; 
} 
#charPic {
	position: absolute;
	width: 200px;
	height: 200px;
	bottom: 5px;
	right: 90px;
	z-index: 4; 
} 
#charPic img {
    display: block;
    margin-left: auto;
    margin-right: auto;
	z-index: 1; 
} 
#charTag {
	position: absolute;
	bottom: 0px;
	right: 115px;
	z-index: 5;
} 
.text {
	color: white;
	font-family: "Arial", Arial, Sans-serif;
	width: 400px;
	height: 80px;
	left: 135px;
	bottom: 20px;
	position: absolute;
	margin: 0 auto; /* Gives that scrolling effect as the typing happens */
	letter-spacing: 0em; /* Adjust as needed */
	word-wrap: break-word;
	z-index: 2;
} 
#next {
	position: absolute;
	bottom: 5px;
	right: 300px;
	cursor: pointer;
	z-index: 2;
}
#next2 {
	position: absolute;
	bottom: 5px;
	right: 300px;
	cursor: pointer;
	z-index: 2;
}
/* MAIN MENU */
#home {
	width: 800px;
	height: 600px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	position: relative;
	background-image: url(images/title.png);
} #name {
	position: absolute;
	top: 0px;
	left: 100px;
} #start {
	position: absolute;
	bottom: 0px;
	left: 238px;
	cursor: pointer;
} #rogueTitle {
	position: absolute;
	bottom: 75px;
	right: 300px;
} #alexanderTitle {
	position: absolute;
	bottom: 75px;
	left: 300px;
} #grantTitle {
	position: absolute;
	bottom: 125px;
	right: 225px;
} #kingTitle {
	position: absolute;
	bottom: 75px;
	right: 125px;
} #alexisTitle {
	position: absolute;
	bottom: 10px;
	right: 10px;
} #kingSlimeTitle {
	position: absolute;
	bottom: 45px;
	left: 5px;
	z-index: 4;
} #queenSlimeTitle {
	position: absolute;
	bottom: 125px;
	left: 125px;
	z-index: 2;
} #slimeTitle1 {
	position: absolute;
	bottom: 5px;
	left: 10px;
	z-index: 5;
} #slimeTitle2 {
	position: absolute;
	bottom: 110px;
	left: 25px;
	z-index: 1;
} #slimeTitle3 {
	position: absolute;
	bottom: 125px;
	left: 250px;
	z-index: 3;
}

/* CLASSES */ /* Capitalised so I can use as strings in dialogue. */
#Swordman { position: absolute; cursor: pointer; z-index: 2; }
#Magician { position: absolute; cursor: pointer; z-index: 2; }
#Archer { position: absolute; cursor: pointer; z-index: 2; }
#Rogue { position: absolute; cursor: pointer; z-index: 2; }

#Alexis { position: absolute; cursor: pointer; z-index: 10; }
#Grant { position: absolute; cursor: pointer; z-index: 10; }
#Xavier { position: absolute; cursor: pointer; z-index: 10; }
#Alec { position: absolute; cursor: pointer; z-index: 10; }

/* MAPS */
#lith { position: absolute; cursor: pointer; z-index: 2; }
#henesys { position: absolute; cursor: pointer; z-index: 2; }
#ellinia { position: absolute; cursor: pointer; z-index: 2; }
#perion { position: absolute; cursor: pointer; z-index: 2; }
#kerning { position: absolute; cursor: pointer; z-index: 2; }
#nautilus { position: absolute; cursor: pointer; z-index: 2; }
#sleepywood { position: absolute; cursor: pointer; z-index: 2; }
#castle { position: absolute; cursor: pointer; z-index: 2; }

#aqua { position: absolute; cursor: pointer; z-index: 2; }
#ludi { position: absolute; cursor: pointer; z-index: 2; }
#mulung { position: absolute; cursor: pointer; z-index: 2; }
#herb { position: absolute; cursor: pointer; z-index: 2; }
#cbd { position: absolute; cursor: pointer; z-index: 2; }
#castle2 { position: absolute; cursor: pointer; z-index: 2; }

/* NPCs */
#taxi { position: absolute; cursor: pointer; }
#portal { position: absolute; cursor: pointer; }
#door { position: absolute; cursor: pointer; }

/* QUESTS */
#quest { position: absolute; z-index: 6 }
#endChat { 
	position: absolute; 
	left: 11px;
	bottom: 12px;
	cursor: pointer;
	z-index: 6;
}
#yes { position: absolute; cursor: pointer; z-index: 2; }
#no { position: absolute; cursor: pointer; z-index: 2; }

/* OBJECTS */
#obj1 { position: absolute; cursor: pointer; z-index: 2; }
#obj2 { position: absolute; cursor: pointer; z-index: 2; }
#obj3 { position: absolute; cursor: pointer; z-index: 2; }
#obj4 { position: absolute; cursor: pointer; z-index: 2; }
#obj5 { position: absolute; cursor: pointer; z-index: 2; }
#obj6 { position: absolute; cursor: pointer; z-index: 2; }
#obj7 { position: absolute; cursor: pointer; z-index: 2; }
#obj8 { position: absolute; cursor: pointer; z-index: 2; }
#obj9 { position: absolute; cursor: pointer; z-index: 2; }
#obj10 { position: absolute; cursor: pointer; z-index: 2; }

#classDesc { position: absolute; z-index: 2; }
#pic1 { position: absolute; z-index: 2; }
#pic2 { position: absolute; z-index: 2; }
#pic3 { position: absolute; z-index: 2; }
#pic4 { position: absolute; z-index: 2; }
#pic5 { position: absolute; z-index: 2; }

/* CHARACTERS */
#alexanderStand { position: absolute; z-index: 1;} 
#alexanderWalk { position: absolute; z-index: 1; } 
#alexanderWalk2 { position: absolute; z-index: 1; } 
#alexanderAttack { position: absolute; z-index: 1;} 
#alexanderDeath { position: absolute; } 
#alexanderProjectile { position: absolute; } 
#alexanderHit { position: absolute; } 
#alexisStand { position: absolute; } 
#alexisWalk { position: absolute; } 	
#alexisSwing { position: absolute; } 
#alexisTP { position: absolute; } 
#alexisBow { position: absolute; }
#kingStand { position: absolute; } 
#kingWalk { position: absolute; } 
#grantStand { position: absolute; } 
#grantWalk { position: absolute; }
#monsterStand { position: absolute; z-index: 0; } 
#monsterWalk { position: absolute; }
#monsterWalk2 { position: absolute; }
#monsterHit { position: absolute; } 
#alexisClick { position: absolute; cursor: pointer; } 
#noobStand { position: absolute; } 
#noobWalk { position: absolute; z-index: 1; } 
#joelStand { position: absolute; } 
#joelClick { position: absolute; cursor: pointer; z-index: 2; }
#kingClick { position: absolute; cursor: pointer; } 
#grantClick { position: absolute; cursor: pointer; } 
#dragon { position: absolute; } 
#dragon1 { position: absolute; } 
#dragon2 { position: absolute; } 
#dragon3 { position: absolute; } 
#dragon4 { position: absolute; } 

#orbis { position: absolute; }
#orbisBG { position: absolute; }
#flashback { position: absolute; z-index: 2;}
#item { position: absolute; z-index: 4;}
#inventory { position: absolute; z-index: 8;}
#lithItem { position: absolute; z-index: 8;}
#henesysItem { position: absolute; z-index: 8;}
#elliniaItem { position: absolute; z-index: 8;}
#perionItem { position: absolute; z-index: 8;}
#kerningItem { position: absolute; z-index: 8;}
#nautilusItem { position: absolute; z-index: 8;}
#sleepywoodItem { position: absolute; z-index: 8;}

#aquaItem { position: absolute; z-index: 8; cursor: pointer; }
#ludiItem { position: absolute; z-index: 8; cursor: pointer; }
#mulungItem { position: absolute; z-index: 8; cursor: pointer; }
#herbItem { position: absolute; z-index: 8; cursor: pointer; }
#cbdItem { position: absolute; z-index: 8; cursor: pointer; }

#aquaHide { position: absolute; z-index: 5; cursor: pointer; }
#ludiHide { position: absolute; z-index: 5; cursor: pointer; }
#mulungHide { position: absolute; z-index: 5; cursor: pointer; }
#herbHide { position: absolute; z-index: 5; cursor: pointer; }
#cbdHide { position: absolute; z-index: 5; cursor: pointer; }

#roamBG { position: absolute; }
#fightBG { position: absolute; }


/* MAP NAME */
#mapName {
	font-family: "Andale Mono", monospace;
	font-size: 100px;
	font-weight: bold;
	color: white;
	-webkit-text-fill-color: white; /* Will override color (regardless of order) */
	-webkit-text-stroke-width: 3px;
	-webkit-text-stroke-color: black;
	position: absolute;
	padding-top: 50px;
	width: 100%;
	text-align: center;	
	z-index: 3;
}

/* ORBIS */
#blankMap {
	overflow: hidden;
	width: 800px;
	height: 600px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	position: relative;
} 

/* EL NATH */
#elnath {
	width: 800px;
	height: 600px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	position: relative;
	background-image: url(images/elnath.png);
} 

/* EL NATH */
#elNathTower {
	overflow: hidden;
	width: 800px;
	height: 600px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	position: relative;
	background-image: url(images/elNathTower.png);
} 

/* JOB ADVANCE */
#jobWarrior {
	position: absolute;
	top: 0px;
	left: 0px;
} #jobMagician {
	position: absolute;
	top: 0px;
	left: 200px;
} #jobArcher {
	position: absolute;
	top: 0px;
	left: 450px;
} #jobRogue {
	position: absolute;
	top: 0px;
	left: 600px;
}

/* BATTLE */
#ui {
	position: absolute;
	bottom: -4px;
	left: 0px;
	z-index: 1;
} #timer {
	font-family: "Andale Mono", monospace;
	font-size: 50px;
	position: absolute;
	color: #fcfacd;
	top: 35px;
	right: 280px;
	z-index: 3;
} #timeLeft {
	position: absolute;
	top: 30px;
	left: 275px;
	z-index: 2;
} #player {
	position: absolute;
	bottom: 100px;
	left: 100px;
	border: 1px solid black;
	z-index: 3;
} #HP {
	position: absolute;
	font-family: "Andale Mono", monospace;
	font-size: 10px;
	color: white;
	left: 400px;
	top: 2px;
	z-index: 2;
} #playerAttack {
	position: absolute;
	bottom: 100px;
	left: 100px;
	border: 1px solid black;
	z-index: 3;
} #clicks {
	font-family: "Andale Mono", monospace;
	font-size: 35px;
	font-weight: bold;
	position: absolute;
	color: white;
	bottom: -4px;
	left: 325px;
	z-index: 3;
} #crits {
	font-family: "Andale Mono", monospace;
	font-size: 35px;
	font-weight: bold;
	position: absolute;
	color: white;
	bottom: -4px;
	left: 486px;
	z-index: 3;
} #starThrow {
	position: absolute;
	bottom: 105px;
	left: 225px;
	z-index: 3;
} #rogueSkill {
	position: absolute;
	right: 0px;
	bottom: 0px;
} #skillCD {
	position: absolute;
	width: 50px;
	height: 50px;
	right: 0px;
	bottom: 0px;
	border: 1px solid black;
	z-index: 10;
} #cdtimer {
	font-family: "Andale Mono", monospace;
	font-size: 10px;
	position: absolute;
	color: black;
	right: 0px;
	bottom: 0px;
	z-index: 3;
} #win {
	position: absolute;
	top: 0px;
	left: 160px;
	z-index: 6;
	cursor: pointer;	
} #death {
	position: absolute;
	top: 100px;
	right: 250px;
	z-index: 4;
} #retry {
	font-size: 50px;
	position: absolute;
	top: 184px;
	right: 360px;
	z-index: 6;
	cursor: pointer;
} #unavailable {
	border: 1px solid black;
	width: 800px;
	height: 600px;
	left: 0px;
	top: 0px;
	position: absolute;
	color: none;
	z-index: 5;
} progress {	/* Monster HP Bar*/
	position: absolute;
	left: 100px;
	top: 1px;
	width: 600px;
	height: 13px;
	color: red;
	background: rgb(48,48,48,0.5); /* Gray */
	border: 1px solid white;
	outline: 1px solid black;
	border-radius: 2px;
} progress::-webkit-progress-value { /* Chrome */
	background: red;
} progress::-webkit-progress-bar { /* Chrome */
	background: rgb(48,48,48,0.5); /* Gray */
}

#puzzleItemsContainer {
	position: absolute;
	bottom: 300px;
	left: 218px;
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.puzzleItems {
	font-family: "Andale Mono", monospace;
	font-size: 40px;
	font-weight: bold;
	width: 50px;
	height: 50px;
	float: left;
	margin: 0 5px 0 0;
	background-color: rgb(236,236,255);
	color: rgb(156,0,32);
	text-align: center;	
	border-radius: 5px;
	border: solid 3px rgb(46,47,61);
}