@charset "utf-8";
/******************************************************************************
* Defines default styles for site pages.                                      *
******************************************************************************/
a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

html {
  height: 100%;
}	 

body {
  height: 100%;
  font-size: 10pt;
}

h4#title {
  background-color: #aaaaaa;
  border: 1px solid #000000;
  border-color: #000000 #C0C0C0 #C0C0C0 #000000;
  color: #555555;
  font-weight: bold;
  margin-top: 0em;
  margin-bottom: .3em;
  padding: 2px .3em 2px .3em;
}

pre {
  font-size: 80%;
}

td, th {
  font-size: 12pt;
  text-align: left;
  vertical-align: center;
}

th {
  font-weight: bold;
  vertical-align: bottom;
}

ul {
  list-style-type: square;
}

#demoBox {
  border-color: #000000;
  border-style: solid;
  border-width: 1px;
  padding: 8px;
  width: 24em;
}

.footer {
  margin-bottom: 0px;
  text-align: center;
}

/* Boxed table styles */

table.boxed {
  border-spacing: 2px;
  empty-cells: hide;
}

td.boxed, th.boxed, th.boxedHeader {
  background-color: #ffffff;
  border-color: #000000;
  border-style: solid;
  border-width: 1px;
  color: #000000;
  padding: 2px;
  padding-left: 8px;
  padding-right: 8px;
}

th.boxed {
  background-color: #c0c0c0;
}

th.boxedHeader {
  background-color: #808080;
  color: #ffffff;
}

div.list_old {
  text-align: left; 
  text-indent: 10%; 
  font-weight: normal; 
  color: #800000
}
div.list {
  text-align: center; 
  font-weight: normal; 
  color: #800000
}
div.head {
  height: 100%; 
  text-align: center; 
  font-weight: bold; 
  color:#800000;
}
div.note {
  text-align: center; 
  font-weight: bold; 
  color:#000000
}
div.videos {
  overflow-y: hidden; 
  height: 98%; 
  text-align: center; 
  font-weight: bold; 
  color:#800000;
  background-color: #aaaaaa;
}
div.btn-frame {
  height: 98%;
  overflow-y: hidden; 
  background-color: #aaaaaa;	
}
div.news {
  height: 75%;
  overflow-y: scroll;
  background-color: #000000;
}

/******************************************************************************
* Styles for the tabbed displays.                                             *
******************************************************************************/

/*-----------------------------------------------------------------------------
  Note: The border-radius property is a proposed feature for CSS3 which creates
        rounded corners. Mozilla/Netscape browsers currently support this
        feature via the proprietary -moz-border-radius property. Both are
        defined here. Browsers that support neither should simply ignore them.
-----------------------------------------------------------------------------*/

div.tabBox {}

div.tabArea {
  font-size: 90%;
  font-weight: bold;
  padding: 0px 0px 4px 0px;
}

a.tab {
  background-color: #5555ff;
  border: 2px solid #000000;
  border-bottom-width: 0px;
  border-color: #ffffff #0000aa #0000aa #ffffff;
  -moz-border-radius: .75em .75em 0em 0em;
  border-radius-topleft: .75em;
  border-radius-topright: .75em;
  padding: 2px 1em 2px 1em;
  position: relative;
  text-decoration: none;
  top: 3px;
  z-index: 100;
}

a.tab, a.tab:visited {
  color: #000000;
}

a.tab:hover {
  background-color: #ffffff;
  border-color: #aaaaaa #555555 #555555 #aaaaaa;
  color: #000000;
}

a.tab.activeTab, a.tab.activeTab:hover, a.tab.activeTab:visited {
  background-color: #ffffff;
  border-color: #aaaaaa #555555 #555555 #aaaaaa;
  color: #000000;
}

a.tab.activeTab {
  padding-bottom: 6px;
  top: 1px;
  z-index: 102;
}

div.tabMain {
  background-color: #808080;
  border: 2px solid #000000;
  border-color: #555555 #000000 #000000 #555555;
  -moz-border-radius: 0em .3em .3em .3em;
  border-radius-topright: .3em;
  border-radius-bottomright: .3em;
  padding: .3em;
  position: relative;
  z-index: 101;	 
  overflow-y: hidden;
}

div.tabIframeWrapper {
  background-color: #ffffff;
  width: 100%;
  height: 100%; 
  overflow-x: hidden;
  overflow-y: hidden;
}

iframe.tabContent {
  background-color: #ffffff;
  border: 1px solid #000000;
  border-color: #aaaaaa #ffffff #ffffff #aaaaaa;
  width: 100%;
  height: 550px; 
  overflow-y: hidden;
}

/* (A) GALLERY - BIG SCREEN */
#vid-gallery {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 15px;
}
#vid-gallery video {
  height: 300px;
  width: 100%;
  cursor: pointer; 
  overflow-y: hidden;
}

/* (B) GALLERY - SMALL SCREEN */
@media screen and (max-width: 1800px) {
  #vid-gallery { grid-template-columns: repeat(3, auto); }
}
@media screen and (max-width: 1200px) {
  #vid-gallery { grid-template-columns: repeat(2, auto); }
}
@media screen and (max-width: 600px) {
  #vid-gallery { grid-template-columns: auto; }
}
 
/* Styling the button */
.btn {
    cursor: pointer;
    background-color: transparent;
    height: 145px;
    width: 150px;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
}