/* Copyright (C) 2013 Reece H. Dunn
 *
 * License: [CC-BY 3.0](http://creativecommons.org/licenses/by/3.0/)
 */

/* minimalistic styling for HTML content */

html
{
	overflow-y: scroll;
	margin: 0 auto;
	max-width: 800px;
}

body
{
	font-family: sans-serif;
	font-size: 14px;
	margin: 0;
}

*:first-child
{
	margin-top: 0;
}

a
{
	color: black;
	text-decoration: none;
	border-bottom: 1px solid blue;
}

a:hover
{
	color: blue;
}

th,
td
{
	vertical-align: top;
}

pre > code
{
	display: block;
	margin-left: 2em;
}

/* sub/sup should not affect the height of the text line. */

sub,
sup
{
	font-size: 70%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup
{
	top: -0.5em;
}

sub
{
	bottom: -0.25em;
}

/* headings */

h1
{
	font-size: 200%;
}

h2,
section > h1
{
	font-size: 150%;
}

h3,
section > h2,
section > section > h1
{
	font-size: 120%;
}

/* page layout */

*[role=banner]
{
	background-color: #02A;
	color: white;
	font-family: serif;
	font-size: 2em;
	font-weight: bold;
	padding: 0.35em 0.5em 0.5em 0.5em;
	text-shadow: #EEE 1px 1px 1px;
}

*[role=navigation]
{
	padding: 0.65em 1em;
	border-bottom: 1px solid #02A;
}

*[role=main]
{
	margin: 1em;
}

*[role=main] > h1,
*[role=main] > div > h1
{
	border-bottom: 2px solid #EEE;
	font-family: serif;
	margin-top: 0;
}

footer
{
	border-top: 1px solid #EEE;
	padding-top: 1em;
	margin: 1em;
	clear: both;
}

.screenshot
{
	float: right;
	padding-left: 1em;
}

.about
{
	margin-top: -1em;
	font-style: italic;
}

/* buttons */

.button
{
	margin-top: 0.65em;
	margin-left: 0.65em;
	float: right;
}

.button a
{
	padding: 0.25em 0.5em;
	font-weight: bold;
	border-radius: 0.25em;
}

body > .button
{
	margin-right: 1em;
	margin-left: -0.5em;
}

.button a,
.button:hover a,
.button.blue a,
.button.blue:hover a
{
	background-color: #02A;
	border-top:    1px solid #008;
	border-left:   1px solid #008;
	border-bottom: 1px solid #88F;
	border-right:  1px solid #88F;
	color: white;
}

.button.red a,
.button.red:hover a
{
	background-color: #F00;
	border-top:    1px solid #800;
	border-left:   1px solid #800;
	border-bottom: 1px solid #F88;
	border-right:  1px solid #F88;
	color: white;
}

.button.image,
.button.image a
{
	background-color: white;
	border: 0;
	margin-top: 0;
	padding: 0;
}

/* read more links */

.more
{
	text-align: right;
}

.more:before
{
	content: '\BB';
}

.more a
{
	color: navy;
	font-weight: bold;
	font-variant: small-caps;
	border: 0;
}

.more a:hover
{
	border-bottom: 1px solid blue;
}

/* breadcrumbs */

.breadcrumbs > ol
{
	list-style: none;
	margin: 0;
	padding: 0;
}

.breadcrumbs > ol > li
{
	display: inline;
}

.breadcrumbs > ol > li:before
{
	border-left:  0.25em solid white;
	border-right: 0.25em solid white;
	content: '\BB';
}

.breadcrumbs > ol > li:first-child:before
{
	border: 0;
	content: ' ';
}

.breadcrumbs > ol > li > span
{
	color: #080;
	font-weight: bold;
}

/* tables */

table.info,
table.data
{
	width: 100%;
	margin-bottom: 1em;
	border-spacing: 0;
	border-collapse: collapse;
}

table.info th,
table.data th
{
	text-align: left;
}

table.info
{
	border-left: 5px solid #77B5FE; /* sky blue */
	background-color: #87CEFA; /* light sky blue */
}

table.info th,
table.info td
{
	border-bottom: 1px solid #77B5FE; /* sky blue */
	padding: 0.5em;
}

table.info td
{
	padding-left: 0;
}

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

table.data th
{
	border-bottom: 1px solid #CCC;
}

table.data td
{
	border-bottom: 1px solid #EEE;
}

table.info tr:last-child th,
table.info tr:last-child td,
table.data tr:last-child td
{
	border-bottom: none;
}

table.info td ul
{
	list-style: none;
	margin: 0;
	padding: 0;
}

/* blog posts */

p.post-date
{
	float: right;
	margin-top: -1em;
}

ul.posts
{
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.posts li
{
	margin-bottom: 0.25em;
}

ul.posts span
{
	font-family: monospace;
	color: #222;
}

ul.posts span:after
{
	border-left:  0.5em solid white;
	border-right: 0.4em solid white;
	content: '\2014';
}

/* column layouts */

ol.columns2,
ul.columns2,
ol.columns3,
ul.columns3
{
	list-style: none;
	margin: 0;
	padding: 0;
}

.columns2.flex,
.columns2.flex
{
	-moz-column-count: 2;
	-webkit-column-count: 2;
}

.columns3.flex,
.columns3.flex
{
	-moz-column-count: 3;
	-webkit-column-count: 3;
}

/* implementation status */

.na,
.inprogress,
.success,
.failure
{
	font-weight: bold;
	text-align: center;
}

.na         { background-color: #e0eeee; color: black; }
.inprogress { background-color: #ffe544; color: black; }
.success    { background-color: #caff70; color: black; }
.failure    { background-color: #ff2020; color: white; }

/* percentage bars */

div.percentage-bar
{
	width: 100%;
	border: 1px solid #f0f0f0;
	background-color: #f8f8f8;
}

div.percentage-bar,
div.percentage-bar div
{
	border-radius: 0.25em;
	text-align: center;
}

div.percentage-bar div.inprogress
{
	border: 1px solid #ddc514;
}

div.percentage-bar div.success
{
	border: 1px solid #8abf20;
}

div.percentage-bar div.failure
{
	border: 1px solid #dd0000;
}