@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800|Merriweather:400,300|Inconsolata);
@import "typography";
@import "fl-break";
@import "base";
@import "prism";

html {
	min-width: 50em;
}

header.main {
	position: relative;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	-webkit-transform: translate3d(0,0,0);

	.header_bg {
		width: 100%;
		padding: 2em 1em 0;
		background: #ff3333;
	}

	.heading {
		float: left;
		margin-bottom: .5em;
	}

	h1 {
		float: left;
		color: white;
		margin: 0;
		font-family: $headingFont;
		font-weight: 400;
		font-size: 1em;
		text-transform: uppercase;

		span {
			display: none;
			position: relative;
			margin: 0 1em;
			font-family: $bodyFont;
			font-weight: 300;
			font-size: .454545455em;
			top: -.35em;
		}
	}

	.craft_logo {
		display: none;
		position: relative;
		float: left;
		width: 2.75em;
		top: .25em;
	}

	.focus_logo {
		display: none;
		position: absolute;
		top: 50%;
		right: 1em;
		width: 1.875em;
		margin-top: -.9375em;
	}

	@include fl-break(25.625em) {
		.header_bg {
			padding: 2em 3.75em 0 1em;
		}

		h1 {
			font-size: 1.375em;
		}

		.focus_logo {
			display: block;
		}
	}

	@include fl-break(32em) {
		h1 span {
			display: inline-block;
		}

		.craft_logo {
			display: block;
		}
	}

	@include fl-break(72.5em) {
		.header_bg {
			padding: 2em 1em 0;
		}
	}
}

nav.element_type {
	clear: both;

	ul.types {
		list-style-type: none;
		margin: 0;
		padding: 0;

		&> li {
			float: left;
			margin-right: 1.5em;

			&:last-child {
				margin-right: 0;
			}

			label {
				position: relative;
				display: block;
				color: white;
				font-family: $bodyFont;
				font-weight: 300;
				font-size: .875em;
				text-decoration: none;
				padding-bottom: 2.285714286em;
				overflow: hidden;
				cursor: pointer;
				-webkit-transition: color .3s ease;
				transition: color .3s ease;

				&:hover {
					color: rgba(white, .8);
				}

				&::after {
					content: "";
					position: absolute;
					bottom: 0;
					left: 50%;
					margin-left: -.5em;
					border: .5em solid transparent;
					border-top: none;
					border-bottom-color: rgba(black, .1);
					-webkit-transform: translateY(100%);
					transform: translateY(100%);
					-webkit-transition: -webkit-transform .3s ease-in-out;
					transition: transform .3s ease-in-out;
				}
			}

			input[type="radio"] {
				position: absolute;
				left: -9999em;
			}

			a {
				-webkit-transition: color .3s ease;
				transition: color .3s ease;

				&:hover {
					color: rgba(white, .8);
				}
			}

			.element_type_tab {
				position: absolute;
				z-index: -1;
				bottom: 0;
				left: 0;
				width: 100%;
				padding: 0 1em;
				background: #ff3333;
				-webkit-transition: -webkit-transform .3s ease-in-out;
				transition: transform .3s ease-in-out;

				&::before {
					content: "";
					position: absolute;
					z-index: -1;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background: rgba(black, .1);
				}
			}

			input[type="radio"]:checked ~ label:after {
				-webkit-transform: translateY(0);
				transform: translateY(0);
			}

			input[type="radio"]:checked ~ .element_type_tab {
				-webkit-transform: translateY(100%);
				transform: translateY(100%);
			}

			ul {
				list-style-type: none;
				margin: 0;
				padding: 1em 0;

				li {
					display: inline-block;
					font-size: .875em;
					margin-right: 1em;

					a {
						float: left;
						text-decoration: none;
						color: white;
						font-family: $bodyFont;
						font-weight: 300;
						padding: .5em 0;
						border-radius: 3em;
						-webkit-transition: padding .3s ease, background .3s ease, color .3s ease;
						transition: padding .3s ease, background .3s ease, color .3s ease;

						&.activeContext {
							background: rgba(black, .1);
							padding: .5em 1em;
						}
					}

					&.custom_input {
						display: block;
						margin-right: 0;

						.input_contain {
							position: relative;
							margin-bottom: 1em;


							input[type="text"] {
								border: none;
								background: white;
								outline: none;
								display: block;
								font-family: $bodyFont;
								font-size: 1em;
								padding: .75em 3.75em .75em .75em;
								font-weight: 300;
								width: 100%;
								min-width: 17em;
								margin: 0;
								border-radius: .4em;
								-webkit-box-shadow: 0 .142857143em .357142857em 0 rgba(black, .06);
								-moz-box-shadow: 0 .142857143em .357142857em 0 rgba(black, .06);
								box-shadow: 0 .142857143em .357142857em 0 rgba(black, .06);
							}

							input[type="submit"] {
								position: absolute;
								top: 0;
								right: 0;
								cursor: pointer;
								color: white;
								background: #ff3333;
								font-family: $bodyFont;
								font-size: 1em;
								font-weight: 400;
								padding: .75em 1.5em;
								border: none;
								outline: none;
								margin: 0;
								border-radius: 0 .4em .4em 0;
							}
						}
					}

					&.custom_element {
						position: relative;

						.remove_custom {
							position: absolute;
							opacity: 0;
							top: 45%;
							right: 1em;
							font-weight: 400;
							color: white;
							-webkit-transform: translateY(-50%);
							transform: translateY(-50%);
							-webkit-transition: opacity .3s ease;
							transition: opacity .3s ease;
						}

						a:hover {
							background: rgba(black, .1);
							padding: .5em 2.25em .5em 1em;

							.remove_custom {
								opacity: 1;
							}
						}
					}
				}
			}
		}
	}

	@include fl-break(37.5em) {
		ul.types > li ul li {
			&.custom_input {
				float: left;
				margin-right: 1.5em;

				.input_contain {
					margin-bottom: 0;
				}
			}

			&.custom_element {
				margin-top: .25em;
				margin-bottom: .4em;
			}
		}
	}

	@include fl-break(50em) {
		clear: none;
		float: right;

		ul.types {
			float: right;

			&> li {
				label {
					padding-bottom: 2.5em;
				}

				.element_type_tab {
					overflow: hidden;
					padding: 0 3.75em 0 1em;
				}

				ul {
					float: right;

					li {
						margin-right: 0;
						margin-left: 2em;

						&.custom_input {
							float: right;
							margin-right: 0;
						}

						&.custom_element {
							float: right;
						}
					}
				}
			}
		}
	}

	@include fl-break(72.5em) {
		ul.types > li .element_type_tab {
			padding: 0 1em;
		}
	}
}

.content {
	padding: 0 1em;

	.contain {
		position: relative;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 15.9375em;
			max-width: 80%;
			height: 100%;
			border-right: 1px solid #dfdfdf;
		}
	}
}

aside {
	position: absolute;
	top: 0;
	left: 0;
	width: 15.9375em;
	max-width: 80%;

	&::before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		width: 15.9375em;
		height: 100%;
		border-right: 1px solid #dfdfdf;
	}

	.fields_contain {
		padding: 7em 20% 6em 0;
		width: 100%;
	}

	h2 {
		font-family: $headingFont;
		font-size: 1.375em;
		font-weight: 400;
		color: #d5d4d4;
		margin-top: 0;
	}

	input[type="text"] {
		width: 100%;
		border: 1px solid #dfdfdf;
		padding: 1em;
		margin-bottom: 1em;
		background: white;
		outline: none;
		font-family: $bodyFont;
		font-size: .75em;
		font-weight: 300;
		border-radius: .4em;
	}

	ul {
		list-style-type: none;
		margin-bottom: 0;
		padding: 0;
		font-family: $bodyFont;

		&.hidden { display: none; }

		li {
			color: #4a4a4a;
			font-weight: 400;
			margin-bottom: .5em;

			&.hidden { display: none; }

			input[type="checkbox"] {
				position: absolute;
				left: -9999em;
			}

			label {
				cursor: pointer;
				position: relative;
				display: block;
				font-weight: 700;
				font-size: .875em;

				&::after {
					content: "+";
					position: absolute;
					top: 0;
					right: .5em;
				}
			}

			a {
				color: #4a4a4a;
				font-size: .875em;
				text-decoration: none;
			}

			ul {
				margin-top: .5em;
				padding-left: 1.5em;
				max-height: 0;
				-webkit-transition: max-height .3s ease;
				transition: max-height .3s ease;
				overflow: hidden;
			}

			input[type="checkbox"]:checked ~ ul {
				max-height: 30em;
			}

			input[type="checkbox"]:checked ~ label::after {
				content: "-";
			}
		}
	}
}

.main_body {
	padding: 7em 0 3em 15.9375em;

	p.notice {
		font-size: .875em;
		border: 1px solid #db5858;
		border-radius: .25em;
		background: #ffb2b2;
		padding: 1em;
	}

}

.field_block, #no_results {
	padding-left: 11.0067114%;
	margin-bottom: 4.5em;
	-webkit-transition: opacity .3s ease;
	transition: opacity .3s ease;

	&.hidden { display: none; }

	header {
		overflow: hidden;
		margin-bottom: 2em;
		padding-bottom: 1em;
		border-bottom: 1px solid #dfdfdf;

		h1 {
			font-size: 2em;
			font-family: $headingFont;
			font-weight: 400;
			color: #4a4a4a;
			margin: 0;

			span {
				display: block;
				font-family: $bodyFont;
				font-size: .375em;
				font-weight: 700;
				text-transform: uppercase;
				color: #b5b5b5;
				letter-spacing: 1;

				span {
					display: inline;
					font-size: 1em;
					color: #000;
				}
			}
		}

		.field_settings {
			list-style-type: none;
			margin: 1em 0 0;
			padding: 0;

			li {
				display: block;
				margin-bottom: .5em;

				&:last-child {
					margin-bottom: 0;
				}

				a {
					text-decoration: none;
					color: #fe4444;
					font-size: .8125em;
					font-family: $bodyFont;
					-webkit-transition: color .3s ease;
					transition: color .3s ease;

					&:hover {
						color: darken(#fe4444, 20%);
					}
				}
			}
		}
	}

	.code_block {
		margin-bottom: 2.5em;
	}

	h3 {
		color: #4a4a4a;
		text-transform: uppercase;
		font-size: .75em;
		font-family: $bodyFont;
		margin-bottom: 1em;
		font-weight: 700;
	}

	.description {
		position: relative;
		border: 1px solid #dfdfdf;
		border-radius: .25em .25em 0 0;
		background: white;
		padding: 1em;
		margin-bottom: -.25em;

		p {
			margin: 0;
			font-size: .875em;
			line-height: 1.5em;
			font-family: $bodyFont;
			color: #4a4a4a;
		}
	}

	.extra {
		border: 1px solid #d8d891;
		border-radius: .25em;
		background: #fdfddb;
		padding: 1em;

		a, a:visited { color: #fe4444; }

		&> p { margin-top: 0; }
		p {
			font-size: .875em;

			&:last-of-type { margin-bottom: 0; }
		}
	}

	header + .extra { margin-bottom: 2.5em; }

	.code {
		position: relative;

		.copy {
			position: absolute;
			top: 50%;
			left: -2.25em;
			cursor: pointer;
			width: 1.5em;
			opacity: .7;
			-webkit-transform: translateY(-50%);
			transform: translateY(-50%);
			-webkit-transition: opacity .3s ease;
			transition: opacity .3s ease;


			.copy_label {
				position: absolute;
				top: 0;
				left: 50%;
				background: #fffedf;
				border: 1px solid #edeccb;
				color: #858585;
				font-family: $bodyFont;
				font-size: .5em;
				text-transform: uppercase;
				padding: .25em .5em;
				border-radius: .4em;
				white-space: nowrap;
				opacity: 0;
				-webkit-box-shadow: 0 .5em .5em 0 rgba(black, .06);
				-moz-box-shadow: 0 .5em .5em 0 rgba(black, .06);
				box-shadow: 0 .5em .5em 0 rgba(black, .06);
				-webkit-transform: translate(-50%, -2.5em);
				transform: translate(-50%, -2.5em);
				-webkit-transition: opacity .3s ease, -webkit-transform .3s ease;
				transition: opacity .3s ease, transform .3s ease;
			}

			&:hover {
				opacity: 1;

				.copy_label {
					opacity: 1;
					-webkit-transform: translate(-50%, -3.25em);
					transform: translate(-50%, -3.25em);
				}
			}

			svg {
				-webkit-transform: translate3d(0,0,0);
				-webkit-backface-visibility: hidden;
				-webkit-perspective: 1000;
			}
		}

		pre {
			border: 1px solid #dfdfdf;
			border-radius: .25em;
			background: #f6f6f6;
			padding: 1em;
			margin: 0;
		}
	}

	code {
		padding: 0;
		margin: 0;
		font-family: $codeFont;
		line-height: 1.5em;
	}

	pre > code {
		display: block;
		white-space: pre;
	}

	@include fl-break(43.75em) {
		header .field_settings li {
			float: left;
			margin-right: 1.5em;

			&:last-child {
				margin-right: 0;
			}
		}
	}

	@include fl-break(53em) {
		header {
			position: relative;

			.field_settings {
				position: absolute;
				bottom: 1em;
				right: 0;

				li {
					margin-bottom: 0;
				}
			}
		}
	}
}

.table_contain {
	overflow: hidden;
	border-radius: .25em;
	border: 1px solid #dfdfdf;
}

table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0;
	font-family: $bodyFont;

	tr {
		border-bottom: 1px solid #dfdfdf;

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

		th {
			text-align: left;
			background: #f6f6f6;
		}

		th, td {
			padding: 1em;
			font-size: .875em;
			border: none;
			border-right: 1px solid #dfdfdf;

			&:last-child {
				border-right: none;
			}
		}

		&:nth-child(even) {
			background: #f6f6f6;
		}

		pre {
			margin: 0;
		}
	}
}

footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 0 1em;

	.contain {
		position: relative;

	}

	.footer_content {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 15.9375em;
		max-width: 80%;
		padding: 1.5em 1em 1.5em 0;
		background: white;
		border-top: 1px solid #dfdfdf;

		&::before {
			content: "";
			position: absolute;
			z-index: -1;
			top: 0;
			left: 0;
			width: 15.9375em;
			height: 100%;
			border-right: 1px solid #dfdfdf;
		}

		p {
			color: #b5b5b5;
			text-transform: uppercase;
			font-size: .625em;
			line-height: 1.5em;
			font-family: $bodyFont;
			margin: 0;

			a {
				color: #fe4444;
				text-decoration: none;
				-webkit-transition: color .3s ease;
				transition: color .3s ease;

				&:hover {
					color: darken(#fe4444, 20%);
				}
			}
		}
	}
}

#no_results {
	p {
		text-align: center;
		background-position: bottom center;
		background-repeat: no-repeat;
		padding: 0 50px 360px;

		a {
			text-decoration: none;
			color: #fe4444;
		}
	}
}

// Animation for dynamic input focus and code copying
@-webkit-keyframes lookAtMeInputFade {
	0%   { background-color: #fff; }
	50%  { background-color: #fffedf; }
	100% { background-color: #fff; }
}
@-moz-keyframes lookAtMeInputFade {
	0%   { background-color: #fff; }
	50%  { background-color: #fffedf; }
	100% { background-color: #fff; }
}
@keyframes lookAtMeInputFade {
	0%   { background-color: #fff; }
	50%  { background-color: #fffedf; }
	100% { background-color: #fff; }
}
.lookAtMeInput {
	-webkit-animation: lookAtMeInputFade .75s ease-in-out;
	   -moz-animation: lookAtMeInputFade .75s ease-in-out;
	        animation: lookAtMeInputFade .75s ease-in-out;
}
@-webkit-keyframes lookAtMeCodeFade {
	0%   { background-color: #f6f6f6; }
	50%  { background-color: #dbffdc; }
	100% { background-color: #f6f6f6; }
}
@-moz-keyframes lookAtMeCodeFade {
	0%   { background-color: #f6f6f6; }
	50%  { background-color: #dbffdc; }
	100% { background-color: #f6f6f6; }
}
@keyframes lookAtMeCodeFade {
	0%   { background-color: #f6f6f6; }
	50%  { background-color: #dbffdc; }
	100% { background-color: #f6f6f6; }
}
.lookAtMeCode {
	-webkit-animation: lookAtMeCodeFade 1s ease-in-out;
	   -moz-animation: lookAtMeCodeFade 1s ease-in-out;
	        animation: lookAtMeCodeFade 1s ease-in-out;
}
