/*
 * ==============================================
 * Skin for oXygen generated WebHelp.
 * ==============================================
 * 060718 version
 */ 


/*
 * ------------------------------------------------------------------
 *  
 * Fonts.
 *  
 */
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700");
@import url("https://fonts.googleapis.com/css?family=Exo+2:600,900");

body{
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    background-color: #fff; /*  DH 091917 changing background from "black" so I can see the body */
    color: #002027; /* DH 092017 dark blue from QSR drums scheme */
}

/* DH 101217adding this to utilize Exo 2 google font. Also need to add import lines to HTML file head */
h1 {
  font-family: 'Exo 2',sans-serif;
  font-weight: 900;
  color: #00495A; /* DH 041018 setting h1 color here, topictitle can override */
  }

body.wh_main_page {
    background-color: #000; /*  DH 091917 changing background from "black" so I can see the body */
    color: #fff;
}

@media only screen and (max-width: 700px) { 
body.wh_main_page {
    font-size: 14px;
}
body {
    font-size: 16px;
    }
h1 {
    font-size: 20pt;
  }
}
/*
 * ------------------------------------------------------------------
 *  
 * Formatting notes, tips, etc.
 *  
 */
.note {
    margin: 0px 40px 0px 31px;
}
.tip, .attention, .caution, .trouble {
     padding: 12px 14px 15px 19px;
     margin: 0px 40px 0px 12px;
     border-radius: 1em;
 }
 .attention, .caution {
     background-color: #FFFE85;
 }
 .tip {
     background-color: #C0FF82;
 }
 .trouble {
     background-color: #FFB7B2;
    
 }
 
/*
 * ------------------------------------------------------------------
 *  
 * Remove link icons after h2 section titles
 *  
 */
.dt[id]::after, .section[id] .sectiontitle::after, .title.topictitle2[id]::after, table[id] .tablecap::after {
    background: none;
}

/*
 * ------------------------------------------------------------------
 *  
 * Fight with bootstrap
 *  
 */
.navbar-brand{
    height:auto;
}
.navbar {
    border:none;
    border-radius:0;
    margin:0;
    color:white; /* DH 091917 text color for footer */
    background: none; /* DH 091917 change background from "black" so I can see it */
}
a {
    color: #CE6400; /* DH 092017 changed from white to orange from QSR Drum scheme */
}
a:visited{
    color: #4E7E8B; /* DH 060118 changed from white to QSR drums medium blue */
}

a:hover{
    color: #CE6400; /* DH 022618 edited this value to fix disappearing text on hover */
	text-decoration: underline; /* DH 022618 added this underline to hover text */
}
.wh_top_menu ul li a{
    color: #C5F0FF; /* DH 092017 changed from orange to pale blue */
}
.wh_top_menu ul li a:hover{
    color: #FFFFFF; /* DH 060118 changed from orange to white */
}
.wh_top_menu ul li li a{
    color: #CE6400; /* DH 060118 changed to orange */
}
.wh_top_menu ul li li a:visited{
    color: #4e7e8b; /* DH 092017 changed from orange to Oxygen CSS blue */
}
/* DH 060118 adding this to adjust font size for section labels */
h2.tasklabel, h3.tasklabel, h4.tasklabel, h5.tasklabel, h6.tasklabel {
    font-size: 110%;
}
.table {
    width: 80%;
}
b, strong {     /* DH 060118 added this to format bold text */
    font-weight: 500;
    color: #4E7E8B;
}
strong {
    font-weight: 700;
    color: #4E7E8B;    
}
.wh_related_links b,
.wh_related_links strong,
.wh_child_links b, 
.wh_topic_content b, 
.related-links b {
    font-weight: 500;
    color: #FFF;}
/*
 * ------------------------------------------------------------------
 *  
 * Publication titles
 *  
 */
.wh_logo_and_publication_title{
    margin: 1% 0; /*DH032118 changing position of logo and title in web help page nav bar*/
    padding: 0;
}
.wh_publication_title{
	font-size: 12px; /* DH032118 changed font size for title in navbar*/
}

   
.wh_logo:empty {
    padding: 10px 0px;
    width: 180px;
    height:180px;
background-size: auto;

 }
.wh_publication_title > a{
    padding: 5px 5px;
    font-family: 'Exo 2', sans-serif;
    font-weight: 600;
    color: #CD6515; /* DH 060118 changed to orange */
    font-size: 1.4em;
    position: relative;
    top: 0px;

}
/* DH 092017 adding this to suppress on home page */
.wh_main_page .wh_logo_and_publication_title{
    margin: -20em 40px 0;
}


@media only screen and (max-width: 767px) { 
.wh_publication_title > a{
    padding: 0px 75px 0px 25px;
    font-size: 1.3em;
	line-height: 100%;
    position: absolute;
    top: 5%;
    left: 0%;
    }
}


/*
 * ------------------------------------------------------------------
 *  
 * Menu
 *  
 */
.wh_top_menu {
    font-size: 11pt;
    font-weight: 400;
    margin: .3em 0;
}

/* The submenus */
.wh_top_menu ul ul {
    background-color: #fff; /* DH 092017 white so text is readable, both visited and not */
}
.wh_top_menu ul li:hover {
    background-color: #005172; /* DH 092017 normal blue from QSR Drums scheme */
}
.wh_top_menu ul ul li a:hover {
    background: #005172; /* DH 092017 changed to normal blue from QSR drums scheme */
    border-top-color: #4b545f;
}
.wh_top_menu ul ul li {
}
@media only screen and (max-width: 700px) { 
    .wh_top_menu ul ul {
        border-top: 1px solid #CCCCCC;
    }
    .wh_top_menu li.active{
        background-color: #456387;
    }
    .wh_top_menu ul ul li a:hover {
        background-color: #456387;
    }
}

/*
 * ------------------------------------------------------------------
 *  
 * Link to the index.
 * 
 */
 .wh_indexterms_link a span{
    display:none;
}

@media only screen and (max-width: 700px) {
    .wh_indexterms_link a:before{
        bottom: 0;
    }
}

/*
 * ------------------------------------------------------------------
 *  
 * Breadcrumb
 *  
 */
.wh_breadcrumb ol {
}
.wh_breadcrumb ol{
    color: #4E7E8B; /* DH 060118 changed to lighten up the color */
}
.wh_breadcrumb ol a {
    color:inherit;
}
.wh_breadcrumb ol .active {
    color: #C5F0FF; /* DH 060118 pale blue from QSR Drums scheme */
}


/*
 * ------------------------------------------------------------------
 *  
 * Tools and navigation
 * 
 */
.wh_tools{
    background-color: black;
    margin: 1% 0 2%; /* DH 032118 adjusted params to move breadcrumbs down */
    border-radius: 5px;
}
.wh_right_tools {
    padding: .55em;
}

.wh_print_link,
.wh_navigation_links,
.wh_navigation_links .navnext,
.wh_navigation_links .navprev{
}


.wh_print_link a,
.wh_navigation_links a,
.wh_navigation_links a:hover,
.wh_navigation_links a:active,
.wh_navigation_links a:visited,
.wh_print_link a:before,
.wh_navigation_links a:before,
.wh_navigation_links a:hover:before,
.wh_navigation_links a:active:before,
.wh_navigation_links a:visited:before{
    color: #347bb7;
    text-decoration: none;
}
@media only screen and (max-width: 700px) {
.wh_tools{
    margin: 1em 0 1em; /* DH 091917 changed margins for breadcrumbs on small screens */
    }
}


/*
 * ------------------------------------------------------------------
 *  
 * Tiles
 * 
 */
.wh_tile {
    border-radius: .5em;
    background-color: #456387;
}
.wh_tile_shortdesc{
    margin-top:0.5em;
    margin-bottom: 0.5em;
    text-align: center;
}

.wh_tile_title{
    text-align: center;
    font-size:1.5em;
    text-decoration: none;
}
.wh_tile_title  a:hover{
    color: #CCCCCC;
}
.wh_content_area{
	min-height: 300px; /*DH032118 added this to override default of 500px*/
}

@media only screen and (max-width: 700px) {
    .wh_tile_text {
        height: auto;
    }
    .wh_tile > div{
        height:auto;
    }
}
/* 
You can style some of the tiles in a special way. 
Example:
.wh_tiles *[data-id='getting_started']{
    background-color:gray;
}
*/

/*
 * -----------------------------------------------------------------
  *
  * Disclaimer text    DH032118 added formatting
  *
*/
.disclaimer {
        margin:3% 3%;
	}

/*
 * -----------------------------------------------------------------
  *
  * simpletable formatting     DH040518 added formatting
  *
*/
.simpletable {
        margin:3% 6%;
	}


/*
 * -----------------------------------------------------------------
  *
  * image formatting     DH040618 added formatting to keep large images inside column.
  *
*/
.image {
      margin-top:0.5%;
      max-width: 100%;
	}


/*
 * ------------------------------------------------------------------
 *
 * Connection Diagram image formatting
 * DH032118 trying to control diagram scaling
*/

#concept_hyd_1c1_21b__connections-1 {
	width: 100%;
}
/*
 * ------------------------------------------------------------------
 *  
 * Search area
 * 
 */
#searchForm > div {
    margin: 1% auto;/* DH032118 set this to fix margin on TOC page and ALL pages */
	height:2.5em;
    
}
.wh_welcome:not(:empty){
    font-size: 3em;
    line-height: 1.1;
    margin: 0 auto;
    font-family: 'Roboto', sans-serif; /* This sets the font for the document title on the main page */
    color: #C5F0FF; /* DH 101217 setting font color */
    padding: 3% 0 0 0; /* DH 091917 added padding to move text down inside container */
    
}
/* DH .wh_search_textfield is the "box" where text is entered. */
.wh_search_textfield,.wh_search_button{
    font-size: 1.3em;
    margin:0px 0px; /*  DH 091817 changing this and the .wh_search_textfield margin below (to match) moves search bar */
    padding: 0 .5em;
    border: solid 1px #CCC;
}
.wh_search_textfield{
    margin:0%;
/*  The margin above moves the elements inside the textfield box  */
    padding:0px 0;
    border-radius: 5px;
    color: #00495A;
}
.wh_search_button{
    border-radius: 0 5px 5px 0;
    background-color: #00495A; /* DH 091917 changed to QSR Drums logo color 00495A */
    color:#fff;
}
.wh_search_input{
    background: url('images/qsr-front-image.jpg') center 1em no-repeat;
    background-size: 80%; /* DH 091917 added this to scale image */
    padding:9% 0% 0%; /* DH 091917 These params adjust search bar spacing on help pages. This affects ALL pages. 032118 changed to % so things move as image scales*/
}
.wh_main_page .wh_search_input{
    background: url('images/QSR-drums-home-banner.jpg') center -10px no-repeat; 
    /* DH file location: C:\Program Files (x86)\Oxygen XML Editor 19\frameworks\dita\DITA-OT2.x\plugins\com.oxygenxml.webhelp\templates\dita\bootstrap\variants\tree\Dave Mechano\resources\imagescenter is horizontal, 2nd param moves image up and down inside box */
    background-size: contain; /* DH 091817 changed from "cover" to "Contain" * to keep image inside container*/
    padding:20% 0 0px; /*  DH 091817 changed 1st parameter to 20% instead of px, 3rd parameter (bottom) from 50 to 0px */
}
/* wh_search_input is the box containing the search form on help pages
  .wh_search_input{
    padding:50px 0 10px;

    margin:0 0 0 0;
    DH Keep this margin 0

}  */

/* Search autocomplete */
.ui-menu-item {
    font-size: 1.3em;
    color:black;
}

/* Selected autocomplete item */
.ui-menu-item .ui-state-active {
    background-color: #c46d04;
    border: none;
    margin: 0;
}

/* Search relative path */
.searchresult li .relativePath a {
    color: #c1a37f;
}

/* Search autocomplete icons */
.search-autocomplete-proposal-type-history a,
.search-autocomplete-proposal-type-history a:hover,
.search-autocomplete-proposal-type-history a:visited,
.search-autocomplete-proposal-type-history a:active{
    text-decoration: none;
    color:inherit;
    font-size: 0.8em;
}
.ui-state-active .search-autocomplete-proposal-type-history a,
.ui-state-active .search-autocomplete-proposal-type-history a:hover,
.ui-state-active .search-autocomplete-proposal-type-history a:visited,
.ui-state-active .search-autocomplete-proposal-type-history a:active{
    color: #fff;
}

/* Active search page */
#wh-search-pagination > ul > li.active > a {
    background-color: #c46d04;
}

/* Color for the page number */
.pagination>li>a,.pagination>li>span {
    color: #c46d04;
}

/* Border for the hovered page */
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    border-color: #c46d04 !important;
}

/* Render search area for devices smaller than 700px */
@media only screen and (max-width: 700px) {
    .wh_main_page .wh_search_input { /* DH 040318 need different padding on main page */
      padding:15% 0 5px;  
    }
    .wh_search_input{
        padding:2em 0 1em;
        background-color: #000; /* DH 091917 added this line so I can see where break kicks in */
        margin: 0px 0px
    }
.wh_search_textfield,.wh_search_button{
    font-size: 1.3em;
    margin:0px 0; /*  DH 091817 changing this and the .wh_search_textfield margin below (to match) moves search bar */
    padding: 0 .5em;
    border: solid 1px #CCC;
    display: inline-block; /* DH 091917 I had to add this for the button to display on mobile screens */
    }
    
.wh_welcome:not(:empty){
    font-size: 2.5em;
    line-height: 1.1;
    text-shadow: 0 0 1px black;
    margin: 8% auto 1em; /* DH 092017 this adjusts space between Welcome and search bar */
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    padding: 20px 0 0em 0;
    }   
	
#searchForm > div {
	margin: 6% auto 6%;
	}
}

@media only screen and (max-width: 700px) {
#searchForm > div {
	margin: 12% auto auto;  /* DH 040318 change search form margins on small screens */
	} 
.wh_main_page_toc {
    width: 100%;
    }
.wh_main_page_toc_accordion_entries > * {
    margin-left: 3em;
    }
}

/*
 * ------------------------------------------------------------------
 *  
 * Side TOC
 * 
 */
.wh_side_toc{
    border-radius: 15px; /* DH 040318 increased radius */
    background-color: #00495A; /* DH 091917 changed to QSR Drums logo color 00495A */
    padding: 2em 1.8em;
    line-height: 110%; /* DH040318 changing line height to 120%. This will affect wrapped lines. Set padding for li elements to space items */
    font-weight: 400;
    font-family: 'Roboto', sans-serif; /* DH 040318 changing to Robot to match related links font */
    font-size: 12pt;

}
.wh_side_toc .active {
    color: #cbcb85;
}
.wh_side_toc a, .wh_side_toc a:visited, .wh_side_toc a:hover {
    color: #ffffff;
}
.wh_side_toc a:hover {
    text-decoration: underline;
}

.navbar {
    padding: 0px 15px 15px; /* DH 040318 set padding to match related links */
}

/* DH032918 editing side TOC line height when text wraps */
.wh_side_toc .nav>li {
    padding-top: 4px;
    }

ul.nav.nav-list { /* DH 040318 setting different font for side TOC links */
    font-weight: 400;
    font-size: 10pt;
}

ul.nav.nav-list a { /* DH 040318 trying to set different font color for ul li's */
    color: #C5F0FF; /* DH 040318 pale blue rev text is #C5F0FF */
}

@media only screen and (max-width: 700px) {
    .wh_side_toc{
        padding-left: .5em;
    }
}

/*
 * ------------------------------------------------------------------
 *  
 * Footer
 * 
 */
.wh_footer{
    text-align: center;
    padding: 1em;
    background: black;
}
.footer {
    margin: 1em 0em;
}

/*
 * ------------------------------------------------------------------
 *  
 * Topic content
 * 
 */

.topictitle1 {
    color: #00495A; /* DH this will override h1 color for topic title */
}

.wh_related_links,
.wh_child_links,
.wh_topic_content .related-links{
    color: #FFF; /* DH 040318 setting font color  to white for headings */
    background-color: #00495A; /* DH 092017 changed to QSR drums logo color */
    padding: 1.5em;
    margin: 0px auto 10px; /* DH 091917 changed top and bottom margins */
    width: 97%;
    border-radius: 15px; /* DH040318 making border radius larger */
}

.related-links a,
.related-links a:visited {
    color: #c5f0ff; /* DH060118 changed to pale blue to match side TOC */
    padding-top: 4px;
    padding-bottom: 4px;
    display:inline-block;
    line-height: 1.1;
    font-size: 10pt;
    padding-left: 1em;
}
.related-links a:hover {
    text-decoration: underline;
}

.related-links li div{
    padding-left:.5em;
}

.related-link {
    padding-top: 2px;
}
@media only screen and (max-width: 700px) {
    .wh_topic_content, .wh_content_area {
        min-height: 0;
    }

    .wh_related_links,
    .wh_child_links,
    .wh_topic_content .related-links{
        width: 100%;
    }
}


/*
 * ------------------------------------------------------------------
 *  
 * Search results.
 * 
 */
.searchresult {
    list-style: none;
}
.searchresult li a {
    color:#00495A; /* DH 092017 changed to QSR logo color */
}
.searchresult .shortdesclink {
    margin: .3em .5em 0 0;
}
.wh_search_expression{
    font-weight:bold;
}





/*
 * ------------------------------------------------------------------
 *  
 * Index terms.
 * 
 */
.wh_index_terms span.wh_first_letter {
    color: #346ec5;
}
.wh_index_terms #indexList{
    padding:0;
}



/*
 * ------------------------------------------------------------------
 *  
 * Tree TOC for the main page.
 * 
 */
.wh_toc_shortdesc{
    color:#C5F0FF; /* DH 060118 changed to pale blue from QSR Drums scheme */
}

.wh_main_page_toc{
}

/* Colors */
.wh_main_page_toc{
    border: 1px solid #5b7ba9;
    background-color: #00495A; /* DH 091917 changed color to QSR Drums logo color */
    margin:1% auto 0em; /* DH 091817 changing 1st param (upper margin) from 2em moves the TOC down on the page. 032118 changed top to 1% and bottom margin to 0em*/
}
.wh_main_page_toc .wh_main_page_toc_accordion_header,
.wh_main_page_toc > .wh_main_page_toc_entry {
    border-bottom: 1px solid #5b7ba9;
}
.wh_main_page_toc>.wh_main_page_toc_entry:last-child {
    border-bottom: none;
}
.wh_main_page_toc_accordion_entries{
    background-color: #4e7e8b; /* DH 092017 changed to light blue from QSR drums scheme */
    border-bottom: 1px solid #5b7ba9;
}
.wh_main_page_toc_accordion_entries:hover{
    background-color: #4e7e8b; /* DH 092017 changed to light blue from QSR drums scheme */
}
.wh_main_page_toc .expanded {
    border-bottom: 0;
    background-color: #005172; /* DH 092017 changed to normal blue from QSR drums scheme */
}
.wh_main_page_toc .wh_main_page_toc_accordion_header:hover{
    background-color: #4e7e8b; /* DH 092017 changed to light blue from QSR drums scheme */
}
.wh_main_page_toc>.wh_main_page_toc_entry:hover{
    background-color: #5b7ba9;
}
.wh_main_page_toc a {
    color: #fff;
}

.wh_header {
  padding:0em;
  background: black; /* DH040318 added this to make background black */  
}

@media only screen and (max-width: 700px) {
.wh_main_page_toc{
    margin: 5% auto 5%; /* DH 091817 changing 1st param (upper margin) from 2em moves the TOC down on the page */
    }
.wh_main_page_toc{
    margin:5% auto 0em; /* DH 091817 changing 1st param (upper margin) from 2em moves the TOC down on the page. 032118 changed top to 1% and bottom margin to 0em*/
}
}



/**
 * Highlight color
 */
.highlight {
    background-color: #9E5000;
}

/**
 *  WebHelp Feedback Section
 */
.realperson-text
{
    color: #fff;
}
input[type=button],
input[type=submit],
input[type=password]
{
    border: 1px solid #ccc;
}
/**
  * Administration page
  */
#loginData,
#signUp,
#recoverPwd,
#exportDiv,
#inlineViewDiv,
#setVersionDiv
{
    background-color: black;
}
#editUser
{
    background-color: black;
}
#u_Profile,
#confirmDelete
{
    background-color: black;
}
.tbRow:nth-of-type(2n)
{
  background-color: #3b3b3b;
}
.tbRow:hover
{
  background-color: #6b6b6b;
}

/*  DH032518 format stepsection text */
.stepsection {
    font-weight: 600;
    font-size: 14pt;
    font-family: 'Exo 2', sans-serif;
    color: #005172;
}
.sectiontitle {
    color: #005172;
    font-family: 'Exo 2', sans-serif;
    font-weight: 600;
    font-size: 14pt;}
.itemgroup {          /* DH032518 adding space above paragraph */
    margin-top: 1em;
}
@media only screen and (max-width: 700px) {
.stepsection {
    font-size: 18pt;
    }
.sectiontitle {
    font-size: 18pt;}
    }
#searchForm {
    margin: 2% 10% 1%;
}
@media only screen and (max-width: 767px) {
.wh_header {
  
  }
}
/*
 * 
 * Colors for comments and change tracking. Since this is a black theme, there are some changes. 
 * 
 */
oxy-attributes,
oxy-comment,
oxy-delete,
oxy-insert,
.oxy-attributes,
.oxy-comment,
.oxy-delete,
.oxy-insert  {
        background-color: #FFFFAA; 
        color:black;
}
oxy-attributes a,
oxy-comment a,
oxy-delete a,
oxy-insert a,
.oxy-attributes a,
.oxy-comment a,
.oxy-delete a,
.oxy-insert a {
    color:navy;
} 

    
/*
 * The marked as done changes should be grayed out.
 */
oxy-attributes[flag~="done"],
oxy-comment[flag~="done"],
oxy-delete[flag~="done"],
oxy-insert[flag~="done"],
.oxy-attributes[flag~="done"],
.oxy-comment[flag~="done"],
.oxy-delete[flag~="done"],
.oxy-insert[flag~="done"] {
    color:gray;
}       
oxy-attributes,
.oxy-attributes{
    border-color:white;
}
oxy-comment,
.oxy-comment{
    border-color:transparent;
}
oxy-delete,
.oxy-delete{
    border-color:red;
}
oxy-insert,
.oxy-insert{
    border-color:blue;
}
oxy-range-start,
.oxy-range-start,
oxy-range-end,
.oxy-range-end {
    background-color: yellow;
    color:black;
}
oxy-insert-hl,
.oxy-insert-hl{
    color:#7676F7; 
}
oxy-delete-hl,
.oxy-delete-hl {
    color:red;
}
oxy-comment-hl,
.oxy-comment-hl{
    background-color:yellow;
    color:black;
}

oxy-attributes   oxy-comment,
oxy-comment  	 oxy-comment,
oxy-delete  	 oxy-comment,
oxy-insert   	 oxy-comment,
.oxy-attributes .oxy-comment,
.oxy-comment  	.oxy-comment,
.oxy-delete  	.oxy-comment,
.oxy-insert  	.oxy-comment {
	border-left-color: black;
}