/* Base body styles */
body
{
  text-align: left;
  background-color: #000000;
  font-size: 12px;
  font-family: 'ORBITRON', ARIAL, sans-serif;
}

/* Variants for different sites */
body.green
{
  color: #00FF00; /* Green text */
}

body.gold
{
  color: #FFD700; /* Gold text */
}

body.blue
{
  color: #1E90FF; /* Blue text */
}

body.red
{
  color: #FF0000; /* Red text */
}

body.white
{
  color: #FFFFFF; /* White text */
}

body.black
{
  color: #000000; /* Black text */
}

/* Default link styles */
a:link
{
  color: #FFD700; /* Gold */
}
a:visited
{
  color: #D4AF37; /* Darker gold */
}

a:hover
{
  color: #FFFFFF; /* Highlight on hover */
}


/* Overrides when body has a theme class */
body.gold a:link,
body.gold a:visited
{
  color: #FFFFFF; /* White links on gold text body */
}

body.green a:link,
body.green a:visited
{
  color: #00FFFF; /* Cyan links on green text body */
}

body.red a:link,
body.red a:visited
{
  color: #00FF00; /* Green links on red text body */
}

.main-content
{
  margin: 20px auto;
  max-width: 960px;
  text-align: left;
  background-color: #000000;
  font-size: 12px;
  font-family: 'ORBITRON', ARIAL, sans-serif;
  box-sizing: border-box;
}

.main-content-centered
{
  margin: 20px auto;
  max-width: 960px;
  text-align: center;
  background-color: #000000;
  font-size: 12px;
  font-family: 'ORBITRON', ARIAL, sans-serif;
  box-sizing: border-box;
}


.vfoxdtscreen
{
  width: 1280px;
  height: 720px;
  margin: 20px -160px 0 -160px; /* overhangs 160px left and right */
  border: 1px solid #FFFFFF;   /* white border */
  box-sizing: border-box;
}


/* Special rule for the game container */
#game-container
{
  width: 1024px;   /* or 1280px later */
  height: 602px;   /* or 720px later */
  margin: 20px -32px 0 -32px; /* auto centers it in the viewport */
  border: 1px solid #FFD700;
  background: #222222;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

ruffle-player, ruffle-player canvas
{
  display: block;
  margin: 0 auto;

}

ruffle-player canvas
{
  display: block;
  width: 1024px;   /* fill the player box */
  height: 576px;  /* fill the player box */
}


h1
{
  font-size: 20px;
  font-family: 'MICHROMA', ARIAL, sans-serif;
  margin-top: 10px;
  margin-bottom: 10px;
}

h2
{
  font-size: 18px;
  font-family: 'MICHROMA', ARIAL, sans-serif;
  margin-top: 10px;
  margin-bottom: 10px;

}

h3
{
  font-size: 16px;
  font-family: 'MICHROMA', ARIAL, sans-serif;
  margin-top: 10px;
  margin-bottom: 10px;
}

hr
{
  width: 50%;
  margin-top: 20px;
  margin-bottom: 20px;
}

H3.testfont,P.testfont
{
  font-family: 'MICHROMA', ARIAL, sans-serif; font-size: 16px;
  font-style: normal; font-weight: 400;
  text-shadow: 4px 4px 4px #BBBBBB;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0.073em;
  word-spacing: 0.034em;
  line-height: 1em;
}

p
{
  font-size: 12px;
  font-family: 'MICHROMA', ARIAL, sans-serif;
  margin-top: 10px;
  margin-bottom: 10px;
}

table, th, td
{
  font-family: 'VERDANA', ARIAL, sans-serif;
  text-align: center;
  border: 1px solid #FFFFFF;
}

table#Meteor_Showers
{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 480px;
}

table#Meteor_Showers, table#Meteor_Showers th, table#Meteor_Showers td
{
  border: 1px solid #FFD700;
}

table#Antenna_stations td, th
{
  border: 1px solid #FFD700;
}

*
{
  margin: 0px;
  padding: 0px;
}

ul, ol
{
  margin: 0;
  padding-left: 1em;
  font-family: 'MICHROMA', ARIAL, sans-serif;
  list-style: none; /* Remove default bullets */
}

ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #FFD700; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

.callsign
{
  font-family: 'hemi_headbold_italic', ARIAL, sans-serif;
  font-size: 64px;
  clear: both;
  margin: -5px;
}


.menu
{
  display: none;
}

input:checked ~ .menu
{
  display: block;
}

input
{
  position: relative;
  left: -2em;
  z-index: -1;
}

label
{
  background: #000000;
  position: relative;
  z-index: 1;
  border-style: solid;
  border-width: 2px;
  border-color: #00FF00;
  text-decoration: underline;
}

.jscroller2_up, .jscroller2_down, .jscroller2_left, .jscroller2_right
{
  margin: 0;
  padding: 0;
}

.jscroller2_left, .jscroller2_right, .jscroller2_left_endless, .jscroller2_right_endless
{
  white-space: nowrap;
}

/* Scroller Box */
#scroller_container1, #scroller_container2, #scroller_container3, #scroller_container4
{
  width: auto;
  height: 60px;
  overflow: hidden;
}

.watch
{
  color: #FFD700;
}

.warning
{
  color: #FF0000;
}

.advisory
{
  color: #008000;
}

.notice
{
  color: #FFFFFF;
}

.specialweatherstatement
{
  color: #008080;
}


#ticker
{
  width: auto;
  overflow: hidden;
  white-space: nowrap;
  font-family: 'Orbitron', sans-serif; /* or Crillee, Michroma */
  height: 60px;
}

#ticker-text
{
  display: inline-block;
  padding-left: 100%;
  animation: scroll-left 20s linear infinite;
  font-family: 'Orbitron', serif;
  font-size: 40px;
  line-height: 60px;
  white-space: nowrap;
}

@keyframes scroll-left
{
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Manual ticker styles */
.ticker-maintenance { color: #FFA500; font-weight: bold; background-color: #222222; }
.ticker-reschedule  { color: #00FFFF; font-weight: bold; background-color: #222222; }
.ticker-interrupt   { color: #FF0000; font-weight: bold; background-color: #222222; }


#toc_container {
  background: #000000 none repeat scroll 0 0;
  border: 1px solid #FFD700;
  display: table;
  font-size: 95%;
  margin-bottom: 1em;
  padding: 20px;
  width: auto;
}

.toc_title
{
  font-weight: 700;
  text-align: center;
}

#toc_container li, #toc_container ul, #toc_container ul li
{
  list-style: outside none none !important;
}


.collapsible
{
  background-color: #777777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover
{
  background-color: #555555;
}

.collapsible:after
{
  content: '\002B'; /* Unicode character for "plus" sign (-) */
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after
{
  content: "\2212"; /* Unicode character for "minus" sign (-) */
}

.content
{
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #222222;
}



#Header
{
  text-align: center;
  width: 100%
}

#Footer
{
  text-align: center;
  width: 100%
}