/*****  navigation **/
#tocbar-wrapper {
    text-align: center;
    margin:0 auto;
    max-width: 1000px;
    overflow: hidden;
}
#tocbar {
    background: rgba(0,0,0,0.8);
    text-align: left;
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 990px;
    padding: 3px 5px;
    clear: both;
    color: white;
    z-index: 1002;
    overflow: hidden;
    font-size: 90%;
}
#tocbar > * {float: left; }
#tocbar a { color: #71b0e5;}
#toc_button {
    margin-right: 80px;
    cursor: pointer;
    font-size: 140%;
}
#toc_button img { margin-right: 6px;}
#toc {
    text-align: left;
    display: none;
    font-size: 80%;
    position: fixed;
    top: 25px;
    background: rgba(0,0,0,0.9);
    z-index: 1001;
    max-height: 800px;
		overflow: scroll;
		direction: rtl;
		scrollbar-color: #777 #ccc;
}
@media only screen and (max-height: 850px) {
	#toc {
		max-height: 75%;
	}
}
#toc > div {
    direction: ltl;
    padding: 10px;
    float: left;
    border-right: 1px solid green;
    border-top: 1px solid green;
    max-width: 300px;
}
#toc .h2 { padding-left: 15px; }
#toc .h3 { padding-left: 30px; }
#toc .h4 { padding-left: 45px; }
#toc a { color: #7cbfeb; display: block; margin-top:2px}
#toc p { color: #4ceeb0; margin:4px 0 0 0;}
#toc a:hover { color: red; }

/* standard table of content */
#make-toc-here {
    font-size: 92%;
}

@media only screen and (max-width: 1000px) {
	#tocbar, #tocbar-wrapper {
		width: 100%;
	}
}

@media print {
  #tocbar {
  	position: relative;
  	visibility: hidden;
  	display: none;
  	width: 0;
  	font-size: 0;
  	line-height: 0;
  	margin: 0;
  	padding: 0;
  	height: 0;
  }
}

/***** END: navigation **/