/**
 * MVC-Framework by Reichl IT Services GmbH 2014-2018
 * Product-ID 361
 * (c) Copyright in 2014-2018 by Reichl IT Services GmbH, Munich, Germany. All rights reserverd.
 * Erwerb einer Nutzungslizenz unter info.361@reichl-it.de
 */

 
 
/**
 * Project specific:
 
    ####  ##### #  ###  #   # #           # #####   ####  #####
    #   # #     # #   # #   # #           #   #     #   # #
    ####  ####  # #     ##### #     ##### #   #     #   # ####
    #  #  #     # #   # #   # #           #   #     #   # #
    #   # ##### #  ###  #   # #####       #   #   # ####  #####

 */
 
:root {
  --font_family:                 'Segoe UI', Tahoma, sans-serif;
  --title_font_family:           'Segoe UI', Tahoma, sans-serif;
  --title_background:            #000;  /* unused */

  --splash_background_mobile:    url("/img/splash_mobile.jpg");
  --splash_background_lowres:    url("/img/splash_lowres.jpg");
  --splash_background_midres:    url("/img/splash_midres.jpg");
  --splash_background_hires:     url("/public/images/splash.jpg");
  
  /* line from left to right at top of screen */
  --headline_bgnd_height:        60px;
  --headline_bgnd_background:    rgba(40,10,180,1);
  /* box above title box */
  --header_background:           rgba(255,255,255,0);   /* invisible */
  
  --menu_color:                  #FFF;                /* for menus and submenus in all modes (standard, active, hover) */
  --menu_background_height:      45px;
  --menu_background:             #000;
  --menu_active_color:           #FFF;
  --menu_active_background:      #304AA0;   /* rgba(0,0,128,.35); */
  
  /* h1, h2, h3, ... */
  --headline_color:              rgb(40,10,180);

  --content_background:          rgba(255, 255, 255, 1);  /* invisible */
  
  /* used for .infobox, .infobtn */
  --infobutton_background:       rgba(40, 10, 180,.7);
  --infobutton_color:            rgba(255,255,255,.9);
  --infobutton_hoverbackground:  rgba(40, 10, 180,.8);
  --infobutton_hovercolor:       rgba(255,255,255,1);
  --btn-success_background:      rgb(40, 10, 180);
  --btn-success_bordercolor:     rgb(40, 10, 180);
  --btn-success_color:           #FFF;
  --hsb_color:                   rgba(255,255,255,.9);
  
  --infotext_color:              #000;
  --infotext_background:         #EEE;
}


ul#menu {
  line-height: calc(var(--menu_background_height) - 3px);   /* we have 1px top and 2px bottom padding in ''ul#menu li a'' */
}

ul#menu li:first-child a {
/*  padding-left: 0px;  */
}


/* for images in articles */
.msgbody img {
    float: left;
    margin: 0 10px 10px 0;
    width: 280px;
}

.msgbody img:hover {
  width: 800px;
}


.titlesplash {
  position: relative;
  height: 320px;
  color: #FFF;
  padding-left: 10px;
  max-width: 650px;
  line-height: 320px;
}

.titlesplash span {
  display: inline-block;
  vertical-align: middle;
  line-height: 1.44em;
  font-size: 1.2em;
  margin-top: -0.8em;
}

.titlesplash h1 {
  font-size: 2em;
  line-height: 1.44em;
  margin-bottom: 0.5em;
  color: #FFF;
}

.titlesplash .btn-success {
    border: unset;
    text-shadow: unset;
    background: var(--btn-success_color);
    color: var(--btn-success_background);
    font-weight: bold;
 }

/* whole line, but NOT always at top of screen */
.titlesplash_bgnd {
  background: var(--splash_background_hires) no-repeat #2f1477 right;
  background-size: auto 100%;
  position: absolute;
  left: 0px;
  width: 99.9%;
  height: 320px;
  z-index: -1;
}

/* instead of .titlebox we use our own class here */
.title-box {
  position: relative;
  width: 180px;
  white-space: nowrap;
  height: var(--headline_bgnd_height);
  padding-top: calc((var(--headline_bgnd_height) - 26px)/2);
}

.title-box a {
    // color: #280AB4;
    color: #FFF;
    font-size: 26px !important;  /* important: normally overwritten by '.header a'-style */
    font-weight: bold !important;  /* important: normally overwritten by '.header a'-style */
}

/* we add a negative vertical feed to display the following menu bar just at the same vertical position a the .header_right_box */
.header_right_box {
  margin-bottom: -46px;
  text-align: right;
}

.avatar {
  margin-right: 10px;
}

.namebox {
  left: unset !important;  /* is set in style.css */
  position: relative !important;  /* overwrite absolute positioning */
  top: 7px !important;     /* ( 44 (avatar height) - 30 (height) ) / 2 */
  margin-bottom: -30px;    /* = height */
  right: 54px;      /* avatar width (44px) + desired margin (10px) */
  height: 30px;            /* 2 x 8 (padding) + text height */
}
    
.dbg_showborder {
    border: 2pt dotted green;
}


.hsb-step li {
  overflow: hidden;
}

.hsb-step li a {
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
  line-height: 1.2em;
}

.hsb-text-container {
  vertical-align: middle;
}

.hsb-text-container a {
  vertical-align: middle;
}

.hsb-image {
  transition: transform .3s ease-in-out;
}

.hsb-step li:hover .hsb-image{
  transform: scale(1.12);
}

.hsb-step li:hover .hsb-text{
  background: #2f1477b0;
}


.timeline li {
  padding-bottom: 1.5rem;
  border-left: 3px solid var(--headline_color, #aaa);
  position: relative;
  padding-left: 1em;
  margin-left: 6em;
  top: -0px;
  list-style-type: none !important;
}

.timeline li:last-child {
/*  border: 0px;*/
  padding-bottom: 10px;
}

.timeline li:before{
  content: '';
  width: 16px;
  height: 16px;
  background: white;
  border: 1px solid var(--headline_color, #aaa);
  border-radius: 50%;
  position: absolute;
  left: -10px;
  top: 1em;
}

.timeline li strong:first-child {
  color: var(--headline_color, #aaa);
  position: relative;
  padding-right: 1em;
  margin-left: -3.5em;
  font-size: 2em;
  top: 0.15em;
}


.intextimage {
  float: left;
  margin: 0 10px 10px 0;
  width: 280px;
}

.floatright {
  float: right;
}