/*
    For the tabbed page on the spreadsheets page
*/

/*
   Normal bg color, if picture load fails
   102x102 pixel image, start in the top left corner, repeat is over the whole page 
*/
html 
{
   background-color: #28439B;
}

/*
   Make our margins go away and use a normal-ish font 
*/
body 
{
   margin: 0 !important;
   padding: 0 !important;
   font-family: Arial, Helvetica, sans-serif;
}

/*
   Make the asterisk for DB1-5 missing data not have an underline
*/
a.nav-special:active, a.nav-special:link, a.nav-special:visited, a.nav-special:hover 
{
   color: yellow;
   display: inline-block;
   text-decoration: none;
}

/*
   Make the normal links at the bottom yellow and underlined
*/
a.nav:active, a.nav:link, a.nav:visited, a.nav:hover
{
   color: yellow;
   display: inline-block;
}

/*
   Make normal text white since the background is dark blue 
*/
p
{
   color: white;
   display: block;
   margin-top: 0em;
   margin-bottom: 0em;
   margin-left: 0;
   margin-right: 0;
}

/*
   Definition for box the tabs for switching pages are in
*/
#TabBoxL 
{
   width: 95%;
   padding: 3px;
   margin:auto 0;
   -moz-border-radius: 3px;
   border-radius: 3px; 
   text-align: center;
   color: white;
}

/* Make sure the text is centered in each tab */
#TabBoxL a
{
   text-decoration: none;
   text-align: center;
}

#TabBoxT 
{
   width: 95%;
   padding: 3px;
   margin:auto 0;
   -moz-border-radius: 3px;
   border-radius: 3px; 
   text-align: center;
   color: white;
}

/* Make sure the text is centered in each tab */
#TabBoxT a
{
   text-decoration: none;
   text-align: center;
}


   #DayTabs ul
   {  
      list-style: none;
      padding: 0 0 0 10px;
      vertical-align: bottom;
   }
   #DayTabs li
   {  
      margin: -6px 0px, 0px, -6px;
      display: inline-block;
      position: relative;
      height: 30px;
      transition: .2s;
      text-align: center;
      vertical-align: bottom;
   }
   #DayTabs li:hover
   {  
      z-index: 0;
   }
   #DayTabs a
   {  
      display: block;
      position: relative;
      height: 60px;
      margin: 20px 0 0 -4px;
      padding: 6px 12px 20px 12px;
      border-radius: 20px 20px 0px 0px;
      background: #61b5e4;
      color: #000222;
      text-align: center;
      text-decoration: none;
      transition: .2s;
      vertical-align: bottom;
   }
   #DayTabs li:hover > a
   {
      background: #ccc;
      color: black;
   }
   #DayTabs li.ActiveTab
   {
      z-index: 0;
   }
   #DayTabs li.ActiveTab a
   {
      z-index: 0;
      margin: 10px 0 0 -4px;
      background: #dda933;
      color: black;
      text-shadow: none;
   }
   #DayTabs li.LinkTab a
   {
      z-index: 0;
      background: #6CBB3C;
      background: -moz-linear-gradient(top, #6CBB3C 0%, #52D017 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6CBB3C), color-stop(100%,#52D017));
      cursor:pointer;
      color: #000222;
      text-shadow: none;
   }
   #DayTabs li.LinkTab a:hover
   {
      z-index: 0;
      background: #F3F3F3;
      background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F1F1F1), color-stop(50%,#F1F1F1), color-stop(100%,#FFFFFF));
      cursor:pointer;
      color: #000222;
      text-shadow: none;
   }



/* Make each tab 30px high */
.tabs
{
   height: 30px;
   text-align: center;
}

/* Set the font size for the list and remove the dots, and center it */
.tabs > ul
{
   font-size: 1em;
   list-style: none;
   text-align: center;
}

/* Definition for exactly the size of the tabs and the text color, etc */
.tabs > ul > li
{
   margin: 0 0 0 0;
   padding: 2px 3px;
   display: inline-block;
   color: black;
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
   -moz-border-radius-topleft: 1px;
   -moz-border-radius-topright: 1px;
   -moz-border-radius-bottomright: 0px;
   -moz-border-radius-bottomleft: 0px;
   border-top-left-radius:1px;
   border-top-right-radius: 1px;
   border-bottom-right-radius: 0px;
   border-bottom-left-radius: 0px; 
   background: #61b5e4;
/* #   background: #FDD017;
#   background: -moz-linear-gradient(top, #56A5EC 0%, #82CAFF 100%);
#   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#56A5EC), color-stop(100%,#82CAFF)); */
}

/* 
   Color the text in the tabs black, inline-block them and never let them change
*/
.tabs > ul > li > a:active, .tabs > ul > li > a:link, .tabs > ul > li > a:visited, .tabs > ul > li > a:hover 
{
   color: black;
   display: inline-block;
}

/*
   When we hover over, change the tab to almost-white and the text to almost black
*/
.tabs > ul > li:hover
{
   background: #F3F3F3;
   background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F1F1F1), color-stop(50%,#F1F1F1), color-stop(100%,#FFFFFF));
   cursor:pointer;
   color: #000222;
}

/*
   For the currently active tab(s)
*/
.tabs > ul > li.ActiveTab
{
   background: #F1F1F1;
   background: -moz-linear-gradient(top, #F1F1F1 0%, #E1E1E1 10%, #E1E1E1 50%, #F1F1F1 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F1F1F1), color-stop(10%,#E1E1E1), color-stop(50%,#E1E1E1), color-stop(100%,#F1F1F1));
   cursor:pointer;
   color: #000222;
}

/*
   For the secret inactive tab (shhh, secrets!)
*/
.tabs > ul > li.SInActiveTab
{
   display: none;
}

/*
   For the tabs that create not-on-page links
*/
.tabs > ul > li.LinkTab
{
   background: #6CBB3C;
   background: -moz-linear-gradient(top, #6CBB3C 0%, #52D017 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6CBB3C), color-stop(100%,#52D017));
   cursor:pointer;
   color: #000222;
}

/*
   What happens when you hover over the link tabs
*/
.tabs > ul > li.LinkTab:hover
{
   background: #F3F3F3;
   background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F1F1F1), color-stop(50%,#F1F1F1), color-stop(100%,#FFFFFF));
   cursor:pointer;
   color: #000222;
}

/*
   Make sure our Icons for img/gif/videos don't look weird
*/
.spreadsheet-data img
{
   padding: 1px;
   vertical-align: middle;
}

/*
   The definition for the table that our spreadsheet data is in
*/
.spreadsheet-data table
{
   background-color: white;
   border: 3px solid orange;
   border-radius: 5px;
   border-collapse: collapse;
   min-width: 950px;
   max-width: 98%;
   margin: auto;
   position: relative;
   z-index: 2;
   clear: both;
}

/*
   If someone is coming in with an anchor, highlight that row with a solid border
*/
.anchor_row_highlight
{
   border: 5px solid black;
}

/*
   On the first row, only have the bottom border
*/
.spreadsheet-data table > thead > tr:first-child > th
{
   border-top: 0px;
   border-right: 0px;
   border-left: 0px;
   border-bottom: 2px;
   text-align: center;
}

/*
   Declare how all all the table header rows look
*/
.spreadsheet-data table > thead > tr:nth-child(2) > th 
{
   border-width: 2px;
   padding: 2px;
   border-right: 2px;
   border-left: 2px;
   border-bottom: 2px;
   border-style: ridge;
   border-color: gray;
   text-align: center;
}

/*
   In the actual table body allow hovering on the rows hover texting
*/
.spreadsheet-data table > tbody > tr:hover 
{
   background-color: #4fe34f;
   color: black;
}

/*
   Declare how the first item in each row  of the body works
*/
.spreadsheet-data table > tbody > tr > td:first-child 
{
   text-align: center;
}
/*
   Declare how the second item in each row works
*/
.spreadsheet-data table > tbody > tr > td:nth-child(2) 
{
   text-align: center;
}
/*
   Declare how the third item in each row works
*/
.spreadsheet-data table > tbody > tr > td:nth-child(3) 
{
   text-align: center;
   min-width: 175px;
}
/*
   Declare how the 5th column looks (and minimize its width to 70px)
*/
.spreadsheet-data table > tbody > tr > td:nth-child(5) 
{
   text-align: center;
   width: 70px;
}
/*
   Declare how the 6th column looks
*/
.spreadsheet-data table > tbody > tr > td:nth-child(6) 
{
   text-align: center;
}
/*
   Declare how the last column looks
*/
.spreadsheet-data table > tbody > tr > td:last-child 
{
   border-right: 0px;
   text-align: center;
}
.spreadsheet-data table > tbody > tr > td:last-child > a
{
   display: inline;
}
/*
   Set default for any column not mentioned above
*/
.spreadsheet-data table > tbody > tr > td 
{
   border-width: 2px;
   padding: 2px;
   border-style: ridge;
   border-color: gray;
}
/* 
   Declare how the links look
*/
.spreadsheet-data table > tbody > tr > td > a {
   color: black;
   text-decoration: none;
   display: block;
}
/*
   Declare how the hover works
*/ 
.spreadsheet-data table > tbody > tr > td > a:hover {
   color: blue;
   text-decoration: underline;
}

/*
   Define how the help page looks (different than normal spreasheets, only 2 columns)
 */
.spreadsheet-help table
{  
   background-color: white;
   border: 3px solid orange;
   border-radius: 5px;
   border-collapse: collapse;
   min-width: 950px;
   max-width: 98%;
   margin: auto;
   position: relative;
   z-index: 2;
   clear: both;
}
/*
   On the first header row, only have the bottom border
*/
.spreadsheet-help table > thead > tr:first-child > th
{  
   border-top: 0px;
   border-right: 0px;
   border-left: 0px;
   border-bottom: 2px;
}

/*
   Declare how all all the 'normal' header rows look
*/
.spreadsheet-help table > tbody > th
{
   border-width: 2px;
   padding: 2px;
   border-style: ridge;
   border-color: gray;
   text-align: center;
}

/*
   Set default for any column in the table body not mentioned above
*/
.spreadsheet-help table > tbody > tr > td
{
   border-width: 2px;
   padding: 2px;
   border-style: ridge;
   border-color: gray;
   text-align: left;
}

/*
   Define that the links in the VST credits footer are yellow
*/
.vst-credits-footer a.nav:link, .vst-credits-footer a.nav:visited, .vst-credits-footer a.nav:hover 
{
        color: yellow;
}
/*
   Define the P's in the footer are white
*/
.vst-credits-footer p 
{
   text-align: center;
   color: white;
   display: block;
   margin-top: 0;
   margin-bottom: 0;
   margin-left: 0;
   margin-right: 0;
}