
@import "inc/html5reset";
@import "inc/mixins";


html.js {
	.jsDisabledFallback {
		display: none;
	}
}
html.no-js {
	body > nav ul {
		display: none;
	}
}


body {
	font-family: Ubuntu, sans-serif;
	font-size: 16px;
	color: #555;
	margin: 80px 30px;
}


body > nav {
	position: fixed;
	z-index: 1;
	width: 100%;
	left: 0;
	top: 0;
	font-size: 0.85em;
	background-color: rgb(241,241,241);
	border-bottom: 2px solid rgb(210,210,210);

	span.jsDisabledFallback {
		display: block;
		height: 30px;
		line-height: 30px;
		padding: 0 10px;
		color: #999;
	}
	a, a:active, a:visited {
		color: #555;
		cursor: pointer;
		text-decoration: none;
		opacity: 0.7;
		.transition( all 0.2s ease-in-out );
		
		display: block;
		height: 30px;
		line-height: 30px;
		padding: 0 10px;

		&:hover, &.hover {
			color: #e80;
			background-color: rgba(255,255,255,0.5);
			opacity: 1.0;
		}
	}
	.current a {
		background-color: rgba(255,255,255,0.5);
		opacity: 1.0;
	}
	img {
		width: 16px;
		height: 16px;
		vertical-align: bottom;
		padding: 0 6px 6px 0;
	}
	.crumb {
		float: left;
		border-right: 1px solid rgb(231,231,231);
		.hint {
			margin-left: 8px;
			font-style: italic;
			color: #999;
		}
		img.hint {
			width: 10px;
			height: 10px;
			vertical-align: baseline;
			padding: 0px;
		}
	}
	.view {
		float: right;
		border-left: 1px solid rgb(231,231,231);
	}
}


#content {
	max-width: 960px;
	margin: 0 auto;

	> header {
		display: none;
		padding-bottom: 10px;
		margin-bottom: 80px;
		border-bottom: 2px dashed #ddd;
	}
	> footer {
		display: none;
		padding-top: 10px;
		margin-top: 80px;
		border-top: 2px dashed #ddd;
	}
}


@import "inc/table";
@import "inc/extended";
@import "inc/tree";


body > footer {
	position: fixed;
	z-index: 1;
	width: 100%;
	left: 0;
	bottom: 0;
	padding: 10px 0;
	background-color: rgb(241,241,241);
	border-top: 2px solid rgb(210,210,210);
	
	color: #999;
	font-size: 0.85em;
	text-align: center;

	a, a:active, a:visited {
		color: #555;
		text-decoration: none;
		.transition( all 0.2s ease-in-out );

		&:hover {
			color: #e80;
		}
	}
}


#html5 {
	position: absolute;
	left: 6px;
	bottom: 6px;
	opacity: 0.4;
	.transition( all 0.2s ease-in-out );

	img {
		width: 20px;
		height: 20px;
	}
	&:hover {
		opacity: 0.8;
	}
}

