/*! Grawlix | Asterisk — v0.8 | www.getgrawlix.com 
 * 
 * This file provides the foundation of the Asterisk theme. 
 * It controls the overall layout, sets up navigation links, 
 * and sets a utility class or two. 
 * 
 * Although it works, I wouldn’t call it quite production-
 * ready because it has a ton of extra, empty selectors. 
 * I left them there in case you choose to modify this file 
 * and want to know what HTML is available to edit — without 
 * digging through all those HTML snippets.
 * 
 * I’m also assuming the comic’s image width is 800px. But 
 * that’s a guess. If yours is larger or smaller, adjust the 
 * sizes below to suit.
 * 
 * grawlixcomix@gmail.com | www.getgrawlix.com/goodies
 */



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

html,body {
	font-size: 16px;
}
* {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Image style: 
 * We recommend you leave this alone unless you understand RWD. 
 * Learn more at https://css-tricks.com/almanac/properties/m/max-width/
 */

img { max-width: 100%; }
figure { margin: 0; }
.clearfix { clear: both; }





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

/* Given a comic image of 800 pixels, this gives the images a healthy buffer. 
 * Margin:auto keeps the whole thing centered in readers’ screens.
 */
.page {
	margin: 0 auto;
	max-width: 1000px;
}
	.page__header {
		text-align: center;
		}
		.page__header h1 {
			
			}
			.page__header h1 a {
				
				}

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

	.page__menu {
		
		}
		/* They’re list items, but let’s not treat them as such. 
		 * Take off the bullets and float:left to put them 
		 * on the same line.
		 */
		.page__menu li {
			list-style-type: none;
			display: block;
			float: left;
		}
		/* Turning links into blocks lets us put padding on all 
		 * sides, making them easier to click.
		 */
		.page__menu a {
			display: block;
			padding: 1rem;
		}
		.page__menu .active a {
			
		}

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

	/* Set up the back/next navigation for graphics rather than 
	 * text. Since we know the graphics are each 27px wide, then 	 * the container needs to be 108 pixels wide. Margin:auto 
	 * centers the container.
	 */
	.page__nav {
		}
		.navlink {
			
		}
		.navlink span {
			
		}
		.first {
			
		}
		.prev {
			
		}
		.next {
			
		}
		.latest {
			
		}

	/* Page width: 
	 * We’re assuming the comic image is 800 pixels wide. Given 
	 * that, let’s make its container the same width so that 
	 * its related elements (the h2 header, pub date, etc) 
	 * line up with it. 
	 */
	.page__comic {
		max-width: 800px;
		margin: auto;
	}

	/* Not much to say here. Just center everything and give 
	 * it a little buffer.
	 */
	.page__footer {
		margin: 2rem auto;
		text-align: center;
	}




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

.comic__header {
	
	}
	.comic__header h2 {
		
	}
	.comic__image {
			
		}
		.comic__image a {
			
		}
		.comic__image img {
			
		}
		.comic__meta {
			
			}
			.comic__meta span {
				
			}
			.comic__meta time {
				
			}





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

.secondary {
		
	}

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

	.secondary__share {
		
		}
		.secondary__share h3 {
			
		}

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

	/* Line up the blog post with the comic image. */
	.secondary__blog {
		max-width: 800px;
		margin: auto;
		}
		.secondary__blog h3 {
			
		}
		.secondary__blog p {
			
		}
		.secondary__blog strong {
			
		}
		.secondary__blog em {
			
		}
		.secondary__blog .meta {
			
		}

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

	.secondary__comments {
		
		}
		.secondary__comments h3 {
			
		}

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

	.secondary__transcript {
		
		}
		.secondary__transcript h3 {
			
		}
		.secondary__transcript span {
			
		}
		.secondary__transcript blockquote {
			
		}

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

	.secondary__follow {
		
		}
		.secondary__follow h3 {
			
		}
		.secondary__follow a {
			
		}





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

.deviantart {
	
}
.facebook {
	
}
.rss {
	
}
.pinterest {
	
}
.tumblr {
	
}
.twitter {
	
}





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

/* The page wrapper. */
.archive {
	
	}
	/* The page name, usually “archives”. */
	.archive h2 {
		
	}
	/* Each element that readers see inside the archives, 
	 * including chapters and pages. That lets us remove their 
	 * bullet points all at once with list-style-type.
	 */
	.archive .item {
		list-style-type: none;
	}
	.archive .item.chapter {
		
	}
	/* Tones usually handle spacing like this, but it’s 
	 * such a universal problem that I fixed it here.
	 */
	.archive .item.chapter h3 {
		margin-top: 1rem;
	}
	.archive .item.chapter h3 span {
		
	}
	.archive .item.page {
		
	}
	.archive .item.page a {
		
	}





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

/* Static page layout changes depending on how they’re 
 * configured — per page — in the admin panel. That makes 
 * them hard to predict. But if you figure out what they 
 * should look like before you style them, you should be OK.
 */
.static {
	
	}
	.static ul {
		
	}
	.static li {
		list-style-type: none;
	}
	.static header {
		
		}
		.static header h3 {
			
		}
	.static figure {
		
		}
		.static figure img {
			
		}
	.static p {
		
	}
	.static div {
		
	}

/* !---- Static item layout --- */

/* Static pages arrange their content in different 
 * ways. This controls how those ways relate to 
 * each other on the page.
 */

/* Create a horizontal “grid” that’s 
 * three items wide.
 */
.three-up li {
	width: 30%;
	margin-right: 3%;
	float: left;
}

/* Create a horizontal “grid” that’s 
 * two items wide.
 */
.two-up li {
	width: 48%;
	margin-right: 1%;
	float: left;
}

/* Evenly distribute child elements within a LI. */
.samewidth > * {
	width: 48%;
	margin-right: 1%;
	float: left;
}

/* Header stretches ACROSS both columns, image on the RIGHT. */
.fullheader header {
}
.fullheader div {
	width: 48%;
	float: left;
}
.fullheader figure {
	width: 48%;
	float: right;
}

/* Header stretches ACROSS both columns, image on the LEFT. */
.fullheader.transpose header {
}
.fullheader.transpose div {
	width: 48%;
	float: right;
}
.fullheader.transpose figure {
	width: 48%;
	float: left;
}

/* Header in the LEFT column, image on the RIGHT. */
.samewidth header {
}
.samewidth div {
	float: left;
	width: 48%;
}
.samewidth figure {
	width: 48%;
	float: right;
}

/* Header in the RIGHT column, image on the LEFT. */
.samewidth.transpose header {
}
.samewidth.transpose div {
	float: right;
	width: 48%;
}
.samewidth.transpose figure {
	width: 48%;
	float: left;
}