/* For 'Peter's Haiku Generator'.  Author: Heather Howard, migrated to HTML5 */


a {font-weight: bold;  text-decoration: none;  font-size: 1rem;  vertical-align: bottom}
a:link     {color: #0000A0}
a:visited  {color: #FF5500}
a:hover    {color: #FF5500; text-decoration: underline}
a:active   {color: #FF5500}
a.footer   {font-size: 0.8rem}


body       {margin: 0;  font-family: Arial, Helvetica, sans-serif;  font-size: 1rem;  font-weight: normal;  color: #000066;  background-color: #EEEEEE}
/* tried CC6633 */

* {box-sizing: border-box}


div.buttonpanel
{
    clear: both;  text-align: center
}
input  {width: 80%;   color: #000066;  border: 1px solid #000066;  border-radius: 5px}
input:focus {border: 2px solid #CC6633}
select {width: 100%;  color: #000066;  border: 1px solid #000066}


h1 {text-align: center;  font-size: 2rem}
h2 {text-align: left;  font-size: 1.5rem}
table.frontpanel td h1 {color: #CC6633}

    @media only screen and (max-width: 1000px)
    {
        h1, h2 {font-size: 1.1rem}
    }


img       {max-width: 100%;  height: auto;  border: 0}
          /* Image sizes for mobile - defined under table columns below */
img.left  {float: left}    img.left2 {max-width: 0%}
img.right {float: right}


iframe.poem   {width: 100%;  height: 50vh;  border: 1px solid #CC6633}
iframe.aux    {width: 100%;  height:  8vh;  position: relative;  top: 1vh;  border: 1px solid #EEEEEE}
iframe.hidden {width: 0;  height: 0;  border: 0;  position: fixed;  bottom: 0;  right: 0}

    @media only screen and (max-width: 1000px) and (orientation: landscape)
    {
        iframe.poem   {height: 50vh}
    }

table
{
    table-layout: fixed;  max-width: 100%;  width: 90%;
    margin: auto;  margin-top: 2vh;  margin-bottom: 2vh;  padding: 1vh;
    background-color: #FFFFFF
}
td  {padding: 1vh}
table.frontpanel td {border: 0;  vertical-align: top}
table.info       td {border: 1px solid #CC6633}

    @media only screen and (min-width: 1000px)
    {
        table.info {width: 60%}
    }

td.left   {width: 15%}
td.middle {width: 70%}
td.right  {width: 15%}

    @media only screen and (max-width: 1000px) and (orientation: landscape)
    {
        td.left   {width: 30%}   img.left  {max-width:   0%}
                                 img.left2 {max-width: 100%}
        td.middle {width: 70%}   img       {max-width:   0%}
        td.right  {width:  0%}   img.right {max-width:   0%}
    }

    @media only screen and (max-width: 1000px) and (orientation: portrait)
    {
        td.left   {width: 45%}   img.left  {max-width: 100%}
                                 img.left2 {max-width:   0%}
        td.middle {width: 55%}   img       {max-width:   0%}
        td.right  {width: 0%}    img.right {max-width:   0%}
    }


table.footer_embed
{
    width: 100%;  margin: auto;  margin-top: 1vh;  border: 0;  padding: 1vh;
}
table.footer_embed td  {text-align: center;  border: 0;}

/* end */