@import "library.less";

.page-contest {

	.contest-form {
		background: @orange;
		width: 100%;
		margin: 0 auto;
		padding: 40px 0;
		
		.container {
			position: relative;
			width: 1000px;
			margin: 0 auto;
		}
		.form-container {
			position: relative;
			width: 730px;
		}
	}
	
	.col1, .col2 {
		float: left;
		width: 50%;
		.box-sizing;
		
		&.col1 {
			padding-right: 17px;
		}
		&.col2 {
			padding-left: 17px;
		}
		
		&.left-larger-than-right {
			width: 175px;
			padding-top: 33px;
		}
		&.right-smaller-than-left {
			width: 555px;
		}
	}
	
	.input {
		margin-bottom: 35px;
		
		.label {
			color: #fff;
			font-family: trivia-grotesk;
			font-size: 16px;
			line-height: 1;
			padding-bottom: 17px;
		}
		.caption {
			color: #fff;
			font-family: trivia-grotesk;
			font-size: 16px;
			line-height: 1;
			padding-top: 17px;
			opacity: 0.5;
		}
		input, textarea {
			display: block;
			padding: 0;
			margin: 0;
			background: transparent;
			color: #fff;
			font-family: trivia-serif;
			line-height: 26px;
			font-size: 20px;
			padding: 11px 15px;
			border: 2px solid #fff;
			width: 100%;
			.box-sizing;
			.border-radius(12px);
			.transition(@duration: 200ms);
			
			&:focus {
				outline: none;
				box-shadow: 0px 0px 16px rgba(255,255,255,0.8);
			}
		}
		textarea {
			height: 180px;
			resize: none;
		}
		.fu {
			position: relative;
			display: block;
			padding: 0;
			margin: 0;
			background: transparent;
			color: #fff;
			font-family: trivia-grotesk;
			line-height: 1;
			font-size: 16px;
			border: 2px solid #fff;
			width: 100%;
			height: 180px;
			.box-sizing;
			.border-radius(12px);
			overflow: hidden;
			
			.fine {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0px;
				left: 0px;
				z-index: 5;
				.qq-drop-processing, .qq-upload-list {
					display: none;
				}
				input, .qq-upload-button, .qq-uploader {
					width: 100%;
					height: 100%;
				}
			}
			.load {
				position: relative;
				z-index: 1;
				text-align: center;
				
				span {
					font-size: 100px;
					font-family: trivia-serif;
				}
			}
			.thumb {
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 2;
				.cover;
			}
		}
	}
	
	.submit {
		position: absolute;
		right: -269px;
		bottom: 84px;
		width: 180px;
		height: 180px;
		background: #fff;
		color: @orange;
		font-family: flounder;
		font-size: 26px;
		line-height: 1;
		cursor: pointer;
		text-align: center;
		padding-top: 67px;
		box-shadow: 0px 4px 4px rgba(0,0,0,0.1);
		.border-radius;
		.box-sizing;
		.transition(@duration: 200ms);
		
		&:hover {
			box-shadow: 0px 4px 16px #fff;
		}
		&:active {
			margin-bottom: -1px;
			box-shadow: 0px 2px 8px #fff;
		}
	}
	.rules {
		position: absolute;
		right: -269px;
		bottom: 34px;
		width: 180px;
		color: #fff;
		font-size: 12px;
		text-align: center;
		font-family: trivia-grotesk;
		
		a {
			color: #fff;
		}
	}
	
	.twitter-typeahead {
		display: block !important;
	}
	
	.tt-dropdown-menu {
		width: 100%;
		background-color: #fff;
		font-family: 'trivia-grotesk';
		font-size: 22px;
		line-height: 32px;
		color: #000;
		.border-radius(4px);
		
		.tt-dataset-states {
			padding: 10px 0px;
			
			&:empty {
				display: none;
			}
			
			.tt-suggestion {
				padding: 0px 10px;
			}
			
			.tt-highlight, .tt-cursor {
				background-color: lighten(@orange, 35%);
			}
		}
	}
	
}