/*
Theme Name: Lunavis-WIP
Theme URI:
Author: Pompolic
Author URI: http://alduinface.com
License: GPL2
License URI: //gnu.org/licenses/gpl-2.0.html
Version: 0.1.indulj
Description: Theme for the webcomic Lunavis, based on Michael Sisk's Archimedes
Tags: dark, blue, cyan, black, gray, two-columns, right-sidebar, fixed-width, flexible-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
Webcomic: 4
*/

/** mobile portrait */
html {
	font-size: 75%;
	color: #FFF;
}

body {
	background: url("images/lunavisbg4_glow.png") no-repeat, url("images/lunavisbg4.png") repeat; 
	background-position: 422px bottom, left bottom;
	background-attachment: fixed, fixed;
}

h1
{
	font-size: 150%;
}

a {
	color: #00ABFC;
	text-decoration: none;
	-webkit-transition: color .25s;
	transition: color .25s;
}

a:visited {
	color: #b72467;
}

a:focus,
a:hover {
	color: #FF3F43;
}

a:active {
	color: #EC191B;
	-webkit-transition: none;
	transition: none;
}

#page {
	margin: 1rem;
	padding: 1rem;
}

#banner {
	background: url("images/1x1_transp_111111_60.png") repeat;
	border-radius: 15px;
	margin: auto;
	padding: 1rem;
	max-width: 1075px;
}

#banner h1,
#banner h2 {
	margin: 0;
}

#navigation ul ul {
	display: none;
	z-index: 99;
}

#navigation ul ul a {
	text-indent: 1rem;
}

#navigation li {
	position: relative;
}

#navigation li:hover > ul {
	display: block;
}

#navigation a {
	color: #999;
	display: block;
	line-height: 2;
}

#navigation a:focus,
#navigation a:hover,
#navigation li:hover > a {
	color: #333;
}

nav.posts,
nav.images,
nav.webcomics,
nav.post-pages {
	text-align: center;
}

nav.images img {
	max-width: 64px;
	opacity: .5;
}

nav.images a:hover img {
	opacity: 1;
}

article {
	margin: 0 0 1rem;
	padding: 0 0 1rem;
}

article .post-thumbnail {
	border: thin solid #ddd;
	float: right;
	margin: 0 0 1rem 1rem;
	padding: .25rem;
}

article .post-footer {
	clear: both;
}

article .post-edit-link,
article .comment-edit-link,
article .comment-reply-link {
	background: #111;
	font-size: smaller;
	margin: 0 0 0 .5rem;
	padding: .1rem .25rem;
	text-transform: uppercase;
}

article article {
	margin: 1rem 0 0 1rem;
	padding: 1rem 0 0;
}

#contentinfo {
	border-top: thin solid #ddd;
	margin: 1rem 0 0;
	padding: 1rem 0 0;
	text-align: center;
}

#contentinfo a {
	color: #999;
}

#contentinfo a:focus,
#contentinfo a:hover {
	color: #333;
}

/* media stuff goes here */
@media only screen and ( min-width: 30em ) { /** mobile landscape */
	
}

@media only screen and ( min-width: 45em ) { /** tablet portrait */
	html {
		font-size: 100%;
	}
	
	#navigation ul ul {
		background: #fff;
		outline: thin solid #ddd;
		position: absolute;
		white-space: pre;
	}
	
	#navigation ul ul ul {
		left: 100%;
		top: 0;
	}
	
	#navigation ul ul a {
		text-indent: 0;
	}
	
	#navigation li {
		float: left;
	}
	
	#navigation ul ul li {
		float: none;
	}
		
	#navigation a {
		border: 0;
		padding: .5rem;
	}
	
	#main {
		clear: both;
		padding: 0 1em 0 0;
	}
	
	#complementary {
		padding: 1em;
		font-size: 14px;
	}
}

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

@media only screen and ( min-width: 75em ) { /** desktop */
	html {
		font-size: 125%;
	}
}

@media only screen and ( min-width: 90em ) { /** high definition */
	
} 

.webcomic1
{
	clear: both;
}

/* container for the webcomic paging links */
.webcomics
{
	margin-top: 20px;
	margin-bottom: 20px;
	background: url("images/1x1_transp_111111_60.png") repeat;
	border-radius: 10px;
}

#wrapper {
    margin: 0 auto;
    max-width: 1075px;
}

#content
{
	width: 742px;
	float: left;
	margin-bottom: 2em;
}

#sidebar 
{
	clear: both;
	float: right;
	min-width: 11em;
	max-width: 12em;
	margin-top: 20px;
	padding: 1em 0;
	text-align: center;
	border-radius: 15px;
	background: url("images/1x1_transp_111111_60.png") repeat;
	/* redundant on main page/individual comic posts,
	needed on individual pages */
	margin-bottom: 2em;
}


#footer 
{
	clear: both;
	text-align: center;
	/* float: left; */
	background: url("images/1x1_transp_111111_60.png") repeat;
	border-radius: 15px;
	margin: 2em 0;
	padding: 1em;
}

.webcomic1-link
{
	display: inline-block;
	width: 102px;
	height: 32px;
	margin: auto 32px;
	vertical-align: middle;
	background-image: url("images/lvsbuttons.png");
}

.first-webcomic1-link
{
	background-position: 0px 0px;
}

.first-webcomic1-link:hover
{
	background-position: 0px 32px;
}

.previous-webcomic1-link
{
	/* for whatever reason this offset is counted from the right */
	background-position: 306px 0px;
}

.previous-webcomic1-link:hover
{
	/* for whatever reason this offset is counted from the right */
	background-position: 306px 32px;
}

.next-webcomic1-link
{
	background-position: 204px 0px;
}

.next-webcomic1-link:hover
{
	background-position: 204px 32px;
}

.last-webcomic1-link
{
	/* for whatever reason this offset is counted from the right */
	background-position: 102px 0px;
}

.last-webcomic1-link:hover
{
	/* for whatever reason this offset is counted from the right */
	background-position: 102px 32px;
}

.random-webcomic-link
{
	display:none;
}

.webcomic-img
{
	margin-left: 20px;
	width: 702px;
	text-align: center;
	border: 1px solid black;
}

ul
{
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#main
{
	background: url("images/1x1_transp_111111_60.png") repeat;
	border-radius: 15px;
	margin-top: 20px;
	padding: 1em;
	font-size: 14px;
}

#content > .webcomic1
{
	background: url("images/1x1_transp_111111_60.png") repeat;
	border-radius: 15px;
	margin-top: 20px;
	padding: 1em;
	font-size: 14px;
}

.widget
{
    padding: 1em 0;
}

.post-comments-link
{
      margin-left: 1em;
}

.avatar
{
   margin-right: 0.5em;
}

textarea
{
   margin-left: 1em;
   margin-right: 1em;
}

/** WordPress */
.sticky {
	
}

.bypostauthor {
	background-color: rgba(0,171,252,0.2);
	padding: 1rem 1rem;
}

.alignnone {
	margin: 1rem;
}

.aligncenter {
	display:block;
	margin: 1rem auto;
}

.alignright {
	float: right;
	margin: 1rem 0 1rem 1rem;
}

.alignleft {
	float: left;
	margin: 1rem 1rem 1rem 0;
}

.wp-caption {
	background: #fff;
	border: thin solid #ddd;
	max-width: 100%;
	padding: .25rem;
	text-align: center;
}

.wp-caption-text {
	font-size: smaller;
	margin: 0;
}

.gallery {
	margin: auto;
	padding: .25rem;
}

.gallery-item {
	float: left;
	margin: 0;
	padding: .25rem;
	text-align: center;
}

.gallery-icon {
	line-height: 1;
}

.gallery-icon img {
	background: #fff;
	border: thin solid #ddd;
	padding: .25rem;
}

.gallery-caption {
	font-size: smaller;
	margin: 0;
}

.gallery-columns-1 .gallery-item {
	float: none;
}

.gallery-columns-2 .gallery-item {
	width: 50%;
}

.gallery-columns-3 .gallery-item {
	width: 33%;
}

.gallery-columns-4 .gallery-item {
	width: 25%;
}

.gallery-columns-5 .gallery-item {
	width: 20%;
}

.gallery-columns-6 .gallery-item {
	width: 16%;
}

.gallery-columns-7 .gallery-item {
	width: 14%;
}

.gallery-columns-8 .gallery-item {
	width: 12%;
}

.gallery-columns-9 .gallery-item {
	width: 11%;
}

/** H5BP  */
.wait {
	cursor: wait;
}

.ir {
    background-color: transparent;
    border: 0;
    color: transparent;
    font: 0/0 a;
    text-shadow: none;
}

.hide {
    display: none !important;
    visibility: hidden;
}

.mask {
    visibility: hidden;
}

.ghost {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.ghost.focus:active,
.ghost.focus:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.cf:before,
.cf:after {
    content: "";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}