/* stylesheet for The Trainer's Friend main pages */
/* last updated 17 February, 2026 - responsive additions 2026 - new */

/* {box-sizing: border-box;}  */

.topnav       {position: absolute; top: 8px; left: 8px; }

body         {font-family: Arial, sans-serif; }
body.back    {background-image: url("images/WB00516_.gif");}
body.back2   {background-image: url("images/WB00516_.gif"); font-family: "Comic Sans MS";}
body.back3   {background: linear-gradient(to bottom, beige, palegreen); font-family: "Comic Sans MS";}
body.back4   {background: linear-gradient(to bottom, skyblue, palegreen); }

/* caption      {color: red; font-weight: bold; font-size: 12pt; margin-bottom : 3mm;} */

.container {display: contents; grid-template-columns: auto auto auto auto auto;
            background-color: blue; padding: 3px; width: 30%;}
/*
.container {display: inline-grid; grid-template-columns: auto auto auto auto auto;
            background-color: blue; padding: 3px; width: 30%;}
*/
.container div {background-color: white; border: 1px solid black; font-size: 10pt; text-align: center;
                padding: 5px; font-weight: bold;}



div.courselist {margin-left: 4px;}
/* .courselist   {margin-left: 5%; width: 65%; padding-left: 6px;}  */
div.farm     {border-color: #B00060; border-style: groove; border-width: 3px; width: 65%; 
              margin-below: 8px; padding-left: 6px; float: left;}
div.links    { }
div.price-new  {border-color: blue; border-style: solid; border-width: 3px;
                float:right; width: 40%; padding: 8px; margin-right: 8px;
                margin-below: 8px;}

h1           {color: red; text-align: center; font-size: 16pt; }

h2.leftblk   {color: black;   text-align: left;   font-size: 16pt; }

li           {}
li.item      {display: inline;}
li.lst2      {color: red;   font-size: 14pt; font-weight: bold; }

ul           {font-size: 14pt; list-style-type: square; line-height: 1.3em;}
ul.menu      {list-style-type: none; margin: 0; padding: 0; font-size: 10pt;}
ul.midbold   {font-weight: bold; font-size: 12pt; list-style-type: square; 
              margin-left: 1.5em; line-height: 1.6em;}
ul.midb142   {font-weight: bold; font-size: 14pt;  list-style-position: outside;}


p.fluter     {color: black; font-size: 10pt; text-align: center; margin-top: 8%; 
              margin-bottom: 1%;  bottom: 0; padding: 8px;}

p.link       {font-size: 8pt; }
p.ten        {font-weight: bold; font-size: 10pt; }
.top         {position: fixed; top: 65%; border: 3px solid red; width: 31px; padding: 3px; margin-left: 89%; }
th           {color: red; padding-left: 4px; padding-right: 4px; text-align: left;}

td           {padding-left: 4px; padding-right: 4px; text-align: left; font-size: 12pt;}

.ccc         {border-top: grey 1px solid; border-left: grey 1px solid; 
              border-bottom: silver 1px solid; border-right: silver 1px solid; }

.desc        {font-weight: normal; padding-top: 5px; padding-left: 5px; font-size: 12pt;
              border-top: grey 1px solid; border-left: grey 1px solid; padding-bottom: 5px;
              border-bottom: silver 1px solid; border-right: silver 1px solid;}

td.tdempty   {border: none; font-size: 10pt; padding: 2px;}
td.deschead  {font-weight: bold; padding-top: 2px;
              border: black solid 2px; text-align: center;}
.blue        {color: blue; }
.bold        {font-weight: bold;}
.bold12      {font-size: 12pt; font-weight: bold}
.bold14      {font-weight: bold; font-size: 14pt;  }
.bold16      {font-size: 16pt; font-weight: bold}

.bottomBox   {display: block; margin-left: 15%; padding-left:6px; border-radius: 1em;
              position: relative; bottom: 0%; 
              width: 70%; border: solid blue 1px;}

/* Navigation link bar */
.boxer       {border: 3px solid blue; padding: 5px;}
.boxLeft     {margin-left: 5%; width: 85%;}
.boxRight    {margin-left: 8%; width: 82%;}
.boxRight2   {margin-left: 8%; width: 82%; font-size: 12pt; font-weight: bold;}
.indent1     {margin-left: 8%;}

.center      {text-align: center;}

.dropbtn  {backgound-color: blue; color: white; padding: 10px; font-size: 12pt; border: none; cursor: pointer;}
.dropdown {position: relative;}
.dropdown-content {display: block; position: absolute; min-width: 200px; background-color: blue;}
.dropdown-content a {color: black; background-color: white; padding: 5px 10px; display: block;}
.dropdown:hover .dropdown-content {display: block;} 
.dropdown:hover .dropbtn {background-color: white;} 

.halfplus    {width: 75%;}
.halfplus2   {width: 82%;}
.halfplusa   {width: 74%;}

.in1a        {margin-left: 3%; margin-bottom: 6px;}
.in1c        {margin-left: 7%;}
.in5         {margin-left: 5%;}
.in2-new     {margin-left: 3%; width: 85%; border: solid 3px red;
              padding: 12px; font-size: 14pt; text-align: left;}

.leftbutton1 {margin-left: 5%; width: 65%; padding-left: 6px; padding-right: 6px; }
.left150     {margin-left: 150pt; }
.left5px     {margin-left: 5px;}
.lst2        {font-weight: bold; font-size: 12pt; line-height: 1.5em;}

.monobold    {font-size: 12pt; text-align: left;  font-weight: bold;   
              font-family: "Courier New", monospace; }
.monoboldin  {font-size: 12pt; text-align: left;  font-weight: bold;   
              font-family: "Courier New", monospace; margin-left: 20%;}
.monoboldim  {font-size: 12pt; text-align: left;  font-weight: bold;   
              font-family: "Courier New", monospace; margin-left: 18%;}
.norm14      {font-weight: norm; font-size: 14pt;  }
.red         {color: red; }

.space-right {margin-right: 6pt; }
.standout    {color: red;}

.tenfive     {font-size: 10.5pt; }
.thin        {font-size: 2pt;}
.thin2       {font-size: 2pt; line-height: 1em;}
.top         {position: fixed; top: 65%; border: 3px solid red; width: 31px; padding: 3px; margin-left: 89%; }

.under       {text-decoration: underline;}


/* responsive design components */

@media screen and (width < 400px) {
  :root {
    --spacing-md: 1rem;
    --spacing-sm: 0.75rem;

  .bold14       {font-size: 12pt;}
  .desc         {font-size: 10pt;}
  .farm {width: 80%;}

  .in2-new      {font-size:10pt;  }
  .in5          {margin-left:3%;}
   h1           {font-size: 14pt;}
   h2.leftblk   {color: black;   text-align: left;   font-size: 10pt; }

  .left150      {margin-left: 3%;}
  li.lst2       {font-size: 12pt;}
  .monobold     {font-size:10pt;}
  .monoboldin   {font-size:10pt;}

  div.price-new {border-style: groove; border-width: 3px; float: left; width: 70%; 
                 margin-left: 3%; margin-top: 8px; margin-below: 8px; font-size:10pt;}
  .halfplus2    {width: 75%;}
  .halfplusa    {width: 70%;}
  ul.midbold    (font-size: 10pt;}
  ul.midb142    {font-size: 12pt;}
  ul            {font-size: 12pt;}

  .main-content: var(--spacing-md);

  body {font-size: 10px;}

  table {
    font-size: 0.9rem;
  }

  th, td {font-size: 10pt;}
  }

}