@import url(http://fonts.googleapis.com/css?family=Droid+Serif:regular,italic,bold,bolditalic);

/* HTML5 stuff */
article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section, figure, figcaption { display: block; overflow: hidden; }

body {
	font: 1em/1.6 'Droid Serif', 'Palatino Linotype', 'Bookman Antiqua', Palatino, serif;
	margin: 0 auto;
	}
	
a { color: #bc0000; }

h1 a { color: #333; text-decoration: none; }

hr {
	border: 0 #ccc dotted;
	border-top-width: 1px;
	clear: both;
	height: 0;
	}

blockquote {
	font-size: 1.2em;
	font-style: italic;
	}
blockquote p:before { content: "❝"; padding-right: 6px; font-size: 1.5em; color: #bc0000; }
blockquote p:after { content: "❞"; padding-left: 2px; font-size: 1.5em; color: #bc0000; }
blockquote p { line-height: 26px; }
	
.clear { clear: both; }
.right, .rightalign, .alignright { float: right; }
.left, .leftalign, .alignleft { float: left; }
.rightalign, .alignright { margin: 5px 0 8px 20px; }
.leftalign, .alignleft { margin: 5px 20px 8px 0; } 

h1, h2, h3, h4, h5 {
	font-weight: bold;
	line-height: 1.3;
	}
	
.blog .main h2, .blog .main h3, .blog .main h4 {
	margin-top: 1.8em;
	}

h1 { font-size: 30px; }

h2 { font-size: 26px; }

h3 { font-size: 24px; }

h4 { font-size: 16px; }

h5 { font-size: 14px; }

ol { list-style: decimal; }

ul { list-style: square; }

li { margin-left: 30px; }

p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset {
	margin-bottom: 20px;
}

/* MAIN MENU */
.header-container {
	position: relative;
	clear: both;
	background-color: #555;
	color: #fff;
	padding: 25px 0 10px 0;
	z-index: 800;
	}

header {
	position: relative;
	filter:alpha(opacity=95);
	-moz-opacity:0.95;
	-khtml-opacity: 0.95;
	opacity: 0.95;
	z-index: 800;
	display: block;
	}

.kilianlogo {
	margin-top: 7px;
	overflow: hidden;
	background: transparent url(../img/pixelblast-logo.png) top left no-repeat;
	width: 283px;
	height: 38px;
	}
	
	.kilianlogo a { 
		display: block;
		width: 283px;
		height: 38px;
		}
	
	.kilianlogo h1, .kilianlogo h2 {
		display: none;
		overflow: hidden;
		}

nav.main { 
	overflow: hidden;
	display: block;
	}

	nav.main a {
		font-weight: bold;
		text-decoration: none;
		font-size: 18px;
		line-height: 18px;
		color: #a0a0a0;
		display: block;
	}
	
	nav.main a:hover { color: #fff; }
	nav.main a span:hover { color: #fff; }
	
	nav.main .active a { color: #fff; }

	nav.main a span {
		display: block;
		font-weight: normal;
		font-style: italic;
		font-size: 12px;
		line-height: 16px;
	}

	nav.main ul { overflow: hidden; }

/* TOP PAGE ONLY */

.pixelblurb {
	font-size: 20px;
	overflow: hidden;
	margin: 30px 0;
}

.pixelblurb div { margin-bottom: 15px; }
.pixelblurb span { color: #bc0000; }

.pixelblastlogo { margin-top: 50px; }

.button a {
	text-decoration: none;
	color: #fff;
	display: block;
	width: 181px;
	height: 36px;
	
	font-size: 18px;
	font-weight: bold;
	overflow: hidden;
	padding: 10px 20px 0 20px;
	}

.button {
	width: 221px;
	height: 46px;
}

.learnmore, .worksamples { background: transparent url(../img/learnmore.png) top left no-repeat; }
.getpixelblast { background: transparent url(../img/getpixelblast.png) top left no-repeat; }
.getpixelblast a { padding: 10px 0 0 55px; }

/* MAIN IMAGE */

.main_img {
	/* border-top: 2px #bebebe solid; */
	position: relative;
	overflow: hidden;
	}
	
	.main_img .intro {
		overflow: hidden;
		margin-top: 55px;
		margin-bottom: 40px;
		font-size: 18px;
		}
		
		.contact .main_img .intro { margin-bottom: 0; }
		
		.main_img .annotations {
		font-size: 16px;
		margin-bottom: 3px;
		color: #bc0000;
		text-transform: uppercase;
		}
		
		.annotations .commcount {
			color: #888;
			font-size: 0.9em;
			text-transform: lowercase;
			margin-left: 10px;
		}
		
		.main_img .intro em {
			font-style: italic;
		}
		
	.main_img .main {
		overflow: hidden;
	}
	
	.about .main_img .article-image, 
	.contact .main_img .article-image,
	.blog .main_img .article-image { position: absolute; bottom: 0; left: 0; }
	.blog .main_img .annotations {
		display: inline;
	}

	.blog .main_img .fixed {
		position: fixed;
		bottom: 0;
		width: 474px;
		margin: 0 auto;
		z-index: -1;
	}
}

/* BLOGPEEK */
.blogpeek {
	float: left;
	overflow: hidden;
	font-size: 14px;
	}

	.blogpeek-header, .blogpeek-header-cat {
		text-align: center;
		padding: 15px 0;
		border-bottom: 1px dotted #333;
		font-size: 14px;
		letter-spacing: 1px;
		margin-bottom: 30px;
		}
		
	.default .blogpeek-header, .blog .blogpeek-header {
		border-top: 3px solid #b90000;
		}
	
		.blogpeek-header h3, .blogpeek-header-cat h3 {
			font-weight: normal;
			font-size: 24px;
			line-height: 1.2;
			text-transform: uppercase;
			margin-bottom: 0;
			}
		
		.blogpeek .annotations {
			font-size: 12px;
			margin-bottom: 5px;
			color: #bc0000;
			text-transform: uppercase;
			}
			
		.blogpeek h1 {
			font-size: 20px;
			}
			
	.blogpeek-footer {
		text-align: center;
		padding: 10px 0;
		border-top: 1px dotted #333;
		font-size: 16px;	
		}

/* ! MUSTR / FLICKR
----------------------------------------------------------------------------------------------------*/
.mustr {
	padding: 30px 0;
	overflow: hidden;
	float: left;
	background-color: #fff;
	filter:alpha(opacity=85);
	-moz-opacity:0.85;
	-khtml-opacity: 0.85;
	opacity: 0.85;
}

.mustr h2 {
	font-family: "Arial Black", "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 900;
	font-size: 2.1em;
	color: #009AE8;
	padding: 15px 0;
	margin-bottom: 0;
	float: left;
}

.mustr h2 span {
	color: #FF1094;
}

.mustr ul {
	list-style-type: none;
	margin-bottom: 0;
	display: inline;
	float: right;
}

.mustr ul li {
	float: left;
	margin-left: 25px;
	padding: none;
}

.mustr ul li img {
	border: none;
	margin-right: 2px;
}


/* grey infobox */
.infobox {
	background-color: #e0e0e0;
	overflow: hidden;
	filter:alpha(opacity=95);
	-moz-opacity:0.95;
	-khtml-opacity: 0.95;
	opacity: 0.95;
	}
	
	.infobox a { text-decoration: none; }
	.infobox a:hover { text-decoration: underline; }
	.default .infobox a:hover { text-decoration: none; }
	
	.infobox article {
		margin-top: 20px;
		overflow: hidden;
	}
		
	.infobox h3 {
		margin-bottom: 10px;
		font-size: 20px;
		text-transform: uppercase;
		font-weight: normal;
	}
	
	.infobox article { margin-bottom: 20px; }
	
	.infobox article ul { list-style-type: none; }
	
	.about .infobox article ul, .contact .infobox article ul { list-style-type: square; }
	.about .infobox article ul li, .contact .infobox article ul li { margin-left: 20px; padding-left: 0; }
	
	.infobox article ul li {
		font-size: 15px;
		margin-left: 0;
	}
	
	.infobox ul.previousarticles { margin-bottom: 0; }
	
	.infobox article ul.previousarticles li {
		font-size: 13px;
		margin-left: 0;
		line-height: 2;
	}
	
	.infoboxlink { margin: 6px 0; font-size: 13px; }
	
	.default .infobox em { display: block; font-size: 14px; margin-top: 10px; }
	
	.infobox blockquote { margin-top: 20px; font-size: 16px; line-height: 1.7; }
	.infobox blockquote:before { content: url(../img/quotes-66.png); padding-right: 3px; }
	.infobox blockquote:after { content: url(../img/quotes-99.png); padding-left: 3px; }
	.infobox figcaption { font-size: 13px; font-style: italic; display: block; }

	.about .infobox { margin-bottom: 60px; }
	.about .infobox, .blog .infobox { border-top: 3px solid #bc0000; }
	.about .infobox article p { font-size: 14px; }
	.about .infobox h3 { margin-bottom: 15px; }

	.blog	.infobox h4 {
		margin-bottom: 10px;
		font-size: 18px;
		font-weight: normal;
		margin-top: 10px;
		}
	.blog .infobox p { font-size: 14px; line-height: 1.5; font-style: italic; color: #555; }
	.blog .infobox p a { text-decoration: none; color: #555; }

/* TWITTER */	
	.infobox #twitter_update_list li {
		float: left;
		display: block;
		width: 222px;
		margin-right: 15px;
		line-height: 1.6;
		}

	.infobox #twitter_update_list span {
		font-style: italic;
		display: block;
		font-size: 14px;
		}
		
	.infobox #twitter_update_list {
		font-size: 15px;
		}
		
		.infobox #twitter_update_list span:before { content: url(../img/quotes-66.png); padding-right: 3px; }
		.infobox #twitter_update_list span:after { content: url(../img/quotes-99.png); padding-left: 3px; }
		
/* FOOTER */
.footer-container {
	background-color: #555;
	color: #fff;
	overflow: hidden;
	clear: both;
	position: relative;
	}
	
	.footer-container .copyright {
	background-color: #333;
	padding: 6px 8px 6px 8px;
	text-align: center;
	font-size: 11px;
	}
	
	.footer-container a { color: #fff; }

footer {
	background-color: #555;
	color: #fff;
	padding-top: 20px;
	font-size: 13px;
	overflow: hidden;
	}
	
footer .button { width: 70px; height: 25px; font-size: 12px; }
footer .searchbox { margin-right: 10px; }
	
/* ARTICLES / BLOG content */
.caption { font-size: 13px; font-weight: bold; }

.blog article .intro {
	margin-bottom: 40px;
	font-size: 18px;
	background-color: #fff;
	filter:alpha(opacity=85);
	-moz-opacity:0.85;
	-khtml-opacity: 0.85;
	opacity: 0.85;
	z-index: 10;
	}

.blog article .main {
		margin-top: 55px;
		font-size: 16px;
	}
	
.blog article img { max-width: 100%; }
	
.blog article .specs {
	float: left;
	font-style: italic;
	font-size: 13px;
	padding-bottom: 20px;
	border-bottom: 1px dotted #888;
	}
	
.blog sup { font-size: 12px; vertical-align: super; font-weight: bold; }
.blog .footnote { font-size: 12px; }

.spaced article {
	margin-bottom: 20px;
	height: 18em;
	}
	
/* BLOG addthis button styling */
.addthis_toolbox {
	float: left;
	margin: 20px 0;
	overflow: hidden;
	}
	
.addthis_toolbox span { color: #888; font-size: 12px; }
.addthis_toolbox strong { color: #333; font-size: 16px; }

	.addthis_toolbox .custom_images a {
	    width: 60px;
	    height: 60px;
	    margin: 0;
	    padding: 0;
	}

			.addthis_toolbox .custom_images a:hover img {
			    opacity: 1;
			}

		.addthis_toolbox .custom_images a img {
		    opacity: 0.75;
		}
		
/* COMMENTS */
.comments-nbr { display: inline; color: #555; font-style: italic; font-size: 12px; text-transform: lowercase; }
.intro .comments-nbr {
	font-size: 14px;
}
.comments { margin-top: 40px; overflow: hidden; }
.comments .name { font-weight: bold; display: inline; line-height: 1; }
.comments .date { margin-left: 20px; font-style: italic; display: inline; font-size: 12px; color: #888; }
.comments ul { font-size: 14px; list-style-type: none; }
.comments ul li { margin-left: 0; padding: 20px 0; border-bottom: 1px dotted #888; }
#importantfield { display: none; }

/* ABOUT */
.about .main_img, .contact .main_img { min-height: 500px; }
.lower { margin-top: 10px; margin-bottom: 20px; }
		
/* ARCHIVE */

.archive .main_img { 
	padding-top: 40px;
	padding-bottom: 40px;
	margin-bottom: 30px;
	border-bottom: 1px dotted #888;
	}

	.archive .main_img .image img {
	width: 98.5%;
	border: 3px solid #333;
	}

.archive h2, .archive h3 { margin-top: 25px; margin-bottom: 5px; font-weight: normal; text-transform: uppercase; }

/* WORKS */


/* works categories navigation */
.works .main_img h2 {
	font-size: 18px;
	}
	
.works .main_img h3 {
	font-size: 14px;
	margin: 0;
	padding: 0;
	}
	
.works .main_img h1 {
	margin-bottom: 5px;
	}

.works nav.categories {
	margin-top: 10px;
	overflow: hidden;
	}

.works ul.category_list {
	float: left;
	padding: 0;
	margin: 0;
	list-style-type: none;
	}

.works ul.category_list li {
	display: block;
	float: left;
	margin: 0 2px 0 0;
	padding-left: 0;
	border-bottom: 2px #fff solid;
	font-size: 18px;
	width: 190px;
	}	

.works ul.category_list li a {
	text-align: center;
	text-decoration: none;
	color: #333;
	display: block;
	background-color: #f0f0f0;
	line-height: 1.6em;
	padding: 5px 0;
	}
	
.works ul.category_list li a.active {
	display: block;
	color: #fff;
	background-color: #7f7f7f;
	}
	
.works ul.category_list li a:hover {
	color: #333;
	background-color: #bfbfbf;
	}
	
.works article, .works .works-thumbs { margin-top: 60px; margin-bottom: 60px; overflow: hidden; }

.works figcaption {
	font-size: 12px;
	display: block;
	line-height: 1;
	margin: 0;
	padding: 0;
	height: 2.2em;
	overflow: hidden;
	}
	
.works figure {
	margin-bottom: 10px;
	}
	
.works .fleft, .works .fright {
	font-weight: bold;
	margin-top: 20px;
	font-size: 18px;
	}

.works .fleft { float: left; }
.works .fright { float: right; }

.works .article_image {
	border: 1px #ddd solid;
	}
.works .calltoaction {
	display: inline;
	}
	
.works .button {
	margin-bottom: 20px;
	}

.works .thumbnails { float: left; overflow: hidden; margin-top: 40px; min-height: 375px; width: 978px; }

.works .specs {
	font-size: 13px;
	margin-top: 0;
	}

/* SEARCH */
.search article { margin-bottom: 40px; display: block; }

/* -------------------------------------------------------------------
------ OPTIMISATIONS FOR MOBILE DEVICES ------------------------------
--------------------------------------------------------------------*/
	
@media screen and (max-height: 480px) {
.blog .main_img .fixed {
	position: relative;
	width: 474px;
	margin: 0 auto;
	/* un-"fixing" the main image so it will appear below the excerpt */
}

@media screen and (max-width: 650px) {
	h1 { font-size: 42px; }
	h2 { font-size: 36px; }
	h3 { font-size: 32px; }
	}
/* iOS 4 crashes when using more than one @font-face, so no bold means larger sizes for headings necessary */