TextEditor Shell

markup.html

<div class="container">
		
		<section class="editorWrap">
			
			<h1 class="animate dropIn">Text Editor Shell</h1>
			
			<div class="editor animate fadeIn">
				<div class="menu"></div><!-- end .menu -->
				
				<div class="code">
					<textarea class="text" autofocus="true">Type away you hyper-typer you!</textarea><!-- end .code -->	
				</div>
			</div><!-- end .editor -->	
		
		</section><!-- end .editorWrap -->
		
		<p class="credit animate fadeIn">A random making of <a href="http://twitter.com/imjakechapman">Jake Chapman</a> <br />
			Download the source code <a href="http://cl.ly/0D2S111C1I2r0H3L1K1J">here</a>
		</p>
		
	</div><!-- end .container -->

style.css

body {
	background: #ccc;
}

.container {
	height: 100%;
	width: 100%;
	text-align: center;
}
.container:before {
	content: "";
	display: inline-block;
	height: 50%;
	vertical-align: middle;
	margin-right: -0.25em;
}

.editorWrap {
	position: relative;
	display: inline-block;
}

.editorWrap h1 {
	color: #333333;
	font-size: 3em;
	font-weight: 800;
	margin: 15px auto;
}

.editor {
	width: 100%;
}

.editor .menu {
	width: 598px;
	height: 25px;
	background: #eee;
	border-width:1px 1px 0 1px;
	border-style: solid;
	border-color: #959595;

	
	/* CSS3 properties */
	-webkit-border-top-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	
	background-color: #ccc;
	background-image: -webkit-linear-gradient(#d2d2d2 0%, #959595 100%);
	background-image: -moz-linear-gradient(#d2d2d2 0%, #959595 100%);
	background-image: -o-linear-gradient(#d2d2d2 0%, #959595 100%);
	background-image: -ms-linear-gradient(#d2d2d2 0%, #959595 100%);
	background-image: linear-gradient(#d2d2d2 0%, #959595 100%);
	
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255, .5), inset 0 -1px 0 rgba(0,0,0, .2);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255, .5), inset 0 -1px 0 rgba(0,0,0, .2);
	-ms-box-shadow: inset 0 1px 0 rgba(255,255,255, .5), inset 0 -1px 0 rgba(0,0,0, .2);
	-o-box-shadow: inset 0 1px 0 rgba(255,255,255, .5), inset 0 -1px 0 rgba(0,0,0, .2);
	box-shadow: inset 0 1px 0 rgba(255,255,255, .5), inset 0 -1px 0 rgba(0,0,0, .2);
	
}

.editor .code {
	width: 573px;
	height: 380px;
	padding: 5px 10px 10px 15px;
	background: #222;
	border: 1px solid rgba(0,0,0, .5);
	
	/* CSS3 properties */
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	
	-webkit-box-shadow:inset 15px 0 0 rgba(255,255,255, .05);
	-moz-box-shadow:inset 15px 0 0 rgba(255,255,255, .05);
	-ms-box-shadow:inset 15px 0 0 rgba(255,255,255, .05);
	-o-box-shadow:inset 15px 0 0 rgba(255,255,255, .05);
	box-shadow:inset 15px 0 0 rgba(255,255,255, .05);
}

.editor textarea.text{ 
	width: 560px;
	padding-left: 15px;
	height: 100%;
	background: transparent;
	outline: none;
	border: none;
	font-family: "Courier new", "american typewriter";
	font-weight: 400;
	font-size: .8em;
	line-height: 2;
	letter-spacing: 1.2px;
	color: #58bf1d;
	
	resize: none; /* stop textarea from being resized in webkit */
	max-width: 580px; /* prevents resizing */
	
	/* CSS3 properties */
	-webkit-text-shadow: 0px 0px 3px rgba(88,191,29,0.5);
	-moz-text-shadow: 0px 0px 3px rgba(88,191,29,0.5);
	-ms-text-shadow: 0px 0px 3px rgba(88,191,29,0.5);
	-o-text-shadow: 0px 0px 3px rgba(88,191,29,0.5);
	text-shadow: 0px 0px 3px rgba(88,191,29,0.5);
}

/* clear yo stuff son! */
.editor:after {
	content: "";
	height: 0;
	width: 100%;
	display: block;
	font-size: 0;
	clear: both;
}

.container p {
	font-size: 1.2em;
	margin: 0 auto;
	padding: 0;
	line-height: 1.2;
	font-style: italic;
	font-weight: 400;
}

.container p a {
	color: #333;
}