//
// Docs
// --------------------------------------------------

body.layout-atlas,
body.layout-consul,
body.layout-dnsimple,
body.layout-dme,
body.layout-cloudflare,
body.layout-cloudstack,
body.layout-google,
body.layout-heroku,
body.layout-mailgun,
body.layout-digitalocean,
body.layout-aws,
body.layout-docs,
body.layout-inner,
body.layout-downloads,
body.layout-intro{
	//background: $light-black image-url('sidebar-wire.png') left 62px no-repeat;
	>.container{
		.col-md-8[role=main]{
			min-height: 800px;
			background-color: white;

			>div{
				position: relative;
				z-index: 10;
			}
		}
	}
}

.docs-sidebar{
  	position: relative;
  	z-index: 20;
  	margin-bottom: 30px;
	margin-top: 50px;
	margin-right: 4%;
	@include open();

	a{
		color: $dark-blue;
	}

	.nav.docs-sidenav{
		padding-bottom: 15px;

		:last-child{
			border-bottom: none;
		}

		//all li
		li{
			position: relative;

			> a{
				padding: 10px 0 10px 8px;
				font-size: 13px;
				color: $dark-blue;

				&:before{
					@include bez-1-transition();
				}

				&:hover{
					background-color: transparent !important;

					&:before{
						@include bez-1-transition();
					}
				}
			}
		}

		$parent-active-state: -14px;
		$parent-default-state: -10px;
		$child-active-state: -4px;
		$child-default-state: 0px;

		//first teir li
		> li {
			margin: 0 0 0 10px;

			&.active {
				>a{
          			color: lighten($black, 4%);

					&:hover{
						&:before{
							left: $parent-default-state;
						}
					}

					&:before{
						background: url(../images/triangle-sprite.png) 0 0 no-repeat;
						@include img-retina("../images/triangle-sprite.png", "../images/triangle-sprite@2x.png", 7px, 25px);
					}
				}

				.nav {
					display: block;
				}
			}

			> a {
        		-webkit-font-smoothing: antialiased;

				&:hover{
					&:before{
						left: $parent-active-state;
					}
				}

				&:before{
					content: '';
					position: absolute;
			        width: 7px;
			        height: 8px;
					top: 15px;
					left: $parent-default-state;
					overflow: hidden;
					background: url(../images/triangle-sprite.png) 0 -9px no-repeat;
					@include img-retina("../images/triangle-sprite.png", "../images/triangle-sprite@2x.png", 7px, 25px);
				}
			}
		}

		//nested ul.nav
		.nav {
			display: none;
			margin-bottom: 15px;

			> li{
				margin-left: 10px;

				&.active{
					> a{
		            	color: $black;

						&:hover{
							&:before{
								left: $child-default-state;
							}
						}

						&:before{
							background: url(../images/triangle-sprite.png) 0 0 no-repeat;
							@include img-retina("../images/triangle-sprite.png", "../images/triangle-sprite@2x.png", 5px, 19px);
						}
					}
				}

				> a{
          			-webkit-font-smoothing: antialiased;
					padding: 6px 15px;

					&:hover{
						&:before{
							left: $child-active-state;
						}
					}

					&:before{
						opacity: .75;
						content: '';
						position: absolute;
				        width: 5px;
				        height: 7px;
						top: 12px;
						left: $child-default-state;
						overflow: hidden;
						background: url(../images/triangle-sprite.png) 0 -13px no-repeat;
						@include img-retina("../images/triangle-sprite.png", "../images/triangle-sprite@2x.png", 5px, 19px);
					}
				}
			}
		}

        .nav-visible {
            display: block;
        }
	}
}


.bs-docs-section{
	padding-top: 10px;
	padding-left: 3%;
	padding-bottom: 80px;

	.lead{
		margin-bottom: 48px
	}

	.doc-sectional{
		margin-bottom: 48px;
	}

	p, li, .alert {
		font-size: 20px;
		font-family: $font-family-open-sans;
		font-weight: $font-weight-open;
    	line-height: 1.5em;
		margin: 0 0 18px;
    	-webkit-font-smoothing: antialiased;
	}

    pre{
        margin: 0 0 18px;
    }

	a{
		color: $dark-blue;
		&:hover{
			text-decoration: underline;
		}
	}

    img{
        max-width: 650px;
        margin-top: 25px;
        margin-bottom: 25px;
    }

	h1{
		color: $black;
		font-size: 36px;
		margin-top: 50px;
		margin-bottom: 24px;
    	//@include lato-light();
    	@include open();
	}

	h2, h3, h4{
		margin-bottom: 16px;
	}

    #graph {
        margin-top: 30px;
    }
}


@media (max-width: 992px) {

  .bs-docs-section{
  	  padding-left: 0;
  }
}

@media (max-width: 768px) {
	.bs-docs-section{
		padding-top: 0;
		h1{
			margin-top: 0;
		}
	}
}




@media (max-width: 480px) {
	.bs-docs-section{
        img{
            max-width: 450px;
        }

		h1{
			font-size: 32px;
		}
	}
}