/*---------------------------------------------------------------------------------
	Params
---------------------------------------------------------------------------------*/

	#params table {
		border-spacing: 0;
		color: hsl(0, 0%, 50%);
		font: 105% monospace;
		padding: 20px 0;
		table-layout: fixed;
	}
	#params table th {
		color: hsl(0, 0%, 80%);
		clear: both;
		line-height: 160%;
		padding: 0 20px 0 20px;
		text-align: left;
		white-space: nowrap;
		vertical-align: top;
	}
	#params table td {
		color: hsl(210, 50%, 70%);
		line-height: 160%;
		padding: 0 20px 0 0;
		vertical-align: top;
	}

/*---------------------------------------------------------------------------------
	Source
---------------------------------------------------------------------------------*/

	#input {
		background: hsl(210, 5%, 15%);
		border-bottom: 1px solid hsl(210, 5%, 20%);
		color: hsl(0, 0%, 80%);
		display: block;
		font: 105% monospace;
		left: 0;
		line-height: 40px;
		padding: 0 20px;
		position: fixed;
		right: 270px;
	}
	#input input {
		background: transparent;
		width: 100%;
		padding: 4px;
	}
	#input input:hover {
		background: hsl(210, 5%, 17%);
	}

	#input input:focus {
		background: hsl(210, 5%, 19%);
	}

	#type {
		position: absolute;
		background-color: #242628;
		border-bottom: 1px solid #303335;
		border-left: 1px solid #303335;
		border-radius: 0 0 0 5px;
		text-align: center;
		height: 25px;
		top: 0;
		right: 0;
		width: 120px;
		padding: 4px;
	}

	#type span {
		color: #AEB2B6;
		text-shadow: 2px 2px 3px #0C0C0D;
		cursor: pointer;
	}

	#output {
		background: hsl(80, 100%, 50%);
		border-bottom: 1px solid hsl(80, 100%, 75%);
		color: hsl(80, 100%, 5%);
		display: block;
		font: 105% monospace;
		left: 0;
		line-height: 40px;
		padding: 0 20px;
		position: fixed;
		right: 270px;
	}
	#output + #content {
		top: 41px;
	}

	#source pre {
		color: hsl(0, 0%, 40%);
		counter-reset: markers;
		display: table;
		font: 105% monospace;
		padding: 20px 0;
		white-space: normal;
	}
	#source pre line {
		display: table-row;
		counter-increment: markers;
		padding: 0 20px 0 50px;
		white-space: pre-wrap;
	}
	#source pre line marker,
	#source pre line content {
		line-height: 160%;
	}

	#source pre.selected line content {
		opacity: 0.3;
	}
	#source pre.selected line.selected content {
		opacity: 1;
	}

	#source pre line:hover,
	#source pre line.selecting,
	#source pre line.deselecting {
		background: hsl(210, 5%, 15%);
	}
	#source pre line:hover marker,
	#source pre line.selecting marker,
	#source pre line.deselecting marker {
		color: hsl(210, 5%, 40%);
	}

	#source pre line marker {
		color: hsl(210, 5%, 20%);
		cursor: pointer;
		display: table-cell;
		padding: 0 10px 0 20px;
		text-align: right;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;
		user-select: none;
		width: 1%;
		vertical-align: top;
	}
	#source pre line marker:after {
		content: counter(markers);
	}

	#source pre line content {
		cursor: text;
		display: table-cell;
		padding: 0 20px 0 0;
	}

	#source pre line content .xpath-match,
	#source pre line content .tag-match {
		border-radius: 4px;
		-webkit-box-shadow: 0 0 10px hsl(0, 0%, 5%);
		box-shadow: 0 0 10px hsl(0, 0%, 5%);
		display: inline-block;
		margin: -2px -2px;
		padding: 1px 1px;
		position: relative;
	}

	#source pre line content .xpath-match {
		background: hsl(80, 100%, 50%);
		border: 1px solid hsl(80, 100%, 75%);
		cursor: default;
	}
	#source pre line content .xpath-match,
	#source pre line content .xpath-match * {
		color: hsl(80, 100%, 5%) !important;
	}

	#source pre line content .tag-match {
		background: hsl(40, 100%, 50%);
		border: 1px solid hsl(40, 100%, 75%);
		cursor: pointer;
	}
	#source pre line content .tag-match,
	#source pre line content .tag-match * {
		color: hsl(40, 100%, 5%) !important;
	}

/*-----------------------------------------------------------------------------
	Markup
-----------------------------------------------------------------------------*/

	#source .context-markup .declaration {
		color: hsl(0, 0%, 80%);
	}

	#source .context-markup .tag {
		color: hsl(0, 0%, 80%);
	}

	#source .context-markup .attribute {
		color: hsl(0, 0%, 80%);
	}

	#source .context-markup .entity {
		color: hsl(80, 50%, 70%);
	}

	#source .context-markup .value {
		color: hsl(210, 50%, 70%);
	}

/*-------------------------------------------------------------------------
	XSL
-------------------------------------------------------------------------*/

	#source .context-markup.xsl .xpath {
		color: hsl(300, 50%, 70%);
	}

/*-------------------------------------------------------------------------------*/