/*
   

   Priscilla Heslin
   Author: Tom Patterson
   Date: 6/15/2011  

   Filename:         css.css
   Supporting Files:  index.htm; treatment.htm; contact.htm; resources.htm; specialties.htm; ph.jpg; gardenphoto.jpg
*/

body  {background-color: white; font-family: Arial, Helvetica, sans-serif}
h1  	{font-size: 1.7em; letter-spacing: 0.2em; text-indent: 1em}
h2	{font-size: 1.1em; letter-spacing: 0.1em; text-indent: 1em; text-align:center}
h3	{width: 20em; padding-left: 1em}
h4	{font-size: 1.1em; letter-spacing: 0.001em; text-indent: 1em; text-align:center}

address {text-align: center; font: small-caps 0.8em sans-serif; 
	border-top: 0.5em double green; padding-top: 1em}

#gardenphoto {float:center}


#promoimage {float:right; margin: 0em 0em 1em 1em}

#outer	{width: 40em}


#inner {margin-left: 12em; padding-left: 1em;
	border-left: 0.1em solid green}



dt {
   padding-left: 64px;
}
.mobile_nav {
   display: none;
}
.navmenu {
   padding-left: 36px;
}
.navmenu li {
   list-style: none;
   display: inline-block;
   margin-right: 22px;
}
@media only screen and (max-width: 1024px) {
   html, body {
      margin: 0px;
      padding: 0px;
   }
   #inner {
      margin-left: 2px;
      padding-left: 8px;
      padding-right: 8px;
   }
   #outer {
      width: 100%;
   }
   #gardenphoto {
      width: 100%;
      height: auto;
   }
   p, ul, address,dl {
      line-height: 1.4em;
   }
}
@media only screen and (max-width: 767px) {
   .mobile_nav {
      display: block;
      position: fixed;
      width: 100%;
      background: rgb(0, 154, 0);
      color: #fff;
      padding: 16px 0px;
      text-align: center;
      font-weight: bold;
      top: 0;
      left: 0;
      z-index: 9;
   }
   .mobile_nav .bar {
      width: 25px;
      position: absolute;
      left: 0px;
      top: 0px;
      padding: 13px 12px;
   }
   .mobile_nav .bar span {
      display: block;
      border-top: 4px solid #fff;
      margin-bottom: 5px;
      border-radius: 2px;
   }
   #inner {
      padding-top: 50px;
      min-height: calc(100% - 50px);
   }
   .navmenu {
      position: fixed;
      width: 100%;
      background: #fff;
      top: 50px;
      left: 0px;
      margin: 0px;
      padding: 0px !important;
      box-shadow: 0px 4px 9px 0px rgba(0,0,0,0.4);
      transition: all ease-in 0.5s;
      display: none;
   }
   .navmenu.showopen {
      display: block;
   }
   .navmenu.showopen li {
      margin: 0px;
      display: block;
      border-top: 1px solid #dadada;
   }
   .navmenu.showopen li a {
      padding: 12px 20px;
      display: block;
      text-decoration: none;
   }
   h3 {
      max-width: calc(100% - 1em);
   }
   iframe {
      width: 100%;
   }
   dd {
      margin-left: 5px;
   }
   dt {
      padding-left: 20px;
   }
   h1, h2, h3 {
      padding-top: 5px;
      padding-bottom: 5px;
   }
   h2 {
      text-indent: 0px;
   }
   #outer ul {
      padding-left: 30px;
   }
}