main.scss

@import "compass/reset";
@import "compass/css3";
@import "compass/css3/transition";
@import "compass/css3/opacity";
@import "compass/css3/border-radius";

@import "enhancements.scss";
@import "type.scss";

$mainPanelColor: #87A9AB;
$dd: #6C7F80;
$lightGreenBackground: #B3D4D5;
$mainPanelDarkGreen: #2C6C6F;

$thumbnailTooltipColor: #000;

$baseEffectDuration: .2s;
$baseEffectEase: linear;

li {
	list-style: none;
}

#container {
	background: #fff;
	font-family: "Helvetica Nueue", Helvetica, Arial, Sans-serif;
	
	header {
		position: fixed;
		z-index: 2;
		width: 100%;
		top: -50px;
		@include opacity(0);
		
		&.show {
			@include opacity(1);
			top: 0px;
		}
		
		section.main {
			background: lighten($lightGreenBackground, 10%);
			
			menu {
				min-height: 50px;
				line-height: 50px;
				overflow: hidden;
				padding: 0 0 0 0;
				
				section {
					overflow: auto;
					
					&.left, &.right {
						position: absolute;
						top: 0px;
					}
					
					&.left {
						left: 20px;
					}
					
					&.middle {
						margin: 0 0 0 26%;
					}
					
					&.right {
						right: 20px;
						
						li {
							display: inline;
							float: none;
							
							a {
								color: #000;
								display: inline;
								padding: 0;
								font-size: 1.1rem !important;
								
								&:hover {
									background: none;
									text-decoration: underline;
								}
								
							}
							
						}
						
					}
					
				}
				
				li {
					display: block;
					float: left;
					margin: 0 10px 0 0;
					padding: 15px 0 0 0;
					
					a {
						color: #444;
						display: block;
						height: 35px;
						line-height: 36px;
						font-size: 1.2rem;
						text-decoration: none;
						padding: 0 12px 0 12px;
						@include transition(background-color, $baseEffectDuration, $baseEffectEase, 0);
						
						&:hover {
							background: lighten($lightGreenBackground, 13%);
						}
						
					}
					
				}
				
			}
			
		}
		
	}
	
	#main {
		.thumbnail {
			float: left;
			width: 16.66%;
			position: relative;
			overflow: hidden;
			cursor: pointer;
			
			img {
				display: block;
				width: 100%;
			}
			
			.hudBack, .hud {
				position: absolute;
				bottom: -20px;
				height: 40px;
				@include transition(all, $baseEffectDuration, $baseEffectEase, 0);
				@include opacity(0);
				width: 100%;
			}
			
			.hud {
				color: #fff;
				font-size: 1.3rem;
				
				span {
					font-weight: bold;
					line-height: 15px;
					position: absolute;
					top: 5px;
					display: block;
					
					&.views {
						left: 10px;
					}
					
					&.approval {
						top: 8px;
						right: 10px;
						width: 60px;
						height: 10px;
						background: #fff;
						border: 1px solid #fff;
						@include border-radius(4px);
						
						span {
							span {
								position: relative;
								top: 5px;
								@include opacity(.3);
							}
							
						}
						
					}
					
				}
				
			}
			
			.hudBack {
				background: $thumbnailTooltipColor;
			}
			
			&:hover {
				.hudBack, .hud {
					bottom: 0;
				}
				
				.hud {
					@include opacity(1);
				}
				
				.hudBack {
					@include opacity(0.5);
				}
				
			}
			
		}
		
	}
	
}