/*Jordan 2024-11-18
This css is used exclusively by the pages in the help folder that are auto-generated.
Those help pages also point to /css/common.css which has all the body styling.
This css just has the styling for the header, FAQ at the bottom, and TOC tree at left.
Do not make changes to this file without consulting me.
*/
.LeftTree{
    position:fixed;
    width:383px;
    top:0;
    bottom:0;
    height:100%;
    overflow-x:hidden;
    overflow-y:scroll;
    display:none;/*for phones*/
    border-right:1px solid gray;
}
.LeftTree img{
    margin: 0px;
}
.LeftTree ul{
    list-style-type:none;
    padding-left:16px; /*default was 40*/
    width:500px;/*keeps items from wrapping*/
}
.LeftTree li{
	line-height:15pt;/*default was 12*/
}
#TocTreeHelp {
    margin-left:8px;
    margin-top:5px;
}
.RightMain{
    margin-left:0px;
    margin-right:0px;
	overflow-x:hidden;
}
@media screen and (min-width: 1100px) {/*When the viewport is huge*/
    .LeftTree {
        display:block;/*Show tree*/
    }
    .RightMain{
        margin-left:384px;
    }
}
.TopBarLeft {
    position:relative;
	height:60px;
    width:100%;
    background-color:rgb(65, 97, 106);
}
.TopBarLeft p{
    position:absolute;
    font-size:138.8%;
    color:white;
    left:90px;
    top:26px;
}
.TopBar{
    position:relative;
	height:60px;
    width:100%;
    background-color:rgb(65, 97, 106);
}
.TopBar2 {
    position:relative;
    height:29px;
    width:100%;
    background-color:rgb(234, 238, 238);
    border-bottom:1px solid gray;
}
.TopBar2 p{
    position:absolute;
    left:6px;
    top:10px;
	width:1100px;/*extra big, so no wrap*/
    font-size:116.66%;
    color:#153c4b;
}
.Logo{
    position:absolute;
    top:3px;
    left:4px;
    max-width:25%;
    height:auto;
}
.Logo img{
    position:relative;
    z-index:1;/*position and z-index both need to be set for img to be clickable*/
    max-width:100%;
    height:auto;
}
.Logo a{
    color:white;
    text-decoration-line:none;
}
.TopBarLinks{/*Invisible.  Very similar to TopBar itself, but it stretches to the right differently.*/
    display:block;
    position:absolute;
    width:100%;
    height:60px;
    max-width:935px;
}
.TopBarTitle{
    display:block;
    width:100%;
    text-align:center;
    font-size:100%;
    margin-top:26px;
    color:white;
}
.TopBarVersion{/*being deprecated*/
    display:inline;
    font-size:66.66%;
}
.TopBarVersionDrop{
    display:inline;
	vertical-align:2px;
	margin-left: 5px;
    font-size:66.66%;
}
.TopBarHome,.TopBarSearch{
    display:block;
    position:absolute;
    right:3px;
    top:6px;
    width: 80px;
    height: 25px;
    color:black;
    background-color:rgb(219, 230, 230);    
}
.TopBarHome{
    top:32px;
}
.TopBarHome:hover,.TopBarSearch:hover{
    background-color:rgb(180,195,195);
}
.TopBarHome p,.TopBarSearch p{
    margin:0px;
    position:absolute;
    right:3px;
    top:2px;
    color:black;
    text-decoration:none;
}
.TopBarHome img, .TopBarSearch img{
    position:absolute;
    left:4px;
    top:5px;
}
@media screen and (min-width: 1100px) {/*When the tree is showing*/
    .TopBarHome{/*, .TopBarSearch { no longer hiding search*/
        display: none;/*hide */
    }
}
@media screen and (min-width: 610px) {/*any screen bigger than a phone*/
   .Logo{
        top:8px;
        left:9px;
   }
   .TopBarTitle{
       margin-top:20px;
       font-size:150%;
   }
   .TopBarVersion{
       font-size:100%;
   }
   .TopBarVersionDrop{
       font-size:66.66%;
   }
   .TopBarHome{
       right:14px;
   }
   .TopBarSearch{
       right:14px;
   }
   .TopBar2{
       height:39px;
   }
   .TopBar2 p{
       font-size:166.66%;
   }
}
.GeneralPageContent {
    padding: 10px 10px; /*t/b r/l*/
    max-width: 915px;/*Doesn't cut off any images*/
}
.expbut {
    position:relative;
    left:-17px;
    top:2px;
}
.exptxt{
    display:inline-block;
    position:relative;
    width:380px;/*Gray highlight should be as wide as nav panel, but not as wide as ul*/
}
.thisPage {
    background-color:rgb(227, 227, 227);
}
.expandButton {
	position: absolute;
	text-align: center;
	background-color: #466278;
	border: solid black 2px;
	border-radius: 4px;
	top: 0px;
	height: auto;
	z-index: 1;
}

.expandButton:hover {
	cursor: pointer;
}

.expandButton p {
	margin: auto;
	width: 100%;
	height: 100%;
	color: #fdcda1;
	font-weight: bold;
}

.expandButton#collapse {
	top: 4px;
	height: 25px;
	width: 25px;
	min-width: 20px;
}

.expandButton#collapse > * {
	font-size: 150%;
	line-height:2px;
}

#FAQ {
	position: fixed;
	bottom:0px;
	min-height: 34px;
	max-height: calc(100% - 5px);
	height: 300px;
	max-width: 935px;
	left:384px;
	width: calc(100% - 385px);
	background: white;
	z-index: 1;
}

#FAQ > #expand.expandButton {
	display: none;
}

#FAQ.closed {
	height: 34px;
	margin:0px 10px;
	width: calc(100% - 405px);
}

#FAQ.closed > * { /*If FAQ is closed, hide all child elements*/
	display: none;
}

#FAQ.closed > #expand.expandButton { /*If FAQ is closed, show the "Expand FAQ" button*/
	display: block;
	line-height: 25px;
	width: calc(100% - 4px);
}

#FAQ iframe {
	height: 100%;
	width: 100%;
}

#dragBar {
	height: 9px;
	width: calc(100% + 15px);
	background: #C0C0C0;
}

#dragBar:hover {
	cursor:row-resize;
}

#dragBar p { /*This is the resize icon, it's just '===' in a <p> tag*/
	position: absolute;
	width: 100%;
	margin: 0 auto;
	color: #8A8A8A;
	font-size: 10px;
	font-weight: bold;
	line-height: 9px;
	letter-spacing: -2px;
	text-align: center;
}

#resizer { /*This is an invisible box that allows users to be able to quickly resize instead of having to make sure the mouse is inside of the gray dragBar*/
	position: absolute;
	-webkit-user-select: none;
	user-select: none;
	width: calc(100% - 15px);
	top: -5px;
	height: 35px;
	background: transparent;
	touch-action: none;
	z-index: 1;
}

@media screen and (max-width: 1100px) {
	#FAQ {
		left:0px;
		width:100%;
	}
	#FAQ.closed {
		width:calc(100% - 18px);
	}
}

@media screen and (max-width: 475px) { /*If vertical on mobile-width screen, make the faq take up the whole screen. If not FAQ is just too small generally*/
	#FAQ {
		height: 100%;
	}
}
@media print {
	.Logo,
	.TopBarSearch,
	.TopBarHome {
		display: none !important;
	}
}