/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */
	html {
		height: 100%;
	}

	body {
		height: 100%;
		color: #3A3A3A;

		background-color: #f0faf0;
		background: -webkit-linear-gradient(top, #f8fff8, #e8f8e8);
		background: -moz-linear-gradient(bottom, #f8fff8, #e8f8e8);
		background: linear-gradient(to bottom, #f8fff8, #e8f8e8);
		background-attachment: fixed;

		font-size: 16px;
		line-height: 1.5em;
	}

	#valign-table {
		display: table;
		width: 100%;
		height: 100%;
	}

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

	.container {
		margin: 3em auto;
	}

	a {
		color: inherit;
		text-decoration: none;
		background-color: rgb(225, 241, 212);
		background-color: rgba(142,182,50,0.1);
	}
	
	a:hover {
		background-color: inherit;
		border-bottom: inherit;
		color: #F1A400;
	}

	.dot {
		width: 9px;
		height: 9px;
		display: inline-block;
		margin-left: 5px;
    vertical-align: bottom;
		margin-bottom: 5px;
		border-radius: 50%;
		background-color: #8EB632;
	}

/* #Page Styles
================================================== */
	.header {
		font-family: "Atilla", Helvetica, sans-serif;
		font-weight: bold;		
	}

	.header h1 {
		text-indent: 5px;
		color: inherit;
		font: inherit;
		font-size: 60px;
		line-height: 62px;
	}

	.header hr {
		height: 4px;
		background-color: #8EB632;
		border: none;
		margin: 1.5em 0px 1.5em 0px;
	}

	.header .tagline {
		font-size: 20px;
		line-height: 30px;
		position: absolute;
		top: 3px;
		right: 10px;
		text-align: right;
		text-transform: uppercase;
		display: block;
	}

	h2 {
		font-size: inherit;
		font-family: "Helvetica Neue", Helvetica, sans-serif;
		font-weight: 500;
		line-height: inherit;
		margin-bottom: 1em;
		margin-top: 1em;
	}

	ul {
		padding-left: 0;
		list-style-position: outside;
		margin-bottom: 0em;
	}

	ul.elsewhere {
		list-style-type: inherit;
	}
	
	li {
		margin-bottom: 0.5em;
		line-height: 1.5em;
	}

	p {
		line-height: 1.5em;
		margin-bottom: 1em;
	}

	.essays li {
		clear: both;
	}

	.essays .topic {
		width: 90px;
		display: inline-block;
		font-family: "Helvetica Neue", Helvetica, sans-serif;
		font-weight: 500;
		float: left;
		height: 2em;
		color: #666;
	}

	.below {
		position: absolute;
		top:34.5em;
		left:0;
	}


/* #Media Queries
================================================== */

	@media only screen and (min-width: 1020px) {
		.container {
			height: 55em;
		}
	}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 1019px) {
		.below {
			position: inherit;
			top: inherit;
		}
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		.container {
			margin-top: 2em;
			margin-bottom: 2em
		}

		.header h1 {
			font-size: 36px;
			line-height: 38px;
			text-indent: 3px;
		}

		.header hr {
			height: 3px;
			margin-top: 0.5em;
			margin-bottom: 0.5em;
		}

		.header .tagline {
			font-size: 13px;
			line-height: 18px;
		}

		.dot {
			width: 8px;
			height: 8px;
			margin-left: 4px;
			margin-bottom: 3px;
		}
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		.container {
			margin-top: 1.5em;
			margin-bottom: 1.5em;
		}

		.header h1 {
			font-size: 32px;
			line-height: 34px;
			text-indent: 2px;
		}

		.header hr {
			height: 3px;
			margin-top: 0.5em;
			margin-bottom: 0.5em;
		}

		.header .tagline {
			font-size: 13px;
			line-height: 16px;
		}

		.essays .topic {
			float: inherit;
			margin-bottom: 1em;
			height: 1em;
		}

		.dot {
			width: 6px;
			height: 6px;
			margin-left: 3px;
			margin-bottom: 4px;
		}
    
  	ul.elsewhere {
  		list-style-type: none;
  	}
	}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

	@font-face {
	    font-family: 'Atilla';
	    src: url('../fonts/Atilla-Bold.ttf');
	    font-weight: bold;
	    font-style: normal; }