// styles

#header {

	// vars

	$outColor: #a6b6b8; 

	// 

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

	background: #000;

	z-index: 990;

	// logo

	.row {
		
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		margin: 0 auto;

		width: 100%;
	}

	.header-shadow {

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

		.shadow-left, .shadow-right {
			position: absolute;
			top: 122px;
			z-index: 999;
		}

		.shadow-left {
			left: 0px;
			width: 369px;
			height: 53px;
			//background: url($rootDir + 'assets/img/ui/header/nav-shadow-left.png') no-repeat; 
		}

		.shadow-right {
			right: 0px;
			width: 332px;
			height: 53px;
			//background: url($rootDir + 'assets/img/ui/header/nav-shadow-right.png') no-repeat; 
		}

	}

	.first-row {

		position: absolute;
		top: 0px;
		height: 156px;
		z-index: 1;
		color: $outColor;
		letter-spacing: 0.1em;
		font-size: 14px;

		background: url($rootDir + 'assets/img/ui/header/header_bg.jpg') top center no-repeat; 

		#main-logo {

			line-height: 52px;
			text-align: center;
			vertical-align: middle;

			.logo {
				position: absolute;
				top: 10px;
				left: 0px;
				right: 0px;
				margin: 0 auto;
				width: 356px;
				height: 119px;
				background: url($rootDir + 'assets/img/ui/header/logo.png') top left no-repeat;

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

			#release-date {

				position: absolute;
				top: 123px;
				left: 0px;
				right: 0px;
				margin: 0 auto;
				text-transform: uppercase;
				line-height: 22px;
				letter-spacing: 0.05em;
				font-size: 27px;
				font-weight: 600;
				vertical-align: top;
				color: #dbe0e0;

				@include trajan;

				.divider { 
					display: inline-block;
					width: 20px;
					height: 22px;
					background: url($rootDir + 'assets/img/ui/header/slash.png') center center no-repeat;
				}

				img {
					display: inline-block;
				}
			}
		}

		.top-left {

			position: absolute;
			top: 35px;
			left: 42px;

			@include denise;

			font-size: 16px;
			letter-spacing: 0.05em;

			.row { width: 230px; }

			a { 
				color: $outColor; 

				-webkit-transition: color 200ms ease-out;
				-moz-transition: color 200ms ease-out;
				-o-transition: color 200ms ease-out;
				transition: color 200ms ease-out;

				&.deselected { color: #596f72; }
			}

			a:hover { color: $outColor; }

			hr { 
				position: absolute;
				top: 35px;
				height: 1px;
				margin-left: -22px;
				background: #292c2d;
				border: 0 none;
			}

			#social-links {

				position: absolute;
				top: 0px;
				left: 0px;
				z-index: 9;
				line-height: 30px;
				vertical-align: middle;
				margin-bottom: 5px;

				//

				.label {
					float: left;
					width: 40px;
				}

				.social-icon {

					float: left;
					width: 40px;
					height: 28px;
					font-size: 19px;
					text-align: center;

					-webkit-font-smoothing: antialiased;

					-webkit-transition: color 200ms ease-out;
					    -moz-transition: color 200ms ease-out;
					    -o-transition: color 200ms ease-out;
					    transition: color 200ms ease-out;

					a:hover {
						color: $outColor !important;
					}
				}

				.social-icon.twitter a { color: #007aa7; }
				.social-icon.facebook a { color: #2a406d; }
				.social-icon.pinterest a { color: #8f181d; }
				.social-icon.youtube a { color: #901217; }
				.social-icon.tumblr a { color: #395875; }
				
			}

			#sound-controls {
				
				position: absolute;
				top: 50px;
				left: 0px;

				a { 
					margin-left: 3px;
				}
			}
		}	

		.top-right {

			position: absolute;
			top: 35px;
			right: 20px;

			#ticketing-button {

				position: absolute;
				top: 0px;
				right: 0px;
				width: 200px;
				font-size: 23px;
				text-transform: uppercase;
				text-align: center;
				z-index: 6;

				padding: 25px 20px 7px 20px;
				border-bottom: 1px solid #292c2d;
				white-space: nowrap;

				@include denise;

				a { 

					color: $outColor;

					&:hover { 
						
						color: $white; 

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

				.tickets, .coming-soon { 
					position: absolute;
					top: 0px;
					right: 0px;
					width: 100%;
					height: 25px;
				}

				.coming-soon {
					display: none;
				}

			} // end ticketing-button

			#in-3d {

				position: absolute;
				top: 40px;
				right: 0px;
				z-index: 6;

				padding: 0 20px 7px 20px;
			}

		}


	} // end first-row

	.second-row {

		top: 156px;
		height: 46px;
		z-index: 2;

		background: url($rootDir + 'assets/img/ui/header/header_nav_bg.jpg') top center repeat-x;

		#nav-container {
				
			position: absolute;
			top: 11px;
			left: 0px;
			width: 100%;
			z-index: 2;
			
			#nav {

				#nav-buttons {
				
					position: absolute;
					top: 0px;
					left: 0px;
					width: 100%;
					height: 100%;
					z-index: 1;

					white-space: nowrap;
					text-align: center;

					li {

						position: relative;
						display: inline-block;
						padding-top: 0px;
						text-transform: uppercase;
						font-size: 23px;
						margin-left: 10px;

						@include denise;
						margin: 0 10px;

						.ss {
							position: absolute;
							top: 33px;
							left: 0px;
							z-index: 2;
						}


						a { 

							position: relative;
							font-weight: normal; 
							letter-spacing: 0.025em;
							overflow: hidden;
							color: $outColor;

							-webkit-transition: color 150ms ease-out;
							    -moz-transition: color 150ms ease-out;
							    -o-transition: color 150ms ease-out;
							    transition: color 150ms ease-out;

							.underline {
								
								position: absolute;
								bottom: 2px;
								left: 0px;
								width: 100%;
								height: 2px;
								//background: #941821;
								opacity: 0;
							}
						}
					}

					li:first { margin: 0; }

					li.active a, li a:hover { color: $white; }

					li.coming-soon {
						display: none;
						a, a:hover { color: #465657 !important; }
						a:hover { cursor: default; }
					}
				}

				#logo {

					position: absolute;
					top: 0px;
					left: 0px;
					right: 0px;
					margin: 0 auto;
					width: 420px;
					height: 100%;
					z-index: 2;

					.marvel {
						position: absolute;
						margin-top: 13px;
						margin-left: 180px;
						width: 39px;
						height: 16px;

						//background: url($rootDir + 'assets/img/ui/header/marvel.png') no-repeat;
					}

					a { 
						position: absolute;
						margin-top: 35px;
						margin-left: 25px;
						width: 369px;
						height: 92px;

						//background: url($rootDir + 'assets/img/ui/header/logo.png') no-repeat;
					}
				}

			}
		}
	} // end second-row

}