// styles

#HomeView {

	//background: url($rootDir + "assets/img/home/bg.jpg") no-repeat center $headerHeight;
	//background-size: cover;


	#top-left-callout {

		position: absolute;
		top: 13px;
		left: 22px;
		width: 220px;
		height: 100px;
		z-index: 1;
		opacity: 0;
		color: #e7f1ee;

		@include denise;

		.line1 { 
			font-size: 53px;
			color: #e7f1ee; 
			letter-spacing: 0.04em;
		}

		.line2 { 
			font-size: 38px;
			color: #ad1924; 
			margin-top: -18px;
		}

	} // top-left-callout

	#timer {

		position: absolute;
		top: 13px;
		left: 15px;
		width: 220px;
		height: 70px;
		overflow: hidden;
		z-index: 1;
		opacity: 0;
		color: #e7f1ee;

		@include denise;

		ul {

			li {

				float: left;
				width: 40px;
				height: 70px;
				margin: 0 10px 0 0;

				.numbers {
					width: 100%;
					text-align: center;
					font-size: 37px;
					letter-spacing: 0.05em;
					padding-left: 5px;
				}

				.label {
					width: 100%;
					text-align: center;
					font-size: 14px;
					text-transform: uppercase;
				}

			}

		}

	} // timer

	#grid {

		position: absolute;
		width: 100%;
		height: 100%;
		padding-top: 0px; // $headerHeight;
		overflow: hidden;

		.left-col {

			position: absolute;
			top: 0px; // $headerHeight;
			left: 0px;
			height: 100%;
			overflow: hidden;

			.quote {

				position: absolute;
				top: 32%;
				left: 50px;
				width: 500px;
				height: 450px;
				padding-left: 50px;
				z-index: 2;

				.text {
					
					position: absolute;
					top: 0px;

					@include trajan;
					font-size: 46px;
					line-height: 60px;
					font-weight: 500;
					text-transform: uppercase;
					margin-left: -2px;
					white-space: nowrap;

					letter-spacing: -0.03em;
					color: $white;
				}

				.trailer-link {

					position: absolute;
					top: 175px;
					
					@include denise;
					-webkit-font-smoothing: antialiased;

					text-transform: uppercase;
					
					font-size: 30px;
					line-height: 34px;
					letter-spacing: 0.05em;
					vertical-align: middle;
					white-space: nowrap;
					margin-top: 33px;
					padding-left: 53px;
					color: $white;
					opacity: 0;

					.play-button { 
						position: absolute;
						top: 0px;
						left: 0px;
						font-size: 34px;
						margin-right: 17px;
						vertical-align: middle;
						color: $white;
					}

				}
			}

			.home-video {
				.video { opacity: 0; }
			}
		}

		.right-col {

			position: absolute;
			height: auto;
			top: 0px; // $headerHeight;
			right: 0px;
			z-index: 900;

			.grid-item {
				
				position: absolute;
				background: no-repeat center center;
				background-size: cover;
				overflow: hidden;

				&:hover {
					cursor: pointer;
				}

				.play-options {

					position: absolute;
					top: 0px;
					left: 0px;
					width: 100%;
					height: 100%;
					font-size: 70px;
					color: #d8e5e9;
					vertical-align: center;
					text-align: center;
					opacity: 0.25;
					z-index: 1;

					.icon {

						position: absolute;
						top: 50%;
						left: 0px;
						right: 0px;
						margin: -35px auto 0px auto;

						text-shadow: 1px 1px 10px rgba(80,98,103,0.4);
					}

					&:hover {
						opacity: 0.75;
						cursor: pointer;
					}
				}

				.touch .share {
					margin-top: 0;
					display: block;
				}

				.no-touch .share {
					background-color: #bc1a26;
				}

				.share-label {

					position: absolute;
					bottom: 12px;
					left: 0px;
					z-index: 5;

					// width: 45%;
					// float: left;
					// display: block;

					padding: 0 0 0 20px;
					text-align: left;
					color: #fff;
					opacity: 0.4;

					@include denise;
					-webkit-font-smoothing: subpixel-antialiased;

					text-transform: uppercase;
					letter-spacing: 0.3em;
					font-size: 13px;

					.icon {
						font-size: 12px;
						padding-left: 6px;
					}

					&.over {
						text-shadow: 0px -1px 0px #6b686d, 0px 1px 0px #c8c0c0;
					}
				}

				.share {

					position: absolute;
					bottom: 0px;
					left: 0px;
					width: 100%;
					height: 40px;
					line-height: 40px;
					vertical-align: middle;
					color: #000;
					z-index: 4;
					background: url($rootDir + "assets/img/home/share_rollover_chrome_bg.png") left bottom repeat-x;
					margin-bottom: -40px;

					.share-options {

						position: absolute;
						right: 0px;
						height: inherit;
						display: block;
						padding: 0;
						text-align: right;
						font-size: 14px;

						@include icons;

						.share-icon {

							position: relative;
							float: left;
							width: 40px;
							height: inherit;
							text-align: center;
							cursor: pointer;

							a { 
								color: #000;
								text-shadow: 0px -1px 0px #6b686d, 0px 1px 0px #c8c0c0;

								-webkit-transition: color 100ms ease-out;
								    -moz-transition: color 100ms ease-out;
								    -o-transition: color 100ms ease-out;
								    transition: color 100ms ease-out;
							}
						}

						.share-icon.twitter:hover, .social-icon.twitter:hover { a { color: $twitterColor; }}
						.share-icon.facebook:hover, .social-icon.facebook:hover { a { color: $facebookColor; }}
						.share-icon.gplus:hover, .social-icon.gplus:hover { a { color: $gplusColor; }}
						.share-icon.pinterest:hover, .social-icon.pinterest:hover { a { color: $pinterestColor; }}
						.share-icon.tumblr:hover, .social-icon.tumblr:hover { a { color: $tumblrColor; }}

					}

				} // end share

				.overlay {

					position: absolute;
					width: 100%;
					height: 100%;
					background: #000;
					opacity: 0.25;
					z-index: 3;

				} // end overlay

				.quote {

					position: absolute;
					background-position: no-repeat center center !important;
					background-size: cover !important;
					width: 100%;
					height: 100%;
					background: #000;
					visibility: hidden;
					opacity:0;
					z-index: 2;

				} // end overlay

				.video {

					position: absolute;
					width: 100%;
					height: 100%;
					z-index: 1;

				} // end video
			}

		} // end right-col

		.grid-scroller {

			position: absolute;
			top: 14px; // $headerHeight + 14;
			right: 12px;
			width: 8px;
			z-index: 999;

			.grid-scroller-handle, .grid-scroller-track {

				position: absolute;
				top: 0px;
				left: 0px;
				width: inherit;

				-moz-border-radius: 4px;
				-webkit-border-radius: 4px;
				border-radius: 4px; /* future proofing */
				-khtml-border-radius: 4px; /* for old Konqueror browsers */
			}

			.grid-scroller-handle {

				background: #d6e3df;
				//border: #2c4d53 solid 2px;
				opacity: 0.55;
				z-index: 2;

				-moz-box-shadow:    0px 2px 10px rgba(0,0,0,0.6);
				-webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.6);
				box-shadow:         0px 2px 10px rgba(0,0,0,0.6);
			}

			.grid-scroller-track {

				border: #2d3a3c solid 2px;
				background: #000;
				opacity: 0;
				z-index: 0;
			}

		} // end grid-scroller

		.more-button {
			
			position: absolute;
			//background: url($rootDir + "assets/img/home/more-button-bg.png") repeat-x;
			height: 40px;
			padding: 10px 285px 8px 20px;
			margin-bottom: -41px;
			line-height: 28px;
			vertical-align: bottom;
			right: 0px;
			bottom: 0px;
			z-index: 9991;

			display: none;

			@include denise;
			font-size: 20px;
			letter-spacing: 0.07em;

			.icon {
				@include icons;
				font-size: 14px;
				padding-right: 7px;
				vertical-align: middle;
			}

			a {
				position: absolute;
				width: 100%;
			}

		} // end more-button

	} // end grid

} // end #HomeView

.touch #HomeView {

	.left-col {

		.home-video {

			.video {

				position: absolute;
				width: 100%;
				height: 100%;
				top: 0px;
				left: 0px;

				background: url($rootDir + "assets/img/home/homepage_video_still.jpg") center top no-repeat;
				background-size: cover;

				video { opacity: 0; }
			}
		}
	}
}