/* File: style-tmd.css */
 /* Date: 02/07/2025
 /* Desc: Style Definitions for new TMD 2024 changes */
 

 /* Style Definitions */

 p.tmd-14pt, li.tmd-14pt, div.tmd-14pt, tbody.tmd-14pt
	{margin:0;
	margin-bottom:.0001pt;
	font-size:14pt;  
	font-family:"Open Sans","Arial","sans-serif";}

 p.tmd-12pt, li.tmd-12pt, div.tmd-12pt
	{margin:0;
	margin-bottom:.0001pt;
	font-size:12pt;  
	font-family:"Open Sans","Arial","sans-serif";}

 p.tmd-10pt, li.tmd-10pt, div.tmd-10pt, tbody.tmd-10pt
        {margin:0;
        margin-bottom:.0001pt;
        font-size:10pt;  
        font-family:"Open Sans","Arial","sans-serif";}

 p.tmd-12pt-ytbanner
 	{margin:0;
	margin-bottom:.0001pt;
	font-size:12pt;  
	font-family:"Open Sans","Arial","sans-serif";
        background:gray;
        margin-top:3.0pt;
        text-align:center; 
        font-size:90%; 
        margin-left:0;
        margin-right:0;}

 p.tmd-12pt-audiobanner, p.tmd-12pt-videobanner {
 	margin:0;
	margin-bottom:.0001pt;
	font-size:12pt;  
	font-family:"Open Sans","Arial","sans-serif";
        background:gray;
        margin-top:3.0pt;
        text-align:center; 
        font-size:90%; 
        margin-left:0;
        margin-right:0;
}
       

h1 
   { display: block;
     font-size: 2em;
     margin-before: 0.67em;
     margin-after: 0.67em;
     margin-start: 0;
     margin-end: 0;
     font-weight: bold; }


 /*  Color Definitions */

.tmd-fgwhite   {color:white;  }
.tmd-fgblack   {color:black;  }  
.tmd-fgorange  {color:orange; }
.tmd-bgtrans   {background-color: transparent;           }
.tmd-bgtrans0  {background-color: rgba(255,255,255,0);   }
.tmd-bgtrans05 {background-color: rgba(255,255,255,0.5); }


 /* List Definitions */

ol
	{margin-bottom:0;}
ul
	{margin-bottom:0;}


 /* Alignment Definitions */

 /* Note: This didn't seem to work well with centering logo image on iPhone */
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  height: auto;
}

/* Note: This seems to work better than the .center above at least on iPhone */
.tmdCenterDef1 {
  margin-top: 10.0pt;
  margin-bottom: 10.0pt;
  margin-left:0; 
  margin-right:0;
  width:auto; 
  overflow-x:hidden;
}

/* For Contact Info Header */
.tmdCenterDef2 {
  margin-top: 0;
  margin-bottom: 0;
  margin-left:0; 
  margin-right:0;
  width:auto; 
  overflow-x:visible; /* Note: Need this visible for dropdown menu to be seen */
}


.tmdContactInfo1 ul {
  margin-bottom: 0;
  list-style: none;
}

.tmdContactInfo1 ul li {
  display: inline-block;
  list-style: none;
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px; 
}

.tmdPageHeader {
  background-color: #ae1011; /* Note: default for RY page(#ae1011) */
  margin: 0;
  margin-bottom: 10px;
  border: 0;
  padding: 1px 0;
  padding-left: inherit; /* Was 20px */
  font: inherit;
  text-align:left;
}

.tmdScheduleHeader {
  background-color: #ae1011; /* Note: default for TxCSHorns page(#282D33)*/
  margin: 0;
  margin-bottom: 10px;
  border: 0;
  padding: 1px 0;
  padding-left: inherit; /* Was 20px */
  font: inherit;
  text-align:left;
}

.tmdSchedTd1 { /* Note: default for Schedule Table cell1 entries */
  text-align:center; 
  vertical-align:middle;
  padding: 5px;
  width:40%;
}

.tmdSchedTd2 { /* Note: default for Schedule Table cell2 entries */
  text-align:left; 
  vertical-align:middle;
  padding: 5px;
  background-color: rgba(255,255,255,0.05); 
}


.tmdBannerImg { /* For resizing Logo Banner Icon in page headers */ 
  diplay: block;
  max-width:  385px;
  max-height: 125px;
  width: 100%;
  height: auto;
}
  
 
/* YouTube/iframe Section */

/* Note: the 56.25% padding provides the 16:9 aspect ratio for the video */

.tmdDivBlock16-9 { /* Container Block for the YouTube iframe(16:9 aspect ratio) */
  display:block;
  width: 100%;
  padding-bottom:56.25%; 
  position:relative;
}

.tmdDivBlock16-9 iframe { /* Position iframe correctly in tmdDivBlock16-9 */  
  width:100%;
  height:100%;
  position:absolute;
  top:0; 
  left:0;
}

.tmdDivBlock16-9 img { /* Note: too big(10/16/2024; Position img correctly in tmdDivBlock16-9 */  
  width:100%;
  height:100%;
  position:absolute;
  top:0; 
  left:0;
} 

.tmdDivBlock16-9 video { /* Note: */  
  width:100%;
  height:100%;
  position:relative;
  top:0; 
  left:0;
} 

/* Note: Fix for the poster image NOT filling up full video area */
video[poster]{object-fit:fill}

/* Note: Ar-1.23 Containers 
 * These don't visually line up as nice when mixing with 16-9 video classes
 * Use the 16-9 classes for the mp4(352x288) videos when on same page as 16-9
 * videos. 
*/
use the 16-9 variants instead */
.tmdDivBlockAr-1.23 { /* Container Block for mp4 videos(352x288, 1.23 aspect ratio,81.78%) */
  display:block;
  width: 100%;
  padding-bottom:81.78%; 
  position:relative;
}

.tmdDivBlockAr-1.23 video { /* Note: */  
  width:100%;
  height:100%;
  position:absolute;
  top:0; 
  left:0;
} 



/* Dropdown Menu Section */

/* Note: burgerbtn used with '≡' char as text */
.burgerbtn {
  display:inline-block;
  margin: auto auto;
  margin-top:auto;
  margin-bottom:auto;
  text-align:right;
  vertical-align:middle; 
  /* line-height:1.3em; */
  font-size:30px;     /* 60px; */
  font-weight:bold;
  /* width:60px;  */ 
  /* height:60px; */ 
  border:1px;
  padding:2px;
  box-sizing: border-box; /* border-box, content-box,inherit */
  /* background-color:#04AA6D;  /* #04AA6D(Original,Greenish) */
  /* background-color:#1877F2;  /* --fds-blue-60, FB link colors */
  /* background-color: rgba(255,255,255,0.5);  /* Semi-transparent */
  /* background-color: rgba(255,255,255,0);  /* Fully transparent */
  /* background-color: transparent;  /* Make sure all browsers render correctly */
  background-color: white;
  color:black;               
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  display: inline-block;
  position: relative;
  overflow: visible;    /* Note: Parent table cell/content cell also must be visible */
  z-index: 1; 
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color:white;    /* #f1f1f1; */
  color:black;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a:link {
  color:black;     /* black; */
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  /* background-color: #ddd; Original, same as #dddddd or 'Steam' */
  background-color: #dddddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
/* Original: .dropdown:hover .dropbtn .burgerbtn{background-color: #3e8e41;} */
.dropdown:hover .burgerbtn{
  /* background-color:#77A7FF;  /* --fds-blue-40, FB link colors */
  /* background-color: #ddd; Original, same as #dddddd or 'Steam' */
  background-color: rgba(255,255,255,0.5);  /* Semi-transparent */
}



 /* This is supposed to center .my-element both horizontally and vertically within its parent container */
.my-element {
  position: absolute; /* or relative */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


 /* Misc Viewport & Media Query Definitions */

.fullscreen {
   width: 100%;
   height: 100vh;
   padding: 40vh;
}

  /* background-color: lightgreen; */
  /* background-color: lightblue;  */
  /* background-color: #022b36;   - Reagan Years Default,Get The Gig Default */
  /* background-color: #F5F5F5;   - WhiteSmoke */
  /* background-color:#4267B2;  /* - Facebook Logo2 color */
  /* background-color:#0866FF;  /* - Facebook Logo1 color */
  /* background-color:#AAC9FF;  /* --fds-blue-30, FB link colors */
  /* background-color:#77A7FF;  /* --fds-blue-40, FB link colors */
  /* background-color:#1877F2;  /* --fds-blue-60, FB link colors */

body {
  background-color: whitesmoke;     /* #F5F5F5 */
}

@media only screen and (max-width: 600px) {
  body {
    background-color: mintcream;    /* #F5FFFA */ 
  }
}


/* Table Padding Definitions */

.padded-cell {
  padding: 5px;
}

@media (min-width: 600px) {
  .padded-cell {
    padding: 12px;
  }
}

@media (min-width: 1000px) {
  .padded-cell {
    padding: 16px;
  }
}