/* General styles */
html, body
{
	margin:0;
	padding:0;

	width:100%;
	height:100%;

	color:#fff;
	font-family:sans-serif;
}


/* Flex-Box Implementation */
.vgroup, .hgroup
{
	display:-moz-box;
	display:-webkit-box;
	display:-o-box;
	display:-ms-box;
	display:box;

	position:relative;
}

	.vgroup
	{
		-moz-box-orient:vertical;
		-webkit-box-orient:vertical;
		-o-box-orient:vertical;
		-ms-box-orient:vertical;
		box-orient:vertical;
	}

	.hgroup
	{
		-moz-box-orient:horizontal;
		-webkit-box-orient:horizontal;
		-o-box-orient:horizontal;
		-ms-box-orient:horizontal;
		box-orient:horizontal;

		-moz-box-align:center;
		-webkit-box-align:center;
		box-align:center;
	}

.stretch
{
	-moz-box-flex:1;
	-webkit-box-flex:1;
	-o-box-flex:1;
	-ms-box-flex:1;
	box-flex:1;

	position:relative;
}

	.stretch .fill
	{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}


/* Top UI */
.ui
{
	padding:3px 0;
	border-bottom:1px solid #000;
	background:url(noise.png) #222;

	position:relative;
	z-index:2;

	text-shadow:1px 1px 1px #000;
}

.ui input[type='text'], .ui input[type='button']
{
	margin:2px;
	padding:5px;
	
	border:1px solid #444;
	border-radius:5px;

	display:block;

	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	
	background:rgba(0, 0, 0, 0.3);
	
	font-size:16px;
	line-height:18px;
	color:#ccc;
}

	.ui input[type='text']
	{
		white-space:nowrap;
		overflow:hidden;

		-moz-box-shadow:inset 0 1px 3px #000;
		-webkit-box-shadow:inset 0 1px 3px #000;
		box-shadow:inset 0 1px 3px #000;
	}

	.ui input[type='button']
	{
		text-shadow:1px 1px 1px #000;

		background:#333333;
		background:-moz-linear-gradient(top, #333333 0%, #000000 100%);
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#000000));
		background:-webkit-linear-gradient(top, #333333 0%,#000000 100%);
		background:-o-linear-gradient(top, #333333 0%,#000000 100%);
		background:-ms-linear-gradient(top, #333333 0%,#000000 100%);
		background:linear-gradient(top, #333333 0%,#000000 100%);
	}

	.ui input[type='text']:focus, .ui input[type='button']:hover, .ui input[type='button'].focus
	{
		outline:0;
		border:1px solid #666;
	}

	.ui input[type='button']:hover
	{
		cursor:pointer;
	}

	.ui input[type='text']:focus
	{
		background:rgba(0, 0, 0, 0.4);

		-moz-box-shadow:inset 0 2px 5px #000;
		-webkit-box-shadow:inset 0 2px 5px #000;
		box-shadow:inset 0 2px 5px #000;
	}

	.ui input[type='button']:hover
	{
		background:#444444;
		background:-moz-linear-gradient(top, #444444 0%, #000000 100%);
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#000000));
		background:-webkit-linear-gradient(top, #444444 0%,#000000 100%);
		background:-o-linear-gradient(top, #444444 0%,#000000 100%);
		background:-ms-linear-gradient(top, #444444 0%,#000000 100%);
		background:linear-gradient(top, #444444 0%,#000000 100%);
	}

	.ui input[type='button']:active, .ui input[type='button'].focus
	{
		text-shadow:none;

		background:#000000;
		background:-moz-linear-gradient(top, #000000 0%, #444444 100%);
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#444444));
		background:-webkit-linear-gradient(top, #000000 0%,#444444 100%);
		background:-o-linear-gradient(top, #000000 0%,#444444 100%);
		background:-ms-linear-gradient(top, #000000 0%,#444444 100%);
		background:linear-gradient(top, #000000 0%,#444444 100%);
	}

	::-webkit-input-placeholder
	{
		color:#666;
	}

	input:-moz-placeholder
	{
		color:#666;
	}


/* Specific styling for specific elements */
#App
{
	width:100%;
	height:100%;
}

#AllDocumentsList li
{
	line-height:1.5em;
}

#AllDocumentsList a
{
	margin-bottom:0;
	padding:1px 1px 2px 1px;
	border-bottom:1px solid #fff;
	color:#fff;
	text-decoration:none;
}

	#AllDocumentsList a:active
	{
		margin-bottom:1px;
		padding-bottom:1px;
	}

#IncreaseFontSizeButton, #DecreaseFontSizeButton
{
	width:30px;
}

textarea#Editor
{
	margin:0;
	padding:10px;
	border:none;
	outline:0;

	display:block;

	resize:none;

	font-family:monospace;
	font-size:18px;

	-webkit-border-radius:0;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

	.yellow, #ThemePopover .yellow
	{
		color:#ff0;
		background:#22252c;
		text-shadow:none;
	}

	.green, #ThemePopover .green
	{
		color:#0f0;
		background:#222;
		text-shadow:none;
	}

	.white, #ThemePopover .white
	{
		color:#fff;
		background:#000;
		text-shadow:none;
	}

	.black, #ThemePopover .black
	{
		color:#222;
		background:#ddd;
		text-shadow:none;
	}

.textCenter
{
	padding-bottom:5px;
	text-align:center;
}

.ui .floatingStuff
{
	padding:5px 0;
}

	.ui .floatingStuff input, .ui .floatingStuff div
	{
		display:inline-block;
	}

.sizePadding
{
	padding:0 10px;
}

.hide
{
	display:none;
}

.popoverLeft, .popoverCenter, .popoverRight
{
	padding:10px;

	position:absolute;
	top:41px;
	width:50%;
	z-index:1;

	-webkit-box-shadow:0px 2px 10px #000;
	-moz-box-shadow:0px 2px 10px #000;
	box-shadow:0px 2px 10px #000;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

	.popoverLeft
	{
		border-right:1px solid #000;
		left:0;

		-webkit-border-bottom-right-radius: 5px;
		-moz-border-radius-bottomright: 5px;
		border-bottom-right-radius: 5px;
	}

	.popoverCenter
	{
		margin-left:-25%;
		border-left:1px solid #000;
		border-right:1px solid #000;
		left:50%;

		-webkit-border-bottom-right-radius: 5px;
		-webkit-border-bottom-left-radius: 5px;
		-moz-border-radius-bottomright: 5px;
		-moz-border-radius-bottomleft: 5px;
		border-bottom-right-radius: 5px;
		border-bottom-left-radius: 5px;
	}

	.popoverRight
	{
		border-left:1px solid #000;
		right:0;

		-webkit-border-bottom-left-radius: 5px;
		-moz-border-radius-bottomleft: 5px;
		border-bottom-left-radius: 5px;
	}