body, input, button {
	font-family: 'Ubuntu', sans-serif;
	background: black;
}

.er-bg {
	background: url(../asset/images/bg.jpg) center center;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	opacity: 0.7;
}

#app {
	width: 900px;
	margin: 0 auto;
	background: white;
	z-index: 5;
	position: relative;
	box-shadow: 0 0 20px rgba(0,0,0,0.7);
}

.er-logo {
	width: 64px;
	height: 64px;
	background: url(../asset/images/logo_64.png);
}

.er-name {
	color: #aaa;
}

.er-cite {
	font-size: 15px;
	color: #aaa;
	padding-top: 3px;
}

.er-table-letters {
	width: auto;
	margin-bottom: 0;
}

.er-table-letters td {
	height: 38px;
	vertical-align: middle;
	padding: 2px;
	position: relative;
}

.er-table-letters td input {
	width: 39px;
	height: 39px;
	text-align: center;
	text-transform: uppercase;
	border: 1px solid #cccccc;
	font-size: 24px;
	font-weight: bold;
	color: #555;

	z-index: 100;
	position: relative;
	background: transparent;
}

.er-table-letters-actions {
	margin-right: 2px;
}
.er-table-letters-actions button {
	height: 39px;
}

.er-table-letters-actions button:disabled {
	cursor: not-allowed;
}

.er-table-main {
	margin-bottom: 0;
}

.er-table-main td {
	text-align: center;
	padding: 2px;
	position: relative;
}

.er-table-main td input {
	width: 39px;
	height: 39px;
	text-align: center;
	text-transform: uppercase;
	border: 1px solid #cccccc;
	font-size: 24px;
	color: #555;

	z-index: 100;
	position: relative;
	background: transparent;
}
.er-table-main td input::selection {
	background: #000;
	color: gray;
}
.er-table-main td input::-moz-selection {
	background: #000;
	color: gray;
}

.er-table-main .cell-7-7 {
	background-color: #fff8eb;
}

.er-list-words {
	height: 350px;
	overflow-y: scroll;
}

.er-list-words li {
	cursor: pointer;
}

.er-list-saves {
	height: 338px;
	overflow-y: scroll;
}

.er-list-saves li {
	cursor: pointer;
}

.er-table-main .bonus-l2:before,
.er-table-main .bonus-l3:before,
.er-table-main .bonus-w2:before,
.er-table-main .bonus-w3:before {
	position: absolute;
	text-align: center;
	font-size: 10px;
	top: 1px;
	left: 0;
	right: 0;
	z-index: 10;
	color: #000000;
	opacity: 0.2;
}
.er-table-main .bonus-l2:before,
.er-table-main .bonus-l3:before {
	content: 'буква';
}
.er-table-main .bonus-w2:before,
.er-table-main .bonus-w3:before {
	content: 'слово';
}
.er-table-main .bonus-l2:after,
.er-table-main .bonus-l3:after,
.er-table-main .bonus-w2:after,
.er-table-main .bonus-w3:after {
	position: absolute;
	text-align: center;
	font-size: 15px;
	bottom: 1px;
	left: 0;
	right: 0;
	z-index: 10;
	opacity: 0.2;
}
.er-table-main .bonus-l2:after,
.er-table-main .bonus-w2:after {
	content: 'x2';
	color: #fd00ff;
}
.er-table-main .bonus-l3:after,
.er-table-main .bonus-w3:after {
	content: 'x3';
	color: #1900ff;
}

.let-cost-1:before,
.let-cost-2:before,
.let-cost-3:before,
.let-cost-4:before,
.let-cost-5:before,
.let-cost-6:before,
.let-cost-7:before,
.let-cost-8:before,
.let-cost-9:before,
.let-cost-10:before {
	position: absolute;
	font-size: 10px;
	top: 2px;
	line-height: 10px;
	right: 4px;
	z-index: 10;
	opacity: 0.2;
	text-align: right;
}

.let-cost-1:before {
	content: '2';
}
.let-cost-2:before {
	content: '2';
}
.let-cost-3:before {
	content: '3';
}
.let-cost-4:before {
	content: '4';
}
.let-cost-5:before {
	content: '5';
}
.let-cost-6:before {
	content: '6';
}
.let-cost-7:before {
	content: '7';
}
.let-cost-8:before {
	content: '8';
}
.let-cost-9:before {
	content: '9';
}
.let-cost-10:before {
	content: '10';
}