@font-face {
	font-family: 'flounder';
	src: url('fonts/2CCDAB_0_0.eot');
	src: url('fonts/2CCDAB_0_0.eot?#iefix') format('embedded-opentype'),
		 url('fonts/2CCDAB_0_0.woff2') format('woff2'),
		 url('fonts/2CCDAB_0_0.woff') format('woff'),
		 url('fonts/2CCDAB_0_0.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

.transition(@target: all, @duration: 400ms, @type: ease, @delay: 0s) {
	-webkit-transition: @target @duration @type @delay;
	-moz-transition: @target @duration @type @delay;
	-ms-transition: @target @duration @type @delay;
	-o-transition: @target @duration @type @delay;
	transition: @target @duration @type @delay;
}

.box-sizing {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.cover {
	background-size: cover;
	background-position: center center;
}

.clear {
	clear: both;
}

.scale(@value: 1) {
	-webkit-transform: scale( @value );
	-moz-transform: scale( @value );
	-ms-transform: scale( @value );
	-o-transform: scale( @value );
	transform: scale( @value );
}

.border-radius( @value: 1000px ) {
	-webkit-border-radius: @value;
	border-radius: @value;
	-webkit-background-clip: padding-box; 
	-moz-background-clip: padding; 
	background-clip: padding-box;
}

.part-radius( @tl: 0px, @tr: 0px, @br: 0px, @bl: 0px ) {
	border-radius: @tl @tr @br @bl;
     -moz-border-radius: @tl @tr @br @bl;
     -webkit-border-radius:  @tl @tr @br @bl;
}

/**/

@blue: #3143FF;
@red: #D03743;
@white: #ffffff;

body, html {
	width: 100%;
	height: 100%;
}

.show-hide {
	opacity: 1;
	.transition(@target: opacity, @duration: 300ms);
	
	&.hidden {
		opacity: 0;
	}
}

#page {
	position: relative;
	width: 100%;
	height: 100%;
	
	.show-hide-results {
		position: fixed;
		top: 20px;
		right: 20px;
		height: 50px;
		width: 150px;
		background-color: @blue;
		z-index: 10;
		
		.option {
			position: absolute;
			width: 100%;
			height: 100%;
			line-height: 50px;
			font-family: 'flounder';
			color: @white;
			text-align: center;
			left: 0;
			top: 0;
			cursor: pointer;
			display: none;
			text-decoration: underline;
			font-size: 16px;
			
			&.shown {
				display: block;
			}
		}
		
		&:hover {
			background-color: @red;
			
			.option {
				text-decoration: none;
			}
		}
	}
	
	.start {
		z-index: 1;
		width: 100%;
		height: 100%;
		display: none;
		background-color: @blue;
		
		&.shown {
			display: block;
		}
		
		.container {
			position: absolute;
			width: 1140px;
			height: 600px;
			left: 50%;
			top: 50%;
			margin-left: -570px;
			margin-top: -300px;
			
			.banner {
				width: 300px;
				height: 500px;
				right: 0;
				top: 0;
				position: absolute;
			}
		
			.title {
				position: absolute;
				width: 896px;
				height: 543px;
				top: 0;
				left: 0;
				background-image: url(../images/start.png);
			}
			
			.description {
				color: @white;
				font-family: 'trivia-grotesk';
				font-size: 14px;
				line-height: 17px;
				position: absolute;
				left: 0px;
				top: 200px;
				width: 300px;
			}
			
			.go {
				position: absolute;
				width: 381px;
				height: 96px;
				top: 470px;
				left: 0px;
				background-image: url(../images/start_button.png);
				background-position: 0px 0px;
				cursor: pointer;
				
				&:hover {
					background-position: 0px -96px;
				}
			}
		}
	}

	.action {
		@width: 1100px;
		@height: 500px;
	
		position: relative;
		z-index: 1;
		width: 100%;
		height: 100%;
		background-color: @blue;
		display: none;
		
		&.shown {
			display: block;
		}
	
		.container {
			position: absolute;
			z-index: 3;
			width: @width;
			height: @height;
			left: 50%;
			top: 50%;
			margin-left: -@width / 2;
			margin-top: -@height / 2;
		
			.title {
				width: 660px;
				height: 169px;
				margin: 0 auto;
				background-image: url(../images/name.png);
			}
			
			.counter {
				width: 100px;
				height: 17px;
				color: @white;
				font-family: 'trivia-grotesk';
				font-size: 14px;
				line-height: 17px;
				margin: 17px auto;
				text-align: center;
			}
			
			.thing {
				@gap: 30px;
				@w: @width / 2;
				@button_width: 354px / 3;
				@button_height: 122px;
			
				width: @w;
				float: left;
				padding: 0px @gap;
				.box-sizing;
			
				.button {
					position: relative;
					left: -15px;
					float: left;
					cursor: pointer;
					width: @button_width;
					height: @button_height;
					background-image: url(../images/buttonsprite.png);
					background-position: -@button_width * 0 0px;
					
					&:hover {
						background-position: -@button_width * 1 0px;
					}
					
					&:active {
						background-position: -@button_width * 2 0px;
					}
					
					&.disabled {
						pointer-events: none;
					}
				}
				
				.name {
					font-family: 'flounder';
					width: @w - @gap * 2 - @button_width;
					float: left;
					height: @button_height;
					line-height: @button_height;
					color: @white;
					font-size: 36px;
					white-space: nowrap;
					.show-hide;
					text-shadow: 1px 1px 2px #000000;
					
					&.two {
						font-size: 32px;
						line-height: 50px;
					}
				}
				
				.description {
					text-align: left;
					color: @white;
					width: @w * 0.618;
					font-family: 'trivia-grotesk';
					font-size: 14px;
					line-height: 17px;
					.show-hide;
					text-shadow: 1px 1px 2px #000000;
				}
				
				&.left {
					.button {
						float: right;
						left: 15px;
					}
					
					.name {
						float: right;
						text-align: right;
					}
				
					.description {
						float: right;
						text-align: right;
					}
				}
			}
		}
		
		.thing-image {
			.show-hide;
			
			width: 30%;
			height: 100%;
			position: absolute;
			z-index: 1;
			top: 0;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center center;
			
			&.left {
				left: 0;
			}
			
			&.right {
				right: 0;
			}
		}
	}
	
	.results {
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		width: 100%;
		background-color: @blue;
		display: none;
		padding: 100px 0px;
		
		&.shown {
			display: block;
		}
		
		.tables {
			@w: 800px;
			@h: 60px;
		
			position: relative;
			width: 100%;
			
			.table {
				position: relative;
				width: 100%;
				padding-bottom: @h;
				display: none;
				
				&.shown {
					display: block;
				}
				
				.title {
					width: 984px;
					height: 195px;
					margin: 0 auto;
					margin-bottom: 30px;
					
					&.qual {
						background-image: url(../images/result.png);
					}
					
					&.comp {
						background-image: url(../images/result2.png);
					}
					
					&.fin {
						background-image: url(../images/result3.png);
					}
				}
				
				.row {
					border-bottom: 1px solid @white;
					/*width: 100%;*/
					width: @w;
					margin: 0 auto;
					color: @white;
					font-family: 'flounder';
					font-size: 20px;
					
					&:last-child {
						border-bottom: none;
					}
					
					.container {
						width: @w;
						margin: 0 auto;
					}
					
					.index {
						width: @w * 0.05;
						height: @h;
						float: left;
						line-height: @h;
					}
					
					.name {
						width: @w * 0.45;
						height: @h;
						float: left;
						line-height: @h;
					}
					
					.rating {
						position: relative;
						width: @w * 0.5;
						height: @h;
						float: left;
						
						.bar {
							position: absolute;
							left: 0px;
							top: 0px;
							height: 100%;
							background-color: @red;
						}
						
						.value {
							position: absolute;
							width: 15%;
							text-align: center;
							top: 0px;
							height: 100%;
							line-height: @h;
						}
					}
				}
			}
		}
	}
}