html {
	// remove tap highlight cause we're using the active styles
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	tap-highlight-color: rgba(0,0,0,0);
}

body {
	background: @body-bg;
}

// Banner
/////////////////////////////////////

.banner {
	float: left;
    width: 15%;
    min-width: 160px;
    
	.banner-title { 
        width: 128px;
        margin-top: .1em;
        margin-bottom: 0;
		// display toned down logo
		// by default
		.logo;
	}
	
	.banner-logo {
		.ir;
		
		// repeat logo
		// but display hover version
		.logo;
		background-position: center -61px;
		width: 128px;

		// hide by default
		opacity: 0;
		// show smooooothly on hover
		&:hover { opacity: 1 }
		&:active { top: 0 }
	}
}


// Footer
/////////////////////////////////////

.footer {
	text-align: center;
	background: fade(@brand-dark, 5%);
    
    .footer-description {
        .h5;
    }
    
    &,
    .footer-description {
        color: @text-color-light;
        line-height: @line-height-computed;
    }
    
	.footer-copyright {
		.divider-top;
		padding-top: @line-height-computed;
		padding-bottom: @line-height-computed;
		p {
			margin-bottom: 0;
			font-size: @font-size-mini;
		}
	}
}

// Subscribe component
.subscribe {
	margin: @line-height-computed auto;
	p {
		margin: 0;
		.clearfix;
		.btn {
			margin-bottom: 0;
			padding: .3em 1em;
			&:first-child {
				margin-left:0
			}
			&:last-child {
				margin-right: 0;
			}
			span { 
				.visuallyhidden;
			}
		}
	}
	i {
		display: block;
		color: @text-color-light;
		&:before {
    		// Icon resets for color animations
    		.transition(color .3s ease-in-out);
			color: inherit;
			margin-right: 0;
		}
	}
}

.footer:hover .subscribe .rss i:before {
	color: #e15a00;
}

.footer:hover .subscribe .twitter i:before {
	color: #019ad2;
}

.footer:hover .subscribe .google i:before {
	color: #c63b1e;
}

.footer:hover .subscribe .facebook i:before {
	color: #3b5998;
}