/*   Stylesheet by Ben Delaney  */
/*   http://bdelaney.com        */

* {margin:0; padding:0;}
fieldset,img {border:0;}
ol,ul {list-style:none;}
a:active, a:focus {outline: 0;}
h1,h2,h3,h4,h5,h6,span {font-size:100%;font-weight:normal;}

@font-face {
	font-family: HelvUltra;
	font-style: normal;
	font-weight: normal;
	src: url('/fonts/HelveticaNeueLTStd-UltLt.otf');
}

html {height:100%;}
body {
	height:80%;
	font-family:"Hevetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	background:#F5F3f3;
	}
#Container {
	width:860px;
	height:100%;
	margin:0 auto;
	position: relative;
	}
#AudioSection {
	height:60px;
	margin-top:30px;
	}

	#Audio {position:fixed;bottom:0;}
	#UploadContainer {
		/* background:DodgerBlue;TODO:DeleteMe; */
		position: 	absolute;
		top:-10px;
		right:0;
		}
	#UploadIframe {
		border:none;
		width:220px;
		height:56px;
		overflow:hidden;
		}
	#AudioPlayer {
		position:relative;
		width:600px;
		}
		#Timeline {
			width:620px;
			height:36px;
			background:black;
			border-radius: 			6px; 
			-moz-border-radius: 	6px;
			-webkit-border-radius: 	6px;
			overflow:hidden;
			border: 1px solid #ddd;
			background:-webkit-gradient( linear, left bottom, left top, color-stop(0, #eee), color-stop(1, #fff) );
			background:-moz-linear-gradient( center bottom, #eee 0%, #fff 100% );
			-webkit-box-shadow: #ddd 0px 0px 10px;
			-moz-box-shadow: #ddd 0px 0px 10px;
			}
			#AudioFileName {
				position: absolute;
				font-size: 14px;
				line-height:1;
				top:50%;
				margin-top:-7px;
				color: #999;
				height:14px;
				position: absolute;
				right:0;
				left:10px;
				text-align: center;
				}
		#Playhead {
			width:5px;
			height:100%;
			background:-webkit-gradient( linear, left bottom, left top, color-stop(0, #999), color-stop(1, #eee) );
			background:-moz-linear-gradient( center bottom, #999 0%, #eee 100% );
			}
			.Marker {
				position:absolute;
				top:0;
				height:36px;
				width:1px;
				background:#DA5810;
				-webkit-box-shadow: #DA5810 0px 0px 3px;
				-moz-box-shadow: #DA5810 0px 0px 3px;
				}
		#LoaderOuter {
			background:#e5e5e5;
			background:-webkit-gradient( linear, left bottom, left top, color-stop(0, #ddd), color-stop(1, #bbb) );
			background:-moz-linear-gradient( center bottom, #ddd 0%, #bbb 100% );
			height:8px;
			width:500px;
			top:15px;
			left:50px;
			position:absolute;
			z-index: 4000;
			border-radius: 			4px; 
			-moz-border-radius: 	4px;
			-webkit-border-radius: 	4px;
			}
			#LoaderInner {
				background:#fff;
				height:8px;
				width:0px;
				top:15px;
				left:50px;
				z-index: 4000;
				border-radius: 			4px; 
				-moz-border-radius: 	4px;
				-webkit-border-radius: 	4px;
				}
		#VolumeSlider {
			position:absolute;
			top:45px;
			left:392px;
			width: 200px;
			height: 2px;
			background: #ddd;
			border-radius: 			5px; 
			-moz-border-radius: 	5px;
			-webkit-border-radius: 	5px;
			padding:4px 4px 0 4px;
			}
		#VolumeSliderKnob {
			background: #fff;
			width:  10px;
			height: 10px;
			cursor: pointer;
			border-radius: 7px; 
			-moz-border-radius: 7px;
			-webkit-border-radius: 7px;
			-webkit-box-shadow: #000 0px 0px 2px;
			-moz-box-shadow: 	#000 0px 0px 2px;
			margin-top:-6px;
			}
		#PlayPauseControl {
			display:block;
			position:absolute;
			top:43px;
			left:3px;
			width: 15px;
			height: 17px;
			background: url(/images/playpause.png);
			background-color:transparent;
			background-repeat:no-repeat;
			background-position:left top;
			text-indent:-9999px;
			}
			#PlayPauseControl:hover  {background-position:left center;}
			#PlayPauseControl:active {background-position:left bottom;}
		#PlayPauseControl.Pause {
			background-position:right top;
			}
			#PlayPauseControl.Pause:hover  {background-position:right center;}
			#PlayPauseControl.Pause:active {background-position:right bottom;}

#TextEditorSection {
	height:100%;
	position:relative;
	margin-top:30px;
	}
	#EditorWrapper {
		height:95%;
		}
	.Button {
		display:	block;
		position: 	absolute;
		right:8px;
		height:28px;
		width:200px;
		border-radius: 			6px; 
		-moz-border-radius: 	6px;
		-webkit-border-radius: 	6px;
		overflow:hidden;
		border: 1px solid #ddd;
		background:-webkit-gradient( linear, left bottom, left top, color-stop(0, #eee), color-stop(1, #fff) );
		background:-moz-linear-gradient( center bottom, #eee 0%, #fff 100% );
		-webkit-box-shadow: #ddd 0px 0px 10px;
		-moz-box-shadow: #ddd 0px 0px 10px;
		font-family: HelvUltra, "Hevetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
		font-size: 24px;
		text-decoration: none;
		color:#666;
		text-shadow: #fff 1px 1px 0px;
		padding-top:6px;
		text-align: center;
		}
		.Button:hover {
			-webkit-box-shadow: #1e90ff 0px 0px 10px;
			-moz-box-shadow: 	#1e90ff 0px 0px 10px;
			}
		.Button:active {
			background:-webkit-gradient( linear, left bottom, left top, color-stop(0, #eee), color-stop(1, #999) );
			border-color:#1e90ff;
			background:-moz-linear-gradient( center bottom, #eee 0%, #fff 100% );
			}
	#SaveText {
		top:0px;
		}
	#SaveText {
		top:50px;
		}
	#RestoreSaved {
		display: none;
		right: 113px;
		top: 100px;
		height: 20px;
		width: 95px;
		font-size: 14px;
		}
	#DeleteSaved {
		display: none;
		right: 8px;
		top: 100px;
		height: 20px;
		width: 95px;
		font-size: 14px;
		}
	#TextEditor {
		position:relative;
		width:592px;
		height:100%;
		border: 1px solid #ddd;
		padding:14px;
		font-family: Courier, mono;
		font-size: 14px;
		line-height:1.5;
		color:#444;
		border-radius: 			6px; 
		-moz-border-radius: 	6px;
		-webkit-border-radius: 	6px;
		-webkit-box-shadow: #ddd 0px 0px 10px;
		-moz-box-shadow: #ddd 0px 0px 10px;
		}
		#TextEditor.Glow {
			-webkit-animation-name: 'glow';
			-webkit-animation-duration: 0.8s;
			-webkit-animation-iteration-count: infinite;
			-webkit-animation-direction: alternate;
			-webkit-animation-timing-function: ease-in-out;
			}
	    	@-webkit-keyframes 'glow'
			{		
				0% 		{-webkit-box-shadow: #1e90ff 0px 0px 10px;}
				100% 	{-webkit-box-shadow: #ddd 0px 0px 10px;}
			}	
	
		#TextEditor::-webkit-scrollbar {
			width: 6px;
			height: 6px;
			}

		#TextEditor::-webkit-scrollbar-button:start:decrement,
		#TextEditor::-webkit-scrollbar-button:end:increment {
			display: block;
			height: 10px;
			}

		#TextEditor::-webkit-scrollbar-button:vertical:increment {
			background-color: #fff;
			}

		#TextEditor::-webkit-scrollbar-track-piece {
			background-color: #fff;
			-webkit-border-radius: 3px;
			}

		#TextEditor::-webkit-scrollbar-thumb:vertical {
			height: 50px;
			background-color: #ddd;
			-webkit-border-radius: 3px;
			}

		#TextEditor::-webkit-scrollbar-thumb:horizontal {
			width: 50px;
			background-color: #ddd;
			-webkit-border-radius: 3px;
			}
		#TextEditor:focus {outline:none; border-color:#bbb;}