/**
 * Documentation stylesheet
 *
 * Base modification from:
 * @link  http://getbootstrap.com/examples/dashboard/
 *
 * @package    Auberge
 * @copyright  WebMan Design, Oliver Juhas
 *
 * @since    1.0
 * @version  2.2.0
 */





/**
 * Base
 */

	/**
	 * Base structure
	 */

		/* Move down content because we have a fixed navbar that is 50px tall */

			body {
				padding-top: 50px;
			}



	/**
	 * Global add-ons
	 */

		.sub-header {
			padding-bottom: 10px;
			border-bottom: 1px solid #eee;
		}



	/**
	 * Top navigation
	 * Hide default border to remove 1px line.
	 */

		.navbar-fixed-top {
			border: 0;
		}



	/**
	 * Sidebar
	 */

		/* Hide for mobile, show later */

			.sidebar {
				display: none;
			}
			@media (min-width: 768px) {
				.sidebar {
					position: fixed;
					top: 51px;
					bottom: 0;
					left: 0;
					z-index: 1000;
					display: block;
					padding: 20px;
					overflow-x: hidden;
					overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
					background-color: #f5f5f5;
					border-right: 1px solid #eee;
				}
			}

		/* Sidebar navigation */

			.nav-sidebar {
				margin-right: -21px; /* 20px padding + 1px border */
				margin-bottom: 20px;
				margin-left: -20px;
			}
			.nav-sidebar > li > a {
				padding-right: 20px;
				padding-left: 20px;
			}
			.nav-sidebar > .active > a,
			.nav-sidebar > .active > a:hover,
			.nav-sidebar > .active > a:focus {
				color: #fff;
				background-color: #428bca;
			}



	/**
	 * Main content
	 */

		.main {
			padding: 20px;
		}
		@media (min-width: 768px) {
			.main {
				padding-right: 40px;
				padding-left: 40px;
			}
		}
		.main .page-header {
			margin-top: 0;
		}



	/**
	 * Placeholder dashboard ideas
	 */

		.placeholders {
			margin-bottom: 30px;
			text-align: center;
		}
		.placeholders h4 {
			margin-bottom: 0;
		}
		.placeholder {
			margin-bottom: 20px;
		}
		.placeholder img {
			display: inline-block;
			border-radius: 50%;
		}





/**
 * Custom styles
 */

	html {
		font-size: 100%;
	}

	body {
		line-height: 1.62;
		font-family: 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif;
		font-size: 16px;
		color: #737373;
	}

	.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
		font-weight: 400;
		color: #131313;
	}

	h5, h6 {
		font-size: 1em;
		font-weight: 700;
	}

	.font-weight-400 {
		font-weight: 400;
	}

	a:not(.btn) {
		text-decoration: underline;
	}

	a:hover {
		text-decoration: none;
	}

	.navbar {
		background-color: #131313;
	}

		.navbar a,
		.sidebar a {
			text-decoration: none;
		}

		.navbar .navbar-brand {
			color: #fff;
			margin-right: 2em;
			letter-spacing: 1px;
			text-shadow: none;
			text-transform: uppercase;
		}

		.navbar-right {
			font-size: .9em;
		}

	.sidebar {
		top: 50px;
		font-size: .9em;
		font-weight: 400;
		background-color: #232323;
		color: #a3a3a3;
		border: 0;
	}

		.sidebar .nav {
			border-top: 1px solid #434343;
		}

			.sidebar .nav > li {
				border-bottom: 1px solid #434343;
			}

				.sidebar .nav > li > a {
					padding-top: .38em;
					padding-bottom: .38em;
					color: inherit;
				}

					.sidebar .nav > li.active > a {
						font-weight: 600;
					}

					.sidebar .nav > li.active > a,
					.sidebar .nav > li > a:focus,
					.sidebar .nav > li > a:hover {
						background-color: #434343;
						color: #fff;
					}

	.main-header {
		padding: 40px 40px 400px;
		padding: 40px 40px 38vh;
		margin: -20px -40px -3.62em;
		font-weight: 300;
		background: #0aac8e;
		color: #fff;
	}

		.main-header h1 {
			margin-bottom: 1.62em;
			font-size: 3.62em;
			color: inherit;
		}

		.main-header h2 {
			text-transform: uppercase;
			color: inherit;
		}

		.main-header a {
			color: inherit;
		}

	.main-content .container-fluid > h2 {
		padding-top: 3.62em;
		margin-top: 3.62em;
		margin-bottom: .62em;
		color: #131313;
		border-top: 2px solid #e3e3e3;
	}

		.main-content .container-fluid > h2:first-child {
			border: 0;
		}

		.main-content h3,
		.plugins > h4 {
			padding-bottom: 1em;
			margin-top: 3.62em;
			margin-bottom: 1em;
			font-size: 1.62em;
			border-bottom: 2px solid #e3e3e3;
		}

		p + ul,
		p + ol {
			margin-top: 1em;
		}

		dl {
			padding: 1.62em;
			margin: 1.62em 0 0;
			border: 2px solid #e3e3e3;
			border-radius: .19em;
		}

			dl.list {
				padding: 0;
				border: 0;
			}

			dt {
				margin: .62em 0;
				font-weight: 400;
				overflow: hidden;
			}

				dt code {
					font-size: 1.19em;
				}

				dd + dt {
					margin-top: 1.62em;
				}

			dd {
				margin-left: 2.62em;
			}

				.list dd {
					margin-left: 1.62em;
				}

				dd .alert {
					margin: .62em 0 0;
				}

		.uppercase {
			text-transform: uppercase;
		}

		.text-center {
			text-align: center;
		}

		.mt0,
		.alert p.mt0,
		.main-content h3.mt0 {
			margin-top: 0 !important;
		}

		.mt,
		.alert p.mt,
		.main-content h3.mt {
			margin-top: 3.62em;
		}

		.mt-s,
		.alert p.mt-s,
		.main-content h3.mt-s {
			margin-top: 1.62em;
		}

		.mt-m,
		.alert p.mt-m,
		.main-content h3.mt-m {
			margin-top: 2.62em;
		}

		.alignleft {
			float: left;
			margin-right: 1.62em;
			margin-bottom: .62em;
		}

		.alignright {
			float: right;
			margin-left: 1.62em;
			margin-bottom: .62em;
		}

		.indented {
			margin-left: 4%;
		}

		.alert {
			margin: 1.62em 0;
		}

			.alert h3,
			.alert h4,
			.alert h5,
			.alert h6 {
				padding: 0;
				margin: 0 0 .62em;
				text-transform: uppercase;
				font-size: 1em;
				font-weight: 700;
				color: inherit;
				border: 0;
			}

		.badge {
			font-weight: 300;
			vertical-align: top;
		}

			small .badge {
				vertical-align: baseline;
			}

		code {
			white-space: nowrap;
		}

			code.wrap {
				white-space: normal;
			}

		img {
			max-width: 100%;
		}

			figure,
			.frame {
				padding: 1em;
				margin: .62em 0 1.62em;
				background: #fff;
				border: 2px solid #e3e3e3;
				border-radius: .19em;
			}

			.frame:first-child {
				margin-top: 0;
			}

			figure {
				text-align: center;
			}

			figure img {
				border: 1px solid #c3c3c3;
			}

			figcaption {
				padding: 0 6%;
				margin-top: 1em;
				font-size: .81em;
				text-transform: uppercase;
			}

		/* Theme anatomy info */

			.anatomy-content ol {
				counter-reset: anatomy;
				padding-left: 0;
				list-style: none;
			}

			.anatomy-content li {
				position: relative;
				padding: 0;
				border-top: 1px solid #c3c3c3;
				border-bottom: 1px solid #c3c3c3;
				cursor: help;
			}

				.anatomy-content li:first-child {
					border-top: 0;
				}

				.anatomy-content li:last-child {
					border-bottom: 0;
				}

			.anatomy-content label {
				display: block;
				padding: 1em 0;
				margin: 0;
				font-weight: inherit;
				cursor: auto;
			}

				.anatomy-content label::before {
					counter-increment: anatomy;
					content: counter(anatomy);
					float: left;
					display: inline-block;
					width: 2em;
					margin-right: 1em;
					text-align: center;
					font-weight: 700;
					border-radius: .19em;
					cursor: pointer;
				}

				.anatomy-content ol:hover label::before {
					background: #eee;
					color: #666;
				}

				.anatomy-content label::before,
				.anatomy-content li:hover label::before {
					background: #fe0000;
					color: #fff;
				}

			.anatomy-content input {
				clip: rect(1px, 1px, 1px, 1px);
				position: absolute !important;
				height: 1px;
				width: 1px;
				line-height: 1px;
				overflow: hidden;
			}

			.anatomy-content h5 {
				padding-right: 2em;
				line-height: 1.38;
				color: #131313;
				cursor: pointer;
				overflow: hidden;
			}

				.anatomy-content h5::after {
					content: '+';
					position: absolute;
					width: 1em;
					height: 1em;
					right: 0;
					top: 1em;
					line-height: .81;
					text-align: center;
					font-size: 1.62em;
					font-weight: 400;
					border-radius: 1em;
					box-shadow: inset 0 0 0 1px;
					vertical-align: top;
					transition: transform .3s;
				}

				.anatomy-content input:checked + h5 {
					margin-bottom: 1em;
				}

				.anatomy-content input:checked + h5::after {
					transform: rotate(45deg);
				}

			.anatomy-content li p {
				font-size: .91em;
				margin: 0;
				height: 0;
				overflow: hidden;
			}

				.anatomy-content input:checked ~ p {
					height: auto;
					margin-top: .62em;
				}

		/* FAQ counter */

			#tips {
				counter-reset: faq;
			}

				#faq ~ h3 {
					font-weight: 700;
				}

					#tips + .section h3 .badge {
						display: inline-block;
						width: 2.62em;
						height: 2.62em;
						padding: 0;
						margin-right: 1em;
						line-height: 2.62em;
						text-align: center;
						font-size: 1rem;
						font-weight: 700;
						background: #0aac8e;
						color: #fff;
						border-radius: 2.62em;
					}

						#tips + .section h3 .badge::before {
							counter-increment: faq;
							content: counter(faq);
						}

	.footer {
		padding: 3.62em 40px;
		margin: 3.62em -40px -20px;
		font-size: .9em;
		background-color: #131313;
		color: #939393;
	}

		.footer a {
			color: #f3f3f3;
		}