/*
** /styles/site.css
*/

/*@import url('siteColors.css');*/
/*@import url('siteFonts.css');*/
/*@import url('siteFontSizes.css');*/

/********************************
** Root
********************************/

:root {
  
  --transitionDurationText:       0.1s;
  --transitionFunctionText:       ease-in-out;
  --transitionDelayText:          0.2s;
  
  --transitionDurationBackground: 0.1s;
  --transitionFunctionBackground: ease-in-out;
  --transitionDelayBackground:    0.0s;
  
  --transitionDurationBorder:     0.1s;
  --transitionFunctionBorder:     ease-in-out;
  --transitionDelayBorder:        0.1s;
  
}

%transition {
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

::selection {
  outline: 1px solid var(--color-background-theme-020) !important;
  outline-offset: 2px !important;
  background-color: var(--color-background-theme-020) !important;
}

:target {
  outline: 1px solid var(--color-border-site-030) !important;
  outline-offset: 0px !important;
}

/********************************
** Body
********************************/

* { margin: 0; padding: 0; }

body {
  font-family: "Tahoma", Geneva, "Liberation Sans", sans-serif;
  
  background-color: var(--color-background-site-000);
  color: var(--color-text-site-080);
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

/*********************************
** Debug Header
*********************************/

.navHeaderDebug {
  margin: 0px;
  padding: 0px;
  list-style: none;
  position: relative; top 0px;
  outline: 1px solid var(--color-border-site-010);
  -webkit-margin-before: 0px;
  -webkit-margin-after: 0px;
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

/*********************************
** Header
*********************************/

header.siteHeader {
  text-align: center !important;
}

.siteLogo {
  margin-top: 30px;
  margin-bottom: 30px;
}

.siteNav {
  display: flex;
  justify-content: center;
  margin: 10px auto 10px auto;
  border-top: 1px solid var(--color-border-theme-020);
  border-bottom: 1px solid var(--color-border-theme-020);
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
  font-size: var(--font-size-12);
}

.siteNav > ul {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin-left: auto;
  margin-right: auto;
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

.siteNav > ul > li {
  margin-left: auto;
  margin-right: auto;
  padding: 4px 0px 4px 0px;
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

.siteNav > ul > li > a {
  padding: 8px 14px 8px 14px;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

.siteNav > ul > li > a:link {
  background-color: inherit;
  color: var(--color-text-site-080);
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
.siteNav > ul > li > a:hover {
  background-color: var(--color-background-site-020);
  color: var(--color-text-theme-060);
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
.siteNav > ul > li > a:active {
  background-color: var(--color-background-site-030);
  color: var(--color-text-site-060);
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
.siteNav > ul > li > a:visited {
  :
}

.headerBarTheme {
  width: 100%;
  margin: 0px 0px 5px 0px;
  background-color: var(--color-background-theme-020);
  text-align: center;
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

.headerBarSite {
  width: calc( 100% - 20px );
  margin: 0px 0px 5px 0px;
  padding: 5px 10px 5px 10px;
  background-color: var(--color-background-site-010);
  /*text-align: center;*/
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

/***********************
** Configuration
***********************/

/*form.dhrToggles {
  :
}*/

section.configuration {
  width: 100%;
  text-align: center;
}

section.configuration > p {
  margin: 0px 5px 0px 5px;
  padding: 5px 5px 5px 5px;
}

section.configurationSet {
  display: flex;
  flex-direction: row;
  flex: 100%;
  
  flex-wrap: wrap;
  justify-content: center;
}

section.configurationSet > a {
  margin: 5px 5px 5px 5px;
}

section.configurationSet > div {
  margin: 5px 5px 5px 5px;
  cursor: pointer;
}

/*============
** Toggle Button
============*/

.toggleButton {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  
  margin: 0px 5px 0px 5px;
  padding: 0px 0px 0px 0px;
  color: var(--color-text-site-080);
  text-decoration: none;
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

.toggleButtonLeft {
  
  margin: 0px 0px 0px 0px;
  padding: 5px 5px 5px 5px;
  color: var(--color-text-site-080);
  text-decoration: none;
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

.toggleButtonRight {
  
  margin: 0px 0px 0px 0px;
  padding: 5px 5px 5px 5px;
  color: var(--color-text-site-080);
  text-decoration: none;
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

.toggleButton:hover {
  background-color: var(--color-background-theme-010);
  text-decoration: none;
}

.toggleButtonDisabled {
  /*border: 2px solid var(--colorBorderSite);*/
  border: 2px solid var(--color-border-site-020);
  color: var(--color-text-site-060);
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

.toggleButtonEnabled {
  /*border: 2px solid var(--colorBorderTheme);*/
  border: 2px solid var(--olor-border-theme-020);
  /*background-color: var(--color-theme-010);*/
  color: var(--color-text-site-080);
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

/*============
** Push Button
============*/

.pushButton {
  display: flex;
  flex-wrap: nowrap;
  
  margin: 0px 5px 0px 5px;
  padding: 5px 5px 5px 5px;
  color: var(--color-text-site-080);
  text-decoration: none;
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

.pushButton:hover {
  background-color: var(--color-background-theme-010);
  text-decoration: none;
}

.pushButtonDisabled {
  /*border: 2px solid var(--colorBorderSite);*/
  border: 2px solid var(--color-border-site-020);
  color: var(--color-text-site-060);
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

.pushButtonEnabled {
  /*border: 2px solid var(--colorBorderTheme);*/
  border: 2px solid var(--olor-border-theme-020);
  color: var(--color-text-site-080);
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

/*============
** Definitions
============*/

dt {
  width: calc( 100% - 10px);
  margin: 25px 0px 3px 5px;
  padding: 0px 0px 2px 5px;
  
  font-size: var(--font-size-10);
  font-weight: bold;
  color: var(--color-text-site-080);
  text-decoration: underline;
  /*border-bottom: 1px solid var(--colorBorderSite20);*/
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

dd {
  width: calc( 100% - 15px);
  margin: 10px 0px 5px 15px;
  font-size: var(--font-size-09);
  color: var(--color-text-site-060);
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

dd > p {
  margin: 10px 0px 0px 0px;
}

/*============
** Text
============*/

.textSize10 {font-size: var(--font-size-10);}
.textSize09 {font-size: var(--font-size-09);}
.textSize08 {font-size: var(--font-size-08);}

.textColorSite00 {color: var(--color-text-site-080);}
.textColorSite10 {color: var(--color-text-site-070);}
.textColorSite20 {color: var(--color-text-site-060);}

/********************************
** Main
********************************/

@media (min-width: 976px) {
  
  section.main {
    display: flex;
    flex-direction: row;
    
    margin: 0px 10px 10px 10px;
  }
  
  section.mainCenter {
    display: flex;
    flex-direction: column;
    
    flex: calc( 100% - 460px );
    
    margin: 0px 10px 10px 10px;
  }
  
  section.mainLeft {
    display: flex;
    flex-direction: column;
    
    flex: 220px;
    
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
  
  section.mainRight {
    display: flex;
    flex-direction: column;
    
    flex: 220px;
    
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
  
}

/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 976px) {
  
  section.main {
    display: flex;
    flex-direction: column;
    
    margin: 0px 10px 10px 10px;
  }
  
  section.mainCenter {
    flex: calc( 100% - 20px );
    flex-direction: column;
    
    margin: 0px 10px 10px 10px;
  }
  
  section.mainLeft {
    flex: 100%;
  }
  
  section.mainRight {
    flex: 100%;
  }
  
}

/*@media (min-width: 800px; max-width: 1200px) {
  
  section.main {
    display: flex;
    flex-direction: column;
  }
  
  section.mainCenter {
    flex: calc( 100% - 240px );
    flex-direction: column;
    
    margin: 0px 10px 10px 10px;
  }
  
  section.mainLeft {
    flex: 220px;
  }
  
  section.mainRight {
    flex: calc( 100% - 20px );
    flex-dirction: column;
  }
  
}*/

/****************************
** blocks
****************************/

section.mainCenter > header.headerBar {
  background-color: var(--color-background-theme-010);
  text-align: center;
  margin-top: initial !important;
  @extend %transition;
}

section.mainCenter > section {
  /*width: calc(100% - 0px)*/;
  margin: 0px 0px 0px 0px;
  /*padding: 5px 0px 5px 0px;*/
}

.sectionWrapper {
  width: calc(100% - 10px);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 10px;
}

.sectionWrapper > p {
  padding: 8px 0px 8px 0px;
}

header {
  font-weight: bold;
}

header.header1 {
  margin: 30px 0px 0px 0px;
  padding: 5px 0px 3px 5px;
  clear: both;
}

header.header2 {
  margin: 25px 0px 0px 0px;
  padding: 5px 0px 3px 5px;
  clear: both;
}

header.header3 {
  margin: 20px 0px 0px 0px;
  padding: 5px 0px 3px 5px;
  clear: both;
}

header.header4 {
  margin: 15px 0px 0px 0px;
  padding: 5px 0px 3px 5px;
  clear: both;
}

header.header5 {
  margin: 10px 0px 0px 0px;
  padding: 5px 0px 3px 5px;
  clear: both;
}

header.header6 {
  margin: 10px 0px 0px 0px;
  padding: 5px 0px 3px 5px;
  clear: both;
}

/********************************
** Decorations
********************************/

.heavyUnderlineSite {
  margin: 0px 0px 0px 0px;
  padding: 5px 0px 2px 0px;
  
  /*border-bottom: 3px solid var(--colorBorderSite20);*/
  border-bottom: 3px solid var(--color-border-site-030);
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

.normalUnderlineSite {
  /*border-bottom: 1px solid var(--colorBorderSite10);*/
  border-bottom: 1px solid var(--color-border-site-030);
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

.lightUnderlineSite {
  /*border-bottom: 1px solid var(--colorBorderSite);*/
  border-bottom: 1px solid var(--color-border-site-020);
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

.heavyUnderlineTheme {
  margin: 0px 0px 0px 0px;
  padding: 5px 0px 2px 0px;
  
  /*border-bottom: 3px solid var(--colorBorderTheme20);*/
  border-bottom: 3px solid var(--color-border-theme-040);
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

.normalUnderlineTheme {
  /*border-bottom: 1px solid var(--colorBorderTheme10);*/
  border-bottom: 1px solid var(--color-border-theme-040);
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

.lightUnderlineTheme {
  /*border-bottom: 1px solid var(--colorBorderTheme);*/
  border-bottom: 1px solid var(--color-border-theme-030);
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

/* move to index page declarations */
.dropDownRight {
  width: 30px;
  height: 30px;
  
  float: right;
  position: relative;
  top: -30px;
  right: 0px;
  
  cursor: pointer;
}

/********************************
** Site Footer
********************************/

footer.siteFooter {
  text-align: center;
  font-size: var(--font-size-09);
}

footer.siteFooter div.bar {
  width: 100%;
  background-color: var(--color-border-theme-010);
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

footer.siteFooter article {
  width: 100%;
  
  text-align: center;
}

footer.siteFooter div.spacing {
  height: 25px;
}

footer.siteFooter article span {
  font-size: var(--footerTextFontSize);
}

/********************************
** Miscellaneous
********************************/

hr {
  width: 100%;
  height: 10px;
  
  background-color: var(--color-background-theme-010);
  /*border: 0px solid var(--colorBorderTheme);*/
  border: 0px solid var(--color-border-theme-010);
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}