/*
Theme Name: Stocktown
Theme URI: http://daniel.feldt.nu
Description: My first responsive WP-theme
Version: 0.1
Author: Daniel Feldt
Author URI: http://daniel.feldt.nu
Tags: starkers, naked, clean, basic
*/

@import "css/reset.css";
@import "css/typography.css";
@import "css/layout.css";
@import "css/fonts/mensch.css";

/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */

Body {background-color: #f6f6f6;}

iframe {width: 100%;}

div#masthead {margin-top: 2em; margin-bottom: 1em;}
div.dflogo {text-align: center;}
div.menuborder {border-bottom: 1px solid #e7e7e7; margin-bottom: 1em;}

div.menu-header {display: block; text-align: center; padding: 1.2em 0em;}
div.menu-header ul {margin:0 auto; list-style:none; display:table;}
div.menu-header ul li {display:table-cell;}
div.menu-header ul li a:hover {background-color: #FEF241; border-bottom: 1px solid #E9DF40; border-right: #E9DF40; border-radius: 0.5em; -webkit-border-radius: 0.5em; -khtml-border-radius: 0.5em;}

div#masthead a { font-family: etica, arial; text-transform: uppercase; font-weight: 600; color: #999; text-decoration: none; padding: 0.5em 3em; font-size: 0.8em; letter-spacing: 0.1em; }
div#masthead a:hover {color: #000; background-color: #47CB5A; border-bottom: 1px solid #39A248; border-right: #39A248; border-radius: 0.5em; -webkit-border-radius: 0.5em; -khtml-border-radius: 0.5em;}

div#masthead div.dflogo a {background-color: #f6f6f6;}
div#masthead div.dflogo a:hover {background-color: #f6f6f6;}

div#masthead ul li {float: left; padding-top: 1.2em;}
div#masthead ul li img {width:100px; height:100px;}

.dotted_border {background: url(images/dot.png) repeat-x; height: 5px;}

input#search {border: 1px solid #999; background-color: #f6f6f6;}

div.indexcontent {padding-top: 3em;}

div.post {background: url(images/dash.png) repeat-x;}

div#entry {margin-top: 1.5em; margin-bottom: 3em;}
div#entry_meta_side {margin-top: 1.6em;}
div#entry_meta_side span.date_weekday, div#entry_meta span.date_month {margin: 0 3px; display: inline-block;}

div#post_control {margin-top: 0.5em;}
div#post_control span.prev_post {float: left;}
div#post_control span.next_post {float: right;}

div#entry_meta_mobile {display: none;}

div#entry img {max-width: 100%; border: 2px solid #fff; margin-bottom: 1em; border: none;}

div#entry ul {list-style: disc; margin: 0 2em 1em 2em; font-size: 1em;}
div#entry ul li {list-style: disc; color: #666;}

div#entry ol {margin: 0 2em 1em 2em; font-size: 1em;}
div#entry ol li {color: #666; list-style: decimal;}

div#the_category {margin: 1em 0em;}
div#the_tags {margin: 1em 0em;}

div#the_tags ul li {float:left; margin: 0.3em 0.3em 0em 0em; background-color: #e7e7e7; border-bottom: 1px solid #e9e9e9; border-right: #e9e9e9; border-radius: 0.2em; -webkit-border-radius: 0.2em; -khtml-border-radius: 0.2em; }
div#the_tags ul li:hover {background-color: #FEF241; border-bottom: 1px solid #E9DF40; border-right: #E9DF40;}

div#comments_wrapper {border-top: 1px solid #e7e7e7; padding-top: 3em;}

div.article_list {padding: 1em 0em;}

div.article_list div.entry_meta_thumb {position: absolute; opacity:0.8; filter:alpha(opacity=80); /* For IE8 and earlier */ background-color: #F6F6F6; margin-left: 2.5em; margin-top: -0.6em; border-radius: 0.5em; -webkit-border-radius: 0.5em; -khtml-border-radius: 0.5em; padding: 1em 0.5em 0.5em 0.5em;}
div.article_list div.entry_meta span.date_day_bg {border: none;}

div.article_list div.entry_wrapper {}
div.article_list div.entry_title {}
div.article_list div.entry_meta_mobile {display: none;}
div.article_list div.entry_content {}

div.article_list div.thumbpost {height: 27.5em;}
div.article_list div.thumbpost div.entry_title {padding-top: 35%; padding-left: 4.2%;}

div.article_list div.post_thumbnail_mobile {display: none;}

div.nothumb div.entry_meta {width: 15%; float: left; margin-left: 1.75em;}
div.nothumb div.entry_meta span {background-color: #e7e7e7; font-size: 0.7em; font-family: etica, arial; padding: 0.5em; border-radius: 0.2em; -webkit-border-radius: 0.2em; -khtml-border-radius: 0.2em;}

div.nothumb div.entry_title {width: 30%; padding-right: 4%; float: left;}

div.nothumb div.entry_content {width: 45%; padding-right: 0%; float: left;}

div#pagination {text-align: center; font-family: etica, arial; height: 2.2em; margin: 2em 0em 0em 0em;}
div#pagination a.page-numbers {padding: 0.5em; margin-right: 0.5em; text-decoration: none; background-color: #e7e7e7;}
div#pagination a:hover.page-numbers {background-color: #FEF241;}
div#pagination span.current {padding: 0.5em; margin-right: 0.5em; background-color: #FEF241;}
div#pagination span.page-numbers {padding: 0.5em; margin-right: 0.5em;}

span#wordpress_love {float: right;}

/*.category-portfolio div#entry_header, .category-ikoner div#entry_header, .category-logotyp div#entry_header {display: none;} */
.category-portfolio div#entry_header, .category-ikoner div#entry_header, .category-logotyp div#entry_header {font-size: 0.7em;}
.category-portfolio div#the_time, .category-ikoner div#the_time, .category-logotyp div#the_time {display:none;}
.category-portfolio div#the_category, .category-ikoner div#the_category, .category-logotyp div#the_category {margin-top: 0em;}
.format-gallery div#post_control {display: none;}

div.portfolio_thumbnail {float: left; width: 50%; margin-right: 3%;}
div.portfolio_content {float: left; width: 44.5%; margin-top: 1%;}

div#category_nav {margin: 1em 0em; display: block;}
div#category_nav ul li {float: left; margin: 0.3em 0.5em; }
div#category_nav ul li.category_filter {}

div#about_me {margin-top: 1em;}

div.not-found p {text-align: center;}

#fourohfour {font-size: 95px; font-weight: 600; font-family: Etica, Helvetica Neue, Helvetica, Arial; padding: 0.3em 0em 0em 0em; width: 100%; text-align: center;}

div.clear {clear: both;}

/* MASTHEAD 2 */

.topred {border-top: 5px solid #CF3300;}
div#masthead2_wrapper {background: url(images/masthead_bg.png) repeat-x; padding: 0.8% 0% 0.5% 0%;}

div.menu-header2 {display: block; padding: 1.8em 0em 0em 0em;}
div.menu-header2 ul {margin:0 auto; float: right;}
div.menu-header2 ul li {float: left;}

div.menu-header2 ul li a {font-family: Helvetica Neue, Helvetica, Arial; font-style: normal; font-weight: 600; color: #fff; text-decoration: none;  padding: 0.5em 2.5em; font-size: 1em; letter-spacing: -0.04em;}
div.menu-header2 ul li a:hover {color: #CCC; border-bottom: 5px solid #333;}

div.menu-header2 ul { -webkit-margin-before: 0em; -webkit-margin-after: 0em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 0px;}

div.jagged_edge_upwards {background: url(images/jagged_edge_upwards.png) repeat-x; height: 20px;}

/* FOOTER */

.footer {padding: 1em 0em;}
div#footer_wrapper {background: url(images/masthead_bg.png) repeat-x; padding: 0.8% 0% 0.5% 0%; }
div.jagged_edge_downwards {background: url(images/jagged_edge_downwards.png) repeat-x; height: 20px; margin-top: 3em;}


/* TYPOGRAPHY */


Body {font-family: chaparral-pro, Helvetica, "Helvetica Neue", Arial, sans-serif; font-weight: 400; font-size: 1.062em;}

A { color: #333; }

div#entry A, div#about_me A { text-decoration: none; color: #171409; border-bottom: 0.225em solid #DDD;}

div#entry a:hover, div#about_me a:hover { border-bottom: 0.225em solid #FEF241;}

::selection {background: #FEF241; color: #333; }
::-moz-selection { background: #FEF241; color: #333;}

b {font-weight: 600;}

div#about_me h2 {font-family: etica, arial; font-size: 1.8em; line-height: 1.2em; margin: 0.5em 0em;}

div#entry ul, div#entry ol {font-size: 1.15em; font-weight: 300; line-height: 1.8em;}

div#entry blockquote {display: block; margin: 3em 2em 2.3em 2em;}
div#entry blockquote p {font-style: italic;  display: inline; background-color: #FEF241; padding: 0.5em; z-index: 100; position: relative;}

div#entry blockquote p:before {font-size: 6em; content: "“"; color: #eee; /* fallback */ color: rgba(0,0,0,0.1); position: absolute; left: -0.48em; top: 0.18em; }
div#entry blockquote p:after {font-size: 6em; content: "”"; color: #eee; /* fallback */ color: rgba(0,0,0,0.1); margin: 0.5em 0 0 -0.25em; float: right;}

div#entry p, div#about_me p {margin-bottom: 0.75em; font-size: 1.4em; line-height: 1.55em; font-weight: 300;}

div.menu ul li a {font-family: etica,sans-serif; font-style: normal; text-transform: uppercase; font-weight: 400; color: #999; text-decoration: none;  padding: 0.5em 3em; font-size: 0.8em; letter-spacing: -0.05em;}
div.menu ul li a:hover {color: #666;}

div.menu-header ul li a {font-family: etica,sans-serif; font-style: normal; text-transform: uppercase; font-weight: 400; color: #999; text-decoration: none;  padding: 0.5em 3em; font-size: 0.8em; letter-spacing: -0.05em;}
div.menu-header ul li a:hover {color: #666;}

div#entry_header {border-bottom: 1px solid #e7e7e7; padding-bottom: 0.5em;}
div#entry_header div#post_headline_wrapper {width: 100%; display: block;  padding-top: 2em; }
div#entry_header div#post_headline_wrapper h1#post_headline {font-family: etica, sans-serif; font-weight: 800; font-size: 4.5em; line-height: 1.2em; padding-top: 0.2em; display: block;}
div#entry_header div#post_headline_wrapper h1#post_headline a {text-decoration: none; color: #000; display: block;}
div#entry_header div#post_headline_wrapper h2#post_pulldown {font-family: etica, sans-serif; font-weight: 800; font-size: 2.5em; padding-bottom: 0.5em; line-height: 1.1em; color: #999; display: block;}	

div.article_list div.entry_meta_thumb {font-size: 0.7em; font-family: etica, arial; color: #666;}

div#entry_meta_side {color: #999; font-weight: 200; font-family: etica, serif;}
div#post_date {color: #ccc; font-weight: 400; font-size: 0.95em}
div#the_time {font-size: 0.8em;}
span.date_day_bg {display: inline-block; font-weight: 600; border-radius: 1em; -webkit-border-radius: 1em; -khtml-border-radius: 1em; background-color: #e7e7e7; color: #fff; line-height: 1.9em; width: 1.8em; height: 1.8em; margin: 0 0.3em; text-align: center;}

div#the_category a {text-decoration: none; font-size: 0.7em;color: #666;}
div#the_tags ul li a {text-decoration: none; font-size: 0.7em; padding: 0.3em 0.5em; color: #666;}

div#post_control a {font-size: 0.7em; text-decoration: none; color: #ccc;}

div.article_list div.thumbpost div.entry_title {line-height: 1.7em;}
div.article_list div.thumbpost div.entry_title h1 a {color: #FFF; font-size: 3.5em; text-shadow: 2px 3px #333;}
div.article_list div.thumbpost div.entry_title h2 {color: #e7e7e7; font-size: 2em; text-shadow: 2px 3px #333; font-family: etica, arial; }

div.article_list div.entry_title h1 a, div.portfolio_content h1 a {text-decoration: none; color: #333; font-family: etica, arial; font-size: 2em;}
div.article_list div.nothumb div.entry_title h1 a, div.portfolio_content h1 a {font-size: 1.5em; line-height: 0.9em;}
div.article_list div.nothumb div.entry_content p {margin-bottom: 0.75em; font-size: 1.15em; line-height: 1.55em; font-weight: 300;}
div.article_list div.nothumb div.entry_content a {padding: 0.3em; background-color: #e7e7e7; text-decoration: none; border-radius: 0.3em; -webkit-border-radius: 0.3em; -khtml-border-radius: 0.3em; }
div.article_list div.nothumb div.entry_content a:hover {border-bottom: 1px solid #E9DF40; border-right: 1px solid #E9DF40; background-color: #FEF241; text-decoration: none; border-radius: 0.3em; -webkit-border-radius: 0.3em; -khtml-border-radius: 0.3em; }

div.portfolio_content h1 a {text-decoration: none; color: #000; font-family: etica, arial; font-size: 2.3em;}
div.portfolio_content h2 {color: #999; font-size: 1.7em; font-family: etica, arial; margin-bottom: 0.3em; }
div.portfolio_content p {margin-bottom: 0.75em; font-size: 1.15em; line-height: 1.55em; font-weight: 300; color: #333;}
div.portfolio_content p a {padding: 0.3em;  border-bottom: 1px solid #999; border-right: 1px solid #999; background-color: #CCC; text-decoration: none; border-radius: 0.3em; -webkit-border-radius: 0.3em; -khtml-border-radius: 0.3em; }
div.portfolio_content p a:hover {border-bottom: 1px solid #E9DF40; border-right: 1px solid #E9DF40; background-color: #FEF241; text-decoration: none; border-radius: 0.3em; -webkit-border-radius: 0.3em; -khtml-border-radius: 0.3em; }

div#category_nav ul li.category_filter {font-family: etica, Arial; font-weight: 600;}
div#category_nav ul li a {font-size: 0.9em; color: #f6f6f6; border-bottom: 1px solid #BE4976;  text-decoration: none; padding: 0.3em 1em; background-color: #FE619E; border-radius: 0.3em; -webkit-border-radius: 0.3em; -khtml-border-radius: 0.3em;}
div#category_nav ul li a:hover {background-color: #FE71A8;}

div#contact_me {margin-top: 3em;}

div#contact_me p, div#contact_me ul li {text-align: center; font-family: Etica, Arial; font-weight: 200; font-style: italic; font-size: 3.5em; line-height: 2em;}
div#contact_me a {text-decoration: none;}

div.footer {font-size: 0.9em; color: #999;}
div.footer a {color: #999; text-decoration: none;}

span#wordpress_love a {text-decoration: none; color: #999;}

span.markerpen {background: #FEF241; color: #333; }

.archive-title {text-align: center; margin: 2em 0em; font-family: etica, helvetica neue, helvetica, arial;}
.archive-title span {font-weight: normal;}

/* Smaller screens */

@media only screen and (max-width: 1023px) {

	div.menu-header2 {padding: 2em 0em 0em 0em; font-size: 1.05em;}
	
	#fourohfour { padding: 1em 0em 0em 0em;}
	
	}



/* ============================= */
/* ! Layout for small screen version   */
/* ============================= */

@media handheld, only screen and (max-width: 800px) {

	body {
		
	}
	
	div#entry p {font-size: 1.3em;}
	
	div#search {display: none;}
	
	div.menu-header {display: block; text-align: center; padding: 1.2em 0em;}
	div.menu-header ul {margin:0 auto; list-style:none; display:table;}
	div.menu-header ul li {display:table-cell;}
	
	div.menu-header2 {display: block; text-align: center; padding: 2em 0em 0em 0em;}
	div.menu-header2 ul {margin:0 auto; list-style:none; display:table; float: none;}
	div.menu-header2 ul li {display:table-cell;}
	div.menu-header2 ul li a {padding: 0.5em 1.9em; }
	
	
	div.personal_logo {text-align: center;}
	
	div.menu ul li a {padding: 0.5em 1.5em; letter-spacing: -0.05em;}
	
	div#entry_header div#post_headline_wrapper h1#post_headline {font-family: etica, sans-serif; font-style: normal; font-weight: 800; font-size: 3.5em; padding-top: 1.2em; line-height: 1em;}
	div#entry_header div#post_headline_wrapper h2#post_pulldown {font-family: etica, sans-serif; font-style: normal; font-weight: 800; font-size: 2em; padding-top: 0.2em; line-height: 1.2em; color: #999;}
	
	div#entry_meta_side {display: none;}	
	span.date_day_bg {display: inline-block; font-weight: 600; border-radius: 1em; -webkit-border-radius: 1em; -khtml-border-radius: 1em; background-color: #999; color: #fff; line-height: 1.9em; width: 1.8em; height: 1.8em; margin: 0 0.3em; text-align: center;}
	div#entry_meta {font-size: 1.5em;}
	div#entry_meta_mobile {margin-top: 1.5em; text-align: center; font-weight: 400; color: #999;}
	div#entry_meta_mobile {display: block; margin-top: 1em; border-top: 1px solid #e7e7e7; padding: 0.7em 0em; font-size: 0.90em; }
	div#entry_meta_mobile a {font-size: 0.8em; text-decoration: none; color: #ccc;}
	div#entry_meta_mobile {border-bottom: 1px solid #e7e7e7; padding: 1em 0.5em}
	div#entry_meta_mobile span.prev_post {float: left; margin-left: 1em;}
	div#entry_meta_mobile span.next_post {float: right; margin-right: 1em;}
	
	div.article_list div.entry_title h1 a {font-size: 2em;}
	
	div.article_list div.thumbpost {height: 20em;}
	div.article_list div.thumbpost div.entry_title {padding-top: 35%; padding-left: 4.2%}
	div.article_list div.thumbpost div.entry_title h1 a {font-size: 2.8em; }
	div.article_list div.thumbpost div.entry_title h2 {font-size: 1.5em;}
	
	div.portfolio_content h1 a {font-size: 1.8em;}
	div.portfolio_content h2 {font-size: 1.1em; }
	
	div#contact_me p, div#contact_me ul li {font-size: 2.5em; line-height: 2em;}
}

/* ============================= */
/* ! Layout for small screen version   */
/* ============================= */

@media handheld, only screen and (max-width: 600px) {

	body {
		
	}
	
	div#masthead2_wrapper {padding: 2.5% 0%;}
	
	div.article_list div.thumbpost div.entry_title {padding: 8em 1.5em; position: relative;}
	div.article_list div.thumbpost div.entry_title h1 a {font-size: 2.3em; }
	div.article_list div.thumbpost div.entry_title h2 {font-size: 1.2em;}
	
	div.portfolio_thumbnail {float: none; width: 100%;}
	div.portfolio_content {float: none; width: 100%;}
	
	div.portfolio_content h1 a {font-size: 1.8em;}
	div.portfolio_content h2 {font-size: 1.1em; }
	
	div#contact_me p, div#contact_me ul li {font-size: 2.5em; line-height: 2em;}
	
}


/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 480px) {

	body {
		
	}
	
	div#search {display: none;}
	div.menu ul li a {font-size: 0.7em; padding: 0.5em 0.5em; letter-spacing: -0.05em;}
	div.menu-header2 ul li a {font-size: 0.75em; padding: 0.5em 0.9em; letter-spacing: -0.05em;}
	
	div#masthead a {padding: 0.5em 0.85em; font-size: 0.7em; letter-spacing: -0.07em;}
	div#masthead ul (line-height: 0em;)
	
	div#entry {margin-top: 1em;}
	div#entry_header div#post_headline_wrapper h1#post_headline {font-family: etica, sans-serif; font-style: normal; font-weight: 800; font-size: 2em; padding-top: 0em; line-height: 1em;}
	div#entry_header div#post_headline_wrapper h2#post_pulldown {font-family: etica, sans-serif; font-style: normal; font-weight: 800; font-size: 1.3em; padding-top: 0.2em; line-height: 1.2em; color: #999;}
	
	div#entry_meta_side {display: none;}	
	
	div.article_list div.entry_meta_thumb {position: absolute; background-color: #F6F6F6; margin-left: 1.5em; margin-top: -0.9em; border-radius: 0.5em; -webkit-border-radius: 0.5em; -khtml-border-radius: 0.5em; padding: 1em 0.5em 0.2em 0.5em;}
	
	div.article_list div.post_thumbnail {display: block;}
	div.article_list div.post_thumbnail_mobile {display: none;}
	div.article_list div.post_thumbnail_mobile img {width: 100%;}
	
	div.article_list div.thumbpost {height: 10em; }
	div.article_list div.thumbpost div.entry_title {padding-top: 20%; padding-left: 6%; line-height: 0.5em;}
	div.article_list div.thumbpost div.entry_title h1 a {font-size: 1.6em; line-height: 1em;}
	div.article_list div.thumbpost div.entry_title h2 {font-size: 1.1em; text-shadow: 1px 1px #333; line-height: 1em;}
	
	div.nothumb div.entry_meta {width: 100%; float: none; margin-left: 0em;}
	div.nothumb div.entry_title {width: 100%; float: none; padding: 0.5em 0em;}
	div.nothumb div.entry_content {width: 100%; float: none; padding: 0em;}
	
	div.nothumb div.entry_title h1 a {font-size: 1.5em; line-height: 0.9em;}
	div.nothumb div.entry_content p {font-size: 1em; line-height: 1.2em;}
	
	div.portfolio_thumbnail {float: none; width: 100%;}
	div.portfolio_content {float: none; width: 100%;}
	
	div#contact_me p, div#contact_me ul li {font-size: 1.5em; line-height: 2em;}
			
}


/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

/*	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}*/

}