* { 
	margin: 0;                           /* обнул¤ютс¤ отступы снаружи элементов*/
	padding: 0;                           /* обнул¤ютс¤ отступы внутри элементов */
}

h3{
	text-align:center;
}

html { height: 100%; }    
/*
=======================================
Подключаемые шрифты
=======================================
*/
/*@font-face {
    font-family: 'note_thisregular';
    src: url('fonts/Note_this-webfont.eot');
    src: local('note_thisregular'),
		 url('fonts/Note_this-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Note_this-webfont.woff') format('woff'),
         url('fonts/Note_this-webfont.ttf') format('truetype'),
         url('fonts/Note_this-webfont.svg#note_thisregular') format('svg');
    font-weight: normal;
    font-style: normal;

}*/

body {
	height: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	color: #625A5A;
	background: #aab3d4;/* #e0e0e0; *//* rgb(74, 90, 19); *//*rgb(128, 12, 64);*/
	overflow-y: scroll; /* Добавлено для того, чтобы страница не дергалась при появлении полосы прокрутки */
}

/*
========================================
Вспомогательные классы
========================================
*/
.hidden{
	display:none;
}
/*
========================================
Основные свойства
========================================
*/


body a{
	color: #625A5A;
}

#page-wrapper {
	margin: 0 auto;

}
#wrapper {
	margin: 0 auto;	
	padding-left:15px;
	padding-right:15px;
	padding-bottom:15px;
	width:1200px;
	background: #FFFFFF !important;
}

/*
==========================================
Футер и его содержимое
==========================================
*/
#footer {
	min-height: 80px;
	margin-top:15px;
}
#sfedu{
	float:left;
	margin: 15px;
}
#sfedu img {
	width:50px;
}
#copyrights {
	float:right;
	/* color: white; */
	/*font-weight:bold;*/
	margin: 15px;
}
#copyrights a {
	text-decoration:none;
	/* color: white; */
}
/*
==========================================
Заголовок и его содержимое
==========================================
*/
#header {
	/*background:rgba(128, 12, 64, 0.84);*/
	min-height:35px;
	margin:0px;
	padding: 3px;
	color: #000/* white */;
	/*clear: both;*/
}
#logo {
	float: left;
	/*margin-top:5px;*/
	margin-left:10px;
}

#logo span{
	font-weight:bold;
	font-size:1.5em;
}
/*
>>>>>>>>>>>>>>>>>>>>
Верхнее горизонтальное меню
<<<<<<<<<<<<<<<<<<<<
*/
#navigation {
	float:right;
}

#navigation ul {
	list-style-type:none;
	margin-top:0.5em;
}

#navigation li {
	float:left;
	padding-left:5px;
	padding-right: 5px;
	font-size:0.8em;
	
}
#navigation li a{
	text-decoration:none;
	color:#000;/* white */;
	padding: 5px;
}
#navigation li a:hover{

	color:rgb(74, 90, 19);
	background-color:white;	
}
/*Если черта с помощью border для верхнего меню:
li {
display:inline;
border-left:1px solid #bbb;
padding:0 2px 0 4px;
}
li:first-child {
border:none;
}
*/

.active {/*класс для выбранного пункта верхнего основного меню*/
	color:rgb(74, 90, 19) !important;
	background-color:white;	
}
#other{
	float:left;

}

#other ul {
	list-style-type:none;
	margin:0px;
	padding: 0px;
}

#other li {
	float:left;

	/*padding-right: 5px;*/
	margin-right:3px;

	/*border-right: 1px solid;*/

}

#other li a {
	background-color:rgba(198, 140, 77, 0.15);
	padding:5px;	
	text-decoration:none;
	color:rgba(43, 32, 20, 0.9) ;
	font-weight:bold;
}

#other li a:hover{
	color:white;
	background-color:rgba(43, 32, 20, 0.9) ;
}
div#other li.smodul a{
	background-color:rgba(43, 32, 20, 0.9)  !important;
	color:white !important;
}
/*
====================================================
Меню модулей - справа над областью упражнений
====================================================
*/
#modules{
	float:right;
}

#modules ul {
	list-style-type:none;
	margin:0px;
}

#modules li {
	float:left;

	/*padding-right: 5px;*/
	margin-left:3px;

	/*border-right: 1px solid;*/

}

#modules li a {
	background-color:rgba(198, 140, 77, 0.15);
	padding:5px;	
	text-decoration:none;
	color:rgba(43, 32, 20, 0.9) ;
	font-weight:bold;
}

#modules li a:hover{
	color:white;
	background-color:rgba(43, 32, 20, 0.9) ;
}
div#modules li.smodul a{
	background-color:rgba(43, 32, 20, 0.9)  !important;
	color:white !important;
}
/*
====================================================
Меню юнитов - слева
====================================================
*/
#units1{
	/* background: rgba(176, 222, 19, 0.16); */
	background: #30303c;
    
}

#units1 a{
	color: #fff;	
}
#units1 li a:hover{
	color: rgb(228, 73, 60);
}
#units1 h1{
	color: rgb(220, 113, 65);
}

div[id^="units"] {
	float:left;
	width: 250px;
	padding:10px;
	box-sizing: border-box;
	border-radius: 5px;
	box-shadow: 0 0 10px #e0e0e0;
	display: table-cell;
}
div[id^="units"] h1 {
	
	margin-top:10px;
}
div[id^="units"] ol {
	list-style:none;
	counter-reset: li;
}
div[id^="units"] li {
	min-height: 35px;
	position: relative;
	margin-bottom: 1.5em;
	border-left: 1px solid gray;
	padding: 0.6em;
	border-radius: 4px;
	left: 40px;
	width: 185px;
	
}
div[id^="units"] li:before{
	position: absolute;
	top: -0.2em;
	left: -1em;
	padding-left: 0.4em;
	padding-right: 0.4em;
	font-size: 4em;
	font-weight: bold;
	color: #ececec;
	counter-increment: li;
	content: counter(li);
}
#units li a{
	text-decoration:none;
}
.selected {/*класс для выбранного юнита*/
	font-weight:bold;
}

div[id^="units"] a {
	text-decoration:none;
}
.selected span {
	font-weight:normal;
	padding-left:10px;
}
#units1 li.selected >a {
	color: rgb(228, 73, 60) !important;
	font-size: 1.2em;
}
#units1 .selectedTask  a{
	font-weight:bold !important;
	color: rgb(226, 124, 115) !important;
}

/*
==============================================================
Тело юнита body_unit. Состоит из нескольких контейнеров task, 
содержащих заголовк taskHeader, контейнер для аудио-записи audioTask, 
скрипт script, тело задания bodyTask
==============================================================
*/
#content {
	float:left;
	width:900px;
	box-sizing: border-box;
	border-radius: 5px;
	box-shadow: 0 0 10px #e0e0e0;
	display: table-cell;
	margin-left:20px;
	
}

div[id^="body_unit"] {
	padding-left:10px;
	padding-right:10px;
	/* margin:0 2%; */
	padding-bottom:2%;
	/* min-height:465px; */
	position: relative;
}
/*
>>>>>>>>>>>>>>>>
Заголовок задания
<<<<<<<<<<<<<<<<
*/
.taskHeader {
	min-height: 50px;
	text-align:center;
	/* padding:5px; */
	margin-top: 15px;
	width:100%;
}

.taskHeader div{
	box-sizing:border-box;
	padding:10px;
	background: rgba(226, 124, 115,0.3);
	
}
.taskHeader span{
	width: 40em;
	margin: 0 auto;
	color:#625A5A;
	font-family: Georgia, 'Times New Roman', Times, serif !important;
	font-size:1.3em;
	font-style:italic;
	padding-top:10px;
	min-height:2.1em;
	white-space:normal;
}
div.taskHeader strong{
	/*text-decoration: underline;*/
	font-weight: bold;
	color:#30303c;
}
.taskHeader span {
	white-space:normal !important;
}
/*
>>>>>>>>>>>>>>>>>
Аудио-задание
<<<<<<<<<<<<<<<<<
*/
.audioTask{
	margin-left: 200px;
}
/*
>>>>>>>>>>>>>>>>>
контейнер скриптов для аудио-заданий
<<<<<<<<<<<<<<<<<
*/
fieldset[class^="script"] p{
	margin: 10px;
	line-height:1.5em;	
	text-align: justify;	
}
fieldset[class^="script"]{
/*	font-size:1em;*/
  	border: none;
	/*background: rgba(252, 221, 231, 0.2);	*/
}
fieldset[class^="script"] legend{
  padding: 0;
  border: 1px solid lightgray;
}
fieldset[class^="script"] button {
	background:transparent;
	border:none;
	padding: 0 1em;
}
/*
>>>>>>>>>>>>>>>>>
Тело задания
<<<<<<<<<<<<<<<<<
*/
.bodyTask{
	padding:10px;
	margin-top: 10px;
	margin-bottom:20px;
}
.bodyTask p{
	line-height: 1.7em;
	margin-bottom:1.7em;
	text-align:justify;
}

.bodyTask_c{
	padding:10px;
	margin-top: 10px;
	margin-bottom:20px;
	box-sizing: border-box;
}
.bodyTask_c p{
	line-height: 1.7em;
	margin-bottom:1.2em;
	text-align:justify;
}

.bodyTask_c h3{
	margin-bottom:10px;
}
.author img{
	width:100px;
}
#bodyModul{
	margin: 20px auto auto;
	display: table;
}
#modulName {
	padding:0px;
	margin:0px;
}

#modulName img {
	margin-top: 10px;
	margin-bottom: 10px;
}

/*---------------*/

/*
===========================================
css-свойства контейнера упражнений directTask
===========================================
*/
div[id^="directTask"]{
	margin:20px auto auto;
	/* min-height:400px; */
	width:93%;
}
div[id^="directTask"] p{
	line-height: 2em;
}
div[id^="directTask"] input{
	border-bottom:1px dotted;
	border-top:none;
	border-left:none;
	border-right:none;
	background: transparent;
}
div[id^="directTask"] span{
	white-space:pre;
}
div[id^="directTask"] ol li {
	margin-bottom:5px;
}

div[id^="directTask"] ol li ul {
	list-style-type: none;
}
/*
============================================
Навигация внутри упражнений. Кнопки "Prev", "Next"
============================================
*/

div.bottom_nav{
	position:absolute;
	bottom:10px;
	display: table;
	width:96%;
	/* right: 10px; */
	left: 20px;
}
div.bottom_nav>div{
	display:table-row;
}
div.bottom_nav div div{
	display:table-cell;
}
div.bottom_nav div:first-child{
	text-align:left;
}
div.bottom_nav div:last-child{
	text-align:right;
}
div.bottom_nav div div a{
	text-decoration:none;
	font-size:1.2em;
}
/*
============================================
Размеры текстовых полей
============================================
*/


.input_small input {
    width: 56px;
}

.input_small2 input {
    width: 90px;
}

.input_middle input{
	width:130px;
}

.input_middle2 input{
	width:150px;
}
.input_normal input{
	width:169px;
}
.input_middle3 input{
	width:180px;
}

.input_large input{
	width:200px;
}

.input_large2 input{
	width:240px;
}

.input_large3 input{
	width:300px !important;
}

.input_large4 input{
	width:340px;
}

.input_large5 input{
	width:400px;
}

.input_large6 input{
	width:480px;
}
/*
============================================
Селекторы скриптов
============================================
*/
.N {color: red; font-weight: bold;}
.Y {color: green; font-weight: bold;}

.exsmess{
	margin-top:15px;
	height:1.5em;
}
/*
============================================
Всплывающие подсказки
============================================
*/
.tooltip {
	text-decoration: none;
}
/*
============================================
Тип упражнения exs4.1. Упорядочивание с перетаскиванием в области 
============================================
*/
div[type_ex="4_1"].words-container { /*если контейнер горизонтальный*/
	margin:10px;
	width:170px;

}

div.area div.cntrl span{
	line-height: 1.8em;
	clear: both;
	float: left;
	cursor:pointer;	
}

div[type_ex="4_1"] div.words-container div{ /*если контейнер горизонтальный*/
	white-space: normal;
	margin:0;
	padding:5px;
	cursor:default;
}
div[type_ex="4_1"] div.words-container div:nth-child(2n){
	background: #ececec;
}

div[type_ex="4_1"] div.words-container{/*если контейнер горизонтальный*/
	padding:0;
}

div.container{
	display:table-column;
	float:left;
	padding-top:20px;
	margin-bottom:10px;
}
div[type_ex="4_1"] div.containerTitle{
	font-weight:bold;
	text-align:center;
	margin-left:10px;
	display:table-cell;
	vertical-align:bottom;
	height:2.5em;
	margin-top:5px;
}
div.container div.words-container{/*если контейнер вертикальный с заголовком*/
	display:table-cell;
	margin:5px 20px 0 0;
	padding-top: 10px;
	padding-bottom: 10px;
	min-height:250px;
}
div[type_ex="4_1"].item{
	display:table-row;
	width:170px;
	float:left;
	margin:5px;
}
div.area{
	display:table;
	margin-left:35px;
	padding-top: 20px;
}
div[type_ex="4_1"].item div.targetTitle{
	font-weight:bold;
	/* text-align:center; */
	height:2.5em;
	display:table-cell;
	vertical-align:bottom;
	margin-left:10px; 
	padding-left:10px;
	width:165px;
}
div[type_ex="4_1"].item div.cntrl {
	/*display:table-row;*/
	width:165px;
	border: 1px solid gray;
	min-height:300px;
	margin-top:0px;
	margin-left:10px;
}

div.item[type_ex="4_1"] div.cntrl div:nth-child(2n+1){
	background: #ececec;
}
div[type_ex="4_1"].item  div.cntrl div{
	white-space: normal;
	margin:0;
	padding:5px;
	border:none !important;
	min-height:0px;
	cursor:default;
}
/*
============================================
Тип упражнения exs5.1. Упорядочивание с перетаскиванием в строку
============================================
*/
.compare {
  display: table;
	float:left;
	border-spacing: 5px;
}

.compare>div {
  display: table-row;

}
.compare div:first-child{
	width:15px;
	border:none;
}
.compare div>div {
	display: table-cell;
	width: 150px;
	height:1.2em;
	border: 1px solid gray;
	padding:5px;
	vertical-align:middle;
}

.compare div div.thcell{
	display: table-cell;
	width: 150px;
	height:1.2em;
	border: none;
	padding:5px;
	vertical-align:middle;
	text-align:center;
	font-weight:bold;
}

.words-container {
	width:150px;
	margin-top:2.5em;
	margin-left:35px;
	border: 1px solid gray;
	float:left;
	/*border-spacing: 5px;*/
	padding:5px;
	min-height:2em;
}
.words-container span{
	line-height: 1.8em;
	clear: both;
	float: left;
	cursor:pointer;
}
/*Для двойного упражнения 321*/
div[type="list321"].compare div.item div:nth-child(2){
	width:15px;
	text-align:center;
	height:1.2em;
}
div[type="list321"].compare div.item div:nth-child(3){
	width:270px;
	height:1.2em;
}
div[type="list321"].words-container{
	width:270px;
}
/*для упраднения 721*/
div[type="list721"].compare div.item div:nth-child(2){
	width:15px;
	text-align:center;
	height:1.2em;
}
div[type="list721"].compare div.item div:nth-child(3){
	width:350px;
	height:1.2em;
}
div[type="list721"].words-container{
	width:340px;
	margin-top:0.5em;	
}
div[type="list721"].compare div.item div:nth-child(3) span{
	white-space:normal;
}
div[type="list721"].words-container span{
	white-space:normal;
}

/*для упражнения с сортировкой по номерам*/

div[type="list-sort"].compare div.item div:nth-child(2){
	width:10px !important;
	text-align:center;
	height:1.2em;
}
div[type="list-sort"].compare div.item div:nth-child(3){
	width:700px;
	height:1.2em;
}
div[type="list-sort"].compare div.item div:nth-child(3) span{
	white-space:normal;
}

/*для горизонтального упражнения, когда столбец для перетаскивания впереди*/
div[type="list2"].compare div.item div:nth-child(3){
	width:570px;
}
div[type="list2"].compare div.item div:nth-child(3) span{
	white-space:normal;
}
div[type="list3"].compare div div:nth-child(3){
	width:150px;
}
div[type="list3"].compare div div:nth-child(3) input{
	width:150px;
}

div[type="list4"].compare {
	width:790px;
	margin: auto;
}
div[type="list4"].compare div.item div:nth-child(3){
	width:530px;
}
div[type="list5"].compare div.item div:nth-child(3){
	width:360px;
}
div[type="list5"].compare div.item div:nth-child(2){
	width:360px;
}
div.compare span{
	white-space:normal !important;
}
/*упражнение на расстановку строк по порядку*/
div[type="list322"].compare div.item div:nth-child(2){
	width:15px;
	text-align:center;
	height:1.2em;
}
div[type="list322"].compare div.item div:nth-child(3){
	width:650px;
	height:1.2em;
}
div[type="list322"].words-container{
	width:683px;
	margin-top:0.5em;	
	min-height:100px;
}
div[type="list322"].compare div.item div:nth-child(3) span{
	white-space:normal;
}
div[type="list322"].words-container span{
	white-space:normal;
	margin-bottom:10px;
}
div.words-container[type="list322"] span:nth-child(2n+1){
	font-weight:bold;
}
/*
============================================
Тип упражнения exs5.2. Упорядочивание с перетасвианием в строку и переводом
============================================
*/
div.compare div[layout="h"]{
	width:200px !important;
}
div.compare div[layout="h"] input{
	width:200px !important;
}
div.words-container[layout="v"]{
	margin-top:0px;
	width:735px;
	min-height:1.2em;
}
div.words-container[layout="v"] span{
	clear:none;
	margin-left:20px;
	margin-right:20px;
}
div.words-container[layout="v"] span:nth-child(2n+1){
	font-weight:bold;
}
div.compare div[layout="v"]{
	width:400px !important;
}
div.compare div[layout="v"] input{
	width:400px !important;
}
/*Упражнение 335*/

/*
============================================
УПРАЖНЕНИЯ В ВИДЕ ТАБЛИЦ 
============================================
*/
.table{
	display:table;
	margin-bottom: 20px;
}
.tr , .tr_1{
	display:table-row;
}

.tr>div, .tr_1>div{
	display:table-cell;
	line-height:1.6em;
	padding:0 4px 10px 4px;
/*	border:1px solid gray;*/
}

/*
============================================
УПРАЖНЕНИЯ В ВИДЕ ТАБЛИЦ. Границы
============================================
*/

/*	.border - границы во всех ячейках кроме первой (с маркером)) */
.border, .border_all {							
	border-collapse: collapse;
}

div.border .tr>div, div.border_all .tr>div, div.border .tr_1>div, div.border_all .tr_1>div{
	border-style: solid;
	border-width: 1px;
	padding:5px;
}

div.border form.tr>div, div.border_all form.tr>div {
	border-top: 0;
	
}
div.border .tr>div:first-child , div.border .tr_1>div:first-child{			/*	Убрать границы в первой ячейке (с маркером) */
	border-style: none;
}

.no_border div {							
	border-style: none !important;
}
/*
============================================
УПРАЖНЕНИЯ В ВИДЕ ТАБЛИЦ. Строки с маркерами 
============================================
*/
/*	.mark - строка с маркером и с номером */
/*	.mark_no_N - строка с маркером, но без номера */
/*	.N_no_mark - строка без маркера, но с номером */
/*	.mark_chb - строка с маркером, чекбоксом и номером */

.mark div:first-child, .mark_no_N div:first-child, .mark_chb  div:first-child {
	width:20px;
	padding:0 ;
}
.N_no_mark  div:first-child {
	width:20px;
	padding:0;
	text-align:right;
}

.mark div:nth-child(2), .mark_chb  div:nth-child(3) {
	width:20px;
	text-align:right;
}

/*
============================================
УПРАЖНЕНИЯ В ВИДЕ ТАБЛИЦ. Оформление блока из нескольких  таблиц, стоящих в одной линии
============================================
*/
.center {
	margin: auto;
	margin-bottom: 20px;
}

.tbgroup::before,
.tbgroup::after {
  content: "";
  display: table;
}
.tbgroup::after {
  clear: both;
}
.tbgroup {
  display: table;
	clear: both;
}
.left, .left1, .left2 {
	float: left;
}
div.left1   div.tr div:last-child{
	border-right-style: none;
}
.left div:first-child  div:last-child{
	border-right-style: none;
}


/*
============================================
УПРАЖНЕНИЯ В ВИДЕ ТАБЛИЦ. Особые выравнивания в ячейках
============================================
*/

.last_cell_bottom .tr div:last-child {
	vertical-align: bottom;
}

.last_cell_top .tr div:last-child {
	vertical-align:top;
}
/*
============================================
Элементы оформления  
============================================
*/
div.wh_sp span{
	white-space:pre;
}
.tb_help{
	width: 70%;
	border-style: solid;
	border-width: 1px;
	margin: auto;
	background-color:rgba(128, 12, 64, 0.25);
	font-weight:bold;
}
.tb_help td {
	padding: 3px;
}
ul.exs_7_1 {
	line-height:1.7em;
}

.items_select {
	line-height:1.7em;
	width: 80%;
	border-style: solid;
	border-width: 1px;
	margin: 0 auto 20px;
	background-color:rgba(128, 12, 64, 0.25);
	
}

div.lyric  p{
	line-height:1.4em;
}

.box_help{
	border-style: solid;
	border-width: 1px;
	margin-top: 40px;
	padding-left: 8px;
	background-color:rgba(128, 12, 64, 0.25);
	font-weight:bold;
}
div.box_help  p{
	line-height:1em;
}
/*
============================================
Тип упражнения exs2.1 
============================================
*/
div.exs2_1 span{
	white-space:pre;
}

.mark_2_1 {
	height:1.2em;
	position: relative;
	top: -2px;
}

div.exs2_1 :nth-child(2){
	margin-top: 0;
}

.exs2_1 p {
	margin-bottom: 1.7em;
}
/*
============================================
Тип упражнения exs2.5
============================================
*/

.text_th {
	font-weight:bold;
	text-align:center;
}

/*
============================================
Тип упражнения exs2.7
============================================
*/
.style_th {
	background-color:rgba(128, 12, 64, 0.20);
}

.example {
	font-weight:bold;
}

.text_2_7 .tr div:last-child, .text_st_2_7 {
	font-style: italic;
	font-weight:bold;
}
/*
============================================
Тип упражнения exs2.8
============================================
*/
.head_2_8{
	background-color:rgba(128, 12, 64, 0.80);
	margin-bottom: 20px;
	line-height:2em;
	text-align:center;
	font-weight:bold;
	font-size:1.3em;
	color: #FFFFFF;
}
.tr_2_8::before,
.tr_2_8::after {
  content: "";
  display: block;
}
.tr_2_8::after {
  clear: both;
}
.tr_2_8 {
  display: block;
	clear: both;
}
.first_level{
	margin-bottom: 4px;
	font-weight:bold;
	font-size:1.2em;
	line-height:2em;
	color: #FFFFFF;
}
.first_level>div div{
  float: left;
	background-color:rgba(128, 12, 64, 0.50);
}
.first_level>div:first-child div{
  background-color:rgba(245, 214, 141, 0.9);
}
.first_level>div:last-child div{
  background-color:rgba(4, 156, 255, 0.5);
}
.first_level>div:first-child div:first-child{
  margin-left: 0;
}
.input_2_8 input{
	width:152px;
	margin-right: 7px;
	padding:0;
}
.N_2_8  {
	width:30px;
	margin-left:16px;
	padding-left:5px;
}
.second_level>div {
  float: left;
}
.second_level{
	line-height:2em;
	margin-bottom: 20px;
	font-size:0.9em;
}
.col div div{
	float: left;
	padding-bottom: 5px;
	padding-top: 5px;
}	
.col>div div:first-child{
  width:38px;
	padding-left:5px;
}
.col {
	width:220px;
}
.col_1 {
	background-color:rgba(245, 214, 141, 0.5);
}
.col_2 {
	margin-left: 384px;
}  
.input_2_8_1 input{
	width:170px;
	margin-right: 7px;
	padding:0;
}
.subcol_1 div {
	background-color:rgba(4, 156, 255, 0.20);
}
.subcol_2 div {
	background-color:rgba(4, 156, 255, 0.10);
}

/*
============================================
Тип упражнения exs6.1 и exs6.2
============================================
*/
.switches_h label{
	width: 100px;
	margin-left: 60px;
  float: left;
}
.switches_h::after {
  clear: both;
}
.switches_v {
	margin-left: 15px;
}
.switches_v p{
	line-height: 1.5em !important;
	margin-top: 0;
	margin-bottom: 0;
}
/*
============================================
Тип упражнения exs3.1
============================================
*/

.selector_small {
	width: 40px;
}
.selector_normal {
	width: 169px;
}
/*
============================================
Тип упражнения exs3.1
============================================
*/

.selector_small {
	width: 40px;
}
.selector_normal {
	width: 169px;
}

/*
============================================
Тип упражнения exs3.2
============================================
*/
div[type="exs3_2"] .cntrlM {
	line-height: 1.7em;
	padding-left: 5px;
	padding-right: 5px;
}
.order .cntrl {
	width: 460px;
	margin: auto;
	border: 1px solid;
}
div[type="exs3_2"] .cntrl {
	width: 460px;
	margin: auto;
	border: 1px solid;
}
.order_btns {
	margin: auto;
	margin-top: 10px;
	font-size:0.8em;
	color: RGB(20, 20, 20);
}
.order_selected {
	background-color: RGB(220, 220, 220);
}

div.order_btns input{
	border:1px solid;
	background-color: RGB(240, 240, 240);
	margin-left: 2px;
	margin-right: 2px;
	width: 30px;
}
/*
============================================
body_common - css для меню и тела страниц из раздела common
============================================
*/
#common{ /*07.10.2016 три стиля для units7*/
	background: #30303c;
}

#common a{
	color:white;
}

#common li a:hover{
	color: rgb(228, 73, 60);
}
div[id^="common"] {
	float: left;
	width: 250px;
	padding: 10px;
	box-sizing: border-box;
	border-radius: 5px;
	box-shadow: 0 0 10px #e0e0e0;
	display: table-cell;
}
div[id^="common"] h1 {
	margin-top:10px;
}
div[id^="common"] ol {
	list-style:none;
	counter-reset: li;
}
div[id^="common"] li {
	min-height: 35px;
	position: relative;
	margin-bottom: 1.5em;
	border-left: 1px solid gray;
	padding: 0.6em;
	border-radius: 4px;
	left: 40px;
	width: 185px;
}
div[id^="common"] li:before{
	position: absolute;
	top: -0.2em;
	left: -1em;
	padding-left: 0.4em;
	padding-right: 0.4em;
	font-size: 4em;
	font-weight: bold;
	color: #ececec/* #9c4848 *//* #4a5a13 */;
	counter-increment: li;
	content: counter(li);
}
#common li a{
	text-decoration:none;
}


#common li.selected >a {
	color: rgb(228, 73, 60) !important;
}
#common .selectedTask  a{
	font-weight:bold !important;
	color: rgb(43, 32, 20) !important;
}

div[id^="body_common"] {
	width: 98%;
/* 	padding-left: 10px;
	padding-right: 10px; */
	margin: 0 2%;
/* 	padding-bottom: 2%; */
	/* min-height: 465px; */
	position: relative;
}


/* .common_content {
	float:left;
	width:80%px;
	margin:0 1%;
	padding:20px;
} */
/*
============================================
Меню about - css для блока автора
============================================
*/
.author {
	display:table;
	padding: 0;
    border-spacing: 5px;
}
.author div{
	display: table-row;
	
}
.author div>div {
	display:table-cell;
	vertical-align:top;
	text-align:justify;
}
.author img {
	float:left;
}

/*
=============================================
для титульной страницы
=============================================
*/
#textBook{
	text-align:center;
	background-image: url(../images/title.png);
	height:200px;
	font-size:3em;
	color: white;
	font-weight:bold;
	padding:20px;
	box-sizing: border-box;
	margin: 20px;
}

#textBook>div {
	background-color: #fff9;
	width: 100%;
	height: 100%;
}

#textBook>div  p{
	padding: 50px 20px 45px;
	font-family: Georgia, 'Times New Roman', Times, serif !important;
	color:white;
	box-sizing: border-box;
	text-shadow: 2px 2px 2px #5a5908;
}
.title_link {
	text-decoration:none;
	font-size:0.8em;
	font-weight:bold;
	margin-top:20px;
}
.title_link:hover{
	color: rgb(113, 24, 64) !important;
}

#title_a{
	background-color:rgba(250, 220, 229, 0.65);
	padding:5px;	
	text-decoration:none;
	color:rgba(128, 12, 64, 0.84);
	font-weight:bold;
}
#title_a:hover{
	background-color:rgba(250, 220, 229, 0.65) !important;
	color:rgba(128, 12, 64, 0.84) !important;
}

/*новое*/
.unit_goals {
	width:500px;
	margin: 50px auto auto;
	font-size:1.1em;
}
ul.unit_goals  li{
	margin-bottom:10px;
}

div[type="_blanck"]{
	width:98%;
	background: url(../images/blanck.png) 100%;
	background-repeat:no-repeat;
	/* background-size:contain;
	-webkit-background-size:contain;
	-o-background-size:contain;
	-moz-background-size:contain; */
	background-position:bottom;
	/* overflow: hidden; */
	margin:0;
}

#body_unit_text {
	width:98%;
	background-image: url(../images/cambridge_bg.png);
	background-repeat:no-repeat;
	background-size:contain;
	-webkit-background-size:contain;
	-o-background-size:contain;
	-moz-background-size:contain;
	background-position:bottom;
	overflow: hidden;
	margin:0;
}
#task_text{
	background-image:none !important;
}
.p_numb {
	color:#9d0704;
	/* padding-left: 0.4em; */
	/*padding-right: 0.4em;*/
	font-size: 1.4em;
	/*font-weight: bold;*/
}

.header_ul{
	text-align:left;
	list-style-type: circle;
	padding-left:25%;
	padding-right:25%;
}

/*Build Background Knowledge*/
.bbk {
	border: 1px solid #4a5a13;
	padding: 0;
    border-spacing: 0;
	border-collapse: collapse;
	width: 80%;
	margin:0 auto;
}

.bbk div.text {
	margin:10px;
}

.bbk th {
	text-align:center;
	padding:10px;
	border: 1px solid #4a5a13;
}
.table {
	display:table;
	
}

.row {
	display:table-row;
	border: inherit;
	border-collapse:inherit;
}

.cell {
	display:table-cell;
	border: inherit;
	border-collapse:inherit;
}

table.bbk {
	width: 80%;
	border: 1px solid #4a5a13;
	border-collapse: collapse;
    border-spacing: 0;
	padding: 0;
	margin:15px auto 15px;
}

table.bbk tr,td {
	border: 1px solid #4a5a13;
	padding: 10px;	
}

p.uTask {
	text-align:left;
	width:80%;
	margin:30px auto 10px;
}

p.uTask strong {
	font-weight: bold;
	color: #4a5a13;
	font-size: 1.2em;

}

/* .bodyTask_blanck{ */
	/* width: 100%; */
	/* background-image: url(../images/cambridge_bg_blanck.png); */
	/* background-repeat: no-repeat; */
	/* background-size: contain; */
	/* -webkit-background-size: contain; */
	/* -o-background-size: contain; */
	/* -moz-background-size: contain; */
	/* background-position: bottom; */
	/* overflow: hidden; */
	/* margin: 0 0 20px; */
	/* padding:0 */
/* } */

.show_text {
	position:relative;
	box-sizing: border-box;
	/* background-color: rgba(198, 140, 77, 0.05); */
	/* border: 1px solid #2b2014; */
	margin:20px;
	padding: 20px;
	
}
.show_answer {
	position:relative;
	box-sizing: border-box;
	/* background-color: rgba(198, 140, 77, 0.05); */
	/* border: 1px solid #2b2014; */
	margin:20px;
	padding: 20px;
	
}
.show_text p{
	margin-bottom: 10px;
}

.hide_text {
	position:absolute;
	right:2px;
	top:1px;
	cursor: pointer;
	
}

a.show_button {
	position:absolute;
	left:45%;
	top:1px;
  display: inline-block;
  font-family: arial,sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: rgb(68,68,68);
  text-decoration: none;
  user-select: none;
  padding: .2em 1.2em;
  outline: none;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 2px;
  background: rgb(245,245,245) linear-gradient(#f4f4f4, #f1f1f1);
  transition: all .218s ease 0s;
}
a.show_button:hover {
  color: rgb(24,24,24);
  border: 1px solid rgb(198,198,198);
  background: #f7f7f7 linear-gradient(#f7f7f7, #f1f1f1);
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
a.show_button:active {
  color: rgb(51,51,51);
  border: 1px solid rgb(204,204,204);
  background: rgb(238,238,238) linear-gradient(rgb(238,238,238), rgb(224,224,224));
  box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
}

ol.question {
	width:80%;
	margin: 10px auto 10px;
	font-weight: bold;
	color:#30303c;
	font-size: 1.2em;
}

ol.question li p{
	/* font-size:15px !important; */
	font-weight:normal !important;
	color:#625A5A;
	margin:0;
	padding:0;
}
.question[view="center"] {
	width:65% !important;
	margin: auto;
}

.taskPreamble {
	width:90%;
	box-sizing: border-box;
	margin: 0px auto 20px;
	padding:20px;
	background: rgba(210, 212, 245, 0.38); 
	border: 1px solid #2f36a0; 
}
.taskPreamble div{
	text-align:center;
}

.taskPreamble p{
	line-height: 1.7em;
	text-align:justify;
	margin-bottom:0;
}

.taskPreamble span{
	padding: 10px;
	line-height:1.7em;
}

.taskPreamble span:nth-child(2n+1) {
	font-weight:bold;
}

.taskPreamble ol, ul {
	/* font-size: 16px !important;  */
}
ol.subquestion {
	font-size: 1.0em;
}
	
.n_in_tbl {
	font-weight: bold;
	color:#4a5a13;
	font-size: 1.2em;
}
.video {
	width:640px;
	margin:0 auto;
}

.puzzle{
	/* max-width:70%; */
	margin:10px auto 10px;
}

table.puzzle td {
	width:1.2em;
	height:1.2em;
	text-align:center;
	vertical-align:middle;
}

.puzzle_words{
	width:100%;
	border:0;
	margin:10px auto 10px;
}

.puzzle_words td{
	border:0;
	text-align:center;
}

.legend{
	background: rgba(181, 188, 216, 0.28);
    padding: 5px;
    color: rgba(43, 32, 20, 0.9);
    font-weight: bold;
    text-align: center;
	margin: 40px auto 20px;
}


/*стили для раздела Contents 26-07-2017*/

/*
============================================
Меню contents
============================================
*/
.contents{
	list-style-type:none;
	width: 70%;
	margin: 0 auto;
	font-size: 19px;
}

.contents>li {
	margin-top:20px;
}
.contents ol{
	margin-left:50px;
}

.contents>li strong{
	color:#910000;
}

.contents ol li {
	font-weight: bold;
	color:#910000 !important;
	margin-top:5px;

}

.contents ol li a{
	font-size:17px !important;
	font-weight:normal !important;
	color:#625A5A;
	margin:0;
	padding:0;
}
.contents a{
	text-decoration:none;
}

.contents a:hover{
	color:rgb(74, 90, 19);
}

.references{
	margin-left:10px;
}

.references li{
	margin-bottom:10px;
}

.references li span{
	white-space:normal;
}

.list_bc {
	margin-left:30px;
	text-align:left;
	line-height: 1.7em;
	margin-bottom:10px;
}

ul.list_bc {
	list-style-type:none;
}

.list_bc1 {
	margin-left:30px;
	text-align:left;
	line-height: 1.7em;
	margin-bottom:10px;
}
ul.list_bc1 {
	list-style-type:disc;
}
p+ul.list_bc,ol.list_bc,ul.list_bc1 {
	margin-top: -5px;
}

.list_bc ul{
	margin-left: 20px;
}

.contacts{
	margin:10% 5%;
}

.contacts p{
	line-height: 1.7em;
	margin-bottom:10px;
}

.some_text{
	text-align:justify;
	
}

.pronunciation{
	width:50%;
	margin:0 25%;
	border:0;
	text-align:left;
}
.pronunciation img{
	width:30px;
}
.pronunciation tr, td{
	border:0;
}
.transcription{
	color: rgb(146,26,12);
	font-weight:bold;
}

.translate{
	width:75%;
	margin:10px auto 10px;
	border: 1px solid;
	border-collapse: collapse;
    border-spacing: 0;
}

.translate  td {
	border: 1px solid;
	padding: 5px;
	width:50%;
}

.translate[type="simple"] tr td:nth-child(1){
	width:25px;
}


.translate tr td:nth-child(2n+1){
	text-align:center;
	background: rgba(226, 124, 115,0.15);
}

table[type="complete"].translate  tr td:nth-child(2n+1) {
	text-align:left;
	padding: 10px;
}

table[type="complete"].translate {
	width:70%;
}

.translate tr th{
	border: 1px solid;
	padding: 5px;
	background: rgba(226, 124, 115,0.15);
}
.translate[type="normal"] tr td{
	text-align:left;
	padding: 10px;
	background: none;
}

.translate[type="normal"] tr th{
	text-align:center;
	background: rgba(226, 124, 115,0.15);
}
#print{
	padding: 5px;
}

.print {
	width:100px;
	margin: 10px auto;
}

.ref{
	display: inline-block; /* Строчно-блочный элемент */
    position: relative;
}

.ref:hover::after {
    content: attr(data-title); /* Выводим текст */
    position: absolute; /* Абсолютное позиционирование */
    left: 20%; top: 30%; /* Положение подсказки */
    z-index: 1; /* Отображаем подсказку поверх других элементов */
    background: rgba(255,255,230,0.9); /* Полупрозрачный цвет фона */
    font-family: Arial, sans-serif; /* Гарнитура шрифта */
    font-size: 11px; /* Размер текста подсказки */
    padding: 5px 10px; /* Поля */
    border: 1px solid #333; /* Параметры рамки */
	width:200px;
   }
   
.exs_table{
	margin:10px auto 10px;
	border: 1px solid;
	border-collapse: collapse;
    border-spacing: 0;	
}

.exs_table  td {
	border: 1px solid;
	padding: 5px;
}

.exs_table tr td:not(:first-child) {
	width:28%;
	text-align:center;
}

.exs_table input {
	width: 96px;
}

.in_text {
	margin-left:30px;
	margin-top:0;
	margin-bottom: 1.7em;
	line-height: 2em;
}

h5[type="ref"] {
	font-size:1.3em;
	line-height:2em;
	cursor: pointer;
	}

h5[type="ref"]:hover{
	color: rgba(226, 124, 115,0.7);
}

.false_friens{
	width:80%;
	margin:10px auto 10px;
	border: 1px solid;
	border-collapse: collapse;
    border-spacing: 0;	 
}
.false_friens th{
	background:rgba(226, 124, 115,0.15);
}

.false_friens td, th{
	padding:10px;
	border: 1px solid;
}

/*
==============================================
Навигация внизу страницы в разделе study_help
==============================================
*/

.next_prev_nav{
	width:90%;
	margin: 20px auto;
	padding: 10px;
	clear:both;
	font-size: 1.4em;
}

.next_prev_nav a{
	color: #625A5A;
}
.next_prev_nav div:first-child{
	float:left;
}

.next_prev_nav div:last-child{
	float:right;
}

.next_prev_nav a{
	text-decoration:none;
}

.next_prev_nav a:hover{
	color:rgb(233, 30, 30);
}	

/*Кнопка НАВЕРХ*/
#onTop {
  cursor: pointer;
  display: none;
  font-size: 150%;
  position: fixed;
  width:3.8em;
  top:0;
  right:10px;
  z-index:1000;
  color:white;
  opacity: 0.6;
  background:#b7b7b7;
  }

#onTop a {
    height: 1.2em;
    color: #fff;
    text-decoration: none;
	font-size:0.5em;
    font-weight: 600;
    padding: .5em 0.5em .75em;
}

#onTop:hover{
	opacity:1;
}

/*Кнопка открытия скрипта*/
button[class="script"] {
	border:none;
	background: none;
	float:right;
	width:20px;
	height:20px;
	cursor: pointer;
}

button[class="script"]:hover{
	background: rgba(226, 124, 115,0.15);
}

button[class="script"] img {
	width:20px;
	height:20px;
}

.contacts .s_group p{
	 line-height:1.4em !important;
	 margin:5px;
}

.contacts .s_group {
	margin-bottom:20px;
}