html, body {
  padding: 0;
  border: 0;
  
  font-size: 17px;
  font-family: arial, verdana, sans-serif;
  
  color: #000;
  
  background: #eee;
}

body {
  padding: .5em;
}

/* User logs in/out or signs up */
#user_account_div {
  float: right;
  font-variant: small-caps;
  text-transform: lowercase;
  
  /* If screen resolution low or window small, don't place up on description text */
  margin-left: 2em;
}

#user_account_div a {
  font-size: 1.25em;
  font-weight: bold;
  
}

h1 {
  font-size: 2em;
  letter-spacing: .1em;
  
  margin-bottom: 0;
  color: #996;
}

/* Hack to get different colored words in header */
h1 span {
  color: #666633;
}

h1 a {
  font-size: 14px;
  text-transform: lowercase;
  font-variant: small-caps;
  letter-spacing: 0;
}

h2 {
  font-size: 1.05em;
  font-weight: bold;
  font-style: italic;
  color: #666633;
  margin-bottom: 0;
  margin-top: 2em;
  padding-top: .2em;
  padding-bottom: .1em;
}

/*
h2 strong {
  color: #444;
}
*/

/* Hack to affect only text */
h2 span {
  border-bottom: 1px solid #999;
  border-bottom: 2px dotted #996;
  padding-left: .2em;
  padding-right: .4em;
}

h3, .smallcaps {
  font-variant: small-caps;
  text-transform: lowercase;
}

h3 {
  font-size: .9em;
  font-weight: bold;
  color: #111;
  margin-bottom: 0;
  margin-top: 1.25em;
}

#user_account_div, #description {
  margin-bottom: .1em;
}

/* Holds the description for the web app */
#description {
  margin-top: .35em;
  font-style:italic;
}

#flash {
  font-style:italic;
  color: #600;
  background: #fff;
  border-top:1px dashed #333;
  border-bottom: 1px dashed #333;
  padding-left: .5em;
  padding-right: .5em;
  padding-top: .25em;
  padding-bottom: .25em;
}


hr {
  height: 1px;
  border: 0;
  background: #666633;
  color: #666633;
  margin-top: .25em;
  margin-bottom: 1em;
}
/*
hr {
  height: 0;
  border: 0;
  color: #e5e5e5;
  background: #e5e5e5;
  border-bottom: 1px dashed #666;
}
*/

/* */
#tasks {
  width: 16em;
  background: #fff;
  float: right;
  padding: 1em .5em 1em .5em;
  border: 0;
  /* font-size: .9em; */
  
  /*
  border-top: 1px solid #666633;
  border-bottom: 1px solid #666633;
  */
  border-top: 1px dashed #666;
  border-bottom: 1px dashed #666;
  background: #fff;
  
  margin-top: .85em;
}

.indent {
  margin-top: .5em;
  margin-left: 1em;
  font-size: .9em;
}

strong {
  color: #222;
  font-weight: bold;
}

a strong {
  color: #600;
}

.item_icon {
  margin-right: .6em;
}

.midsmallcap {
  font-variant: small-caps;
  text-transform: lowercase;
  font-size: 1.15em;
}

.heart {
  font-size: .75em;
  color: #996;
}

.club {
  font-size: .85em;
  color: #666633;
}

.diamond {
  font-size: 1.05em;
  color: #996;
}

.spade {
  font-size: .9em;
  color: #666633;
}

/* Get rid of h2's margin in special div -- handle with padding */
#random_user_reading h2 {
  margin: 0;
}

#random_user_reading {
  background: #dadada;
  margin-top: 2.25em;
  margin-bottom: 1.5em;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
  border-top: 1px dashed #666;
  border-bottom: 1px dashed #666;
  /*
  border-top: 5px solid #aaa;
  border-left: 5px solid #aaa;
  border-bottom: 5px solid #aaa;
  border-right: 5px solid #aaa;
  */
  padding: .75em;
  padding-top: 1em;
  padding-bottom: .75em;
}

/***********************************************************************
 * Anchors
 **********************************************************************/
a {
  text-decoration: underline;
}

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

a:hover {
  color: #666633;
  text-decoration: none;
}

/***********************************************************************
 * Lists
 **********************************************************************/
ul, ol, li {
  margin: 0;
  padding: 0;
}

li {
  margin: 0 1.75em 0 1.75em;
}

#tasks li {
  margin: 0 1em 0 1em;
  text-transform: lowercase;
  font-variant: small-caps;
}