html,
body {
	top: 10px;
	position: absolute;
	left: 25%;
    font-family    : monospace;
    font-size      : 18px;
    color          : #6ee38d;
    margin         : 0;
    background     : #222;
    padding        : 0;
    height         : 100%;
    overflow       : visible;
}
a {
    color           : #aff5c1;
    text-decoration : none;
}

p {
    margin-top    : 15px;
    margin-bottom : 15px;
	font-weight   : normal;
}

div {
	font-weight: normal;
}

@font-face {
	font-family		: LCD14;
	src				: url(../font/LCD14.otf);
}

button {
	background-color 	: #222;
	color				: #6ee38d;
	border				: 1px solid;
	padding				: 5px;	
	width				: 40px;
	height				: 40px;
}

#terminal {
	position: absolute;
	margin-left: 200px;
  	width: 250px;
	height: 400px;
  	border: 5px double #2e8b57;
	display: none;
	text-align: center;
}
#terminalWindow {
	font-family: LCD14;
	font-size: 20pt;
  	margin: 30px auto;
  	width: 120px;
	height: 30px;
  	border: 2px solid #2e8b57;
  	text-align: left;
	padding-left: 19px;
	padding-top: 5px;
}

td {
    width: 50pt;
	height: 30pt;
    border: 3px double #2e8b57;
    text-align: center;
}

table {
  	padding: 12px;
}

.loadingBlock {overflow:hidden;}

.loadingString div{display:inline-block; width: 40%;}

@-webkit-keyframes typing {
    from { width: 0%;opacity:1; }
    to { width:15%;opacity:1; }
}

@-moz-keyframes typing {
    from { width: 0%;opacity:1; }
    to { width:15%;opacity:1; }
}

@keyframes typing {
    from { width: 0%;opacity:1; }
    to { width:15%; opacity:1; }
}

.loadingDots { 
    white-space:nowrap;
    overflow:hidden;
    vertical-align:bottom;
	animation: typing 5s steps(10);
    -webkit-animation: typing 5s steps(10);
    -moz-animation: typing 5s steps(10);
    opacity: 0;
    animation-fill-mode:forwards;
}

.Ok {
  animation: 1s fadeIn;
  animation-delay: 6s;
  opacity: 0;
  animation-fill-mode:forwards;
}

@keyframes fadeIn {
    from {
        opacity:1;
    }
    to {
        opacity:1;
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity:1;
    }
    to {
        opacity:1;
    }
}

.question  {
	color: #aff5c1;
}

.question:before {
	content: '> '
}


::-webkit-inner-spin-button {display: none;}

/* Основной экран */
#wrapper {
    width            : 700px;
    padding-bottom   : 10px;
    margin-left      : 200px;
    padding-top      : 30px;
    background-image  : url(cursor.gif);
    background-repeat : no-repeat;
    background-position: left bottom;
	text-align	     : justify;
}

#story {
    display: none;
}

#info {
	top: 					250px;	
	position: 				absolute;
    left: 					10px;
	font-family:			LCD14;
}	

#sokoScreen {
	text-align: center;
	font-family:  monospace;
}

#field {
  
  top: 10%;
  letter-spacing: 7px;
  display: none;
}

#reference {
	position: absolute;
	text-align: left;
	left: 60%;
	top: 75px;
	display: none;
}

table {
	border-spacing: 10px 5px;
}

.sokoButton {
	margin: 10px;
}



@-webkit-keyframes blink1 {
	0% {color: rgba(255,0,0,1);}
	50% {color: rgba(255,0,0,0);}
	100% {color: rgba(255,0,0,1);}
}

@keyframes blink1 {
	0% {color: rgba(255,0,0,1);}
	50% {color: rgba(255,0,0,0);}
	100% {color: rgba(255,0,0,1);}
}

.blink1 {
	-webkit-animation: blink1 1.5s linear infinite;
	animation: blink1 1.5s linear infinite;
}

#host {
    width             : 700px;
}

#title {
    top              : 10px;
    left             : 0;
    text-align       : left;
    margin-left      : 200px;
    position         : absolute;
    font-size        : 18px;
    font-weight      : bold;
    width            : 100%;
}

@-webkit-keyframes greenPulse {
    from { background-color: #749a02; -webkit-box-shadow: 0 0 5px #333; }
    50% {  background-color: #91bd09; -webkit-box-shadow: 0 0 10px #91bd09; }
    to {   background-color: #749a02; -webkit-box-shadow: 0 0 5px #333; }
}
@-moz-keyframes greenPulse {
    from { background-color: #749a02; box-shadow: 0 0 5px #333; }
    50% {  background-color: #91bd09; box-shadow: 0 0 10px #91bd09; }
    to {   background-color: #749a02; box-shadow: 0 0 5px #333; }
}
@keyframes greenPulse {
    from { background-color: #749a02; box-shadow: 0 0 5px #333; }
    50% {  background-color: #91bd09; box-shadow: 0 0 10px #91bd09; }
    to {   background-color: #749a02; box-shadow: 0 0 5px #333; }
}

/* Всплыващее меню*/
#interactionHost {
    position                          : absolute;
    overflow                          : auto;
    padding                           : 3px;
	padding-left					  : 5px;
	margin-left 					  : -50%;
	/*margin-top						  : 3px;*/
    border                            : 1px solid #6EE38D;
    background-image                  : url(interaction.png);
    -webkit-animation-name            : greenPulse;
    -webkit-animation-duration        : 2s;
    -webkit-animation-iteration-count : infinite;
    -moz-animation-name               : greenPulse;
    -moz-animation-duration           : 2s;
    -moz-animation-iteration-count    : infinite;
    animation-name                    : greenPulse;
    animation-duration                : 2s;
    animation-iteration-count         : infinite;
	font-weight						  : normal;
}
#interactionHost ul,
#inventoryHost ul {
    display : block;
    margin  : 0;
    padding : 0;
}
#inventoryHost ul {
    width       : 170px;
}

#interactionHost li,
#inventoryHost li {
    margin          : 0;
    padding         : 0;
    margin-right    : 0px; /*10*/
    list-style-type : none;
}
#inventoryHost li {
    width: 150px;
}
#inventoryHost li a {
	color       : #aff5c1;
	font-weight: normal;
}

#inventoryHost {
    overflow          : visible; /*auto*/
    background-image  : url(column.png);
    background-repeat : repeat-y;
}

/* Блок инвентаря */
#inventoryHostWrapper {
    width       : 170px;
    left        : 10px;
    top         : 10px;
    position    : absolute;
}
#inventoryHostWrapper h2 {
    font-size      : 18px;
    width          : 150px;
    text-align     : left;
    margin         : 0;
    padding-bottom : 10px;
}

#footer {
    left              : 10px;
    top               : 10px;
    position          : absolute;
    width             : 170px;
    text-align        : left;
    font-size         : 0px;
    background-image  : url(column.png);
    background-repeat : repeat-y;
}
#footer a {
    border    : 0;
    color     : #a5c5c5;
    display   : block;
    font-size : 18px;
}
#undoStageHost {
    display: none;
}

#download a {
	position			: fixed;
	right				: 10px;
	bottom				: 5px;
	color				: grey;
}
