.img-wrapper { display: inline-block; margin-top: 0.25rem; margin-bottom: 1.5rem; padding: 0 0 0 0; }
.embed-left { display: table; float: left; margin-left: 0; margin-right: 1rem; }
.embed-right { display: table; float: right; margin-top: 1.5rem; margin-left: 1.25rem; margin-right: 0; }
.solo-mid { display: table; margin-left: auto; margin-right: auto; }
.img-source { margin: 0 0; padding: 0 0 0 0; }
.img-caption {  padding: 0 0 0 0; width: ; text-align: center; font-size: 0.8rem; color: #36c; }
.img-caption i { font-weight: bold;  }
ol.num-list { list-style-position: inside; }
.up { float: right; }
.submenu-list {font-size: 13px; font-weight: bold; text-decoration: underline; margin-left: 30px; list-style-type: none;}
.submenu-list a:link {color:#727272;}
.doctitle {text-align: center; font-size: 16px; font-weight: bold;}
.note {width: 95%; margin: 10px auto;}
.tip-title {height: 10px; background-color: #898a8c; color: white; font-weight: bold; background-image: url("../images/clipart_lightbulb_grayscale.jpg"); background-position: left; padding-left: 35px; font-size: 14px; overflow: hidden; display: block; background-repeat: no-repeat; padding-top: 2px;}
.tip-body {width: 98%; color: #2d539f; padding: 10px; margin: auto; font-size: 13px;}
ol.list li {margin-left: 15px; padding-left: 8px; padding-bottom: 15px; padding-right: 0px; padding-top: 0px;}
.p-navig {text-align: center;}
h4 {color: #777;}
.li-noimg {	padding-bottom: 18px;}
.limain {	overflow: auto; font-size: 18px; font-style: italic;}.lifirst { padding-top: 20px; }
.linum {	float: left; width:5%; font-weight: bold;	color: #335; } .litext {	float: left; width:95%; font-weight: bold;	color: #335;}
ol.indent li {list-style-position: inside;}
.notelink a {font-size: 13px !important; color: #727272;}
.glossary-term {font-size: 18px; color: #777; font-weight: bold;}

#tocArea {  position: fixed;  top:  70px;  width:315px;  height: 100%;  overflow: auto; border-top: 1px solid #ddd; }

/* Style the element that is used to open and close the faqHeader class */
*.docHeader, *.docHeaderSm {
    width: 100%;
    padding-left: 2%;
    padding-right: 1.5%;
    padding-top: 15px;
    padding-bottom: 15px;
    color: #444;
    cursor: pointer;
    border: none;
    outline: none;
    transition: 0.4s;
    text-align: left;
    font-weight: bold;
    text-decoration: underline;
    background-color: #f5f5f5;
    font-size: 16px;
}
*.docHeader a:link, *.docHeaderSm a:link, *.docHeader a:visited, *.docHeaderSm a:visited {
    color: #555;
}
/* Add a background color to the faqHeader if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
*.docHeader.active, *.docHeader:hover, *.docHeaderSm.active, *.docHeaderSm:hover {
    text-decoration: underline;
    background-color: #e4e4e4;
}
/* Unicode character for "plus" sign (+) */
*.docHeader:before {
    content: '\2795';
    float: left;
    margin-right: 2%;
    padding-top: 3px;
    font-size: 13px;
    width: 20px;
    height: 20px;
}
*.docHeaderSm:before {
    content: '\00A0';
    float: left;
    margin-right: 2%;
    padding-top: 3px;
    font-size: 13px;
    width: 20px;
    height: 20px;
}
/* Unicode character for "minus" sign (-) */
*.docHeader.active:before {
    content: "\2796";
}
*.docEntry {
    max-height: 0;
    overflow: hidden;
    padding-left: 2.5%;
    margin-bottom: 0px;
    background-color: #e4e4e4;
    transition: 0.4s ease-in-out;
    opacity: 0;
}
*.docEntry.show {
    padding-top: 5px;
    padding-bottom: 30px;
    opacity: 1;
    max-height: 1125px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
}
#wrapper-footer {
    margin-top: 150px;
}


#doc-wrapper { margin-left: 0;	margin-right: auto; width: 100%; max-width: 1150px; min-width: 350px; }
#doc-left  {float: left; width: 315px;  padding-top: 10px;}
#doc-right {float: left; width: 65%; line-height: 1.6;}

#div-topright {padding-top: 12px; height: 50px; color: #666; text-align: center; font-size: 16px; font-weight: bold; border-bottom: 1px solid #ddd; } 

#div-content {	padding-left: 7%;}	 

#doc-right h1 { font-weight: bold; font-size: 32px;  }
#doc-right h2 { margin-top: 20px; font-size: 27px; color: #4a7be3;}
#doc-right h3 {	 padding-bottom: 15px; 	font-size: 23px; }

#div-logo { width: 40%; padding-top: 3px; padding-left: 3%;	padding-bottom: 100px;}

#doc-left input[type="checkbox"], #hamburger-lines {  display: none;}


/* As #doc-left is fixed at 315px and #doc-right width is 65%, break point for responsiveness is at 315/(1.0 - 0.65) = 900 */

@media (max-width: 910px) {

	#doc-left, #doc-right {	float: none; width: auto;}
	#doc-right  {	padding-left: 8%; padding-right: 8%;}
	#div-content {		padding-left: 0;	}

	#div-logo {	display: none;} #hamburger-lines {    display: block;  }


	#doc-left input[type="checkbox"],  #doc-left .hamburger-lines {    display: block;  }
  	#doc-left input[type="checkbox"] {
    	display: block; position: absolute;
    	height: 32px; width: 30px; top: 20px; left: 20px;
	    z-index: 5; opacity: 0;
  	}

	#doc-left #hamburger-lines {
    	display: block; position: absolute;
	    height: 23px;  width: 35px; top: 20px; left: 20px;
    	z-index: 2;    display: flex; flex-direction: column;  justify-content: space-between;
	}

  	#doc-left #hamburger-lines .line {
    	display: block;
    	height: 4px;    width: 100%;
    	border-radius: 10px;    background: #333;
  	}

	#doc-left #hamburger-lines .line1 {    transform-origin: 0% 0%;    transition: transform 0.4s ease-in-out;  }
  	#doc-left #hamburger-lines .line2 {    transition: transform 0.2s ease-in-out;  }
  	#doc-left #hamburger-lines .line3 {    transform-origin: 0% 100%;    transition: transform 0.4s ease-in-out;  }

  	#doc-left input[type="checkbox"]:checked ~ #hamburger-lines .line1 {    transform: rotate(35deg);  }
  	#doc-left input[type="checkbox"]:checked ~ #hamburger-lines .line2 {    transform: scaleY(0);  }
  	#doc-left input[type="checkbox"]:checked ~ #hamburger-lines .line3 {    transform: rotate(-35deg);  }

	#tocArea {	display: none;}
	#doc-left input[type="checkbox"]:checked ~ #tocArea {    display: block; background-color: #f5f5f5 }
}

@media (max-width: 768px) {
	body {		font-size: 15px;	}
	#doc-right  {	padding-left: 4%; padding-right: 3.5%;}
	
	#div-topright {padding-left: 10%; font-size: 12px;  }
	#doc-right h2 { font-size: 26px; }	#doc-right h3 {	 	font-size: 21px; }
}