* {
	-webkit-font-smoothing:antialiased !important;
}

.transition(...){
	-webkit-transition: @arguments;
	-moz-transition: @arguments;
	-o-transition: @arguments;
	-ms-transition: @arguments;
	transition: @arguments;
}

.transform(...){
	-webkit-transform: @arguments;
	-moz-transform: @arguments;
	-ms-transform: @arguments;
	-o-transform: @arguments;
	transform: @arguments;
}

.ul {
	.ls-none(){
		list-style: none;
		margin: 0;
		padding: 0;
	}
}

.textbox {
	.placeholder(){
		.color(@color){
			&:-moz-placeholder {
				color: @color;
			}
			&:-ms-input-placeholder {
				color: @color;
			}
			&::-webkit-input-placeholder {
				color: @color;
			}
		}
	}
}

body {
	margin: 0;
	padding: 0;
	
	font-family: "Helvetica Neue Light", "Helvetica Neue", 
		Helvetica, Arial, "Lucida Grande", sans-serif;
	/* "HelveticaNeue-Light", */
	/*font-weight: 300 !important;*/
	/*font-family: "PT Sans", sans-serif;*/
	font-size: 14px;
	
	h1,
	h2,
	h3,
	h4,
	h5
	{
		margin: 0;
		padding: 0;
		
		a {
			font-size: inherit;
		}
	}
	
	hr {
		border: none;
		border-top: 1px solid #E7E7E7;
	}
	
	a {
		color: #0181C5;
		.transition(color .2s;);
		
		&:hover {
			color: darken(#0181C5, 15%);
			text-decoration: underline;
		}
		
		&.v-button {
			display: inline-block;
			box-sizing: border-box;
			padding: 10px 30px;
			background-color: white;
			border: 1px solid #ACACAC;
			border-radius: 3px;
			color: #666;
			text-decoration: none;
			font-size: 14px;
			cursor: pointer;
			.transition(background-color .2s;);
			
			&:hover {
				background-color: #ACACAC;
				color: white;
				text-decoration: none;
			}
			
			&:active {
				background-color: #ACACAC;
				text-decoration: none;
			}
			
			&.v-button-blue {
				color: white;
				background-color: #0181C5;
				border: 1px solid lighten(#0181C5, 15%);
				border-right-color: darken(#0181C5, 15%);
				border-bottom-color: darken(#0181C5, 15%);
				/*border: none;*/
				
				&:hover {
					background-color: lighten(#0181C5, 15%);
				}
				
				&:active {
					background-color: darken(#0181C5, 15%);
				}
				
				>i {
					color: #FFE515;
				}
			}

			&.v-button-green {
				color: white;
				background-color: #5cb85c;
				border: 1px solid lighten(#3e8f3e, 15%);
				border-right-color: darken(#3e8f3e, 15%);
				border-bottom-color: darken(#3e8f3e, 15%);
				/*border: none;*/

				&:hover {
					background-color: lighten(#5cb85c, 15%);
				}

				&:active {
					background-color: darken(#5cb85c, 15%);
				}

				>i {
					color: white;
				}
			}

			&.v-button-red {
				color: white;
				background-color: #d9534f;
				border: 1px solid lighten(#c12e2a, 15%);
				border-right-color: darken(#c12e2a, 15%);
				border-bottom-color: darken(#c12e2a, 15%);
				/*border: none;*/

				&:hover {
					background-color: lighten(#d9534f, 15%);
				}

				&:active {
					background-color: darken(#d9534f, 15%);
				}

				>i {
					color: white;
				}
			}

			&.v-button-yellow,
			&.v-button-pink {
				padding: 10px 45px 7px;
				border: none;
				color: white;
				border-bottom-width: 3px;
				border-bottom-style: solid;
			}

			&.v-button-yellow {
				border-bottom-color: #C85900;
				background-color: #F29200;

				&:hover {
					background-color: #FFA614;
				}

				&:active {
					background-color: #C85900;
				}
			}

			&.v-button-pink {
				border-bottom-color: #990333;
				background-color: #C22550;

				&:hover {
					background-color: #D63964;
				}

				&:active {
					background-color: #990333;
				}
			}
		}
	}
	
	blockquote {
		border-left: 5px solid #fddb00;
		box-sizing: border-box;
		padding: 15px;
		padding-left: 15px;
		margin: 0;
		margin-left: 30px;
		font-style: italic;
		background-color: white;
		color: #666;
		font-weight: bold;
	}
	
	div.preview {
		background: url('/img/no_image.jpg') center no-repeat;
		background-size: cover;
		height: 180px;
	}
	
	div.avatar {
		background: #CCC no-repeat center;
		background-size: cover;
		width: 25px;
		height: 25px;
		border-radius: 500px;
		text-align: center;
		
		&.avatar-2x {
			width: 50px;
			height: 50px;
			
			>i {
				padding: 8px 0;
				
				&:before {
					font-size: 29px;
				}
			}
		}
		
		&.avatar-4x {
			width: 100px;
			height: 100px;
			
			>i {
				padding: 16px 0;
				
				&:before {
					font-size: 59px;
				}
			}
		}
		
		&.avatar-8x {
			width: 200px;
			height: 200px;
			
			>i {
				padding: 22px 0;
				
				&:before {
					font-size: 135px;
				}
			}
		}
		
		>i {
			display: block;
			padding: 4px 0;
			
			&:before {
				float: none;
				margin: 0;
				font-size: 15px;
				color: white;
			}
		}
	}
	
	a.icon,
	div.icon {
		display: inline-block;
		text-decoration: none;
		line-height: 1;

		>* {
			display: table-cell !important;
			text-align: center;
			vertical-align: middle;
		}

		>i {
			&:first-child {
				padding-right: 10px;
			}

			&:last-child {
				padding-left: 10px;
			}
		}
	}
	
	a.icon>span {
		text-decoration: underline;
	}
	
	input,
	select,
	textarea {
		outline: none
	}

	.button-yellow {
		background: #FCDF38 !important;
		color: #1482C4 !important;
		font-size: 14px;
		padding: 10px 28px;
		font-weight: bold;

		float: right;

		>i {
			vertical-align: text-bottom;
		}

		&:hover {
			background: #1482C4 !important;
			color: #FCDF38 !important;
		}
	}

	a.button,
	input[type='button'].button,
	input[type='submit'].button,
	div.fileupload {
		display: inline-block;
		border: none;
		background-color: #A7A7A7;
		color: white;
		font-size: 12px;
		box-sizing: border-box;
		margin: 0;
		padding: 5px 10px;
		.transition(background-color .1s;);
		
		&:hover {
			background-color: #666;
			text-decoration: none;
		}
		
		&:active {
			background-color: #333;
		}
		
		&.x2 {
			padding: 15px 30px;
			
			&.fileupload>div>div {
				padding: 15px 30px;
			}
		}
		
		&.blue {
			background-color: #0181C5;
			
			&:hover {
				background-color: darken(#0181C5, 5%);
			}
			
			&:active {
				background-color: darken(#0181C5, 15%);
			}
		}
		
		&.fileupload {
			padding: 0;
			text-align: left;
			
			>div>div {
				padding: 5px 10px;
			}
			
			>div:first-child {
				>input[type="file"] {
					position: absolute;
					opacity: 0;
					margin: 0;
					z-index: 999;
				}
			}
			
			>div:last-child {
				a[data-uiAction='remove']:hover {
					text-decoration: none;
				}
			}
		}
	}
	
	input[type='text'].textbox,
	input[type='password'].textbox,
	textarea.textbox {
		width: 100%;
		border: 1px solid #A7A7A7;
		border-radius: 3px;
		background-color: white;
		box-sizing: border-box;
		margin: 0;
		padding: 10px 10px;
		font-size: 14px;
		/*font-weight: bold;*/
		.transition(border-color .25s, background-color .25s, color .25s;);
		.textbox.placeholder.color(#DADADA);
		
		&:not([disabled='disabled']):hover,
		&:focus {
			border-color: black;
			color: black;
		}

		&[disabled='disabled'] {
			opacity: .3;
		}
	}
	
	div[data-ui='textbox'] {
		display: table;
		width: 100%;
		background-color: white;
		border: 1px solid #dadada;
		box-sizing: border-box;
		.transition(border-color .2s;);
		cursor: text;
		
		&:hover {
			border-color: #F29200;
		}
		
		>* {
			display: table-cell;
			vertical-align: middle;
			color: #666;
			padding: 10px 5px;
			box-sizing: border-box;
			
			&:last-child {
				padding-left: 0;
			}
		}
		
		>i {
			font-size: 14px;
			text-align: left;
			
			&:first-child {
				text-align: right;
			}
		}
		
		>div>input {
			width: 99%;
			border: none;
			font-size: 14px;
		}
		
	}

	div[data-uiGrid] {
		box-sizing: border-box;

		>div {
			cursor: pointer;
			float: left;
			box-sizing: border-box;

			&:last-child {
				float: none;
				width: auto;
				height: auto;
				margin: 0;
				border: none;
				clear: both;
			}
		}
	}

	>header>div>div,
	>section>div>div,
	>footer>div>div {
		width: 960px;
		margin: 0 auto;
	}
}

/* HEADER */
body {
	>header {
		div[data-ui-popup] {
			position: absolute;
			box-shadow: 0 0 10px rgba(0,0,0,.3);
			color: #111;
			z-index: 1001;
			
			>span.bubble {
				display: block;
				position: absolute;
				width: 20px;
				height: 20px;
				background-color: white;
				.transform(rotate(45deg););
				margin-top: -10px;
				margin-left: 10px;
				box-shadow: 0 0 10px rgba(0,0,0,.3);
			}
			
			>div {
				position: relative;
				background-color: white;
				padding: 10px
			}
			
			
		}
		
		>div {
			>div>div {
				display: table;
				width: 100%;
				
				>div {
					display: table-cell;
					vertical-align: middle;
				}
			}
			
			&:first-child {
				position: relative;
				background-color: #666;
				z-index: 999;
				
				a {
					color: #C9C9C9;

					&:hover {
						text-decoration: none;
					}
				}
				
				>div>div>div {

					>div[data-uid='logo'] {
						height: 1px;
					}

					>ul {
						.ul.ls-none;
						display: inline-table;
						border-left: 1px solid lighten(#666, 5%);
						border-right: 1px solid lighten(#666, 5%);

						>li {
							display: inline-table;
							border-left: 1px solid darken(#666, 5%);
							border-right: 1px solid lighten(#666, 5%);

							&:first-child {
								border-left: none;
							}

							&:last-child {
								border-right: none;
							}

							>a {
								display: block;
								padding: 10px 20px;

								&:hover	{
									background-color: #4B4B4B;
								}
							}
						}
					}
					
					&:first-child {
						width: 1%;
						vertical-align: top;
					}

					&:last-child {
						text-align: right;
					}
				}
			}
			
			&:last-child {
				position: relative;
				background-color: white;
				//box-shadow: 0 0 30px rgba(0,0,0,.5);
				border-bottom: 1px solid #F3F3F3;
				z-index: 998;
				
				>div>div>div {
					&:first-child {
						padding: 25px 0px 25px 160px;
/*						padding-left: 160px;
						padding-right: 30px;*/
					}
					
					&:last-child {
						width: 15%;
					}
					
					>ul[data-ui-menu],
					>ul[data-ui-menu] ul {
						.ul.ls-none;
					}
					
					>ul[data-ui-menu='main'] {
						>li {
							display: inline-block;
							margin-right: 15px;
							text-align: center;
							font-size: 16px;
							font-weight: 600;
							
							&.selected {
								>a,
								>div {
									background-color: #FFF9DC;
									color: #666;
								}
							}
							
							>a,
							>div {
								display: block;
								padding: 5px;
							}
							
/*							>ul {
								display: none;
								position: absolute;
								padding:30px 20px;
								padding-right:100px;
								background-color: white;
								border-top: 2px solid #0181C5;
								box-shadow: 0 7px 15px rgba(0,0,0,.25);
								z-index: 999;
								
								>li {
									text-align: left;
									
									>div,
									>a {
										display: block;
										padding-top: 25px;
										font-weight: 600;
										text-transform: uppercase;
										color: #0181C5;
									}
									
									&:first-child>div,
									&:first-child>a {
										padding-top: 0;
									}
									
									>ul>li {
										padding: 5px 0;
										
										>a {
											color: #666;
										}
									}
								}
							}*/
						}
					}
					
					>ul[data-ui-menu='profile'] {
						display: table;
						width: 100%;
						table-layout: fixed;
						
						>li {
							display: table-cell;
							text-align: center;
							vertical-align: middle;
							line-height: 0;
							
							&:hover {
								background-color: #EEE;
							}
							
							>a {
								/*display: block;*/
								padding: 32px 5px 31px;
								color: #666;
								font-size: 14px;
								text-decoration: none !important;
								
								&[href='/profile'] {
									padding: 12px 5px;
								}
								
								>div.avatar {
									margin: 0 auto;
									
									>i {
										padding: 21px 0
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

/* SECTION */
body>section {
	
	padding-bottom: 50px;
	
	div.paginator {
		display: table;
		width: 100%;

		>div {
			display: table-cell;
			box-sizing: border-box;
			text-align: center;
			vertical-align: middle;
			height: 50px;

			&:nth-child(odd) {
				width: 50px;
				border: 1px solid #AAA;

				&:hover {
					border-color: #0181C5;

					>a {
						color: #0181C5;
					}
				}

				>a {
					display: table;
					width: 100%;
					padding: 17px 0;
					text-decoration: none;
					color: #AAA;

					&:hover {
						text-decoration: none;
					}

					>* {
						display: table-cell;
						text-align: center;
						vertical-align: middle;
					}
				}
			}

			&:nth-child(2)>ul {
				.ul.ls-none;
				display: inline-table;

				>li {
					display: inline-table;

					>a {
						display: block;
						padding: 15px 5px;
						font-size: 14px;

						&.current {
							color: black;
							font-weight: bold;
							text-decoration: none !important;
						}
					}
				}
			}
		}
	}

	div.tabbar {
		>ul {
			.ul.ls-none;
			display: inline-table;

			>li {
				display: inline-table;

				&.selected>a {
					border: 1px solid #AAA;
					border-bottom: none;
					color: black;
					font-weight: bold;
					text-decoration: none !important;
				}

				>a {
					display: block;
					padding: 15px 25px;
					border-bottom: 1px solid #AAA;
					text-decoration: underline;
				}
			}
		}
	}

	>div.header {
		padding: 15px 0;
		background-color: #EEE;
		/*background-color: transparent;*/
		/*font-size: 25px;*/
		text-transform: uppercase;
		height: auto;
		margin-bottom: 30px;

		>div {
			padding-left: 160px;
			box-sizing: border-box;

			/*			h1 {
							text-transform: uppercase;
						}*/
		}
	}

	>div.headerNew {
		height: 51px;

		>div {
			padding-left: 160px;
			box-sizing: border-box;
			font-size: 18px;

			.breadcrumb {
				padding-left: 0;
				margin: 12px 0 0 0;
			}

			.breadcrumb:after {
				content: "";
				display: table;
				clear: both;
			}
			.breadcrumb li {
				display: inline-block;
				float: left;
				margin: 0.5em 0;
			}
			.breadcrumb li::after {
				display: inline-block;
				content: '\00bb';
				margin: 0 .6em;
				color: #0181C5;
			}
			.breadcrumb li:last-of-type::after {
				display: none;
			}
			.breadcrumb li > * {
				display: inline-block;
				color: #0181C5;
			}
			.breadcrumb li.current > * {
				color: #000;
			}
			.no-touch .breadcrumb a:hover {
				color: #000;
			}
			.breadcrumb.custom-separator li::after {
				content: '';
				height: 16px;
				width: 16px;
				vertical-align: middle;
			}
			.breadcrumb.custom-icons li > *::before {
				content: '';
				display: inline-block;
				height: 20px;
				width: 20px;
				margin-right: .4em;
				margin-top: -2px;
				vertical-align: middle;
			}
		}
	}

}

/* FOOTER */
body {
	>footer {
		>div {
			background-color: #1F1F1F;
			
			&:first-child {
				background-color: #666;
				
				>div>ul {
					.ul.ls-none;
					display: table;
					table-layout: fixed;
					width: 100%;
					
					>li {
						display: table-cell;
						vertical-align: middle;
						
						>a {
							display: block;
							background-position: left center;
							background-repeat: no-repeat;
							padding: 20px 40px 20px 50px;
							color: white;
							
							&.facebook {
								background-image: url('/img/frontend/facebook.png');
							}
							
							&.vkontakte {
								background-image: url('/img/frontend/vkontakte.png');
							}
							
							&.twitter {
								background-image: url('/img/frontend/twitter.png');
							}
							
							&.youtube {
								background-image: url('/img/frontend/youtube.png');
							}
							
							&.rss {
								background-image: url('/img/frontend/rss.png');
							}
							
							&.instagram {
								background-image: url('/img/frontend/instagram.png');
							}
							
							&.googleplus {
								background-image: url('/img/frontend/googleplus.png');
							}
						}
					}
				}
			}
			
			&:nth-child(2) {
				background-color: #333;
				
				>div {
					height: 150px;

					>ul {
						.ul.ls-none;
						display: table;
						width: 100%;

						>li {
							display: table-cell;
							text-align: center;
							vertical-align: middle;

							&:first-child {
								width: 13%;
								text-align: right;
								vertical-align: top;

								img {
									width: 100px;
								}
							}

							&:nth-child(2) {
								padding: 0 15px;

								ul[data-ui-menu='footer'] {
									.ul.ls-none;
									display: table;
									table-layout: fixed;
									width: 100%;

									>li {
										display: table-cell;
										text-align: center;

										>a {
											color: white;
											text-transform: uppercase;
										}
									}
								}
							}

						}
					}
				}
			}
			
			&:last-child {
				font-size: 11px;
				color: #666;
				padding: 10px 0;
			}
		}
	}
}
