appearance.scss

$page_surrounding: #c0bba8;
$content_background: white*0.95;
$head_foot_color:  #248;
$link_color:       #24C;
$link_hover_color: $link_color*2;

/* TODO: use the following to improve this stylesheet:
 * http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/
 */


/* Colors *********************************************************************
 *============================================================================*/

@media screen {

	/* The content background (middle of the sandwich) */
	#page-middle > * {
		background-color: $content_background;
	}

	/* Basically the "side margin" along the central content and the top/bottom
	 * stuff including proper backgrounds so rounded corners work */
	/* Cool drop shadow */
	body, #page-middle, .contrasting-background {
		background-color: $page_surrounding;
	}

	/* Round corners */
	#top-navigation > div { border-radius: 1em 1em 0 0; }
	#page-footer > div { border-radius: 0 0 1em 1em; }

	/* Links get brighter */
	#content a       { color: $link_color; }
	#content a:hover { color: $link_hover_color; }

	/* Top navigation and footer background colors and links */
	.contrasting-background   { background-color: $head_foot_color; color: white; }
	.contrasting-background a { background-color: $head_foot_color; color: white; }

	#top-navigation {

		/* Special rule for top-level because the transparency misbehaves */
		ul.horizontal-navigation > li       > a { background-color: inherit; }
		ul.horizontal-navigation > li:hover > a { background-color: white; }

		/* All (i.e. subsequent levels) */
		li {
			&       > a { background-color: rgba(34, 68, 136, 0.80); }
			&:hover > a { background-color: rgba(255, 255, 255, 0.80); }
			&:hover > a {
				color: black;

				border: 1px solid black; margin: -1px;

				border-radius: 2px;
				box-shadow: 0 0 5px $head_foot_color;
			}
		}
	}
}

/* In print, show link targets after links and color links to match surrounding
 * text. */
@media print {

	a, a:visited { color: inherit; text-decoration: underline; }

	#content a:after {
		content: " (" attr(href) ")";
		font-size: x-small;
	}

}



/* Padding ********************************************************************
 *============================================================================*/

/* Generic padded container (which must directly contain another div) */
@media screen {

	/* Common padding rule, see layout.css for details. */
	.panel.padded > div { padding: 0.15in; }

	/* Fix it for the weird environments */
	.panel.padded .multicolumn { margin-left: -0.15in; margin-right: -0.15in; }
	.panel.padded .sidebar .left { margin-left: -0.15in; }
	.panel.padded .sidebar .right { margin-right: -0.15in; }
}

@media all {

	/* Since <h1> is used only for the main header of the page, disable it
	 * elsewhere so the document cannot insert it. */
	/* TODO: use pandoc to convert header levels down one (h1->h2, h5->h6, etc */
	h1        { display: none; }
	header h1 { display: block; }
}

@media screen {
	h1, h2, h3, h4, h5, h6 { margin: 0; }

	#top-navigation > div {
		padding: 0 1em;
	}

	#top-navigation a {
		padding: 0 1em;

		/* center vertically */
		height: 3em;
		line-height: 3em;
		overflow: hidden;
		text-align: center;
		vertical-align: middle;
	}

	#top-header h1 {
		text-align: left;

		margin: 0;

		padding: 0.5em;
		padding-top: 0.75em;
	}
}


/* Font faces *****************************************************************
 *============================================================================*/

@media all {
	#top-navigation a,
	#top-navigation a:hover {
		font-family: "Helvetica", sans-serif;
		font-weight: bold;
		text-decoration: none;
	}
	
	a, a:hover {
		text-decoration: underline;
	}
	
	body {
		font-family: "Trebuchet MS", sans-serif;
	}
	
	h1, h2, h3, h4, h5, h6, th, dt {
		font-family: "Trebuchet MS", sans-serif;
	}

	h1 { font-weight: bold;   text-decoration: none;      }
	h2 { font-weight: normal; text-decoration: underline; }
	h3 { font-weight: bold;   text-decoration: none;      }
}



/* Font sizes *****************************************************************
 *============================================================================*/

@media all {
	body { font-size: 90%; }
	h1 { font-size: 180%; }
	h2 { font-size: 130%; }
	h3 { font-size: 115%; }
}



/* Special stuff **************************************************************
 *============================================================================*/

@media paged {
	#page-footer,
	#page-footer > * {
		page-break-before: avoid;
	}
}

@media all {
	p {
		text-align: justify;
	}
}

@media print {
	/* save horizontal space */
	.panel.padded:not(.sidebar, .multicolumn) > div {
		padding-left: 0;
		padding-right: 0;
	}
	/* TODO: fix .multicolumn, .sidebar */
}

.panel.userwarning > div {
	background-color: orange;
	border-radius: 1em;
	text-align: center;
	margin: 0 5em;
}

@media print {
	.panel.userwarning {
		display: none;
	}
}