﻿body { 
     margin:0;
     padding:0;
     height:100%; 
}
    
div#printheader { display: none; }

/* --------- Headerteil mit Breathcrumb und Page title --------- */      
#idheader { 
    width:100%; 
    height:auto; 
    padding: 0; 
    margin: 0;
    position: fixed;
    top: 0;
    z-index: 2;
} 
#idheader table { 
    background-color: #575757; 
    min-height: 60px; 
    /* The "min-height" for "#idheader table" ensures that the (blue) header of the topic has at least the same height as the header of the navigation panel left of it */
}

    .crumbs {font-size: 8pt; margin-bottom: 3px; margin-top: 0px; color: #FFFFFF}
    .crumbs a {text-decoration: underline; color: #FFFFFF}
    .crumbs a:visited {text-decoration: underline; color: #FFFFFF}
    .crumbs a:hover {color: #F4BC5C}
                   
   #idheader h1 { color: #FFF }

   #idnav {
      text-align: right;
      width: 126px;
      vertical-align: middle;
    }
/* ---------  ----------- */ 
@media screen{
  #idcontent {    
      width: 100%; 
      padding: 0px !important; 
      padding: 10px 15px 5px 10px; 
      position: relative; 
   } 
  #innerdiv {    
      padding: 30px 20px 20px 30px !important;  
      padding: 0px;
      width: 70%; 
   } 
   
    .topichead {
       padding: 5px 10px;
       vertical-align: baseline;
    }
    
    .navlinks {
      font-size: 10pt;
    }
    .navlinks a {
      text-decoration: none;
      color: blue;
    }
    .navlinks a:visited {
      text-decoration: none;
      color: blue;
    }
    .navlinks a:hover {
      text-decoration: underline;
      color: blue;
    }
    
   html.nonscroll { 
      overflow:hidden; 
   } 
   body.nonscroll {    
      overflow:hidden; 
      height:100%; 
   } 
   div.nonscroll { 
      overflow-x:auto;
      overflow-y:scroll; 
   } 
}


/* ++++++++++++++ Content Elements ++++++++++++++ */

/* ------------ Images -------------*/
img {}

/* --------- TOOGLES ---------  */

p.p_ToggleHeading {line-height: 3rem; margin-bottom: 0px !important; background-color: #efefef; border-bottom: 2px solid #fff !important; padding-left: 0.5rem !important; }
p.p_ToggleHeading:first-child {border-top: 0px solid #ccc; margin-top: 3rem !important; }

img.dropdown-toggle-icon {cursor: pointer; width: 16px !important; height: 16px !important;} /* toggle icon */
span.f_ToggleHeading {padding-left: 0.5rem; font-size: 1.1rem; }  
a.dropdown-toggle {cursor: pointer; padding-left: 0rem; }

div.dropdown-toggle-body {margin:0px 3rem 1rem 3rem !important; border-left: 2px solid #eee !important; border-right: 2px solid #eee!important; padding: 1rem !important;}
div.dropdown-toggle-body table td p, ul, ol {margin: 1rem 0.5rem; }
div.dropdown-toggle-body table td {
  border: 0px !important;
  padding: 1rem;
}
div.dropdown-toggle-body:last-child {
  border-bottom: 2px solid #eee;
}
#hmpagebody .dropdown-toggle-body table {margin: 0rem;}

/*.toggle {background: url('icon-toggle-default.png') top left no-repeat; min-height: 24px; padding: 0px 2px 2px 36px; cursor: pointer; }
.togglebody { display: none; padding: 0px 2px 2px 36px; }
h2.toggle.bggray { background: #f0f0f0 url('icon-toggle-default.png') 3px 7px no-repeat; padding: 6px 2px 8px 36px; border-radius: 6px; }
a.imagetogglelink {position: relative; display: inline-block; }
a.inline-toggle {color: Green; text-decoration: none;  font-weight: bold; cursor: pointer;}
a.inline-toggle:visited {color: Green; }
a.inline-toggle:hover {text-decoration: underline}
svg.image-toggle-magnifier {position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 40pt; height: 40pt; max-width: 80%; max-height: 80%; fill: #FFFFFF; stroke: #808080; stroke-width: 0.5pt; opacity: 0.3; transition: opacity 0.3s; }  
img.image-toggle:hover + svg.image-toggle-magnifier, svg.image-toggle-magnifier:hover {opacity: 1;}*/

/* ++++++++++++++ ++++++++++++++++++++++++++ */

/* ---------  ----------- */
    
      #idnav {
        text-align: right;
        width: 126px;
        vertical-align: middle;        
      } 
      #idnav a { text-decoration: none }
      #idnav span {
        display: inline-block;
        width: 24px;
        height: 24px;
        margin-left: 4px;
        background:url('hm_webhelp_buttons_grey.png') top left no-repeat;
      } 
      #idnav a span {
        background-image:url('hm_webhelp_buttons_white.png');
      } 
      #idnav a span:hover {
        background-image:url('hm_webhelp_buttons_orange.png');                   
      } 
      #idnav span.hmbtnprev { background-position: 0 -32px }
      #idnav span.hmbtnnext { background-position: -24px -32px }
      #idnav span.hmbtntop  { background-position: -48px -32px }
      #idnav span.hmbtntoggle  { width: 20px; background-position: -70px -32px }
      #idnav span.hmbtnprint  { background-position: -88px -32px }

      #callout-table, #overview-table {display:block; position:relative; top:0; left:0;}
      #callout-icon {display:block; position:absolute; top:-11px; left:-11px;}
      #callout-icon-flag {display:block; position:absolute; top:-11px; left:-8px;}
      #callout-table a {text-decoration: none; color: blue;}
      #callout-table a:visited {text-decoration: none; color: blue;}
      #overview-table a {text-decoration: none; color: black;}
      #overview-table a:visited {text-decoration: none; color: black;}
      #callout-table a:hover, #overview-table a:hover {text-decoration: underline;}       
      p.help-url { margin: 20px 0 5px 0; text-align: center; font-size: 80%; text-decoration: none }      
      #switchtoggles { text-align: right; padding: 0 2px 0 0; font-size: 90%; } 
      .sync-toc { color: #FFF; font-size: 8pt; font-weight: bold; display: none; }
      .sync-toc a { color: #FFF; text-decoration: none; font-weight: bold;}
      .sync-toc a:visited { color: #FFF; }
      .sync-toc a:hover { text-decoration: underline; }
      a.hmanchor { display: inline-block; margin-top: -4em; padding-top: 4em }	
      

    
    #hmheadbox .mobilemenu {
      width: 32px;
      height: 32px;
      /* Mobile menu color: change the background-url to switch */
      background:url('hm_webhelp_buttons_white.png') top left no-repeat;
      background-position: 0 0;
      margin-right: 20px;
      opacity: 0.7;
      transition: opacity 0.3s ease;
      display: none;
    }
    #hmheadbox .mobilemenu:hover {
      /* Mobile menu highlight color: change the background-url to switch */
      background:url('hm_webhelp_buttons_orange.png') top left no-repeat;
      opacity: 1;
    }
    
	#hmcontentwrapper {
	  position: absolute;
	  top: 0; left: 0; bottom: 0; right: 0;
	 }
    #hmsplitter { 
      display: block; 
    }
    #navbar {    /* This is the small bar above TOC/index with 3 icons: TOC|Index|Search */
      height: 60px;	
    }
    #navbar a {  /* Navigation buttons: change background-url to switch color */
      display: inline-block;
      width: 32px;
      height: 32px;
      margin: 10px 14px 0 10px;
      background:url('hm_webhelp_buttons_white.png') top left no-repeat;
	  opacity: 0.7;
    } 
	#navbar a.current {
		opacity: 1.0;
		cursor: default;
	}
    #navbar a:hover {
      background:url('hm_webhelp_buttons_orange.png') top left no-repeat;
      opacity: 1;
    }
	#navbar a.current:hover {
	 background:url('hm_webhelp_buttons_white.png');
	}
    #navbar a.hmbtntoc    { background-position: -32px 0 !important}
    #navbar a.hmbtnindex  { background-position: -64px 0 !important}
    #navbar a.hmbtnsearch { background-position: -96px 0 !important}
    a.mobilemenu { cursor: pointer; }
    #hmnavbox {
      position: absolute;
      left: 0;
      width: 19.7%;
      min-width: 100px;
      height: 100%;
      }
    #hmnavframe {
      position: absolute;
      left: 0;
      top: 60px;
      right: 0;
      bottom: 0;
      }
    #hmcontentbox {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 20%;      
      background: #FFF;
      border-left: 1px dashed #ccc;
      
    }

    nav #menu-wrapper { max-width: 100% }

    iframe { left:0;top:0;width:100%;height:100%;border:none;background:#ffffff; }
    #hmcontentbox iframe { position: absolute }
	
    /* This media query hides the navigation panel when window width <= 760px */
    @media only screen and (max-width: 760px) {
      #hmheadbox {
         font-size: 70%;	   
      }
      #hmheadbox a.logo {  /* Your logo in the top-left corner  */
         display: none;
      }
      #hmcontentslider { 
        /*top: 35px;      /* when you change the header height, changes this as well */ 
        right: 0;
	  overflow-y: hidden;
	  overflow-x: hidden;
	  -webkit-overflow-scrolling: touch;
	  }
	  #hmcontentwrapper {
	  overflow-y:hidden;
	  width: 200%;
	  }
      #hmsplitter { 
        display: none;
      }
      #hmnavbox { 
	width: 50% !important;
	left: 0;
	bottom: 0;
	overflow: auto;
	}
      #hmcontentbox { 
	width: 50% !important;
	left: 50% !important;
	right: 0;
	bottom: 0;
	overflow: auto;
	border: none;
      }
      #hmheadbox .fullmenu {
	display: none;
      }
      #hmheadbox .mobilemenu {
	display: inline-block;
      }
    }
    
/* +++++++++++++++ TOC: Helpexplorer +++++++++++++++++ */
#toc { padding:0; margin:1rem !important; }
#toc ul { padding-left:0; margin-left:0px }
#toc li { margin-top:2px; margin-left:0; padding:1px }
#toc li::before {display: none; }

.hilight1 { color: #333333 !important; background: #E7E7E7 !important; text-decoration: none; font-weight: 500; }
.hilight2 { color: #333333 !important; background: #E7E7E7 !important; text-decoration: none; font-weight: 500; }
.hilight3 { color: #333333 !important; background: #E7E7E7 !important; text-decoration: none; font-weight: 500; }
.hilight4 { color: #333333 !important; background: #E7E7E7 !important; text-decoration: none; font-weight: 500; }
.hilight5 { color: #333333 !important; background: #E7E7E7 !important; text-decoration: none; font-weight: 500; }
.hilight6 { color: #333333 !important; background: #E7E7E7 !important; text-decoration: none; font-weight: 500; }


/* --- --- */
  
