@font-face {
		  font-family: 'MKKorektor';
		  /*src: url('fonts/mkkorektor-font-v4test.otf'); */
		  src: url('fonts/mkkorektor-font-v7.otf'); 
		}

		body	{
			font-family: 'Roboto Condensed', sans-serif;
		}
		blockquote {
		  padding-left: 4px;
		  border-left: 2px solid gray;
		}

		a[href] {
		  text-decoration: underline;
		}
		
		.curly-underline {
		    background: url(../images/underline.png) bottom repeat-x;
		    background-color: #d7d7d7;
		}
		.grammar-underline {
		    background: url(../images/grammar-underline.png) bottom repeat-x;
		    background-color: #d7d7d7;
		}
		.error-wrapper	{
			position: fixed;
			right: 0;
			width: 30%;
			min-height: 300px;
			height: 100%;
			height: calc(100% - 120px);
			background-color: #edebec;
			padding: 0px;
			box-sizing: border-box;
		}
		/**
		* NEW 
		*/ 
		.descriptive {
			background-color: #edebeb;
		}
		.clear-fix	{
			clear: both;
		}
		header, .top-div	{
			height: 120px;
		}
		header	{
			position: fixed;
			width: 100%;
			top:0;
			left:0;
			background-color: #76c2c0;
			border-bottom: 1px solid #203633;
		}
		.logo	{
			position: relative;
			width: 110px;
			height: 100%;
			background-image: url(../images/logo.png);
			background-size: 100%;
			background-position: center;
			background-repeat: no-repeat;
		}
		.logo a {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		.description	{
			position: absolute;
			top: 30px;
			left: 340px;
		}
		.h-left .description	{
			left: 240px;
		}
		.description .ctitle {
			font-size: 2.000em;
		}
		.stats-box	{
			position: absolute;
			right: 5px;
			bottom: 5px;
			text-align: right;
			color: #48353b;
		}
		.stats-box .username:before	{
			content: 'F';
			font-family: 'MKKorektor';
			font-size: 1.000em;
			margin-right: 5px;
		}
		.stats-box .docs:before	{
			content: 'H';
			font-family: 'MKKorektor';
			font-size: 1.000em;
			margin-right: 5px;
			color: #48353b;
			text-decoration: none;
		}
		.stats-box a	{
			color: #48353b;
			text-decoration: none;
		}
		.stats-box .logout:before	{
			content: 'I';
			font-family: 'MKKorektor';
			font-size: 1.000em;
			margin-right: 5px;
		}
		.left-bar	{
			position: fixed;
			top: 121px;
			left:0;
			width: 108px;
			height: 100%;
			height: calc(100% - 120px);
			border: 1px solid #8a7f83;
			background-color: #49343b;
			z-index: 99;
		}
		.left-bar.dash	{
			position: fixed;
			top: 121px;
			left:0;
			width: 308px;
			height: 100%;
			height: calc(100% - 120px);
			border: 1px solid #8a7f83;
			background-color: #49343b;
		}
		.icon	{
			width: 100%;
			height: 108px;
			cursor: pointer;
			background-size: 100%;
			background-position: center;
			background-repeat: no-repeat;
			font-family: 'MKKorektor';
			color: #74d6d5;
		    font-size: 6.25em;
			font-size: 3.5em;
		    line-height: 80px;
		    text-align: center;
		    padding: 0;
		    margin: 0;
		    border-top: 1px solid #3e2b31;
		    border-bottom: 1px solid #3e2b31;
		}
		.icon .tooltiptext {
		    visibility: hidden;
			width: 240px;
			background-color: #49343b;
			color: #74d6d5;
			text-align: center;
			border-radius: 2px;
			padding: 5px 0;
			position: absolute;
			z-index: 1;
			top: 10px;
			left: 105%;
			font-size: 1.25rem;
			line-height: 3.85rem;
			font-family: 'Roboto Condensed', sans-serif;
		}
		.icon.new .tooltiptext	{
			top: 120px;
		}
		.icon.check .tooltiptext	{
			top: 230px;
		}
		.icon.download .tooltiptext	{
			top: 340px;
		}
		.icon.hyphen .tooltiptext	{
			top: 450px;
		}

		.icon .tooltiptext::after {
		    content: "";
		    position: absolute;
		    top: 50%;
		    right: 100%;
		    margin-top: -5px;
		    border-width: 5px;
		    border-style: solid;
		    border-color: transparent black transparent transparent;
		}
		.icon:hover .tooltiptext {
		    visibility: visible;
		}
		.small.icon:first-of-type	{
			margin-top: 50px;
		}
		.small.icon	{
			display: block;
			width: 100%;
			height: 30px;
			cursor: pointer;
			background-size: 100%;
			background-position: center;
			background-repeat: no-repeat;
			font-family: 'Roboto Condensed', sans-serif;
			color: #fff;
		    font-size: 1.15em;
		    font-weight: 300;
		    line-height: 30px;
		    text-align: left;
		    padding: 0;
		    margin: 0;
		    padding-left: 50px;
		    box-sizing: border-box;
		    border-top: 0px solid #3e2b31;
		    border-bottom: 0px solid #3e2b31;
		    text-decoration: none;
		}
		.small.icon:before {
			content: '';
			width: 24px;
			height: 24px;
			margin-right: 5px;
			color: #74d6d5;
			font-size: 1.15em;
			font-family: 'MKKorektor';
		}
		.small.icon.documents:before {
			content: 'I';
		}
		.small.icon.archive:before {
			content: 'O';
		}
		.small.icon.profile:before {
			content: 'F';
		}
		.small.icon.logout:before {
			content: 'I';
		}
		.icon.upload	{
			/*background-image: url(../images/upload.png);*/
		}
		.icon.new	{
			/*background-image: url(../images/new.png);*/
		}
		.icon.search	{
			/*background-image: url(../images/search.png);*/
		}
		.icon.check	{
			/*background-image: url(../images/check.png);*/
		}
		.icon.download	{
			/*background-image: url(../images/download.png);*/
		}
		.check-all {
			position: fixed;
		    bottom: 60px;
		    left: calc(68% - 350px);
			width: 177px;
			height: 47px;
			background-image: url(../images/check-all.png);
			cursor: pointer;
		}

		.container	{
			position: fixed;
			box-sizing: border-box;
			width: 70%;
			width: calc(65% - 110px);
			height: 100%;
			height: calc(100% - 120px);
			margin-left: 110px;
			padding: 50px 125px 50px 125px;
		}
		/************DASHBOARD********/
		.container.dash	{
			margin-left: 260px;
			width: calc(85% - 110px);
			height: calc(100% - 180px);
			overflow-y: auto;
		}
		.container.content	{
			margin-left: 303px;
			width: 700px;
			height: calc(100% - 155px);
			bottom: 34px;
			overflow-y: auto;
			background-color: #fff;
		}
		
		.container.dash .content {
		}
		.container.content  div {
			margin: 10px auto;
		}
		.container.content span {
			font-weight: bold;
		}
		.document	{
			display: block;
			float: left;
			position: relative;
			width: 220px;
			height: 316px;
			background-color: #f2f0f1;
			border-top: 4px solid #54a3a7;
			margin-left: 20px;
			margin-bottom: 40px;
			cursor: pointer;
			text-decoration: none !important;
			background-image: url(../images/bottom-right.png);
			background-position: bottom right;
			background-repeat: no-repeat;
		}
		.document.new	{
			background-color: #f0fafa;
			border-top: 4px solid #47353a;
		}
		.document.new .doc-title {
			display: block;
			box-sizing: border-box;
			padding: 20px 10px;
			font-size: 1.750em;
			font-weight: 600;
			text-transform: uppercase;
			text-decoration: none;
			color: #47353a;
		}
		.document.new .doc-upload {
			display: block;
			position: absolute;
			bottom: 0;
			left: 0;
			box-sizing: border-box;
			padding: 10px 10px;
			font-size: 0.980em;
			font-weight: 600;
			color: #47353a;
			text-decoration: none;
		}
		.document .doc-title {
			box-sizing: border-box;
			padding: 20px 10px 0 10px;
			font-size: 1.150em;
			font-weight: 600;
			color: #47353a;
		}
		.document .doc-content {
			box-sizing: border-box;
			padding: 10px 10px;
			font-size: 0.980em;
			color: #47353a;
		}
		.document .doc-date {
			position: absolute;
			bottom: 0;
			left: 30px;
			box-sizing: border-box;
			padding: 10px 10px;
			font-size: 0.800em;
			font-weight: 600;
			color: #7bc5c4;
		}
		.document .doc-archive {
			position: absolute;
			bottom: 5px;
			left: 15px;
			width: 24px;
			height: 24px;
			/*background-image: url(../images/archive.png);
			background-size: contain;
			background-repeat: no-repeat;*/
			color: #74d6d5;
			font-size: 1.15em;
			font-family: 'MKKorektor';
		}
		.document .doc-delete {
			position: absolute;
			bottom: 5px;
			left: 15px;
			width: 24px;
			height: 24px;
			/*background-image: url(../images/delete.png);
			background-size: contain;
			background-repeat: no-repeat;*/
			color: #74d6d5;
			font-size: 1.15em;
			font-family: 'MKKorektor';
		}
		/************DASHBOARD********/
		#editor	{
			display: none;
			width: 100%; 
			height: 100%; 
			height: calc(100% - 140px); 
			border: 1px solid #f3f1cd; 
			overflow-y: auto;
			overflow-x: hidden;
			outline: none;
			font-size: 1.500em;
		}
		#doc_title	{
			display: none;
			width: 100%; 
			height: 30px;
			font-size: 2.000em;
			border: 0px;
			outline: none;
			margin-bottom: 20px;
			font-family: 'Roboto Condensed', sans-serif;
		}
		#loader	{
			display: block;
			text-align: center;
			padding: 60px 0;
			position: absolute;
		    width: 90%;
		    height: 80%;
		    top: 0;
		    z-index: 1;
		    background-color: #fff;
		}
		#loader .load-icon.middle	{
			width: 100px;
			height: 100px;
			background-image: url(../images/Animirana-ikona-kruznasaat100.gif);
			background-position: center;
			margin: 60px auto;
		}
		.error-wrapper .header	{
			height: 40px;
			line-height: 40px;
			margin: 10px 10px 5px 10px;
		}
		.error-wrapper .status-bar	{
			height: 10px;
			background-color: #fff;
			margin: 0 0 30px 0;
		}
		.error-wrapper .status-bar > div	{
			height: 10px;
			width: 1%;
			background-color: #76c2c0;
		}
		.error-wrapper .suggestions	{
			height: 80%;
			overflow-y: auto;
		}
		.error-wrapper .suggestions .suggestion	{
			border-top: 2px solid #fff;
			border-bottom: 2px solid #fff;
		}
		
			.suggestion	{
				background-color: #fff;
				background-image: url(../images/left-line-sel.png);
				background-repeat: no-repeat;
				background-position: 30px top;
			}	
			.suggestion.collapse	{
				background-color: transparent;
				background-image: url(../images/left-line.png);
				cursor: pointer;
			}
			.suggestion.collapse-none	{
				background-color: transparent;
				background-image: url(../images/left-line.png);
				cursor: pointer;
			}		
			.suggestion .suggestion-wrapper	{
				width: 85%; 
				margin: 0 0 0 auto;
			}
			.suggestion .suggestion-wrapper:after	{
				content: '';
				display: table;
  				clear: both;
			}
			.suggestion .suggestion-wrapper .left-content	{
				float: left;
				width: 60%;
				height: 100%;
				box-sizing: border-box;
				padding: 20px 0;
			}
			.suggestion.collapse .suggestion-wrapper .left-content	{
				max-height: 60px;
    			overflow: hidden;
				width: 75%;
			}
			.suggestion .suggestion-wrapper .right-content	{
				float: left;
				width: 40%;
			}
			.suggestion.collapse .suggestion-wrapper .right-content	{
				width: 25%;
			}
			.suggestion .suggestion-wrapper .right-content .full-display	{
				background-color: #f6f6f6;
				box-sizing: border-box;
				padding: 20px 0;
				border-right: 4px solid #98c93a;
			}
			.suggestion .suggestion-wrapper .right-content .collapsed-display	{
				display: none;
				box-sizing: border-box;
				padding: 20px 0;
			}
			.suggestion.collapse .suggestion-wrapper .right-content .collapsed-display, 
			.suggestion.collapse-none .suggestion-wrapper .right-content .collapsed-display	{
				display: block;
				margin-top: 10px;
			}
			.suggestion.collapse .suggestion-wrapper .right-content .full-display, 
			.suggestion.collapse-none .suggestion-wrapper .right-content .full-display	{
				display: none;
			}
			
			.suggestion .suggestion-wrapper .word,
			.suggestion .suggestion-wrapper .replacement	{
				float: left;
				font-size: 1.500em;
				line-height: 1.500em;
			}
			.suggestion .suggestion-wrapper .arrow	{
				float: left;
				width: 26px;
				height: 26px;
				margin: 5px 20px;
				/*background-image: url(../images/arrow.png);
				background-position: center;
				background-repeat: no-repeat;*/
			}
			.suggestion .suggestion-wrapper .arrow:before	{
				content: 'S';
				font-size: 3.24em;
				font-size: 2.000em;
				color: #6f6f6f;
				font-family: 'MKKorektor';
				line-height: 20px;
				margin-left: 0px;
			}
			.suggestion .suggestion-wrapper .replacement	{
				color: #1cc6c3;
			}
			.suggestion .suggestion-wrapper .description	{
				color: #c0babc;
				font-size: 0.850em;
				width: 90%;
			}
			.suggestion .suggestion-wrapper .replacement div {
				cursor: pointer;
			}
			
			.collapsed-display div	{
				float: left;
				width: 15px;
				height: 15px;
				box-sizing: border-box;
				margin: 0 10px 0 0;
				color: #848484;
				font-weight: 300;
				font-size: 0.850em;
				font-size: 0.650em;
				line-height: 1.750em;
				cursor: pointer;
			}
			.collapsed-display .accept	{
				/*background-image: url(../images/icons/cl-accept.png);*/
			}
			.collapsed-display .accept:before	{
				content: 'c';
				font-family: 'MKKorektor';
				line-height: initial;
				color: #000;
			}
			.collapsed-display .add	{
				/*background-image: url(../images/icons/cl-add.png);*/
			}
			.collapsed-display .add:before	{
				content: 'a';
				font-family: 'MKKorektor';
				line-height: initial;
				color: #38c047;
			}
			.collapsed-display .delete	{
				/*background-image: url(../images/icons/cl-delete.png);*/
			}
			.collapsed-display .delete:before	{
				content: 'b';
				font-family: 'MKKorektor';
				line-height: initial;
				color: #fc4445;
			}
			.collapsed-display .cancel	{
				/*background-image: url(../images/icons/cl-cancel.png);*/
			}
			.collapsed-display .cancel:before	{
				content: 'd';
				font-family: 'MKKorektor';
				line-height: initial;
				color: #000;
			}
			.collapsed-display:after	{
				content: '';
				display: table;
  				clear: both;
			}
			
			.full-display div	{
				position: relative;
				box-sizing: border-box;
				margin: 0 0 0 60px;
				color: #848484;
				font-weight: 300;
				font-size: 0.850em;
				line-height: 1.750em;
				cursor: pointer;
			}
			.full-display div	{
				position: relative;
				box-sizing: border-box;
				margin: 0 0 0 60px;
				color: #848484;
				font-weight: 300;
				font-size: 0.850em;
				line-height: 1.750em;
				cursor: pointer;
			}
			.full-display div:before	{
				content: '';
				position: absolute;
				width: 12px;
				height: 12px;
				top: 2px;
				left: -20px;
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
				cursor: pointer;
			}
			.full-display .accept:before	{
				/*background-image: url(../images/icons/fd-accept.png);*/
				content: 'c';
				font-family: 'MKKorektor';
				line-height: initial;
				color: #000;
			}
			.full-display .add:before	{
				/*background-image: url(../images/icons/fd-add.png);*/
				content: 'a';
				font-family: 'MKKorektor';
				line-height: initial;
				color: #38c047;
			}
			.full-display .delete:before	{
				/*background-image: url(../images/icons/fd-delete.png);*/
				content: 'b';
				font-family: 'MKKorektor';
				line-height: initial;
				color: #fc4445;
			}
			.full-display .cancel:before	{
				/*background-image: url(../images/icons/fd-cancel.png);*/
				content: 'd';
				font-family: 'MKKorektor';
				line-height: initial;
				color: #000;
			}
		
		.version-disclaimer	{
			position: absolute;
			bottom: 10px;
			font-size: 0.800em;
		}
		
		.trails 	{
			display: none !important;
		}
		.trails .h1-line	{
			position: absolute;
			top:200px;
			right: 35%;
			width: 300px;
			height: 1px;
			border-top: 1px dashed red;
		}
		.trails .v-line	{
			position: absolute;
			top:200px;
			right: 35%;
			width: 1px;
			height: 100px;
			border-left: 1px dashed red;
		}
		.trails .h2-line	{
			z-index:1;
			position: absolute;
			top:300px;
			left: 65%;
			width: 150px;
			height: 1px;
			border-top: 1px dashed red;
		}
		
		
		
		#contextMenu	{
			display: none;
			position: absolute;
			width: auto;
			background-color: #edebec;
			z-index: 1000000;
		}
		#contextMenu.synonyms:before {
			content: 'Синоними ...';
			width: 100%;
			display: block;
			padding: 4px 8px;
			box-sizing: border-box;
			background-color: #16908d;
			color: #fff;
		}
		#contextMenu ul {
			list-style: none;
			-webkit-padding-start: 20px;
			-webkit-padding-end: 20px;
			-webkit-margin-before: 0.5em;
			-webkit-margin-after: 0.5em;
		}
		#contextMenu ul li {
			font-family: 'Roboto Condensed', sans-serif;
			font-size: 0.850em;
			padding: 5px 0;
		}
		#contextMenu ul li a {
			text-decoration: none;
			color: #00aba8;
		}
		#contextMenu ul li a:hover {
			text-decoration: underline;
			color: #41ccc9;
		}
		#see-all-synonyms	{
			cursor: pointer;
			color: #16908d;
		}
		#no-synonyms	{
			color: #446254;
		}
		#add-word,
		#remove-word	{
			cursor: pointer;
			margin-top: 10px;
			padding-top: 8px !important;
			border-top: 1px solid #c20000;
			color: #c20000;
    	}
    	#mak-info	{
			cursor: pointer;
			margin-top: 5px;
			padding-top: 8px !important;
			border-top: 1px solid #00aba8;
			color: #c20000;
    	}
		
		/* LOGIN */
		.login-wrapper {
			position: fixed;
			width: 445px;
			height: 575px;
			background-color: #76c2c0;
			left: 50%;
			margin-left: -145px;
		}
		.login-wrapper.register {
			height: 655px;
		}
		.logo-login {
			position: relative;
			width: 100%;
		    height: 120px;
		    margin: 20px 0;
		    background-image: url(../images/logo.png);
		    background-size: contain;
		    background-position: center;
		    background-repeat: no-repeat;
		    
		}
		.welcome-message {
			color: #49343b;
			text-align: center;
			font-size: 1.375em;
			margin: 0 30px 40px 30px;
		}
		.name	{
			width:355px;
			height: 65px;
			margin: 10px auto;
		}
		.media	{
			width:355px;
			height: 65px;
			margin: 10px auto;
		}
		.mail	{
			width:355px;
			height: 65px;
			margin: 10px auto;
		}
		.pass	{
			width:355px;
			height: 65px;
			margin: 10px auto;
		}
		.login-wrapper input[type=text],
		.login-wrapper input[type=password] {
			width:290px;
			height: 65px;
			box-sizing: border-box;
			padding: 15px 10px;
			font-size: 1.125em;
			border: 0px;
		}
		.name:after {
			content: 'F';
			position: absolute;
			display: inline-block;
			width: 65px;
			height: 65px;
			background-color: #c8c2c4;
			color: #fff;
			font-family: 'MKKorektor';
			font-size: 2em;
			line-height: 65px;
			text-align: center;
		}
		.media:after {
			content: 'K';
			position: absolute;
			display: inline-block;
			width: 65px;
			height: 65px;
			background-color: #c8c2c4;
			color: #fff;
			font-family: 'MKKorektor';
			font-size: 2em;
			line-height: 65px;
			text-align: center;
		}
		.mail:after {
			content: 'J';
			position: absolute;
			display: inline-block;
			width: 65px;
			height: 65px;
			background-color: #c8c2c4;
			color: #fff;
			font-family: 'MKKorektor';
			font-size: 2em;
			line-height: 65px;
			text-align: center;
		}
		.pass:after {
			content: 'G';
			position: absolute;
			display: inline-block;
			width: 65px;
			height: 65px;
			background-color: #c8c2c4;
			color: #fff;
			font-family: 'MKKorektor';
			font-size: 2em;
			line-height: 65px;
			text-align: center;
		}
		.login-wrapper.register .welcome-message {
			margin: 0 0 20px 0;
			margin: 20px 40px;
		}
		.login-wrapper .right-links	{
			float: right;
			width: 50%;
			text-align: right;
			margin: 20px 42px 20px 0;
		}
		.login-wrapper .right-links	a {
			color: #49343b;
			text-decoration: none;
			
		}
		.login-wrapper .right-links:after	{
			content: "";
			display: table;
			clear: both;
		}
		.login-wrapper .left-links	{
			float: left;
			font-size: 0.85rem;
			width: 50%;
			text-align: left;
			margin: 0px 0 20px 42px;
		}
		.login-wrapper .left-links	a {
			color: #333;
			text-decoration: underline;
			
		}
		.login-wrapper .left-links:after	{
			content: "";
			display: table;
			clear: both;
		}
		.login-wrapper input[type=checkbox] {
			width: 20px;
			height: 20px;
			border: 3px solid #333;
			float: left;
			margin-top: 3px;
			outline: none;
			-webkit-appearance: none;
			appearance: none;
			display: inline-block;
			position: relative;
			margin-right: 5px;
		}
		.login-wrapper input[type=checkbox]:checked {
			background-color: #fafbfc;
			border: 3px solid #333;
			box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
			color: #333;
		}
		.login-wrapper input[type=checkbox]:checked:after {
			content: '\2714\FE0E';
			font-size: 14px;
			position: absolute;
			top: -3px;
			left: 1px;
			color: #333;
			font-family: 'Open Sans', sans-serif;
		}
		.login-wrapper .btn	{
			width:355px;
			height: 65px;
			margin: 10px auto;
		}
		.login-wrapper .btn input[type=submit]	{
			width: 100%;
			height: 100%;
			line-height: 65px;
			border: 0;
			background-color: #48353b;
			color: #fff;
			text-transform: uppercase;
			font-family: 'Roboto Condensed', sans-serif;
			font-size: 1.25em;
			outline: none;
			cursor: pointer;
		}
		
		
		/**** ADD ON ****/
		.bottom-bar {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 35px;
			background-color: rgba(73, 52, 59, 0.60);
			z-index: 99999;
			font-size: 0.850rem;
		}
		.bottom-bar ul {
			margin: 8px 0;
			margin-left: 350px;
			list-style: none;
		}
		.bottom-bar.left ul {
			margin-left: 200px;
		}
		.bottom-bar ul li {
			float: left;
			margin-left: 15px;
		}
		.bottom-bar ul li a {
			color: #000;
			text-decoration: none;
		}
		.bottom-bar ul li a:before {
			content: '|';
			margin-right: 15px;
		}
		.bottom-bar ul li:first-of-type a:before {
			content: '';
			margin-right: 0;
		}
		
		.abs-link {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}