@font-face { /* fontsquirrel.com & 1001freefonts.com */
	font-family: 'ChocolateBox Regular';
	src: url('fonts/C_BOX.eot');
	src: 
		local('ChocolateBox Regular'), 
		local('ChocolateBox'), 
		url('fonts/C_BOX.TTF') format('truetype'),
		url('fonts/C_BOX.woff') format('woff'), 
		url('fonts/C_BOX.svg#ChocolateBox') format('svg');
}
		
* { margin: 0; padding: 0; }

h2, h1, time, p { margin-left: 160px; padding-left: 10px; border-left: 1px solid #ccc; }
p { width: 550px; text-align: justify; }
h1 { border-bottom: 1px solid #ccc; padding-bottom: 5px; }
a { color: black; }
a:hover { color: red; }
/* left menu */
ul { position: absolute; top: 5px; left: 0; width: 150px; overflow: hidden; list-style: none; margin-left: 5px; }

/* 
right list of blogs/notes when not reading specific post
cant use specific elements because IE would ignore the rules... 
*/
h2 { margin-left: 20px; border: 0; }
.time.front,
p.front { margin-left: 0; border: 0; }
/* container to hold it all and push it right and show the border */
div.front { margin-left: 160px; border-left: 1px solid #ccc; }

/* project page */
div.proj { margin-left: 160px; border-left: 1px solid #ccc; max-width: 550px; }
div.proj p { margin-left: 0; border: 0; margin-bottom: 20px; }
div.proj img { float: right; max-width: 150px; max-height: 150px; margin: 5px; margin-right: 0; margin-top: 0; }

#quick a { font-size: 30px; color: black; text-decoration: none; font-family: 'ChocolateBox Regular'; }
#quick a:hover { color: red; }

#menu { top: 150px; }
#menu a { text-decoration: none; font-size: 12px; white-space: pre; }

p.code { white-space: pre; font-family: monospace; border-top: 2px solid #ccc; border-bottom: 2px solid #ccc; }

.time { display: block; margin-left: 160px; border-left: 1px solid #ccc; width: 550px; font-size: 12px; text-align: right; }
ol>li .time { margin-left: 0; border: 0; font-style: italic; }