@import url(/css/reset.css);

h1, h2, h3, h4, h5, h6
{
  font-weight: bold;
  font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
}
h1
{
  font-size: 200%;
}
h2
{
  font-size: 150%;
}
h3
{
  font-size: 120%;
}
h4
{
  font-size: 100%;
}

body
{
  background-color: white;
  color: black;
}

#header
{
}

#content
{
  clear: both;
  text-align: center;
  margin: 5px auto 5px auto;
}

#footer
{
  clear: both;
  text-align: center;
  font-size: 90%;
  padding: 5px 0 0 0;
}
#footer a:link,
#footer a:visited
{
  text-decoration: none;
  color: inherit;
}
#footer a:hover
{
  text-decoration: underline;
  color: #FF0000;
}

#copyright
{
  font-size: 80%;
  padding: 10px 0 0 0;
}

#frontpage
{
  background-color: #CDBCDB;
  color: #21127B;
}
#frontpage #content
{
  width: 900px;
}
#frontpage #about
{
  float: left;
  width: 240px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 80%;
  padding: 5px;
}
#about p
{
 text-align: left;
 text-indent: 1.0em;
 margin: 0 0 0.3em 0;
}
#frontpage #mainimage
{
  float: left;
  width: 400px;
  height: 600px;
}
#frontpage #buttonframe
{
  float: left;
  width: 250px;
  padding: 0px 0px;
}

#buttonframe img
{
  margin: 2px;
}
#buttonframe a:hover
{
 transform: translate(+2px, -2px);
 -moz-transform: translate(+2px, -2px);
 -webkit-transform: translate(+2px, -2px);
 /* SCOTT: I don't like the slow transition effect. */
 /* -webkit-transition: -webkit-transform 0.2s ease-in; */
 /* -moz-transition: all 0.2s ease-in; */
 /* transition: all 0.2s ease; */
}

#previews
{
  background-color: black;
  color: white;
}
#previews #content
{
  width: 800px;
}

#manthology,
#interview
{
  background-color: white;
  color: black;
}
#manthology #content,
#interview #content,
#true-tales-of-falsehood #content
{
  width: 600px;
}
#manthology #text,
#interview #text,
#true-tales-of-falsehood #text
{
  text-align: justify;
  margin: 20px 0 10px 0;
}
#manthology h1,
#interview h1,
#true-tales-of-falsehood h1
{
  padding: 0 0 5px 0;
  border-bottom: 4px solid;
  margin-bottom: 0.25em;
}
#manthology #thumbs img,
#interview #thumbs img,
#true-tales-of-falsehood #thumbs img
{
  margin: 1px;
  border: 2px solid transparent;
}
#manthology #thumbs img:hover,
#interview #thumbs img:hover,
#true-tales-of-falsehood #thumbs img:hover
{
  border: 2px solid red;
}

#true-tales-of-falsehood
{
  background-color: #CDBCDB;
  color: #21127B;
}

#products
{
  background-color: #0678B3;
  color: white;
}
#products #content
{
  width: 800px;
}
#products h1
{
  margin: 0.5em;
}
#products #hands
{
  float: left;
  width: 300px;
  margin: 10px 0;
}
#products #buttonframe
{
  float: left;
  width: 500px;
  padding: 0px 0px;
  margin: 10px 0;
}

#surf-sumo-1
{
  background-color: #F0E9CD;
  color: black;
}
#surf-sumo-tee
{
  background-color: #FFFBCC;
  color: black;
}
#fleeting-truth-tee
{
  background-color: #FFFFCC;
  color: black;
}
#worm-cookies-tee
{
  background-color: #B8E5FA;
  color: black;
}
#hop-mantis-tee,
#bargain-tee,
#hop-madness-tee
{
  background-color: #C7C8CC;
  color: black;
}

#brewhaha
{
  background-color: #FBF49C;
  color: black;
}
#brewhaha h1
{
  font-family: Comic Sans, Comic Sans MS, cursive, sans-serif;
  font-style: italic;
  font-size: 200%;
  margin: 0.25em;
}
#brewhaha #center p
{
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  line-height: 120%;
  font-size: 70%
}
#brewhaha #content
{
  width: 840px;
}
#brewhaha #left
{
  float: left;
  width: 280px;
}
#brewhaha #center
{
  float: left;
  width: 280px;
}
#brewhaha #right
{
  float: left;
  width: 280px;
}
#brewhaha #bottom
{
  clear: both;
  float: left;
  width: 840px;
}
#brewhaha #left img,
#brewhaha #right img,
#brewhaha #bottom img
{
  border: 2px solid #AAAAAA;
  margin: 3px 6px;
}
#brewhaha #left img:hover,
#brewhaha #right img:hover,
#brewhaha #bottom img:hover
{
  border: 2px solid red;
}

#links
{
  background-color: #D0ECF3;
  color: black;
}
#links #content
{
  width: 850px;
}
#links #mainimage
{
  width: 400px;
  float: left;
}
#links #text
{
  width: 450px;
  float: left;
}
#links p
{
  margin: 1.0em 0;
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 95%
}
#links #text a:link,
#links text a:visited
{
  text-decoration: none;
  color: #0054A6;
}
#links #text a:hover
{
  text-decoration: underline;
  color: #FF0000;
}

#contact,
#newsletter
{
  background-color: #CDBCDB;
  color: #21127B;
}
#contact #content,
#newsletter #content
{
  width: 900px;
}

#admin #content
{
  text-align: left;
  width: 900px;
  margin: 2em;
}

#surf-sumo-1 #content
{
  width: 900px;
}
#surf-sumo-1 #mainimage
{
  position: relative;
}
#surf-sumo-1 .paypalbutton
{
  text-align: center;
  position: absolute;
  left: 705px;
  top: 612px;
}

#hop-mantis-tee #content,
#hop-madness-tee #content,
#bargain-tee #content,
#worm-cookies-tee #content,
#fleeting-truth-tee #content,
#surf-sumo-tee #content
{
  width: 600px;
}
#hop-mantis-tee #mainimage,
#hop-madness-tee #mainimage,
#bargain-tee #mainimage,
#worm-cookies-tee #mainimage,
#fleeting-truth-tee #mainimage,
#surf-sumo-tee #mainimage
{
  position: relative;
}
.paypalform
{
  text-align: center;
  position: absolute;
  background-color: yellow;
  /* border: 3px outset black; */
  border: 1px solid black;
  box-shadow: 5px 5px 5px #666;
  border-radius: 10px;
  padding: 5px;
}
#worm-cookies-tee .paypalform
{
  left: 75px;
  top: 365px;
}
#surf-sumo-tee .paypalform
{
  left: 60px;
  top: 300px;
}
#fleeting-truth-tee .paypalform
{
  left: 350px;
  top: 330px;
}
#hop-mantis-tee .paypalform
{
  left: 60px;
  top: 450px;
}
#hop-madness-tee .paypalform
{
  left: 125px;
  top: 510px;
}
#bargain-tee .paypalform
{
  left: 402px;
  top: 298px;
}