/*===========================================================================
** Style for Our Index Pages
** This sheet has styles for:
** * Lists of links using <UL>
** * Tables with download links for various formats
** * Folders full of icons and descriptions
**=========================================================================*/

/* CSS reset */
* {
	box-sizing: border-box;
	}

HTML, BODY, H1, H2, SECTION, DIV, P, UL, LI {
	margin: 0;
	padding: 0;
	border: 0;
	}

/* High contrast color scheme with slightly larger text so that
   mobile users can hit links with their fingers */
BODY {
	font-family: Times, "Times New Roman", serif;
	font-size: 14pt;
	background-color: white;
	color: black;
	}

/* Hyperlinks in print version will be black so they do not come out halftoned. */
@media print {
	A { color: black !important; }
	}

/*===========================================================================
** Page header is a green bar with square corners which meets the top, left,
** and right sides of the viewport. It has a logo image. App mode sets
** HTML.hide_nav in order hide all this.
**=========================================================================*/

HTML { padding-top: 55px; }		/* height of H1 */
HTML.hide_nav { padding-top: 0 }
HTML.hide_nav H1 { display: none }
H1 {
	position: fixed; top: 0; left: 0; width: 100%; z-index: 1;
	margin: 0;
	padding: 3px;
	border-bottom: 1px solid black;
	height: 55px;		/* not sure why we have to set this */
	background-color: #30a030;
	color: white;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}
H1 A {
	text-decoration: inherit;
	color: inherit;
	}
H1 IMG {
	width: 48px;
	height: 48px;
	vertical-align: middle;
	margin-right: 10px;
	}
@media print {
	H1 { background-color: white; color: black; }
	H1 IMG { border: solid black !important; }
	}

/*===========================================================================
** Index pages are formatted like this:
** <section>
** <h2>Section Title</h2>
** <ul>
** <li><a href="...">Item 1</a></li>
** <li><a href="...">Item 2</a></li>
** </ul>
** </section>
**=========================================================================*/

SECTION {
	margin: 1em .2em;
	}

/* Shift anchors so that when we scroll to a fragment, it does not end up under the header. */
SECTION[id]:before {
	content: "";
	display: block;
	margin-top: -55px;
	height: 55px;
	visibility: hidden;
	}

/* <h2> is smaller than <h1>, has rounded corners, and is set in a little. */
SECTION H2 {
	margin: .2em 0 .4em 0;
	padding: 5pt;
	border-radius: 5pt;
	background-color: #30a030;
	color: white;
	border: thin solid black;
	font-family: sans-serif;
	font-size: 100%;
	}

@media print {
	SECTION H2 { background-color: white; color: black; }
	}

SECTION H3 {
	margin: .2em;
	font-size: 100%;
	}

SECTION UL {
	margin: 0 0 .5em .6em;
	list-style: outside;
	padding-left: 12pt;
	}
SECTION UL UL {
	margin: 0;
	padding-left: 15pt;
	}
SECTION LI {
	margin: 4pt 4pt 4pt 0;
	}

/* Occasionally we need a paragraph. */
P {
	margin: .2em .2em .5em .2em;
	font-size: 100%;
	}

/* Footer */
FOOTER {
	background-color: #f0f0f0;
	border-top: thin solid grey;
	margin: 1em 0 -1em 0;
	padding: .3em .4em 1em .4em;
	}
FOOTER UL.footer_links {
	font-size: 90%;
	margin: .3em .2em .5em .2em;
	}
FOOTER UL.footer_links LI {
	display: inline-block;
	margin-right: .4em;
	}
FOOTER A.cc_logo {
	display: block;
	float: left;
	padding: 2px;
	}
FOOTER DIV.notice_text {
	margin-left: 100px;
	width: 300px;
	}
FOOTER DIV.copyright {
	font-size: 60%;
	}
FOOTER DIV.license {
	font-size: 50%;
	}

/*===========================================================================
** Tabular index page for downloads
**=========================================================================*/

TABLE.download {
	margin: 5pt;
	border: thin solid black;
	border-collapse: collapse;
	}
TABLE.download TH, TABLE.download TD {
	text-align: left;
	border: thin solid black;
	padding: 3pt;
	}
TABLE.download TH.ext {
	width: 5em;
	}

/*===========================================================================
** Folder-Style Index Page with Icons
** We use this for lists of flashcard sets, widgets, and other things which
** lend themselves to representation by an icon.
** <ul class="folder">
**   <li><a href="..."><img src="...">Item 1</a></li>
**   <li><a href="..."><img src="...">Item 2</a></li>
** </ul>
**=========================================================================*/

P.folder_blurb {
	margin: 12px;
	}

UL.folder {
	display: block;
	margin: 15px 10px;
	padding: 0;
	max-width: 600px;
	}
UL.folder LI {
	display: inline-block;
	vertical-align: top;
	margin: 5px;
	width: 110px;
	height: 110px; 
	font-family: sans-serif;
	text-align: center;
	font-size: 13px;
	}
UL.folder LI IMG {
	display: block;
	margin: 0 auto 5px auto;
	width: 64px;
	height: 64px;
	border: 1px solid #808080;
	border-radius: 5px;
	box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5);
	}
UL.folder LI A {
	display: block;
	height: 100%;
	text-decoration: none;
	color: black;
	}

NOSCRIPT {
	display: block;
	color: red;
	border: thin solid red;
	padding: .4em;
	margin: 0 10px;
	}