/*
Theme Name: Digital Geography
Theme URI: http://digital-geography.com/
Description: Blog about GIS, statistics, webmapping, local stuff and mush more out of the "geosphere".
Author: Danijar Hafner
Author URI: http://quiteworks.com/
Version: 1.0
License: All rights reserved.
*/

/********************************
 * general
 ********************************/
#jetpack-subscribe-label {display: none;} 
body{ font-size:10px; margin:0; padding:0; font-family:'Open Sans',sans-serif; overflow-y:scroll; min-width:30em; }

.margin{ margin:3rem; transition:margin .3s; }
.padding{ padding:.8em 1em; transition:padding .3s; }
@media screen and (min-width:1501px) { .margin{ margin:4rem; } .padding{ padding:1em 1.2em; } }
@media screen and (max-width:1200px) { .margin{ margin:2rem; } .padding{ padding:.6em .8em; } }
@media screen and (max-width: 800px) { .margin{ margin:1rem; } .padding{ padding:.4em .6em; } }

.left, .lefts > *{ float:left; } .right, .rights > *{ float:right; }
.center{ display:block; text-align:center; }
.clearfix:after, .clearfixes > *:after, .container:after, section:after, article:after, aside:after{ content:" "; display:block; height:0; clear:both; overflow:hidden; visibility:hidden; }
.borderbox, .borderboxes > *, .container, section, article, aside, nav{ position:relative; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.hyphen, .hyphens, article{ text-align:justify; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; } a{ -webkit-hyphens:none; -moz-hyphens:none; hyphens:none; }
.border{ border:1px solid #bbb; margin:-1px; }

a{ text-decoration:none; cursor:pointer; color:#07c; }
a:active{ outline:none; }
p:first-child{ margin-top:0; }
p:last-child{ margin-bottom:0; }
article, .image{ transition:height .3s, width .3s; }
input{ font-family:'Open Sans',sans-serif; }
p{ -webkit-column-break-inside:avoid; -moz-column-break-inside:avoid; -moz-page-break-inside:avoid; page-break-inside:avoid; }
iframe{ border:none; }

/********************************
 * columns
 ********************************/

.colsmall, .collarge, .colinnersmall, .colinnerlarge{ transition:width .3s }

.colsmall{ width:25%; }
.collarge{ width:75%; }
.colinnersmall{ width:33.33%; }
.colinnerlarge{ width:66.66%; }

@media screen and (min-width:1501px) {
	.colsmall{ width:25%; }
	.collarge{ width:75%; }
}

@media screen and (min-width:1801px) {
	.colsmall{ width:20%; }
	.collarge{ width:80%; }
	.colinnersmall{ width:25%; }
	.colinnerlarge{ width:75%; }
}

@media screen and (max-width:1200px) {
	.colsmall{ width:33.33%; }
	.collarge{ width:66.66%; }
	.colinnerlarge, .colinnersmall{ width:100%; }
}

@media screen and (max-width: 800px) {
	.colsmall, .collarge{ width:100%; }
}

/********************************
 * box layouts
 ********************************/

.tiles > *{ width:50%; }
.tiles > *:nth-child(3){ clear:both; }
.tiles > *:nth-child(5){ clear:both; }
.list > *{ width:100%; }

@media screen and (min-width:1801px) {
	.post .articles article{ -webkit-column-count:2; -moz-column-count:2; -o-column-count:2; -ms-column-count:2; column-count:2;
						     -webkit-column-gap:4em; -moz-column-gap:4em; -o-column-gap:4em; -ms-column-gap:4em; column-gap:4em; }
}

@media screen and (min-width:1501px) {
	.tiles > *{ width:33.33%; }
	.tiles > *:nth-child(3){ clear:none; }
	.tiles > *:nth-child(4){ clear:both; }
	.tiles > *:nth-child(5){ clear:none; }
	.list > *{ width:50%; }
	.list > *:nth-child(3){ clear:both; }
	.list > *:nth-child(5){ clear:both; }
}

@media screen and (max-width:800px) {
	.list > *{ width:100%; }
	.archive .list .title a{ min-height:0; }
	.sidebar > *{ float:left; width:50%; }
}

@media screen and (max-width:600px) {
	.tiles > *{ width:100%; }
	.archive .tiles .title a{ min-height:0; }
	.sidebar > *{ width:100%; }
}

/********************************
 * text
 ********************************/

article{ position:relative; font-size:1.5em; width:100%; padding:1em; color:#444; }
/*article *{ max-width:100% }*/

article a:hover{ text-decoration:underline; }

article h1, article h2, article h3, article h4, article h5, article h6{ margin:1.2em 0 .8em; font-family:'Open Sans',sans-serif; color:#666; text-align:left; font-weight:normal; clear:both; }
article h1:first-child, article h2:first-child, article h3:first-child, article h4:first-child, article h5:first-child, article h6:first-child{ margin-top:0; }
article h1{ font-size:1.9em; }
article h2{ font-size:1.7em; }
article h3{ font-size:1.6em; margin-top:.75em; }

article img{ max-width:100%; height:auto;}
article .wp-caption{ max-width:calc(100% - 1em); padding:.5em; background:#f5f5f5; border:1px solid #ddd; border-radius:.2em; box-shadow:0 0 .2em rgba(0,0,0,.1); margin:auto; }
article .wp-caption img{ border:1px solid #ccc; }
article .wp-caption a + p{ margin-top:0; }

article ul{ padding:0 1.5em; list-style-type:square; }

/********************************
 * bar
 ********************************/

.bar{ width:100%; background:#eee; border:1px solid #bbb; border-width:1px 0; z-index:1; }
.bar:first-child{ border-top:none; } .bar:last-child{ border-bottom:none; }
.bar.minheight{ min-height:15em; }

.bar > h2{ font-size:3em; margin:0; padding:.75em 1.5em; color:#252; letter-spacing:-.03em; }

/********************************
 * body, wrapper
 ********************************/

body{ background:#7f999f; background:#cbbc9f; background:url(imgs/bg.png); }
.wrapper{ position:relative; margin-top:0; border:1px solid rgba(0,0,0,.15); border-width:0 1px 1px; box-shadow:0 .5em 2em rgba(0,0,0,.1); }
.content{ background:#E4E4E4; }
.articles{ background:#fff; border:1px solid #bbb; border-width:0 1px 1px; margin:0 -1px -1px; overflow:hidden; }
.single .articles{ background:center top repeat-y #fff; box-shadow:0 0 1em rgba(0,0,0,.2), 0 3em 4em -2em #fff inset, 0 -2em 4em -2em #fff inset; }

@media screen and (min-width:1801px) { .post .articles{ background-image:url(imgs/fold.png); } }
@media screen and (max-width:1200px) { .articles{ border-width:0 1px 1px 0; margin-left:0; margin-right:0; } }
@media screen and (max-width: 800px) { .articles{ border-left:none; border-right:none; } }

/********************************
 * article
 ********************************/

.tags{ display:block; width:100%; line-height:1.5em; overflow:hidden; margin:0; padding:0 2.5em 0 .5em; background:#3C352F; text-align:left; border-radius:.15em .15em 0 0; }
.tags:before, .tags:after{ display:inline-block; content:''; width:1em; height:1em; background-size:cover; }
.tags:before{ vertical-align:middle; background-image:url(imgs/tags.png); margin-right:.25em; }
.tags a, .tags span{ font-size:.8em; display:inline-block; margin:0 .3em; color:#2E261D; color:#fff; border:none; }
.tags a:hover{ text-decoration:underline; }

.tags.collapsed{ position:absolute; left:1em; right:1em; width:auto; max-height:1.6em; z-index:2; transition:max-height .4s, box-shadow .2s; }
.tags.collapsed:after{ position:absolute; right:.5em; top:.4em; background-image:url(imgs/dots.png); margin-left:.25em; opacity:1; transition:opacity .4s; }
.tags.collapsed:hover{ max-height:10em; box-shadow:0 .5em 1em -.5em rgba(0,0,0,.6); transition-delay:.4s; }
.tags.collapsed:hover:after{ opacity:0; transition-delay:.5s; }
.tags.collapsed + .title{ margin-top:1em; }

.title{ position:relative; font-size:1.5em; margin:0; padding:.25em 0 .2em; min-height:2em; font-family:'Roboto Slab',serif; color:#444; border-bottom:1px dashed #bbb; box-shadow:0 .75em 2em -1em rgba(0,0,0,.2); z-index:1; }
.single .articles .title{ font-size:2em; padding-top:.15em; padding-bottom:.2em; margin-bottom:.75em; } .single .articles .title + p{ margin-top:0; }
.title a{ color:#444; } .articles .title a{ display:block; margin:0 -.5em; padding:0 .5em; border:none; } .archive .articles .title a{ min-height:3.2em; }
.title a:hover{ text-decoration:none; }

.edit{ position:absolute; margin-top:-1px; padding:.5em; background:#fff; border:1px dashed #bbb; border-width:0 1px 1px 0; box-shadow:.5em .5em 1em rgba(0,0,0,.1); z-index:1; opacity:0; transition:opacity .3s; }
.single .edit{ margin-top:calc(-1.5em - 1px); }
article:hover .edit{ opacity:1; }

.image{ display:block; float:right; width:100%; margin:0 0 .75em 0; overflow:hidden; border-radius:0 0 .2em .2em; background:no-repeat center; background-size:100%; transition:background-size .2s; }
.image img{ width:100%; }
.archive .image:hover, .archive .title:hover + .image{ background-size:104%; }

aside .title{ margin-bottom:.8em; border:none; box-shadow:none; }

@media screen and (max-width:1200px) { .author{ border-right:1px solid #bbb; margin-right:-1px; } }
@media screen and (max-width: 800px) { .author{ border-bottom:1px solid #bbb; margin-bottom:-1px; border-right:none; margin-right:0; } }

@media screen and (-webkit-min-device-pixel-ratio:0) { .articles.border{ margin-left:0; margin-right:0; } .archive .articles.border{ border-left:none; } }
@media screen and (max-width:1200px) and (-webkit-min-device-pixel-ratio:0) { .articles.border{ border-left:none; } }
@media screen and (max-width: 800px) and (-webkit-min-device-pixel-ratio:0) { .articles.border{ border-right:none; } }

/********************************
 * comments
 ********************************/

#disqus_thread{ margin:0 0 -1em 0; padding:3em; background:#fff; box-shadow:0 -4em 4em -2em #fff; }

/********************************
 * author
 ********************************/

.author h3{ font-size:1.5em; }

.author .avatar{ display:block; width:128px; max-width:100%; margin:0 auto; border-radius:999em; box-shadow:0 .1em .3em rgba(0,0,0,.4); }

.author .icons{ max-width:20em; }
.author .icon{ display:inline-block; width:20%; height:0; padding:10% 0; margin:0 2%; background:center no-repeat #fff; background-size:contain; box-shadow:0 .1em .3em rgba(0,0,0,.4); }
.author .icon:first-child{ margin-left:0; } .author .icon:last-child{ margin-right:0; }
.author .website{ background:url(imgs/website.png) #888 center; }
.author .google{ background:url(imgs/google.png) #d14836 center; }
.author .facebook{ background:url(imgs/facebook.png) #3b5998 center; }
.author .twitter{ background:url(imgs/twitter.png) #00aced center; }

.author ul{ list-style-type:none; padding:0; text-align:left; }
.author li{ margin-bottom:.7em; }

 /********************************
 * navigation
 ********************************/

.navigation{ margin:0 -1px; padding:1em 0; background:#FDB548; border-bottom:1px solid #aaa; box-shadow:0 .3em .5em rgba(170,170,170,.5); z-index:1; }
nav{ position:relative; font-size:1.5em; line-height:1; padding:0 1em; }
nav > span{ color:#888; }
nav > a{ display:inline-block; padding:.4em; margin:.3em; color:#fff; font-weight:bold; border-bottom:2px solid transparent; transition:border .15s; }
nav a:hover{ border-bottom-color:#fff; }

@media screen and (max-width:1200px) { nav { font-size:1.3em; } }
@media screen and (max-width: 600px) {
	.navigation nav{ height:2em; background:url(imgs/grab.png) calc(100% - 1em) center no-repeat; background-size:auto 90%; }
	.navigation nav > a{ display:none; }
	.navigation:hover nav{ height:auto; background-image:none; }
	.navigation:hover nav > a{ display:inline-block; }
}

/********************************
 * header
 ********************************/

header{ padding:3em 0 2.5em; background:url(imgs/gray.jpg) no-repeat center; background-size:cover; text-align:center; border-radius:.75em .75em 0 0; box-shadow:0 .5em 2em rgba(0,0,0,.1); }
header.margin{ margin-top:4em; margin-bottom:0; }

header h1{ display:inline-block; font-size:6em; margin:0 0 .3em; font-family:'Rationale',sans-serif; transition:font-size .3s; }
header h1 a{ color:#fff; text-shadow:.02em .05em .03em rgba(0,0,0,.4); }

header .search{ position:relative; display:block; font-size:.8em; width:60em; max-width:90%; margin-left:auto; margin-right:auto; }
header .search input{ font-size:2.4em; padding:.3em .5em .2em; width:100%; background:#fff; border:none; border-radius:.15em; box-shadow:0 .1em .3em rgba(0,0,0,.2), 0 .2em .75em -.25em rgba(0,0,0,.2); transition:background .2s; outline:none; }
header .search a{ position:absolute; top:1.05em; right:.8em; float:right; width:3em; height:3em; background:url(imgs/search.png) center no-repeat; background-size:contain; opacity:1; transition:opacity .5s; }

@media screen and (max-width:1500px) { header{ font-size:0.9em; } }
@media screen and (max-width:1200px) { header{ font-size:0.8em; } }
@media screen and (max-width: 800px) { header{ font-size:0.7em; } header .search{ font-size:1em; } }

/********************************
 * footer
 ********************************/

.footline{ margin-top:0; margin-bottom:2em; padding:0; color:#888; }
.footline > a{ color:#888; }
.footline > span{ padding:0 1em; }
.footline > a:hover{ border-bottom-color:#888; }

@media screen and (max-width:800px) { .footline{ text-align:center; } }
@media screen and (max-width:600px) { .footline > span{ display:block; } }

/********************************
 * other
 ********************************/
.next{ font-size:1.5em; padding:1em 1em 0; }
.next .left { display:inline-block; max-width:40%; padding:1em 0 1em 2em; background:url(imgs/left.png ) no-repeat left  center; background-size:auto 1em; vertical-align:middle; }
.next .right{ display:inline-block; max-width:40%; padding:1em 2em 1em 0; background:url(imgs/right.png) no-repeat right center; background-size:auto 1em; vertical-align:middle; }

.locked{ position:fixed; bottom:0; right:2em; }