/* 
   Roster.css
   Copied from the award list, trying to figure out why the F*** the
   color definitions for the buttons are not working. 
    
   Created by Hirsch von Henford (mka Ken Mayer), Golem Herald
   February, 2018, Updated October/November, 2020
   
   Updated for Bootstrap 4.x, including copying items out of
   the West Kingdom History site's css file. 
*/

:root
{
   --heading-color: #007B00; /* dark green */
   --border-color: #CFDCE6;
   --site-font: Arial, Helvetica, sans-serif;
   --fancy-heading-font: Fondamento;
   --inactive_tab:  #CCFFCC;  /* going for a light 'dull" green */
   --inactive_color: #99a3a4; /* font color for inactive tabs medium grey */
   --disabled_tab: #f6f5f5; /* disabled -- light grey */
   --disabled_color: black; /* disabled font color - black */
   
   /* Bootstrap alert colors to be used with buttons below
      doing this due to inconsistencies -- the buttons use
      different colors than the alerts, so I'm stuffing the
      alert colors in, giving me some nicer looking buttons */
   --primary_back: #cce5ff;
   --primary_color: #004085;
   --primary_border: #b8daff;
   --secondary_back: #e2e3e5;
   --secondary_color: #383d41; 
   --secondary_border: #d6d8db;
   --success_back: #d4edda;
   --success_color: #155724;
   --success_border: #c3e6cb;
   --info_back: #d1ecf1;
   --info_color: #0c5460;
   --info_border: #bee5eb;
   --warning_back: #fff3cd;
   --warning_color: #856404;
   --warning_border: #ffeeba;
   --danger_back: #f8d7da;
   --danger_color: #721c24;
   --danger_border: #f5c6cb;
   --light_back: #fefefe;
   --light_color: #818182; 
   --light_border: #fdfdfe;
   --dark_back: #d6d8d9;
   --dark_color: #1b1e21;
   --dark_border: #c6c8ca;
}

html
{
   /* required for fixed footer */
   position: relative;
   min-height: 100%;
}

body 
{  
   font-family: var( --site-font ); /*Arial, Helvetica, sans-serif; */
   font-size: 16px; 
   color: #000000; 
   background-color: #FFFFFF;
   margin-top: 10px;
   margin-left: 5px;
   margin-right: 2px;
   padding: 5px;
   
   /* for fixed footer */
   margin-bottom: 40px;
}

footer
{
   width: 99%;
   margin-top: 10px;
   padding-top: 10px;
   height: 40px;
   text-align: center;
   background-color: var( --heading-color ); /*background-color: #007B00;*/
   color: yellow;
   /* for fixed footer */
   position: absolute;
   bottom: 0;
}

/* for whatever reason select/Option tags can't be modified ... */
input, select
{
   font-family: var( --site-font ) !important; 
   font-size: 16px !important;
}

/* The Bootstrap input control adds enough that we need to worry about the height */
input
{
   height: 34px !important;
}

/* Seems to be necessary to get the text to line up properly with Bootstrap*/
input[type="checkbox"], input[type="radio"]
{
   height: 15px !important;
}

/* The Bootstrap Select control adds enough that we need to worry about the height */
select
{
   height: 36px !important;
}

.PageTitle, .SecondaryHeader, .TertiaryHeader
{
   font-family: var( --site-font ); 
   font-weight: bold;	  
   background-color: #007B00; 
   color: #FFFFFF; 
   text-decoration: none;
   padding: 0px 0px 3px 0px;
}

  
.PageTitle, .page-header
{
   /* from Google fonts ... */
   font-family: Fondamento;
   font-size: 24px;
   text-align: center;
}

.page-header
{
   font-family: var( --site-font ); /*Arial, Helvetica, sans-serif; */
   text-align: center;
   font-weight: bold; 
}

.SecondaryHeader 
{  
   font-size: 20px; 
   padding: 3px 0px 3px 3px;
}

.TertiaryHeader 
{ 
   font-size: 18px; 
   padding: 3px 0px 3px 3px;
}

.SecondaryNoBack, .TertiaryNoBack
{  
   font-family: var( --site-font ); 
   font-weight: bold;	  
   color: #007B00;
   text-decoration: none;
}

.SecondaryNoBack
{  
   font-size: 20px; 
}

.TertiaryNoBack
{ 
   font-size: 18px; 
}
   
h1
{
   font-family: var( --site-font );
   font-size: 22px;
   color: green;
   text-align: center;
}

h2
{
   font-family: var( --site-font );
   font-size: 20px;
   color: green;
   text-align: left;
}

h3
{
   font-family: var( --site-font );
   font-size: 18px;
   color: green;
   text-align: left;
}

/* Horizontal Rule */
hr
{
   border: 0;
   color: #007B00;
   background-color: #007B00;
   height: 1.5px;
}

/* for search routines */
.NameResult
{
   font-size: 18px;
   font-weight: bold;
}

/*
   Need to leave default anchor with no definition because Bootstrap relies on
   anchor tags for all kinds of things (and underlines in weird places are not
   worth the effort), so instead we need a specific one for
   the site that has the text-decoration set to underline ... 
*/
a.ThisSite
{
   text-decoration: underline !important;
}
/*
   ----------------------------------
   Default Links -- match colors of
   main Heralds' site, but no images
   ----------------------------------
*/
a
{
   padding: 0px;
}
a:link 
{
   color: #008000 !important;
}
a:visited 
{
   color: #734f3e; 
   background: white;
}
a:hover 
{
   color: #0054a6;
}
a:active 
{
   color: #f22222;
}
   
/* for namecodes ... */
.aNameCode
{
   color: #008000 !important;
   text-decoration: none;
}
.aNameCode:hover
{
   text-decoration: none;
}

/* Bootstrap Table, hover color settings, set for whole row */
table.table-hover tbody tr:hover
{
   background-color: #99FF99;
   color: #000000;
}

/* Award List Specific */
.AwardName
{
   color: green;
   font: 20px Arial, Helvetica, sans-serif;
   text-align: left;
   border-width: 0px;
}

.AwardHeading, .AwardData
{
   font: 18px Arial, Helvetica, sans-serif;
   text-align: left !important;
   vertical-align: top !important;
   border-width: 0px;
}

/* white text, black background */
.DeceasedText
{
   font-size: 14px;
   background:#000000;
   color: #FFFFFF
}

/*
   ----------------------------------------------------------
   Override Bootstrap Navbar links, which are taking on the
   Heralds' website link colors, not cool ...:
   ----------------------------------------------------------
*/

.dropdown > a, .nav-link, .nav-item
{
   color: #777 !important;
}
.nav-link .nav-item .nav-item.active
{
   color: #777 !important;
}

.dropdown-menu > li > a,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:visited
{
   color: #777 !important;
   font-size: 14px !important;
   text-decoration: none !important;
}

/* Bootstrap Tabs -- need the active tab to be a specific color ... */
.nav-tabs .nav-link.active
{
   background-color: var( --heading-color ) !important;
   color: white !important;
}

/* Bootstrap Tabs -- just need the not_active tab to be a color ... */
.nav-tabs .nav-link
{
   background-color: var( --inactive_tab ) !important;  
   color: var( --inactive_color ) !important;
}
.nav-tabs .nav-link.disabled
{
   background-color: var( --disabled_tab ) !important;  
   color: var( --disabled_color ) !important;
}

/*
   Bootstrap button classes -- setting the colors to be
   consistent with the Bootstrap alert classes of the same names
   this looks a lot better and some of the buttons are more
   readable (warning was tough white text on a light yellow ...)
   
   One issue is with anchor tags that use the btn classes,
   if there is php in the href, where it is the name
   of a php program or an echo statement to evaluate
   the path, the colors are not coming across and instead
   we're getting the standard anchor tag color for this site
   (which is green). Annoying, as inserting a style property
   that forces the color works.
   
   These fucking colors are not carrying over no matter what I do.
   I have to actually assign them in the damn button calls, which is
   absurd and goes against EVERYTHING CSS stands for. WTF, Bootstrap?
   
   For the various buttons:
   // success:
   style="background-color: #d4edda !important; color: #155724 !important; border: #c3e6cb !important;"
   // warning:
   style="background-color: #fff3cd !important; color: #856404 !important; border: #ffeeba !important;"
   // info:
   style="background-color: #d1ecf1 !important; color: #0c5460 !important; border: #bee5eb !important;"
   // danger:
   style="background-color: #f8d7da !important; color: #721c24 !important; border: #f5c6cb !important;"
   // primary:
   style="background-color: #cce5ff !important; color: #004085 !important; border: #b8daff !important;"
   // secondary:
   style="background-color: #e2e3e5 !important; color: #383d41 !important; border: #d6d8db !important;"
   // default:
   style="background-color: #fefefe !important; color: #818182 !important; border: #e6e6e4 !important;"

*/
.btn-primary
{
   background-color: var( --primary_back ) !important;
   color:            var( --primary_color ) !important;
   border:           var( --primary_border ) !important;
}
.btn-secondary
{
   background-color: var( --secondary_back ) !important;
   color:            var( --secondary_color ) !important;
   border:           #var( --secondary_border ) !important
}
.btn-info
{
   background-color: var( --info_back ) !important;
   color:            var( --info_color ) !important;
   border:           var( --info_border ) !important;
}
.btn-success
{
   background-color: var( --success_back ) !important;
   color:            var( --success_color ) !important;
   border:           var( --success_border ) !important;
}
.btn-warning 
{
   background-color: var( --warning_back ) !important;
   color:            var( --warning_color ) !important;
   border:           var( --warning_border ) !important;
}
.btn-danger
{
   background-color: var( --danger_back ) !important;
   color:            var( --danger_color ) !important;
   border:           var( --danger_border ) !important;
}
.btn-light
{
   background-color: var( --light_back ) !important;
   color:            var( --light_color ) !important;
   border:           var( --light_border ) !important;
}
.btn-dark
{
   background-color: var( --dark_back ) !important;
   color:            var( --dark_color ) !important;
   border:           var( --dark_border ) !important;
}



/*.btn-default 
{
   background-color: var( --light_back ) !important;
   color:            var( --light_color ) !important;
   border:           var( --light_border ) !important;
   /*color: black !important;*/
}*/
/* btn sizes ... again for consistency */
.btn, .btn-lg 
{
   font-size: 16px !important;
}
.btn-md
{
   font-size: 14px !important;
}
.btn-sm
{
   font-size: 12px !important;
}

.tooltip
{
   font-size: 14px !important;
}

.dropdown-item
{
   font-size: 14px !important;
}

.alert-link
{
   /* Bootstrap default is bold */
   font-weight: normal !important;
}

.lead /* seems to have been altered to smaller text ...? */
{
   font-size: 18px !important;
}

/* Misc. Bootstrap stuff -- 4.3.1 */
label 
{
   font-weight: bold !important;
   margin-top: 10px !important;
   margin-bottom: 0px !important;
   text-align: left !important;
}

/* removed in 4.3.1, so put it back: */
.help-block, text-muted
{
   color: gray;
   margin-bottom: 0px !important;
}

/*
   scroll-to-top button, from:
   https://codepen.io/desirecode/pen/MJPJqV
*/
#scroll
{
   position:fixed;
   right:10px;
   bottom:10px;
   cursor:pointer;
   width:50px;
   height:50px;
   background-color: green;
   text-indent:-9999px;
   display:none;
   -webkit-border-radius:60px;
   -moz-border-radius:60px;
   border-radius:60px;
}
#scroll span
{
   position:absolute;
   top:50%;
   left:50%;
   margin-left:-8px;
   margin-top:-12px;
   height:0;
   width:0;
   border:8px solid transparent;
   border-bottom-color:#ffffff;
}
#scroll:hover
{
   background-color: #e74c3c;
   opacity:1;filter: "alpha(opacity=100)";
   -ms-filter: "alpha(opacity=100)";
}
/* end of scroll-to-top button */


/* MEDIA QUERIES */
/* widths from:
      https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries
   Sadly, he doesn't actually give any other useful details ...
*/

/* ----------------------------------- MEDIA QUERIES FOR SMALLER SCREENS ---------------------------------- */
/* Extra small devices (portrait phones, less than 576px)
   Not sure how much of this is actually necessary. Comment out a lot and see how this translates
   to phone ...
   
   WTF is happening with menu (nav-bar) on iPhone SE and iPad??? Menus aren't working on one,
   and not even freaking displaying on the other ...
   
*/
@media(max-width: 575.98px)
{
   /*
      The items shown below are necessary, but we don't need to reset a lot of
      the controls for various sizes, as it appears that Bootstrap is doing a lot
      of the work for me ... whew. This will save much grief over time.
      Need to look at the column width settings for forms, though.
   */
   
   /*
      font size issues on smaller screens? Bootstrap 4.5 doesn't seem to handle
      this quite as well ...
   */
   body
   {
      font-size: 14px;
   }
   
   .PageTitle, .page-header, h1
   {
      font-size: 20px;
   }
   
   .SecondaryHeader, .SecondaryNoBack, h2
   {  
      font-size: 18px; 
   }
   
   .TertiaryHeader, .TertiaryNoBack, h3
   { 
      font-size: 16px; 
   }
   

   /* Scroll button on right bottom of screen to scroll back to top */
   #scroll
   {
      width: 20px !important;
      height: 20px !important;
      -webkit-border-radius: 40px;
      -moz-border-radius: 40px;
      border-radius: 40px;
   }
  
} /* end of small devices */