/**
 * General layout styling
 * Imported in style.scss
 */

@import 'header';

$navigation-width: 200px;
$navigation-width-mobile: 260px;

/* Main */
#main {
	width: 100%;
	margin-left: auto;
	margin-top: 42px;
	display: table;
	table-layout: fixed;
	min-height: 600px;

	&.no-toolbar {
		margin-top: 0;
	}
}
/* Navigation */
nav {
	display: table-cell;
	vertical-align: top;
	width: $navigation-width;

	// Toggling animation
	@include transition-duration(150ms);

	.navigation-wrapper {
		overflow-x: hidden;

		.navigation {
			width: $navigation-width;

			> hr {
				background-color: #ddd;
				height: 1px;
				margin: 0;
				box-shadow: none;
				border: 0;
			}
			> h2 {
				padding: 10px 0 2px 12px;
				margin: 5px 0 5px 0;
				font-weight: 500;
				font-size: 14px;
				color: #565656;
				cursor: default;
				letter-spacing: 0;
			}
			ul {
				margin: 0.2em 0 0.8em 0;
				padding: 0;
			}
			ul li {
				list-style-type: none;
				margin: 0;
				padding: 0;
				font-size: 13px;
				font-family: Helvetica, sans-serif;

				> a {
					display: block;
					padding: 5px 11px;
					color: #666;
				}
				> a:hover,
				.timerangesList:hover + a {
					text-decoration: none;
					background-color: rgba(0, 0, 0, 0.05);
					color: #444;
				}

				.timerangesList {
					float: right;
					font-size: 0;
					margin-right: 9px;
					margin-top: 3px;
					opacity: 0.2;
					@include transition-duration(100ms);

					a {
						display: inline-block;
						font-size: 11px;
						padding: 3px 4px;
					}
				}
			}
			ul.categories:hover .timerangesList {
				opacity: 0.5;
			}
			ul.categories li:hover .timerangesList {
				opacity: 1;
			}

			.badge {
				float: right;
				display: inline-block;
				margin-right: 6px;
				margin-top: 4px;
				min-width: 6px;
				padding: 3px 7px;
				font-size: 11px;
				line-height: 1;
				color: #fff;
				text-align: center;
				background-color: #999;
				border-radius: 10px;
			}

			.logo {
				margin: 10px 15px 5px 15px;
				opacity: 0.8;
			}
		}
	}

	&.fold { width: 0; }
	&.shown { width: $navigation-width; }
}
.navigation-mask {
	display: none;
	position: fixed;
	z-index: 9;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.3);
}


/* Content */
#content {
	display: table-cell;
	padding: 5px 0 30px 30px;
	background-color: #ffffff;
	border-left: 1px solid #ccc;
	border-left: 1px solid rgba(0, 0, 0, 0.01);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
	@include box-sizing(border-box);
}


/* Footer */
footer {
	width: 100%;
	margin-top: 15px;
	padding: 5px 35px;
	clear: both;
	@include box-sizing(border-box);
	text-align: right;

	> * {
		margin: 0;
		display: inline-block;
	}

	.navigation {
		display: block;
		margin: 0;
		text-align: right;
	}

	p.tagline {
		color: #aaa;
		font-size: 11px;
		letter-spacing: -0.5px;
		@include transition-duration(200ms);
		margin: 10px 0;

		b {
			font-weight: 500;
		}

		&:hover { color: #888; }
	}
}

#backToTop {
	display: block;
	height: 0;
	overflow: hidden;
	position: fixed;
	bottom: 10px;
	right: 0;
	background-color: #2196F3;
	color: #fff;
	font-size: 17px;
	padding: 0;
	text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
	border-radius: 2px 0 0 2px;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
	opacity: 0;
	@include transition(opacity 300ms 0s);

	&.visible {
		opacity: 0.75;
		height: auto;
		padding: 4px 7px;
	}
	&.visible:hover {
		text-decoration: none;
		opacity: 1;
	}
}
