@highlightcolor: rgb(255,0,0);

@import 'tbs/variables'; // is actually a modified version of twitter bootstrap's vars

@import 'tbs/mixins';
@import 'tbs/reset';

@import 'tbs/scaffolding';
// @import 'tbs/grid';
// @import 'tbs/layouts'; // responsive container
// @import 'tbs/responsive'; // responsive grid

@import 'tbs/type';
// @import 'tbs/code';
// @import 'tbs/forms';
//@import 'tbs/tables';

//@import 'tbs/navs';
//@import 'tbs/navbar';


@media-wide-max: 940px;

@media-wide-min: 750px;
@media-medium-max: (@media-wide-min - 1px);

@media-medium-min: 500px;
@media-narrow-max: (@media-medium-min - 1px);

@size-pagehead-wide:  1000%;
@size-pagehead-medium: 800%;
@size-pagehead-narrow: 600%;

@size-articlehead-wide:   500%;
@size-articlehead-medium: 433%;
@size-articlehead-narrow: 300%;

// -- debug ----------------------------------------------------

// -- typography -----------------------------------------------

@mediumheadingcolor: #666;
@bigheadingcolor: #333;

h1, h2, h3, h4 {
	// tighten up heading spacing a bit
	letter-spacing: -0.05em;
	// links in headings should be the heading colour
	a { color: inherit !important; }
	// short line height
	line-height: 0.933;
}

// don't linebreak inside important phrases
.morsel {
	white-space: nowrap;
}

// "more" links fit on the end of paragraphs
a.morelink {
	display: inline;
	opacity: 0.75;
	&:after {
		//  \00a0 = non-breaking space, \00bb = right-pointing double angle quote mark
		content: '\00a0\00bb';
	}
}

ul.topiclist {
	padding: 0.25em 0;
	margin: 0;
	li {
		display: block;
		text-align: center;
		padding: 0.5em 0;
		margin: 0;
	}
}

a.topic {
	@topicheight: 1.5em;

	display: inline-block;

	height: @topicheight;
	line-height: @topicheight;
	padding: 0 (@topicheight / 2);

	.border-radius((@topicheight / 2));
	border: 2px solid rgba(0,0,0, 0.1);
	border-width: 0 2.5px;
	&:hover {
		border-color: @highlightcolor;
	}
}

.biglink a {
	display: block;
	text-align: center;
	font-weight: bold;
	font-size: 110%;
	margin: 1em 2em;
	padding: 0.5em 2em;
	text-decoration: none;
	.border-radius(0.5em);
	background: lighten(@highlight, 46%);
	transition: 0.33s;
	&:hover {
		background: lighten(@highlight, 40%);
		text-decoration: underline;
	}
}

.highlit {
	// #gradient > .horizontal(lighten(@highlight, 38%), lighten(@highlight, 48%));
	background-color: lighten(@highlight, 46%);
	display: block;
	margin-left: -2px;
	border-left: solid red 2px;
	padding-left: 5px;
}

.bigheading {
	// font-size: 600%;
	line-height: 1;
	letter-spacing: -0.05em;
	padding: 0.6em 0 0.3em;
	margin: 0;
	text-align: center;
	font-weight: bold;
	color: @bigheadingcolor;

	a { color: inherit; }

}

.pageheading {
	font-family: "HelveticaNeue-UltraLight", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 100;
	line-height: 1;
	margin: 0;
	padding: 0 0 0.6em;
	letter-spacing: 0;
	text-align: center;

	color: @bigheadingcolor;
}

.groupheading {
	text-align: left;
	font-weight: 900;
	color: #555;
	letter-spacing: 0.16em;
	line-height: 1.0;
	font-size: 75%;
	small {
		padding-left: 0.33em;
		font-size: inherit;
		color: #999;
	}
	text-transform: uppercase;
	padding: 0.4em 0 0.4em 0.6em;
}

.articleheading {
	font-size: 300%;
	line-height: 1;
	letter-spacing: -0.05em;
	padding: 0.6em 0 0.3em;
	margin: 0;
	text-align: left;
	font-weight: bold;
	color: @mediumheadingcolor;

	a { color: inherit; }
}

@monosizeadjust: 90%;
.mono {
	background: #eee;
	font-size: @monosizeadjust;
	font-family: @monoFontFamily;
}

@prepad: 0.66em;
pre {
	.mono();
	margin: @prepad -@prepad;
	padding: (@prepad * 2) @prepad;

	margin: @prepad -@prepad;
	padding: @prepad;
}

code {
	.mono();
	.border-radius(3px);
	margin: 0.1em;

	padding: 0.1em 0.2em;
}

pre code {
	background: inherit;
	margin: 0;
	padding: 0;
}

kbd {
	font-family: @sansFontFamily;
	font-size: @monosizeadjust;
	font-weight: normal;
	display: inline-block;
	padding: 0.05em 0.5em;
	margin: 0 1px;
	background: #ddd;
	.box-shadow(~"inset 0 -1px 1px #fff, inset 0 -1px 2px #fff, inset 0 -1px 2px #fff, inset 0 -1px 3px #fff");
	border: 1px solid #999;
	.border-radius(0.22em);
}

.codesample {
	.source h1, .output h1 {
		.highlit;
		.groupheading;

		// sort of grey out the highlit / groupheading colours
		background: #ddd;
		color: darken(@highlight, 5%);

		font-size: (@monosizeadjust * 0.8);
		margin: (-1/0.8 * @prepad);
	}
	.source h1 {
		margin-top: (1/0.8 * @prepad);
	}
}

.maincontent {
	table {
		text-align: center;
		margin: 1em auto;
		border-collapse: collapse;
		border: 3px double #ccc;
	}
	td, tr {
		padding: 0.33em 0.66em;
	}
	td {
		border: 1px solid #ccc;
	}
	aside {
		line-height: 1.5;
		position: relative;
		font-size: 90%;
		font-style: italic;
		padding: 1em 1em 1em 2.25em;
		margin: 1em 0;
		border: 1px solid lighten(@highlight, 30%);
		border-width: 1px 0;
		min-height: 2em;

		code, pre, i, em {
			font-style: normal;
		}
	}
	aside:before {
		content: 'i';
		font-family: serif;
		font-weight: bold;
		position: absolute;
		top: 1.125em;
		left: 0.25em;
		width: 1.5em;
		height: 1.5em;
		line-height: 1.5em;
		text-align: center;
		background: lighten(@highlight, 20%);
		.border-radius(50%);
		color: #fff;
	}
}

.image img {
	.border-radius(0.15em);
	.box-shadow(0 0.25em 1.5em #ddd);
}

// -- general layout -------------------------------------------

body {
	padding: 0 10px; // don't get any closer to the edge than 10px
}

.page {
	// the box within which the entire page content lives
	max-width: @media-wide-max;
	margin: 0 auto;
	line-height: 1.66;
}

li {
	line-height: 1.66;
}

pre {
	line-height: 1.33;
}

@media (min-width: @media-wide-min) {
	.page { font-size: 133%; }
}

@media (min-width: @media-medium-min) and (max-width: @media-medium-max) {
	.page { font-size: 115%; }
}

// -- index page -----------------------------------------------

.home.page {
	> section {
		// page-level sections
		padding: 2em 0;
	}

	> section > h1 {
		.highlit;
		.groupheading;
	}

	> section:first-of-type {
		padding-top: 1em;
	}

	> div.columns > section > h1 {
		.highlit;
		.groupheading;
	}

	section.promo {
		padding-top: 1em;
		padding-bottom: 0.5em;
		// promo parts are highlighted, and have smaller headings
		.highlit;
		h2 {
			.groupheading;
			padding-top: 0;
			padding-bottom: 0;
			margin-top: 0;
		}
		p {
			font-size: 85%;
			margin: 0 0 0.5em;
		}
	}
} // end of .home.page

@media (min-width: @media-wide-min) {
	.home.page > section.feature > * {
		padding-left: 15% !important;
		padding-right: 15% !important;
	}
	// big header on the main page
	.home.page > header { padding: 120px 0; }
}

@media (min-width: @media-medium-min) and (max-width: @media-medium-max) {
	.home.page > section.feature > * {
		padding-left: 7% !important;
		padding-right: 7% !important;
	}
	// big header on the main page
	.home.page > header { padding: 80px 0; }
}

// -- list page ------------------------------------------------
// as in, the list of projects or articles.

.list.page {
	> h1 {
		.pageheading;
		font-size: @size-pagehead-narrow;
	}
	h2.yearheading {
		.groupheading;
		.highlit;
	}
	article {
		padding: 2em 0;
	}
	// column setup for narrow screens
	.columns > section {
		padding-top: 0;
	}
}

// .list.page medium width setup
@media (min-width: @media-medium-min) {
	.list.page {
		// column setup for non-narrow screens
		.columns > section:first-of-type {
			// reset the narrow-screen padding
			padding-top: 0;
		}
		article.columns > h1 {
			text-align: right;
		}
	}
}

@media (min-width: @media-medium-min) and (max-width: @media-medium-max) {
	.list.page > h1 {
		font-size: @size-pagehead-medium;
	}
}

@media (min-width: @media-wide-min) {
	.list.page > h1 {
		font-size: @size-pagehead-wide;
	}
}

// -- article / project / content page -------------------------

.plain.page, .article.page, .project.page {
	article header h1 {
		.bigheading;
		padding-top: 0;
		font-size: @size-articlehead-narrow;
	}
	.metainfo > section > h1 {
		.highlit;
		.groupheading;
	}
} // end of .article.page

// plain pages don't have columns so they need a bit of top padding.
.plain.page article header h1 {
	padding-bottom: 1em;
}

@media (min-width: @media-medium-min) and (max-width: @media-medium-max) {
	.plain.page, .article.page, .project.page {
		article header h1 {
			font-size: @size-articlehead-medium;
		}
	}
}

@media (min-width: @media-wide-min) {
	.plain.page, .article.page, .project.page {
		article header h1 {
			font-size: @size-articlehead-wide;
		}
	}
}


// -- topics page ----------------------------------------------

.topics.page {
	> h1 {
		.pageheading;
		font-size: @size-pagehead-narrow;
	}

	> section {
		// page-level sections are a single topic
		padding: 2em 0;

		> h1 {
			// heading is the topic name
			.highlit;
			.groupheading;
		}
	}

	> section:first-of-type {
		// first topic doesn't need as much top padding
		padding-top: 1em;
	}

	// column setup for narrow screens
	.columns > section {
		padding-top: 0;
	}

} // end of .topics.page

// .topics.page medium width setup
@media (min-width: @media-medium-min) { .topics.page {
		// column setup for non-narrow screens

		.columns > section:first-of-type {
			// reset the narrow-screen padding
			padding-top: 0;
		}
		article.columns > h1 {
			text-align: right;
		}

}	}

@media (min-width: @media-medium-min) and (max-width: @media-medium-max) {
	.topics.page > h1 {
		font-size: @size-pagehead-medium;
}	}

@media (min-width: @media-wide-min) {
	.topics.page > h1 {
		font-size: @size-pagehead-wide;
}	}


// -- columns ------------------------------------

// mobile first: imagine these rules are in a "narrow" media section.

//// @media (max-width: @media-narrow-min) {
	section.promo h1 {
		padding-left: 0;
	}
	.columns > section {
		padding-top: 4em;
	}
//// }

@column-gap: 5%;

// now the wider verison..

@media (min-width: @media-medium-min) {

	.columns {
		padding-top: 2em;
		.clearfix;

		> section, > .column {
			// a section inside a .columns is automatically a column, or you can class something as a column
			padding-top: 0;
			float: left;
			margin-left: @column-gap; // standard column gap
		}
		// first column has no left margin
		> section:first-child, > .column:first-child { margin-left: 0; }


		// -- -- twocolumns version has two equal width columns
		&.twocolumns > section, &.twocolumns > .column { width: (((100 + @column-gap)/2) - @column-gap); }


		// - - - - fourcolumns version, four equal widths
		&.fourcolumns > section, &.fourcolumns > .column { width: (((100 + @column-gap)/4) - @column-gap); }


		// --- - thickthin version has left column thick, right column thin
		&.thickthin > section { width: (((100 + @column-gap)/4) - @column-gap); }
		&.thickthin > section:first-child { width: (((100 + @column-gap)/4*3) - @column-gap); }
		&.thickthin .metainfo {
			padding-top: 0;
			h1 { margin-top: 0; }
			> section {
				padding: 0 0 3em;
				font-size: 80%;
				// h1 { font-size: 125%; }
			}
		}

		// - -- - thinthickthin version has left and right columns thin, middle column thick
		&.thinthickthin > section { width: (((100 + @column-gap)/2) - @column-gap); }
		&.thinthickthin > section:first-child { width: (((100 + @column-gap)/4) - @column-gap); }
		&.thinthickthin > section:last-child { width: (((100 + @column-gap)/4) - @column-gap); }
	}
}


// -- page header ----------------------------------------------

.page > header {
	.clearfix;
	text-shadow:
		  -1px 0  2px white,
		   1px 0  2px white,
		   0   0  6px white,
		   0   0 12px white;
	transition: box-shadow 3s;
	display: table;
	width: 100%;
	padding: 20px 0;

	&:hover {
		box-shadow: inset 0 0 50px fade(@highlightcolor,10%), 0 0 50px fade(@highlightcolor,10%);
	}

	h1 {
		display: table-cell;
		vertical-align: middle;
		white-space: nowrap;
		.groupheading;
		float: left;
		margin: 0;
		padding-left: 0;
		word-spacing: 0.5em;

		@puncsize: 75%;
		.punc {
			color: red;
			background: white;
			font-size: @puncsize;
			text-align: center;
			border-radius: 50%;

			display: inline-block;
			vertical-align: middle;
			position: relative;
			top: -0.125em;

			width: 3.2em;
			height: 3.2em;
			line-height: 3.2em;

			margin: 0;

			box-shadow: 0 0 10px white, 0 0 10px white;
		}
		a {
			text-decoration: inherit;
			color: inherit;
		}
	}
	nav {
		display: table-cell;
		vertical-align: middle;
		text-align: right;
		padding: 0;
		margin: 0 0 0 1em;
	}
	nav li {
		display: inline-block;
		margin: 0;
		margin-left: 1em;
	}
}

@media (min-width: @media-medium-min) and (max-width: @media-medium-max) {
	.page > header { padding: 50px 0; }
}

@media (min-width: @media-wide-min) {
	.page > header { padding: 90px 0; }
}

// -- articles -------------------------------------------------

article {
	padding: 1em 0 1.5em;

	> header {
		padding: 0 0 1em;
	}
	> header > h1, > h1 {
		.articleheading;
	}
}

.page > article {
	// an article on a page of its own
	padding: 0 0 1.5em;
	header {
		padding: 0;
		margin-top: 0;
		h1 {
			font-size: 350%;
			padding: 0 0 0.1em;
			margin-top: 0;
		}
	}
	h2, h3, h4, h5, h6 {
		padding: 1em 0 0.2em;
	}
	h2 { color: #666;    font-size: 250%;    }
	h3 { color: #444;    font-size: 150%;    }
	h4 { color: #222;    font-size: inherit; }
	h5 { color: inherit; font-size: inherit; font-weight: normal; }
}

section > a.morelink {
	opacity: 1;
	display: block;
	font-weight: bold;
	padding: 1em 0;
}

// -- footer -------------------------------------------------

footer {
	.clearfix;
	border-top: 1px dashed fade(@highlightcolor, 50%);
	margin: 3em 0;

	// font-size: 90%;
	// line-height: 1.4;
	text-align: center;

	transition: 0.75s;

	div.columns {
		padding-top: 0;
	}

	.columns section {
		text-align: center;
		vertical-align: top;
		background: #fff;
		padding-top: 1em;
		margin-top: 0;
		h1 {
			margin: 0;
			padding: 0.75em 0 0.45em;
			font-size: inherit;
			font-weight: bold;
			text-align: inherit;
		}
		ul {
			line-height: inherit;
			margin: 0;
			padding: 0;
		}
		li {
			line-height: inherit;
			margin: 0;
			padding: 0;
			list-style-type: none;
		}
	}

	section.fineprint {
		font-size: 85%;
		margin: 1em 0;
		padding: 1.2em 0 0.66em;
		border-width: 1px 0;
	}

}

footer:hover {
	opacity: 1;
}

@media (min-width: @media-medium-min) {
	footer {
		opacity: 0.25;
		// border-top: none;
		.columns section {
			padding-top: 0;
			&:first-child { text-align: left }
			&:last-child  { text-align: right }
		}
	}
}