.twistie
{ 
    color:  blue; 
    font-weight: bold;
    font-size:  1.0rem;
    /*border: none;*/
    background-color: transparent;
   /* font-family: webdings;*/
    padding: 0;
    cursor: pointer;
}

.preview
{
 color: #555;
 margin-left: 15px;
}


button 
{ 
    color:  blue; 
    font-weight: bold;
    font-size:  0.9rem;
}


.sectiontitle { font-size: 1.5rem; font-style: italic; font-weight: bold;  text-align: center; color: black; margin-left: 10px;}

H1 { font-size: 1.6rem;  color: black;font-style: italic; text-align: center; margin-left: 10px; }
H2 { font-size: 1.35rem; color: red;  margin-left: 10px;}
H3 { font-size: 1.2rem; color: blue;  font-style: italic;  margin-left: 10px;}
H4 { font-size: 1.15rem; color: teal; margin-left: 10px;}
H5 { font-size: 1.0rem;  color: black; font-weight: bold; font-style: italic;  margin-left: 10px;}


.thumbnail-container {
  /* Set a fixed size for the visible area of the thumbnail */
  width: 20px;
   height: 100%;
  /* Hide the parts of the image that exceed the container's bounds */
  overflow: hidden; 
  /* Establishes a positioning context for the image inside */
  position: relative; 
  margin: 10px; /* Add some spacing around thumbnails if needed */
}

.thumbnail-image-full {
  
  width: 20px;  /* Ensure the image fills the container initially */
  height: 100%;
  object-fit: cover; /* Maintain aspect ratio and cover the area */
  /*transition: transform 0.4s ease; */ /* Smooth transition for the transform effect */
  
  transition-delay: 0.3s; /* Slight delay (e.g., 100ms) for the hover effect to begin */
  z-index: 1;       /* Use z-index to ensure the enlarged image appears above other content if it overlaps */
  display: inline;
}

.thumbnail-image-half {
  
  width: 20px;  /* Ensure the image fills the container initially */
  height: 100%;
  object-fit: cover; /* Maintain aspect ratio and cover the area */
  /*transition: transform 0.4s ease; */ /* Smooth transition for the transform effect */
  
  transition-delay: 0.3s; /* Slight delay (e.g., 100ms) for the hover effect to begin */
  z-index: 1;       /* Use z-index to ensure the enlarged image appears above other content if it overlaps */
  display: inline;
}

/* Styles for when the container is hovered over */
.thumbnail-container:hover .thumbnail-image-full 
{
  transform: scale(18) translate(12px, -20px); /* Enlarge the image x times original size) */
  /* Reposition (optional): Moves it slightly to the top-left in this example. Adjust values as needed. */
}

.thumbnail-container:hover .thumbnail-image-half 
{
  transform: scale(21) translate(12px, -15px); /* Enlarge the image x times original size) */
  /* Reposition (optional): Moves it slightly to the top-left in this example. Adjust values as needed. */
}



.videotext
{
    color: white;
    font-weight: bold;
}

.overlay
{
          position: fixed ;
          width:  760px ;
         /* height: 440px ; */
          top:    150px ;
          left:    8px ;
         /* margin-left:    15px ;*/
          margin: 0 auto;
          text-align: center;
          padding: 15px  0;
          right: 0 ;
          bottom: 0 ;
          background-color: rgba(0,0,0,0.8) ;
          z-index: 2 ;
          cursor: pointer ;
}

 input.text
 {
    display: inline-block; 
    width:40%; 
 }

  input.button
 {
    display: inline-block; 
    width: 30%;
 }
  input.radio
   {
    display: inline-block; 
    width:8%;
 }



center
 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}


.pagecontent
{
    background-color: var(--canvas-background);
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
}


p, table, td, li
{
  margin: 10px;
}




 table.box
 {
    border: 8px solid BLACK;
    border-collapse: collapse;
    margin-left: auto; 
    margin-right: auto;
    padding: 10px;
 
 }
 

 table.boxred
 {
    border: 8px solid RED;
    border-collapse: collapse;
    margin-left: auto; 
    margin-right: auto;
    padding: 10px;
 
 }
  table.boxblue
 {
    border: 8px solid BLUE;
    border-collapse: collapse;
    margin-left:  auto; 
    margin-right: auto;
    padding: 10px;
 
 }
 table.boxgreen
 {
    border: 8px solid green;
    border-collapse: collapse;
    margin-left: auto; 
    margin-right:auto;
    padding: 10px;
 
 }
 
table.sig, tr.sig 
{
  border: 1px solid black;
  border-collapse: collapse;
  margin-left: 10px; 
  margin-right: 10px;
}
tr.sig >  td 
{
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
  padding: 4px;
}

p.warning
{
    font-family : Verdana, Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: BOLD;
     background-color: #dddd00;
    text-decoration: none;
    font-style : italic;
}

p.success
{
    font-family : Verdana, Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: BOLD;
    background-color: #00dd00;
    text-decoration: none;
    font-style : italic;
}
p.info
{
    font-family : Verdana, Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: BOLD;
    background-color: #00dddd;
    text-decoration: none;
    font-style : italic;
}

img
{
   padding: 0, 0, 0, 10px;
}




.collapse
{
  visibility: collapse;
}


.small
{
  width: 80px;
}


A:link    { color: #0000ff; text-decoration: none; font-weight: 600; }
A:active  { color: #0000ff; text-decoration: none; font-weight: 600; }
A:hover   { color: #0000ff; text-decoration: none; font-weight: 600; }
A:visited { color: #0000dd; text-decoration: none; font-weight: 600; }

.hdrlogo {width:      102}


.new {font-size:  1.0rem;
      font-style: italic;
      font-weight: bold;
       color: red
     }

dt {
    float: left;
    /*width: 10%;*/
    text-align: right;
    padding: .25em;
    clear: left;
    /*display: inline-block;*/
}
dt::after {  content: ":";   }

dd {
    float: left;
    /*width: 70%;*/
    padding: .25em 0;
   /*display: inline-block;*/
    /*margin: 0 0 0 80px; */
    padding: 0 0 0.5em 0;
}
dl:after {content:"";display:table;clear:both;}



ul, ol {margin-left: 10px; padding-left: 10px;}


li { margin-left: 10px;}

li p { margin-left: 0;}

ol.compact  { margin-left: 10px; }
ul.compact  { margin-left: 10px; }


ol.compact li { margin-left: 20px;  margin-top: -10px;}
ol.compact li:first-child { margin-left: 20px; margin-top: -10px; Padding-top: 10px;}

ul.compact li { margin-left: 20px;  margin-top: -10px;}
ul.compact li:first-child { margin-left: 20px;  margin-top: -10px; Padding-top: 10px;}


.date  {font-size:  0.8rem;
          font-style: bold
         }

.coursename {font-size:  1.5rem;
             font-style: bold;
             text-align: left;
             color: red
           }

.topicname  {font-size:  1.5rem;
             font-style: italic;
             text-align: right;
             color: red
           }

.citation  { font-style: italic;
             text-align: right
           }