@import 'vars';
@import 'mixins';

/*
	Alpha by HTML5 UP
	html5up.net | @n33co
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

/* Basic */

	body, input, select, textarea {
		font-size: 11pt;
	}

	h2, h3, h4, h5, h6 {
		br {
			display: none;
		}
	}

/* Section/Article */

	header {
		br {
			display: none;
		}
		
		&.major {
			padding: 0 4em;
		}
	}

/* Box */

	$box-padding-vertical: 3em;
	$box-padding-horizontal: 2em;

	.box {
		padding: $box-padding-vertical $box-padding-horizontal;
		
		&.features {
			> section {
				padding: $box-padding-vertical $box-padding-horizontal;
			}
		}
		
		.image {
			&.featured {
				margin-left: ($box-padding-horizontal * -1);
				width: calc(100% + #{$box-padding-horizontal * 2});
			
				&:first-child {
					margin-bottom: $box-padding-vertical;
					margin-top: $box-padding-vertical * -1;
				}

				&:last-child {
					margin-bottom: $box-padding-vertical * -1;
					margin-top: $box-padding-vertical;
				}
			}
		}
	}

/* Header */

	//body {
	#skel-layers-wrapper {
		padding-top: 0;
	}

	#header {
		display: none;
	}

/* Banner */

	#banner {
		//padding: 6em 2em;
	}
		
/* Layers */

	#navButton {
		.toggle {
			@include icon;
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
			
			&:before {
				background: rgba(192,192,192,0.75);
				border-radius: $size-border-radius;
				color: #fff;
				content: '\f0c9';
				display: block;
				font-size: 16px;
				height: 2.25em;
				left: 0.5em;
				line-height: 2.25em;
				position: absolute;
				text-align: center;
				top: 0.5em;
				width: 3.5em;
			}
		}
	}

	#navPanel {
		background: darken($color-header-bg, 10);
		color: $color-header-fg;

		.link {
			border-bottom: 0;
			border-top: solid 1px rgba(255,255,255,0.05);
			color: $color-header-fg;
			display: block;
			height: 44px;
			line-height: 44px;
			padding: 0 1em 0 1em;
			text-decoration: none;
		
			&:first-child {
				border-top: 0;
			}
			
			&.depth-0 {
				color: $color-header-fg-bold;
			}
			
			.indent-1 { display: inline-block; width: 1em; }
			.indent-2 { display: inline-block; width: 2em; }
			.indent-3 { display: inline-block; width: 3em; }
			.indent-4 { display: inline-block; width: 4em; }
			.indent-5 { display: inline-block; width: 5em; }
		}
	}