@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;
}

@-webkit-keyframes glow{
	0% {
		text-shadow: 0 0 3px rgba(255,255,255,0);
	}
	100% {
		text-shadow: 0 0 3px rgba(255,255,255,.5);
	}
}

body{
	background:$page-background;
	@include background(
		linear-gradient(top, desaturate(darken($page-background, 15%), 10%) 0, $page-background 250px)
	);
	@include body-text;
}

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

#nameplate{
	@include adjust-font-size-to(60px);
	font-family:$headingfonts;
	position:relative;
}

.installButton{
	height:30px;
	$buttoncolor:#EEE;
	$buttonbottom:darken($buttoncolor, 10%);
	$buttonfore:darken($buttoncolor, 80%);
	color:$buttonfore;
	text-decoration:none;
	font-size:25px;
	line-height:36px;
	font-family:$headingfonts;
	text-transform:uppercase;
	letter-spacing:2px;
	float:right;
	width:160px;
	@include border-radius(5px);
	@include box-shadow(0 1px 3px 0 rgba(0,0,0,.15));
	@include background(linear-gradient($buttoncolor, $buttonbottom));
	text-shadow: #FFF 0 1px 0;
	border:1px solid $buttoncolor;
	padding:5px 10px;
	position:absolute;
	top:10px;
	right:0;
	&::after{
		content: '\2b07';
		font-size:20px;
		line-height:20px;
		padding:7px 1px 3px 4px;
		width:25px;
		@include border-radius(15px);
		@include box-shadow(0 1px 0 0 #FFF, 0 1px 2px 0 rgba(0,0,0,.15) inset);
		background:darken($buttoncolor,20%);
		float:left;
		text-align:center;
		margin-right:10px;
		font-family:Helvetica, Arial, sans-serif;
	}
	&:hover{
		@include background(linear-gradient($buttoncolor, darken($buttonbottom, 5%)));
	}
	&:active{
		@include background(linear-gradient(darken($buttonbottom, 5%), $buttoncolor));
		@include box-shadow(0 1px 3px 0 rgba(0,0,0,.15), 0 0 16px 0 rgba(0,0,0,.15) inset);
		color:darken($buttonfore, 10%);
		&::after{
			background:darken($buttoncolor, 30%);
		}
	}
}

#content{
	a{
		color: darken($page-background, 60%);;
		border-bottom:1px solid darken($page-background, 20%);
		@include box-shadow(0 1px 0 0 #FFF);
		text-decoration:none;
		&:hover{
			color: darken($page-background, 60%);
			border-bottom:1px solid darken($page-background, 60%);
		}
	}
	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;
		@include margin-trailer;
		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%);
		}
	}
	.pname{
		color:darken($page-background, 60%);
	}
}

.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;
}

#whatIs{
	padding:10px;
	background:$foreground;
	margin-bottom:20px;
	line-height:30px;
	font-size:20px;
	@include box-inset(rgba(0,0,0,.35), #FFF);
	@include border-radius(5px);
	text-shadow: 0 -1px 0 #000;
	text-align:center;
	-webkit-font-smoothing: antialiased;
	color:lighten($foreground, 60%);
	:last-child{
		margin-bottom:0;
	}
	.w1{
		font-weight:bold;
	}
	.s1{
		color:lighten($foreground, 80%);
		display:block;
	}
	a{
		background:transparent;
		padding:0;
		color:lighten($accent, 20%);
		border-width:0;
		@include box-shadow(none);
		&:hover{
			background:transparent;
			color:lighten($accent, 20%);
		}
	}
}

#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 $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;
		&.dev{
			-webkit-animation-name: glow;
			-webkit-animation-duration: 1s;
			-webkit-animation-timing-function: ease;
			-webkit-animation-iteration-count: infinite;
			-webkit-animation-direction: alternate;
		}
		&.pla{
			opacity:.5;
		}
	}
	a{
		color:#CCC;
		border:none;
	}
}

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%);
		}
	}
}