html, body { height: 100%; }
body {
	font: normal normal normal 1em/1.5em 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 16px;
	color: #FFDEE9;
	background-color: #831556;
	background-position: bottom right;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
a { text-decoration: none; color: #FF00A2; }
a:hover { color: #300; background-color: #F0A; }
p,
ul,
h1,
h2 { margin: 0 0 1.5em 0; text-shadow: #5E0E3D 1px 1px 1px; }

#content {
	max-width: 1080px;
	position: relative;
	height: 100%;
	min-height: 18em;
}

#header, #footer {
	position: absolute;
	left: 2em;
	bottom: 2.55em;
}
#footer {
	left: 4.25em;
	bottom: 1.85em;
	border-top: 1px dotted #5D0E3C;
}
#header h1 {
	font-size: 1.75em;
	line-height: 2em;
	margin-bottom: 0;
	text-align: left;
	font-weight: normal;
}
#footer p {
	font-size: 0.8em;
	line-height: 1.75em;
	margin: 0;
}

#left, #right {
	position: absolute;
	height: auto;
	top: 2em;
	left: 2em;
	bottom: 7.5em;
	width: 48%;
	min-height: 6em;
	background: rgb(104, 16, 68);
	background: rgba(99, 15, 65, 0.85);
	padding: 1em;
	border-radius: 3px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	text-align: center;
}
#right {
	margin-left: 6em;
	left: 48%;
	width: 37%;
}

#source, #result {
	margin: 0; padding: 0;
	height: 100%;
	width: 100%;
	max-width: 100%;
	overflow: auto;
	text-align: left;
}
#source {
	padding: 0.2em;
	margin: -0.2em;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	
	font-size: 1em;
	line-height: 1.5em;
	letter-spacing: -0.5px;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	
	border: none;
	background: none;
	background: rgba(91, 13, 59, 0);
	color: inherit;
	text-shadow: #5E0E3D 1px 1px 1px;
	
	resize: none;
	-webkit-transition-property: background, color;
	-webkit-transition-duration: 0.3s;
}
#source:focus {
	outline: none;
	color: #FFF;
	background: rgb(91, 13, 59);
	background: rgba(91, 13, 59, 1);
}

#result select {
	margin: 0; padding: 0;
	font-size: 1em;
	line-height: 1.5em;
	height: 1.5em;
}
#result a {
	text-decoration: none;
	color: #FFF;
	text-shadow: #999 0px 0px 1px;
}
#result a:hover {
	color: #000;
}

#status {
	display: none;
	position: absolute;
	height: auto;
	top: 35%;
	left: 48%;
	font-size: 2em;
	line-height: 1em;
	margin-left: 2em; /* 3 - 1 (width) */ 
	width: 1em;
	text-align: center;
	word-wrap: break-word;
	color: #681044;
}


@media screen and (max-width:560px) {
	body {
		-webkit-background-size: auto 50%;
		   -moz-background-size: auto 50%;
		     -o-background-size: auto 50%;
		        background-size: auto 50%;
	}
	#header, #footer {
		position: static;
		border-top: none;
		margin-left: 1em;
	}
	#footer { padding-bottom: 1.25em; }
	#left, #right {
		width: 100%;
		position: static;
		margin: 0 0 1.5em;
		min-height: 0;
	}
	#source {
		height: auto;
	}
}