/* For Joy of Six website.   Author: Peter Howard, maintained by Heather Howard */

.basic {background: #336688;  margin-top: 0;
        color: #FFFFFF;  font-family: Arial, Helvetica, sans-serif;  font-size: small;
        text-align: left}

.titlefont {color: #FFCC00;
            font-family: Garamond, Times New Roman; font-size: 2rem; font-weight:bold}
.pagename  {color: #FFCC00;  font-size: 1rem}
    @media only screen and (max-width: 1000px)
    {
        .titlefont {font-size: 1.4rem}
    }

.subtitle, h1 {color: #FFCC00;  text-align: center;  font-weight: bold;  font-size: 1.2rem}

h1 /* same as subtitle */
h2 {text-align: center;  font-size: 1.1rem}
h3 {text-align: center;  font-size: 1rem}

.poemtitle {color: #FFCC00;  text-align: left;  font-weight: bold;  text-decoration: underline;  font-size: larger}

.poemtext {color: #FFCC00}
.nametext {color: #FFCC00;  text-align: right;  font-weight: bold}
.contrasttext  {color: #FFCC00}

.caption {color: #FFCC33;  text-align: center;  font-style: italic;  font-size: smaller;  line-height: 1.5em}
.acknowledgement {color: #FFCC00;  text-align: right;  font-style: italic;  font-size: smaller}

a {font-weight: bold;  text-decoration: none}
a:link      {color: #FF9900}
a:visited   {color: #FF9900}
a:hover     {color: #FFCC00; text-decoration: underline}
a:active    {color: #FFCC00}

a[target]   {border: 0;  padding-top: 6px;  padding-bottom: 6px}

.linkintro {color: #FF9900;  font-weight: bold}   /* introduces links on same line */
.plain {color: #FF9900; }   /* same colour as link */

.quote  {color: #FFFFFF;  text-align: left}
.quoter {color: #FFCC33;  text-align: right;   font-style: italic}
.rule   {color: #334455;  text-align: center;  width: 75%}

ul.type1 {list-style-type:  none;  color: #FFFFFF}
ul.type2 {list-style-type:  none;  color: #FF9900}


<!-- html {height: 100%} -->

*  {box-sizing: border-box}

table.base, table.frontbase
{
    table-layout: fixed;  max-width: 100%;  width: 760px;  margin: auto;  border: 0;  padding: 1vw;   height: auto;
}
    @media only screen and (max-width: 1000px)
    {
        table.base, table.frontbase
        {
            width: 100%;
        }
    }

table.frontpageinfo
{
    table-layout: fixed;  width: 100%
}
.frontpageinfo td           {padding: 1%;  vertical-align: top}
.frontpageinfo td.leftcol   {width: 39%;  text-align: center}
.frontpageinfo td.vertfence {width: 5px; border-left: 4px solid #FFCC00; padding: 0}
.frontpageinfo td.rightcol  {width: auto}

.frontpageinfo td p.linkbutton
{
    display: none;  width: 100%; 
    margin: 4px;  border: 1px solid #306080;  border-radius: 4px;  padding: 6px;
    clear: both
}
    @media only screen and (max-width: 1000px)
    {
        .frontpageinfo td.vertfence {width: 0;  display: none}
        .frontpageinfo td.rightcol  {width: 0;  display: none}
        .frontpageinfo td p.linkbutton {display: block}
    }


table.frontpagemenu
{
    table-layout: fixed;  width: 100%;
    margin: margin: 0;  border: 0;  padding-left: 5px;  border-spacing: 0 10px;
    text-align: left
}
.frontpagemenu td.leftcol  {width: 20%;  text-align: left }
.frontpagemenu td.rightcol { }


table.mainheader
{
    table-layout: fixed;  width: 100%;  margin-top: 5px;  text-align: center;
}
.mainheader tr {vertical-align: middle}
.mainheader td.leftcol  {width: 55%;  text-align: left }
.mainheader td.rightcol {width: 45%;  text-align: right}


table.header,  table.spacer,  table.footer,
               table.biog,  table.book,  table.info,  table.poem  
{
    table-layout: fixed;  width: 100%;  margin: auto;
}
.header tr {vertical-align: middle;  text-align: center}
.spacer tr {vertical-align: middle;  text-align: center}
.footer tr {vertical-align: middle;  text-align: center}

.biog   tr {vertical-align: top;     text-align: left}
.book   tr {vertical-align: middle;  text-align: left;  height: 200px}
.info   tr {vertical-align: top;     text-align: left}
.poem   tr {vertical-align: top;     text-align: left;  color: #FFCC00}
.poem   tr.centered {text-align: center}

.biog   td.leftcol   {width: 33%;  padding: 3%}
.biog   td.vertfence {width: 5px; border-left: 4px solid #FFCC00}
.biog   td.rightcol  {padding: 3%}
.biog   td.portpic   {vertical-align: middle;  text-align: center}
.info   td.landpic   {vertical-align: top;     text-align: center}

.book   td p,  .poem td p
{
    display: block;  float: left;  width: 45%;  margin: 5px;  padding: 10px;   
}
/*.book td p:  {width: 25%}   /* override */
    @media only screen and (max-width: 1000px)
    {
        .poem td p
        {
            width: 98%;
        }
    }


.biog td p.linkbutton,  .info td p.linkbutton,  .books td p.linkbutton
{
    display: block;  width: 100%; 
    margin: 4px;  border: 1px solid #306080;  border-radius: 4px;  padding: 6px;
    clear: both
}

/* image height dominates for biog, text paragraph height dominates for info */
/* Height N/A for books, since only one line - used to link to another website */

.biog td p.linkbutton      {height: 76px;  font-size: smaller}
.biog td p.linkbutton img  {width: 64px;  float: left}
.info td p.linkbutton      {height: 100px}
.info td p.linkbutton img  {width: 20px;  float: left;  border: 1px solid #FF9900}
.books td p.linkbutton     {margin-top: 10vh; margin-bottom: 10vh;  font-size: larger}
.books td p.linkbutton img {width: 40px;  float: left;  border: 1px solid #FF9900}
.linkbutton span  {position: relative;  left: 4px;  top: 4px}


/* img {border: 0;  max-width: 100%;  height: auto;  vertical-align: top} */
img {border: 0;  max-width: 100%;  vertical-align: top}
img.artscouncil     {width: 120px;  margin: 1vh}
img.book            {width: 100px}
img.bookL           {width: 256px}
img.menubutton      {width: 20px}
img.poet            {width: 256px}  /* Thumbnails sized in linkbutton class */
img.poetsL          {width: 567px}
img.weddingWH       {width: 640px}


.linkbutton img:hover,  .info td p.linkbutton img:hover,  img.book:hover,
    img.menubutton:hover,  .books td p.linkbutton img:hover
{
    border: 1px solid #FFCC00
}

    @media only screen and (max-width: 1000px)  /* small screen */
    {
        img.poets        {width: 100vw}
        img.poetsFront   {width: 50vw}    /* used for RH col displayed by itself */
        img.poetsFront:hover  {transform: scale(2.0); transform-origin: 10% 50%} 
    }
    @media only screen and (min-width: 1000px) /* large screen */
    {
        img.poets        {width: 256px}
        img.poets:hover  {transform: scale(2.5)}
        img.poetsFront        {width: 320px}
        img.poetsFront:hover  {transform: scale(3.0)}
 
    }


img.fence     {width:  50%;  height:  4px;  margin: 5px 0 5px 0}
img.mainfence {width: 100%;  height:  4px;  margin: 5px 0 5px 0}
img.fence0    {width: 100%;  height:  4px;  margin: 0}
/* img.vertfence {width:  4px;  height: 100%;  margin: 0} height does not work */


/* audio */
#player      {max-width: 100%;  width: 100%}
#noplayer    {max-width: 100%;  width: 100%;  visibility: hidden}
#player0     {max-width: 100%;  width: 95%;  margin-top: 2vh}

video        {max-width: 100%;  width: 100%;  margin-top: 2vh;  margin-bottom: 2vh}
video.J6logo {width: 256px}   /*  height: 256px */
video.quotes {width: 256px}   /*  height: 75px  */

iframe.youtube, object.youtube   /* J6 Wordfest video is 425px wide */
{
   max-width: 100%;  width: 100%;  height: 75vh;  border: 1px solid #CC6633
}


/* Misc overrides */

.invis        {color: #336688}     /* same colour as background */


/* td {border: 1px solid #FF00FF}  /* for debug only */

/* End */