code {
	color: $blue;
}

.container-fluid{
	padding: 0;
}
.row{
	margin: 0;
}
.navbar{
	margin-bottom: 0;
}
.col-md-12{
	padding: 0;
	display: inline-flex;
	#sidebar-wrapper{
		background-color: #eee;
		padding: 0;
		padding-top: 50px;
		overflow-y: scroll;
		max-height: 100vh;
	}
	#sidebar{
		min-height: 1000vh;
		flex-basis: auto;
		padding: 0;
		flex-direction: column;
		flex-grow: 2;
		.list-group, .list-group-item{
			padding-right: 0;
			border-radius: 0;
			border-right: none;
		}
		a{
			padding: 10px 100px;
			padding-left: 10px;
			min-width: 150px;
			max-width: 300px;
			text-decoration:none;
			display: flex;
			flex-flow: column wrap;
		}
		.section-bar{
			font-size: 22px;
			cursor: pointer;
			border: none;
			a.level-1{
				color: $blue;
				padding-left: 10px;
			}
			&.active{
				background-color: white;
				// border: thin solid $bright-orange;
				&>a{
					background-color: white;
				}
			}
			a.level-2{
				margin-left: 20px;
				border: none;
				border-left: $blue medium solid;
				font-size: 16px;
				&.active{
					border: thin darken(#eee, 5%) solid;
					border-left: $blue medium solid;
					color: $bright-orange;
					background-color: #eee;
					font-size: 18px;
					font-weight: 400;
				}
			}
			.level-3 {
				font-size: 14px;
				.active{
					background-color: $blue;
					margin-left: 10px;
					color: $bright-orange;
					font-size: 18px;
				}
			}

			.lvl-2-extended {
				a.level-2{
					// &:before{
					// 	width: 16px;
					// 	height: 100%;
					// 	margin-right: 10px;
					// 	content: "";
					// 	background: url(../img/alchemyFlatLogoMini.png) no-repeat;
					// }
				}
				a.level-3{
					border: none;
					padding-left: 20px;
					margin-left: 40px;
					border-left: medium solid $bright-orange;
					// background: transparent;
				}
				div.level-3{
					margin-bottom: 0;
					border: $bright-orange;
				}
			}
		}
	}

	#doc-content{
		line-height: 1.7;
		border-left: thin $blue solid;
		padding-top: 50px;
		max-height: 100vh;
		overflow-y: scroll;
		overflow-x: hidden;
		flex-flow: column nowrap;
		flex-shrink: 50;

		#pointer{
			position: absolute;
			top: 20px;
			width: 0; 
			height: 0; 
			border-top: 20px solid transparent;
			border-bottom: 20px solid transparent;
			border-left: 20px solid $bright-orange;
		}

		:target{
			padding-top: 25px;
		}

		.doc{
			font-size: 16px;
			padding: 75px;
			padding-top: 25px;

			h1, h2, h3, h4{
				margin-top: 0;
				// padding-top: 25px;
			}

			p ~ h5 {
				font-weight: 400;
				padding-right: 10px;
				color: $bright-orange;
				font-size: 18px;
				display: inline-block;
			}
			h5 + p {
				font-size: 18px;
				display: inline-block;
			}
			img{
				padding: 50px;
				max-width: 100%;
			}
			pre span{
				// override coderay and bootstrap styles
				background-color: transparent !important;
			}
			code{
				background: transparent;
			}
			.config-doc{
				padding-bottom: 50px;
			}
      blockquote{
        padding:2px 20px;
        margin:0 0 2px;
        border: none;
        font-size: inherit;
      }
		}
		// >:nth-child(2n){
		// 	background-color: #eee;
		// }
		>:last-child{
			padding-bottom: 50vh;
		}
	}
}

.footer{
	padding: 20px 50px;
	height: 70px;
}