@import "http://fonts.googleapis.com/css?family=Expletus+Sans",
		"reset",
		"var",
		"compass/typography/vertical_rhythm",
		"compass/css3/images",
		"compass/css3/border-radius",
		"compass/css3/box-shadow",
		"compass/css3/transition",
		"compass/utilities/general/clearfix";
		
@include establish-baseline;

::selection{
	background: darken(saturate(adjust-hue($page-background, 90deg), 100%), 20%);
	text-shadow: none !important;
	color:#FFF !important;
}

body{
	background:$page-background;
	@include body-text;
}

#container{
	width: $page-width;
	margin:20px auto;
	background: $content-background;
	color: $foreground;
}

#nameplate{
	@include adjust-font-size-to(60px);
	margin-bottom:25px;
	padding-bottom:5px;
	border-bottom:5px solid $foreground;
	@include box-shadow(0 1px 0 #FFF);
	font-family:$headingfonts;
}

#content{
	a{
		color: darken($foreground, 20%);
		text-decoration:none;
		background: darken($page-background, 15%);
		padding:3px;
		@include border-radius(3px);
		&:hover{
			background: desaturate(darken($page-background, 25%), 10%);
			text-shadow: 0 1px 0 rgba(255,255,255,.65);
		};
	}
	p, ul, ol, header{
		@include margin-trailer;
	}
	h1, h2, h3, h4, h5, h6{
		font-weight:bold;
		@include margin-trailer(.5);
	}
	h2{
		@include adjust-font-size-to(20px);
	}
	code{
		background: darken($page-background, 10%);
		padding:3px;
		margin:-4px 0;
		border: 1px solid darken($page-background, 15%);
		@include border-radius(3px);
		@include box-inset;
		font-family:Menlo, monospace;
		@include adjust-font-size-to(13px);
	}
	.codeblock{
		@extend code;
		padding: 10px;
		display:block;
		code{
			margin:0;
			padding:0;
			@include box-shadow(none);
			@include border-radius(0);
			border:none;
			display:block;
		}
		&.shell code::before{
			content: "$ ";
			color:lighten($foreground, 10%);
		}
	}
}

.three-up{
	$pad: 10px;
	$width: $page-width + $pad;
	background: $foreground;
	margin:$base-line-height #{-$pad};
	padding:$pad;
	@include border-radius(5px);
	@include box-shadow(0 1px 0 0 #FFF, 0 2px 4px rgba(0,0,0,.35) inset);

	figure{
		$border: 1px;
		border:$border solid darken($foreground, 10%);
		float:left;
		width: ($width / 3) - $pad - 2 * $border;
		margin-right: $pad;
		overflow:hidden;
		position:relative;
		@include transition(width, .25s, linear);
		@include box-inset($outset:rgba(255,255,255,.35));
		@include border-radius(3px);
		
		&.shrunk{
			width: ($width - 610px) / 2 - $pad - 3 * $border;
		}
		&.expanded{
			width:600px;
		}
		
		&:last-child{
			margin-right: 0;
			float:right; /* keeps the right margin from wiggling */
		}

		img{
			display:block;
		}
	}
	
	figcaption{
		position:absolute;
		bottom:0;
		left:0;
		right:0;
		background: rgba(0,0,0,.75);
		text-shadow:1px 1px 0 #000;
		padding:0 5px;
		color:#FFF;
		width:600px;
		@include adjust-font-size-to(13px);
	}
	
	@include clearfix;
}

#modelList{
	margin-left: 1.5em;
	li{
		@include margin-trailer(.5);
		list-style-type:disc;
	}
	.name{
		font-weight:bold;
	}
}

#contribList{
	$pad: 10px;
	$width: $page-width + $pad;
	background: $foreground;
	margin:$base-line-height #{-$pad};
	padding:#{2*$pad} $pad;
	@include border-radius(5px);
	@include box-shadow(0 1px 0 0 #FFF, 0 2px 4px rgba(0,0,0,.35) inset);
	@include clearfix;
	text-shadow:none;
	color:lighten($foreground, 80%);
	-webkit-font-smoothing: antialiased;
	
	li{
		$border: 1px;
		width: $page-width/2 - $pad * 3 - $border * 2;
		float:left;
		margin: 0 $pad/2 $pad $pad/2;
		padding: $pad;
		background: darken($foreground, 5%);
		border:$border solid darken($foreground, 10%);
		@include box-inset(rgba(0,0,0,.35), rgba(255,255,255,.15));
		@include clearfix;
		@include border-radius(3px);
	}
	.name, .description, .status{
		display:block;
	}
	.name{
		font-weight:bold;
	}
	.description{
		color:lighten($foreground, 40%);
	}
	.status{
		font-style:italic;
		@include adjust-font-size-to(13px);
		float:right;
	}
}

footer{
	margin-top: 25px;
	padding-top: 20px;
	border-top:5px solid $foreground;
	@include box-shadow(0 1px 0 0 #FFF inset);
	@include adjust-font-size-to(13px);
	color:lighten($foreground, 20%);
	a{
		text-decoration:none;
		color:darken($page-background, 40%);
		&:hover{
			color:darken($page-background, 80%);
		}
	}
}