html, body {
	min-height: 100%;
	width: 100%;
}
#demo{
	$prefix: '.lui';
	@import "../scss/lucca-ui.namespaced.scss";
	$light: luiPalette(light, color);
	// Table of contents
	$toc-width: 11em;
	$banner-height: 4em;

	padding-top: $banner-height;

	#banner {
		background: #FFF;
		height: $banner-height;
		z-index: 999;
	}
	#toc {
		margin-top: $banner-height + 1;
		width: $toc-width;
		height: 100%;
	}

	[ui-view="content"] {
		display: block;
		margin-left: $toc-width;
	}

	[ui-view="content"] > section > article:before {
		content: "";
		display:block;
		height: $banner-height; /* fixed header height*/
		margin-top:-#{$banner-height}; /* negative fixed header height */
	}

	#demoBlock {
		margin: 13px 0;
		.header {
			padding: 0;
			h4 {
				padding-bottom: 17px;
			}
		}
	}

	.dark {
		background-color: #333;
		&.inline {
			display: inline-block;
		}
	}

	#main-content {
		margin-top: $banner-height;
		margin-left: $toc-width;
		padding: 2em;
	}

	#grid .column {
		p {
			height: 3em;
			margin: 0.5em 0.1em;
			box-sizing: border-box;
			padding: 1em;
			border-radius: 4px;
			background-color: rgba(200, 200, 200, 1);
		}
	}

	article {
		@extend #{$prefix}.clear;
	}

	.hljs {
		border: 1px solid $light;
		border-radius: 3px;
	}

	// Style for default .hljs
	// See https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css
	// We do not want to directly apply .hljs because they have 'display: block' property and we want inline elements
	code {
		font-size: 85%;
		font-weight: normal;
		overflow-x: auto;
		padding: 0.2em 0;
		color: #333;
		background: #f8f8f8;
		-webkit-text-size-adjust: none;
		* {
			font-family: monospace !important;
		}
		&.red {
			color: #d14;
		}
	}

	code.code-label {
		display: block;
		text-align: center;
		color: #d14;
	}

	pre {
		white-space: pre-wrap;
	}

	.lui.menu.spaced *{
		margin: 0 15px;
		text-align: center;
	}

	#lui-icon .icon-list {
		padding: 0;
		margin: 0;
		list-style: none;
		li {
			margin: 0 2em 3em 2em;
			padding: 0;
			display: inline-block;
			text-align: center;
			i {
				color: #162a36;
				font-size: 24px;
				margin-bottom: 1em;
			}
			.lui.input {
				display: block;
				input {
					display: block;
					text-align: center;
					margin-bottom: 0.5em;
				}
			}
		}
	}
	.luifNumberValue > span {
		font-size:90%;
		opacity: .6;
	}
	.imagepicker-container {
		height: 200px;
		width: 150px;
		display: inline-block;
	}

	pre[hljs] * {
		font-family: monospace !important;
	}

	.flex-container {
		@include display-flex();
		&.flex-row-container {
			@include flex-direction(row);
		}
		&.flex-two-columns .flex-column {
			@include flex(1, 1, 50%);
		}
	}
}