.regex-test-bg {
	padding: 48px 20px 0 20px;
	background-color: #339966;
	background-image: url(bg.png);
	color: #FFF;
	-webkit-font-smoothing: antialiased;
}
.regex-test {
	text-align: center;
}

	.regex-test > .pattern,
	.regex-test > .tester {
		position: relative;
		display: inline-block;
		width: 100%;
		margin-bottom: 4rem;
		color: hsl(75, 70%, 60%);
		font: 160%/1 Consolas, Monaco, monospace;
		white-space: nowrap;
		overflow: auto;
		transition: all .2s;
		transition-property: color;
		transition-duration: .3s;
	}
	
	.regex-test > div.invalid {
		color: #fbb;
	}
	
	.regex-test > div.invalid:before {
		content: '✖';
		position: absolute;
		left: .2em;
		top: .1em;
		z-index: -1;
		width: 1em;
		padding: .1em;
		border: .2em solid;
		border-radius: 50%;
		box-shadow: 0 -.02em .03em black, 0 -.02em .03em black inset;
		text-align: center;
		color: hsl(30,20%,19%);
		font: 60%/1 sans-serif;
	}
	
		.regex-test > div > div {
			display: inline-block;
			position: relative;
		}

		.regex-test input {
			position: relative;
			z-index: 1;
			min-width: .1em;
			padding: 0;
			margin: 0 auto;
			border: 0;
			outline: none;
			background: transparent;
		}
		
		.regex-test input:hover {
			outline: 1px dashed hsla(0,0%,100%,.3);
			outline-offset: -1px;
		}
		
		.match.indicator {
			min-width: 10px;
			background: rgba(0,0,0,.3);
			position: absolute;
			top: 0;
			bottom: 0;
			border-radius: .1em;
			transition-duration: .2s;
			transition-property: left, width;
		}
		
		.sub.match.indicator {
			background: rgba(0,0,0,.2);
		}
		
		.regex-test h1,
		.regex-test ul {
			text-align: left;
		}
		
		.regex-test h1 {
			color: hsl(30,20%,19%);
			font: italic 180% Baskerville, serif;
			text-shadow: 0 .1rem hsla(0,0%,100%,.3);
		}
		
		.regex-test ul {
			font-size: 90%;
		}