/*@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:300|Roboto+Condensed:300italic,400,300|Roboto+Slab:300,400,700|Roboto:500,300,300italic);*/
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab|Roboto+Condensed:300,300italic|Roboto:300,300italic|Roboto+Mono:400,300,300italic);
/*
ATTN
	* I'm pretty sure some of these faces aren't used and could be excluded from the set
	* Would SourceCodePro work better than Roboto+Mono?
	* How about Source Sans?
*/
/*
font-family: 'Roboto Slab', serif;
font-family: 'Roboto Condensed', sans-serif;
font-family: 'Roboto', sans-serif;
font-family: 'Roboto Mono', ;
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	/*font-size: 100%;*/
	/*font: inherit;*/
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}










* {
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}

/*************************** LAYOUT ***************************/

body {
	color:#201818;
	background-color: #EBEAE6; /*warm grey*/
	/*background-color: #E6E7EB;*/ /*cool grey*/
	/*background-color: #FFFDF5;*/ /*orig tufte class*/
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size:   16px;
	line-height: 22px;
	word-spacing: 0.1em;
	margin-top:50px;
	margin-bottom:150px;
}

/* Set color of highlighted selection to a mid gray */
::-moz-selection {
	background-color: #c9c6bc;
}
::selection {
	background-color: #c9c6bc;
}

main,
div.content {
	width: 540px;
	margin-left: 160;
	/*border-left: 1px solid #888;*/
	/*border-right: 1px dotted #888;*/
	/*background-color: rgba(0,0,0,0.05);*/
}

p, div.p {
	margin-bottom: 22px;
	margin-top: 0px;
	/*background-color: rgba(0,0,0,0.1);*/
}

.fullWidth {
	width: 840px;
}
pre.fullWidth {
	width: 850px;  /* (because they're set 10px into the left margin) */
}

.noSpaceAfter {
	margin-bottom: 0px;
}

p.vspace {
	/*background-color: rgba(0,0,0,0.25);*/
	margin-bottom: 0;
}


/*************************** SEMANTIC ELEMENTS ***************************/

section {
	margin-bottom: 66px;
}

/*section:before {
	content: '\2042';
	width: 100%;
	display: block;
	text-align: center;
	font-size: 2em;
}*/

/*************************** SPECIAL ELEMENTS ***************************/

footer.sigBlock,
div.sigBlock {
	text-align: right;
	margin-top: 66px;
	padding-top: 21px;
	border-top: 1px solid rgba(0,0,0,0.6);
	font-size:   14px;
	line-height: 22px;
}

/*ATTN: need to do something with this*/
.myName {
	font-family: "Roboto Slab";
	/*color: #A02020;*/
}




/*************************** MISC CLASSES  & STYLES ***************************/

strong, b {
	color: #A02020;
	/*font-weight: bold;*/
}

del {
	color: rgba(0,0,0,0.6); /* I don't think this tag is used anywhere */
}

.altFont {
	font-family: 'Roboto Slab', serif;
}

.altColor {
	color: #A02020; /*#e03a3e;*/
}
.red1 {
	color: #A02020;
}
.red2 {
	color: #901d1d; /* 761818 */
}

hr {
	border-top: 1px dotted rgba(0, 0, 0, 0.2);
	border-bottom: none;
	height: 0;
	width: 61.2%;
	margin-bottom: 22px;
}



/*************************** HEADINGS ***************************/

h1, h2, h3, h4 {
	font-family: 'Roboto Slab', serif;
	width: 840;
	/*background-color: rgba(0,0,0,0.2);*/
	/*border-left: 5px solid #666;*/
}
/*h2:before {
	content: '\2042';
	font-size: 0.8em;
	width: 1.25em;
	margin-left: -1.25em;
	display: inline-block;
}*/
h1 {
	font-size:		44px;
	line-height: 	44px;
	margin-top:		44px;
	letter-spacing: 2px;
	margin-bottom: 41px; /* 44-3=41 */
	padding-top:    3px;
	padding-bottom: 0px;
}
h2 {
	font-size:   	32px;
	line-height: 	44px;
	margin-top:		22px;
	letter-spacing: 2px;
	margin-bottom: 15px; /* 22-7=15 */
	padding-top:    7px;
	padding-bottom: 0px;
}
h3 {
	font-size:   	18px;
	line-height: 	22px;
	letter-spacing: 2px;
	margin-top:		 0px;
	margin-bottom:  18px; /* 22-20=2 */
	padding-top:    4px;
	padding-bottom: 0px;
}
/* ATTN: h4 is displaying 2px too low */
h4 {
	display: inline;
	font-size:   16px;
	line-height: 22px;
	letter-spacing: 1px;
	margin: 0px;
	/*background-color: rgba(0,0,0,0.2);*/
}





/*************************** FIGURES & IMAGES ***************************/

figure {
	width:100%;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	/*margin-bottom: 22px;*/
	margin-bottom: 0;
}

figcaption {
	font-size: 14px;
	width:250px;
	float:right;
	margin-right:-300px;
	text-align:left;
	clear: right;
	font-family: 'Roboto Condensed', sans-serif;
	word-spacing: 0;
	margin-bottom: 20px;
	border-left: 1px solid rgba(0,0,0,0.25);
	border-top:  1px solid rgba(0,0,0,0.25);
	padding-left: 5px;
	/*background-color: rgba(0,0,0,0.025);*/
}

figure.fullWidth figcaption {
	margin-right: 0px;
}

figure img, aside img,
figure iframe, aside iframe
{
	width: 100%;
}

/*img.adjHeight {
	background-color: rgba(255,255,0,0.125);
}
*/

/* borders around images */
img.exhibit, iframe.exhibit, canvas.exhibit {
	border:1px solid rgba(0,0,0,0.33);
	box-shadow:			0px 2px 10px rgba(40,32,32,0.3);
	-moz-box-shadow:	0px 2px 10px rgba(40,32,32,0.3);
	-webkit-box-shadow:	0px 2px 10px rgba(40,32,32,0.3);
}
img.exhibit:hover, iframe.exhibit:hover, canvas.exhibit:hover {
	box-shadow:			0px 2px 12px rgba(40,32,32,0.4);
	-moz-box-shadow:	0px 2px 12px rgba(40,32,32,0.4);
	-webkit-box-shadow:	0px 2px 12px rgba(40,32,32,0.4);
}

/*
aside img:first-child {
	margin-top: 5px;
}

aside img:last-child {
	margin-bottom: 5px;
}
*/




/*************************** SIDENOTES ***************************/

aside {
	font-size: 14px;
	line-height: 	 22px;
	width:250px;
	float:right;
	text-align:left;
	clear: right;
	font-family: 'Roboto Condensed', sans-serif;
	word-spacing: 0;
	margin-top: -7px;
	margin-bottom: 44px;
	margin-right:-300px;
	border: none;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	/*background-color: rgba(0,0,0,0.025);*/
	/*position: relative;
	top: 0px;*/
}

aside:before,
aside.bare:before,
aside.nude:before,
aside.full:before {
	display: block;
	content: "";
	margin-bottom: 8px;
}

aside:before {
	width: 33%;
	margin-right: 67%;
	border-top: 1px solid rgba(0,0,0,0.4);
}

aside > blockquote {
	margin-left: 0px;
	margin-right: 0px;
	font-size: 14px;
	line-height: 22px;
	border-left: 1px solid rgba(0,0,0,0.125);
	border-top: none;
}

aside.bare:before,
aside.nude:before {
	width: 33%;
	margin-right: 67%;
	border-top: 1px solid rgba(0,0,0,0.0);
}

aside.full:before {
	width: 100%;
	margin-right: 0%;
	border-top: 1px solid rgba(0,0,0,0.4);
}

ul.pub_list > li > aside,
ul.pub_list > li > aside.bare {
	margin-bottom: 8px;
	/*background-color: rgba(0,0,0,0.25);*/
}

/*************************** QUOTES ***************************/

blockquote {
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 0px;
	margin-bottom: 21px;
	font-size: 14px;
	line-height: 22px;
	font-family: 'Roboto Condensed', sans-serif;
	font-style: italic;
	border-left: 1px solid rgba(0,0,0,0.25);
	border-top:  1px solid rgba(0,0,0,0.25);
	padding-left: 6px;
}

cite {
	font-size: 14px;
	width:250px;
	float:right;
	margin-right:-320px;
	text-align:left;
	clear: right;
	font-family: 'Roboto Condensed', sans-serif;
	font-style: italic;
	word-spacing: 0;
	margin-bottom: 21px;
	padding-left: 5px;
	padding-right: 5px;
	border-left: 1px solid rgba(0,0,0,0.25);
	border-top:  1px solid rgba(0,0,0,0.25);
	position: relative;
	top: -1px;
	background-color: rgba(0,0,0,0.025);
}






/*************************** CODE ***************************/

code,
pre.code {
	/*font-family: "TheMono";*/
	font-family: 'Roboto Mono', 'Courier';
	word-spacing: 0;
	font-weight: 300;
}

/* blocks of code */
pre.code {
	font-size: 15px;
	line-height: 22px;
	border-left: 2px solid rgba(0,0,0,0.25);
	padding-left: 8px;
	margin-left: -10px;
	background-color: rgba(0,0,0,0.025);
	padding-right: 10px;
}
/* inline code */
code {
	font-size: 16px;
}


pre {
	margin-top: 0px;
	margin-bottom: 22px;
	/*background-color: rgba(0,0,0,0.05);*/
}





/*************************** LISTS ***************************/

ul, ol {
	/*margin-top: 22px;*/
	margin-bottom: 22px;
	padding-left: 0;
}

ul {
	/*background-color: rgba(0,0,0,0.125);*/
	list-style-type: circle;
}

ul > li {
	/*border:1px solid red;*/
}

ol {
	/*background-color: rgba(0,0,0,0.125);*/
	list-style-type: none;
	counter-reset:li;
}

ol > li {
	list-style: none;
	position:relative; /* Create a positioning context */
	/*margin:0 0 6px 2em;*/ /* Give each list item a left margin to make room for the numbers */
	/*padding:4px 8px;*/ /* Add some spacing around the content */
}

ol > li:before {
	content:counter(li) '.'; /* Use the counter as content */
	counter-increment:li; /* Increment the counter by 1 */
	position:absolute;
	/*top:-2px;*/
	/*left:-2em;*/
	width:50px;
	/* Some space between the number and the content in browsers that support
	   generated content but not positioning it (Camino 2 is one example) */
	margin-left:-58px;
	/*padding-right:8px;*/
	/*padding:0px;*/
	color: rgba(0,0,0,0.5);
	text-align:right;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 14px;
	/*background-color: rgba(0,0,0,0.05);*/
}

/*
See:
	http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/
	https://css-tricks.com/numbering-in-style/
*/

ul.pub_list > li {
	margin-bottom: 11px;
}


/*************************** LINKS ***************************/

/* Option 1 */
a {
	color: #A02020;
	text-decoration:underline;
}
a:hover {
	color: #A02020;
	text-decoration:none;
}
a:visited {
	color: #901d1d;
	/*text-decoration:underline;*/
}

/* Option 2 */
/*a {
	color: #2060A0;
	text-decoration: none;
	border-bottom-style: dotted;
	border-bottom-color: #2060A0;
	border-bottom-width: 1px;
}
a:hover {
	border-bottom-style: solid;
}
a:visited {
	color: #2020A0;
	border-bottom-color: #2020A0;
}
h1 > a,
h2 > a,
h3 > a,
h4 > a {
	border-bottom: none;
}*/

/* Option 3 */
/*a {
	color:rgb(27,119,173);
	text-decoration:underline;
}
a:hover {
	color:rgb(27,119,173);
	text-decoration:none;
}
a:visited {
	color:rgb(31,104,147);
	text-decoration:underline;
}*/