/*
Author: Michael Harris
URI: http://next-nexus.info/
Licence: http://next-nexus.info/licence.php


*/

/* Our "universal rule" */
body, html
 {
	padding: 0;
	margin: 3%;
	border: 0;
	
}

h1
	{
	color: gray;
	text-align: center;
	}
/*h1#heading a 
	{
	text-decoration:none;
	}
h1#heading a:link 
	{
	color: gray; 
	}
h1#heading a:visited 
	{
	color: gray; 
	}

*/
h2:hover:after /* displays the id after h2, some places don't have an id. that's fine by me. it just displays # */
{
	content :" #" attr(id) ""; 
	color: #EBECE4;
}
h2:target:after /* displays the id after h2, on target. */
{
	content :" #" attr(id) ""; 
	color: #EBECE4;
}
h3:target:after /* displays the id after h3, on target. I don't care about having the id display on hover though.*/
{
	content :" #" attr(id) ""; 
	color: #EBECE4;
}


/* for the heading menu*/
.menu
{
	text-align: center;
}
.menu  ul 
	{ 
	margin-bottom: 2em;
	padding: 0;
	list-style-type: none; 
	list-style-image: none;
	}
.menu  li 
	{
	display: inline;
/*    padding: 5px 1px 5px 1px */
	}
.menu span.current
	{
	background-color:gray;
	color: white;
	}
.menu a 
	{
	text-decoration:none;
	}
.menu a:link 
	{
	color: gray; 
	}
.menu a:visited 
	{
	color: gray; 
	}
.menu a:hover 
	{
	color: black; 
	background-color: gray;
	}
	
/*@media screen and (min-width: 1px)
{
.menu  li 
	{
	display: block;
	margin: .5em;
}*/
/* end menu */


a:hover
	{
	text-decoration:none;
	}
a:active
{
	text-decoration: underline;
}
a[href^="file://"]:hover
{
	color: red;
}
a:focus
{
	border-top: dashed;
	border-bottom: dashed;
}	

.simplehead {
	font-weight: bold; 
	}
.tab
{ display : inline-table }

.row
{ display : table-row }
.row:hover
{
	background-color:#C4C4C4;
}
.cel
{ display : table-cell }

td:hover
{
	background-color:#C4C4C4;
}

.warning
{
	font-size: smaller;
	font-style: italic;
	font-variant: small-caps;
	color: red;
	text-align: center
}

.postmetadata
{
	font-size: .9em;
	color: gray;
}
.postmetadata a 
	{
	text-decoration:none;
	}
.postmetadata a:link 
	{
	color: gray; 
	}
.postmetadata a:visited 
	{
	color: gray; 
	}
.postmetadata a:hover 
	{
	color: black; 
	background-color: gray;
	}
.oldnewstuff

	{
	margin-top: 2em;
	margin-bottom: 2em;
	font-size: .9em;
	}
.oldnewstuff a
{
	text-decoration:none;
}

.email
{
	color: blue;
}
.desc /* category or tag description */
{
	font-size: smaller;
	text-align: center;
/*	color: red; */
}
/*
This section of the style sheet is only for the front page, I think. 

*/
@media screen and (min-width: 825px)
{
	.things
	{
		float: left;/* Our something is going to be left aligned */
		margin-left:5%;
		max-width: 40%;
		padding-top: 1em;
	}
	.things img
	{
		text-decoration:none;
	}
	.contents
	{
		margin-right:10%;
		float: right; /* Our something is going to be right aligned */
		max-width: 45%;
	/*	height: 205px;*/
	}
	#news h2
	{
		position: absolute;
		top: -1000em;
		left: -1000em;
	}
}
@media screen and (max-width: 825px)
{
	.things
	{
		display: none;
	}
	#news h2
	{
		position: inherit;
/*		display: block;*/
	}
}
.foot
{
	padding-top: 3em;
	clear: both; /* We have to clear our floats */
	font-style: italic;
	font-size: smaller;
	line-height: 200%;

}
/* end front page only stuff, I think... */


/* breadcrumbs */
.breadcrumbs
{
	text-align: left;
}
.breadtop
{
	margin-left:-2%; margin-top:-2%; font-size:.7em;
}
.breadbottom
{

}
.breadcrumbs li:before
{
	font-family: monotype;
	font-weight: bold;
	color: gray; 
	content:'/';
}
.breadcrumbs .contactmenulink:before
{
	content:' | ';
}

@media screen and (max-width: 825px)
{
	.breadtop
	{
		margin-left:-2%; margin-top:-2%; 
	}
	#news h2
	{
		position: inherit;
/*		display: block;*/
	}
}


.tags
{
	text-align: left;
	font-style:normal;
}

#about
{
	font-family:sans-serif;
/*	font-style: oblique;*/
}

.amp /* ampersand */
{
	font-family: "URW Chancery L", "ITC Zapf Chancery", "Monotype Corsiva", cursive;
	font-style: italic;
	font-size:larger;
}

a img, a:link img, a:visited img { text-decoration:none; }
a img { border: 0;}

a:target /* if you end up at a target, it'll highlight! CSS 3 is nice...*/
{
	background-color:yellow;
	padding: .5em;
}

/* This makes it easier to hit small footnote links (because they are just numbers). Thanks to Stuart Langridge who wrote about this technique at <http://kryogenix.org/days/2014/01/22/notes-on-footnotes>. 

*/
.sdfootnoteanc::after, .sdfootnotesym::after /* doesn't really work if the footnote is double-digits...*/
{
	content: " ";
	position: absolute;
	display: inline-block;
	margin-left: -1.1em;
	margin-top: -.5em;
	border-radius: .1em;
	border: .3em solid transparent;
}
.sdfootnoteanc::after /* doesn't quite line up with the highlight on target */
{
	padding: .8em;
	padding-bottom:1.7em;
/*	margin: .5em;*/
}
.sdfootnotesym::after
{
	padding: .8em;
	padding-bottom:1.3em;
/*	margin: .5em;*/
}

.sdfootnotesym:hover::after, .sdfootnoteanc:hover::after {
	background: rgba(0,0,0,0.2);
	border: .1em solid rgba(0,0,0,0.4);
}

/* Show the citation, if it exists. For any element (*) with the cite attribute ([cite]) show that after the element (with angle brackets), italicised and in a slightly darker shade of gray (than the id attribute after H2 element). */
*[cite]:after /* and stupid Firefox (noticed in 3.6, still in 10.x) doesn't let you select the text... */
{
	content :" from <" attr(cite) ">"; 
	font-style:italic;
	color: #A4A4A4;
}
.discrete
{
	 font-size: smaller;
}
.carefully
{
	font-style:italic;
}
.hiddenfromview /* this hides from visual view (unless CSS is turned off), but is still there for screenreaders. Use case: footer heading (so that it's in the outline, and so that it can be navigated to).*/
{
	position:absolute;
	left:-999em;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

a:visited
{
	color: purple;
}

/* these two aren't being used in ~/writing, here they should be, but the intention is to be able to put the anchor around a large block of text, and then hide that it is an anchor. So that the actual anchor stands out from within the text. But, the anchor text is still more than just the URL. Intended for bibliographies, reference lists, and reading lists. 

E.g. usage: 
<a href="http://blah.blah.name" class="fauxurl">Blah Blah, "My life, an autobiography by Blah" <span class="url">http://blah.blah.name</span>. Accessed: never. 

This would mean that the title gets to be part of the link text, rather than just the URL. But the whole thing doesn't look like a URL, because that looks not so nice. There are problems with this approach, not least that if someone clicks on the title (perhaps to select it), they might not notice that it's a URL, which is bad...
*/
a.fauxurl
{
	font-style: normal;
	color: black;
	text-decoration: none;
}
a.fauxurl span.url
{
	font-style: normal;
	color: blue;
	text-decoration: underline;
}
a.fauxurl span.url:hover
{
	font-style: normal;
	color: blue;
	text-decoration: none;	
}
a.fauxurl:visited span.url
{
	font-style: normal;
	color: purple;
}