style.css

::selection {
	background: #FFC;
}

* {
	font-family: "Helvetica Neue", "Arial", Sans-serif;
	-webkit-font-smoothing: antialiased;	
}

body {
	margin:0; padding:0;
}

header {
	position: fixed;
	top: 0;
	background: #333;
	height: 46px; width: 100%;
	margin: 0; padding: 0;
	font-size: 1em;
	z-index: 1000;
}

	header img {
		float: left;
		margin: 11px 15px;
		cursor: pointer;
	}
	
	header img:hover {opacity: 0.5;}

nav {
	display: inline-block;
	padding-right: 10px;
}

	nav ul, nav li {display: inline-block; margin: 0; padding: 0}
	
	nav a li {
		list-style-type: none;
		display: inline-block;
		padding: 15px 10px;
		cursor: pointer;
		font-size: 0.9em;
		color: #DDD;
	}
	
	nav a li:hover {color: #FFF;}
	nav a li:active {background: #222;}
	
	nav li.selected {
		position: relative;
		top: 2px;
		background: #FFF;
		color: #000;
		text-shadow: 0 1px 1px #CCC;
	}

nav.right {
	position: absolute;
	top: 0;
	right:0;	
}

.title {
	background: #DDD;
	margin-top: 46px;
	padding: 20px;
	border-bottom: 1px solid #CCC;
	font-size: 2em;
	color: #555;
}

.title button {
	float: right;	
}

.content {
	margin: 20px auto;
	max-width: 800px;	
}
	.article {
		padding: 15px 20px;
		border-bottom: 1px solid #DDD;	
	}
	
	.article a {text-decoration: none;}
	
	.article h1 {
		margin: 0;
		margin-right: 20px;
		display: inline-block;
		color: #555;
	}
	
	.article:hover > a h1 {color: #000;}
	
	.article span.created {
		font-size: 0.9em;
		color: #AAA;	
	}

form input {
	display: block;	
	padding: 15px 20px;
	width: 790px;
	border: 1px solid #DDD;
	outline: none;
	font-size: 1.4em;
	font-weight: bold;
	color: #555;
}	

	form input#title {
		margin-bottom: 10px;	
	}
	
	form#newtitle input {
		width: 100%;
		max-width: 760px;
	}
	
	form#newtitle input:focus, 
	form#new input:focus, 
	form#new textarea:focus,
	.editor-visual {
		border: 1px solid #888;
	}
	
	.slugger {
		width: 790px;
		background: #FFC;
		border: 1px solid #EEB;
		padding: 10px 20px;
		margin: 10px 0;
	}
	
	.slugger input {
		display: inline-block;
		width: 400px;
		margin:0; padding: 0;
		border: 0;
		background: transparent;
		font-size: 1em;
		font-family: 'Consolas', Monospace;	
		font-weight: normal;
		cursor: pointer;
	}
	
	.tray {
		background: #DDD;
		width: 810px;
		padding: 10px;
		border: 1px solid #CCC;
		border-bottom: 0;
		position: relative;
	}
	
	.tray div {
		display: inline-block;
		border: 1px solid #AAA;
		border-right: 0;
		margin-right: 10px;
	}
	
		.tray button {
			margin:0;
			height: 30px;
			background: #EEE;
			border: 0;
			border-right: 1px solid #AAA;
			box-shadow: inset 0 1px 1px #FFF;
			font-weight: bold;
		}
		
		.tray button:hover {
			background: #FFF;	
		}
		
		.tray button.edit {
			width: 32px;	
		}
		
		.tray button.edit img {
			width: 12px;
			position: relative;
			top: 2px;
			left: -1px;
		}
		
		.tray button.selected, .tray button:active {
			background: #555;
			color: #FFF;
			box-shadow: inset 0 1px 1px #333;	
		}
		
		.tray .toggle-mode {
			position: absolute;
			top: 10px;
			right: 0;	
		}
	
	.editor-visual {
		color: #555;
		width: 790px;
		min-height: 300px;
		padding: 20px;
		border: 1px solid #DDD;
		outline: none;
		margin-bottom: 10px;
	}
		
		form#editor textarea {
			display: none;
			width: 790px;
			padding: 20px;
			border: 1px solid #DDD;
			outline: none;
			font-size: 1em;
			max-width: 100%;
			color: #555;
			margin-top: 0;
		}
		
		form#editor #submit {
			padding: 10px 15px;
			width: 100px;
			font-size: 0.8em;
			background: #DDD;
			border: 1px solid #AAA;
			cursor: pointer;
			box-shadow: inset 0 1px 1px #FFF;
		}
		
		form#editor #submit:hover {
			background: #EEE;
		}
		
		form#editor #submit:active {
			background: #555;
			color: #FFF;
			box-shadow: inset 0 1px 1px #222;
		}