// styles

#DownloadsView {

	width: 100%;
	height: 100%;
	overflow: hidden;
}

.downloads-background {
	position: absolute;
	bottom: 0px; // $headerHeight;
	left: 0px;
	z-index: -9999;
}

.downloads-content {

	position: absolute;
	top: 135px;

	.downloads-thumbs {
		position: absolute;
		width: 1000px;
		left: 50px;
		top: 0;

		.downloads-thumb {

			float: left;
			position: absolute;
			background: #333;
			border: 1px solid #3d4546;

			.thumb-img {
				opacity: 0;
			}

			.thumb-overlay {
				background: #000;
				position: absolute;
				top: 0;
				left: 0;
				opacity: .2;
			}

			.over-thumb {
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
			}
	
			.downloads-options {

				position: absolute;
				top: 92px;

				.downloads-option {

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

					font-size: 15px;
					letter-spacing: 1px;
					cursor: pointer;
					float: left;
					margin-right: 0;
					margin-bottom: 30px;
					position: relative;

					.downloads-thumb-bg {

						//background: url($rootDir + "assets/img/home/share_rollover_chrome_bg.png") left bottom repeat-x;
						background: #8f181d;
						border-bottom: 0px solid rgba(0,0,0,0.1);

						height: 0px;
						width: 286px;
						position: absolute;
						top: 27px;
						left: 0;

					    -moz-transition: all 0.1s ease-out 0s; 
					    -webkit-transition: all 0.1s ease-out 0s; 
					    -o-transition: all 0.1s ease-out 0s;
					    transition: all 0.1s ease-out 0s; 
					}

					.downloads-thumb-arrow {

						position: absolute;
						top: 2px;
						left: 10px;
						width: 3px;
						height: 12px;
						
						background: url($rootDir + "assets/img/ui/bare_arrow_right.png") center center no-repeat;

						pointer-events: none;
						opacity: 0;
					}

					.downloads-thumb-text {
						
						position: absolute;				
						top: 0px;
						left: 23px;
						line-height: 32px;
						vertical-align: middle;
						color: #fff;		
						opacity: 0;
						pointer-events: none;
					}
				}
			} // end downloads-options

			&.social {

				.downloads-options {

					.downloads-option {

						.downloads-thumb-text {
							
							position: absolute;				
							top: 0px;
							left: 23px;
							line-height: 32px;
							vertical-align: middle;
							opacity: 0;
							pointer-events: none;
							padding-left: 22px;

							.icon {
								position: absolute;
								top: 0px;
								left: 0px;
								line-height: 30px;
							}
						}
					}

				}

			} // end social 
		}
	}
	
	.arrows {
		position: absolute;

		.arrow {
			position: absolute;
			top: 50%;
			width: 60px;
			height: 50px;
			background: #444747;
			z-index: 99;
			cursor: pointer;
			overflow: hidden;

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

			img {
				position: absolute;
				opacity: 0.7;
			}

			&.hover {
				
				width: 100px;
				background: #8b1217;
				
				img {
					opacity: 1;
				}
			}
		}

		.left-arrow {
			margin-left: -60px;
			img { right: 23px; }
		}

		.right-arrow {
			right: 0px;
			margin-right: 0px;
			.progress { left: auto; right: 0px; }
			img { left: 23px; }
		}

		.disabled {
			cursor: default;
		}
	}
}