/* Global settings */
h1,h2,h3,h4,h5,h6 {
  margin-bottom: 0.5em;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

.centered {
  text-align: center;
}

body {
  margin-left: auto;
  margin-right: auto;
  background-color: #eeead5;
}

body div#main-page {
  background-color: #fffbe4;
  padding: 1em;
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  border: 1px solid #bbb;
}

body.small div#main-page {
  width: 710px !important;
}

body.hirez div#main-page {
  width: 1084px !important;
}

a[href] {
  color: blue;
  text-decoration: none;
}

a:visited {
  color: purple;
}

a:hover {
  color: brown;
  text-decoration: underline;
}

.clearfloat {
	clear: both;
}

/* Quotations: */
q {
	font-style: italic;
}

/* Site-specific stuff */
img.header {
  border: 0px hidden transparent;
  margin-bottom: 5px;
}

.button-row {
  background: #ccca8f url(images/gradient-16.png) repeat-x top center;
  -moz-border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
  border: 1px solid #d9cd8d;
  margin-bottom: 5px;
  padding: 0px 2px;
}

.button-row .separator {
  color: #756b36;
}

table.button-row tbody,
table.button-row tr,
table.button-row td {
  padding: 0px;
  border: 0px hidden transparent;
  margin: 0px;
}

.button {
  padding: 2px !important;
}

a.button:hover,
.button-row .button a:hover {
  color: wheat;
  background-color: brown;
  background-color: rgba(139, 105, 20, 0.5);
}

a:not([href]):hover {
  text-decoration: none !important;
}

a[href] img {
  border: 0px hidden transparent;
}

.strip {
/*  border: 2px solid black;
  background-color: black;*/
  margin: 0px;
  padding: 0px;
  margin-bottom: 0.5em;
}

.strip img {
  border: 2px solid black;
  background-color: black;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wrap-comic {
  margin-left: auto;
  margin-right: auto;
}

.small .wrap-comic,
.small .strip {
  width: 650px;
}

.hirez .wrap-comic,
.hirez .strip {
  width: 1024px;
}

.rss {
  float: right;
  margin-right: 2.5em;
  padding-top: 0.25em;
}

/* Captions just above comic */
.wrap-comic .comic-title {
  margin-left: 7em;
  font-weight: bold;
  font-size: larger;
}

.wrap-comic .comic-title .subtitle,
.small-font {
  font-size: smaller;
}

.wrap-comic .strip {
  color: white;
}

.wrap-comic .comic-title .subtitle {
  left: auto;
  right: auto;
  text-align: center;
}

.wrap-comic .caption {
  margin-top: 5px;
  margin-left: 12em;
}

/* Grayed-out items */
.grayed,
.grayed * {
  color: #999 !important;
}

/* Drop-down menu */
.dropmenu {
  border: lightblue 1px solid;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 3px;
  background-color: #eee;
  position: absolute;
  display: none;
  width: 15em;
}

:hover + .dropmenu {
  display: block;
}

.dropmenu:hover,
.button:hover .dropmenu {
  display: block;
}

.dropmenu.hovered,
.dropmenu.hoveredA,
.dropmenu.hoveredB {
  display: block;
}

/*.dropmenu a {
  width: 15em;
}*/

.dropmenu a:hover {
  background-color: lightblue;
}

/* Paypal tip jar */
.tip-jar {
  width: 120px;
  border: 1px solid black;
  background-color: white;
  float: right;
  /* TEMP: */
  text-align: center;
  vertical-align: middle;
}

/* Calendar */
.calendar {
  border: 1px solid black;
  background-color: white;
  padding: 0.25em;
  
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  
  float: right;
  text-align: center;
  vertical-align: middle;
}

/* Annotations */
.annotation {
  border: 1px solid #999;
  background-color: white;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 3px;
  margin-top: 1em;
  margin-right: 130px;
}

.footnote {
  border: 1px solid #999;
  background-color: white;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 3px;
  margin-top: 1em;
  margin-right: 130px;
  
  top: auto;
  bottom: 0px;
}

p {
  margin-top: 0px;
  margin-bottom: 0.5em;
}

/* Transcripts */
.transcript {
	border: 1px solid #999;
	background-color: white;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding: 3px;
	margin-top: 1em;
	margin-right: 130px;
}

.transcript hr {
	color: #999;
	width: 50%;
}

/* The bar at the bottom */
.bottom-bar {
	text-align: center;
}