/*****************************************************************************/
/* Common
/*****************************************************************************/

/* Global Reset */
*
{
	margin: 0;
	padding: 0;
}

/* Convenience */
.right
{
	float: right;
}
.left
{
	float: left;
}
.clear
{
	clear: both;
	width: 0;
	height: 0;
}

html, body
{
	height: 100%;
	color: rgba(255, 255, 255, 0.8);
}

body
{
	background-color: rgb(30, 30, 60);
	font: 18px "Helvetica Neue", Helvetica, sans-serif;
}

h1
{
	font-size: 150%;
}
h2
{
	font-size: 200%;
}
h3
{
	font-size: 160%;
}
h4
{
	font-size: 130%;
}
h5, h6
{
	font-size: 100%;
}
h6
{
	font-weight: normal;
	font-style: italic;
}
h1, h2, h3, h4, h5, h6
{
	/*font-family: "Avenir Next";*/
	line-height: 1.1em;
}

p, pre, ul, ol
{
	margin: 1em 0;
}

a
{
	color: rgba(255, 255, 255, 0.8);
	font-weight: bold;
}
a:hover
{
	color: rgb(30, 30, 80);
	background-color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
}
a:visited
{
	
}

ul, ol
{
	margin-left: 2em;
}

blockquote
{
	padding: 0 0 0 14px;
	border-left: 8px solid rgba(255, 255, 255, 0.8);
}

.pagelist
{
	list-style-type: none;
	margin-bottom: 2em;
	margin-left: 0;
}
.pagelist li
{
	/*line-height: 1.75em;*/
}
.pagelist span
{
	font-size: 80%;
	float: right;
	color: rgba(255, 255, 255, 0.6);
}

mark
{
	color: #ffff77;
	background: none;
}

/*****************************************************************************/
/* Site
/*****************************************************************************/

.site
{
	text-align: left;
	width: 960px;
	margin: auto;
	padding: 3em 0 2em 0;
	line-height: 1.5em;
}

header a, a.extra
{
	font-weight: bold;
	text-decoration: none;
}
header a.extra
{
	margin-left: 1em;
}
a.extra
{
	text-transform: lowercase;
}
.title
{
	display: inline-block;
}

.subtitle
{
	color: rgba(255, 255, 255, 0.5);
	font-size: 1.1em;
	font-weight: 300; /* Helvetica Neue Light */
}

header
{
	margin-bottom: 1em;
}

footer
{
	font-size: 80%;
	color: rgba(255, 255, 255, 0.6);
	/*border-top: 4px solid rgba(255, 255, 255, 0.8);*/
	margin-top: 2em;
	overflow: hidden;
}

header, footer, nav
{
	opacity: 0.6;
	transition-property: opacity;
	transition-duration: 1s;
}
header:hover, footer:hover, nav:hover
{
	opacity: 1.0;
}

pre
{
	/*white-space: normal;*/
	overflow: scroll;
}
code, .fake-code
{
	font-family: Menlo, Monaco, "Courier New", monospace;
	font-size: 85%;
}

/*****************************************************************************/
/* Homepage
/*****************************************************************************/

/* .social displays the background, but the a element is the actual link */
.social
{
	width: 180px;
	height: 180px;
	background-color: rgba(255, 255, 255, 0.2);
	float: left;
	margin-right: 12px;
	margin-bottom: 12px;
	display: block;
}
.social:hover
{
	background-color: rgba(255, 255, 255, 0.4);
}
.social a
{
	width: 100%;
	height: 100%;
	display: block;
	text-align: center;
	text-decoration: none;
	line-height: 100%;
}
.social a, social a:hover
{
	color: inherit;
	background-color: rgba(0, 0, 0, 0);
}
/* Smaller subtitle */
.social a span
{
	font-weight: normal;
	font-size: 75%;
}

/* Social icons */
.social a div
{
	width: 120px;
	height: 120px;
	display: block;
	opacity: 0.8;
	margin: 7px auto 7px auto;
}
#twitter
{
	background: url("/assets/home/icon-twitter.svg");
}
#email
{
	background: url("/assets/home/icon-email.svg");
}
#github
{
	background: url("/assets/home/icon-github.svg");
}
#linkedin
{
	background: url("/assets/home/icon-linkedin.svg");
}

/*****************************************************************************/
/* Smaller screens
/*****************************************************************************/

@media only screen and (max-width: 1066px)
{

.site
{
	width: 90%;
	padding: 1em 0;
}

body
{
	-webkit-text-size-adjust: none; /* for iOS 4 and under */
}

img, video, iframe
{
	max-width: 100%;
	height: auto;
}

.mobile-hide
{
	display: none;
}

}

@media only screen and (max-width: 568px)
{

.title
{
	display: block;
}

header h1
{
	margin: 0 0 0.5em 0;
	padding: 0;
}

header a.extra
{
	margin: 0 1em 0 0;
}

.pagelist span
{
	float: none;
	display: block;
}
.social
{
	width: 130px;
	height: 130px;
}
/* not sure why the backgrounds can't be resized with .social a div */
#twitter, #email, #github, #linkedin
{
	width: 70px;
	height: 70px;
	background-size: 70px 70px;
}

}