/**
 *  If you want to override some bootstrap variables, you have to change values here.
 *  The list of variables are listed here bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss
 */
$navbar-inverse-link-color: #5AADBB;
$icon-font-path: "../../bower_components/bootstrap-sass/assets/fonts/bootstrap/";

/**
 *  Do not remove the comments below. It's the markers used by wiredep to inject
 *  sass dependencies when defined in the bower.json of your dependencies
 */
// bower:scss
// endbower

.browsehappy {
	margin: 0.2em 0;
	background: #ccc;
	color: #000;
	padding: 0.2em 0;
}

.thumbnail {
	height: 200px;

	img.pull-right {
		width: 50px;
	}
}

body {
	background-color: #efefef;
	height: 100vh;
}

main {
	height: 100%;

	> section {
		padding-top: 1em;
		background-color: #fefefe;
		height: calc(100% - 135px);
		overflow: auto;

		h2 {
			font-size: 1.5em;
			color: #2e7bcf;
		}

		h3 {
			font-size: 1.2em;
			color: #2e7bcf;
		}
	}

	.example-settings {
		display: flex;
		> div:not(:last-child) {
			margin-right: 1em;
			flex-basis: 50%;
		}
	}
}

header {
	padding: 40px;
	font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
	background: #2e7bcf;
	border-bottom: solid 1px #275da1;
	height: 135px;

	h1 {
		letter-spacing: -1px;
		font-size: 2em;
		color: #fff;
		line-height: 1;
		margin-bottom: 0.2em;
		margin-top: 0.2em;
		width: auto;
	}
}

dropdown-tree {
	display: block;
	width: 250px;

	.dropdown-toggle {
		width: 100%;
		border-radius: 0;
	}
}

.dropdown-menu {
	display: block;
	width: 100%;
	border-radius: 0;
	margin-top: 0;
	.top-menu {
		margin-bottom: 0.5em;
		border-bottom: 1px solid rgba(0, 0, 0, 0.15);
		padding: 0.5em 1em;
		input {
			border-radius: 0;
			height: 2em;
		}
	}

	ul {
		list-style-type: none;
		padding-left: 1em;
	}

	.focusable:focus {
		outline: #66afe9 auto 1px;
	}
}

/**
 *  Do not remove the comments below. It's the markers used by gulp-inject to inject
 *  all your sass files automatically
 */
// injector
// endinjector