/* Welcome to Mars! The tone file, I mean. This CSS 
 * dresses up the basic Asterisk theme with a ruddy 
 * sci-fi look & feel.
 * 
 * Although you can use this in your real webcomics, 
 * I designed this theme and its tones for educational 
 * purposes. The files are written to be understood 
 * and learned from, not to be hyper-efficient specimens 
 * of DRY and semantic HTML/CSS.
 * 
 * More info: www.getgrawlix.com/goodies
 * Asterisk v1.0
 */



/* !-------- General --- */

html,body {
	background: #333333 url(http://thethiefoftales.com/images/seal.gif) left top no-repeat;
	color: #ffffff;
	font-family: Verdana, sans-serif;
	font-size: 1rem;
}
a {
	color: #7c9644;
	text-decoration: none;
}
a:hover {
	color: #ffffff;
}
h1 {
	
}
h2 {
	
}
h3 {
	font-size: 0.75rem;
	letter-spacing: 0.1rem;
	color: #7c9644;
	margin-bottom: 0.5rem;
}
p {
	padding: 0.5rem;
}
div {
	
}
ul {
	
}
li {
	
}
.page__footer {
	color: #5D5D5D;
}




/* !-------- Page sections --- */

.page {
	
}
	.page__header {
		
		}
		.page__header h1 {
				
			}

			/* Replace the site’s main h1 with a banner graphic. */
			.page__header h1 a {
				background: url(http://thethiefoftales.com/images/banner.png) center bottom no-repeat;

				/* Display:block lets us give the <a> element 
				 * a definite width and height. */
				display: block;
				width: 100%;
				height: 200px;
				}

			/* Hide the h1’s text from sighted readers — but not 
			 * from screen readers or search engines. 
			 */
			.page__header h1 span {
				visibility: hidden;
			}

	/* !---- Site-wide menu --- */

	.page__menu {
		text-align: center;
		font-size: 1.25rem;
		font-weight: bold;
		}
		.page__menu li {
			display: inline-block;
			float: none;
		}
		.page__menu a {
			position: relative;
			color: #b99150;
		}
		/* Make the current and mouseover’d links appear
		 * to rise above the page.
		 * TODO: Save this for another tone?
		 */
		.page__menu a:hover {
			top: 0px;
		}
		.page__menu .active a {
			top: 0px;
			color: #fff;
		}

	/* !---- Comic navigation --- */

	/* Theme.css defines the back/next nav’s parameters and 
	 * layout. Here we set up what goes into those blocks. 
	 * Let’s start with a little space around the nav links.
	 */
	.page__nav {
		margin: 0.5rem auto;
		width: 108px;
		}
		/* I made the images all the same size — 27x45 — so that 
		 * they’d be easy to code here. If they were different 
		 * sizes, I’d have to specify each of them with 
		 * the selectors below.
		 */
		.navlink {
			width: 27px;
			height: 45px;
			display: block;
			float: left;
		}
		/* Hide the actual text from sighted readers, 
		 * but not from search engines & screen readers. */
		.navlink span {
			visibility: hidden;
			font-size: 1px;
		}
		.first {
			background: url(http://thethiefoftales.com/images/first.png) center top no-repeat;
		}
		.prev {
			background: url(http://thethiefoftales.com/images/previous.png) center top no-repeat;
		}
		.next {
			background: url(http://thethiefoftales.com/images/next.png) center top no-repeat;
		}
		.latest {
			background: url(http://thethiefoftales.com/images/last.png) center top no-repeat;
		}

	/* Let’s make the comic stand out even more with a little 
	 * spacing around its container. */
	.page__comic {
		padding: 0 2rem;
		background: #acb08f;
		border-top: 30px solid #b99150;
		border-bottom: 30px solid #b99150;
	}
	.page__footer {
	}




/* !-------- Comic image(s) --- */

.comic__header {
	
	}
	/* Play down the page title. A little text-transform 
	 * helps it match other UPPER CASE words in the tone.
	 */
	.comic__header h2 {
		font-size: 0.5rem;
		text-align: center;
		text-transform: lowercase;
		letter-spacing: 0.1rem;
		margin-top: 0.2rem;
	}
	/* A little breathing room between the image(s) and 
	 * their surroundings, please. */
	.comic__image {
		margin: 0.5rem 0;
		}
		.comic__image a {
			
		}
		/* Make the image(s) themselves rise above the page. It 
		 * helps that we already made the background darker.
		 */
		.comic__image img {
			box-shadow: 0px;
		}
		.comic__meta {
		font-size: 0.5rem;
		text-align: center;
		text-transform: lowercase;
		letter-spacing: 0.1rem;
			}
			.comic__meta span {
				
			}
			.comic__meta time {
				
			}





/* !-------- Secondary sections --- */

/* Once again, given that our comic image is 800 pixels wide, 
 * let’s make the extra info (blog post, social media, etc.) 
 * align with the image. 
 * Know what? I like how the comic image area turned out, 
 * so let’s reuse the background & padding here. */
.page__secondary{
	max-width: 800px;
	margin: auto;
	padding: 0rem 2rem;
	background: #acb08f;
	border-top: 30px solid #b99150;
	border-bottom: 30px solid #b99150;
	}

	/* !---- Share --- */

	/* Space around the share icons. */
	.secondary__share {
		margin: 1rem auto;
		padding: 2rem 2rem 0rem 2rem;
		}
		.secondary__share h3 {
			font-size: 1rem;
		}
		.secondary__share a {
			display: block;
			width: 32px;
			height: 32px;
			float: left;
			padding-right: 10px;
		}


		/* Style the heading text to match the rest of the tone. */
		

	/* !---- Blog --- */

	.secondary__blog {
		
		}
		/* I know we set all h3 elements to a particular size, 
		 * which is great for consistency. But we want the blog 
		 * post to stand out from other secondary sections.
		 */
		.secondary__blog h3 {
			font-size: 1.5rem;
			margin-bottom: 1rem;
			color: #ffffff;
		}
		.secondary__blog p {
			font-size: 1rem;
			line-height: 1.4rem;
			margin-bottom: 1rem;
			color: #333333;
		}
		.secondary__blog strong {
			
		}
		.secondary__blog em {
			
		}
		/* Play down less important info by making it blend into 
		 * the background.
		 */
		.secondary__blog .meta {
			color: #ffffff;
			font-size: 0.75rem;
		}

	/* !---- Comments --- */

	.secondary__comments {
		
		}
		.secondary__comments h3 {
			font-size: 1.5rem;
			margin-bottom: 1rem;
			color: #ffffff;
		}

	/* !---- Transcript --- */

	/* This handy trick hides the transcript from sighted 
	 * readers, but leaves it available for screen readers 
	 * and search engines. */
	.secondary__transcript {
		position: absolute;
		margin-left: -10000px;
		}
		.secondary__transcript h3 {
			
		}
		.secondary__transcript span {
			
		}
		.secondary__transcript blockquote {
			
		}

	/* !---- Follow --- */

	/* Space around the share icons. */
	.secondary__follow {
		margin: 1rem auto;
		padding: 0rem 2rem 2rem 2rem;
		}
		.secondary__follow h3 {
			font-size: 1rem;
		}
		.secondary__follow a {
			display: block;
			width: 32px;
			height: 32px;
			float: left;
			padding-right: 10px;
		}



/* !---- Social media icons --- */

.deviantart {
	background: url(images/mars/icon-deviantart.png) center center no-repeat;
}
.facebook {
	background: url(images/mars/icon-facebook.png) center center no-repeat;
}
.rss {
	background: url(images/mars/icon-rss.png) center center no-repeat;
}
.pinterest {
	background: url(images/mars/icon-pinterest.png) center center no-repeat;
}
.tumblr {
	background: url(images/mars/icon-tumblr.png) center center no-repeat;
}
.twitter {
	background: url(images/mars/icon-twitter.png) center center no-repeat;
}





/* !-------- Archive page --- */

/* The page wrapper. */
.archive {
	
	}
	.archive h2 {
		letter-spacing: 0.1rem;
	}
	.archive .item {
		
	}
	.archive .item.chapter {
		
	}
	.archive .item.chapter h3 {
		color: #ffffff;
	}
	/* At the top of this file, we set H3 to a rather low-key 
	 * color. Let’s make the chapters’ names stand out a bit 
	 * more by giving them more contrast.
	 */
	.archive .item.chapter h3 span {
		color: #b99150;
	}
	.archive .item.page {
		
	}
	/* Handy trick: instead of using margin or padding on 
	 * the .item or .item.page, I applied padding (not 
	 * margin!) here. Since padding is clickable, this makes 
	 * the links easier to click. */
	.archive .item.page a {
		display: block;
		padding: 0.25rem 0;
	}





/* !-------- Static pages --- */

.static {
	
	}
	.static ul {
		
	}
	/* Let’s make some assumptions here, and force the items 
	 * in each static page into a 3-wide grid. 
	 */
	.static li {
		width: 30%;
		margin-right: 3%;
		float: left;
	}
	.static header {
		
		}
		/* Here I used the same color as the archives’ 
		 * chapter names’ spans.
		 */
		.static header h3 {
			color: #b99150;
			padding-top: 4rem;
			font-size: 1rem;
		}
	.static figure {

		}
		/* A little framing will help them blend into the page.
		 */
		.static figure img {
			border: 0px;
			padding-left: 16rem;
			padding-top: 4rem;
		}
	/* Borrowed from the blog. */
	.static p {
		font-size: 1rem;
		line-height: 1.4rem;
	}
	.static div {
		
	}