/* @override 
	http://127.0.0.1:9001/index.css */


html{
	font-family: Helvetica, Arial, "Helvetica Neue", Geneva, sans-serif;
	/*background-color: white;*/
	margin:-0px;
	padding: -0px;
	color: #c1c1c1;
	font-weight: lighter;
	background: #474747;
}

body {
	font-family: Helvetica, Arial, "Helvetica Neue", Verdana, Geneva, Arial, "Sans Serif";
	font-size: 1em;
	margin: -0px;
	text-align: left;
	line-height: 1.5em;
	font-weight: lighter;
}

/*The column that contains everything*/

pre {
	/*border-left: 1px solid gray;*/
	/*border-bottom: 1px solid gray;*/
	background-color: #444;
	overflow: scroll;

}

#wrapper{
	padding: 0px;
	width: 500px;  /* contrain the width */
	margin:0 auto;	/* auto-centers the element*/
	-webkit-overflow-scrolling: touch;
}

.content{
  padding-top:20px;
  padding-bottom: 20px;
}
h1,h2,h3{
	font-weight: lighter;	
	color: #bbb;
}

h1 {
	font-size: 1.5em;
	margin-top: 18px;
	margin-bottom: 18px;
}

h2 {
	font-size: 1.35em;
	/*margin:16px, 0px, 16px, 0px;*/
	/*margin:1em , 0, 0.5em, 0;*/
	margin-bottom: 16px;
	margin-top: 0px;
	/*text-transform: uppercase;*/
	}
	
h3 {
	font-size: 1.2em;
	/*margin-top: 14px;*/
	/*margin-bottom: 14px;*/
}

a{
	color: inherit;
	text-decoration: underline;
}
a:hover{
	text-decoration: underline;
	color:darkgray;
}

h1 a, h2 a, h3 a{
	text-decoration: none;
}

div.folder h2 a {
	color: #c1c1c1;
}

div.note h2 a {
	color: darkorange;
}
p{
	line-height: 1.45em;
}


#banner , #footer , #nav{
	text-align: center;
	position: fixed;
	display: inline;
	margin: 0 auto;
	margin-left: 510px;	
	padding: 10px;
	width: 200px;
	clear: left;
}
#banner a, #footer a, #nav a, h3 a, a h2, h2 a{
	text-decoration: none;
	color: darkorange;
}
#banner a{
	font-size: 1.5em;
	text-decoration: none;
}
/* The website title */
#banner{
	font-weight: lighter;
	border-left:1px solid darkorange;
	background: url("niconomicon.png") no-repeat center 20px;
	height: 50px;
	padding-top: 110px;
}

#footer {
	text-align: left;
	font-size: 0.75em;
	bottom: 0px;
	padding:10px;
	line-height: 1.3em;
	border-left:1px solid darkorange;	
}

#nav{
/*	border-left:1px solid darkorange;*/
	text-align: left;
	bottom: 0px;
	padding-bottom: 60px;
	top: 170px;
	padding: 0px;
	text-align: center;
}

#nav div.spacer{
	border-left:1px solid darkorange;
	height: 30px;
	float: left;
	color: #474747;
}

#nav a, #nav a:hover{
/*, #nav a .highlighted{*/
	float: left;
	font-size : 1.1em;
	text-align: left;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom:5px;
	padding-top:5px;
	width: 100px;
	border-left:1px solid darkorange;
}

#nav a:hover {
	background-color: rgba(0,0,0,0.1);/*#2E2E2E;*/
}
#nav a.spacer:hover{
	background-color: rgba(0,0,0,0);
}

#nav a.highlighted{
	border:1px solid darkorange;
	border-left: none;	
}
div.index_item {
	margin: 0px;
}

span.date{
	float: left;
	color: inherit;
	margin-left: -99px;
	/*margin-top: 16px;*/
	min-width: 90px;
}

span.date:after{
	content: ' \2013';
}

span.title{
	margin-top: -10px;
}

.title a, a.title{
	/*font-size: 1.35em;*/
	color: darkorange;
	text-decoration: none;
}

div.footnotes{
	font-size: 0.8em;
}
a.footnote{
	vertical-align: super;
	font-size: small;
}

sup{
	display: inline-block;	
	padding: -0px;
	margin: -0px;
	margin-top: -5px;
	height: 1.5em;
	font-size: 0.6em;
}
/*Just because I find the default font too big.*/
.embedded_gist td{
	font-size: 0.7em;
	
}
div.blog_end_marker{
	text-align:center;
	/*width: 100%;*/
	line-height:1em;
	margin: 1.5em;

	/*border-top: 1px solid;*/
}
div.blog_end_marker:before{
	content: '\A7';
	/*content: '\7E';*//* == ~ */
}

div.page_marker{
	text-align: center;
	padding-bottom: 1em;
}
/*(max-device-width:900px) and (-webkit-min-device-pixel-ratio:2),*/
/*this make the nav on top for ipad portrait but not landscape landscape*/
@media  (max-width:900px),
		(max-width:900px) and (min-device-pixel-ratio:2),
		(max-width:900px) and (-webkit-min-device-pixel-ratio:2) {
	#banner, #nav, #footer{
		text-align: center;
		position: static;
		
		display: block;
		margin: 0 auto;
		
		padding: 10px;
		margin: 0px;
		min-width:500px;
		clear: right;		
	}
	#banner{		
		border: none;
		margin-top: 0px;
		padding-top: 100px;
		height: 25px;
	}
	#nav{
		padding-bottom: 40px;
	}
	#nav a, #nav a:hover, #nav a .highlighted{
		float: left;
		display: block;
		margin: -0px;
		font-size : 1.1em;
		text-align: center;
		
		padding-left: 0px;
		padding-right: 0px;
		padding-bottom:5px;
		padding-top:5px;
		width: 100px;
		border: none;
		border-bottom:1px solid darkorange;
	}
	#nav a.spacer{
		margin:0px;
		width:45px;
	}
	#nav a.highlighted{
		margin: 0px;
		border:1px solid darkorange;
		border-bottom: none;
	}
	#footer{
		border: none;
	}
}

/*(max-device-width:950px) and (-webkit-min-device-pixel-ratio:2),*/
/*(max-width:770px) and (min-device-pixel-ratio:2),
(max-width:770px) and (-webkit-min-device-pixel-ratio:2) */
@media (max-width:760px)
{
	body{
		margin: 5px;
	}
	span.date{
		float: none;
		color: inherit;
		margin-left: 0px;
		/*margin-top: 16px;*/
		width: 90px;
	}
	span.date:after{
		content: none;
	}
	div.index_item{
		display: block;
		margin-top: 5px;
		margin-bottom: 10px;
	}
	div.index_item span.date{
		display: block;
		float: left;
	}
	div.index_item span.title{
		display: block;
		margin-left: 90px;
	
	}
}