* {
	margin: 0;
	padding: 0;
}

body {
	background: url('../img/subtle_grunge.png');
}

.wrapper {
	width: 960px;
	height: 100%;
	margin: 0 auto;
	background-color: #fff;
	padding: 10px;
}
a {
	text-decoration: none;
	color: #04859D;
}

a:hover {
	color: #015666;
}

.float-left {
	float: left;
	margin: 10px;
}

.clear:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}


/* NAVIGATION */

nav {
	margin: 0 auto;
	display: block;
	height: 40px;
	width: 850px;
	padding-top: 120px;
}

nav ul li {
	list-style: none;
	display: inline;
}

nav ul li a {
	font-family: 'Josefin Sans', arial, helvetica, sans-serif;
	font-weight: 500;
	font-size: 18px;
	text-decoration: none;
	padding: 40px 30px 30px 30px;
	color: #000;
}

nav ul li a:hover {
	color: #04859D;
}

.home {
	background: url('../img/yes-i-am-breathing-thumb.png') no-repeat;
	width: 100px;
	height: 100px;
	padding-top: 100px;
}

.about {
	background: url('../img/three-arrows-thumb.png') no-repeat;
	width: 100px;
	height: 100px;
	padding-top: 100px;
}

.writing {
	background: url('../img/hurdygurdy-thumb.png') no-repeat;
	width: 100px;
	height: 100px;
	padding-top: 100px;
}

.books {
	background: url('../img/turtle-ish-thumb.png') no-repeat;
	width: 100px;
	height: 100px;
	padding-top: 100px;
}

.excerpts {
	background: url('../img/flag-tree-thumb.png') no-repeat;
	width: 100px;
	height: 100px;
	padding-top: 100px;
}

.publishing {
	background: url('../img/triangle-thumb.png') no-repeat;
	width: 100px;
	height: 100px;
	padding-top: 100px;
}

.events {
	background: url('../img/note-tree-thumb.png') no-repeat;
	width: 100px;
	height: 100px;
	padding-top: 100px;
}

.main {
	padding-top: 25px;
}

.main p {
	padding-top: 50px;
}

.featured {
	float: left;
	width: 200px;
	height: 200px;
}

/* HOMEPAGE */

.smallestest {
	font-size: 100px;
}

.note-tree {
	margin: 10px;
}

.note-tree:hover {
	-webkit-animation-name: wiggle;
    -webkit-animation-duration: .4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
	animation-name: wiggle;
	animation-duration: .4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}

@-webkit-keyframes wiggle {
from {-webkit-transform: rotateZ(2deg);}
50% {-webkit-transform: rotateZ(-2deg);}
to {-webkit-transform: rotateZ(2deg);}
}
     
@keyframes wiggle {
from {transform: rotateZ(2deg);}
50% {transform: rotateZ(-2deg);}
to {transform: rotateZ(2deg);}
}
 
 
/* ABOUT */

.three-arrows {
	margin: 10px;
}

.three-arrows:hover {
	-webkit-animation-name: moveup;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
	animation-name: moveup;
	animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}

@-webkit-keyframes moveup {
50% {-webkit-transform: translate(0, 20px); }
}

@keyframes moveup {
50% {transform: translate(0, 20px); }
}

/* NEWS */

.breathing:hover {
    -webkit-animation: rotate 2s forwards;
    animation: rotate 2s forwards;
}

@-webkit-keyframes rotate {
100% { -webkit-transform: rotate(360deg); }
}
@keyframes rotate {
100% {transform: rotate(360deg);}
}

/* WRITING */

.hurdygurdy {
	background: url('../img/hurdygurdy.png') no-repeat;
	width: 200px;
	height: 200px;
	display: block;
	margin: 10px;
}

.hurdygurdy:hover {
	background: url('../img/hurdygurdy-blue.png') no-repeat;
	width: 200px;
	height: 200px;
}

/* BOOKS */

.los-angeles {
	border: 1px solid #000;
}

.one-third {
	width: 300px;
	float: left;
	padding: 10px;
}

.longer {
	height: 1400px;
}

.turtle-ish:hover {
	-webkit-animation-name: moveleft;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
	animation-name: moveleft;
	animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}

@-webkit-keyframes moveleft {
50% {-webkit-transform: translate(-20px, 0); }
}

@keyframes moveleft {
50% {transform: translate(-20px, 0); }
}

/* EXCERPTS */

.flag-tree {
	margin: 10px;
}

.sea-monkeys {
	padding-top: 150px;
}

.ouija-radio {
	padding-top: 50px;
}

.wreck-of-reality {
	padding-top: 50px;
}

.flag-tree:hover {
	-webkit-animation-name: skew;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
	animation-name: skew;
	animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}

@-webkit-keyframes skew {
50% {-webkit-transform: skewX(15deg); }
}

@keyframes skew {
50% {transform: skewX(15deg); }
}

/* PUBLISHING */

.triangle {
	margin: 10px;
}

.triangle:hover {
    -webkit-animation: turn 2s forwards;
    animation: turn 2s forwards;
}

@-webkit-keyframes turn {
100% { -webkit-transform: rotate(-15deg); }
}
@keyframes turn {
100% {transform: rotate(-15deg);}
}

/* FOOTER */

footer {
	margin-top: 20px;
	border-top: 1px solid #000;
	font-family: 'Josefin Sans', arial, helvetica, sans-serif;
} 
 
/* TYPOGRAPHY */

p {
	font-family: 'Josefin Sans', arial, helvetica, sans-serif;
	font-weight: 500;
	font-size: 18px;
	margin-top: 12px;
}

h1 {
	font-family: 'Oswald', arial, helvetica, sans-serif;
	font-size: 60px;
}

img {
	margin: 10px;
}