@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Tinos');

:root {
  /* convenience colors */
  --custom-olive:        #d8d4c8;

  /* darken and lighten default values */
  --border-darken:     93.5%;
  --hover-color:       88%;
  --hover-background:  90%;
  --hover-border:      88%;

  /* font family defaults */
  --serif-font-family-fallback:                    "Tinos", "Georgia", "Times New Roman", "Times", "serif";
  --sans-serif-font-family-fallback:               "Open Sans", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";

  --header-font-family:                            var(--sans-serif-font-family-fallback);
  --text-font-family:                              var(--sans-serif-font-family-fallback);

  --font-size-base:                                14px;

  /* background color of the entire page */
	--body-background:                               var(--custom-olive);
  --body-font-family:                              var(--text-font-family);

  /* user profile bar fixed to the top */
  --user-menu-text-color:                          #333333;
  --user-menu-background:                          rgba(255 255 255 / 80%);
  --user-menu-border:                              color-mix(in hsl, var(--user-menu-background) var(--border-darken), black);
  --user-menu-link-color:                          var(--user-menu-text-color);
  --user-menu-link-hover-color:                    color-mix(in hsl, var(--user-menu-text-color) var(--hover-color), black);
  --user-menu-link-hover-background:               transparent;
  --user-menu-link-active-color:                   color-mix(in hsl, var(--user-menu-text-color) 80%, black);
  --user-menu-link-active-background:              transparent;
  --user-menu-link-disabled-color:                 #777777;
  --user-menu-link-disabled-background:            transparent;
  --user-menu-brand-color:                         var(--user-menu-link-color);
  --user-menu-brand-hover-color:                   color-mix(in hsl, var(--user-menu-brand-color) var(--hover-color), black);
  --user-menu-brand-hover-background:              transparent;
                                                   
  --user-menu-image-border-color:                  #ff9900;
  --user-menu-image-border-active-color:           #ffff01;
  --user-menu-image-border-hover-color:            #ffcc73;

  /* color and border around banner, menu bar, breadcrumbs and content */
  --body-panel-background:                         #ffffff;
	--body-panel-border:                             color-mix(in hsl, var(--body-panel-background) var(--border-darken), black);
  --body-panel-text-color:                         #5A554E;  /* not used cause it never happens */
  --body-panel-heading-border:                     #000000;  /* not used cause it never happens */

  --banner-text-color:                             #ffffff;
  --banner-background:                             #beb9a6;
  --banner-border:                                 color-mix(in hsl, var(--banner-background) var(--border-darken), black);
  --banner-header-color:                           #5a5544;      /* this is for the site's name if shown */
  --banner-header-font-family:                     var(--header-font-family);

  --mainmenu-text-color:                           #ffffff;
  --mainmenu-background:                           #3c382f;
  --mainmenu-border:                               color-mix(in hsl, var(--mainmenu-background) var(--border-darken), black);
  --mainmenu-font-family:                          var(--header-font-family);
  --mainmenu-font-size:                            calc(var(--font-size-base));
  --mainmenu-link-color:                           var(--mainmenu-text-color);
  --mainmenu-link-hover-color:                     color-mix(in hsl, var(--mainmenu-link-color) var(--hover-color), black);
  --mainmenu-link-hover-background:                transparent;
  --mainmenu-link-active-color:                    var(--mainmenu-link-color);
  --mainmenu-link-active-background:               #637052;
  --mainmenu-link-disabled-color:                  color-mix(in hsl, var(--mainmenu-link-hover-color) 80%, black);
  --mainmenu-link-disabled-background:             transparent;

  /* probly not used? */
  --mainmenu-brand-color:                          var(--mainmenu-link-color);
  --mainmenu-brand-hover-color:                    color-mix(in hsl, var(--mainmenu-brand-color) var(--hover-color), black);
  --mainmenu-brand-hover-background:               transparent;

  --dropdown-font-family:                          var(--header-font-family);
  --dropdown-font-size:                            var(--mainmenu-font-size);
  --dropdown-background:                           var(--mainmenu-background);
  --dropdown-border:                               var(--mainmenu-border);
  --dropdown-divider-background:                   var(--mainmenu-border);
  --dropdown-link-color:                           var(--mainmenu-link-color);
  --dropdown-link-hover-color:                     var(--mainmenu-link-hover-color);
  --dropdown-link-hover-background:                var(--mainmenu-link-hover-background);
  --dropdown-link-active-color:                    var(--mainmenu-link-active-color);
  --dropdown-link-active-background:               var(--mainmenu-link-active-background);
  --dropdown-link-disabled-color:                  var(--mainmenu-link-disabled-color);
  --dropdown-header-font-family:                   var(--dropdown-font-family);
  --dropdown-header-font-size:                     var(--dropdown-font-size);
  --dropdown-header-color:                         var(--dropdown-link-color);

  --xs-banner-text-color:                          var(--banner-text-color);
  --xs-banner-background:                          var(--banner-background);
  --xs-banner-border:                              var(--banner-border);
  --xs-banner-header-color:                        var(--banner-header-color);
  --xs-banner-header-font-family:                  var(--banner-header-font-family);

  --xs-menu-text-color:                            var(--mainmenu-text-color);
  --xs-menu-background:                            var(--mainmenu-background);
  --xs-menu-header-background:                     var(--mainmenu-background);
  --xs-menu-border:                                var(--mainmenu-border);
  --xs-menu-link-color:                            var(--mainmenu-link-color);
  --xs-menu-link-hover-color:                      var(--mainmenu-link-active-color);
  --xs-menu-link-hover-background:                 var(--mainmenu-link-active-background);
  --xs-menu-link-active-color:                     var(--mainmenu-link-active-color);
  --xs-menu-link-active-background:                var(--mainmenu-link-active-background);
  --xs-menu-link-disabled-color:                   var(--mainmenu-link-disabled-color);
  --xs-menu-link-disabled-background:              var(--mainmenu-link-disabled-background);
  --xs-menu-brand-color:                           var(--mainmenu-brand-color);
  --xs-menu-brand-border-color:                    transparent;
  --xs-menu-brand-hover-color:                     var(--mainmenu-link-hover-color);
  --xs-menu-brand-hover-background:                var(--mainmenu-link-hover-background);
  --xs-menu-toggle-background:                     var(--xs-menu-header-background);
  --xs-menu-toggle-hover-background:               #000000; /*color-mix(in hsl, var(--xs-menu-toggle-background) var(--hover-background), black);*/
  --xs-menu-toggle-icon-bar-background:            var(--xs-menu-brand-color);
  --xs-menu-toggle-border-color:                   var(--xs-menu-text-color);
  --xs-menu-divider-background:                    #ffffff;
  --xs-menu-avatar-border-color:                   transparent;

  --breadcrumb-text-color:                         #809064; /* "current" location, not clickable */
  --breadcrumb-background:                         #eef3dd;
  --breadcrumb-border:                             color-mix(in hsl, var(--breadcrumb-background) var(--border-darken), black);
  --breadcrumb-divider:                            " · ";
  --breadcrumb-divider-color:                      var(--breadcrumb-text-color);
  --breadcrumb-link-color:                         #3c382f;  /* "parent" paths, clickable */
  --breadcrumb-link-hover-color:                   var(--breadcrumb-text-color);
 
  --main-content-text-color:                       #5A554E;
  --main-content-background:                       #f5f5f5;
  --main-content-border:                           #E5E1D8;
  --main-content-header-color:                     #5A5544;
  --main-content-header-font-family:               var(--header-font-family);
  --main-content-header-font-size-base:            var(--font-size-base);
  --main-content-header-hover-color:               var(--main-content-header-color);
  --main-content-header-hover-background:          transparent;
  --main-content-divider-color:                    #d8d4c8;
  --main-content-link-color:                       var(--btn-primary-bg);
  --main-content-link-hover-color:                 color-mix(in hsl, var(--main-content-link-color) var(--hover-background), black); /* 85% */
  --main-content-link-hover-background:            transparent;
  --main-content-muted-color:                      color-mix(in hsl, #000000 53.3%, white);
  --main-content-muted-link-color:                 var(--main-content-muted-color);
  --main-content-muted-link-hover-color:           var(--main-content-muted-link-color);
  --main-content-muted-link-hover-background:      transparent;
  --main-content-icon-link-color:                  var(--main-content-link-color);
  --main-content-icon-link-hover-color:            var(--main-content-link-hover-color);
  --main-content-icon-link-hover-background:       transparent;
  --main-content-panel-heading-color:              var(--main-content-header-color);
  --main-content-panel-heading-background:         var(--main-content-background);
  --main-content-panel-heading-border:             var(--main-content-border);
  --main-content-panel-body-border:                var(--main-content-border);
  --main-content-article-image-border:             var(--main-content-border);

  --btn-default-color:                             #333333;
  --btn-default-bg:                                #ffffff;
  --btn-default-border:                            #cccccc;
  --btn-default-hover-color:                       var(--btn-default-color);
  --btn-default-hover-bg:                          color-mix(in hsl, var(--btn-default-bg) var(--hover-background), black);
  --btn-default-hover-border:                      color-mix(in hsl, var(--btn-default-border) var(--hover-border), black);

  /* large button displayable across entire content, only visible in xs (mobile) */
  --btn-hero-color:                                var(--mainmenu-link-active-color);
  --btn-hero-bg:                                   var(--mainmenu-link-active-background);
  --btn-hero-border-color:                         var(--xs-menu-toggle-background);
  --btn-hero-hover-color:                          var(--btn-hero-color);
  --btn-hero-hover-bg:                             color-mix(in hsl, var(--mainmenu-link-active-background) var(--hover-background), black);
  --btn-hero-hover-border-color:                   color-mix(in hsl, var(--btn-hero-border-color) var(--hover-border), black);
                                    
  --input-color:                                   #555555;
  --input-background:                              #ffffff;
  --input-border:                                  #cccccc; /* color-mix(in hsl, var(--input-background) var(--border-darken), black); */
  --input-group-addon-background:                  var(--input-background);
  --input-group-addon-border-color:                var(--input-border);
                                                   
  --label-color:                                   var(--input-color);
                                                   
  --login-background:                              var(--main-content-background);

  --menu-card-border-color:                        var(--main-content-link-color);
  --menu-card-border-hover-color:                  var(--main-content-link-hover-color);

  --table-background:                              var(--body-background);
  --table-background-accent:                       color-mix(in hsl, var(--table-background) 80%, white);
  --table-caption-color:                           var(--main-content-text-color);
  --table-caption-background:                      transparent;
  --table-head-color:                              var(--mainmenu-text-color);
  --table-head-background:                         var(--mainmenu-background-color); /* transparent; */
  --table-border-color:                            var(--btn-default-border); /*color-mix(in hsl, var(--table-background) 80%, black);   /* @btn-default-border; */
  --table-hover-background:                        color-mix(in hsl, var(--table-background-accent) 80%, white); /* 88% */

/* not currently used */
  --pager-background:                              #ffffff;
  --pager-border:                                  #dddddd;
  --pager-link-color:                              #337ab7;
  --pager-link-hover-color:                        color-mix(in hsl, var(--pager-link-color) var(--hover-color), black);
  --pager-link-hover-background:                   #eeeeee;
  --pager-link-hover-border:                       var(--pager-border);
  --pager-link-disabled-color:                     #777777; /* color-mix(in hsl, var(--pager-link-color) 80%, white); */
 
  --sidebar-left-color:                            var(--main-content-text-color);
  --sidebar-left-background:                       var(--main-content-background);
  --sidebar-left-border:                           var(--main-content-border);
  --sidebar-left-header-color:                     var(--main-content-header-color);
  --sidebar-left-header-font-family:               var(--header-font-family);
  --sidebar-left-header-font-size-base:            calc(var(--font-size-base) * 2);
  --sidebar-left-divider-color:                    var(--main-content-divider-color);
  --sidebar-left-link-color:                       var(--main-content-link-color);
  --sidebar-left-link-hover-color:                 var(--main-content-link-hover-color);
  --sidebar-left-link-hover-background:            var(--main-content-link-hover-background);
  --sidebar-left-navbar-link-color:                var(--sidebar-left-link-color);
  --sidebar-left-navbar-link-hover-color:          var(--sidebar-left-link-hover-color);
  --sidebar-left-navbar-link-hover-background:     var(--sidebar-left-link-hover-background);
  --sidebar-left-navbar-link-active-color:         var(--mainmenu-link-active-color);
  --sidebar-left-navbar-link-active-background:    var(--mainmenu-link-active-background);
  --sidebar-left-navbar-link-disabled-color:       var(--mainmenu-link-disabled-color);
  --sidebar-left-navbar-link-disabled-background:  var(--mainmenu-link-disabled-background); 

  --sidebar-right-color:                           var(--main-content-text-color);
  --sidebar-right-background:                      var(--main-content-background);
  --sidebar-right-border:                          var(--main-content-border);
  --sidebar-right-header-color:                    var(--main-content-header-color);
  --sidebar-right-header-font:                     var(--header-font-family);
  --sidebar-right-header-font-size-base:           calc(var(--font-size-base) * 2);
  --sidebar-right-divider-color:                   var(--main-content-divider-color);
  --sidebar-right-link-color:                      var(--main-content-link-color);
  --sidebar-right-link-hover-color:                var(--main-content-link-hover-color);
  --sidebar-right-link-hover-background:           var(--main-content-link-hover-background);
  --sidebar-right-navbar-link-color:               var(--sidebar-right-link-color);
  --sidebar-right-navbar-link-hover-color:         var(--sidebar-right-link-hover-color);
  --sidebar-right-navbar-link-hover-background:    var(--sidebar-right-link-hover-background);
  --sidebar-right-navbar-link-active-color:        var(--mainmenu-link-active-color);
  --sidebar-right-navbar-link-active-background:   var(--mainmenu-link-active-background);
  --sidebar-right-navbar-link-disabled-color:      var(--mainmenu-link-disabled-color);
  --sidebar-right-navbar-link-disabled-background: var(--mainmenu-link-disabled-background);

  --footer-outer-background:                       transparent;
  --footer-outer-border:                           transparent;
  --footer-inner-background:                       #28241E; /* transparent; */
  --footer-inner-border:                           color-mix(in hsl, var(--footer-inner-background) var(--border-darken), black); /* transaparent; */

  --footer-text-color:                             #736F6A; /* var(--main-content-text-color); */
  --footer-link-color:                             #e3e3e3; /*#637052; */ /* var(--main-content-link-color); */
  --footer-link-hover-color:                       color-mix(in hsl, var(--mainmenu-link-color) var(--hover-color), black);
  --footer-link-hover-background:                  #637052; /*var(--footer-link-color);*/ /* var(--footer-link-background); */
  --footer-header-color:                           #ffffff; /* var(--main-content-header-color); */

  --social-badges-color:                           #637052;
  --social-badges-background:                      transparent;
  --social-badges-hover-color:                     #e6e6e6;
  --social-badges-hover-background:                #637052;

  --footer-back-top-text-color:                    var(--footer-text-color);
  --footer-back-top-background:                    var(--footer-outer-background);
  --footer-back-top-link-color:                    var(--footer-link-color);
  --footer-back-top-link-hover-color:              var(--footer-link-hover-color);
  --footer-back-top-link-hover-background:         var(--footer-link-hover-background);

  --footer-thumbnail-caption-color:                var(--footer-link-color);
  --footer-thumbnail-background:                   rgba(230 230 230 / 20%);
  --footer-thumbnail-border:                       color-mix(in hsl, var(--footer-thumbnail-background) var(--border-darken), black);

  --footer-xs-outer-background:                    var(--footer-outer-background);
  --footer-xs-outer-border:                        var(--footer-outer-border);
  --footer-xs-inner-background:                    var(--footer-inner-background);
  --footer-xs-inner-border:                        var(--footer-inner-border);
                                                   
  --footer-xs-text-color:                          var(--footer-text-color);
  --footer-xs-link-color:                          var(--footer-link-color);
  --footer-xs-link-hover-color:                    var(--footer-link-hover-color);
  --footer-xs-link-hover-background:               var(--footer-link-hover-background);
  --footer-xs-header-color:                        var(--footer-header-color);
                                                   
  --footer-xs-back-top-color:                      var(--footer-xs-text-color);
  --footer-xs-back-top-background:                 var(--footer-xs-outer-background);
  --footer-xs-back-top-link-color:                 var(--footer-xs-link-color);
  --footer-xs-back-top-link-hover-color:           var(--footer-xs-link-hover-color);
  --footer-xs-back-top-link-hover-background:      var(--footer-xs-link-hover-background);
                                                   
  --footer-xs-thumbnail-border:                    var(--footer-thumbnail-border);
  --footer-xs-thumbnail-caption-color:             var(--footer-thumbnail-caption-color);
  --footer-xs-thumbnail-background:                var(--footer-thumbnail-background);

  --debug-caption-color:                           var(--footer-header-color); 
}