/*
		Default puzzle styling
	*/
body {
    font: 62.5%/1.3em Helvetica, sans-serif; /*шрифт*/
    color: Black;
    font-weight: normal;
    width: 100%; /*ширина контента*/
    margin: 10px auto; /*отступы со сторон страницы*/
    background-color: White; /*Цвет фона*/
    background-image: url("../img/background.img");
}
	
table { 
	border-collapse: collapse; 
	border-spacing: 0; 
	max-width: 100%;
    border-radius: 10px;
}
	
table tr{
	width: 100%;
}

table td {
    width: 8.00em; /*ширина клетки*/
    height: 3.20em; /*высота клетки*/
    border-width: 3px; /*стиль рамки таблицы*/
    border-style: outset;
    border-color: Pink;
    padding: 1px; /*отступы между клетками*/
    margin: 0;
    background-color: Plum; /*цвет неиспользуемых клеток*/
    position: relative;
}

td input {
    width: 100%; /*ширина текстового поля внутри клетки*/
    height: 100%; /*высота текстового поля внутри клетки*/
    padding: 0em;
    border: none;
    text-align: center;
    font-size: 2.50em; /*размер текста в текстовом поле*/
    color: MediumSlateBlue; /*цвет текста в текстовом поле*/
    background-color: #F4F4F4; /*цвет фона в текстовом поле*/
    font-weight: normal;
}

td input:focus {
    background-color: #FFFFC0; /*цвет фона в выделенном текстовом поле*/
}

td span {
    color: Purple; /*цвет номеров слов в клетках кроссворда*/
    font-size: 1.20em; /*размер номеров слов в клетках кроссворда*/
    position: absolute;
    top: -1px; /*отступ сверху номеров слов в клетках кроссворда*/
    left: 1px; /*отступ слева номеров слов в клетках кроссворда*/
}

input.done {
    font-weight: bold; /*стиль шрифта правильно заполненного слова*/
    color: DarkViolet; /*цвет шрифта правильно заполненного слова*/
}

.active,
.clues-active {
    background-color: #FFFFC0; /*цвет выделения вопроса и ячеек для заполнения*/
}

.clue-done {
    color: #999999; /*цвет шрифта отвеченного вопроса*/
    text-decoration: line-through;
}

#puzzle-wrapper {
    float: right; /*положение кроссворда*/
    width: 50%; /*ширина блока кроссворда*/
    margin-right: 1%; /*отступ вопросов от кроссворда справа*/
    margin-top: 6%;
}

#puzzle-clues {
    float: left; /*положение вопросов*/
    width: 40%; /*ширина блока вопросов*/
}

#puzzle-clues li {
    font-size: 1.30em; /*размер шрифта вопросов*/
    margin: 0.30em; /*отступ вопросов друг от друга*/
    line-height: 1.50em; /*высота блока, в который записан вопрос*/
    list-style-type: none;
}