/* styledef.css - responsive stylesheet */
/* Copyright 2022 C Leland    */


/* ---------- Global settings                                                 */
/* ---------- Floating - max width 500px --- mobile, tablet, etc.             */
/* -------------------------------------------------------------------------- */
*   {padding:0; border:0; margin:0; outline:0; 
     background-color:#FFE; color:#004; 
     font-size:100%; font-style:inherit; font-weight:inherit;
     font-family: tahoma, verdana, sans-serif;
     vertical-align:baseline;
     overflow:visible; z-index:-5; }
    
@media screen and (min-width:450px)
{
body    {width:100%; height:auto; font-size:100%; }
p	    {widows:2; orphans:2; }
sup     {padding:1pt; font-size:60%; vertical-align:super;
         background-color:inherit; }
sub	    {padding:1pt; font-size:60%; vertical-align:sub; 
         background-color:inherit; }

.hdr    	{width:100vw; height:auto; padding:0; 
             font-family:helvetica, sans serif; font-style:italic;
             overflow:hidden; z-index:10; }
    .title  {padding-left:1vw; font-weight:bold; }
    .motto	{padding-left:4vw; background-color:#004; color:#FFE; }
.ftr        {padding:1vw; width:100vw; height:auto;
             position:fixed; bottom:0; left:0;
             z-index:0; opacity:0.7; }
    .copyrt	{padding-left:4vh; font-size:75%; }

.contents	{width:100vw; height:80vh; }
/* Tiles */
.tile-box   {display:block; width:100vw; height:auto;
             padding:4pt; }
.tile       {float:left; width:46vw; min-height:auto; max-height:auto; 
             border:2vw; border-color:#FFE; 
             padding:4pt; background-color:#BBB;
             margin:0.5vw; }
.tile-hdr   {padding:4pt; background-color:#DDD; color:#004; }
.tile-text  {padding:4pt; background-color:#FFE; }            
/* TOC pages */
.toc-box   {display:block; width:100vw; height:auto;
            padding:2vw; background-color:#FFF; color:#000; }
.toc-box * {background-color:#FFF; color:#000; }
.toc-ol    {display:block; padding:1vw 4vw; list-style-type:decimal; }
.toc-ol li {padding:0.2vw; }

.txt	    {padding:1pt; background-color:#EED; color:#002; }
.txt-hdr    {padding:4pt; background-color:#FFE; color:#004; }
.math       {padding:2pt; background-color:#FFF; color:#222; }
.bold       {font-weight:bold; }
.ital       {font-style:italic; }
.underline  {text-decoration:underline; }
.center         {text-align:center; }
.indent         {padding-left:4vw; text-align:left; }
.indent-half    {padding-left:2vw; text-align:left; }
.indent-dbl     {padding-left:8vw; text-align:left; }
.accent-red     {color:#800; }
.accent-green   {color:#080; }
.accent-blue    {color:#008; }

.huge       {font-size:200%; }
.largest    {font-size:150%; }
.larger     {font-size:130%; }
.large      {font-size:110%; }
.small      {font-size:80%; }
.smaller    {font-size:60%; }
.smallest   {font-size:40%; }
.tiny       {font-size:20%; }

a:hover	            {background-color:#DDC; color:#00C; } 
a:focus, a:active   {background-color:#DDC; color:#00C; } 
a:link, a:visited   {background-color:inherit; color:#00A;
                     text-decoration:none; }
}
/* Phones and tablets, portrait
*/
@media screen and (max-width:449px)
{
body    {width:100%; height:auto; font-size:90%; }
p	    {widows:2; orphans:2; }
sup     {padding:1pt; font-size:60%; vertical-align:super;
         background-color:inherit; }
sub	    {padding:1pt; font-size:60%; vertical-align:sub; 
         background-color:inherit; }

.hdr    	{width:100vw; height:auto; padding:0; 
             font-family:helvetica, sans serif; font-style:italic;
             overflow:hidden; z-index:10; }
    .title  {padding-left:1vw; font-weight:bold; }
    .motto	{padding-left:4vw; background-color:#004; color:#FFE; }
.ftr        {padding:1vw; width:100vw; height:auto;
             position:fixed; bottom:0; left:0;
             z-index:0; opacity:0.7; }
    .copyrt	{padding-left:4vh; font-size:75%; }

.contents	{width:100vw; height:80vh; }
/* Tiles */
.tile-box   {display:block; width:96vw; 
             padding:4pt; }
.tile       {float:left; width:92vw; min-height:auto; max-height:auto; 
             border:2vw; border-color:#FFE; 
             padding:2pt; background-color:#CCC;
             margin:1vw; }
.tile-gap   {float:left; width:2vw; height:auto; 
             padding:1pt; background-color:#FFE; }            
.tile-hdr   {padding:4pt; background-color:#FFE; color:#004; }
.tile-text  {padding:4pt; background-color:#FFE; }           
/* TOC pages */
.toc-box   {display:block; width:100vw; height:auto;
            padding:2vw; background-color:#FFF; color:#000; }
.toc-box * {background-color:#FFF; color:#000; }
.toc-ol    {display:block; padding:1vw 4vw; list-style-type:decimal; }
.toc-ol li {padding:0.2vw; }

.txt	    {padding:1pt; background-color:#EED; color:#002; }
.txt-hdr    {padding:4pt; background-color:#FFE; color:#004; }
.math       {padding:2pt; background-color:#FFF; color:#222; }
.bold       {font-weight:bold; }
.ital       {font-style:italic; }
.underline  {text-decoration:underline; }
.center         {text-align:center; }
.indent         {padding-left:4vw; text-align:left; }
.indent-nil     {padding-left:0.5vw; text-align:left; }
.indent-half    {padding-left:2vw; text-align:left; }
.indent-dbl     {padding-left:8vw; text-align:left; }
.accent-red     {color:#800; }
.accent-green   {color:#080; }
.accent-blue    {color:#008; }

.huge       {font-size:200%; }
.largest    {font-size:150%; }
.larger     {font-size:130%; }
.large      {font-size:110%; }
.small      {font-size:80%; }
.smaller    {font-size:60%; }
.smallest   {font-size:40%; }
.tiny       {font-size:20%; }

a:hover	            {background-color:#DDC; color:#00C; } 
a:focus, a:active   {background-color:#DDC; color:#00C; } 
a:link, a:visited   {background-color:inherit; color:#00A;
                     text-decoration:none; }
}
/* Phones, old small
*/
@media screen and (max-width:400px)
{
body    {width:100%; height:auto; font-size:80%; }
p	    {widows:2; orphans:2; }
sup     {padding:1pt; font-size:60%; vertical-align:super;
         background-color:inherit; }
sub	    {padding:1pt; font-size:60%; vertical-align:sub; 
         background-color:inherit; }

.hdr    	{width:100vw; height:auto; padding:0; 
             font-family:helvetica, sans serif; font-style:italic;
             overflow:hidden; z-index:10; }
    .title  {padding-left:1vw; font-weight:bold; }
    .motto	{padding-left:4vw; background-color:#004; color:#FFE; }
.ftr        {padding:1vw; width:100vw; height:auto;
             position:fixed; bottom:0; left:0;
             z-index:0; opacity:0.7; }
    .copyrt	{padding-left:4vh; font-size:75%; }

.contents	{width:100vw; height:80vh; }
/* Tiles */
.tile-box   {display:block; width:96vw; 
             padding:4pt; }
.tile       {float:left; width:92vw; min-height:auto; max-height:auto; 
             border:2vw; border-color:#FFE; 
             padding:2pt; background-color:#CCC;
             margin:1vw; }
.tile-gap   {float:left; width:2vw; height:auto; 
             padding:1pt; background-color:#FFE; }            
.tile-hdr   {padding:4pt; background-color:#FFE; color:#004; }
.tile-text  {padding:4pt; background-color:#FFE; }           
/* TOC pages */
.toc-box   {display:block; width:100vw; height:auto;
            padding:2vw; background-color:#FFF; color:#000; }
.toc-box * {background-color:#FFF; color:#000; }
.toc-ol    {display:block; padding:1vw 4vw; list-style-type:decimal; }
.toc-ol li {padding:0.2vw; }

.txt	    {padding:1pt; background-color:#EED; color:#002; }
.txt-hdr    {padding:4pt; background-color:#FFE; color:#004; }
.math       {padding:2pt; background-color:#FFF; color:#222; }
.bold       {font-weight:bold; }
.ital       {font-style:italic; }
.underline  {text-decoration:underline; }
.center         {text-align:center; }
.indent         {padding-left:4vw; text-align:left; }
.indent-nil     {padding-left:0.5vw; text-align:left; }
.indent-half    {padding-left:2vw; text-align:left; }
.indent-dbl     {padding-left:8vw; text-align:left; }
.accent-red     {color:#800; }
.accent-green   {color:#080; }
.accent-blue    {color:#008; }

.huge       {font-size:200%; }
.largest    {font-size:150%; }
.larger     {font-size:130%; }
.large      {font-size:110%; }
.small      {font-size:80%; }
.smaller    {font-size:60%; }
.smallest   {font-size:40%; }
.tiny       {font-size:20%; }

a:hover	            {background-color:#DDC; color:#00C; } 
a:focus, a:active   {background-color:#DDC; color:#00C; } 
a:link, a:visited   {background-color:inherit; color:#00A;
                     text-decoration:none; }
}
@media print 
{
    *       {background-color:#FFF; color:#000; }
    body	{width:96vw; 
             font-size:100%; font-family: times, serif; }
}