/**
 * General Styles
 */
html, body {
  background-attachment:fixed;
  background-color:#92AE80;
  background-image:url(../images/background.gif);
  background-repeat:repeat;
	margin:0px;
  padding:0px;
}

html, body, input, textarea {
  color:#333333;
  font-family:verdana, helvetica, arial, sans-serif;
  font-size:14px;
	line-height:18px;
}

a,
a:visited {
  color:#92AE80;
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
}

.no_link {
  color:#CCCCCC;
}

.container {
  background-color:#F9F9F9;
  border-color:#AAAAAA #AAAAAA;
  border-style:none;
  border-width:0px;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  float:left;
  /*margin:0px -2px -2px 0px;*/  /* Balance the 2px border on bottom and left */
  margin:0px;
  padding:0px;
}

/**
 * Flash Message
 */
#flash {
  font-size:14px;
  margin:10px 0px;
  text-align:center;
}

#flash .notice {
  background-color:#C7E0B7;
  color:#336600;
  padding:10px 20px;
}

#flash .error {
  background-color:#DE998A;
  color:#663333;
  padding:10px 20px;
}

/**
 * Horizontal Navigation
 */
ul#navigation {
  bottom:0px;
  display:block;
  list-style:none;
  margin:0px;
  padding:0px;
  position:absolute;
  right:10px;
}

ul#navigation li {
  display:inline;
	margin:0px;
	padding:0px;
}

ul#navigation li a,
ul#navigation li a:visited {
  color:#92AE80;
  font-size:10px;
  font-weight:bold;
  margin:0px;
  padding:3px 4px;  /* 3px to align with bottom on WebKit */
  text-decoration:none;
}

ul#navigation li a:hover {
  background-color:#92AE80;
  color:#F9F9F9;
}

/**
 * Logo
 */
.logo_container {
  height:67px;
  margin-top:24px;
}

.logo {
  background-image:url(../images/logo.gif);
  background-repeat:no-repeat;
  height:91px;
  margin:-24px 0px 0px;
}

/**
 * Banner 
 */
.banner {
  background-color:#F0F0F0;
  background-image:url(../images/bottom_shadow.gif);
  background-position:0px 0px;
  background-repeat:repeat-x;
  height:24px;
}

/**
 * General Format
 */
.bold {
  font-weight:bold;
}

.float_left {
  float:left;
}

.float_right {
  float:right;
}
 
.align_left {
 text-align:left;
}

.align_right {
 text-align:right;
}

.align_center {
  text-align:center;
}

.left_background {
  background-image:url(../images/grey_background.png);
  background-repeat:repeat-y;
  background-position:0px 0px;
}

.right_background {
  background-image:url(../images/grey_background.png);
  background-repeat:repeat-y;
  background-position:448px 0px;
}

.divider {
  border-color:#CCCCCC;
  border-style:solid;
  border-width:0px 0px 1px 0px;
}

/**
 * Comic Container
 */
#comic_container h1 {
 color:#444444;
 display:block;
 font-size:14px;
 font-weight:bold;
 margin:0px;
 padding:10px 0px;
}

#comic_container h2 {
  color:#92AE80;
  display:block;
  font-size:14px;
  font-weight:bold;
  margin:0px;
  padding:10px 0px;
}

#comic_container h3 {
  color:#CCCCCC;
  display:block;
  font-size:12px;
  font-weight:bold;
  margin:0px;
  padding:10px 0px;
}

#comic_container .comic {
  display:block;
  margin:0px auto;
}

/**
 * News Container
 */
#post_container .avatar {
  background-repeat:no-repeat;
  background-position:center center;
  display:block;
  height:81px;
  margin:10px 0px 0px 10px;  /* Leaves 2px on the right-side of container */
  width:84px;
}

#post_container .avatar.michael {
  background-image:url(../images/avatar_mike.gif);
}

#post_container .avatar.ryan {
  background-image:url(../images/avatar_ryan.gif);
}

#post_container .info {
  background-color:#EFEFEF;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  height:71px;  /* Avatar is 81px. this[margin] is 10px */
  margin:10px;
  padding:6px 8px;
}

#post_container .info h1 {
  font-size:12px;
  font-weight:bold;
  margin:0px;
  padding:0px;
}

#post_container .info h2 {
  font-size:10px;
  font-weight:bold;
  margin:0px;
  padding:0px;
}

#post_container .info h3 {
  bottom:16px;  /* .author[margin] is 10px. .post_info[padding-bottom] is 6px. */
  font-size:12px;
  font-weight:bold;
  margin:10px 0px 0px 0px;
  padding:0px;
  position:absolute;
}

#post_container .body {
  font-size:13px;
  line-height:20px;
  margin:0px 10px 10px 10px;  /* .info[margin-bottom] is already 10px */
}

#post_container .body p {
  margin:0px;
  padding:10px 0px;
}

#post_container .body a {
  color:#669966;
  font-weight:bold;
}

.editor {
  color:#666666;
  font-style:italic;
}

/**
 * Sidebar Container
 */
.sidebar_container {
  margin:10px;
}

.sidebar_container h1 {
  background-color:#EFEFEF;
  color:#666666;
  font-size:10px;
  font-weight:bold;
  margin:0px 0px 15px 0px;
  padding:0px;
}

.sidebar_container h2 {
  font-size:10px;
  font-weight:normal;
  margin:5px 0px;
  padding:0px;
}

/**
 * Footer
 */
.footer {
  font-size:10px;
  font-weight:bold;
  margin:10px;
}

/**
 * Container Shadows
 */
.shadow_taper_left {
  background-image:url(../images/shadow_taper_left.gif);
  background-position:top left;
  background-repeat:no-repeat;
  height:25px;
  position:absolute;
  left:0px;
  top:0px;
  width:10px;
}

.shadow_taper_right {
  background-image:url(../images/shadow_taper_right.gif);
  background-position:top left;
  background-repeat:no-repeat;
  height:25px;
  position:absolute;
  right:0px;
  top:0px;
  width:10px;
}

/**
 * Archive
 */
#archive_container {
  float:left;
  padding:10px 0px;
}

#archive_container .header {
  font-weight:bold;
  margin:5px 10px;
}

#archive_container .column {
  color:#AAAAAA;
  margin:5px 10px;
}

#archive_container .listing {
  padding:4px 0px;
}

/**
 * Contact
 */
#contact_container {
  float:left;
  padding:10px 0px;
}

#contact_container .info {
  background-color:#EEEEEE;
  color:#888888;
  font-size:11px;
  margin:10px 0px;
  padding:10px 20px;
  text-align:center;
}

#contact_container label {
  color:#888888;
  display:block;
  font-size:12px;
  font-weight:bold;
  padding:10px 0px 2px 0px;
}

#contact_container #email {
  width:75%;
}

#contact_container textarea {
  width:100%;
}

#contact_container #submit {
  font-size:11px;
  margin:10px 0px;
}