@charset "utf-8";

/* #mark Reset */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}
/* #mark Diagnostic - uncomment for grids, borders */
/*@import url(diagnostic.css);*/

/* ---------------------------------------------

	Carneades design: July 2007

	Notes at the bottom

	I fiddled with font sizes in May 2012.
	- increase default size to 16 from 12 (line 69)
	- increase h1 to 2em (lines 112, 133)
	- h1 margins to 0, lineheight to 1.5em (48px total)
	-- h2.course_links margin-top to 2em, same as h2.course_description (line 626)
	- source: 3:5 stranded http://lamb.cc/typograph/
		.7692, 1, 1.2308, 1.6154, 2, 2.6154
	- I haven’t checked to see if line heights adjusted properly
	- really, I want to redo the whole thing
 --------------------------------------------- */

/* #mark Basics - body, basic text styles, block elements*/

/* ---------------------------------------------

	Basics -- body, basic text styles, block elements
	
	Note: if you change font-size, line-height, or width,
	check Lists, Tables, & Elements below.
	
	Great font stack info: http://www.bzzen.com/2010/06/lettertypes-voor-het-web/

 --------------------------------------------- */

body {
	font-size: 16px;
	font-family:  Georgia, "Bitstream Charter", "Century Schoolbook", "Century Schoolbook L", "Nimbus Roman No9 L", "Times New Roman", Times, serif;
	margin-top: 3em;
	margin-right: auto;
	margin-bottom: 6em;
	margin-left: auto;
	min-height: 1200px;
	padding: 3em 0.5em 6em 10em;
	position: relative;
	width: 50.5em;
	}

p, hr, address, center, noscript, pre {
	font-size: 1em;
	line-height: 1.5em;
	text-indent: 0em;
	width: 35em;
	}

p+p { text-indent: 2em; }

/* hyphenation for a mobile style sheet without a big right margin. 12/11/12
@media only screen and (max-device-width : 1024px) {
	p, blockquote {
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		-o-hyphens: auto;
		hyphens: auto;
	}
}
 */

/* #mark Headings - h1 - h4 */

/* ---------------------------------------------

	Headings -- h1 - h4
		
	Note: also styles for headings only, such as:
	* #subtitle (h1)
	* fancy ampersand (h1-h4)

 --------------------------------------------- */

/* 
h1 {
	font-size: 1.6666666666666667em;
	font-weight: normal;
	line-height: 0.9em;
	margin: 0 0em 0.9em 0;
	}
 */
h1 {
	font-size: 2em;
	font-weight: normal;
	line-height: 1.5em;
	margin: 0;
	}

/* 
h1 #subtitle {
	border-left: 1px solid black;
	color: #666;
	font-size: .7778em;
	font-style: italic;
	font-weight: normal;
	margin: 0 0 0 0.5em;
	margin-top: .5em;
	padding-left: 0.5em;
	}
 */
h1 #subtitle {
	border-left: 1px solid black;
	color: #666;
	font-size: 0.6154em;
	font-style: italic;
	font-weight: normal;
	margin: 0 0 0 0.5em;
	margin-top: .5em;
	padding-left: 0.5em;
	padding-top: 0.5em;
	}

/* Alternative title: title is larger, subtitle goes below it in smaller, lighter, sans font

h1 {
	font-size: 2em;
	font-weight: normal;
	padding-top: 0.5em;
	}

h1 #subtitle {
	color: gray;
	display: block;
	font-family: verdana;
	font-size: .5em;
	font-weight: normal;
	line-height: 1.5em;
	}
*/

h2 {
	font-size: 1.5em;
	font-weight: normal;
	line-height: 1em;
	margin: 2em 0em 1em 0;
	width: 23.33333333333em;
	}

h3 {
	font-size: 1.3333333333333333em;
	font-style: italic;
	font-weight: normal;
	line-height: 1.125em;
	margin: 2.25em 0em 1.125em 0;
	text-indent: 0;
	width: 26.25em;
	}

/*Replaced 2010-03-09 with p+p selector above*/
/*
h1+p, h2+p, h3+p, h4+p {
	text-indent: 0;
	}
*/

h2+h3 {
	margin-top: 1.125em;
	}

h3+h4 {
	margin-top: 0em;
	}

/* Fancy Ampersand -- use with h1-h4 */
span.amp {
	font-family: Baskerville, "Goudy Old Style", "Constantina", "Palatino Linotype", "Palatino", "Book Antiqua", "Georgia", serif;
	font-style: italic;
	font-size: 110%;
	}


/* #mark Foots and Sides -- footnote, sidenote, nametag*/
/* ---------------------------------------------

	Foots and Sides -- footnote, sidenote, nametag
	
	Great font stack info: http://www.bzzen.com/2010/06/lettertypes-voor-het-web/
 --------------------------------------------- */
 
.footnote {
	border-top: 1px solid #666;
	clear: both;
	font-family: "Lucida Grande", Verdana, "DejaVu Sans", "Bitstream Vera Sans", "Lucida Sans", "Lucida Sans Unicode", sans-serif;
	font-size:0.8333em;
	line-height: 1.8em;
	margin-left:0;
	margin-top:2.700108em;
	padding-top:0.80043202em;
	text-indent:0em;
	width:42.0002em;
	}

.footnote .ornament {
	color: #999;
	margin: 0 0.3333em;
	font-family: "Goudy Old Style", "Palatino", "Book Antiqua", serif;
	}

@media print {
	.footnote a, .footnote a:link, .footnote a:visited {border: none; color: #000;}
	}

/* Keep this -- it's useful for calculating values with other font sizes
.sidenote {
	font-size: 1em;
	left: 47.5em;
	line-height: 1.5em;
	position: absolute;
	text-indent: -0.7em;
	width: 12.5em;
	}
*/

/* .sidenote: changed on 12/16/2009. Old line-height matched spacing of body text line-height: 1.80007200288em; */
/* margin-top: .3em puts first line on same baseline as body text */

.sidenote {
	font-size: 0.8333em;
	left: 57.002280091204em;
	line-height: 1.5em;
	margin-top: .3em;
	position: absolute;
	text-indent: -0.7em;
	width: 15.000600024001em;
	}

h2 .sidenote {
	font-size: 0.555555555556em;
	}

h3 .sidenote {
	font-size: 0.624975em;
	font-style: normal;
	}

.sidenote.flush {
	text-indent: 0em;
	}

.nametag {
	height: 100em;
	left: 0;
	margin: 0;
	position: absolute;
	top: 9em;
	width: 10em;
	}

/* 
.nametag always prints on one page
a bit hacky. the images are very long with mostly blank space
so this is a guesss. mjg 10/8/12
 */
@media print {
  .nametag {
	height: 13in;
	left: 0;
	margin: 0;
	position: absolute;
	top: 0.5in;
  }
}

/* #mark Images*/
/* ---------------------------------------------

	Images
	
	A. img-box is for pictures, like class pictures
	
	We have 50em of horizontal space.
	At the standard 12px = 1em, that's 600px
	
	Use the drop shadow technique from here: http://owltastic.com/page/5/

	
	Export pictures at 800px x 533px; 800px = 50em at 16px/1em
	
	45em x 30em = 540px x 360px
	
	Resize picture by increasing text size without distortion
	
	B. img-box-narrow is for pictures that conform to text column, 35em (420px).
	
	Like text-column, come to think of it. (doh)
	
	To do (as of 8/13/08): (1) rules for exporting pictures like those above.
	(2) Apply consistently on mjg/biography.shtml page. (3) the captions come out funky. I used an inline style on the biography page.
	
	Notes:
	1. IE gets different technique, from http://www.alistapart.com/articles/cssdropshadows/; see IE specific style sheets.
	2. A refined technique here: http://www.alistapart.com/articles/cssdrop2/
	3. Multiple backgrounds should work too, when more browsers support.
	
	
	B. text-column matches the width of the text column.
	
	I did this for tutorials with screen shots, like the backup tutorial. (July 2008)	
 --------------------------------------------- */

.img-box, .img-box-narrow {
	float: left;
	margin: 0;
	}

.img-box img, .img-box-narrow img, .img-box-narrower img {
	display: block;
	position: relative;
	border: 1px solid #a9a9a9;
	margin: 1.25em 0 1.25em 0;
	padding: 0.25em;
	height: 30em;
	width: 45em;
	box-shadow: .5em .5em 1em rgba(0,0,0,.1);
	}

.img-box-narrow img {
	height: 23em;
	width: 35em;
	}

.img-box-narrower {
	float: right;
	margin: 0;
	}

.img-box-narrower img {
	height: 24em;
	width: 16em;
	}

.caption {
	clear: both;
	margin: 1.5em auto;
	text-indent: 0;
	width: 35em;
	}

.text-column {
	margin: 1.5em 0;
	}

.text-column img {
	box-shadow: .5em .5em 1em rgba(0,0,0,.1);
	}

.text-column .caption {
	font-size: 0.8333em;
	font-weight: bold;
	margin: 0.90003600144em 0 1.80007200288em;
	text-align: center;
	width: 42.0016800672em;
	}


/* #mark Lists -- ol, ul*/
/* ---------------------------------------------

	Lists -- ol, ul
	
	Top and bottom margins take list off the grid, restore subsequent paragraph. Like blockquote.
	
	Indentation is controlled by margin and/or padding on ol, ul, or dl. Using margin-left keeps labels outside box, padding-left keeps them inside.
	
	I have margin-left: 2em (match indentation of paragraphs) + width: 33em = 35em
	
 --------------------------------------------- */

ol, ul, dl {
	font-size: 1em;
	line-height: 1.5em;
	margin: .75em 0 .75em 2em;
	padding: 0;
	width: 33em;
	}

ol {
	list-style-type: decimal;
	}

ul ul ol ol, ul ol ul ol, ol ul ol ol, ol ol ul ol, ol ul ol, ol ol {
	list-style: lower-alpha;
	margin-left: 1.5em;
	}

ol ul ol ol, ol ol ul ol, ul ol ol ol, ol ol ol {
	list-style: lower-roman;
	}

ol ol ol ol {
	list-style: decimal;
	}

ul {
	list-style-type: circle;
	}

ul ul, ol ol ul ul, ol ul ol ul, ul ol ol ul, ol ul ul, ul ol ul {
	list-style: square;
	margin-left: 1.5em;
	}

ol ul ul ul, ul ol ul ul, ul ul ol ul, ul ul ul {
	list-style: disc;
	margin-left: 1.5em;
	}
	
ol, ul {
	list-style-position: outside;
	}

li>ul, li>ol {margin-bottom: 0em;}

p+ol.unpacked, p+ul.unpacked {margin-top: 1.5em}

ol.unpacked li, ul.unpacked li { margin-bottom: 1.5em;}

ol.inset, ul.inset {margin-left: 2.25em;}

/* #mark Table -- generic, contact, courses, grade_chart*/
/* ---------------------------------------------

	Tables -- generic, contact page, courses (for home page),
			  grade_chart
	
 --------------------------------------------- */
 
table, thead, tbody, tr, th, td {
	font-size: 1em;
	font-weight: normal;
	line-height: 1.5em;
	text-align: left;
	}

/* #mark Contact*/
/*  Moved from table to ul on 9/6/14 */

.contact li {
	list-style-type: none;
}

.contact li+li {
	margin-top: 1.5em;
}

/* 
table.contact, table.courses {
 	margin: 0;
 	padding: 0;
  	width: 35em;
 	}
  
.contact th {
  font-style: italic;
  font-weight: normal;
  padding-top: 1.5em;
  text-align: right;
  vertical-align: top;
  }

.contact th:after {
  content: "\2022";
  padding-left: 0.5em;
  }

.contact td {
	font-style: normal;
	text-align: left;
	margin: 0;
	padding: 0;
	padding-left: 0.5em;
	padding-top: 1.5em;
	}
 */

.courses th {
	width: 7em;
	}

/* hack! Reset in the last row so the next element won't be pushed down */
.courses td {
	padding-bottom: 1.5em
	}

/* #mark grade_chart*/
/* Margin calculations for #grade_chart:
	NB: 0.083333333333em = 1px
	top: 2(0.083333333333em) + 0.25em = 0.416666666666em
	th: 0.083333333333em
	bottom: 0.416666666666em (same as top)
	total: 0.916666666665em
	So, subtract 1.25 em from, say, 3 (=1.5*2) = 2.083333333335em
	Then divide the result for the top and bottom margins =  1.041666666668em
	Finally, add 1.5em to give it some space = 1.541666666668em
*/
table#grade_chart {
	border-top: 0.083333333333em double #666;
	border-bottom: 0.083333333333em double #666;
	border-width: 0.25em;
	margin: 2.541666666668em 7.5em;
	width: 20em;
	}

#grade_chart th, #grade_chart td.range {
	border-bottom: solid #666 1px;
	padding-left: 0.75em;
	}

#grade_chart td.range {
	border-bottom: none;
	}
	
#grade_chart td {
	padding-left: 2em;
	}

#grade_chart caption {
	caption-side: bottom;
	padding-top: 0.5em;
	margin-bottom: 1em;
	text-align: center;
	}

/* #mark Elements*/
/* ---------------------------------------------

	Elements
	
	Note: some styles set along with p, above

 --------------------------------------------- */

a {text-decoration: none;}
a:link {border-bottom: 1px dotted #00f; color: #00f}
a:visited {border-bottom: 1px dotted #000; color: #000}
a:hover {background: #ccc}

a:link img, a:visited img {
	border: none;
	}

@media print {
	a, a:link, a:visited {border-bottom: 1px dotted #666; color: #000;}
	}


abbr { font-variant: small-caps; }

blockquote {
	font-size: 1em;
	line-height: 1.5em;
	margin: .75em 0 .75em 2em;
	padding: 0;
	width: 31em;
	}

blockquote ul, blockquote ol {
	width: 29em;
	margin-top: 0;
	margin-bottom: 0;
	}

blockquote p {
	width: 31em;
	}

blockquote > p:first-child {
	text-indent: 0em;
	}

blockquote + p {
	text-indent: 0em;
	}

em, i {font-style: italic;}

strong {color: #333; font-weight: bold;}


/* #mark Classes*/
/* ---------------------------------------------

	Classes
	
 --------------------------------------------- */

.ghost {display: none}

.skip {margin-top: 1.5em; text-indent: 0;}

.noindent {text-indent: 0;}

/* #mark First page*/
/* ---------------------------------------------

	First page
	
	[pre-9/21/07]	Nametag (2 cols, 10em) + Links (4 cols, 20em) + Description/Notes (6 cols, 30em) = 12 columns, 60em.
	Why change? To move course_description between left and right

	Nametag (2 cols, 10em) + Links (4 cols, 22em) + gutter (1 col, 5em) + Description/Notes (4 cols, 22em) = 12 columns, 60em
	
 --------------------------------------------- */

/* ---------------------------------------------

	First page, Links
	
	Note: margins do not collapse on floats. See margin-top on h2
	
 --------------------------------------------- */

h2.course_links {
	clear: left;
	float: left;
	margin-top: 2em;
	width: 14.66666666667em;
	}

table.course_links {
	clear: left; 
	float: left;
	width: 22em;
	margin-top: 0;
	}

table.course_links th {
	font-style: normal;
	font-weight: normal;
	}

table.course_links td {
	padding-bottom: 1.5em;
	padding-left: 1.5em;
	}
	
/* ---------------------------------------------

	First page: Description/Notes
	
	Separate by a (5em) column from first text colum.
	
	27.5em - 5em = width: 22.5em
		
	Note: don't set width on divs - triggers haslayout weirdness - set width on other elements.

 --------------------------------------------- */

#course_description,
#course_notes {
	margin-left: 26.5em;
	width: 22.5em;
	}

#course_description h2,
#course_notes h2 {
	width: 15em;
	}

#course_description p,
#course_description li,
#course_description ol,
#course_description ul,
#course_notes p,
#course_notes li,
#course_notes ol,
#course_notes ul {
	width: 22.5em;
	}

/* was margin-left: 1.25em; 9/9/12 */
#course_notes ol {
	margin: 0;
	}

/* took out list styles 9/9/12 - mjg */
#course_notes li {
	list-style: none;
	list-style-image: none;
	margin-bottom: 1.5em;
	}


/* ---------------------------------------------

	First page ornament.
	
	text: Zapf Dingbats ❦ #ccc
	
	img: 72x72 pixels, 72 point font
	
	Function is to clear floats. Not really a pressing problem.
	But I like it.
		
 --------------------------------------------- */

img.leaf {
	clear: both;
	height: 6em;
	width: 6em;
	margin: 1.5em 25em 0 19em;
	}



/* #mark Holidays*/
/* ---------------------------------------------

	Halloween
	
	uncomment for orange background, black border, orange headers
	
 --------------------------------------------- */

/*
html {background-color: #f60; border: 3px solid #f93;}

body {
	background-color: #fff;
	border: 0.5em solid #000;
	border-radius: 1.33em;
	box-shadow: .5em .5em 1em rgba(0,0,0,.75);
	min-height: 101em;
	}
	
h1, h2, h3 {color: #f60;}

h1 #subtitle {border-color: #f60;}

a:link {border-bottom: 1px dotted #f60; color: #f60}

*/
/* ---------------------------------------------

	Thanksgiving
	
	uncomment for orange background, brown border, brown headers
	
	Things done to accommodate iPad browser:
	- same color border on html - get a black line above nametag image without it
	- min-height on body - nametag image goes beyond body box without it
	
 --------------------------------------------- */

/* 
html {background-color: #f60; border: 3px solid #f60;}

body {
	background-color: #fff;
	border: 0.5em solid #960;
	border-radius: 1.33em;
	box-shadow: .5em .5em 1em rgba(0,0,0,.75);
	min-height: 101em;
	}
	
h1, h2, h3 {color: #960;}

h1 #subtitle {border-color: #960;}

a:link {border-bottom: 1px dotted #f60; color: #f60}

a:visited {border-bottom: 1px dotted #960; color: #960}

 */

/* ---------------------------------------------

	Earth day (April 22)
	
	uncomment for light green background, dark green border; dark green headers, etc.
	
 --------------------------------------------- */


/*
html {background-color: #6C0; border: 3px solid #093;}

body {background-color: #fff; border: 1.5em solid #093; border-radius: 1.33em;	min-height: 101em;}

h1, h2, h3 {color: #093;}

h1 #subtitle {border-color: #093;}

a:link {border-bottom: 1px dotted #093; color: #093}
*/



/* ---------------------------------------------

	Election 2008
	
	uncomment for xx background, xx border, xx headers
	
 --------------------------------------------- */


/*
html {background-color: #009; border: 3px solid #36F}

body {background-color: #fff; border: 1.5em solid #C00;	min-height: 101em;}
	
h1, h2, h3 {color: #009;}

h1 #subtitle {border-color: #009;}

a:link {border-bottom: 1px dotted #009; color: #009}
*/


/* ---------------------------------------------

	Christmas
	
	uncomment for green background, red border, green headers
	
 --------------------------------------------- */

/* 

html {background-color: #393; border: 3px solid #393;}

body {
	background-color: #fff;
	border: 0.5em solid #900;
	border-radius: 1.33em;
	box-shadow: .5em .5em 1em rgba(0,0,0,.75);
	min-height: 101em;}
	
h1 {color: #900; font-weight: bold}

h1 #subtitle {border-color: #060; color: #060;}
	
h2, h3 {color: #060; font-weight: bold}

 */


/* ---------------------------------------------

	Valentine's Day
	
	uncomment for pink background, red border and headers
	
 --------------------------------------------- */
/* 

html {background-color: #fcc}

body {background-color: #fff; border: 1.5em solid #C36;
	border-radius: 1.33em;
	box-shadow: .5em .5em 1em rgba(0,0,0,.75);
	min-height: 101em;
}
	
h1, h2, h3 {color: #C36; font-weight: bold}

h1 #subtitle {border-color: #C36; color: #C36;}
*/


/* #mark Notes*/
/* ---------------------------------------------

	Notes

	Vertical spacing
	
		borrowed from Richard Rutter. See:  http://24ways.org/2006/compose-to-a-vertical-rhythm
		
		Sidenote: 5 lines per 4 lines of main text. See: http://www.markboulton.co.uk/journal/comments/incremental_leading/

	Horizontal grid:
		1 column = 5em = 60px
	  
		body: {padding-left: 10em} + {width: 50em} + {padding-right: 0em} = 60em = 720px across
		Therefore, 12 horizontal columns.
		 
		Note: instead of padding-right on body, keep elements 0.5em (normal font) away. e.g.
		* .sidenote width + negative margin leave a 0.5em (normal font) gap.
		* h1 has padding-right = 0.5em (normal font)
		
		2 columns (10em) on the left via body {padding-left:10em}
		
		7 columns (35em) for text, set via p {width:35em} (and other block elements too).
		
		3 columns (15em) for sidebar + spacing around it. Sidebar calculations:
		
			15em = 2.5em spacing + 12em text + 0.5em spacing (normal font size)
			
			left = 45em (everything else) + 2.5em (spacing) = 47.5em (normal font size)
				= 47.5/0.8333 = 57.002280091204em (sidebar font size)
			
			width = 12/0.8333 = 14.400576023041em (sidebar font size)
		
	
	As of 30 July 2007, nametag is still dodgy.
	
	IE fixes are in ie.css. See http://www.quirksmode.org/css/condcom.html

 --------------------------------------------- */