﻿
/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}

/* HTML ELEMENTS */
body { font-family:Georgia,serif; font-size:13px; background: #fff; color: #000; background-image:url("../images/back5.png"); }
/*h1 { margin: 0 0 0 0; padding:15px; border-left-width:10px; border-left-color:#eeeeee; border-left-style:solid; } */
h1 {padding: 10px}
h1 small{ font-size: 10px; text-transform:uppercase; letter-spacing: 14px; display: block; color: #ccc; }
h2 { font-style:italic; font-size:13px; margin:10px 0 5px 30px; }
p { margin:10px 0; }
a { color:#eee; }

/* COMMON CLASSES */
.break { clear:both; }

/* WRAPPER */
#wrapper { width:auto; margin:0 auto; text-align: center; margin-top: 0px; }

/* JCHARACTERFALL */
#jcharacterfall { margin:20px 0; }
.icon {width: 45px; height: 45px; margin-bottom: 3px}
#gamestart { text-align:center; font-weight:bold; font-size:18px;}
#gamestart p { margin:10px; }
.extrapadding { padding-top:50px; }
#gamecontainer { width:auto; margin:0 auto; }
#waterfall { width:650px; height:550px;  }
#container { float:left;  width:650px; height:550px; border-color: #000; position: relative; background-image:url("../images/bg.png"); 
	-moz-box-shadow: 0 0 10px #adadad; -moz-border-radius: 5px; -webkit-box-shadow: 0 0 10px #adadad; -webkit-border-radius: 5px; }
#left_panel {float: left;}
.control {width: 110px; height: 60px; margin-bottom: 4px; border:1px solid white; text-align: center; background-color: white; background-image:url("../images/back4.png");
	-moz-box-shadow: 0 0 10px #adadad; -moz-border-radius: 5px; -webkit-box-shadow: 0 0 10px #adadad; -webkit-border-radius: 5px;}
#reveiw {width: 230px; min-height: 480px; height: auto; margin-right:10px; padding-right: 0px; border:1px solid white; text-align: center; background-color: white; background-image:url("../images/back4.png");
	-moz-box-shadow: 0 0 10px #adadad; -moz-border-radius: 5px; -webkit-box-shadow: 0 0 10px #adadad; -webkit-border-radius: 5px;}
#rev_text {font-family:"Helvetica Neue",Arial,Helvetica,sans-serif; font-weight:bold; font-size:15px;}
#sentence {font-family:"Helvetica Neue",Arial,Helvetica,sans-serif; font-weight:bold; font-size:24px;
	text-shadow: #fff 0 1px 0; color: #555; margin:0; text-align:center; margin-top: 20px; display: inline;}
.sen {font-family:"Helvetica Neue",Arial,Helvetica,sans-serif; font-weight:bold; font-size:24px;
	text-shadow: #fff 0 1px 0; color: #555; margin:0; text-align:center; }
.word {display: inline;}
.basket{width:130px; height: 85px; text-align: center; font-family:"Helvetica Neue",Arial,Helvetica,sans-serif; font-weight:bold; font-size:24px;
	text-shadow: #000 0 1px 0; color: #000; float: left;}
#baskets{width:700px; height: auto;  float: left; vertical-align: bottom; position: absolute; bottom: 0;}
/* #negBasket {float: left; }
#nuBasket { float: left; }
#wasteBasket { float: left; }
#entBasket {float: left; }
#posBasket { float: right; }
margin-top: 500px;
*/
#sp_screen {width: 400px; height: 300px; display:inline-block; margin-top: 40px}
#gamestats { width:70px; height:550px; margin-left:10px; float:left; border:1px solid white; background-color: white;
	-moz-box-shadow: 0 0 10px #adadad; -moz-border-radius: 5px; -webkit-box-shadow: 0 0 10px #adadad; -webkit-border-radius: 5px; }
	
.fallingchar { width:128px; height:128px; cursor:pointer; text-align: center; }
.fallingchar p { padding:15px 0px; font-family:"Helvetica Neue",Arial,Helvetica,sans-serif; font-weight:bold; font-size:34px;
	text-shadow: #fff 0 1px 0; color: #555; margin:0; text-align:center; 
	-moz-user-select: none; -webkit-user-select: none; user-select: none;}

.stats { text-align:center; font-weight:bold; font-size:12px; }
.counter { font-size:28px; font-style:italic; font-weight:bold;}

#diffeasy { cursor:pointer; }
#diffhard { cursor:pointer; }

.gameoverscreen { font-family:"Helvetica Neue",Arial,Helvetica,sans-serif; font-weight:bold; font-size:20px; text-align: center; padding-top: 30px;
	text-shadow: #fff 0 1px 0; color: #555;  width:650px; height:520px; 
	-moz-box-shadow: 0 0 10px #adadad; -moz-border-radius: 5px; -webkit-box-shadow: 0 0 10px #adadad; -webkit-border-radius: 5px; }
.gameoverscreen h1 { margin:0; }
#info { margin-top:40px; }
#rev_table {width: 100%}
#rev_table td {border-bottom: 1px solid #BFBFBD; border-collapse:collapse; text-align: right}
#finish_button {display: inline-block; margin-right: 5px; cursor:pointer;}
#pause_button {display: inline-block; margin-right: 10px; cursor:pointer;}
/*button css*/
.red_button {
	-moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
	box-shadow:inset 0px 0px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff0000), color-stop(1, #871010) );
	background:-moz-linear-gradient( center top, #ff0000 5%, #871010 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#871010');
	background-color:#ff0000;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
	
	display:inline-block;
	color:#ffffff;
	font-family:arial;
	font-size:23px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:-2px 1px 1px #000000;
}.red_button:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #871010), color-stop(1, #ff0000) );
	background:-moz-linear-gradient( center top, #871010 5%, #ff0000 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#871010', endColorstr='#ff0000');
	background-color:#871010;
}.red_button:active {
	position:relative;
	top:1px;
}

.green_button {
	-moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
	box-shadow:inset 0px 0px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #34b800), color-stop(1, #0c5700) );
	background:-moz-linear-gradient( center top, #34b800 5%, #0c5700 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#34b800', endColorstr='#0c5700');
	background-color:#34b800;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
	
	display:inline-block;
	color:#ffffff;
	font-family:arial;
	font-size:23px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:-2px 1px 1px #000000;
}.green_button:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0c5700), color-stop(1, #34b800) );
	background:-moz-linear-gradient( center top, #0c5700 5%, #34b800 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0c5700', endColorstr='#34b800');
	background-color:#0c5700;
}.green_button:active {
	position:relative;
	top:1px;
}

.grey_button {
	-moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
	box-shadow:inset 0px 0px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cfcfcf), color-stop(1, #7a7a7a) );
	background:-moz-linear-gradient( center top, #cfcfcf 5%, #7a7a7a 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfcfcf', endColorstr='#7a7a7a');
	background-color:#cfcfcf;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
	
	display:inline-block;
	color:#ffffff;
	font-family:arial;
	font-size:23px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:-2px 1px 1px #000000;
}.grey_button:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #7a7a7a), color-stop(1, #cfcfcf) );
	background:-moz-linear-gradient( center top, #7a7a7a 5%, #cfcfcf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7a7a7a', endColorstr='#cfcfcf');
	background-color:#7a7a7a;
}.grey_button:active {
	position:relative;
	top:1px;
}