/*
 * coffeescript-ui - Coffeescript User Interface System (CUI)
 * Copyright (c) 2013 - 2016 Programmfabrik GmbH
 * MIT Licence
 * https://github.com/programmfabrik/coffeescript-ui, http://www.coffeescript-ui.org
*/

/* Content Area */
.cui-document-browser-center {

	padding: 1rem 3rem 3rem 3rem;


	// ##########################
	// # Typography
	// ##########################
	h1 {
		margin: 1rem 0 0 0;

		& + p { // For inheritance section
			margin: 1rem 0 0rem 0;
		}
	}

	h2 {
		margin: 3rem 0 1.5rem 0;
	}

	p {
		margin: 0 0 1rem 0;
	}

	hr {
		width: 100%;
	}




	// ##########################
	// # General Elements
	// ##########################

	// Unordered Lists
	ul {
		list-style-type: none;
		margin-left: 1rem;
		line-height: 1.5rem;

		li {
			//display: list-item;
		}

		li::before {
			content: "\203A";
			position: absolute;
			margin-left: -1rem;
		}
	}


	// ##########################
	// # BreadCrump
	// ##########################
	span.inheritance {
		background-color: #ebebeb;
		line-height: 2rem;
		padding: .2rem 0rem .3rem .2rem;

		&::before {
			content: "Inheritance:\00a0";
			background-color: hsl(0, 0%, 82%);
			padding: .2rem .3rem .3rem .5rem;
			margin-left: -.2rem; // same as padding-left of parent's span.
			margin-right: .5rem;
		}

		mark {
			background-color: hsl(0, 0%, 87%);
			text-decoration: none;
			padding: .2rem .2rem .3rem .3rem;
		}
	}

	// --> Links
	a.inheritance {

		padding-right: 0rem;

		&::before {
			content: "";
			background: url('../../../icons/arrow-right.svg');
			background-repeat: no-repeat;
			background-size: 1rem 1rem;
			display: inline;
			padding-right: 1.54rem;
			margin-left: .3em;
			vertical-align: middle;

		}
	}


	// ##########################
	// # Code Box
	// ##########################
	pre {
		// white-space: pre-wrap;
		display: block;
		position: relative;
		overflow-x: visible;
		padding: 2.5em 1em 1em 1em; // top padding for pseudo element's space
		color: #abb2bf;
		background: #282c34;

	}

	pre::before {
		content: "Example";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		height: 1.7em;
		width: 100%;
		background: #535b6b;
		box-sizing: border-box;
		padding: 0.2em 0 0 1em;
	}


	// ##########################
	// # Step1, Step2, ... INSTRUCTION lists
	// ##########################
	//
	// Little trick is needed:
	// 		->	place a <h5>-"instructions"-tag (##### in markdown) dirctly ABOVE the ordered list
	//
	#instructions {
		visibility: hidden;
		margin: 0;
		padding: 0;
		line-height: 0;

		// LISTS
		& + ol {
			list-style-type: none;
			line-height: 1rem;
			margin: 0 0 0 2rem;

			li {

				counter-increment: point;
				margin-top: 1.5rem;
				border-left: 2px solid #d1d1d1;
				padding-left: 1rem;
				min-height: 2rem;

			}

			li::before {
				content: counters(point,"");
				display: inline-block;
				float: left;
				width: 2.5rem;
				margin-left: -4rem;
				margin-right: 1rem;
				text-align: center;
				padding-top: .5rem;

				color: #d1d1d1;
				font-size: 1.5rem;
			}
		}
	}


	// ##########################
	// # PARAMETER TABLE
	// ##########################
	//
	// Extended style of all parameter tables within the content area
	//
	div.parameter {

		h2 {
			position: relative;
			margin-top: 7rem;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 2rem;
			text-align: left;

			&[id^="callba"] {
				margin-top: 4rem;
			}
		}


		table {
			width: 100%;
			border-collapse: collapse;
			line-height: 1.5em;
			position: relative;

			th, td {
				padding: 1rem .1rem 1rem .65rem;
			}

			th, thead {
				background: hsl(231, 12%, 19%);
				color: #FFF;
			}

			// table head's radius
			th {
				&:first-child {
					border-radius: 5px 0px 0px 0px;
				}
				&:last-child {
					border-radius: 0px 5px 0px 0px;
				}
			}

			td {

				vertical-align: middle;

				// row's height
				//height: 55px;

				// Zebra Style
				&:nth-child(2n-1) {
					background: hsl(0, 0%, 92%);
				}

				// specific column styling
				&:nth-child(1) { // Parameter
					width: 16%;
				}
				&:nth-child(2) { // Format
					width: 32%;

					// Definition list styling
					dt ~ dt::before { // all <dt>-Elements that are following on the first one
						content: "or \00a0"; // 2225 = | , 00a0 = SPACE
					}
				}
				&:nth-child(3) { // Default
					width: 10%;
				}
				&:nth-child(4) { // Mandatory
					width: 10%;
				}
				&:nth-child(5) { // Description
					width: 32%;
				}
			}

			tr {

				// Separating bottom borders
				border-bottom: 1px solid hsl(0, 0%, 80%);

			}


			// Removed Opts
			span.removed-opt {
				text-decoration: line-through;
				color: hsl(0,60%,50%);

				&::before {
					content: url('../../../icons/remove-icon.svg');
					width: 1rem;
					height: 1rem;
					display: inline-block;
					vertical-align: middle;
					padding-right: .5rem;
				}
			}
			// Merged Opts
			span.merged-opt {
				color: hsl(210,100%,60%);

				&::before {
					content: url('../../../icons/merge-icon.svg');
					width: 1rem;
					height: 1rem;
					display: inline-block;
					vertical-align: middle;
					padding-right: .5rem;
				}
			}
		}

	}


	//    ^
	//   ^ ^    Arrow for inheritance style
	//  ^   ^
	//
	div.parameter ~ div.parameter {

		h2[id^="parameter"]::after {
				content: "";
				background: url('../../../icons/inherit.svg');
				background-size: contain;
				width: 3rem;
				height: 3rem;
				position: absolute;
				top: -4rem;
				left: 50%;
				transform: translateX(-50%);
		}
	}




}



// Navigation
.cui-document-browser-list{
	flex-shrink: 0 !important;
	width: 200px;
}










.cui-sticky-header-demo-pane {
	> .cui-vertical-layout-center {
		overflow: auto;
	}
}

.cui-demo-header {
	.cui-demo-menu-button,
	.theme-switch  {
		&,
		&:active,
		&.cui-active {
			.cui-button-visual {
				color: inherit;
				background: transparent;
				border-style: none;
				box-shadow: none;
			}
		}
	}
	.cui-demo-menu-button .fa {
		font-size: 21px;
	}
	.theme-switch  {
		font-size: 15px;
	}
	.cui-demo-title {
		font-size: 20px;
		color: #fff;
		background-color: #000;
		padding: 2px 7px;
		height: auto;
	}
	.cui-demo-sub-title {
		font-size: 20px;
		padding: 2px 7px;
	}
}

body.cui-demo-playground,
body.cui-demo-docs {
	// hide console
	.cui-demo-root-center > .cui-horizontal-layout {
		> .cui-flex-handle,
		> .cui-demo-pane-right {
			display: none;
		}
	}
}

// Demo Table
.cui-demo-divider-label {
	font-size: 18px;
	margin: 10px 0;
}

.cui-demo-table {
	margin: 10px;

	> .cui-tr {
		+ .cui-demo-divider {
			> .cui-td {
				padding-top: 20px;
			}
		}

		> .cui-td {
			vertical-align: top;
			padding: 2px;
		}

		&.cui-demo-full-row > .cui-td {
			flex: 1 1 auto;
		}

		&:not(.cui-demo-full-row) > .cui-td {
			&:nth-child(1) {
				width: 200px;
				flex: 0 0 auto;
			}

			&:nth-child(2) {
				position: relative;
				flex: 1 1 auto;
			}
		}
	}
}

.cui-demo-pane-center {
	overflow: auto;
}

// console pane
.cui-demo-pane-right {
	width: 300px;
	background: hsl(205,17%,99%);

	.cui-demo-console-log {
		> div {
			display: block;
			padding: 2px;
		}
	}
}

// BoundingBoxDemo
.cui-bounding-box-demo-bounding-box {
  display: inline-block;
  position: absolute;
  background: #F3F3F3;
  top: 50%;
  left: 50%;
  font-size: 0;
  transform: translate(-50%, -50%);
}

.cui-bounding-box-demo-inner {
  display: inline-block;
  border: 1px solid #F16161;
  text-align: center;
  color: #F16161;
  font-size: 20px;
  line-height: 188px;
  position: absolute;
  left: 50%;
  top: 50%;
}


// EventsDemo
.cui-events-demo-ring,
.cui-events-demo-inner-ring
{
	border: 2px solid red;
	margin: 10px;
	padding: 5px;
	display: inline-block;
	min-width: 100px;
	background-color: #ffffff;
	&:not(.node-ring) {
		font-weight: normal;
	}
	&.node-ring {
		font-weight: bold;
		border-color: green;
		background-color: #bef5be;
	}
	&.flash-ring {
		background-color: rgba(36, 96, 255, 0.32) !important;
	}
}

.cui-events-demo-pointer-events {
	padding: 5px;
	background-color: #e9e9ff;
	&:hover {
		cursor: pointer;
	}
	&.flash-ring {
		background-color: #ffe4f4;
	}
}

.cui-events-demo-form {
	width: 200px;
}

// FileUpload
.cui-tmpl-file-upload-demo {
	width: 100px;
	height: 100px;
	border: 1px solid hsl(205,10%,75%);
	padding: 4px;
	margin: 0 4px 4px 0;
	justify-content: space-between;

	.cui-file-upload-demo-info {
		word-break: break-all;
	}
}

// DragDropSelectDemo
.drag-drop-select-demo-draggable-container,
.drag-drop-select-demo-droppable-container,
.drag-drop-select-demo-sortable-container,
.drag-drop-select-demo-sortable-container2,
.cui-file-upload-demo-drop-zone
{
	flex-flow: row;
	flex-wrap: wrap;
	height: 200px;
	overflow: auto;
	padding: 5px;
	font-size: 1.5em;
	color: hsl(205,10%,75%);
	border: 1px dashed hsl(205,10%,75%);
	align-items: center;
	justify-content: center;
	border-radius: 5px;

	&:empty:after {
		content: "Drop here";
	}
}

.drag-drop-select-demo-draggable-container-item,
.drag-drop-select-demo-droppable-container-inner,
.drag-drop-select-demo-sortable-container-item
{
	display: inline-block;
	width: 50px;
	height: 50px;
	margin: 0 3px 3px 0;
	border: 2px solid red;
	background-color: #f3d6e4;
}

.cui-tr.cui-demo-sortable {
	.cui-demo-example-content {
		flex-direction: row;
	}
}

.drag-drop-select-demo-sortable-container {
	width: 120px;
	margin-right: 10px;
	height: 250px;
	.drag-drop-select-demo-sortable-container-item {
		display: block;
		width: 80px;
	}
}

.drag-drop-select-demo-sortable-container2 {
	height: 250px;
	flex: 1 1 auto;
	.drag-drop-select-demo-sortable-container-item {
		flex-wrap: wrap;
		width: 60px;
	}
}

.mark-lassoed {
	background-color: red;
}


// LayoutDemo

.cui-layout-demo-playground {
	border-width: 2px;
	background-color: #eff5ff;
	padding: 10px;
	.cui-horizontal-list,
	.cui-vertical-list {
		> div > .cui-label {
			border-color: blue;
			border-style: dotted;
			border-width: 2px;
		}
	}
	.cui-label {
		font-weight: bold;
	}
	.cui-layout-demo-child {
		> div {
			border-color: green;
			border-style: dotted;
			padding: 5px;
			border-width: 1px;
			margin: 2px;
		}
		border-color: green;
		border-style: solid;
	}
	.cui-layout-demo-parent {
		border-color: red;
		border-style: solid;
		> div {
			padding: 5px;
			border-width: 1px;
			border-style: dotted;
			border-color: red;
			margin: 2px;
		}
	}
}

// LayerDemo

.cui-layer-demo-center {
	margin: 10px 0px;
	border: 2px solid red;

	background-image: url(../../../demos/Menu/Schmetterling.jpg);
    background-repeat: no-repeat;
    background-size: cover;

	.cui-layer-demo-start-button {
		margin: 4px;
		position: absolute;
	}

	.cui-layer-demo-start-button-nw {
		top: 0;
		left: 0;
	}

	.cui-layer-demo-start-button-sw {
		bottom: 0;
		left: 0;
	}

	.cui-layer-demo-start-button-se {
		right: 0;
		bottom: 0;
	}

	.cui-layer-demo-start-button-ne {
		top: 0;
		right: 0;
	}

	.cui-layer-demo-start-button-c {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%)
	}

}


// TooltipDemo

.cui-tooltip-demo-table .text-block {
	display: block;
	.cui-dom-element-has-tooltip-on-hover {
		cursor: pointer;
		border-bottom: 1px dotted #000000;
	}
	.cui-dom-element-has-tooltip-on-click {
		cursor: pointer;
		border-bottom: 1px solid #000000;
	}
}

// WaitBlock

.cui-waiting-block-demo {
	width: 400px;
	height: 400px;
	border: 2px solid green;
	margin: 20px 0;
	background: #ffe8d3;
}

// ScrollIntoViewDemo

.scroll-demo-container {

	width: 800px;
	height: 600px;
	position: relative;
	background: hsla(249, 64%, 62%, 0.35);
	overflow: hidden;

	div {
		position: absolute;
		overflow: auto;
	}

	.scroll-demo-1 {
		top: 100px;
		border: 2px solid orange;
		left: 200px;
		width: 400px;
		height: 400px;
		background: hsla(149, 64%, 62%, 0.35);
	}

	.scroll-demo-2 {
		border: 2px solid orange;
		top: 50px;
		left: 50px;
		width: 200px;
		height: 400px;
		background: hsla(49, 64%, 62%, 0.35);
	}

	.scroll-demo-3 {
		border: 2px solid orange;
		background: hsla(208, 100%, 97%, 0.92);
		top: 100px;
		left: 200px;
		width: 180px;
		height: 200px;
	}

	.scroll-demo-4 {
		border: 2px solid orange;
		background: hsla(208, 50%, 97%, 0.92);
		width: 1800px;
		height: 1000px;
		left: 200px;
		margin: 40px;
	}


	.scroll-item {
		border: 1px solid black;
		background-color: white;
		margin: 5px;
		padding: 3px 6px;
	}

	.item--a {
		left: 0;
		top: 329px;
	}

	.item--b {
		left: 100px;
		top: 400px;
	}

	.item--c {
		left: 200px;
		top: 800px;
	}

	.item--d {
		top: 1000px;
	}

	.item--e {
		top: 100px;
		left: 100px;
	}

	.item--f {
		top: 2000px;
		left: 2000px;
	}

	.item--hidden {
		top: 1000px;
	}
}

// Sudoku


.sudoku {
	position: absolute;
	top: 100px;
	left: 100px;
	width: 427px;

	.grid {
		background: #ffffff;
		margin: 20px;
		display: inline-block;
		user-select: none;
	}

	.cell {
		border: 1px solid #000000;
		display: inline-block;
		width: 43px;
		height: 43px;
		text-align: center;
		vertical-align: middle;
		cursor: default;
		line-height: 12px;
		font-size: 10px;
		padding: 2px;
	}

	.row {
		display: block;
	}

	.cell[board="set"] {
		color: blue;
		line-height: 36px;
		font-size: 30px;
		font-weight: bold;
	}

	.cell[board="guess"] {
		color: orange;
		line-height: 36px;
		font-size: 30px;
		font-weight: bold;
	}

	.cell[board="solved"] {
		color: green;
		line-height: 36px;
		font-size: 30px;
		font-weight: bold;
	}

	.cell[board="start"] {
		color: black;
		line-height: 36px;
		font-size: 30px;
		font-weight: bold;
	}

	.cell.cursor {
		background: #ecf1ff;
	}

	.cell:nth-child(3n) {
		border-right-width: 2px;
	}

	.cell:nth-child(1) {
		border-left-width: 3px;
	}

	.cell:nth-child(9) {
		border-right-width: 3px;
	}

	.row:nth-child(3n) .cell {
		border-bottom-width: 2px;
	}

	.row:nth-child(1) .cell {
		border-top-width: 3px;

	}

	.row:nth-child(9) .cell {
		border-bottom-width: 3px;

	}

}

.cui-map-first {
	z-index: 1;
}

.cui-map-second {
	z-index: 1;
}