/*	Andrew Hedges, andrew@hedges.name
	Copyright (c) 2014. All Rights Reserved.
*/

html {
	background: black;
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
}

body {
    color: white;
	display: table;
    font: 200 20px/32px "Architects Daughter", "Helvetica Neue", sans-serif;
    height: 100%;
	margin: 0 auto;
    padding: 0;
    text-align: center;
    text-rendering: optimizeLegibility; /* ligatures, ftw */
    text-shadow: 0 1px 2px black;
    width: 768px;
    -webkit-font-smoothing: antialiased; /* fix for webkit rendering */
    -webkit-text-size-adjust: 100%;
}

@media screen and (max-width: 960px) {
	body { width: 80%; }
}

h1 { font-weight: 200; }
h1, h2, h3, h4 { color: white; }
h1 a, h2 a, h3 a, h4 a { font-weight: inherit; }
h1 { font-size: 46px; line-height: 46px; margin: 8px 0 23px 0; padding-bottom: 8px; }
h2 { font-size: 32px; }

/* fancy link underlining */
a, a:visited { color: rgba(255,255,255,0.75); text-decoration: none; outline: 0; }
a:hover, a:focus {
	background-image:     -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 84%, rgba(255,255,255,1) 84%, rgba(255,255,255,1) 88%, rgba(0,0,0,0.25) 88%, rgba(255,255,255,0) 96%, rgba(255,255,255,0) 100%);
	background-image:    -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 84%, rgba(255,255,255,1) 84%, rgba(255,255,255,1) 88%, rgba(0,0,0,0.25) 88%, rgba(255,255,255,0) 96%, rgba(255,255,255,0) 100%);
	background-image:      -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 84%, rgba(255,255,255,1) 84%, rgba(255,255,255,1) 88%, rgba(0,0,0,0.25) 88%, rgba(255,255,255,0) 96%, rgba(255,255,255,0) 100%);
	background-image:        -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255,255,255,0)), color-stop(0.84, rgba(255,255,255,0)), color-stop(0.84, rgba(255,255,255,1)), color-stop(0.88, rgba(255,255,255,1)), color-stop(0.88, rgba(0,0,0,0.25)), color-stop(0.96, rgba(255,255,255,0)), color-stop(1, rgba(255,255,255,0)));
	background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 84%, rgba(255,255,255,1) 84%, rgba(255,255,255,1) 88%, rgba(0,0,0,0.25) 88%, rgba(255,255,255,0) 96%, rgba(255,255,255,0) 100%);
	background-image:         linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 84%, rgba(255,255,255,1) 84%, rgba(255,255,255,1) 88%, rgba(0,0,0,0.25) 88%, rgba(255,255,255,0) 96%, rgba(255,255,255,0) 100%);
	color: white;
}
p a, p a:visited { line-height: inherit; }

h1 a, h1 a:visited, h1 a:hover, h1 a:focus {
	background-image: none;
	color: white;
}

hr {
   background: rgba(255,255,255,0.33);
   border: none;
   height: 1px;
   margin: 1em 0;
}

#main {
	display: table-cell;
	vertical-align: middle;
}

/* icons */
.icons {
	list-style: none;
	margin: 1em 0;
	padding: 0;
}

.icons li {
	display: inline-block;
	margin: 0 0.5em;
}
	.icons li a, .icons li a:hover, .icons li a:focus {
		background-image: none;
	}
	.icons li a img {
		        transform: rotate(0) scale(1.0) translateZ(0);
		-webkit-transform: rotate(0) scale(1.0) translateZ(0);
		        transition: transform 0.5s;
		-webkit-transition: -webkit-transform 0.5s;
	}
		.icons li a:hover img {
			        transform: rotate(360deg) scale(1.5) translateZ(0);
			-webkit-transform: rotate(360deg) scale(1.5) translateZ(0);
		}
	.icons li img {
		border: none;
		height: 16px;
		width: 16px;
	}

#main span {
	display: block;
	line-height: 32px;
	min-height: 32px;
	opacity: 0;
	-webkit-transition: opacity 1s;
	        transition: opacity 1s;
}
	#main span.fade-in {
		opacity: 1;
	}

#holiday a {
	margin-right: 0.2em;
}

/* background video */
video {
	height: auto;
	left: 0;
	min-height: 100%;
	min-width: 100%;
	position: fixed;
	top: 0;
	width: auto;
}
#bgel {
	background: no-repeat center center fixed;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
		 -o-background-size: cover;
			background-size: cover;
	height: auto;
	left: 0;
	min-height: 100%;
	min-width: 100%;
	opacity: 0;
	position: fixed;
	top: 0;
	width: auto;
	z-index: -1;
	-webkit-transition: opacity 5s;
	        transition: opacity 5s;
	-webkit-transform: translateZ(0);
	        transform: translateZ(0);
	-webkit-filter: grayscale(25%);
	        filter: grayscale(25%);
}
	#bgel.clouds {
		background-image: url(/-/img/clouds.jpg);
	}
	#bgel.underwater {
		background-image: url(/-/img/underwater.jpg);
	}
	#bgel.fade-in {
		opacity: 1;
	}