@import "poster-styles";
@import "2015-styles";

.old-browser {
	display: none;
}

html.ie8 {
	.poster-generator {
		* {
			display: none;
		}

		.old-browser, h2 {
			display: block;
			color: @black;
		}

		.old-browser {
			padding: 10px;
		}
	}

}

// Hide old stuff first.. TODO: Cleanup html
#contentBottom, #containerIntro {
	display: none;
}

.rotate-phone-plx {
	display: none;
}

.poster-generator {

	//FX
	a, button, [class*="dr-icon"]:before, [class*="dr-icon"], input {
		-o-transition:.2s;
		-ms-transition:.2s;
		-moz-transition:.2s;
		-webkit-transition:.2s;
		transition:.2s;
	}

	#posterCanvas {
		color: @black;
	}

	.step-container-left, .step-container-right {
		-o-transition: all .5s ease;
		-ms-transition: all .5s ease;
		-moz-transition: all .5s ease;
		-webkit-transition: all .5s ease;
		transition: all .5s ease;
	}

	position: relative;

	background-color: @dark-teal-70;
	margin: 10px;

	h2 {
		color: @white;
		text-transform: uppercase;
		font-size: 16px;
		line-height: 18px;
		border-bottom: 1px solid @white-70;
		padding: 10px;
		// margin-bottom: 20px;
	}

	#shareImgPreview {
		width: 100%;
	}

	#menuSection {

		height: 100%;
		overflow: visible;

		button.sectionShortcut {
			position: absolute;
			transition: 0s;
			z-index: 100;
			text-align: left;

			[class*="dr-icon"] {
				text-align: center;
			}

			&[data-sectionindex="5"] {
				top: 100px;
				left: 583px;
			}

			&[data-sectionindex="0"] {
				top: 4em;
				right: 14em;
				left: auto;
				width: 160px;
			}

			&[data-sectionindex="1"] {
				top: 50px;
				left: 50px;
				width: 190px;
			}

			&[data-sectionindex="3"] {
				top: 29em;
				right: 13em;
				left: auto;
				width: 170px;
			}

			&[data-sectionindex="2"] {
				top: 16em;
				right: 3em;
				left: auto;
				width: 150px;
			}

		}

		ul {
			li {
				position: static;
			}
		}

	}

	button {

		outline: none;

		&.close-btn {
			position: absolute;
			top: 10px;
			right: 0px;
			background: none;
			padding: 0;
			width: 50px;
			color: @white;

			&:hover {
				.dr-icon-close:before {
					.link-hover-darker(@white);
				}
			}

			.dr-icon-close {
				&:before {
					color: @white;
					font-size: 14px;
				}
			}
		}

		&.sectionShortcut {

			padding: 10px;
			height: auto;
			background: none;

			.button-text {
				position: absolute;
				left: -9999px;
			}

			[class*="dr-icon"] {
				background-color: @id-red;
				border-radius: 50%;
				width: 30px;
				height: 30px;
				padding: 0;
				display: inline-block;
				border: 3px solid transparent;
				
				&:before {
					margin: 0;
					color: @white;
				}
			}

			&:hover {
				[class*="dr-icon"] {
					.btn-hover-darker(@id-red);
				}
			}

			&.active {
				[class*="dr-icon"] {
					box-shadow: 2px 2px 10px @black-60;
					border: 3px solid @white;
				}
			}

			&.helper {

				background-color: @black-80;

				[class*="dr-icon"] {
					margin-right: 10px;
				}

				.button-text {
					position: static;
				}

			}

		}
	}

	[class*="step-container"] {

		position: absolute;
		background-color: @black-80;
		padding: 20px;
		width: 470px;
		height: 100%;
		z-index: 200;
		box-sizing: border-box;

		&[class*="-left"] {
			left: -470px;
		}
		&[class*="-right"] {
			right: -470px;
		}

		.header {

			text-align: center;
			padding-bottom: 50px;

			h3 {
				text-transform: uppercase;
				font-size: 24px;
				padding: 20px 0;
			}

			p {
				font-size: 18px;
				line-height: 20px;
				font-family: gibsonRegular;
				color: @white;
			}

		}

		&[class*="-left"].active {
			left: 0;
		}

		&[class*="-right"].active {
			right: 0;
		}

		.btn.save {
			background-color: @id-red;
			line-height: 20px;
			padding: 0 20px;
			margin: 50px 0px 0px 0px;
			float: right; 

			&:hover {
				.btn-hover-darker(@id-red);
			}
		}

		.tools {

			float: left;
			padding-left: 20px;

			button {
				background: none;
				display: block;
				padding: 0;

				&:hover {
					.button-text{
						.link-hover-darker(@white);
					}
				}

				.button-text {
					border-bottom: 1px solid @grey;
				}

				[class*="dr-icon"]{
					&:before {
						color: @id-red;
					}
				}
			}

			.actions {
				padding-top: 60px;

				button {
					background-color: @teal;
					padding: 0 10px;
					width: 172px;

					&:hover {

						.btn-hover-lighter(@teal);

						.button-text {
							color: @white;
						}
					}

					&+button {
						margin-top: 10px !important;
					}

					.button-text {
						border: none;
					}

					.dr-icon-facebook {
						&:before {
							color: @teal;
							background-color: @white;
						}
					}

					.dr-icon-image {
						&:before {
							color: @white;
						}
					}
				}
				
			}

		}

		.image-container {
			float: left;
			.kineticjs-content {
				border: 10px solid @white !important;
			}
		}

		&#backgroundPicker {

			.header {
				padding-bottom: 20px;
			}

			ul {

				width: 361px;
				margin: 0 auto;
				overflow: hidden;

				li {

					float: left;
					margin: 8px 10px;
					background-color: #fafbfd;

					button.background-preview {

						opacity: 0.8;

						width: 160px;
						height: 90px;
						padding: 4px;
						position: relative;
						background: none;

						&:hover {
							opacity: 1;
						}

						&.selected {
							outline: 3px solid @white;
							opacity: 1;
						}

						img {
							width: 100%;
							// height: 100%;
							position: absolute;
							top: 0;
							left: 0;
						}

						.button-text {
							position: absolute;
							background-color: @black;
							padding: 3px 5px;
							bottom: 10px;
							left: 10px;
							line-height: 15px;
						}
					}

				}
			}

		}

		&#sloganPicker, &#partyPicker {

			.header {
				padding-bottom: 20px;
			}

			ul {
				li {

					&+li {
						margin-top: 5px;
					}

					button {
						width: 100%;
						text-align: left;
						padding: 0 10px;
						background-color: @teal;

						&:hover {
							.btn-hover-darker(@teal);
						}

						&.selected {
							background-color: @id-red;

							&:hover {
								background-color: @id-red;
							}
						}

						&.party {

							.party-letter {
								font-family: gibsonSemiBold;
								&:after {
									content: " - ";
									margin: 0 2px;
								}
							}

						}

						&.slogan {
							.button-text {
								&:before, &:after {
									content: "\22";
								}
							}
						}
					}
					
				}
			}

			.sloganContainer {
				
				padding-bottom: 10px;
				border-bottom: 1px dotted @grey;
				margin-bottom: 10px;

				input[type="text"] {
					background-color: @white;
					width: 100%;
					box-sizing: border-box;
					padding: 10px;
					border-radius: 2px;
					border: none;
					font-family: gibsonRegular;
					outline: none;

					&:focus, &:hover {
						box-shadow: 0px 0px 0px 2pt @grey;
					}
				}
			}

		}

	}

	.modal-overlay {
		background-color: @black-80;
		position: absolute;
		top: 38px;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 999;

		.message {
			background-color: @white;
			color: @black;
			padding: 50px;
			width: 600px;
			height: 400px;
			margin: 70px auto 0;
			position: relative;

			button.close-btn {

				&:hover {
					.dr-icon-close:before {
						.link-hover-darker(@grey);
					}
				}

				.dr-icon-close {
					&:before {
						color: @grey;
					}
				}
			}

			h3 {
				font-family: gibsonSemiBold;
				text-transform: uppercase;
				font-size: 24px;
				margin-bottom: 20px;
			}

			p {
				font-family: gibsonRegular;
				font-size: 18px;
				line-height: 22px;
				padding-bottom: 15px;
			}

			button.btn {
				color: @white;
				background-color: @id-red;
				position: absolute;
				bottom: 50px;
				left: 50%;
				width: 200px;
				margin-left: -100px;

				&:hover {
					.btn-hover-darker(@id-red);
				}
			}

		}

		&#start {


			.message {
				margin-top: 60px;
				height: auto;
				button.btn {
					bottom: 20px;
				}
			}

			.intro-large {
				width: 100%;
			}

			.intro-small {
				display: none;
			}
		}

	}

	.social-bottom-container {
		margin-top: 0;
		background-color: @white;
		padding: 10px 20px;
		overflow: hidden;

		p {
			color: @black;
			font-size: 24px;
			line-height: 26px;
			width: 200px;
			padding: 0;
			overflow: hidden;
			float: left;
		}

		ul {
			float: right;
			padding: 10px 0;
			li {
				float: left;
				
				&+li {
					margin-left: 10px;
				}

				.share-btn {
					width: 200px;

					[class*="dr-icon"], [class*="dr-icon"]:before {
						transition: 0s;
					}

					&.loading {

						transition: .5s;

						[class*="dr-icon"]{

							&:before {
							    -webkit-animation:pulse 0.8s linear infinite;
							    -moz-animation:pulse 0.8s linear infinite;
							    animation:pulse 0.8s linear infinite;
							}

						}
					}
				}
			}
		}
	}

	.poster-view {

		#posterView {
			height: 528px;
		}
		
		.posterViewButtons {

			position: absolute;
			bottom: 120px;
			left: 100px;

			button.newPoster {
				background-color: @id-red;
				font-size: 24px;
				height: 60px;
				&:hover {
					.btn-hover-darker(@id-red);
				}
			}
		}
	}

}

@-moz-keyframes pulse { 0% { opacity: 1; } 50% { opacity: .3; }  100% { opacity: 1; } }
@-webkit-keyframes pulse { 0% { opacity: 1; } 50% { opacity: .3; }  100% { opacity: 1; } }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: .3; }  100% { opacity: 1; } }

@media screen and (max-width: 768px) {

	.poster-generator {

		.poster-view {
			
			.posterViewButtons {
				position: static;
				padding: 20px;
				button.newPoster {

					font-size: 14px;
					height: 30px;
					margin: 0 auto;
					width: 100%;
				}
			}
			
			#posterView {
				

				height: 390px;
				img {
					height: 100%;
				}
			}
		}

		.modal-overlay 
			{
				&#start {

					.message {
						margin-top: 40px;
						
						button.btn {
							bottom: -36px;
						}
					}

					.intro-large {
						display: none;
					}

					.intro-small {
						// display: block;
						width: 100%;
					}

				}
			}

	}
}

/* Phones */
@media screen and (max-width: 768px) and (orientation:landscape) {
	
	.poster-generator {

		#menuSection {

			button.sectionShortcut {

				[class*="dr-icon"] {
				}

				&[data-sectionindex="5"] {
					top: 100px;
					left: 583px;
				}

				&[data-sectionindex="0"] {
					top: 25px;
					left: 340px;
				}

				&[data-sectionindex="1"] {
					top: 10px;
					left: 10px;
				}

				&[data-sectionindex="3"] {
					top: 220px;
					left: 340px;
				}

				&[data-sectionindex="2"] {
					top: 140px;
					left: 400px;
				}

			}

		}
	
		.social-bottom-container {
			
			padding: 10px;

			p {
				width: 100%;
				padding-bottom: 10px;
			}

			ul {

				float: none;

				li {

					.share-btn {
						width: 169px;

						.button-text {
							font-size: 12px;
						}
					}

				}
			}

		}

		.modal-overlay {
			.message {
				box-sizing: border-box;
				background-color: transparent;
				padding: 20px;
				width: 100%;
				color: @white;
				margin-top: 25px;

				h3 {
					font-size: 18px;
				}

				button.btn {
					bottom: -50px;
				}

				button.close-btn {
					top: -20px;
				}

				p {
					color: @white;
					font-size: 12px;
				}
			}

			&#start {
				.message {
					height: auto;
				
				button.btn {
					bottom: -40px;
				}

				}

				.intro-small {
					margin: 0 auto;
					width: 200px;
				}
			}
		}

		[class*="step-container"] {

			width: 100%;

			&[class*="-left"] {
				left: -100%;
			}

			&[class*="-right"] {
				right: -100%;
			}

			.header {
				padding-bottom: 10px;

				h3 {
					font-size: 22px;
					padding: 10px 0;
				}

				p {
					font-size: 16px;
				}
			}

			&#backgroundPicker {

				ul {
					width: 465px;
					li {
						margin: 3px 5px;

						button.background-preview {
							width: 145px;
							height: 82px;
						}
					}
				}
			}

			&#photoPicker {
				.body {
					width: 427px;
					margin: 0 auto;
				}
			}

			&#partyPicker {
				.header {
					padding-bottom: 0;
				}

				.body {
					ul {
						li {
							&+li {
								margin-top: 1px;
							}
						}
					}
				}
			}

			&#sloganPicker {
				.body {
					ul {
						li {
							&+li {
								margin-top: 1px;
							}
						}
					}
				}
			}

		}

	}

}

@media screen and (max-width: 768px) and (orientation:portrait) {
	
	.rotate-phone-plx {
		display: block;
		background-color: @dark-teal-70;
		padding: 20px;
		margin: 10px;

		.rotate-icon {
			position: relative;
			top: -9px;
			left: -5px;
			[class*="dr-icon"] {
				position: absolute;
				&:before {
					color: #9eb0b5;
				}

				&[class*="mobile"]:before {
					font-size: 50px;
				}

				&[class*="timeshift"]:before {
					margin: 12px 0 0 10px;
					font-size: 20px;
				}
			}
		}

		.rotate-text {
			color: @white;
			margin-left: 50px;
			font-family: gibsonSemiBold;
			font-size: 13px;
		}
	}

	.poster-generator {

		// .poster-view {
		// 	#posterView {
		// 		height: auto;
		// 	}
		// }

		#contentMain {
			height: 566px;

			#photoPicker {

				.header {
					padding-bottom: 10px;
				}

				.tools {
					float: none;
					padding: 0;

					button {
						display: inline-block;
						padding: 0;
						&+button {
							margin-left: 3px;
						}

					}
					
					.actions {
						padding-top: 0;

						button {
							width: 100%;
							&+button {
								margin-left: 0;
							}
						}
					}
				}

				#imageUpload {
					margin: 0 auto;
					width: 235px;
					float: none;
				}
			}
		}

		.modal-overlay {
			.message {
				box-sizing: border-box;
				background-color: transparent;
				padding: 20px;
				width: 100%;
				color: @white;
				margin-top: 25px;

				h3 {
					font-size: 18px;
				}

				button.btn {
					bottom: -50px;
				}

				button.close-btn {
					top: -20px;
				}

				p {
					color: @white;
					font-size: 16px;
				}
			}

			&#start {
				.message {
					height: auto;
				}
			}
		}

		[class*="step-container"] {
			width: 100%;

			&[class*="-left"] {
				left: -100%;
			}

			&[class*="-right"] {
				right: -100%;
			}

			&#backgroundPicker {

				ul {
					width: 240px;
					li {
						margin: 8px 10px;

						button.background-preview {
							width: 100px;
							height: 56px;

							.button-text {
								font-size: 9px;
								left: 5px;
								bottom: 5px;
							}
						}
					}
				}
			}

		}

		#menuSection {
			display: block;

			button.sectionShortcut {

				&[data-sectionindex="0"] {
					top: 70px;
					left: 140px;
				}
				&[data-sectionindex="1"] {
					top: 5px;
					left: 5px;
				}

				&[data-sectionindex="2"] {
					top: 190px;
					left: 145px;
				}

				&[data-sectionindex="3"] {
					top: 300px;
					left: 60px;
				}

				&.helper {

					background-color: transparent;
					width: 50px;
	
					.button-text {
						position: absolute;
					}

				}

			}
		}

		.mobile-canvas-preview {

			position: relative;
			height: 400px;

			img#shareImgPreview  {
				position: absolute;
				height: 400px;
				width: auto;
				right: 0;
			}

		}

		.social-bottom-container {
			
			padding: 10px;

			p {
				width: 100%;
				font-size: 16px;
				padding-bottom: 10px;
			}

			ul {

				float: none;

				li {

					width: 100%;

					.share-btn {
						width: 100%;
					}

					&+li {
						margin-left: 0;
						margin-top: 5px;
					}

				}
			}

		}
	}
}

/* Tablets */
@media screen and (min-width: 768px) {

}

/* Desktop */
@media screen and (min-width: 992px) {

}