* {
	padding: 0px;
	margin: 0px;
}

body {
	background: #8B8EA1;
	color: #dadada;
	width: 600px;
	margin: auto;
	margin-top: 1em;
}

.inner {
	display: block;
	padding: 1em;
	background: #505573;
}

.cufon {
	padding-bottom: 7px;
}

.outer {
	display: block;
	width: 100%;
}

img[character] {
	width: 80px;
	margin: 7px;
	border: 3px solid black;
}

img[character]:hover {
	border: 5px solid #dadada;
	margin: 5px;
}

img[character="lily"], img[character="qaisar"] {
	display: none;
}

#select {
	min-height: 620px;
}

#select #portraits {
	margin: auto;
	text-align: center;
}

.title {
	font-size: 22pt;
	padding: 0.5em 0px;
}

.sub-title {
	font-size: 18pt;
}

.title, .sub-title {
	text-align: center;
	color: white;
}

#actions {
	text-align: center;
}



.gesture {
	font-size: 8pt;
	float: left;
	margin-right: 5px;
	padding-right: 15px;
	text-align: center;
	cursor: pointer;
}

.gesture div {
	height: 24px;
	color: #dadada;
}

.group {
	float: left;
}

.legend {
	float: right;
}

.legend div {
	float: left;
	font-size: 10pt;
	width: 100px;
	height: 10pt;
	display: inline;
}

.gesture[action="open"], .gesture[action="super"], .gesture[combo="finish"] {
	display: none;
}

.gesture[action="special"], .legend #special {
	background: url("gestures/special.png") top right no-repeat;
}

.gesture[action="throw"], .legend #throw {
	background: url("gestures/throw.png") top right no-repeat;
}

.gesture[action="superc"], .legend #super {
	background: url("gestures/super.png") top right no-repeat;
}

#combo {
	float: left;
	display: none;
}

.plaintext .inner {
	font-family: serif;
	background: black;
}

.attract {
	text-decoration: blink;
	text-align: center;
	padding: 0.5em 0px;
	cursor: pointer;
} 

#xiuli, #jake, #detective, #king, #yamato, #gambier, #lily, #qaisar {
	position: absolute;
	top: 500px;
	width: 600px;
	display: none;
}

.paragraph {
	padding-bottom: 1em;
}

#next {
	float: right;
	cursor: pointer;
}

#vs-screen #left, #vs-screen #right { 
	width: 0px; 
	display: none;
}

#vs-screen #left div, #vs-screen #right div {
	width: 120px;
}

#vs-screen #left {
	float: left; 
	margin-left: 100px;
}

#vs-screen #right {
	float: right;
	margin-right: 100px;
}

#vs-screen #left div, #vs-screen #left img {
	float: left;
}

#vs-screen #right div, #vs-screen #right img {
	text-align: right;
	float: right;
}

#vs-screen #left br, #vs-screen #right br {
	clear: both;
}

#vs-screen #vs {
	display: none;
	text-align: center;
	font-size: 52pt;
	padding-top: 38px;
	color: white;
}

#vs-screen #location {
	display: none;
	clear: both;
	text-align: center;
}

#vs-screen #announcer {
	clear: both; 
	padding-top: 50px; 
	text-align: center; 
	width: 400px; 
	margin: auto; 
	display: none; 
	cursor: pointer;
}

#combat-screen #left, #combat-screen #right { 
	width: 250px;
}

#combat-screen #left, #combat-screen #left img {
	float: left;
}

#combat-screen #right, #combat-screen #right img {
	float: right;
}

#combat-screen #left .container {
	padding-left: 50px;
}

#combat-screen #right .container {
	padding-right: 50px;
	text-align: right;
}

#combat-screen .container {
	width: 200px; 
	height: 40px; 
	margin-top: -20px; 
	font-size: 10pt;
	color: white;
}

#combat-screen .container .name {
}

#combat-screen .lifebar {
	width: 100%; 
	border: 2px solid white; 
	height: 20px; 
	background: #c33431;
}

#combat-screen .lifebar div {
	background: #f4e557; 
	width: 100%; 
	height: 100%;
}

#combat-screen #right .lifebar div {
	margin-left: auto;
}

#combat-screen #left .superbar {
	width: 190px; 
	float: left;
}

#combat-screen #right .superbar {
	width: 200px; 
	float: right;
}

#combat-screen .superbar .bar {
	width: 100px;
	height: 20px; 
	border: 2px solid white; 
	margin-top: -9px;
}

#combat-screen #left .superbar .bar {
	float: right;
}

#combat-screen #right .superbar .bar {
	float: left;
}

#combat-screen .superbar .bar div {
	width: 0%; 
	height: 100%; 
	background: #66cc99;
}

#combat-screen #right .superbar .bar div {
	float: right;
}

#combat-screen #right .superbar .text {
	position: relative;
	left: 10px;
}

#log {
	height: 90px;
}

#dialogue .outer, #dialogue .title, #dialogue .sub-title, #dialogue .blink, #vs-screen .title, #vs-screen .sub-title, #narration .title, #narration .sub-title {
	display: none;
}

#main {
	display: none;
}

#you {
	display: none;
}

#credits-end {
	display: none;
	position: absolute;
	top: 200px;
	margin: auto;
}

#credits-end a {
	color: white;
	text-decoration: none;
}

#dialogue .l .portrait {
	float: left; 
	padding-right: 0.5em; 
	margin-top: -10px;
}

#dialogue .r .portrait {
	float: right; 
	padding-left: 0.5em; 
	margin-top: -10px;
}

#dialogue #location {
	text-align: center;
}

.help {
	position: absolute;
	bottom: 15px;
	right: 15px;
	cursor: pointer;
}

.help a {
	color: white;
	opacity: 0.6;
}

.help a:hover {
	opacity: 1.0;
}