/*** theme.css ***/

/*
	- these styles are only here to make the sample page more readable.
	- replace with your own in a theme.css file!
	- Make sure that your theme css file is linked into your markup *after* the other css links.
*/

@import url(http://fonts.googleapis.com/css?family=Nobile:400,400italic,700,700italic);
@import url(http://fonts.googleapis.com/css?family=Inconsolata:400,700);
@import url(https://fonts.googleapis.com/css?family=Kaushan+Script);

/** zero **/

body {
	font: .85em Nobile, sans-serif;
	color: dimgray; 
	margin-top: 0;
}

body > div {
	margin: 0 auto;
	max-width: 80em;
	overflow: hidden;
}

ul { padding-left: 0; list-style-type: none; }

a { display: block; width: 100%; height: 100%; }

a:link, a:visited {
	text-decoration: none;
	color: steelblue;
}

a:hover, a:focus, a:active { text-decoration: underline; }

/** sample page interface **/

main > div, main > div:target ~ aside { display: none; }

main > div:target { display: block; }

/** modulation **/

article,
header,
section,
footer { outline-offset: -1px; }

header,
section,
footer {
	padding: .1em .5em;
	outline: thin solid gainsboro;
}


header,
footer { background: whitesmoke; }

article,
aside,
footer,
section figcaption { padding: .5em; }

footer,
section figure { margin-bottom: .5em; }

footer,
section figcaption { text-align: center; }

article,
aside {
	border: thin solid whitesmoke;
}

article + article { border-top: none; }

footer {
	font-size: .85em;
	font-style: italic;
}

article > * { padding-bottom: .5em; }

article > * + * { margin-top: .5em; }

header[role=banner] {
	outline: none;
	border: 2px solid gainsboro;
	border-top: none;
}
header[role=banner] h1 {
	font-family: Kaushan Script;
	font-weight: normal;
}

/** navigation **/

nav h3 { margin-bottom: 0; }

nav ul { border: none; margin: 0; }

main nav ul { margin-top: .5em; }

body.nav > nav li { text-align: center; }

body > nav:last-child li + li { border-left: thin solid gainsboro; }

body.bottom.nav > nav {
	background: whitesmoke;
	border: thin solid gainsboro;
}

/** text elements **/

h4 { margin-bottom: 0; }

article > header h4 { margin-top: .7em; }

h3 a, h5 a { display: inline; }

h4 + pre { margin-top: 1em; }

p { line-height: 1.55em; }

section + .ducky p { margin-top: 1rem; }

ul li {
	text-align: center;
	padding: .5em;
	border: thin solid gainsboro;
	height: initial;
}

p code {
	font-style: normal;
	font-size: 1em;
	border: thin solid gainsboro; border-radius: .2em;
}

blockquote { margin-left: 0.5em; }

p a,
blockquote a { display: inline; }

/* code */

pre, code {
	background-color: whitesmoke;
}

pre, header code {
	border-radius: .2em;
}

pre {
	line-height: 1.35em;
	-moz-tab-size: 2;
	-o-tab-size: 2;
	tab-size: 2;
	white-space: pre-wrap;
	padding: .5em;
	border: thin solid lightgray;
	display: inline-block; /* check this */
	margin-top: 0;
	width: 100%;
}

code { padding: .15em; }

pre code { padding: 0; }

header code {
	font-style: normal;
	background-color: white;
	border: thin solid gainsboro;
}

p code {
	font-size: 1.1em;
	padding: .2em .25em .1em;
	position: relative;
	top: -.1em;
}

.header header { text-align: center; }

main > div > p, header p { font-size: .85em; font-style: italic; color: gray; }

/* truncate */

.truncate { min-width: 0; }

.truncate > *:first-child, .truncate > *:first-child * { white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; }

/** row and wrap **/

.row,
.wrap,
.start,
.end,
.wrap > * { outline: thin solid gainsboro; }

.row > * + * { border-left: thin solid gainsboro; }

.row > *,
.wrap > * {
	text-align: center;
	padding: .5em;
}

.start, .end { background: gainsboro; }
	
article.wrap { outline: none; }

.start > li, .end > li {
	background-color: whitesmoke;
	-webkit-flex-basis: calc(100% / 7); flex-basis: calc(100% / 7);
}

.end > li:last-child { -webkit-flex-basis: 2.5rem; flex-basis: 2.5rem; }

/** navigation **/

.universal > nav span {
	font-size: .85em;
	text-align: center;
	margin: .5em;
}

.universal > nav span + span { border-left: none; }

/** specifics **/

.one img { -webkit-align-self: center; align-self: center; }

.wrap .ducky { outline: none; }

#explanation a { display: inline; }

#wrap ul.wrap > * { -webkit-flex-basis: 10em; flex-basis: 10em; }

/* row-grid */

#row-grid .row li:nth-child(n) {
	text-indent: 150%; white-space: nowrap; overflow: hidden;
	background: center no-repeat; background-size: contain;
	border: thin solid gainsboro;
	height: 5rem;
}

#row-grid .row li:first-child,
#row-grid .row li:nth-child(5) { background-image: url('http://sessile.net/images/ducky_th.png'); }

#row-grid .row li:nth-child(2),
#row-grid .row li:nth-child(6) { background-image: url('http://sessile.net/images/ducky-red_th.png'); }

#row-grid .row li:nth-child(3) { background-image: url('http://sessile.net/images/ducky-green_th.png'); }

#row-grid .row li:nth-child(4) { background-image: url('http://sessile.net/images/ducky-blue_th.png'); }

/* sotto-voce */

#sotto-voce {
	font-style: italic;
	color: darkgray;
}

#sotto-voce::before { content: "\2039\00a0"; }
#sotto-voce::after { content: "\00a0\203a"; }

/* query me this */

@media screen and (min-width: 40em) {

	body { font-size: .925em; }

	.fixed main > aside,
	.fixed main > div:target { padding-top: 2em; }

	/* modulation */

	article { padding: .5em 0; outline: none; border: none; margin: 0; }
	
	article + article { border-top: thin solid whitesmoke; }

	article > * + * { margin-top: 0; }
	
	section + section { margin-top: 0; }
	
	blockquote { margin-top: .5em; }

	header[role=banner] {
		border-bottom: none;
	}
	
	/* navigation */

	body.fixed > nav:first-child + div {
		margin-top: 3.5em;
		margin-bottom: 0m;
	}
		
	.universal > nav li + li,
	.global > nav li + li { border-left: thin solid gainsboro; }
	
	/* row and wrap */
	
	.row:not(.reverse):not(.persistent) > li:nth-child(n) { -webkit-flex-basis: auto; flex-basis: auto; }

	.start > li, .end > li {
		-webkit-flex-basis: auto; flex-basis: auto;
	}
	
	.split:not(.header) { padding-top: 1em; }

	.split.header > *:first-child {
		border-bottom: thin solid whitesmoke;
		margin-bottom: 1em;
	}
	
	.split.four { font-size: .85em; }
	
	.split.five { font-size: .75em; }
	
	/* specifics */
	
	.ducky {
		font-size: 0;
		background: url('http://sessile.net/images/ducky.png') center no-repeat; background-size: contain; background-clip: content-box;
		margin: .5rem 0;
		min-height: 5rem;
	}
	
	* + .ducky { border-left: thin solid whitesmoke; }
	
	#wrap ul.wrap:not(.persistent) > * { -webkit-flex-basis: auto; flex-basis: auto; }
	
	#row-grid .row li:nth-child(n) {
		text-indent: 0;
		background-image: none;
		height: auto;
	}
	
	#defined-row .row li:nth-child(n), #defined-wrap .row li:nth-child(n) { -webkit-flex-basis: auto; flex-basis: auto; } /* check this! */

	#duckies section {
		text-align: center;
		text-indent: 200%; white-space: nowrap; overflow: hidden;
		background: url('http://sessile.net/images/ducky_th.png') center center no-repeat; background-size: contain;
		outline: none;
		height: 5rem;
	}

}

@media screen and (min-width: 60em) {

	body { font-size: 1em; }
	
	main nav nav {
		padding: 0 .5em;
	}

	aside {
		padding: 0;
		border: none;
	}

	aside .wrap { display: block; }
	
	.row:not(.wide) > *,
	.wrap:not(.wide) > * { text-align: left; flex-basis: 100%; } /* no -webkit- here, breaks in Safari - of course. */
	
	.row > * + * { border-left: none; }
	
	#wrap ul.wrap:not(.wide) > * { -webkit-flex-basis: auto; flex-basis: auto; }
	
}