/* 
 * RESET
 * -------------------------------------------------
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/* 
 * SET
 * -------------------------------------------------
*/

body {
  font: 12px/18px arial, serif;
  color:#333;
  background:#d4d4d4 url('/im/ws4.5/body-pattern.gif') repeat 0 0;
}

a {
  color:#5f8c8e;
  text-decoration:none;
}

a:hover {  
  color:#e44019;
}

h2 { font-weight: bold; font-size: 36px; line-height: 36px; padding:0; margin:0 0 14px 0; }
h3 { font-weight: bold; font-size: 24px; line-height: 24px; margin-bottom: 7px; }
h4 { font-weight: bold; font-size: 16px; line-height: 18px; margin-bottom: 18px; }
h5 { font-weight: bold; font-size: 14px; line-height: 18px; margin-bottom: 7px; }
h6 { font-weight: bold; font-size: 12px; line-height: 18px; margin-bottom:0; }
p             { margin: 0 0 18px 0; }
blockquote    { margin: 18px; color: #666; font-style: italic; }
strong        { font-weight: bold; }
em,dfn        { font-style: italic; }
dfn           { font-weight: bold; }
sup, sub      { line-height: 0; }
pre 				  { margin: 18px 0; white-space: pre; }
pre,code,tt   { font: 12px 'andale mono', 'lucida console', monospace; line-height: 18px; }
li            { margin-bottom:9px;}
li ul, li ol  { margin:0 18px; } 
ul, ol        { padding: 0 18px 18px 33px; }
ul            { list-style-type: disc; }
ol            { list-style-type: decimal; }
dl            { padding: 0 18px 18px 33px; }
dl dt         { font-weight: bold; }
dd            { margin-left: 18px;}
object, embed { margin: 0 0 18px; }
label         { font-weight: bold; }
fieldset      { padding:9px; margin: 0 0 18px 0; border: 1px solid #ccc; }
legend        { font-weight: bold; font-size:9px; }
input[type=text], input[type=password], textarea, select { background-color:#fff; border:1px solid #bbb; }
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus { border-color:#666; }
input[type=text], input[type=password], textarea, select { margin:0  0 9px 0; }
form {margin-bottom:9px;}

/* 
 * HERE WE GO…
 * -------------------------------------------------
*/

/* header */

#header {
  height:290px;
  width:100%;
  background:transparent url('/im/ws4.5/header-pattern2.gif') repeat-x 0 0;
  position:relative;
}

#header h1 {
  width:100%;
  height:290px;
  margin:0 auto;
  background:transparent url('/im/ws4.5/banner.gif') no-repeat top center;
  text-indent:-9999px;
  overflow:hidden;
  position:absolute;
  top:0;
}

/* nav */

#nav {
  height:58px;
  width:100%;
  font-size:14px;
  position:absolute;
  top:224px;
  font-family:'Times New Roman',times,serif;
  letter-spacing:.08em;
}

#nav ul {
  padding:0;
  list-style:none;
  width:500px;
  margin:0 auto;
  line-height:58px;
  text-align:center;
}

#nav li {
  margin:0;
  display:inline;
}

#nav li a {
  background:transparent;
  color:#fff;
  padding:2px 0;
  margin:0 10px;
}

#nav li a:hover {
  color:#fff;
  border-bottom:2px #6d3a1c solid;
}

#nav li.active a {
  border-bottom:2px #6d3a1c solid;
}

/* CONTENTS 
   `- illustration
    - comics
    - sketchbook blog
    - about
*/

#content {
  margin:0 auto 18px;
  padding:36px 0 0 0;
}

body.illustration #content {
  width:900px;
}

ul#illustration-dump {
  padding: 0;
  list-style: none;
  text-align: center;
}

ul#illustration-dump img {
  padding: 9px;
  background: #fff;
  margin-bottom: 4px;
  box-shadow: 0 0 4px #aaa;
  -moz-box-shadow: 0 0 4px #aaa;
  -webkit-box-shadow: 0 0 4px #aaa;
}

ul#illustration-dump li p {
  padding: 0;
  margin: 0 0 45px;
  font: italic 14px/18px georgia,serif;
  color: #444;
}

/* comics */

body.comics #content {
  width:621px;
}

ul#comics {
 padding:0; 
 list-style:none;
}

ul#comics li.comic {
  background:#fff;
  box-shadow: 0 0 4px #aaa;
  -moz-box-shadow: 0 0 4px #aaa;
  -webkit-box-shadow: 0 0 4px #aaa;
}

ul#comics li.full-size {
  width:621px;
  margin-bottom:25px;
}

ul#comics li.half-size {
  width:298px;
  float:left;
  display:inline;
}

ul#comics li.half-size.comic-left {
  margin-right:25px;
}

.comic-meta {
  padding:15px;
}

.sample-pages a {
  padding:2px 4px;
  background:#ddd;
  color:#333;
}

.sample-pages a:hover {
  padding:2px 4px;
  background:#aaa;
  color:#fff;
}

.buy-button {
  text-align:right;
}

.new-print-submit {
  background:#444;
  color:#fff;
  padding:5px;
  border:0;
  cursor:pointer;
  font-size: 11px;
}

.new-print-submit:hover {
  background:#666;
}

.read-online {
  text-align: right;
  font-size: 11px;
}

.read-online a {
  background:#47acae;
  color:#fff;
  padding:6px 8px;
  border:0;
  cursor:pointer;
}

.read-online a:hover {
  background:#e14523;
}

/* sketchbook */

body.blog #content {
  width:700px;
}

body.blog #sidebar {
  width:125px;
  float:right;
  display:inline;
  font-size:10px;
}

body.blog #blog-content {
  width:525px;
  float:right;
  display:inline;
  margin-left:25px;
}

body.blog #sidebar ul {
  padding:0;
  list-style:none;
}

body.blog #sidebar ul li {
  padding:0;
  margin:0 0 4px; 
}

body.blog .sidebar-item {
  margin-bottom:18px;
  background:#cacab9 url('/im/ws4.5/sidebar-pattern.gif') repeat 0 0;
  padding:10px;
  line-height:12px;
}

body.blog #sidebar h3 {
  font-size:10px;
  line-height:10px;
  margin-bottom:4px;
  color:#333;
  text-transform:uppercase;
  letter-spacing:.08em;
}

body.blog .meta {
  font-family:'Times New Roman',times,serif;
  font-size:12px;
  font-style:italic;
  margin-bottom:18px;
}

body.blog h2 {
  margin:0;
}

body.blog h2 a {
  color:#333;
}

body.blog h2 a:hover {
  color:#e44019;
}

.post {
  margin-bottom:48px;
}

.archive-list ul {
  padding:0;
  list-style:none;
}

.archive-list h3 {
  font:normal 30px/30px 'Times New Roman',times,serif;
  text-transform:uppercase;
  color:#a38472;
  letter-spacing:1px;
}

.commentlist {
  padding:0;
  list-style:none;
}

.comment-form,
.commentlist li{
  padding:0;
  list-style:0;
  background:#eee;
  padding:10px;
}

.comment-tags {
  background:#ccc;
  padding:10px;
  font: 10px 'monaco', 'andale mono', 'lucida console', monospace; line-height: 12px; 
  color:#666;
}

.comment-form textarea {
  padding:10px;
}

body.blog div.post-nav {
  margin-bottom:18px;
}

body.blog div.post-nav a {
  font-size:10px;
  font-weight:bold;
  color:#333;
  padding:5px 10px;
  background:#CACAB9 url(/im/ws4.5/sidebar-pattern.gif) repeat scroll 0 0;
  margin-right:10px;
}

body.blog div.post-nav a:hover {
  color:#eee;
  background:#9b9b77;
}

/* about */

body.about #content {
  width:525px;
}

#bio p {
  font-size:18px;
  font-weight:bold;
  line-height:24px;
  color:#333;
}

#bio img {
  border:15px solid #fff;
  margin-bottom:15px;
}

/* footer */

#footer {
  padding:25px 0;
  font-size:10px;
  line-height:12px;
  color:#666;
  width:525px;
  margin:0 auto;
  text-align:center;
  clear:both;
}

/* online comics */

.back {
  text-align: center;
  font: italic 16px/18px georgia,serif;
}

.online-comic {
  text-align: center;
}

.online-comic img {
  background: #fff;
  margin-bottom: 32px;
  box-shadow: 0 0 4px #aaa;
  -moz-box-shadow: 0 0 4px #aaa;
  -webkit-box-shadow: 0 0 4px #aaa;
}