/*
primary_color:#531B93;
#247D9E
must also manually change styles in meta tags in page.php
and in al other css files
for ios title bar

secondary color
*/

*
{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body
{
  margin:0px;
  padding:0px;
}
body
{
  background-color:#E0E0E4;
  background-image: url("../images/background.png");
  background-repeat:repeat;
  background-size:300px;
  background-attachment: fixed;
  font-size:12pt;
  font-family: SweetSans, Verdana, sans-serif;
}


table
{
  border:1px solid;
  border-collapse: collapse;
  margin:auto;
  border-radius:3px;
}

thead
{
  background-color: #247D9E;
  color:white;
}

th, td
{
  border:1px solid black;
  padding:0.5em;
}

.top_nav
{
  position:fixed;
  width:100%;
  background-color:#000;
  /*box-shadow: 0px 0px 8px 1px #444;*/
  /* box-shadow: 0px 0px 8px 1px #000; */
  /* padding-top:1em; */
  /* padding-bottom:1em; */
  z-index:1000;
  /* font-family:Verdana; */
  /* font-weight:bold; */
  /*font-size:10pt;*/
}

.top_nav_placeholder
{
  height:65px;
  font-size:10pt;
  /*height:5em;*/
}


@media only screen and (hover:none)
{
  body
  {
    font-size:10pt;
  }
  .top_nav
  {
   /*font-size:20pt;*/
   font-size:8pt;
  }
  .top_nav_placeholder
  {
    /*height:180px;*/
    font-size:7pt;
  }
}

@media only print
{
  .top_nav
  {
   display:none;
  }
  .top_nav_placeholder
  {
    height:0px;
  }
}

.top_nav .right_button_group
{
  float:right;
  margin-right:1.5em;
  margin-left:1.5em;
}

.top_nav .left_button_group
{
  float:left;
  margin-right:1.5em;
  margin-left:1.5em;
}

.top_nav .icon
{
  padding-top:0.25em;
  padding-bottom:0.25em;
  padding-left:1em;
  padding-right:1em;
}

.top_nav .icon img
{
  width: 1.5em;
  height:auto;
  display:inline;
  vertical-align:middle;
}

.top_nav a
{
/*
  display:inline-block;
  background-color:white;
  color:black;
  padding:0.5em;
  border-radius:5px;
  cursor:pointer;
  text-decoration:none;
  margin-left:0.25em;
  margin-right:0.25em;
  text-align:center;
*/
}

/*
.page_div
{
  width:700px;
  margin:auto;
}
*/

/*
.page_div img
{
  display:block;
  max-width:100%;
  max-height:300px;
  margin:auto;
}
*/



/* for displaying youtube video loader */
.video_loader
{
  border: 16px solid #eeeeee; /* Light grey */
  border-top: 16px solid #EA3323; /* youtube red */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: video_spin 2s linear infinite;
  margin:auto
}

@keyframes video_spin
{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}