/**
 * Demo pages styles
 */
 * {
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing:    border-box;
 	box-sizing:         border-box;
 }

 body {
 	background: #e7edee;
 	font-family: sans-serif;
 	margin-top: 5rem;
 }

 h1 {
 	text-align: center;
 }
 code {
 	font-weight: 600;
 }
 ul li code{
 	line-height: 2rem;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p,
 a,
 span {
 	font-weight: 300;
 	-webkit-font-smoothing: antialiased;
 }

 p {
 	color: #464949;
 }

/*
Landing page styling to make it look fresh.
*/
.landing {
	position:fixed;
	top: 60px;
	bottom: 0;
	right: 0;
	left: 0;
}

.landing .intro,
.landing .lead {
	text-align: center;
}
.landing .intro {
	margin-top: 6rem;
	font-size: 48px;
}
.landing .lead {
	margin-top: 4rem;
	font-size: 28px;
}

/* nav bar restyling */

.ui-nav {
	padding: 10px 0;
	background: none;
	background-color: #e7edee;
	border-bottom:2px solid #ccc;
}

.ui-nav .ui-logo {
	margin-right: 3rem;
}

.ui-nav .container {
	background: none;
	background-color: #e7edee;
}

.ui-nav li a {
	font-size: 18px;
	font-weight: 300;
	color: #464949;
	text-shadow: none;
}

.ui-nav li > a:not(.ui-btn):focus, .ui-nav li > a:not(.ui-btn):hover {
	color: #464949;
}

.ui-nav .ui-nav-item.is-active > a {
	color: #464949;
	background-color: #d6dcdd;
	text-shadow: none;
}

.demo-modules {
	position: fixed;
	top: 0;
	left:0;
	right: 0;
	margin: auto;
	margin-top: 80px;
	z-index: 4;
	transition: all 0.2s;
	border-bottom:2px solid #ccc;
	text-transform: capitalize;
	background: #d6dcdd !important;
	box-shadow: none !important;
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
}
.demo-modules.is-active {
	-webkit-transform: translateY(0%);
	transform: translateY(0%);
}
.demo-modules .ui-logo {
	display: none;
}
.demo-modules .ui-nav-item a {
	padding-left: .1rem;
	padding-right: .1rem;
}
.demo-modules .container {
	background: #d6dcdd !important;
}

/*
Reset for index page
*/
[data-url='/'] .demo-container h1,
[data-url='/'] #frame-scaler {
	display: none;
}

.demo-container {
	width: 1120px;
	background-color: white;
}
.demo-container .ui-panel {
	box-shadow: none;
}

.page-header:first-child {
	margin: 2em 0 1.5em;
}

p.intro {
	text-align: center;
	font-size: larger;
	margin: 2em 4em;
}

.demo-page-index {
	list-style: none;
	width: 70%;
	margin: 2rem auto;
	text-align: center;
}
.demo-page-index li {
	padding: .25rem 1rem;
	display: inline-block;
}

.demo-compartments {
	position: fixed;
	z-index: 5;
	top: 0;
	left: 0;
	right: 0;
	box-shadow: none;
	text-transform: capitalize;
}
.demo-compartments ul {
	max-width: 88%;
	overflow: hidden;
}

.demo-compartments .ui-logo {
	background: url('/img/logo-saltside.png') no-repeat;
	background-size: contain;
	background-position: 0 5px;
}

.demo-description code {
	padding: .2em .4em;
	background: #fff;
	border: solid 1px #ccc;
	border-radius: .4em;
}

.demo-code,
.demo-frame {
	border: none;
	display: block;
	box-shadow: 0 1px 1px 1px rgba(0,0,0, 0.125);
	border-radius: 1px;
}

.demo-frame {
	width: 100%;
	height: 6em;
	padding: 0;
	margin: 2rem auto;
	transition: all 0.3s ease;
}
.demo-frame.is-lg {
	width: 1080px !important;
}
.demo-frame.is-not-lg {
	max-width: 346px !important;
}
.demo-frame.is-not-xs {
	min-width: 346px !important;
}
.demo-frame.is-sm {
	width: 346px !important;
}
.demo-frame.is-xs {
	width: 266px !important;
}

.demo-code {
	font-size: 12px;
	font-family: Consolas, monospace;
	padding: 1em;
	margin: 1em auto;
	overflow-x: auto;
	-webkit-tab-size: 4 !important;
	-moz-tab-size:    4 !important;
	-o-tab-size:      4 !important;
	tab-size:         4 !important;
}
.demo-code {
	background: #f5f5f5;
}

.demo-item{
	margin-bottom: 1rem;
}
.demo-item .is-lead {
	margin-top: 1.5em;
}
.demo-item .ui-panel-content > h2:first-child {
	border-bottom: 1px solid #DBDBDB;
	margin-top: -100px;
	padding-top: 100px;
	pointer-events: none;
}

/*
 * Color demo page
 */
.demo-color {
	text-align: center;
	margin-top: 1.5rem;
}
.demo-color .is-lead {
	min-height: 55px;
}
.demo-color p,
.demo-color code {
	display: block;
	font-weight: 300;
	margin: .25rem 0;
}
.demo-color code {
	font-size: 12px;
}
.demo-color .color-preview {
	width: 7rem;
	height: 7rem;
	margin: 0 auto 1rem;
	position: relative;
}
.demo-color .color-blob {
	position: absolute;
	height: 7rem;
	width: 7rem;
	margin: 0;
	padding: 0;
	top: 0;
	left: 0;
	border-radius: 3.5rem;
	box-shadow: 0 1px 12px 0 rgba(0,0,0, 0);
	transition: all .2s ease;
}
.demo-color .color-blob:hover {
	top: -2rem;
	left: -2rem;
	width: 11rem;
	height: 11rem;
	box-shadow: 0 3px 3px 0 rgba(0,0,0, 0.4);
	border-radius: 6rem;
}
.demo-color .design,
.demo-color .variable {
	font-weight: 400;
}

.jade .demo-code {
	display: none;
}
.jade .demo-code.is-visible {
	display: block;
}

/*
 * Frame scaler
 */

#frame-scaler {
	position: fixed;
	top: 90px;
	left: 0;
}
#frame-scaler a {
	display: block;
	width: 36px;
	height: 36px;
	background-repeat: no-repeat;
	background-position: 50% 0%;
	background-size: contain;
	margin: 10px;
	opacity: 0.25;
	-webkit-filter: grayscale(100%);;
	filter: grayscale(100%);
	transition: all 0.3s ease;
}
#frame-scaler a.is-active,
#frame-scaler a:hover {
	opacity: 1;
}
#frame-scaler .xs {
	background-image: url('../img/featurephone.png');
}
#frame-scaler .sm {
	background-image: url('../img/smartphone.png');
}
#frame-scaler .lg {
	background-image: url('../img/desktop.png');
}

/**
 * Indicators
 */
 .canvas-demo {
 	height: 200px;
 	cursor: pointer;
 }
 .canvas-demo .size {
 	margin: 2rem;
 	font-size: larger;
 }
 .canvas-demo.demo-1 {
 	background-color: #CAA;
 }
 .canvas-demo.demo-2 {
 	background-color: #CAC;
 }
 .canvas-demo.demo-3 {
 	background-color: #ACC;
 }
 .canvas-demo.demo-4 {
 	background-color: #CCA;
 }
 .canvas-demo.demo-5 {
 	background-color: #AAC;
 }
 .canvas-demo.demo-6 {
 	background-color: #CAA;
 }

/**
 * Testing mode
 */

 .testing-visual > .ui-nav,
 .testing-visual .demo-item .is-lead,
 .testing-visual .demo-description,
 .testing-visual .demo-code,
 .testing-visual p.intro,
 .testing-visual .demo-docs,
 .testing-visual .page-header {
 	display: none;
 }
 .testing-visual.is-demo-page {
 	padding-top: 0;
 	margin: 0;
 }

 .test-async-image {
 	margin: 20px 0;
 	display: block;
 }