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

:root {
  /* convenience colors */
  /* none */

  /* 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:                            "Salina", var(--serif-font-family-fallback);
  --text-font-family:                              "Roboto", var(--sans-serif-font-family-fallback);

  --font-size-base:                                14px;

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

  /* user profile bar fixed to the top */
  --user-menu-text-color:                          #5c5855;
  --user-menu-background:                          rgba(184 177 173 / 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:                         #b6c6ca;
	--body-panel-border:                             color-mix(in hsl, var(--body-panel-background) var(--border-darken), black);
  --body-panel-box-shadow:                         0 1px 1px rgba(0,0,0,.05);
  --body-panel-text-color:                         #000000;  /* not used cause it never happens */
  --body-panel-heading-border:                     #000000;  /* not used cause it never happens */

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

  --mainmenu-text-color:                           #ffffff;
  --mainmenu-background:                           #abb7b1;
  --mainmenu-border:                               color-mix(in hsl, var(--mainmenu-background) var(--border-darken), black);
  --mainmenu-font-family:                          "Anton", var(--header-font-family);
  --mainmenu-font-size:                            calc(var(--font-size-base) * 2);
  --mainmenu-link-color:                           var(--mainmenu-text-color);
  --mainmenu-link-hover-color:                     #a8c9d1; /*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:               #a8c9d1; /*color-mix(in hsl, var(--mainmenu-background) 90%, black);*/
  --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:               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:                    var(--xs-menu-link-color);
  --xs-menu-avatar-border-color:                   transparent;
                                                                                                      
  --breadcrumb-text-color:                         #dbc79b; /* "current" location, not clickable */
  --breadcrumb-background:                         #5c4540;
  --breadcrumb-border:                             color-mix(in hsl, var(--breadcrumb-background) 93.5%, black);
  --breadcrumb-divider:                            " · ";
  --breadcrumb-divider-color:                      var(--breadcrumb-text-color);
  --breadcrumb-link-color:                         #bf9b98;  /* "parent" paths, clickable */
  --breadcrumb-link-hover-color:                   var(--breadcrumb-text-color);

  --main-content-text-color:                       #003b5a;
  --main-content-background:                       #dbc79b;
  --main-content-border:                           color-mix(in hsl, var(--mainmenu-background) var(--border-darken), black);
  --main-content-box-shadow:                       var(--body-panel-box-shadow);
  --main-content-header-color:                     #455b63; 
  --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:                    #e3e3e3;
  --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:                             #dbc79b;
  --btn-default-bg:                                #5c4540;
  --btn-default-border:                            color-mix(in hsl, var(--btn-default-bg) 95%, black);
  --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:                                   var(--main-content-text-color);
  --input-background:                              color-mix(in hsl, var(--mainmenu-link-active-background) 75%, black);
  --input-border:                                  color-mix(in hsl, var(--input-background) var(--border-darken), black);
  --input-placeholder-color:                       color-mix(in hsl, var(--input-background) 80%, white);
  --input-group-addon-background:                  var(--input-background);
  --input-group-addon-border-color:                var(--input-border);
                                                   
  --label-color:                                   var(--input-color);
                                                   
  --blog-item-background:                          #00ff00;
  --blog-item-border-color:                        #ff0000;

  --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:                              transparent; /*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(--main-content-text-color); /*var(--mainmenu-text-color);*/
  --table-head-background:                         transparent; /*var(--mainmenu-background-color);*/
  --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);

/* not currently used */
  --pager-background:                              #593906;
  --pager-border:                                  color-mix(in hsl, var(--input-background) 95%, black);
  --pager-link-color:                              #BE9A54;
  --pager-link-hover-color:                        color-mix(in hsl, var(--pager-link-color) 85%, black);
  --pager-link-hover-background:                   #593906;
  --pager-link-hover-border:                       #BE9A54;
  --pager-link-disabled-color:                     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:                       #abb7b1;
  --footer-inner-border:                           color-mix(in hsl, var(--footer-inner-background) var(--border-darken), black); /* transaparent; */

  --footer-text-color:                             var(--main-content-text-color);
  --footer-link-color:                             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:                  var(--main-content-link-hover-background);
  --footer-header-color:                           var(--main-content-header-color);

  --social-badges-color:                           #5c4540;
  --social-badges-background:                      transparent;
  --social-badges-hover-color:                     #abb7b1;
  --social-badges-hover-background:                #5c4540;

  --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:                   var(--main-content-background);
  --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);
}