/*
Theme Name: Vaughn Royko
Theme URI: http://vaughnroyko.com
Description: My website theme. What, you wanna steal it or something?
Version: 1.0
Author: Vaughn Royko
Author URI: http://vaughnroyko.com
Tags: me
*/

* {
	border: none;
	margin: 0;
	padding: 0;
}

::selection,
::-moz-selection {
	color: #fff;
	background: #00c3ff;
}

body {
	background: url(images/back.png);
	text-align: center;
	color: #303030;
	border-top: #00c3ff solid 2px;
	font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
	margin: 0 auto;
}

pre {
	background: #fff;
	text-align: left;
	padding: 10px;
	overflow: auto;
	border: 1px #ccc solid;
	margin-top: 15px;
	margin-bottom: 25px;
}

h1,
h2,
h3 {
	font-family: 'Racing Sans One', "Arial Black", "Arial Bold", Gadget, sans-serif;
	text-shadow: 1px 1px 0 white, -1px -1px 0 white, -1px 1px 0 white, 1px -1px 0 white, 2px 2px 2px rgba(0, 0, 0, 0.40);
}

h1 a,
h2 a,
h3 a {
	text-decoration: none;
}

h3 {
	margin-bottom: 10px;
	font-size: 22px;
}

a {
	color: #111;
}

ul {
	list-style: square outside;
	padding-left: 25px;
}

#wrapper {
	width: 1024px;
	text-align: left;
	padding-bottom: 75px;
	margin: 0 auto;
}

h1 {
	font-size: 50px;
	margin-bottom: 35px;
	margin-top: 15px;
}

h2 {
	font-size: 30px;
}

#head {
	float: right;
	text-align: right;
	margin-top: -60px;
}

#logo {
	float: left;
	margin-right: 5px;
}

header {
	width: 830px;
	float: left;
	font-size: 12px;
	text-transform: uppercase;
	margin-top: 10px;
	z-index: 100;
	position: relative;
}

header li {
	display: inline-block;
	line-height: 35px;
	margin: 0 5px;
}

header a {
	color: #fff;
	background-color: #00c3ff;
	text-decoration: none;
	padding: 5px 4px 4px;
}

header .twitch a {
	background-color: #6441a5;
}

.clr,
footer {
	clear: both;
}

#homeheader {
	border-bottom: 2px #ccc solid;
	height: 340px;
	padding-right: 10px;
}

#postlist img,
.wp-caption,
.gallery-item,
.blogpost .attachment-thumbnail {
	border: 2px #ccc solid;
	background: #fff;
	padding: 10px 6px;
}

#s,
textarea,
#commentform input {
	border: 2px #ccc solid;
}

#postlist img,
.blogpost .attachment-thumbnail {
	padding: 10px;
}

#postlist {
	margin-top: 30px;
}

#postlist a,
#postlist h3 {
	max-width: 300px;
}

.home h2 {
	margin-top: 25px;
}

#postlist div,
.gallery-item {
	float: left;
	margin-right: 25px;
	margin-bottom: 25px;
}

#postlist div {
	height: 290px;
}

article,
#comments-title {
	width: 1024px;
	text-align: center;
	margin: 0 auto;
}

article.comment {
	text-align: left;
}

blockquote p {
	border-left: 5px #00c3ff solid;
	padding: 0 25px;
}

.wp-caption {
	padding-bottom: 0;
	margin: 0 auto 15px;
}

.wp-caption-text,
#postlist p {
	text-transform: uppercase;
	font-weight: 900;
	font-size: 10px;
}

footer {
	font-size: 12px;
	text-align: center;
	margin: 0 auto;
}

#postlist img,
#logo {
	-webkit-transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-o-transition: opacity .25s ease-in-out;
	transition: opacity .25s ease-in-out;
}

a,
#submit,
#searchsubmit,
.comment-reply-link {
	-webkit-transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
}

#postlist img:hover,
#logo:hover,
.blogpost .attachment-thumbnail:hover {
	opacity: 0.75;
}

article p,
article h3,
article ul,
article h2,
.prettyprint,
#respond,
.columns,
article.comment {
	width: 600px !important;
	text-align: left !important;
	margin: 30px auto !important;
}

.prettyprint {
	background: #fff;
}

.wp-caption-text {
	margin: 5px 5px 8px !important;
}

a:hover {
	color: #00c3ff;
}

header a:hover,
#submit:hover,
#top:hover,
#searchsubmit:hover,
.comment-reply-link:hover {
	color: #fff;
	background-color: #303030;
}

#submit,
#searchsubmit,
.comment-reply-link {
	display: inline-block;
	font-size: 14px;
	font-weight: 900;
	text-transform: uppercase;
	line-height: 18px;
	color: #fff;
	background: #00c3ff;
	text-align: center;
	cursor: pointer;
	padding: 4px 10px;
	text-decoration: none;
	border: none !important;
}

.comment.depth-1 {
	background-color: rgba(0, 0, 0, 0.05);
	padding: 15px;
}

article.comment .prettyprint {
	width: 560px !important;
}

.depth-2 {
	padding-left: 20px;
	border-left: 2px #00c3ff solid;
}

.depth-3 {
	padding-left: 30px;
	border-left: 4px #00c3ff solid;
}

.depth-4 {
	padding-left: 40px;
	border-left: 6px #00c3ff solid;
}

#commentform input {
	margin-left: 5px;
}

.comment-notes,
.form-allowed-tags,
.comment-form-comment label {
	display: none;
}

.blogpost,
#comments-title {
	margin-bottom: 50px;
	clear: both;
}

.blogpost .attachment-thumbnail {
	float: right;
	margin-left: 25px;
	margin-bottom: 15px;
}

#top {
	position: fixed;
	bottom: 0;
	right: 15px;
	background: #00c3ff;
	display: block;
	color: #fff;
	cursor: pointer;
	padding: 5px;
	display: none;
}

.external a,
.resume a,
.contact a {
	padding-left: 18px;
	background-image: url(images/icons.png);
	background-repeat: no-repeat;
	background-position: 0 2px;
}

.resume a {
	background-position: 0 -62px;
}

.contact a {
	background-position: 0 -30px;
}

.email a {
	padding-left: 32px;
	background-image: url(images/icons.png);
	background-repeat: no-repeat;
	background-position: 0 -88px;
	height: 32px;
	display: block;
}

.column1,
.column2 {
	float: left;
	max-width: 275px;
}

.column1 {
	margin-right: 25px;
}

iframe {
	border: 1px solid #CCC;
}

p,
ul,
.meta,
#reply-title {
	margin-bottom: 15px;
	line-height: 150%;
}

.meun li:last-child,
#postlist div:nth-child(3n),
dl:nth-child(3n) {
	margin-right: 0;
}

p.date {
	font-size: 12px;
}

.menu {
	padding-left: 0;
}

.google-ad {
	margin: 40px auto;
	text-align: center;
}

.google-ad iframe {
	border: none;
}

@media screen and (max-width:1064px) {
	header {
		width: 610px;
	}

	#wrapper,
	article,
	#comments-title {
		width: 800px;
	}

	#head {
		height: 360px;
		width: auto;
		margin-top: -35px;
	}

	#homeheader {
		height: 325px;
	}

	h1 {
		font-size: 40px;
		margin-bottom: 15px;
		margin-top: 10px;
	}

	h2 {
		font-size: 20px;
	}

	#postlist div:nth-child(3n) {
		margin-right: 25px;
	}

	#postlist div:nth-child(2n) {
		margin-right: 0;
	}

	.gallery-item img {
		width: 230px;
		height: auto;
	}

	.gallery-item {
		margin-right: 15px;
		margin-bottom: 15px;
	}

	#postlist div {
		margin-left: 35px;
	}
}

@media screen and (max-width:840px) {
	body {
		font-size: 14px;
	}

	#postlist div {
		height: 260px;
		margin-right: 0;
		float: none;
		margin-left: 0;
	}

	#wrapper,
	article,
	header,
	iframe,
	textarea,
	#comments-title,
	article.comment {
		width: 300px !important;
	}

	article p,
	article h3,
	article ul,
	article h2,
	.prettyprint,
	#respond,
	.columns,
	blockquote {
		width: 300px !important;
		text-align: left !important;
		margin: 15px auto !important;
	}

	blockquote p {
		width: 250px !important;
	}

	.wp-caption,
	.gallery-item img,
	article img,
	#postlist img {
		width: 276px !important;
		height: auto;
	}

	#head {
		height: auto;
		width: 290px;
		margin-top: -25px;
		border-bottom: 2px #ccc solid;
		float: none;
	}

	#homeheader {
		height: auto;
		clear: both;
	}

	h1 {
		font-size: 30px;
		margin-bottom: 10px;
		margin-top: 10px;
	}

	h3 {
		font-size: 18px;
	}

	.gallery-item {
		float: none;
		margin: 0 0 15px;
	}
}