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

/*
	Drift by Pixelarity
	pixelarity.com @pixelarity
	License: pixelarity.com/license
*/

/* Basic */

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

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

/* Section/Article */

	header {
		br {
			display: none;
		}
	}

/* Feature */

	.feature {
		padding-left: 0;
		text-align: center;
		
		&:before {
			margin: 0 0 ($size-element-margin * 0.35) 0;
			position: relative;
		}
		
		p {
			padding: 0 2em;
		}
	}

/* Slider */

	.slider {
		.viewer {
			border-width: 1em;
			width: 100%;
		}
		
		.slide {
			img {
				border-radius: $size-border-radius * 0.75;
				display: block;
				width: 100%;
			}
		}
		
		.nav-next,
		.nav-previous {
			background: none;
			border-radius: 0;
			color: #fff;
			height: 100%;
			margin-top: 0;
			top: 0;
			vertical-align: bottom;
			width: 50%;
			z-index: 1;
			
			&:before {
				display: block;
				height: 2em;
				line-height: 2em;
				margin-top: -1em;
				padding: 0 1em;
				top: 50%;
				width: 100%;
			}
		}
		
		.nav-next {
			right: 0;
			text-align: right;
		}
		
		.nav-previous {
			left: 0;
			text-align: left;
		}
	}

/* Header */

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

	#header {
		display: none;
	}

/* Banner */

	#banner {
		padding: 12em 2em;
	}

/* Layers */

	#navButton {
		.toggle {
			@include icon;
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
			
			&:before {
				background: rgba(103,107,113,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-color: #fff;
		box-shadow: 0.5em 0 2em 0 rgba(0,0,0,0.1);
		padding: 0.5em 1.5em;
		
		.link {
			border: 0;
			border-top: solid 1px $color-border2-bg;
			color: $color-fg !important;
			display: block;
			height: 3em;
			line-height: 3em;
			text-decoration: none;
		
			&:first-child {
				border-top: 0;
			}
			
			&.depth-0 {
				font-weight: $font-weight-bold;
				color: $color-fg-bold !important;
			}
			
			.indent-1 { display: inline-block; width: 1.25em; }
			.indent-2 { display: inline-block; width: 2.5em; }
			.indent-3 { display: inline-block; width: 3.75em; }
			.indent-4 { display: inline-block; width: 5em; }
			.indent-5 { display: inline-block; width: 6.25em; }
		}
	}