@import url(reset.css);
@import url(fonts.css);

/* Global
---------------------------------------- */
body {
	background:#181818 url(../images/denim.png) 50% 0;
	color:#FFF;
	font:12px/1 Tahoma, sans-serif;
	}
a {
	color:#45b4f1;
	text-decoration:none;
	}

/* Pages
---------------------------------------- */
.page-index,
.page-plain {
	padding:50px 0;
	}

/* Header
---------------------------------------- */
.header {
	position:relative;
	margin:0 auto 63px;
	max-width:480px;
	}
	.header .path {
		margin:0 0 45px;
		text-shadow:0 3px 0 #333;
		font:50px/1.3 'Bebas Neue', sans-serif;
		}
		.header .path p {
			display:table-cell;
			white-space:nowrap;
			}
			.header .path p span {
				display:none;
				}
			.header .path p:after {
				content:'\00A0\2022\00A0';
				text-shadow:0 3px 0 #111;
				color:#333;
				}
		.header .path h1 {
			display:table-cell;
			}
		.header .path a {
			color:#FFF;
			}
	.header .tagline {
		max-width:40em;
		line-height:1.5;
		font-size:20px;
		}
		.header .tagline code {
			padding:3px 5px;
			-webkit-border-radius:5px;
			-moz-border-radius:5px;
			border-radius:5px;
			background:#222;
			font:20px Consolas, monospace;
			}

/* Header Index
---------------------------------------- */
.page-index .header .path h1 {
	border-bottom:6px solid #333;
	}

/* Header Plain
---------------------------------------- */
.page-plain .header:before {
	position:absolute;
	top:-50px;
	right:0;
	left:0;
	height:20px;
	background:#000 url(../images/cubes-header.png) no-repeat;
	background-size:100% 100%;
	-webkit-box-shadow:0 0 35px rgba(0, 0, 0, 0.6);
	-moz-box-shadow:0 0 35px rgba(0, 0, 0, 0.6);
	box-shadow:0 0 35px rgba(0, 0, 0, 0.6);
	content:'';
	}
.mz-svg .page-plain .header:before {
	background:#000 url(../images/cubes-header.svg) no-repeat;
	}
.header .path p a {
	display:inline-block;
	border-bottom:6px solid #1FA5EE;
	}

/* Navigation
---------------------------------------- */
.navigation {
	margin:0 auto 48px;
	max-width:480px;
	font:50px/50px 'Bebas Neue', sans-serif;
	}
	.navigation ul {
		-webkit-border-radius:20px;
		-moz-border-radius:20px;
		border-radius:20px;
		background:#000 url(../images/cubes.png) no-repeat;
		-webkit-box-shadow:0 0 35px rgba(0, 0, 0, 0.6);
		-moz-box-shadow:0 0 35px rgba(0, 0, 0, 0.6);
		box-shadow:0 0 35px rgba(0, 0, 0, 0.6);
		}
	.mz-svg .navigation ul {
		background:#000 url(../images/cubes.svg) no-repeat;
		}
		.navigation li a {
			display:block;
			padding:14px 0 0;
			height:66px;
			color:#FFF;
			white-space:nowrap;
			text-indent:35px;
			text-shadow:0 3px 0 rgba(0, 0, 0, 0.2);
			}
		.navigation li:first-child a {
			-webkit-border-radius:20px 20px 0 0;
			-moz-border-radius:20px 20px 0 0;
			border-radius:20px 20px 0 0;
			}
		.navigation li:last-child a {
			-webkit-border-radius:0 0 20px 20px;
			-moz-border-radius:0 0 20px 20px;
			border-radius:0 0 20px 20px;
			}
		.navigation li a:hover,
		.navigation li a:focus {
			outline:none;
			background:#1FA5EE;
			}

/* Demos
---------------------------------------- */
.demos {
	margin:auto;
	max-width:480px;
	}
	.demos li {
		position:relative;
		padding:0 0 53px;
		}
		.demos li img {
			display:block;
			margin:0 0 30px;
			width:100%;
			border-bottom:6px solid #333;
			background:#000;
			-webkit-box-shadow:0 0 35px rgba(0, 0, 0, 0.6);
			-moz-box-shadow:0 0 35px rgba(0, 0, 0, 0.6);
			box-shadow:0 0 35px rgba(0, 0, 0, 0.6);
			}
		.demos li:hover img {
			border-color:#1FA5EE;
			}
	.demos .clear {
		margin:0;
		padding:0;
		}
	.demos h2 {
		text-align:center;
		text-shadow:0 3px 0 #333;
		font:30px/1 'Bebas Neue', sans-serif;
		}
	.demos p {
		position:absolute;
		top:10px;
		right:10px;
		padding:0 5px 0 8px;
		width:auto;
		height:0;
		border:solid 1px rgba(51, 51, 51, 0.5);
		border-width:9px 5px 13px 17px;
		-webkit-border-radius:6px;
		-moz-border-radius:6px;
		border-radius:6px;
		-webkit-border-image:url(../images/label.png) 9 5 13 17 repeat;
		-moz-border-image:url(../images/label.png) 9 5 13 17 repeat;
		-o-border-image:url(../images/label.png) 9 5 13 17 repeat;
		border-image:url(../images/label.png) 9 5 13 17 repeat;
		text-shadow:0 1px 2px #000;
		white-space:nowrap;
		word-spacing:4px;
		font:13px/1px Tahoma, sans-serif;
		}
	.demos a {
		color:#FFF;
		}
	.demos a:hover,
	.demos a:focus {
		outline:none;
		}

/* Footer
---------------------------------------- */
.footer a {
	display:block;
	overflow:hidden;
	margin:0 auto -10px;
	width:120px;
	height:50px;
	outline:none;
	background:url(../images/opera.png);
	text-indent:-9999px;
	}
.mz-svg .footer a {
	background:url(../images/opera.svg);
	}