/*
Title:      	Master Stylesheet
Author:     	Sam Rayner - http://samrayner.com
Created: 			12/01/10
Last Edited:  14/01/10
*/

/* RESETS
================================================== */

* {
	margin: 0;
	padding: 0;
}

#banner, footer,
section, article,
nav, aside { display: block; }

ul, ol {
	list-style: none;
}


/* GLOBAL
================================================== */

body {
	font: 14px/18px helvetica, arial, sans-serif;
	text-align: center;
	color: #666;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}

h2 {
	font-weight: bold;
	letter-spacing: -1px;
	line-height: 2;
	color: #333;
}

a:link,
a:visited {
	color: #272;
}

a:hover,
a:active,
a:focus {
	color: #040;
}


/* BANNER
================================================== */

#banner {
	margin: 10px 0 20px;
}

h1 a {
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	width: 610px;
	height: 150px;
	margin: 0 auto;
	background: url(../images/nobreaks.gif) no-repeat 100% 0;
}

h1 a:hover,
h1 a:focus {
	opacity: 0.7;
}

h2 {
	display: inline;
}

#comic time,
#archive .home  {
	display: inline;
	color: #aaa;
	font-weight: bold;
	margin: 0 0.5ex;
}

#comic time::before,
#archive .home::before 	{ content: "("; }

#comic time::after,
#archive .home::after 	{ content: ")"; }

/* COMIC PAGE
================================================== */

#comic img {
	display: block;
	margin: 0 auto;
}

/* Nav Bars
-------------------------------------------------- */

nav {
	overflow: hidden;
	width: 500px;
	margin: 0 auto;
}

nav li, 
nav li a {
	display: block;
	float: left;
	line-height: 32px;
}

nav li {
	width: 100px;
	font-weight: bold;
	color: #999;
}

nav li a,
nav li span {
	display: block;
	width: 98px;
	text-decoration: none;
	border-right: 1px solid #ccc;
	border-left: 1px solid #eee;
	background-color: #ddd;
}

nav li a:link,
nav li a:visited {
	color: #222;
}

nav li a:hover,
nav li a:focus {
	color: #000;
	border-right-color: #bbb;
	border-left-color: #c5c5c5;
	background-color: #ccc;
}

nav li a:active {
	color: #fff;
	background-color: #444;
	text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
}

nav li > *::before,
nav li > *::after {
	font-size: 18px;
	line-height: 1;
}

.first > *::before 	{ content: "\00AB\00A0"; }
.prev > *::before 	{ content: "\2039\00A0"; }
.next > *::after 		{ content: "\00A0\203A"; }
.last > *::after 		{ content: "\00A0\00BB"; }

nav .first a,
nav .first span {
	border-left: none;
	padding-left: 1px;
	
	-webkit-border-top-left-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-bottomleft: 3px;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

nav .last a,
nav .last span {
	border-right: none;
	padding-right: 1px;
	
	-webkit-border-top-right-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	-moz-border-radius-topright: 3px;
	-moz-border-radius-bottomright: 3px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}


/* ARCHIVE PAGE
================================================== */

#archive {
	width: 700px;
	margin: 0 auto;
	overflow: auto;
}

#archive #comic-list a {
	position: relative;
	display: block;
	min-height: 50px;
	float: left;
	width: 320px;
	margin: 5px;
	padding: 10px;
	text-align: left;
	text-decoration: none;
	background-color: #eee;
	
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
}

#archive #comic-list a:hover,
#archive #comic-list a:active,
#archive #comic-list a:focus {
	background-color: #ddd;
}

#archive header {
	position: absolute;
	left: 100px;
	top: 50%;
	margin-top: -18px;
}

#archive time {
	color: #666;
}

#archive img {
	display: block;
	border: 3px solid #fff;
}


/* FOOTER
================================================== */

footer {
	margin: 50px auto;
	width: 720px;
}

footer nav {
	margin-bottom: 50px;
}

footer p {
	margin: 18px 0;
}

#copyright {
	font-size: 12px;
	opacity: 0.7;
	padding: 0 50px;
}