body {
	@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic-ext,cyrillic);
	font-family: 'Roboto', sans-serif;
	text-align: justify;
	text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
	line-height: 1.6;
	color: #CCCCCC;
	
	background: gray;
	/* NEW VERSION*/
	/* background: 
    /* -webkit-linear-gradient(rgba(5, 610, 255, 0.4), rgba(135, 60, 255, 0.0) 80%),
    /* -webkit-linear-gradient(-45deg, rgba(120, 155, 255, 0.9) 25%, rgba(255, 160, 65, 0.9) 76%);*/
	/* Местоположение фоновой картинки */
	background-image: url(pictures/fon.jpg);
	/* Фоновое изображение выровнено по центру в горизонтальной и вертикальной плоскостях */
	background-position: center center;      
	/* Фон не повторяется */
	background-repeat: no-repeat;      
	/* Фон зафиксирован в области просмотра и потому не двигается, когда высота контента превышает высоту изображения */
	background-attachment: fixed;      
	/* Это свойство заставляет фон менять масштаб при изменении размеров содержащего его контейнера*/
	background-size: cover;      
	/* Цвет фона, который будет отображаться при загрузке фоновой картинки*/
	/*background-color: #666666;*/
	background-color:#2a2a2a;
	}
	h3	{/*заголовок хедера серого цвета*/
	width: 960px; /*ширина основного блока*/
	height: auto; /*высота для наглядности*/
	margin: 0 auto; /*задаем отступ слева и справа auto, чтобы сработал align по центру*/
	font-family: 'Roboto', sans-serif;
	letter-spacing: 10px;
	color: #CCCCCC;
	font-size: 18pt;
	text-align: center;
	text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
	/*background: url("pictures/ANY.jpg")*/
	}
h4	{/*заголовок футера серого цвета*/
	width: 960px; /*ширина основного блока*/
	height: auto; /*высота для наглядности*/
	margin: 0 auto; /*задаем отступ слева и справа auto, чтобы сработал align по центру*/
	font-family: 'Roboto', sans-serif;
	letter-spacing: 10px;
	color: #CCCCCC;
	font-size: 34pt;
	text-align: center;
	text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
	/*background: url("pictures/ANY.jpg")*/
	}
h5	{/*параметры текста на странице*/
	font-family: 'Roboto', sans-serif;
	font-size: 12pt;
	font-weight: normal;
	color: #CCCCCC;
	padding-left: 20px;
	padding-right: 20px;
	}
div	{
	width: 960px; /*ширина основного блока*/
	/*min-height: 640px; max-height: auto%;*/
	height: auto; /*высота для наглядности*/
	margin: 0 auto; /*задаем отступ слева и справа auto, чтобы сработал align по центру*/
	}
a	{
	color: #EE0000; /* Цвет обычной ссылки */ 
	text-decoration: none; /* Убираем подчеркивание у ссылок */
	}
a:hover	{
	color: white; /* Цвет ссылки при наведении на нее курсора мыши */  
	text-decoration: underline; /* Добавляем подчеркивание */
	}
a:visited {
	color: grey; /* Цвет посещённой ссылки */
	} 
q	{
	quotes: "«" "»" '"' '"' /*делаем главными кавычки в виде двойных угловых скобок*/
	}
.otstup {
	margin: 20px 20px 20px 20px;
	/*border: 1px solid gray*/ }
.audio-container {
  display: flex;
  justify-content: center;
  align-items: center 
}

/*приклеиваем хедер и футер*/	
#header { position: fixed; left: 0px; top: 0px; right: 0px; height: 40px; background: url("pictures/div.png") repeat}
#footer { position: fixed; left: 0px; bottom: 0px; right: 0px; height: 40px; background: url("pictures/div.png") repeat}
#content { position: fixed; left: 0px; top: 92px; right: 0px; bottom: 88px; overflow: auto; }
/*приклеиваем хедер и футер*/	

/*вертикальное меню на CSS3*/
ul.sidenav {
	font-size: 22px; /*размер шрифта заголовка меню*/
	float: left;
    width: 420px;
    margin: 20px 0px 20px 20px; /*поля вокруг таблицы*/
    padding: 0;
    list-style: none;
    background: #CC0000;
    border-bottom: 1px solid #AA0000;
    border-top: 1px solid #EE0000;}
ul.sidenav li a{
    display: block;
    color: #fff;
    text-decoration: none;
    width: 349px; /*ширина открывшегося пункта меню*/
    padding: 1px 35px 0px 35px; /*поля внутри открывшегося пункта меню*/
    background: #CC0000;
    border-top: 1px solid #EE0000;
    border-bottom: 1px solid #AA0000;}
ul.sidenav li a:hover {
    background: #AA0000;
    border-top: 1px solid #EE0000;}
ul.sidenav li span{
	display: none;}
ul.sidenav li a:hover span {
    display: block;
	font-size: 16px; /*размер шрифта в открывшемся пункте меню*/
    padding: 10px 10px;}
/*вертикальное меню на CSS3*/

/*игра Пятнашки*/
#reset {
	border: solid 1px gray;
	background-color: #2a2a2a;
	color: gray;
	margin-top: 5px;
}
	
td {				
	text-align: center;				
	font-family: Times New Roman;
	color: gray;
	vertical-align: middle;				
}
#box td {
	border: solid 1px gray;
	text-align: center;
	font-size: 40px;
	font-family: Times New Roman;
	color: gray;
	width: 55px;
	height: 55px;
}

#box td:hover {
	color: white;
	cursor: hand;
	cursor: pointer;
}
/*игра Пятнашки*/

/*игра Лабиринт*/

canvas {
    border: 6px double black;
    background: white;
}
button {
    padding: 8px;
}
/*игра Лабиринт*/