/*

Theme Name: Shiro
Theme URI: https://dbushell.com
Description: Theme for dbushell.com
Author: David Bushell
Copyright: (c) David Bushell
Version: 6.0


 .d8888888b.       888 888                        888               888 888
d88P"   "Y88b      888 888                        888               888 888
888  d8b  888      888 888                        888               888 888
888  888  888  .d88888 88888b.  888  888 .d8888b  88888b.   .d88b.  888 888
888  888bd88P d88" 888 888 "88b 888  888 88K      888 "88b d8P  Y8b 888 888
888  Y8888P"  888  888 888  888 888  888 "Y8888b. 888  888 88888888 888 888
Y88b.     .d8 Y88b 888 888 d88P Y88b 888      X88 888  888 Y8b.     888 888
 "Y88888888P"  "Y88888 88888P"   "Y88888  88888P' 888  888  "Y8888  888 888

*/

/* ****************************************************************************************************
 *
 *  LAYOUT
 *
 * **************************************************************************************************** */

@media only screen and (max-height: 45em) { /* < 720 */

	#header { opacity: 0; margin-bottom: -100%; }
}

@media only screen and (min-height: 45em) { /* 720 */

	#banner .title:after { visibility: hidden; }

}

@media only screen and (min-width: 30em) { /*480*/

	#banner .title { float: left; }

	.post p.note { float: right; width: 30%; margin-left: 1.8666em;/*28*/ margin-bottom: 0.9333em;/*14*/ }

	.post-nav .prev { float: left; }
	.post-nav .next { float: right; }

}

@media only screen and (max-width: 45em) { /* < 720 */

	#nav { float: left; clear: both; margin-top: 0.875em;/*14*/ }

	#comments { padding-left: 0; }
	#comments .title { padding-left: 9.411%; }
	.comments {
		background: #fff; padding-top: 1.75em;/*28*/ margin-bottom: 1.75em;/*28*/
		-webkit-box-shadow: 0 0 3em 0 rgba(0,0,0,.1);
		-moz-box-shadow: 0 0 3em 0 rgba(0,0,0,.1);
		box-shadow: 0 0 3em 0 rgba(0,0,0,.1);
	}
	.comments .comment { margin-bottom: 0; padding-top: 0;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	 }
	.comment-avatar { display: none; }
	.comment-text { padding: 0 0 0.875em 0;/*14*/ margin: 0 9.411% -1px 9.411%; width: auto; float: none; border-bottom: 1px solid #ced5D9; }
	.comments .comment:last-child .comment-text { margin-bottom: 0; border-bottom: 0; }
	#comment-form fieldset { padding: 0 9.411%; }

}

@media only screen and (min-width: 40em) { /*640*/

	#main .main-nav { width: 50%; float: left; }

}

@media only screen and (min-width: 45em) { /*720*/

	#nav { float: right; clear: none; }

}

@media only screen and (max-width: 60em) { /* < 960 */

	#intro { text-align: center; }
	#intro .logo { margin-left: auto; margin-right: auto; }

	#colophon .text { margin: 0 auto; text-align: center; height: auto; padding-top: 6em;/*96*/ }
	#colophon:before { position: absolute; left: 50%; top: -0.4375em;/*7*/ margin-left: -2.5em;/*40*/ }

	#icons ul { margin: 0 auto; }

}

@media only screen and (min-width: 60em) { /*960*/

	body { background: #333 url('./black.jpg'); }
	#masthead { background: none; }

	#icons { padding: 2.625em 0 5.6875em 0;/*42,91*/ }

	#intro { width: 70%; float: left; margin-bottom: 0; }
	#colophon { width: 30%; float: right; padding: 0; }
	#colophon .text { padding: 0 10%; margin: 0; }
	#colophon:before { margin-left: -5em; }

	#content { width: 70%; float: left; }

	.post-image { padding: 1.647em 5.772%;/*28*/ margin-left: -5.772%; margin-right: -5.772%; }
	.post-follow { position: absolute; bottom: 0; right: 0; }

	#side { width: 30%; float: left; }
	.side .mod { padding: 0 10%; }
	#recent .sub { margin-bottom: 2.1875em;/*35*/ }
	/*
	#ads .mod { margin-left: -8px; }
	*/
	.home #content { width: 100%; }
	.home #paper { width: 70%; float: left; position: static; }
	.home #nav { margin-right: 0.875em;/*14*/ }
	.home #side { width: 30%; float: left; }
	.home #main { position: relative; }
	.home #main .post { margin-right: 0.875em;/*14*/ }
	.home #banner { position: relative; }
	.home #ads { width: 25%; position: absolute; right: 1.75em; bottom: 10em; padding: 0 0 0.875em 0; }
	.home #ads .mod { margin: 0; padding: 0; }
	.home #ads .container { position: static; left: 0; margin: 0; }
	.home .post h1 { white-space: nowrap; }

	.home #crane { position: absolute; display: block; width: 95%; top: 2.625em;/*42*/ right: 0; }
	.home img#crane { height: auto !important; }

}

@media only screen and (min-width: 65em) { /*1040*/

}

@media only screen and (min-width: 70em) { /*1120*/

	/*body { font-size: 105%; }*/

}