/*  Treewind CSS */

@import url('normalize.css');

h1 { text-align: center; }

ul
{
  margin: 0;
  padding: 0;
}

li
{
  margin-left: 1em;
  padding: 0;
  line-height: 1.2;
}

BODY 
{ font-family: sans-serif;
  background: #eee;
  color: black; 
  line-height: 1.5;
}

div.wholepage
{
  background: white;
  color: black;
  margin: auto;
  max-width: 1000px;
  padding: 10px;
}

@media screen and ( max-width: 500px)
{
  div.wholepage { padding: 5px; }
}

A:link
{  color: #00c;
  text-decoration: underline;
}

A:visited
{ color: #900;
  text-decoration: underline
}

A:active
{ color: #060;
  background-color: #cfc;
  text-decoration: underline;
}

A:hover
{ color: #009;
  background-color: #cff; 
  text-decoration: underline
}

table
{
  border-collapse: collapse;
}

div.headerpanel
{
  background: white url(/images/treewind-logo-notext.jpg) no-repeat left; 
  padding: 10px 10px 10px  210px; 
  color: #363; 
}

.centered_text { text-align: center; }

/* small screen adjustments */
@media screen and (max-width: 500px)
{
  div.headerpanel
  {
    background: white;
    padding: 2px;
  }

  div.headerpanel h1
  {
    font-size: 100%;
  }

  span.largeonly
  {
    display: none;    
  }
}

/* generic switching by screen size at 500px breakpoint */
.smallscreen { display: none; }
.widescreen { display: block; }
@media screen and (max-width: 500px)
{
  .smallscreen { display: block; }
  .widescreen { display: none; }
}

table.reqvars tr td
{
  font-size: 90%;
  background: white;
  color: black;
  padding: 5px;
  border: 1px solid #999;
}

h1.homepage { margin: 0 }
table.homepage
{
  margin-top: 10px;
  background: #150;
} 

table.homepage tr td, table.homepage tr th
{
  min-width: 200px;
  max-width: 300px;
  padding: 10px;
}

div.homeouterpanel
{
  margin: 5px 0 0 0; 
  background: #060; 
  border-radius: 7px; 
  padding: 5px; 
  max-width: 900px
}

/********** navigation menus ****/
div.widemenu
{
  max-width: 800px;
  margin-top: 5px;
  background: #dfc;
  padding: 1px;
}

div.widemenu a
{
  text-decoration: none;
  display: inline-block;
  background: white;
  color: black;
  margin: 5px 5px;
  padding: 2px;
  border: 1px solid #090;
  border-radius: 5px;
}

div.widemenu a.self, div.widemenu a.self:hover
{
  background: #030;
  color: white;
}

div.widemenu a:hover { background: #9c9; }

div.smallmenu { display: none; }

/****** small screen menu *****/


@media screen and ( max-width: 500px)
{
  div.widemenu { display: none; }

  div.headerpanel h1 { text-align: center; }

  /* menu icon ("hamburger") */
  div.menuicon
  {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    height: 20px;
  }

  div.menuicon div.menuline
  {
    display: block;
    vertical-align: middle;
    margin: 3px;
    height: 3px;
    width: 18px;
    background: black;
  }

  div.smallmenu a
  {
    color: black;
    text-decoration: none;
    vertical-align: middle;
  }

  div.smallmenu a.menuicon
  {
    display: inline-block;
    vertical-align: middle;
    margin: 5px 20px;
  }

  div.smallmenu a.sm_item
  {
    display: block;
    margin: 2px 0;
    background: #eee;
    text-align: center;
    padding: 10px 0;
  }

  div.smallmenu a.sm_item:hover
  {
    background: #f8f8f8;
  }

  div.smallmenu
  {
    display: block;
    margin-top: 5px;
    background: #ad9;
    padding: 5px;
    vertical-align: middle;
  }
}

/************/

I
{
	font-family: times,serif;
}

TABLE
{
  border-collapse: collapse;
}

th
{   
    background: white;
    text-align: center
}

td
{
  vertical-align: top;
}

div.homepanel
{
  border: 1px solid green;
  border-radius: 7px;
  background: white;
  margin: 5px;
  padding: 5px;
  display: inline-block;
  vertical-align: top;
  /* width: 25%; */
  width: calc(33% - 25px);
}

div.oshoquote
{
  display: block; 
  width: 90%; 
  margin: 20px auto;
  background: #efe; 
  color: #066; 
  padding: 10px
}

div.homepanel.photo
{
  width: 95%;
  text-align: center;
  margin: 10px auto;
}

div.homepanel.photo img
{
  display:block;
  margin: 10px auto;
  width: 95%;
}


@media screen and (max-width: 600px)
{
  div.homepanel 
  { 
    display: block; 
    width: 80%;
    width: calc(100% - 20px);
  }
}

form.hlink { text-align: center; margin: 0 0 20px 0 }

div.auth_form
{
  width: 300px;

}

div.auth_form input
{
  max-width: 100%;
}

div.footer { margin: 10px auto 0 auto; background: #eee; text-align: center;}
span.footerline {display: inline-block; margin: 0 20px }

div.content
{
  margin: 0 auto;
  width: 800px;
  max-width: 95%;
  background: white;
  padding: 5px;
}


/****** private home page  *******/

div.privatehome
{
  margin: 20px auto;
  padding: clamp(10px, 5%, 20px);
  width: max-content;
  max-width: 80%;
  border: 1px solid #999;
  border-radius: 20px;
  background: white;
}