/******************************************************************************
Main formatting and layout
******************************************************************************/
html, body{
	background-color: #000;
	color: #fff;
	font-family: "Arial", sans-serif;
	margin: 0;
	height: 100%;
	padding: 0;
	}
a{
	color: #00f;
	font-weight: bold;
	text-decoration: none;
	}
a:hover{
	color: inherit;
	text-decoration: underline;
	}
#header{
	background-image: url('tex/g-blue800.png');
	background-position: center top;
	background-repeat: repeat-y;
	margin: 0;
	padding: 0;
	text-align: center;
	}
#header-ukanuk{
	background-image: url('tex/ukanuk-b65.png');
	background-repeat: no-repeat;
	background-position: top left;
	padding: 1.3em 0 0;
	}
#main{}
#content{
	margin: 0 1%;
	}
#footer{/*make it sticky by including sticky-footer.css*/
	border-top: 0.1em solid #aaa;
	clear: both;
	max-width: 40em;
	text-align: center;
	margin: 0 auto;
	}


/******************************************************************************
Details
******************************************************************************/

/************************
Page Header*************/
	ul#header-menu{
		font: 1.7em "Comic Sans MS", fantasy;
		/*position: relative;*/
		list-style-type: none;
		margin: 0;
		padding: 0;
		}
	li.header-menuitem{
		display: inline;
		}
	.header-mainitem{
		color: #0f0;
		display: inline-block;
		font: inherit;
		margin: 0;
		padding: 0;
		text-shadow: /*I really hope the CSS3 text-outline property gets wide support*/
			#000 0.1em 0.1em 0.05em,
			#000 -0.1em -0.1em 0.05em,
			#000 -0.1em 0.1em 0.05em,
			#000 0.1em -0.1em 0.05em,
			#000 0 0.1em 0.05em,
			#000 0 -0.1em 0.05em,
			#000 0.1em 0 0.05em,
			#000 -0.1em 0 0.05em;
		}
	a.header-main-a{
		color: inherit;
		background-color: #000;
		background-image: url('tex/stripes-bw5.png');
		background-repeat: repeat;
		border-radius: 0.5em;
		font: inherit;
		margin: 0;
		padding: 0 0.5em;
		text-decoration: underline;
		}
	a.header-a{
		background-image: url('tex/stripes-bw3.png');
		background-repeat: repeat;
		border-radius: 0.5em;
		color: inherit;
		font: inherit;
		margin: 0;
		padding: 0 0.5em;
		text-decoration: inherit;
		}

/************************
Header Animations*******/
	.header-mainitem:hover{
		color: inherit;
		}
	a.header-a:hover{
		background-image: url('tex/stripes-bw5.png');
		background-color: #000;
		text-decoration: underline;
		}

/************************
Page Footer*************/
	ul#footer-menu{
		list-style-type: none;
		margin: 0.5em 0 0;
		padding: 0;
		}
	li.footer-menuitem{
		display: inline;
		}
	.footer-inner{	/*note it's not limited to anchors but it is set up to handle them*/
		color: inherit;
		font-weight: inherit;
		text-decoration: inherit;
		padding: 0 0.5em;
		}
	a.footer-inner:hover{ /*limited to anchors*/
		text-decoration: underline;
		}

/************************
Fix the top padding and margin of the first element in the content so that it never sits right below the header*/
	div#content > *:first-child{
		margin-top: 1em;
		}

/************************
Make the first letter of the first paragraph of each page special. Works best in Opera.*/
	#first-p::first-letter{
		background-color: #00f;
		float: left;
		font: 900 2em "Courier New", monospace;
		line-height: 0.6em;	/*doesn't seem to be used by FF*/
		margin: 0 0.2em 0 0;
		/*padding: 0.05em 0.2em -0.5em;*/
		padding: 0.25em;
		}
	/*These next two fix the margins if (height of first paragraph) <= (height of ::first-letter)*/
	#first-p::first-letter::after{
		margin-bottom: 1em;
		}
	#first-p::after{
		clear: both;
		content: "";
		display: block;
		margin: 0.5em 0;
		}
	/*Deprecated. Worked well except when the element after the first (first-p + *) had a font larger than 1em*/
		/*#first-p{
			margin-bottom: 0;
			}
		#first-p + *{
			clear: both;
			margin-top: 0;
			padding-top: 1em;
			display: inline-block;
			}*/

/************************
Other*******************/
	a.a-ibl{	/*anchor that acts like a div element, so whole element can be hyperlinked*/
		display: inline-block;
		height: 100%;
		}
	code{
		color: #0f0;
		}
	img{
		max-width: 100%;
		}
	sup{
		line-height: 0;
		font-size: 0.66em;
		vertical-align: 0.5em;
		}
	.comment_count::before{
		white-space: pre;
		content: "\a";		/* \a is a newline character*/
		}
	.flowcell{
		vertical-align: middle;
		margin: 2px;
		font: 0/0 monospace;
		display: inline-block;
		height: 100%;
		}
	.flowtable{
		text-align: center;
		}
	.li-h{
		list-style-type: none;
		}
	.li-p{
		margin-left: 3em;
		}
	.offset-left{
		margin-left: 15%;
		}
	.pi{
		font-family:'Times New Roman', 'Comic Sans MS', serif;
		}
	.subtitle{
		font-size: 0.6em;
		margin: 0;
		}
	.subtitle::before{
		content: " ";
		}
	.updates-pic{
		float: right;
		}
	.vid{
		font-family: monospace;
		}
	.vid-720{
		/*width: 852px;*/
		/*background-color: #8F498A;*/
		max-width: 100%;
		height: 540px;
		width: 720px;
		}
	.vid-600{
		/*width: 852px;*/
		/*background-color: #8F498A;*/
		max-width: 100%;
		height: 300px;
		width: 300px;
		}