body {margin: 0;}

.header {
    width:100% ;
    height:90px ;
    text-height:100px ;
    padding : 20px 10px ;
    text-align:left ;
    background : #f5f5f5 ;
    z-index: 2 ;
}
.header img{
    position: absolute ;
    top : 5px ;
    right: 5px ;
    height: 110px ;
    padding : 5px 10px ;	
    z-index : 1 ;
}
.title{
    font-size:70px ;
    font-family: "Lucida Console", Times, Serif ;
    font-style : oblique;
    font-weight: bold ;
    text-shadow : 4px 3px #d6d6d6;
    letter-spacing: 8px ;
}
.subtitle{
    font-size:16px ;
    font-family: "Lucida Console", Times, Serif ;
    font-style : normal;
    font-weight: normal ;
    text-shadow : 3px 3px #e0e0e0;
    letter-spacing: 6px ;
}

ul.topnav {
    list-style-type: none;
    margin: auto;
    border: 2px solid #e7e7e7;
    padding : 2px 2px 50px 2px ;
    background-color: #f3f3f3;
    width:100% ;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    box-shadow : 2px 2px 2px 2px rgba(0,0,0,0.03) ;
}

li {
    float: left ;
}

ul.topnav li a, .dropbtn{
    display: block;
    color: #333;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.topnav li a { 
    color : black ;
    font-family : Times, Serif ;
    font-size : 18px ;
}

ul.topnav li a:hover:not(.active){
    display :block ;
    background-color: #fff;
    z-index:1 ;
}
ul.topnav li a.active:hover {background-color: #4FBF5F;}

ul.topnav li a.active {background-color: #4CAF50;}

ul.topnav li.right {float: right;}
/*
@media screen and (max-width: 600px) {
  ul.topnav li.right, 
  ul.topnav li a {float: none;}
}
*/
.topnav .dropdown-content {
  display: none ;
  position: absolute ;
  background-color: #f5f5f5;
  min-width: 160px;
  box-shadow: -1px 10px 16px 3px rgba(0,0,0,0.3);
  z-index:2 ;
}
.topnav .dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown:hover .dropdown-content {
  display: block;
  position:absolute ;
  float : left ;
  z-index: 2;
  opacity:1 ;
}

pre code{
	width:95% ;
	max-width : 600px ;
	overflow: auto ;
	overflow-x: scroll ;
	/* margin : 20px 20px ; */
	border-radius : 5px;
	/* padding :30px ; */
}

.MathJax_Display { 
    text-align: left !important;
    display: inline !important;
    padding-left: 20px ;
    z-index : -1;
}
.MathJax{
   z-index : -1 ;
}
div.content{
    position:static ;
    width: 100% ;
    padding : 0px 16px ;
    overflow-y:auto ;
    z-index:1 ;
}

div.sidepanel{
	height:100% ;
        min-width: 200px ;
	max-width: 250px ;
	top : 40px ;
        width: 20% ;
        float :left ;
	left: 0px ;
 	padding : 30px 0px ;
	background-color : inherit ;
	display: inline-block ;
	overflow: auto ;
}
.sidepanel a {
    padding-left : 10px;
    padding-bottom:3px ;
    padding-top:3px ;
    display : block ;
    text-decoration: none ;
    border-radius:3px ;
}
.sidepanel a:hover{
    background-color : #eee ;
}
.sidepanel a:visited, .sidepanel a:link{
    color : blue ;
}
.sidepanel a.sub:link,a.sub:visited{
    color : grey; 
}

.pagecontent{
	padding :30px 30px; 
	top : 0 ;
	height : 100% ;
	overflow-y: auto ;
        overflow-x: hidden ;
        width:80% ;
        max-width: 600px ;
        height : 100% ;
}

.content li{
    clear :left;
}
.pagecontent *{
    clear : left ;
}
.pagecontent ol{
    clear : all;
}

.pagecontent ol+p{
    padding-top: 12px ;
}
.pagecontent ul+p{
    padding-top: 12px ;
}

.pagecontent p{
	text-align : justify ;
	text-justify: auto ;
}

.pagecontent img{
	display : block ;
	margin-left : auto ;
	margin-right: auto ;
	max-width : 80% ;
}

li > p {
	margin-top: 1pt ;
	margin-bottom: 0em ;
}
.pagecontent li { 
	margin-bottom : 8pt;
}

.center{
	display : block ;
	margin-left : auto ;
	margin-right: auto ;
}