/* Core Styles */
.preload {
  display: none;
  visibility: invisible;
  }
html {
  padding: 0;
  margin: 0;
}
body {
  background-color: #336699;
  color: #ffffcc;		
  font-family: Helvetica, Arial, Verdana;
  font-size: 110%;
  line-height: 130%;
  text-decoration: none;
  margin: 0px;
  padding: 0px;
}
a:link{
   color: #cbeb66; 

}
a:active{
   color: #cbeb66; 

}
a:focus{
   color: #ff7700; 

}
a:visited{
   color: #a9c944; 

}
a:hover{
  color:#FFF644;
  text-decoration: underline;
  }
a img {
  border: none;
  vertical-align: text-bottom;
  }
a {
  text-decoration : none;
  outline: 0;
  color: #037abe;
  }
h1 {
  font-size: 30px;
  color: #ffcc00;		
  font-weight: normal;
  margin: 2px 0px 4px;
  line-height: 1.2em;
  }
h2 {
	font-size: 25px;
	font-weight: normal;
	color: #ffdb55;		
	margin: 2px 0px 4px;
	line-height: 1.6em;
  }
h3 {
	font-size: 18px;
	font-weight: normal;
	color: #ffee77;		
	margin: 15px 0px 4px;
}
h4 {
	font-size: 14px;
	color: #ffee77;		
	text-decoration: none;
	font-weight: normal;
	margin: 2px 0px;
}
ul {
  text-align: left;
}

#main-wrapper {
     position: relative;
     width: 100%;
     margin: 0px auto;
     max-width: 600px;
     min-width: 320px;
     padding: 5px;
  }

#main-body {
   position: relative;
   padding: 0px 10px;
   margin: 0px auto;
   word-wrap: break-word;
   text-align: left;
   overflow: hidden;
   display: block;
}
#nav-wrapper {
    display: block;
    position: relative;
    overflow: hidden;
    color: #ffcc00;
    text-align: left;
    padding: 0px;
    margin: 5px 0px 0px;
}
ul#nav {
  clear: both;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0px;
  margin: 0px auto 0px;
  font-size: 15px;
}
ul#nav li {
  list-style: none outside none;
    float: left;
    padding: 0px;
    width: 20%;
    height: 103px;
}
ul#nav li a {
    width: 100px;
    height: 83px;
    text-align: center;
    margin: 0px auto;
    padding: 0px;
    display: block;
  }
ul#nav li span {
  display: none;
  }
ul#nav li span img {
text-align: center;
margin: 0px auto;
display: block;
}
.index #logo span, 
.about #about span, 
.buy #buy span,
.monsters #monsters span,
.garden #garden span {
  display: block;
  }
.about #about a:hover, 
.buy #buy a:hover,
.monsters #monsters a:hover,
.garden #garden a:hover {
  cursor: default;
  }
ul#nav li a:hover {
  border-bottom: 6px solid #ee5533;
  cursor: pointer;
  }
#logo a {
  background-image:url('/monster-nav/logo_yellow_simple4-ti.gif');
  }
.index #logo a:hover {
  background-image:url('/monster-nav/logo_yellow_simple4-ti.gif');
  }
#logo a:hover {
  background-image:url('/monster-nav/logo_yellow_simple4_over-ti.gif');
  }
#monsters a {
  background-image: url('/monster-nav/monsters.gif');
  }
.monsters #monsters a:hover {
  background-image:url('/monster-nav/monsters.gif');
  }
#monsters a:hover {
  background-image: url('/monster-nav/monsters-over.gif');
  }
#garden a {
  background-image:url('/monster-nav/garden.gif');
  }
.garden #garden a:hover {
  background-image:url('/monster-nav/garden.gif');
  }
#garden a:hover {
  background-image:url('/monster-nav/garden-over.gif');
  }
#about a {
  background-image:url('/monster-nav/about.gif');
  }
.about #about a:hover {
  background-image:url('/monster-nav/about.gif');
  }
#about a:hover {
  background-image:url('/monster-nav/about-over.gif');
  }
#buy a {
  background-image:url('/monster-nav/buy.gif');
  }
.buy #buy a:hover {
  background-image:url('/monster-nav/buy.gif');
  }
#buy a:hover {
  background-image:url('/monster-nav/buy-over.gif');
  }
.garden-icons {
  position: relative;
  display: block;
  oveflow: hidden;
  padding: 0px;
  margin: 10px auto;
  text-align: center;
}
.garden-icons a {
  display: inline;
  }
.garden-icons a:hover  {
  border-bottom: 10px solid #aa4422;
  }
.garden-icons a:focus  {
  border-bottom: 10px solid #fff;
  }
a.emphasis,a.emphasis:active,a.emphasis:focus,a.emphasis:link,a.emphasis:visited {
  color:#ffffff;
  font-size: 18px;
  }
a.button{
  cursor: pointer;
  color: black;
  display: block;
  float: left;
  background-image: url(/monster-nav/orange-bg.gif);
  background-repeat: no-repeat;
  height: 52px;
  width: 80px;
  font-size: 14px;
  padding: 5px;
  margin: 4px;
  line-height: normal;
  text-align: center;
  font-weight: bold;
  font-family: Arial, Helvetica;
}
a.button:visited, a.button:link, a.button:focus {
  color: black;
  text-decoration: none;
  }
a.button:hover {
  background-image: url(/monster-nav/orange-bg-hover.gif);
  color: black;
  text-decoration: none;
  }
a.button span {
  font-family: Arial, Helvetica;
  width: 90px;
  cursor: pointer;
  }

#main-body .entry img,
#main-body .storycontent img {
  border: 1px solid #333;
  box-shadow: 0 0 10px #112244;
}
#main-wrapper .resize img,
#main-body .entry img,
#main-body .storycontent img {
 width: 100%;
 margin: 0px auto;
 }
#main-wrapper .no-resize img {
  width: auto;
  }
#main-wrapper .no-shadow img {
  box-shadow: none;
  border: none;
  }
.ui-mobile body,
.ui-body-c {
  padding: 0px;
  margin: 0px;
  background: #336699;
  text-shadow: none;
  color: #ffcc00;
  }
.ui-btn-icon-left .ui-icon {
    left: 50px;
}
.ui-collapsible-heading a .ui-btn-inner {
    padding-left: 80px;
}
ul#nav-mobile {
   background-color: transparent;
   margin: 0px;
   padding: 0px;
   text-align: center;
   z-index: 2;
   display: inline-block;
}
ul#nav-mobile li {
  width: 33.33%;
  list-style: none outside none;
  float: left;
  margin: 0px 0px 0px;
  padding: 0px;
  border: none;
  }
ul#nav-mobile li a {
  text-align: center;
  display: block;
  font-size: 115%;
  margin: 0px auto;
  padding: 5px 0px;
  border: none;
  }
#nav-mobile a:hover {
  color:#ffcc00;
  }
#nav-mobile a {
  color: #ffffff;
  font-weight: normal;
  text-decoration: none;
  }
#nav-mobile a.active {
  color:#ff9900;
  }
.swipe {
  clear: both;
  position: relative;
  padding: 4px 0px 0px 12px;
  border-bottom: 1px solid #aaa;
  font-size: 120%;
  font-family: Arial, Helvetica;
  color: #eee;
  font-weight: lighter;
  }
.swipe a {
  font-weight: lighter;
  text-decoration: none;
  color: #ff9900;
  }
.swipe a:hover {
  color: #ffcc00;
  }
img.hero {
  width: 100%;
  max-width: 400px;
  }
img.small-hero {
  height: 100%;
  margin-top: 0px;
  max-height: 200px;
  }
.ui-page {
  text-align: center;
  margin-bottom: 20px;
  }
.ui-content {
  padding: 0px!important;
  text-align: center;
  }
.ui-header {
  width: 50px;
  font-size: 11px;
  z-index: 99;
  text-align: center;
  top: 0 !important;
  left: 0 !important;
  position: fixed !important;
  }
.ui-footer {
  text-align: center;
  position: fixed !important;
  bottom: 0;
  background-color: #333;
  }
.ui-collapsible-content {
  text-align: left;
  }
.entry {
  padding: 5px;
  }
.feedback {
  position: relative;
  display: block;
  overflow: hidden;
  }
#footer-wrapper {
  clear: both;
  margin: 15px 0px 25px;
  padding: 15px 0px;
  }
.footer {
  margin: 0px auto 0px;
  padding: 0px 10px;
  font-size: 18px;
  line-height: 22px;
  }
.footer img{
  border: 1px solid #333;
  box-shadow: 0 0 10px #112244;
  float: left;
  margin: 0px 10px 0px 0px;
  }
.two-column, .column-1, .column-2 {
  position: relative;
  display: block;
  padding: 5px 2%;
  }
.two-column {
  width: 43%;
  float: left;
  }
.column-1 {
  width: 40%;
  }
.column-2 {
  width: 46%;
  }
.column-3 {
  clear: both;
  padding: 0px 2%;
  margin: 0px;
  }
.column-1 {
  float: left;
  }
.column-2 {
  float: right;
  }
.break {
  clear: both;
}
.monster {
  height: 150px;
  padding: 15px;
  float: left;
  }
.is-collapsed span.panel {
  display: none;
  }
.is-expanded span.panel{
  display: block;
  }
div.rule {
  border-bottom: 1px solid #aaa;
  margin: 0px 15px 0px 0px;
  }
h4.is-expanded span.panel {
  font-weight: normal;
  font-size: 14px;
  }
h4.is-collapsed, h4.is-expanded {
  padding: 0px 0px 0px 5px;
  }
.quote {
  color: white;
  font-size: 160%;
  line-height: 160%;
  }
#canvas {
  background-color: #339966;
  background-image: url(/canvas/plants_background.png);
  margin: 10px auto 20px;
  display: block;
  }
#canvas1 { 
  position: absolute;
  left: 20;
  top: 40;
  z-index: 2;
  }
#canvas2 { 
  left: 20;
  top: 0;
  }
#pants {
  position: absolute;
  left: 20;
  top: 40;
 }
#log {
  position: absolute;
  left: 800;
  top: 40;
  display: none;
  }
#minHeight {
   height: 400px;
  }
.print {
  display: none;
  text-align: center;
  }
.handheld, 
.mobile {
  display: none;
}
.screen {
  display: block;
}
/* cafepress  overrides */

#sellPriceId, .breadCrumb, #defaultColor, .saveCartHeader, #customerAssurance {
  color: #fff !important;
  }

.xsmallText, .orId p, .xmallText, #productInfo, #extraDetails, .connect_widget_summary, .connect_widget_text, .cartItem {
  color: #ffeecc !important;
  }

.tablebg, .tablebg2
 {
   background-color: #224477 !important;
   color: #ffeecc !important;
  }
#saveYourCart {
   background-color: #112244 !important;
  color: #ffeecc !important;
}

/* MOBILE STYLES GO HERE */
@media screen and (min-width: 0px) and (max-width: 480px) {

img.small-hero {
  height: 100%;
  margin-top: 0px;
  max-height: 200px;
  }
img.hero {
  width: 100%;
  max-width: 320px;
  margin-top: 0px;
  }
.swipe {
  display: block;
  }
.handheld, 
.mobile {
  display: block;
  }
.screen {
  display: none;
  }
#main-wrapper {
  padding: 0px;
  }
#main-body iframe{
  max-width: 300px;
  margin: 0px auto;
  }
ul#nav li {
  width: 33.33%;
  }
.column-1, .column-2 {
  clear: both;
  float: none;
  border: none;
  display: block;
  padding: 0px 20px;
  margin: 0px;
  width: 80%;
  }

}

/* TABLET STYLES GO HERE */
@media screen and (min-width: 481px) and (max-width: 760px) {

img.hero {
  width: 100%;
  max-width: 320px;
  }
.swipe {
  display: block;
  display: relative;
  }
#main-wrapper .resize img,
#main-body .entry img,
#main-body .storycontent img {
 width: 100%;
 margin: 0px auto;
 }
#main-wrapper {
     position: relative;
     width: 100%;
     margin: 0px auto;
     max-width: 600px;
     min-width: 320px;
     padding: 0px;
  }
ul#nav li {
  width: 33.33%;
  }

}

/* Everything else */
@media screen and (min-width: 761px) {



}

/* iPad specific*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

body {
  zoom: 100%;
  }

}