@include('normalize.css');

@font-face {
	font-family: 'BebasRegular';
	src: url('../fonts/BEBAS___-webfont.eot');
	src: local('BebasRegular'), url('../fonts/BEBAS___-webfont.woff') format('woff'), url('../fonts/BEBAS___-webfont.ttf') format('truetype'), url('../fonts/BEBAS___-webfont.svg#webfontnqJLEELI') format('svg');
	font-weight: normal;
	font-style: normal; }

body {
	font-family: BebasRegular, Verdana, sans-serif;
	color: #222;
	text-align: center;
	margin: 0; }

#header {
	position: absolute;
	top: 0;
	left: 0;
        width: 250px;
	text-align: left;
	margin: 10px; }

	#header h1 {
		cursor: pointer;
		font-family: BebasRegular, "Trebuchet MS", sans-serif;
		font-size: 60px;
		color: #f21825;
		margin: 0; }

	#header img { display: none; }

#container {
    position: relative;
    left: 250px;
	width: 775px;
	text-align: left;
	padding: 0;
	margin: 55px 20px; }

#posts { position: relative; }

#canvas {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 775px;
        height: 100%;
        background: #fff;
        opacity: 0.8;
        filter: alpha(opacity=80);
        z-index: 1;
        padding: 0;
        margin: 0; }

#navigation {
	padding: 0;
	margin: 30px 0; }

	#navigation ul {
		list-style: none;
		padding: 0;
		margin: 0; }

	#navigation li {
		display: inline;
		margin-right: 97px; }

		#navigation li.last { margin-right: 0; }

		#navigation li a {
			font-family: BebasRegular, Arial, sans-serif;
			letter-spacing: 3px;
			cursor: pointer;
			color: #aaa;
			text-decoration: none; }

			#navigation li a:hover { color: #f21825; }
			
			#navigation li a.selected { color: #f21825; } 

#content a {
	font-family: Arial, sans-serif;
	font-size: 14px;
	text-decoration: none;
	color: #f21825; }
	
	#content p a:hover { border-bottom: 1px solid #f21825; }

#content h1, #content h1 a {
	font-weight: normal;
	font-size: 30px;
	word-spacing: 4px;
	color: #222;
	margin: 0 0 20px 0; }

#content h2 {
    font-weight: normal;
	letter-spacing: 1px;
	font-size: 28px;
	margin: 0 0 10px 0; }
	
#content h3 {
	font-weight: normal;
	font-size: 24px; }

#content h1 a:hover { color: #414141; }

#content p {
	line-height: 1.5em;
	font-family: Arial, Verdana;
	font-size: 14px;
	margin: 0 0 10px 0; }
	
#search {
	position: relative;
	padding: 0;
	margin: 0; }
	
	#search input {
		width: 765px;
		height: 33px;
                line-height: 33px;
		background: url('../images/search.png') right center no-repeat;
		color: #ddd;
		padding: 0 5px !important;
		margin: 0; }
		
#results {
	width: 777px;
	position: absolute;
	z-index: 2;
	padding: 0;
	margin: 0; }
	
	#results div.error {
		width: 775px;
		background: #f2f2f2;
		border: 1px solid #ddd;
		border-top: none;
		font-family: Tahoma, Verdana, Arial, sans-serif;
		font-size: 1px;
		color: #555;
                padding: 0;
		margin: 0; }
		
		#results div.error p {
			padding: 5px;
			margin: 0; }
	
	#results ul {
		list-style: none;
		border-left: 1px solid #ddd;
		border-right: 1px solid #ddd;
		padding: 0;
		margin: 0; }
		
	#results li {
		width: 775px;
		background: #f2f2f2;
		border-bottom: 1px solid #ddd;
		padding: 0;
		margin: 0; }
		
		#results li a {
			display: block;
			width: 765px;
			height: 70px;
			color: #555;
			padding: 5px;
			margin: 0; }
			
			#results li a:hover { background: #e5e5e5; }
			
		#results li h1 {
			font-family: Tahoma, Verdana, Arial, sans-serif;
			font-size: 12px;
			text-transform: uppercase;
			padding: 0;
			margin: 10px 0; }
			
		#results li p {
			font-family: Tahoma, Verdana, Arial, sans-serif;
			font-style: italic;
			font-size: 12px;
			color: #888;
			padding: 0;
			margin: 0; }
		
	#results img.icon {
		float: left;
		width: 100px;
		height: 60px;
		overflow: hidden;
		border: 5px solid #fff;
		margin-right: 10px; }

.post { 
	position: relative;
	min-height: 140px;
	margin: 20px 0 0 0; }
	
	.post img {
		background: #f5f5f5;
		border: 1px solid #ddd;
		padding: 3px;
		margin: 3px 10px 10px 0; }
		
	#content .post h1 a { font-family: BebasRegular, Arial, sans-serif; }

.post-icon {
	float: left; }
	
.tag { 
	position: absolute;
	bottom: 0;
	right: 0; }
	
	#content .tag p { 
		font-family: Arial, sans-serif;
		font-size: 12px;
		color: #bfbfbf;
		padding: 0;
		margin: 0; }
		
	#content .tag a {
		font-family: Arial, sans-serif;
		font-size: 12px;
		color: #bfbfbf; }
	
		#content .tag a:hover { 
			border: none;
			color: #b3b3b3; }

.date {
	float: right;
	background: #f21825;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	padding: 0;
	margin: 12px 0; }

#content .date p {
	font-size: 10px;
	color: #fff;
	padding: 4px;
	margin: 0; }
	
.project {
	position: relative;
	min-height: 140px;
	border-top: 1px solid #ddd;
	padding: 20px 0;
	margin: 20px; }

	.project img {
		clear: left;
		float: left;
		width: 253px;
		height: 140px;
		border: 1px solid #ddd;
		margin: 0 10px 10px 0; }
	
	#content .project p {
		padding: 0;
		margin: 0; }
	
.project_link {
	position: absolute;
	bottom: 10px;
	right: 10px;
	text-align: right; }
	
	#content .project_link h1 {
		bottom: 0;
		left: 0;
		background: #fff;
		font-family: Arial, sans-serif;
		font-size: 30px;
		margin-bottom: 2px; }
	
	.project_link a {
		font-family: Arial;
		font-weight: bold; }
		
	#content .project_link p {
		color: #bfbfbf;
		text-align: right; }
		
.g-plusone { display: inline; }

#tweet-it {
	background: #f2f2f2;
	padding: 0; }

	#tweet-it a {
		display: block;
		width: 595px;
		height: 140px;
		background: url('../images/birdie.png') top left no-repeat;
		line-height: 140px;
		font-family: Arial;
		font-size: 24px;
		font-weight: normal;
		color: #888;
		padding-left: 180px; }

		#tweet-it a:hover { background: #e0ebef url('../images/birdie.png') top left no-repeat; }

	#tweet-it p {
		line-height: 140px;
		font-size: 24px;
		color: #888;
		padding: 0;
		margin: 0; }

#share {
	width: 775px;
	height: 100px;
	padding: 10px 0;
	margin: 10px 0; }

	#share ul {
		list-style: none;
		padding: 10px 0;
		margin: 0; }

	#share li {
		float: left;
		width: 48px;
		height: 48px;
		margin: 0 40px; }

		#share li img { border: none; }
		
#comments {
	padding: 10px 0;
	margin: 10px 0; }

	#comments p {
		font-family: Arial, Verdana;
		font-size: 12px; }

.comment {
	height: 90px;
	padding: 0;
	margin: 15px 0; }

	.comment img {
		float: left;
		width: 80px;
		height: 80px;
		border: 1px solid #ddd;
		padding: 2px;
		margin: 0 10px 10px 0; }

		#content .comment h1 {
			letter-spacing: inherit;
			font-family: Arial;
			font-size: 14px;
			font-weight: bold;
			margin: 0 0 5px 0; }

		#content .comment p { font-size: 12px; }

		.comment p.date {
			text-align: right;
			background: none;
			color: #888; }

#add {
	padding: 10px 0;
	margin: 10px 0; }

/* misc */
form { margin: 10px; }

	form span {
		font-size: 14px;
		color: #555; }

label {
	display: block;
	font-family: BebasRegular, Arial;
	font-weight: normal;
	font-size: 20px;
	color: #444;
	margin: 15px 0 5px 0; }

input, textarea {
	display: block;
	font-family: Arial;
	font-size: 20px;
	color: #222;
	border: 1px solid #ddd;
	padding: 5px; }

input[type=submit] { margin: 12px 0; }

input[type=radio], input[type=checkbox] { 
	display: inline; 
	border: none; }

.last { border: none; }

.red { color: #f21825; }

#content .small_text { font-size: 12px; }

iframe { margin: 15px 0; }

.divider {
	border-top: 1px solid #ddd;
	margin: 10px 0; }

.centered {
	text-align: center;
	margin: 8px 0; }

#content .caption, #content .caption a {
	text-align: center;
	font-size: 12px; }
	
.status_box {
	height: 40px;
	background: #f5f5f5;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	padding: 0;
	margin: 10px; }
	
	.status_box img {
		float: left;
		width: 22px;
		height: 22px;
		padding: 10px; }

	#content .status_box p { 
		line-height: 40px;
		font-size: 14px;
		margin: 0 0 0 15px; }
		
#content ul.options {
	list-style-position: inside;
	padding: 0;
	margin: 0 20px; }

	#content ul.options li {
		line-height: 24px;
		background: url('../images/square.png') left center no-repeat;
		padding: 0;
		margin: 15px 10px; }

	#content ul.options li a {
		font-size: 24px;
		color: #bbb;
		padding-left: 20px; }
	
	#content ul.options li a:hover {
		color: #f21825; }
		
.grid_box {
	float: left;
	width: 250px;
	background: #eee;
	cursor: pointer;
	padding: 0;
	margin: 3px; }
	
	.grid_box img {
		float: right;
		border: 1px solid #dfdfdf;
		margin: 0 0 5px 5px; }
		
	.grid_box p {
		clear: right;
		font-family: Arial, sans-serif;
		color: #444;
		line-height: 1.25em; }
		
.grid_inner {
	width: 230px;
	position: absolute;
	text-align: right;
	padding: 10px; }

#grid .grid_post_views {
		display: none;
		opacity: 0.9;
		filter: alpha(opacity=90); }
		
		#grid .grid_post_views a {
			top: 0;
			left: 0;
			position: absolute;
			width: 250px;
			background: #ddd;
			font-size: 54px;
			color: #666;
			text-align: center; }
		
#resume {
	position: relative;
	padding: 0;
	margin: 0; }

	#resume img {
		position: absolute;
		top: 0;
		right: 0; }

	#resume .block {
		clear: right;
		min-height: 80px;
		margin-bottom: 20px; }

	#resume label {
		width: 100px;
		height: 60px;
		float: left;
		clear: left;
		background: #f21825 url('../images/diagonal.png') top left;
		text-align: right;
		color: #fff;
		padding: 10px;
		margin: 0; }
	
	#resume .info {
		float: right;
		width: 82%; }
	
		#resume .info h1 {
			font-family: Arial;
			font-size: 16px;
			margin-bottom: 10px; }
		
		#resume .info h2 {
			font: italic 10px Arial;
			color: #888;
			margin: -4px 0 6px 0; }
		
		#resume .info ul {
			padding: 0;
			margin: 0 0 15px 0; }
		
			#resume .info ul.sub li {
				list-style-image: url('../images/square-small.png');
				font-size: 11px;
				margin: 5px 20px; }
		
			#resume .info ul#sa li { 
				height: 22px; }
		
		#resume .info li {
			list-style: none inside url('../images/square.png');
			font-family: Arial;
			font-size: 14px;
			padding: 3px;
			margin: 0 8px; }
		
		#resume .date { margin: 0; }

#about { position: relative; }

	#about img {
		float: right;
		padding: 4px;
		background: #fff;
		border: 1px solid #ccc;
		margin: 0 0 20px 20px; }

blockquote {
	clear: left;
	background: #f7f7f7 url('../images/quote.png') no-repeat top left;
	border: 1px solid #f2f2f2;
	font: italic 12px/1.5em Arial, sans-serif;
	color: #444;
	padding: 30px;
	margin: 30px; }
	
#post-info {
	background: #eee;
	padding: 0;
	margin: 10px 0; }
	
	#post-info p {
		line-height: 1em;
		font-size: 10px;
		color: #888;
		padding: 8px;
		margin: 0; }
		
	#post-info a { 
		font-family: Arial, sans-serif;
		font-size: 10px;
		color: #888; }
		
		#post-info a:hover {
			color: #555;
			border-bottom: none !important; }
	
.pagination { 
	text-align: right;
	padding: 10px 0; }

	#content .pagination a, .pagination span {
		border: 1px solid #ddd;
		-moz-border-radius: 3px;
		font-family: Arial;
		font-size: 14px;
		color: #555;
		padding: 5px 8px;
		margin: 0 0 0 5px; }
		
		#content .pagination span { color: #ddd; }
		
		#content .pagination a:hover {
			background: #f21825;
			color: #fff; }
			
.float-right { float: right }