/*
Theme Name: Offworld
Author: Rob Beschizza
Author URI: http://boingboing.net/
Description:For Boing Boing Offworld
Version: 1
License: CC 3.0 Unported
License URI: https://creativecommons.org/licenses/by-sa/3.0/us/legalcode
-------------------------------------------------------------- */

    body {margin:0;box-sizing:border-box;font-family: 'Oswald', sans-serif;font-weight:300; overflow-x: hidden;}
    header {position:absolute;z-index:2;padding:20px;width:100%;box-sizing:border-box;}
    header img#logo {position:absolute;top:20px;width:50%;height:auto;}
    #bb {width:10%;top:20px;position:absolute;left:18%}
    
    h2 {font-family: 'Raleway'; font-weight:800;}
    
    .blogpost p.excerpt {overflow:auto;}

    #leadfeature{ 
    background-color:#ddd;
    height:1px;padding-bottom:56%;
    background-size:cover;
    background-position:center center;
    position:relative;
    }
    
    #leadfeatureframe {
		position:absolute;bottom:-5px;    
    }
    
    #leadfeatureframe img {
		width:100%;
    }
    
    
    #leadfeaturetext {
    	position:absolute;bottom:0;text-align:right;padding:2em;color:white;
  
    	width:100%;
    	box-sizing:border-box;
    }
    
    #leadfeaturetext h2{font-size:200%;line-height:1.1;width:70%;position:relative;margin:0em 0 0em auto;}
    #leadfeaturetext p.byline{position:relative;margin:0em 0 .5em auto;line-height:1;font-size:14px;text-transform:uppercase;}

    #leadfeaturetext h2 a{color:white;text-shadow: 1px 1px black, 2px 2px black,3px 3px black,4px 4px black,5px 5px black,0 0 2px black}
    #leadfeaturetext p.byline {color:white;text-shadow: 1px 1px black, 2px 2px black,3px 3px black,0 0 15px black}
	#leadfeaturetext p.excerpt {position:relative;margin:0.5em 0 1em auto;width:50%;color:white;text-shadow: 1px 1px black, 2px 2px black,3px 3px black,0 0 5px black;font-family:"raleway";font-weight:700;font-size:115%}

	.blogpost h2 {font-size:28px;line-height:1.2;position:relative;margin:0em 0 .25em auto;}
	.blogpost p.byline {position:relative;margin:3em 0 .5em auto;line-height:1;font-size:14px;text-transform:uppercase;}
	.blogpost p.excerpt {position:relative;margin:0em 0 1em auto;}
	.blogpost h2 a, .blogpost p.byline a{color:black;}


	.featuretext h2 {font-size:24px;line-height:1.4;position:relative;margin:0.1em 0 0 0;}
	.featuretext p.byline {position:relative;margin:0em 0 0em auto;line-height:1;font-size:14px;text-transform:uppercase;}
	.featuretext p.excerpt {position:relative;margin:0em 0 1em auto;}
	.featuretext h2 a, .featuretext p.byline {color:black;}


	a {color:blue;text-decoration:none;}
	.attachment-post-thumbnail  {}
    
    a:hover {text-decoration: underline !important;}
 
 div#gpt-ad-right_side_1 {
width:300px;height:650px;background-image:url('i/300back.jpg');float:right;margin:50px auto 1em auto;background-repeat:no-repeat;
}

 div#gpt-ad-right_side_2 {
margin:0px auto 20px auto;
}

 div#withSidebar {min-height:650px;width:90%;position:relative;margin:0 auto;}
 
 div#withSidebarPost {margin:0;float:left;width:50%;text-align:center;}
 
 div#withSidebarPost .content {text-align:center}
 
 div.blogpost {
 padding:20px;width:80%;max-width:720px;position:relative;margin:1em auto 0 auto;clear:both;
 }
 
 div.leftimage {
 float:left;margin:0em 5em 1em 1em;background-color:black;height:300px;width:300px;border-radius:150px;background-size:cover;background-position:center center;
 }
 
  div.rightimage {
 float:right;margin:3em 0 0 5em;background-color:black;height:200px;width:200px;border-radius:150px;background-size:cover;background-position:center center;
 
 }
 
 div.centerimage {
 margin:4em auto;background-color:black;height:300px;width:300px;border-radius:150px;background-size:cover;background-position:center center;float:none;display:block;
 }
 
 div.blogpost.noImage {width:50%;text-align:center;}
 
    footer {text-align:center;width:100%;background-color:white;background-image:url('i/footer.jpg');background-size:cover;bottom:0px;height:400px;margin-top:1px;}
  	
  	
  	div#follow {position:relative;width:100%;margin:0 auto 2em auto;text-align:center;clear:both;}
  	div#follow img{width:100px;height:auto;margin-right:1em;}
  	
  	/* WP essentials */
  	
  	.wp-caption,.wp-caption-text,.sticky,.gallery-caption,.bypostauthor { }
  	.alignright {float:right;margin:0 1em;}
  	.alignleft {float:left;margin:0 1em;}
  	.aligncenter {margin:0 1em;}
  	
  	/* Feature Asteroids */
  	
  	div#recentfeatures {width:90%;max-width:90%;margin:3em auto;position:relative;text-align:center;}
  	
  	div.featuroid {width:33%;float:left;}
  	
  	div.feature {
  	width:100%;
  	height:auto;
  	box-sizing:border-box;
  	position:relative;
	margin-right:2em;
  	background-size:cover;
  	}
  	
  	.featuretext {text-align:left;padding:2em;}
	.featuretext h2 {font-size:18px;line-height:1.3;margin:.25em 0 .25em 0}

 	div.feature img{width:100%;height:auto;}
 
 	.asteroidframe {width: 105%;height: 100%;margin: 0 0 -10px 0px;}
 	
 	h3#readmoreposts {text-align:center;}
 	
 	
 	/* offworld permalinks */
 	
 	article {position:relative;;max-width:600px; ;padding:20px;box-sizing:border-box;overflow: hidden;margin:0 auto;}
    article img {max-width:100%!important;height:auto!important;}
 	
 	
 	/* Mobile */
  	
@media (max-width: 800px) {

	div.leftimage {height:200px;width:200px;margin-top:3em;}
	div.rightimage {height:200px;width:200px;margin-top:3em;}
	div.centerimage {height:200px;width:200px;margin-top:3em;}
 	div#withSidebarPost {margin:0;float:left;max-width:35%;text-align:center;}

}

@media (max-width: 700px) {

div#withSidebarPost {margin:0;float:left;max-width:35%;text-align:center;}


}
 	
@media (max-width: 600px) {
	
	body {font-size:80%;}
	
	div.leftimage {float:left;}
	div.rightimage {float:left;}

	div#withSidebar {width:100%;}
div#withSidebarPost {float:none;max-width:none;text-align:left;padding:20px;width:80%;max-width: 720px;position:relative;margin: 1em auto 0 auto;clear: both;}

div#withSidebarPost .content {text-align:left;}
	div.leftimage {height:100px;width:100px;margin:1em 2em 0 0;}
	div.rightimage {height:100px;width:100px;margin:1em 2em 0 0;}
	div.centerimage {height:100px;width:100px;margin:1em 2em 0 0;float:left;
	}

div#gpt-ad-right_side_1  {
float:none;
}

	.blogpost p.byline {margin-top:0;}
	.blogpost h2 {font-size:18px;}

	div.blogpost.noImage {width:80%;text-align:left;}
  	#bb {display:none;}	.tablepic {width:0px;display:none;}  	
  	 td.text {text-align:left;padding-right:0;}
  	 td.text h2,td.text h3  {text-align:center;}
	header img#logo {width:50%;height:auto;}
	#features {background-color: black;}
  	.story {margin:0;float:none;width:100%;position:relative;}
	#feature0 h2 {position:absolute;margin:0;font-size:22px;bottom:50px;}
    #feature0 p {position:absolute;margin:0;font-size:16px;bottom:25px;}
   	div.featuroid {width:80%;float:none;margin:0 auto;}
}
  	
  @media (max-width: 450px) {
  #leadfeature {height:350px;}
	div.content {overflow:auto;text-align:left;}
	div.leftimage {height:66px;width:66px;margin:1em 2em 0 0;}
	div.rightimage {height:66px;width:66px;margin:1em 2em 0 0;}
	div.centerimage {height:66px;width:66px;margin:1em 2em 0 0;}

  }