@font-face{
	font-family: "Rainy Hearts";
	src: url("assets/rainyhearts.ttf");
}

body {
	background-color: #306850;
	background-image: url("img/gameboy_bg.png");
	background-repeat: no-repeat;
	background-position: center top;
	width: 100%;
	cursor: url("img/cursor.png"), pointer;
	font-family: "Rainy Hearts";
	text-align: center;
}
	a:hover { cursor: url("img/cursor.png"), pointer; }

#canvasArea {
	background-color: #e0f8cf;
	width: 640px;
	height: 576px;
	border: 0px solid #071821;
	box-shadow: 0px 0px 8px #071821 inset;
	margin: auto;
	margin-left: calc(50% - 332px);
	margin-top: 150px;
	display: block;
	background-image: url("img/titleScreen.png");
}
	#makeOutfit {
		position: absolute;
		margin-top: 320px;
		margin-left: -300px;
	}
	#viewOutfit {
		position: absolute;
		margin-top: 260px;
		margin-left: 20px;
	}
	
	#dressUp{
		display: none;
	}
	#menu_icons {
		position: absolute;
		width: 52px;
		margin-left: 580px;
		margin-top: 10px;
	}
		#menu_icons a {
			width: 52px;
			display: block;
			margin-bottom: 10px;
		}
		#save {
			height: 56px;
		}
		#reset {
			height: 48px;
		}
		#inGameMenu {
			height: 48px;
		}

		#part_icons {
			width: 100px;
			height: 640px;
			float: left;
		}
			#part_icons ul, #part_icons li { list-style-type: none; margin-left: 0px; padding-left: 0px; }
			#part_icons li { margin-bottom: 0.5em; }

		#choices_icons {
			width: 100px;
			height: 640px;
			float: left;
		}
			#choices_icons ul { margin-top: 75px; height: 430px; overflow: hidden; display: none; }
			#choices_icons ul, #choices_icons li { list-style-type: none; margin-left: 0px; padding-left: 0px; }
			#choices_icons li { margin-bottom: 0.5em; }
				#choices_icons #du_scrollUp, #choices_icons #du_scrollDown {
					position: absolute;
					margin-top: 25px;
					margin-left: -40px;
				}
				#choices_icons #du_scrollDown { margin-top: 525px; }
		#clothes {
			float: right;
			text-align: right;
			width: 362px;
			height: 640px;
		}
			#clothes img {  }
			#clothes_hairs { width: 362px; height: 206px; margin-right: 200px; }
			#clothes_shirts { width: 344; height: 128px; }
			#clothes_bottoms { width: 276px; height: 128px; position: absolute; z-index: 100; }
			#clothes_shoes { width: 256px; height: 116px; position: absolute; z-index: 0; margin-left: 106px; margin-top: 70px; }

#toolTip {
	position: absolute;
	z-index: 100;
	background-image: url("img/toolTip_bg.png");
	height: 52px;
	width: 118px;
	display: none;
	font-size: 1.6em;
}
	#toolTip span {
		display: block;
		margin-top: 10px;
	}

#dialogue::before, #dialogue::after{
	background: #e0f8cf;
	height: 8px;
	width: 236px;
	display: block !important;
}
#dialogue::before{
	content: url("img/dialogue_top.png");
}
#dialogue::after{
	content: url("img/dialogue_bottom.png");
	background-image: url("img/dialogue_middle.png");
	padding-top: 2px;
}
#dialogue {
	width: 236px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -200px;
	margin-left: -118px;
	display: none;
	z-index: 1000;
}
	#dialogue span {
		background-image: url("img/dialogue_middle.png");
		background-repeat: repeat-y;
		font-size: 2em;
		margin-top: 5px;
		padding: 18px 0;
		display: block;
	}	
		#dialogue span a {
			text-decoration: none;
			font-weight: bold;
			border: 3px solid #071821;
			border-radius: 8px;
			padding: 4px;
			display: inline-block;
			color: #071821;
			height: 100%;
			width: 75px;
			margin: 10px 0;
		}
		#dialogue span a:hover {
			color: #e0f8cf;
			background-color: #071821;
		}
		#dialogue #saveslot_back, #dialogue #slotNumber, #dialogue #saveslot_next { width: 50px; padding: 2px; }
		#dialogue #slotNumber { display: inline-block; }
		#dialogue #saveslot_save { width: 80px; padding: 2px; }
		#dialogue #saveslot_cancel { width: 100px; padding: 2px; }

#viewOutfits {
	display: none;
}
	#viewmenu_icons {
		width: 68px;
		height: 640px;
		float: right;
		padding: 20px;
		margin-top: 20px;
	}
		#viewmenu_icons #deleteIcon img, #viewmenu_icons #inGameMenu_view img { margin-top: 10px; }

	.saveArrows {
		position: absolute;
		margin-top: 260px;
	}
		#view_back { margin-left: -210px; }
		#view_next { margin-left: 250px; }

	#view_slotName {
		position: absolute;
		left: 50%;
		margin-left: -150px;
		margin-top: 500px;
		font-size: 3em;
		width: 300px;
		text-align: center;
		background-color: #e0f8cf;
		border: 3px solid #071821;
		border-radius: 16px;
	}
	#view_clothes { position: absolute; margin-top: -12px; }
		#view_hairs { height: 206px; margin-left: 154px; }
		#view_shirts { height: 128px; margin-left: 180px; margin-top: -10px; }
		#view_bottoms { height: 152px; margin-left: 154px; }
		#view_shoes { height: 116px; position: absolute; margin-left: 272px; margin-top: 80px; }