@import 'library.less';

@bgColor: #62B5F0; /*#70C862;#789B25;#f5d321;#E5562F;#399E5A;*/

body, html {
	font-family: futura-pt;
	font-size: 12px;
	line-height: 14px;
	.transition(@target: background-color);
}

#wrapper {
	position: relative;
	width: @min_width;
	/*max-width: @max_width;*/
	margin: 0 auto;
	min-height: 1000px;
	box-shadow: 0px 0px 40px rgba(0,0,0,0.5);
}

#header {
	.club {
		position: relative;
		height: 250px;
		background: url(../images/club-bg.jpg) no-repeat center center;
		
		a {
			display: block;
			width: 330px;
			height: 169px;              
			.absolute-center;
		}
	}
	.menu {
		width: 850px;
		margin: 40px auto;
		text-align: center;
		
		.items {
			height: 20px;
		}
		.item {
			display: inline-block;
			font-size: 20px;
			line-height: 20px;
			text-transform: uppercase;
			font-family: futura-pt-condensed;
			font-weight: 800;
			margin-right: 30px;
			.transition;
			
			&:hover {
				color: @blue;
			}
		}
		
		.text {
			display: none;
			margin-top: 25px;
			font-size: 16px;
			line-height: 23px;
			text-align: center;
		}
		
		.class-active {
			font-size: 40px;
			margin-top: -6px;
			pointer-events: none;
		}
		
		&[data-active-id="1"] {
			.text[data-id="1"] {
				display: block;
			}
			.item[data-id="1"] {
				.class-active;
			}
		}
		&[data-active-id="2"] {
			.text[data-id="2"] {
				display: block;
			}
			.item[data-id="2"] {
				.class-active;
			}
		}
		&[data-active-id="3"] {
			.text[data-id="3"] {
				display: block;
			}
			.item[data-id="3"] {
				.class-active;
				font-size: 32px;
			}
		}
		&[data-active-id="4"] {
			.text[data-id="4"] {
				display: block;
			}
			.item[data-id="4"] {
				.class-active;
			}
		}
	}
}

.page-index, #footer {

	.essay-banner {
		position: relative;
		display: block;
		height: 300px;
		overflow: hidden;
		
		.bg {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0px;
			top: 0px;
			z-index: 1;
			background: url(../images/essay-banner.jpg) no-repeat center top;
			.transition;
		}
		
		p {
			position: relative;
			font-family: futura-pt-condensed;
			font-weight: 800;
			font-size: 38px;
			line-height: 46px;
			text-transform: uppercase;
			color: #fff;
			z-index: 2;
			text-align: center;
			margin-top: 107px;
		}
		
		&:hover {
			.bg {
				.transition(@duration: 10s, @type: linear);
				.scale(1.2);
			}
		}
	}
	
	.feature {
		position: relative;
		display: block;
		height: 300px;
		overflow: hidden;
		
		.bg {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0px;
			top: 0px;
			z-index: 1;
			background: url(../images/art-guide.jpg) no-repeat center center;
			.transition;
			.cover;
		}
		
		p {
			position: relative;
			font-family: futura-pt-condensed;
			font-weight: 800;
			font-size: 80px;
			line-height: 100px;
			margin-top: 48px;
			text-transform: uppercase;
			color: #000;
			z-index: 2;
			text-align: center;
		}
		
		&:hover {
			.bg {
				.transition(@duration: 10s, @type: linear);
				.scale(1.2);
			}
		}
	}
	
	.posts {
		.cell {
			width: 50%;
			height: 500px;
			float: left;
			
			.post {
				position: relative;
				width: 100%;
				height: 100%;
				overflow: hidden;
				.box-sizing;
				
				.bg {
					position: absolute;
					width: 100%;
					height: 100%;
					left: 0px;
					top: 0px;
					z-index: 1;
					.transition;
					.cover;
				}
				.info {
					position: absolute;
					bottom: 0px;
					padding: 20px 60px 40px 60px;
					z-index: 2;
					
					/*background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 56%, rgba(255,255,255,0.7) 100%);
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(56%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.7)));
					background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.7) 56%,rgba(255,255,255,0.7) 100%);
					background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.7) 56%,rgba(255,255,255,0.7) 100%);
					background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.7) 56%,rgba(255,255,255,0.7) 100%);
					background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.7) 56%,rgba(255,255,255,0.7) 100%);
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#b3ffffff',GradientType=0 );*/
					
					
					.rubric {
						color: @blue;
						font-family: futura-pt-condensed;
						font-weight: 800;
						font-size: 16px;
						margin-bottom: 15px;
						text-transform: uppercase;
					}
					.title {
						font-family: futura-pt-condensed;
						font-weight: 800;
						font-size: 32px;
						line-height: 40px;
						margin-bottom: 15px;
						text-transform: uppercase;
					}
					.lead {
						font-size: 16px;
						line-height: 17px;
					}
				}
				
				&:hover {
					.bg {
						.transition(@duration: 10s, @type: linear);
						.scale(1.2);
					}
				}
			}
			
			.essay-quote {
				position: relative;
				width: 100%;
				height: 100%;
				overflow: hidden;
				background: #00BDC5;
				.box-sizing;
				
				.bg {
					position: absolute;
					width: 100%;
					height: 100%;
					left: 0px;
					top: 0px;
					z-index: 1;
					background: url(../images/bottle2.png) no-repeat center center;
					opacity: 0;
					.scale(0.9);
					.transition(@duration: 1s);
				}
				&:hover {
					/*.bg {
						.scale(1);
						opacity: 1;
					}*/
				}
				
				.info {
					position: relative;
					padding: 0 45px;
					text-align: center;
					color: #fff;
					z-index: 2;
					display: table;
					width: 100%;
					height: 100%;
					.box-sizing;
					
					.va {
						display: table-cell;
						vertical-align: middle;
					}
					
					.author {
						font-family: garamond-premier-pro;
						font-style: italic;
						font-size: 22px;
						line-height: 38px;
					}
					.quote {
						position: relative;
						font-family: futura-pt-condensed;
						font-weight: 800;
						font-size: 36px;
						line-height: 44px;
						text-transform: uppercase;
						padding: 45px 0;
						margin: 17px 0;
						
						&:before {
							content: '“';
							position: absolute;
							left: 50%;
							margin-left: -12px;
							top: 0px;
							font-family: futura-pt-condensed;
							font-weight: 800;
							font-size: 42px;
						}
						&:after {
							content: '“';
							position: absolute;
							left: 50%;
							margin-left: -12px;
							bottom: -19px;
							font-family: futura-pt-condensed;
							font-weight: 800;
							font-size: 42px;
						}
					}
				}
			}
			
		}
	}
	
	.calendar {
		position: relative;
		padding: 0 40px 40px 40px;
		overflow: hidden;
		
		a.title {
			position: relative;
			display: inline-block;
			font-family: futura-pt-condensed;
			font-weight: 800;
			font-size: 42px;
			line-height: 1;
			text-transform: uppercase;
			padding-top: 44px;
			z-index: 2;
		}
		
		.container {
			margin-top: 30px;
			
			.item {
				position: relative;
				float: left;
				display: block;
				width: 170px;
				margin-right: 40px;
				z-index: 3;
				
				.img {
					width: 100%;
					height: 200px;
					margin-bottom: 25px;
					background: #eee;
					.transition;
					.cover;
				}
				&:hover {
					.img {
						.scale(1.07);
					}
				}
				p.title {
					font-size: 14px;
					line-height: 17px;
					
					.time {
						/*font-family: garamond-premier-pro;*/
						/*font-style: italic;*/
						color: @blue;
						font-size: 10px;
						margin-right: 5px;
					}
				}
				
				&.absolute {
					position: static;
					width: 210px;
					
					.img {
						position: relative;
						height:	260px;
						margin-top: -60px;
						z-index: 2;
					}
					p.title {
						position: relative;
						z-index: 2;
						color: @blue;
					}
					
					&:before {
						content: '★';
						text-align: center;
						padding-right: 30px;
						position: absolute;
						height: 100%;
						width: 330px;
						margin-left: -60px;
						top: 0px;
						background: #FDFC5D;
						z-index: 1;
						padding: 20px 68px 0px 60px;
						font-family: Arial;
						font-weight: bold;
						font-size: 30px;
						color: @blue;
						text-transform: uppercase;
						.box-sizing;
					}
				}
				
			}
		}
	}
	
}

.page-essay {
	padding-bottom: 60px;
	
	.posts {
		width: 1170px;
		margin: 0 auto;
		
		.cell {
			width: 33.3333%;
			float: left;
			
			.post {
				position: relative;
				width: 350px;
				height: 460px;
				margin: 20px auto;
				background: #F5E0CF;
				text-align: center;
				padding: 30px 40px;
				.box-sizing;
				
				.name {
					font-size: 18px;
					line-height: 22px;
					margin-bottom: 27px;
					font-family: garamond-premier-pro;
					font-style: italic;
				}
				
				.title {
					font-size: 20px;
					line-height: 24px;
					font-family: futura-pt-condensed;
					font-weight: 800;
					text-transform: uppercase;
					margin-bottom: 37px;
				}
				.body {
					font-size: 16px;
					line-height: 19px;
					
					a {
						color: inherit;
						font-family: garamond-premier-pro;
						font-style: italic;
						text-decoration: underline;
					}
				}
				.like {
					position: absolute;
					margin: auto;
					left: 0;
					right: 0;
					bottom: 20px;
				}
				
				.bg {
					position: absolute;
					width: 100%;
					height: 100%;
					left: 0px;
					top: 0px;
					z-index: 1;
					background: url(../images/bottle.png) no-repeat center center;
					opacity: 0;
					.scale(0.9);
					.transition(@duration: 1s);
				}
				.info {
					position: relative;
					width: 100%;
					height: 100%;
					z-index: 2;
				}
				.like {
					z-index: 2;
				}
				
				&:hover {
					.bg {
						.scale(1);
						opacity: 1;
					}
				}
			}
			
		}
		
	}
	
	.publish-essay {
		position: relative;
		height: 300px;
		overflow: hidden;
		
		.bg {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0px;
			top: 0px;
			z-index: 1;
			background: url(../images/essay-publish-bg.jpg) no-repeat center center;
			.transition;
		}
		&:hover {
			.bg {
				.transition(@duration: 10s, @type: linear);
				.scale(1.2);
			}
		}
		.publish {
			position: absolute;
			top: 0px;
			left: 0px;
			right: 0px;
			bottom: 0px;
			margin: auto;
			width: 500px;
			height: 100px;
			z-index: 2;
			.transition;
			
			&:hover {
				box-shadow: 0px 4px 32px rgba(0,0,0,0.9),0px 0px 1px rgba(0,0,0,0.7) inset;
			}
		}
	}
	
	.jury {
		padding-bottom: 60px;
		
		.title {
			font-family: futura-pt-condensed;
			font-weight: 800;
			text-align: center;
			font-size: 20px;
			line-height: 38px;
			margin-bottom: 20px;
			text-transform: uppercase;
		}
		.container {
			width: 840px;
			margin: 0 auto;
		}
		
		.item {
			width: 33.3333%;
			float: left;
			
			.person {
				width: 260px;
				margin: 0 auto;
				text-align: center;
				
				a {
					color: inherit;
					text-decoration: underline;
				}
				
				.img {
					width: 137px;
					height: 137px;
					margin: 0 auto;
					margin-bottom: 15px;
					.border-radius;
					
					&.i1 {
						background-image: url(../images/jury-1.jpg);
					}
					&.i2 {
						background-image: url(../images/jury-2.jpg);
					}
					&.i3 {
						background-image: url(../images/jury-3.jpg);
					}
				}
				.name {
					font-family: futura-pt-condensed;
					font-weight: 800;
					text-transform: uppercase;
					font-size: 20px;
					line-height: 38px;
				}
				.desc {
					font-size: 16px;
					line-height: 23px;
				}
			}
		}
	}
	
	.count {
		font-family: futura-pt-condensed;
		font-weight: 800;
		text-align: center;
		font-size: 20px;
		line-height: 38px;
		text-transform: uppercase;
		margin: 50px 0 23px 0;
	}
	
	
}

.page-calendar {
	padding-bottom: 60px;
	
	.posts {
		width: 1170px;
		margin: 0 auto;
		
		.cell {
			width: 33.3333%;
			float: left;
			
			.post {
				position: relative;
				width: 350px;
				height: 560px;
				margin: 20px auto;
				padding: 25px;
				color: #fff;
				.transition(@duration:10s, @delay: 3s);
				.box-sizing;
				
				&:target, &.target {
					box-shadow: 0px 0px 40px 15px #FEE648;
					.transition(@duration: 1s, @delay: 1s);
				}
				
				.rubric {
					font-size: 12px;
					line-height: 15px;
					font-family: futura-pt-condensed;
					font-weight: 800;
					text-transform: uppercase;
					margin-bottom: 8px;
					
					.time {
						margin-right: 10px;
						
						&:empty {
							display: none;
						}
					}
				}
				
				.img {
					width: 100%;
					height: 190px;
					.cover;
				}
				
				.title {
					font-size: 20px;
					line-height: 24px;
					font-family: futura-pt-condensed;
					font-weight: 800;
					text-transform: uppercase;
					margin-bottom: 10px;
					margin-top: 14px;
				}
				
				.place {
					display: block;
					font-size: 14px;
					text-decoration: underline;
					margin-bottom: 15px;
				}
				
				.body {
					font-size: 14px;
					line-height: 15px;
					
					a {
						color: inherit;
						font-family: garamond-premier-pro;
						font-style: italic;
						text-decoration: underline;
					}
				}
				.like {
					position: absolute;
					margin: auto;
					left: 0;
					right: 0;
					bottom: 20px;
				}
				
			}
			
			&:nth-child(1n) {
				.post {background: #00B29C;}
			}
			&:nth-child(2n) {
				.post {background: #FF7B44;}
			}
			&:nth-child(3n) {
				.post {background: #7C64CE;}
			}
			
			&.absolute {
				width: 66.6666%;
				
				.post {
					background: #0A46A7;
					width: 730px;
					
					.img {
						float: left;
						width: 280px;
						height: 100%;
						margin-top: -22px;
					}
					.rubric, .title, .body, .place {
						margin-left: 315px;
					}
					.title {
						width: 300px;
						font-size: 30px;
						line-height: 40px;
						margin-top: 20px;
						margin-bottom: 60px;
					}
					.body {
						width: 300px;
					}
				}
			}
		}
		
	}
}

.page-game {
	.posts, .active-game {
		.cell {
			width: 50%;
			height: 500px;
			float: left;
			
			.post {
				position: relative;
				width: 100%;
				height: 100%;
				overflow: hidden;
				.box-sizing;
				
				.bg {
					position: absolute;
					width: 100%;
					height: 100%;
					left: 0px;
					top: 0px;
					z-index: 1;
					.transition;
					.cover;
				}
				.info {
					position: absolute;
					bottom: 0px;
					padding: 20px 60px 40px 60px;
					z-index: 2;
					
					.rubric {
						color: @blue;
						font-family: futura-pt-condensed;
						font-weight: 800;
						font-size: 16px;
						margin-bottom: 15px;
						text-transform: uppercase;
					}
					.title {
						font-family: futura-pt-condensed;
						font-weight: 800;
						font-size: 32px;
						line-height: 40px;
						margin-bottom: 15px;
						text-transform: uppercase;
					}
					.lead {
						font-size: 16px;
						line-height: 17px;
					}
				}
				
				&:hover {
					.bg {
						.transition(@duration: 10s, @type: linear);
						.scale(1.2);
					}
				}
			}
		}
	}
	
	.active-game {
		.cell {
			float: none;
			margin: 0 auto;
		}
	}
	
	>.title {
		font-family: futura-pt-condensed;
		font-weight: 800;
		font-size: 19px;
		line-height: 1;
		margin:  60px 0 30px 0px;
		text-transform: uppercase;
		text-align: center;
	}
	
	.posts {
		/*padding-bottom: 220px;*/
		
		.post {
			opacity: 0.6;
			pointer-events: none;
			
			.lead {
				font-size: 30px !important;
				line-height: 30px !important;
				padding-bottom: 30px;
			}
		}
	}
	
}

.essay-item {
	padding: 40px 20px 110px 20px;
	
	.left, .right {
		float: left;
	}
	
	.left {
		width: 110px;
		margin-right: 40px;
		
		.line {
			width: 100%;
			height: 1px;
			background: @blue;
			margin: 25px 0;
		}
	}
	.right {
		width: 750px;
		
		.name {
			font-family: garamond-premier-pro;
			font-style: italic;
			font-size: 20px;
			line-height: 24px;
			margin-bottom: 15px;
		}
		.title {
			text-transform: uppercase;
			font-family: futura-pt-condensed;
			font-weight: 800;
			font-size: 40px;
			line-height: 50px;
			margin-bottom: 30px;
		}
		.body {
			font-family: garamond-premier-pro;
			font-size: 18px;
			line-height: 28px;
		}
	}
	
	.comments {
		padding-top: 60px;
	}
	
	.no-comments {
		font-size: 20px;
		display: none;
		padding-top: 40px;
		text-align: center;
		
		span {
			text-decoration: underline;
			color: #0196E4;
			cursor: pointer;
		}
	}
	
}

.game-item {
	padding: 40px 20px 110px 20px;
	background: url(../images/game-footer.jpg) no-repeat center bottom;
	
	.left, .right {
		float: left;
	}
	
	.left {
		width: 110px;
		margin-right: 40px;
	}
	.right {
		width: 720px;
		
		.title {
			text-transform: uppercase;
			font-family: futura-pt-condensed;
			font-weight: 800;
			font-size: 40px;
			line-height: 50px;
			margin-bottom: 30px;
		}
		.lead {
			font-size: 20px;
			line-height: 24px;
		}
		
		.test-container {
			padding: 30px 0;
			
			.question {
				text-transform: uppercase;
				font-family: futura-pt-condensed;
				font-weight: 800;
				font-size: 30px;
				line-height: 36px;
			}
			
			.answers {
				padding: 20px 0;
				
				.answer {
					width: 100%;
					text-transform: uppercase;
					font-family: futura-pt-condensed;
					font-weight: 800;
					font-size: 19px;
					line-height: 80px;
					cursor: pointer;
					
					.num {
						position: relative;
						float: left;
						width: 90px;
						z-index: 2;
					}
					p {
						position: relative;
						float: left;
						z-index: 2;
					}
					
					.bg {
						position: absolute;
						z-index: 1;
						left: 0px;
						width: 100%;
						height: 80px;
						.transition;
						
						.true, .false {
							position: absolute;
							right: 100px;
							display: none;
							color: #fff;
						}
						
					}
					
					&:hover {
						.bg {
							background: #ccc;
						}
					}
					
					&.wrong {
						.bg {
							background: #FF2B38;
							
							.false {
								display: block;
							}
						}
						.num, p {
							color: #fff;
						}
					}
					&.correct {
						.bg {
							background: #89C654;
							
							.true {
								display: block;
							}
						}
						.num, p {
							color: #fff;
						}
					}
					
					&.correct_but_wrong {
						p {
							color: #89C654;
						}
					}
					
				}
			}
			
			&.lock {
				pointer-events: none;
			}
		}
	}
	
	.rules {
		text-align: center;
		font-size: 14px;
		padding-bottom: 10px;
		
		a {
			color: @blue;
			text-decoration: underline;
		}
	}

}

.form-essay-add {
	padding: 50px 70px;
	
	h2 {
		text-transform: uppercase;
		font-family: futura-pt-condensed;
		font-weight: 800;
		font-size: 30px;
		line-height: 36px;
		text-align: center;
		color: @blue;
	}
	.info {
		font-size: 16px;
		line-height: 23px;
		margin-bottom: 30px;
		margin-top: 20px;
		text-align: center;
	}
	
	.label {
		color: #828282;
		font-size: 16px;
		line-height: 23px;
		margin-bottom: 4px;
	}
	input, textarea {
		border: 1px solid #DEDEDE;
		margin: 0;
		padding: 8px;
		line-height: 20px;
		font-size: 20px;
		background: #fff;
		width: 100%;
		margin-bottom: 20px;
		.transition;
		
		&:focus {
			outline: none;
			border: 1px solid @blue;
		}
	}
	
	textarea {
		font-family: garamond-premier-pro;
		font-size: 18px;
		line-height: 28px;
		height: 600px;
		resize: none;
	}
	
	.publish {
		width: 376px;
		margin: 25px auto 0 auto;
	}
	
	.rules {
		text-align: center;
		font-size: 14px;
		
		a {
			color: @blue;
			text-decoration: underline;
		}
	}
}

.like {
	width: 50px;
	height: 50px;
	cursor: pointer;
	background-image: url(../images/like-button.png);
	.border-radius;
	
	i {
		display: block;
		color: @blue;
		font-size: 15px;
		line-height: 50px;
		margin-left: 60px;
		text-align: left;
	}
	
	&:hover {
		background-position: -50px 0px;
		
		i {
			color: #FB6D2E;
		}
	}
	
	&[data-liked="1"], &[data-liked="true"] {
		background-position: -100px 0px;
		pointer-events: none;
		
		i {
			color: #FB6D2E;
		}
	}
}

.abs-like {
	margin: 0 auto;
	padding-top: 30px;
	width: 310px;
	text-align: center;
	
	a {
		display: inline-block;
		text-transform: uppercase;
		width: 230px;
		font-size: 16px;
		line-height: 1;
		color: @blue;
		text-decoration: underline;
		text-align: left;
	}
	
	.likebox {
		position: relative;
		display: inline-block;
		overflow: hidden;
		width: 50px;
		height: 21px;
		margin-right: 15px;
		.scale(1.328);
		
		iframe {
			display: block;
			position: absolute;
			left: -65px;
			top: -32px;
		}
	}
}

@media screen and (min-width: @max_width) {
	#wrapper {
		/*box-shadow: 0px 0px 40px rgba(0,0,0,0.5);*/
	}
}