@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
body {
background: #000000;
overflow: hidden;
}
ul, li{
	list-style:none;
	
}
#headImg{
	max-width:650px;
	width:100%;
	height:auto;
}
#game {
	background:#fff url(../images/background_image1.png) left top no-repeat;
	width: 620px;
	height: 445px;
	padding:15px;
	position:relative;
	margin:0 auto;
}
#displayText {
    position: absolute;
}
#playContainer{
	position:relative;
	top:114px;
	height:348px;
}
.bgTable1{
	background: transparent url(../images/bgTable.png);	
	left:52px;
	width: 191px;
	height: 43px;
	position:absolute;
	bottom:17px;
	}
.note{
	background:url(../images/backNote.png);	
	left:155px;
	top:0px;
	width:31px;
	height:58px;
	position:absolute;
}
.face{
	background:url(../images/skeltonFace.png);
	top:18px;
	left:150px;
	width:39px;
	height:45px;
	position:absolute;
}

.notefront{
	background:url(../images/frontNote.png);
	top:56px;
	left:155px;
	width:31px;
	height:8px;
	position:absolute;
}
.heart{
	background:url(../images/heartS.png);
	top:47px;
	left:136px;
	width:69px;
	height:123px;
	position:absolute;
}
.leftLeg{
	background:url(../images/leftL.png);
	top:158px;
	left:130px;
	width:32px;
	height:166px;
	z-index:99;
	position:absolute;
	
}
.rightLeg{
	background:url(../images/rightL.png);
	top:148px;
	margin-left:170px;
	width:51px;
	height:169px;
	z-index:100;
	position:absolute;
	
}
.leftarm{
	/*background:url(../images/leftA.png);
	margin-top:-254px;
	margin-left:115px;
	width:77px;
	height:117px;*/
	
	background:url(../images/leftArmS.png);
	width:127px;
	height:151px;
	top:64px;
	left:70px;
	position:absolute;
}
.leftanimation{
	-webkit-animation: play .32s steps(16) infinite;
       -moz-animation: play .32s steps(16) infinite;
        -ms-animation: play .32s steps(16) infinite;
         -o-animation: play .32s steps(16) infinite;
            animation: play .32s steps(16) infinite;
}
@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -2032px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -2032px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -2032px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -2032px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -2032px; }
}


.rightarm{
	/*background:url(../images/rightA.png);
	width:44px;
	height:124px;
	margin-top:2px;
	margin-left:166px;*/
	
	background:url(../images/rightArmS.png);
	
	width:126px;
	height:154px;
	left:150px;
	top:56px;
	position:absolute;
}
.rightanimation{
	-webkit-animation: play .32s steps(16) infinite;
       -moz-animation: play .32s steps(16) infinite;
        -ms-animation: play .32s steps(16) infinite;
         -o-animation: play .32s steps(16) infinite;
            animation: play .32s steps(16) infinite;
}
@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -2016px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -2016px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -2016px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -2016px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -2016px; }
}
.skelton{
	background: url(../images/sketon.png) no-repeat;
	top:0px;
	left:118px;
	width:103px;
	height:332px;
	z-index:5;
	display:block;
	position:absolute;	
}
.bgFront{
background: transparent url(../images/bgFront.png);
width: 650px;
height: 475px;
z-index:8;
position:absolute;
bottom:3px;
left:-15px;
}
.head{
}


#result {
	position: absolute;
right:100px;
top: 50%;
z-index:9999;
}
.winner, .looser{
	width:220px;
}
.winner img, .looser img{
	width:100%;
	max-width:100%
}

#keyBoard{
	background:#fff;
	background:rgba(255,255,255,0.3);
	border-radius: 10px;
	position:absolute;
	right: 15px;
	top:15px;
	width: 85px;
	text-align: center;
	z-index:100;
}
#wordTable li{
	padding:5px;
	display:inline-block;
	vertical-align:top;
	*display:inline;
	*zoom:1;
}
.key{
 	border-radius: 6px;
	border: 1px solid #FFF;
	background:#C00; /*ps red left side buttons A-Y*/
	width:22px;
	height:20px;
	font-size:15px;
	padding-top:2px;
	color:#FFF; /*white*/
}
.key1{
 	border-radius: 6px;
	border: 1px solid #FFF;
	background:#C00; /*ps red right side buttons B-Z*/
	width:22px;
	height:20px;	
	font-size:15px;
	padding-top:2px;
	color:#FFF; /*white*/
}
#textDisplay{
	right:100px;
	position:absolute;
	top:100px;
	
}
.prWord{
	font-size:24px;
	font-family:Arial, Helvetica, sans-serif;
	color:#C00; /*ps red phrase*/
	text-align:center;
}
.prWord1{
	border-radius: 6px;
	border: 0px solid #FF0;
	background-color:#CCC;
	width:15px;
	height:28px;
	visibility:hidden;
}
.displayWord{
	border-radius: 6px;
	border: 0px solid #FF0;
	background-color:#CCC;
	width:28px;
	height:28px;
}
.wordsDisplay >li>div{	
	display:inline-block;
	vertical-align:top;
	*display:inline;
	*zoom:1;
	margin:0 2px 2px 0;
}
.dWord{
	visibility:hidden;
	color:#FFF;
	text-align:center;
	vertical-align:text-top;
	margin-left:7px;
	font-size:20px;
}
.displayWord1{
	border-radius: 6px;
	border: 0px solid #FF0;
	background-color:#CCC;
	width:28px;
	height:28px;
	visibility:hidden;
}

@media only screen and (max-width:680px){
	#game{
		width:auto;
		overflow:hidden;
	}
	}

@media only screen and (max-width:600px){
	#keyBoard{
		top:initial;
		bottom:15px;
		right:0;
		width:100%;
	}
	#result, #textDisplay{
		right:15px;
	}
}