/* 
   AwardList.css
   Used specifically by the West Kingdom Awards List, in conjunction with
   some items from the regular West Kingdom Heralds' website's WKHeralds.css file,
   this gives the various information necessary for maintaining the site and making
   easy updates.
    
   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%;
}
/*
   From W3 Schools, this makes the scrolling behavior 'smooth' across a site.
*/
html
{
  scroll-behavior: smooth;
}

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 TinyMCE:
*/
.mceContentBody,
.mceEditorIframe
{
   background-color:#FFFFFF !important;
}

/* 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;
}

.Icons
{
   vertical-align: middle;
   border: 0;
}



/* 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. 
*/
.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 /* HOW THE FUCK DO WE STYLE THE ANCHOR TAGS, THE COLOR for anchors is overriding the text color */
{
   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 /* default button color is weird -- because there doesn't seem to be one*/
{
   color: black !important;
   background-color: var( --light_back ) !important;
   border:           var( --dark_border ) !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;
}


/*
   ----------------------------------
   Popovers for Armory Display
   *** Need to tinker with for Bootstrap 4 ...
   ----------------------------------
*/

/* override Bootstrap settings */
.popover
{
   max-width: 75% !important;
   font-size: 19px !important;
}

.arms_image_outer /* This is the outer div ... */
{
   float: right;
   width: 185px;
   margin: 5px;
   text-align: center;
}

.arms_image_thumbnail
{
   background: white;
   margin-top: 5px;
   margin-bottom: 5px;
   max-width: 175px;
   max-height: 250px;
}

.arms_image_big
{
   max-width: 600px;
   max-height: 800px;
   position: relative;
   margin-bottom: 5px;
   margin-top: 5px;
}

/* award images */

.award_image_outer /* for thumbnail */
{
   float: right;
   max-width: 250px;
   max-height: 180px;
   margin: 5px;
   margin-left: 7px;
   padding: 5px;
   padding-left: 7px;
   padding-right: 7px;
   text-align: center;
}

.award_image_thumbnail
{
   border: solid 1px #ccc;
   border-radius: 2px;
   background: white;
   margin-top: 5px;
   max-width: 150px;
   max-height: 140px;
}

.award_image_big
{
   max-width: 600px;
   max-height: 800px;
   position: relative;
   margin-bottom: 7px;
   padding-bottom: 7px;
   margin-top: 7px;
}

/*
   for award images on awards_by_title.php
*/


/*
   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 */

/* Email Modal form for "individual" page */
#emailModal.modal:before
{
  content: '';
  display: inline-block;
  height: 0%;
  vertical-align: top;
  margin-right: -4px; /* Adjusts for spacing */
}
/* center modal horizontal */
#emailModal.modal
{
  text-align: center;
  padding: 0 !important;
}
/* more definitions */
#emailModal .modal-dialog
{
   overflow-y: initial !important;
   display: inline-block;
   text-align: left;
   max-width: 96% !important; 
}


/* 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;
   }
   
   /* Profile and similar images ... */
   .arms_image_thumbnail
   {
      background: white;
      max-width: 80px !important;
      max-height: 150px !important;
      margin: 0 !important; 
   }
   
   .popover
   {
      font-size: 10px !important;
      max-width: 300px !important;
      margin: 0 !important; 
      margin-right: 5px !important;
      padding: 0 !important;
      padding-right: 5px !important;
      text-align: center !important;
   }
   
   .arms_image_outer /* This is the outer div ... */
   {
      float: left !important;
      max-width: 200px;
      margin: 0 !important;
   }
   
   .arms_image_big
   {
      max-width: 200px;
      max-height: 300px;
      margin: 0 !important; /* doesn't seem to do anything */
   }

} /* end of small devices */