/* For peterhoward.org/kidstuff.  Authors: Peter Howard, Heather Howard */

/* Colour scheme: */
.light     {color: #FCFCFC}  /* white */
.light2    {color: #ECECEC}
.dark      {color: #000033}  /* blue-black */
.theme     {color: #FF1111}  /* red */
.link1     {color: #FF3300}
.link2     {color: #FF6600}  /* orange */
.link3     {color: #FFAA00}
.accent1   {color: #FF3300;  font-weight: bold}
.tomato    {color: #FF0000;  font-size: 1.25rem;  font-weight: bold}


body.basic {background: #FCFCFC;  margin: 0;
            color: #000033;  font-family: Times New Roman;  font-size: 1rem;  font-weight: normal}

* {box-sizing: border-box}


/* Put page in an invisible table (*_base) within a table (basic), together acting as a 'picture frame mount'.*/
table.basic
{
    table-layout: fixed;  max-width: 100%;  width: 100vw;  height: 100vh;  border: 0; 
}
table.menubase, table.poembase
{
   table-layout: auto;  margin: auto;  border: 0;  
}
table.menubase  {width: 70%;  padding: 0}
table.poembase  {width: 70%;  padding: 0}
@media only screen and (max-width: 1000px) and (orientation: portrait)
    {
       table.menubase, table.poembase 
       {
           width: 100%;
       }
    }


/*********************************************************************************/
/* The above-mentioned '*base' table will contain 3 tables of content:           */
/* '*header', '*grid' and '*footer'.   Kicking off with the '*header' tables ... */       
/*********************************************************************************/
table.menuheader, table.poemheader
{
   table-layout: fixed;  width: 100%;  padding: 1vw;
}
table.menuheader   {border: 2px solid #FF1111}
table.poemheader   {border: 2px solid #ECECEC}

table.menuheader td, table.poemheader td
{
   border: 0;  vertical-align: middle;  text-align: center;
   font-size: 1rem;
}

table.menuheader td h1 {color: #000033;  font-size: 1rem;  font-family: Times New Roman} 


/*******************************************************************************/
/* '*grid' tables contain content, placed between the header and footer tables */
/*******************************************************************************/
table.menugrid, table.poemgrid
{
   table-layout: fixed;  width: 100%;  border: 0;
}
table.menugrid {padding: 0}

table.menugrid td, table.poemgrid td
{
   /*border: 1px solid #ECECEC;*/  padding: 1vw;  text-align: left;  vertical-align: middle
}
table.poemgrid  td         {font-family: Times New Roman; }
table.poemgrid  td.leftcol {width: 50%;  vertical-align: top}
    @media only screen and (max-width: 1000px)
    {
       table.poemgrid  td.leftcol  {width: 70%}
    }

table.poemgrid td h1 {color: #000033;  font-size: 2rem}

table.menugrid td p.linkbutton
{
    display: block;  float: left;
    margin: 4px;  border: 1px solid #306080;  border-radius: 4px;  padding: 6px;  
}
table.menugrid td p.linkbutton      {width: 24%;  height: 200px}
table.menugrid td p.linkbutton img  {width: 100px;  float: left}
table.menugrid td p.linkbutton img:hover  {border: 1px solid #FFAA00}

table.menugrid td p.linkbutton span {position: relative;  left: 4px;  top: 4px}

    @media only screen and (max-width: 1000px)
    {
       table.menugrid td p.linkbutton  {width: 21%;  height: 175px;  line-height: 50%}
    }


iframe.poem   {width: 100%;  height: 60vh}


table.footer
{
   table-layout: fixed;  width: 100%;  border-top: 2px solid #FF1111;  padding: 0;
}
table.footer td
{
   border: 0;  padding: 0;  font-size: 0.75rem;  font-weight: bold;
}


audio {width: 100%}
img              {max-width: 100%;  height: auto;  border: 0}
img.illustration {width: 400px;}  /* jpg 400 x 600 px */
img.button       {width: 5vh;  }  /* jpg 36 x 36 px */
img.button:hover {border: 1px solid #FFAA00}
img.logo         {width: 17vh; } /* jpg 171 x 61 px */
img.logolarge    {width: 17vh; }  /* jpg ditto, enlarged */
img.people       {width: 25vh; }  /* jpg 200 x 254 px */
@media only screen and (max-width: 1000px)
{
    audio      {width: 100%} 
    img.logo   {width: 0}
}


/* divs manipulating the image next to poem: on small screen, have enlargeable thumbnail:- */
@media only screen and (max-width: 1000px)
{
    #picselect       {width:100px; height:150px;  transition: 2s ease-in-out}
    #picselect:hover {transform: rotate(360deg) scale(4.0); transform-origin: 90% 50%;}
}


a {font-size: 1vw; font-weight: bold;  text-decoration: none;  vertical-align: bottom}
a:link               {color: #FF3300}
a:visited            {color: #FF6600} 
a:hover              {color: #FFAA00; text-decoration: underline}
a:active             {color: #FF6600}
.footer td a:link    {color: #FF3300; font-size: 0.75rem}
.footer td a:visited {color: #FF3300}
.footer td a:hover   {color: #FFAA00; text-decoration: underline}
.footer td a:active  {color: #FF6600}
@media only screen and (max-width: 1000px)
{
    a {font-size: 1.75vw}
}


/* Misc overrides */

.center {text-align: center}
.left   {text-align: left}
.right  {text-align: right}
.small  {font-size:  0.75rem}
.invis  {color: #FCFCFC}     /* same colour as background */


.note   /* eg, footnote */
{
   font-size: 0.75rem;  font-style: italic;
}