@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; }
body {
	border: 0;
	font-family: Verdana, sans-serif;
	font-size: 14px;
	margin-left: 160px;
	min-height: 100%;

	border-left: 1px solid #ccc;
	box-shadow: inset 5px 0 20px -20px #000000;
}

a { color: black; }
a:hover { color: red; }

code { font-family: monospace; background-color: #eee; padding: 0 2px; }

h1 { padding-left: 10px; padding-bottom: 5px; }
.header>h1 { text-shadow: 1px 1px 1px #ccc; }
h2 { padding-left: 30px; border: 0; margin-bottom: 3px; }
h2 > a { text-decoration: none; border-bottom: 1px solid black; font-weight: 400; }


/* left menu */
.menu { 
	background-color: white;
	position: absolute; 
	top: 0px; 
	left: 0; 
	width: 150px; 
	overflow: hidden; 
	padding-top: 5px; 
	padding-bottom: 20px; 

	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	
}
.menu:hover { 
	background-color: white; 
	border-right: 1px solid black; 
	box-shadow: 0 1px 3px black; 
	padding-right: 5px; 

	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	
	width: 300px;
	max-width: auto;
}


.menu > ul > li { list-style: none; margin-left: 5px; }
.menu > ul > li > a { text-decoration: none; font-size: 12px; white-space: pre; color: #888; }
.menu:hover > ul > li > a { color: black; }
.menu > ul > li > a:hover { color: red; }
/* top items */
.menu > ul.quick { border: 0; }
.menu > ul.quick > li > a { font-size: 30px; font-family: 'ChocolateBox Regular'; }

.header {
	position: relative;
	padding: 10px;
	border-left: 1px solid #ccc;
	max-width: 600px;
}
.time { 
	text-align: right;
	padding-right: 30%;
	font-size: 12px;
	font-style: italic;
}
.admin { }
.body {
	max-width: 600px;
	padding: 10px;
}
.body ul { margin-left: 10px; }

/* [code]..[/code] | [code .. code]..[/code] */
.code-header { font-size: 11px; }
code.quote {
	display: block;
	margin-left: -10px;
	padding: 3px 0 3px 10px;
	white-space: pre;
	font-family: monospace;
	border: 2px solid #ccc;
	border-width: 2px 0;
	background-color: inherit;
}
.aurl { } /* [a .. a]..[/a] */
.nurl { } /* [n .. n]..[/n] */
.mail { } /* [e .. e]..[/e] */
.img { } /* [img]..[/img] */
.imgl { float: left; vertical-align: top; margin: 5px 5px 5px 0; } /* [imgl]..[/imgl] */
.imgr { float: right; vertical-align: top; margin: 5px 0 5px 5px; } /* [imgr]..[/imgr] */
.file { } /* [file .. file]..[/file] */
.weblog { } /* [weblog .. weblog]..[/weblog] */
.notes { } /* [notes .. notes]..[/notes] */
.ecma { } /* [ecma .. ecma]..[/ecma] */

/* project page */
div.proj div { overflow: auto; margin-bottom: 20px; }
div.proj h3 { font-size: 13px; font-weight: 400; }
div.proj h3 > a { font-size: 18px; }
div.proj p { margin-bottom: 20px; text-align: justify; }
div.proj img { float: right; max-width: 150px; max-height: 150px; margin: 0 0 5px 10px; border: 1px solid #ccc; }
ol>li .time { margin-left: 0; border: 0; font-style: italic; }

/* about page */
img.me { float: right; margin-left: 10px; }