/*
	Delving Deeper Style Sheet
	peter.hans.froehlich@gmail.com

	simon's colour scheme:

    #F6F6F6 nearwhite
    #D5D5D5 lightest
    #B1B1B1 light
    #9C9C9C medium
    ---
    #898B88 dark
    #656E64 green
    ---
    #6F7071 darker
    #52555A slate
    
    
	#F5F5F5 page
	#52555A page border
	#B1B1B1 highlight color, headings, table headers

	#DED29E odd table rows
	#B3A580 even table rows
*/

/*
	Some fonts to play with. I find libertine a lot
	prettier than californian but your mileage may
	certainly vary.
*/
@font-face {
	font-family: isabella;
	src: url('./Isabella.ttf');
}
@font-face {
	font-family: californian;
	src: url('./californian-fb.ttf');
}

/* TODO: if I add format('ttf') things look worse? */
@font-face {
    font-family: libertine;
    src: url('./LinLibertine_Rah.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: libertine;
    src: url('./LinLibertine_RIah.ttf');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: libertine;
    src: url('./LinLibertine_RBah.ttf');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: biolinum;
    src: url('./LinBiolinum_RBah.ttf');
    font-weight: bold;
    font-style: normal;
}

/*
	Default font size should be big enough for
	a 42-year-old to read comfortably. :-)
*/
html {
	background-color: #52555A;
	font-family: californian, libertine, serif;
	font-size: 16pt;
}

/*
	Constrain the width so lines are about 65
	characters long. High contrast, easy to read.
	Center on page, with a little breathing room.
*/
body {
	background-color: #F9F9F9;
	color: black;
	margin-left: auto;
	margin-right: auto;
	max-width: 65ex; /* tried 83ex to fit tables, but text not as readable */
	padding: 1em;
}

/* Credit page styles */
p.title {
	font-family: libertine,californian,sans-serif;
	font-size: 28pt;
    letter-spacing:0.4em;
    text-align: center;
	color: black;
	margin-top: 1em;
}
p.subtitle {
	font-family: libertine,californian,sans-serif;
	font-size: 20pt;
    font-weight: 400;
    letter-spacing:2.1em;
    text-align: center;
	color: black;
    margin-top: 2em;
	margin-bottom: 1em;
    padding-left:1.3em;
}
p.author {
    margin-top: 3em;
    margin-bottom: 3em;
    text-align: center;
}
p.centered {
    text-align: center;
}
p.dedication {
    margin-top: 4em;
    margin-bottom: 4em;
    text-align: center;
    font-style: italic;
}
p.credit {
	margin-top: 0em;
    margin-bottom: 0.2em;
    text-align: left;
}
p.copyright {
    margin-top: 2em;
    margin-bottom: 6em;
	font-size: 12pt;
    text-align: center;
}
img.ii-logo {
    float:right;
}

/*
	Huge heading, used to separate the books.
*/
h1 {
	background-color: #656E64;
	color: #D5D5D5;
	font-family: biolinum, sans-serif;
	margin: 0;
	padding: 1ex;
	text-align: center;
}

/*
	Chapter heading. Hanging over page to make
	navigation easier, pretty big as well and
	maybe a bit too fancy right now. Comments?
*/
h2 {
	background-color: #D5D5D5;
	border-bottom: 3pt solid #656E64;
	color: #52555A;
	font-family: biolinum, sans-serif;
	margin-top: 2em;
	margin-bottom: 0.5em; /* seems to collapse with paragraph margin */
	margin-left: -2em;
	padding: 0.5em;
}

/*
	Section heading. Not hanging anymore but
	otherwise as fancy as chapter heading,
	just smaller of course.
*/
h3 {
	background-color: #D5D5D5;
	border-bottom: 2pt solid #656E64;
	color: #52555A;
	font-family: biolinum, sans-serif;
	margin-top: 1em;
	margin-bottom: 0.5em; /* seems to collapse with paragraph margin */
	padding: 0.25em;
}

/*
	Subsection heading. Now we're getting a
	lot plainer.
*/
h4 {
	color: #52555A;
	font-family: biolinum, sans-serif;
	margin-top: 1em;
	margin-bottom: 1em; /* looks better, also required for runin hack */
}

/*
	Paragraph heading. We would prefer to do this
	using "display: run-in" but Firefox does not
	support that yet. So for now we're using a
	hack that *seems* to work fine on all of the
	browsers we tested. But it could go horribly
	wrong in the future.

	See http://css-tricks.com/run-in/ for more.
*/
h5 {
	color: #52555A;
	display: inline;
	float: left;
	font-size: 16pt;
	margin: 0;
    margin-bottom: -1em; /* required for Chrome to NOT catch 2nd line */
	margin-right: 1ex;
}

/*
	Table heading. This should not even be here
	in my opinion, we should just use captions.
*/
h6 {
	color: #52555A;
	display: none; /* TODO: temporarily disabled */
}


/* ====================================================== */

/*
	Tables are centered, as are all columns. We
	used to have a smaller font to make things
	fit, now we just reduce the size thead and
	that works fine.
*/
table {
	border-top: 2pt solid black;
	color: #52555A;
	font-size: 16pt;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	/* doesn't look great for narrow tables, but at least provides some visual consistency */
	width: 100%;
	/* the following is needed for the "display: run-in" hack, but it is also a good idea anyway */
	margin-bottom: 3ex;
	margin-top: 3ex;
}
/*
	Example PC ability scores are a "lite" table
*/
.lite {
	border: 0pt;
}

/*
	Make sure captions end up above the table
	and with a little breathing room to spare.
*/
caption {
	color: #52555A;
	font-weight: bold;
	caption-side: top;
	margin-bottom: 1ex;
	padding-top: 1ex;
	border-top: 2pt solid black;
    
}

/*
	Some of the more complex tables require bordered columns.
*/
colgroup.bordered {
	border-left: 2pt solid black;
	border-right: 2pt solid black;
}

/*
	Table headers have a small border at the
	bottom. We also use the highlight color
	here. And I added a hack to make tables
	fit: font-size down in thead!
*/
thead {
	border-bottom: 2pt solid black;
}

/*
	Increase the spacing between columns a
	bit to make tables more readable. Is
	there a better way?
*/
th {
	padding-left: 1ex;
	padding-right: 1ex;
	color: black;	
	font-weight: 500; /* normal=400, bold=700 */	
}

/*
	Create lines in table headers for those
	colspans where typography demands a line.
*/
th.liner {
	border-bottom: 1pt solid black;
}

/*
	Need a border to finish the layout.
*/
tbody {
	border-bottom: 2pt solid black;
}

/*
	Our version of zebra tables. As long as
	the HTML has the right classes, this is
	fine.
*/
tr.odd {
	background-color: #F6F6F6;
}
tr.even {
	background-color: #D5D5D5;
}
/* 
	Table 2.8 also includes narrow row borders.
*/
tr.odd-new-category {
	background-color: #F6F6F6;
	border-top: 2pt solid #9C9C9C;
}
tr.even-new-category {
	background-color: #D5D5D5;
	border-top: 2pt solid #9C9C9C;
}


/* 
	Less important text in tables 
   	E.g., fine grained advancement on 2.8 Attack Matrix 
*/
.lesser {
	font-size: 10pt;
    color: #9C9C9C;
}

/*
	Simon says (lol!) that "object" should align
	right. I left it TODO because I think we're
	using "object" too often in the HTML.
*/
td.object {
	background-color: pink; /* TODO */
	text-align: right;
}

/*
	Some tables include footnotes as footers.
*/
tfoot {
	color: #52555A;
	font-size: 16pt;
	text-align: left;
}

/* ====================================================== */

/*
	Reminder that pre tag should go and be replaced
	by table.
*/
pre {
	background-color: pink; /* TODO */
}

/*
	Links are supposed to "blend in" as much as
	possible while still being recognizable as
	different. This turns out to be hard: After
	playing with just subtle color changes I've
	concluded that underlining is actually still
	the best option. Opinions?
*/
a {
	color: #47561B;
}
a:hover {
	color: #656E64;
}
a:active {
	color: pink; /* TODO */
}