// Стили сайта

body {
	background: #FFF;
}

span.admin-footer-stat {
	display: block;
	.t80;
}

.my-nav-panel {
	background-color: @color1; // @g_blue_gray800;
	color: @g_gray300;
	min-width: 200px;
	min-height: 100vh;
}

.my-nav-panel-tablet {
	background-color: @color1;
	color: @g_gray900;
}

ul.admin-menu {
	margin: 0;
	padding: 0;
	list-style: none;
	color: @g_gray400;
	
	a {
		color: @g_gray100;
		
		&:hover {
			text-decoration: none;
		}
	}
	
	// подменю
	ul {
		list-style: none;
		margin-top: 0;
		margin-left: 0;
		padding-left: 0;
		
		a {
			color: @g_gray400;
			display: block;
			padding: 3px 10px;
			
			&:before {
				.icon-fa-normal;
				content: @fa-var-caret-right;
			}			
			
			&:hover {
				background-color: #798891;
				color: @g_gray100;
			}
		}
	
		li {
			line-height: 1.6;
		}
	}
	
	.admin-menu-top > a {
		display: block;
		padding: 10px;
		.t120;
		
		border-bottom: 1px solid @g_blue_gray800;
		
		&:hover {
			// text-decoration: none;
		}
		
	}
	
	.admin-menu-section-page {
		background-color: @g_blue_gray700;
		
		&:before {
			.icon-fa-normal;
			content: @fa-var-newspaper-o;
		}
	}
	
	.admin-menu-section-options {
		background-color: @g_blue_gray700;
		
		&:before {
			.icon-fa-normal;
			content: @fa-var-wrench;
		}
		
	}
	
	.admin-menu-section-users {
		background-color: @g_blue_gray700;
		
		&:before {
			.icon-fa-normal;
			content: @fa-var-users;
		}
		
	}
	
	.admin-menu-section-plugins {
		background-color: @g_blue_gray700;
		
		&:before {
			.icon-fa-normal;
			content: @fa-var-puzzle-piece;
		}
	}
	
	.admin-menu-section-favorites {
		background-color: @g_blue_gray700;
		
		&:before {
			.icon-fa-normal;
			content: @fa-var-bookmark;
		}
	}
	
}

// текущая топ-секция
ul.admin-menu-top-selected {
	.admin-menu-section {
		background-color: @g_light_blue900;
	}
}

// текущий пункт
li.admin-menu-selected,
li.admin-menu-selected a {
	background-color: #63727A;
	background-color: @g_yellow500;
	color: @g_gray900 !important;
}

a.my-q-site,
a.my-q-dashboard, 
a.my-q-my_profile,
a.my-q-logout 
{
	&:before {
		.icon-fa-normal;
		font-size: 28px;
		padding: 7px;
		margin: 0 0 5px 0;
		background-color: @g_blue_gray700;	
		color: @g_blue_gray100;
	}
	
	&:hover:before {
		background-color: @g_blue_gray400;	
		color: @g_blue_gray50;
	}
}

a.my-q-site:before {
	content: @fa-var-home;
}

a.my-q-dashboard:before {
	content: @fa-var-dashboard;
}

a.my-q-my_profile:before {
	content: @fa-var-user;
}

a.my-q-logout:before {
	content: @fa-var-unlock;
}

p.info {
	color: @g_gray600;
	margin-bottom: 30px;
}

div.admin-h-menu {
	margin-top: 10px;
	
	a {
		.button;
		padding: 5px 10px;
		margin-bottom: 10px;
		background-color: @g_gray300;
		color: @g_gray600;
	}
	
	a.select {
		background-color: @g_light_blue500;
		color: @g_white;
	}
}

p.nav {
	a {
		.button;
		padding: 5px 10px;
		margin-right: 5px;
		margin-bottom: 10px;
	}
	
	a.current {
		background-color: @g_light_blue500;
	}	
}

// сообщения 
div.update {
	padding: 20px;
	margin: 10px 0;
	background: @g_greenA700;
	color: @g_white;
	
	a {
		color: @g_white;
	}
}

div.error {
	padding: 20px;
	margin: 10px 0;
	background: @g_red500;
	color: @g_white;
	
	a {
		color: @g_white;
	}
}

table.page {
	// background-color: @g_gray100;
	
	.table > .striped(@g_gray200);
	.table > .striped2(@g_gray100);
	
	width: 100%;
	
	span.mso-alert {
		color: @g_red500;
	}
	
	td.section {
		background-color: @g_gray300 !important;
		
		h2, 
		p {
			margin: 0 0 5px 0;
		}
	}
	
	td.subsection {
		background-color: @g_gray500 !important;
		color: white;
	}
	
	p em, // подсказка к полю
	p.admin_page_qhint, // текст записи кратко
	p.admin_page_cat, // рубрика 
	p.admin_page_tag // метки
	{
		color: @g_gray700;
		.t90;
		margin: 0;
	}
	
	th {
		background-color: @g_gray300;
	}
}

// таблица опций
// @media @SCREEN_TABLET {
@media (max-width: 960px) {
	table.page-responsive { 
	
		td { 
			display: block; 
			border: none;
		}
		
		th {
			display: inline-block; 
		}
		
		thead {
			background-color: @g_gray300;
			padding: 0;
			
			tr {
				margin: 0;
				padding: 0;
				border: none;
			}
		}
	}
}

// таблица всех записей
@media (max-width: 960px) {
	table.page-all-pages {
		
		tr {
			display: block;
			margin: 10px 0 10px 0;
			padding-bottom: 10px;
			border-bottom: #DDDDDD 1px solid;
		}
		
		th {
			display: inline-block; 
			// width: 100%;
		}
		
		thead {
			background-color: @g_gray300;
			padding: 0;
			
			tr {
				margin: 0;
				padding: 0;
				border: none;
			}
		}
		
		td { 
			display: block; 
			padding: 0;
			background: #fff !important;
		}
		
		p {
			margin: 0;
		}
		
		td.p_date_p, 
		td.p_page_type_name,
		td.p_page_status,
		td.p_users_nik
		{ 
			display: inline-block; 
			margin-right: 20px;
			color: @g_gray700;
			.t90;
		}
	}
}


textarea,
select, 
input 
{
	width: 100%;
}


select[name="f_page_delete"] {
	width: 100%;
}

// исправляем ширину
input[type="button"],
input[type="submit"],
input[type="checkbox"],
input[type="radio"],
p.admin_page_filtr select,
p.admin_files_nav select,
form.admin_uploads_form select 
{
	width: auto !important;
}

input[type="checkbox"],
input[type="radio"]
{
	margin-right: 5px;
}

// опции плагинов
form.mso_admin_plugin_options {
	
	label > span {
		.bold;
	}
	
	p {
		margin: 0 0 20px 0;
	}
	
	span.hint-options {
		display: block;
		color: @g_gray700;
		.italic;
		margin: 5px 0 15px 0;
	}
}

// табы
div.mso-tabs {
	margin: 20px 0;
}

ul.mso-tabs-nav {
	margin: 0; 
	padding: 0; 
	width: 100%;
	list-style: none;
	background-color: #e0e0e0;

	li.mso-tabs-elem {
		display: inline-block;
		// line-height: 1em;
		padding: 10px 20px;
		cursor: pointer;
		background-color: #e0e0e0;
		
		&:hover {
			background-color: #ccc;
		}
	}

	li.mso-tabs-current
	{
		color: #fff;
		cursor: default;
		background-color: #455A64;
		
		&:hover {
			background-color: #455A64;
		}
	}
	
	/*
	li.mso-tabs-current.i-cat {
		background-color: #81371f;
		
		&:hover {
			background-color: #81371f;
		}
	}
	
	li.mso-tabs-current.i-meta {
		background-color: #2382B4;
		
		&:hover {
			background-color: #2382B4;
		}
	}
	
	li.mso-tabs-current.i-other {
		background-color: #D8AE1C;
		
		&:hover {
			background-color: #D8AE1C;
		}
	}
	
	li.mso-tabs-current.i-files {
		background-color:#B148CF;
		
		&:hover {
			background-color: #B148CF;
		}
	}
	
	li.mso-tabs-current.i-custom-meta {
		background-color:#00b386;
		
		&:hover {
			background-color: #00b386;
		}
	}
	
	*/
}

div.mso-tabs-box {
	display: none; 
	// background-color: #eee; 
	// padding: 20px;
	
	&.tabs_bordered {
		border: 1px solid #dddddd;
		background-color: #F8F8F8;
	}
}

div.mso-tabs-box.mso-tabs-visible {
	display: block;
}


// таб опции плагинов
div.tab-options-plugins {
	padding: 20px 20px 10px 20px;
	background: #eeeeee;
}



table.active-plugins {
	th { background: #80be80; }
	
	&.page tr:nth-of-type(2n+1) td {
		background: #d5e9d5;
	}
	
	&.page tr:nth-of-type(2n) td {
		background: #edf5ed;
	}
	
	a {
		color: #489048;
	}
}

li.mso-tabs-elem.active-plugins.mso-tabs-current {
	background: #649663;
	
	&:hover {
		background: #649663;
	}
}




table.inactive-plugins {
	th { background: #A2BAC4; }
	
	&.page tr:nth-of-type(2n+1) td {
		background: #d1dee2;
	}
	
	&.page tr:nth-of-type(2n) td {
		background: #e1e9ec;
	}
	
	a {
		color: #5d77d7;
	}
}

li.mso-tabs-elem.inactive-plugins.mso-tabs-current {
	background: #6f8189;
	
	&:hover {
		background: #6f8189;
	}
}

// настройка виджетов
div.admin-edit-widgets {

	h3 {
		.t100;
		margin: 0 0 5px 0;
		
		a {
			display: block;
			text-decoration: none;
			color: @g_gray900;
			background: @g_blue_gray100;
			padding: 5px 10px;
			
			&:before {
				.icon-fa-normal;
				content: @fa-var-caret-right;
			}
			
			&.link.visible {
				background-color: @g_blue_gray600;
				color: @g_gray200 !important;
			}
			
			&.link.visible:before {
				.icon-fa-normal;
				content: @fa-var-caret-down;
			}
			
			&:hover {
				background-color: @g_blue_gray200;
			}
		}
	}
	
	div.admin_widgets {
		background: @g_gray50;
		border: 1px solid @g_gray300;
		padding: 10px 20px 0 20px;
		margin-bottom: 20px;
		
		span.name_widget {
			.bold;
		}
		
		span.hint_widget {
			.italic;
			color: @g_gray700;
			.t90;
			margin: 0;
			display: block;
		}

		textarea,
		select, 
		input 
		{
			width: 100%;
		}
	}
}

// редактор
div.new_or_edit {
	div.page-header {
		input {
			.w100;
			padding: 10px;
			.t140;
			//.bold;
			border: 1px solid @g_gray300;
		}
	}
	
	div.page_status {
		
		p.page_status {
			margin-top: 10px;
		}
		
		p.page_status label {
			margin-right: 20px;
		}
	}
	
	div.tabs_editor {
		// margin-top: 10px;
	}
	
	ul.mso-tabs-nav {
		margin-bottom: 10px;
	}
}

// рубрики в редактировании записи
div.page_cat {
	padding: 20px 20px 10px 20px;
			
	li {
		vertical-align: top;
	}
	
	label input {
		margin-right: 5px;
	}
	
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
		
		ul {
			padding-left: 30px;
		}
	}
	
	li.level0 {
		display: inline-block;
		margin-right: 30px;
		margin-bottom: 20px;
		
		> label { 
			.bold;
		}
	}
	
	li.parent0 {
		> label { 
			.bold;
		}
	}
}

// метки 
div.page_tags {
	padding: 20px 20px 10px 20px;
}
		
// дополнительные поля
div.all-meta,
div.custom-meta,
div.all-other
{
	padding: 10px 20px 10px 20px;
	
	p {
		color: @g_gray600;
	}
	
	textarea,
	select, 
	input 
	{
		width: 100%;
	}
	
	div.page_meta_block {
		border-bottom: 1px dotted @g_gray400;
		
		&:last-child {
			border: none;
		}
	}
	
}

// файлы в редактировании записи

button.all-files-upload {
	background: @g_blue_gray600;
}

button.all-files-upload.selected  {
	background: @g_blue_gray400;
}

div.all-files {

	margin-top: 10px;
		
	div.all-files-nav {
		padding: 10px 0 20px 0;
	}
	
	div.all-files-result {
		.flex;
		.grid_flex > .wrap(wrap);
		justify-content: flex-start;
	}
	
	div.all-files-image {
	
		// display: inline-block;
		
		.flex;
		.flex-vcenter;
		//.flex-wrap;
		margin: 0 20px 20px 0;
		
		// background: @g_blue_gray900;
		background: @g_white;
		border: 1px solid @g_gray400;
		padding: 10px;
		
		/*
		margin: 0 10px 20px 10px;
		height: 170px;
		vertical-align: top;
		border: 1px dotted @g_gray400;
		
		*/
		span {
			display: block;
			background: @g_blue_gray300;
			padding: 2px 10px;
			color: @g_gray100;
			.t90;
			cursor: pointer;
			.t-center;
			margin: 1px 0 0 0;
			
			&:hover {
				background: @g_blue_gray500;
			}
		}
	}
	
	div.all-files-image-mini {
	
	}
	
	div.all-files-image-actions {
		margin: 0 0 0 10px;
	}
	
	img {
		padding: 5px;
		border: 1px solid @g_gray400;
	}
	
}

// loginform
html.loginform {
	height: 100%;

	body {
		.flex;
		.flex-vcenter;
		.flex-hcenter;
		height: 100%;
		background-color: @color1;
	}
	
	.container {
		height: 300px;
		width: 330px;
		-webkit-animation: login 1s ease-in-out;
		-moz-animation: login 1s ease-in-out;
		-ms-animation: login 1s ease-in-out;
		-o-animation: login 1s ease-in-out;
		animation: login 1s ease-in-out;
	}
	
	input {
		width: 330px - 44px;
		padding: 10px;
		background-color: @g_gray300;
	}
	
	i {
		width: 44px; 
		height: 44px; 
		line-height: 44px;
		background: #244658;
		color: @g_gray300;
	}
	
	button {
		background: #276180;
	}
	
	@media (max-width: 400px) {
		i { display: none !important; }
		input { width: 100% !important;}
	}
}
	
	
// CSS анимация для блока логина
@keyframes "login" {
	0% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; margin-top: 75px; }
	100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; margin-top: 0; }
}

@-moz-keyframes login {
	0% { filter: alpha(opacity=0); opacity: 0; margin-top: 75px; }
	100% { filter: alpha(opacity=100); opacity: 1; margin-top: 0; }
}

@-webkit-keyframes "login" {
	0% { filter: alpha(opacity=0); opacity: 0; margin-top: 75px; }
	100% { filter: alpha(opacity=100); opacity: 1; margin-top: 0; }
}

@-ms-keyframes "login" {
	0% {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; margin-top: 75px;}
	100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; margin-top: 0; }
}

@-o-keyframes "login" {
	0% { filter: alpha(opacity=0); opacity: 0; margin-top: 75px; }
	100% { filter: alpha(opacity=100); opacity: 1; margin-top: 0; }
}


// элемент show-hide 
// <div class="show"><div class="show-header"><a href="#" class="link"> -ОПИСАНИЕ- </a></div><div class="show-text"> -TEXT- </div></div>

div.show {
	.show-header {
		margin-bottom: 5px;
	}

	.show-header a {
		text-decoration: none;
		outline: none;
		
		&:before {
			.icon-fa-normal;
			content: @fa-var-caret-right;
			min-width: 9px; // чтобы избежать неприятного скачка текста из-за разной ширины иконки
		}
		
		&.link.visible:before {
			.icon-fa-normal;
			content: @fa-var-caret-down;
		}
	}
}

// ушки
div.plugin-ushki {
	
	.show-header a {
		display: block;
		text-decoration: none;
		color: @g_gray900;
		background: @g_blue_gray100;
		padding: 5px 10px;
		
		&:before {
			.icon-fa-normal;
			content: @fa-var-caret-right;
		}
		
		&.link.visible {
			background-color: @g_blue_gray600;
			color: @g_gray200 !important;
		}
		
		&.link.visible:before {
			.icon-fa-normal;
			content: @fa-var-caret-down;
		}
		
		&:hover {
			background-color: @g_blue_gray200;
		}
	}
	
	dl {
		margin: 0;
	}
	
	dd {
		background: @g_gray50;
		border: 1px solid @g_gray300;
		margin: 5px 0 20px 0;
		padding: 10px 20px 20px 20px;
	}
	
	textarea {
		// height: 200px;
	}
	
	input.ushka_name {
		width: 400px;
	}
	
	select {
		width: 120px;
	}
}

// поле новая ушка
input[name="f_ushka_new"] {
	max-width: 300px;
}

// настройка рубрик
form.mso-cats {
	ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		
		ul {
			margin-left: 50px;
			padding-left: 20px;
			border-left: 2px dotted @g_gray400;
		}
	}
	
	li {
		margin: 0;
		padding: 0;
	}
	
	
	td {
		background: @g_gray200;
		border: none;
		padding: 10px;
		
		&.t2 {
			vertical-align: middle;
		}
	}
}

// загрузки
// список файлов в загрузках
div.all-images {
	
	.flex;
	// .flex-vcenter;
	.grid_flex > .wrap(wrap);
	justify-content: flex-start;
	
	
	// background: @g_blue_gray900;
			
	div.image-block {
	
			margin: 0 20px 20px 0;
			background: @g_white;
			border: 1px solid @g_gray400;
			padding-bottom: 10px;
			
			max-width: 250px;
			min-height: 170px;
			
			a.lightbox {
				display: block;
				.t-center;
			}
			
			
			div.predpr-cod {
				.flex;
				.flex-vcenter;
				.flex-hcenter;
				margin: 10px;
			}
			
			div.predpr {
				border: 1px solid @g_gray400;
				padding: 5px;
				margin-right: 10px;
				max-width: 150px;
			}
			
			div.cod {
				// width: 150px;
			}
			
			div.descr {
				margin-left: 10px;
			}
			
			div.sel {
				background: @g_gray300;
				padding: 5px;
				
				word-wrap: break-word;
			}
			
			span {
				display: inline-block;
				background: @g_gray300;
				padding: 1px 3px;
				color: @g_gray700;
				cursor: pointer;
				.t90;
				.t-center;
				margin: 1px 0 0 0;
				
				&:hover {
					background: @g_gray400;
				}
			}
			
			i.date {
				.t80;
				display: inline-block;
				float: right;
				margin-right: 10px;
			}
			
			em {
				.t80;
				display: block;
				.t-center;
			}
	}
			
	/*
	div.image-block {
		display: inline-block;
		width: 180px;
		min-height: 240px;
		margin: 0 10px 10px 0;
		text-align: center;
		vertical-align: top;
		padding: 10px;
		// .border(#aaa);
		overflow: hidden;
		
		&:hover {
			// .bg(#f0f0f0);
		}
		
		
		img {
			max-height: 100px;
			width: auto;
			max-width: 100px;
			margin: 10px auto;
			// .border(#aaa);
			padding: 3px;
		}
		
		i.date {
			// .f > .size(11px);
			display: block;
		}
	}
	*/
}

// Загрузки 
div.new_cat_upload {

	input[name="f_cat_name"] {
		width: 200px;
	}

}

button.mso-save-ini {
	.button;
}

// jquery.fullscreen.js
.fScreen {
	position: relative;
	display: inline-block;
	width: 100%;
}

.fScreen.fScreen__active textarea {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
}

.fScreen a {
	position: absolute;
	display: block;
	right: 21px;
	top: 5px;
	padding-left: 7px;
	text-decoration: none;
	color:  #BBBBBB;
	background: rgba(0,0,0,0.05);
	cursor: pointer;
}

.fScreen a:hover {
	background: rgba(0,0,0,.5);
	color: #fff;
}

.fScreen__active {
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	border: 15px solid rgba(0,0,0,.6);
	z-index: 9999;
}

.fScreen__active textarea {
	resize: none;
}

html.my-html-no-scroll {
	overflow:  hidden;
}

// плагин пагинации
div.pagination {
	
	.mar20-t;
	.mar10-b;
	
	text-align: center;
	
	a, span, strong {
		.b-inline;
		.pad5;
		background: @gray500;
		color: @white;
		
		min-width: 28px;
		.t-center;
		margin: 0 1px;
	}
	
	a:hover {
		text-decoration: none;
		background: @blue;
	}
	
	strong {
		background: @button_bg_color;
		color: @button_text_color;
		font-weight: normal;
	}
	
	.pagination-first { .b-hide; }	
	// .pagination-start {}
	span.pagination-next { .b-hide; }
	span.pagination-prev { .b-hide; }
	.pagination-last { .b-hide; }
	
	.pagination-prev
	{
		float: left;
		margin-right: 5px;
		
		background: none;
		color: @button_bg_color;
		// border-color: @button_text_color;
		
		&:before {
			.icon-fa-normal;
			content: @fa-var-chevron-left;
			margin: 0;
		}
		
		&:hover {
			color: @blue;
			background: none;
		}
	}
	
	.pagination-next
	{
		float: right;
		margin-left: 5px;
		
		background: none;
		color: @button_bg_color;
		// border-color: @button_text_color;
		
		&:before {
			// @extend .icon-fa-normal;
			.icon-fa-normal;
			content: @fa-var-chevron-right;
			margin: 0;
		}
		
		&:hover {
			color: @blue;
			background: none;
		}
	}
	
}

// плагин paginator
.paginator {
	.mar40-t;
	.mar10-b;
}

// быстрая загрузка при редактрровании записи
#upload_filedrag {
	display: none;
	font-weight: bold;
	text-align: center;
	padding: 20px 0;
	margin: 20px 0;
	color: #555;
	border: 2px dashed #555;
	border-radius: 5px;
	cursor: default;
}

#upload_filedrag.hover {
	color: #36D900;
	border-color: #36D900;
	border-style: solid;
}

#upload_progress p {
	padding: 2px 5px;
	margin: 2px 0;
	border-radius: 5px;
	font-size: .9rem;
	background: #ffff4c;
}

#upload_progress p.success {
	background: #66ff66 none 0 0 no-repeat;
}

#upload_progress p.failure {
	background: #ff9999 none 0 0 no-repeat;
}

#upload_messages p.failure {
	padding: 2px 5px;
	margin: 2px 0;
	border-radius: 5px;
	font-size: .9rem;
	background: #ff9999;
}
