body {
  background-color: #000;
} h1 {
	font-size: 32px;
} h2 {
  width: 100%; text-align: center; font-weight: 100; font-size: 1.8rem;
  letter-spacing: 1.8rem; padding: 20px; display: inline-block;
} h3, h4 {
  font-weight: 400;
} th, td {
  padding: 8px;
} pre {
  border-radius:10px;
  background-color: unset;
  border: 1px solid rgba(0,45,195,.7);
  color:rgba(200,200,225,1);
  padding:14px;
} p code {
  background-color: rgba(0,35,0,.3);
  border: 1px solid rgba(0,45,195,.8);
} div>ul { 
  margin-left:-20px;margin-right:-20px;padding-left: 0px; 
} header {
  width: 80%;
  position: fixed;
  top: 0;
  left:20%;
  z-index: 1000;
  display:flex;
  background: var(--header-gradient-bg);
  color: var(--header-text-alt);
  transition: unset;
  background: unset;
} header.fixed {
  box-shadow: unset !important;
  border-bottom: unset; /*1px solid rgba(125,125,145,.2);*/
  height:80px;
} #logo h3 {
    color: var(--header-text-alt);
    text-shadow: unset;
} ul {
  list-style: none;
  padding-left: 0px;
  margin-left: 0px;
} li {
	padding:4px;
	border-bottom: 1px solid transparent;
  border-image: linear-gradient(to right, rgba(150, 150, 255, 0.2) 0%, rgba(150, 150, 255, 0.7) 50%, rgba(150, 150, 255, 0.1) 100%) 1;
	list-style: none;
	margin: 10px 0px 10px 20px;
} blockquote {
	background-color: rgba(0, 30, 255,0.3);
	border-color: #004cff;
  margin:0;
} a.open {
	color:#8800ff;
	text-decoration: none;
	/*font-weight: 500;*/
} hr {
	border: 0;
	background-color: rgba(125,125,245,.7);
	height:1px;
}

#content {
  position: absolute;
  top: 122px;
  left: 20%;
  width: 80%;
  padding-bottom:124px;
} 
#pro-grade {
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  background: var(--header-gradient-bg) no-repeat !important;
  z-index: -1;
}
.side-menu {
  position: fixed;
  top:0;
  bottom:0;
  left: 0;
  height: 100%;
  width: 20%;
  min-width: 220px;
  display: inline-block;
  overflow: auto;
  background: unset !important;
  font-weight: 400;
} .side-menu #fav {
  width: 42px;
  margin-bottom: 12px;
  float: left;
} .side-menu strong {
  margin: 20px 0 10px 10px;
  font-family: SpaceAge;
  font-weight: 100;
  font-size: 2.7rem;
} .side-menu li {
	border-bottom: 1px solid transparent; /*rgba(150, 150, 255, 0.5);*/
	border-image: linear-gradient(to right, rgba(150, 150, 255, 0.2) 0%, rgba(150, 150, 255, 0.7) 50%, rgba(150, 150, 255, 0.1) 100%) 1;
} .side-menu li li {
	border-top: 1px solid rgb(60, 60, 131);
	border-bottom:0;
}
 .container.header {
  margin-top: unset;
  align-self:center;
} .main-content {
	left:20%;
	width: 80%;
	position: absolute;
  /*transition: all .2s ease-in-out;*/
} .page-context {
	margin-top: 20px;
}
.body-back {
    max-height:480px;
    min-height:480px;
}
.codehilite {
    border-radius:10px;
    background: -webkit-linear-gradient(left,rgba(0,0,45,.9) 0,rgba(0,0,15,.9) 50%,rgba(0,0,45,.9) 100%) no-repeat !important;
} 
/*
.swd-layout-cell i {
  font-size: 64px;
}.swd-layout-cell img {
  max-height: 64px;
  margin-right: 20px;
}.layout-item-3 i {
  font-size: 42px;
}.layout-item-3 img {
  max-height: 42px;
  margin-right: 14px;
}.layout-item-3 p {
  font-size: 11px;
  line-height: 1.1rem;
}.layout-item-4 div {
  min-height: 92px;
}.layout-item-3 div {
  min-height: 70px;
}.swd-layout-cell p {
  min-height: unset;
}

.col-md-4, .col-md-3 {
	padding-right: unset;
  padding-left: unset;
}
*/

.container {
	margin-left:3%;
	margin-right:3%;
} .container .container {
	margin-left:-3%;
	margin-right:-3%;
}

.cssmenu {
  margin-top: unset;
} .cssmenu li {
  border-bottom:0;
  margin: 4px 0px 10px 20px;
} .cssmenu ul li a {
  padding: unset;
}

.folder { cursor: pointer; font-weight: bold; user-select: none; }
.folder span { display:block; }
.folder:hover span { color: #0048ff; }
.folder > ul { display: none; }
.folder.open > ul { display: block; }
.title-img { 
	width:128px;height:128px;position:absolute;top:42px;right:42px;
	z-index:0;
}

@media only screen and (max-width: 1075px) {
  .side-menu {
    width: calc(30% - (5 * var(--win-width)));
  }
  #content, header {
    width: calc(100% - calc(30% - (5 * var(--win-width))));
    left: calc(30% - (5 * var(--win-width)));
  }
}
@media only screen and (max-width: 875px) {
  .container {
    margin-left: 0px; margin-right: 0px;
  }
  .side-menu { width: 32%; } 
  #content, header { width: 68%; left: 32%; }
}
@media only screen and  (max-width:670px) {
	header {
		position:fixed;
		left:0;
		width:100%;
		height:80px;
		border-bottom: 1px solid rgba(125,125,245,.7);
	}
  .side-menu {
    position:relative;
    top:80px; left:0; right:0;
    width:99%;
    min-height:230px;
    display:inline-block;
    overflow:visible;
  }
  #content {
    position:relative;
    left:0; right:0; bottom:0;
    top: 0;
    width:100%;
    display:inline-block;
    overflow:visible;
    border:0;
  }
	.container article > .container {
      padding-left: 0; padding-right: 0; 
	    /*margin-left: -14px; margin-right: -14px;*/
    }
  iframe.content {
    position:absolute;
    top:370px;
    width: 100%;
    height:100%;
    display:block;
  }
  td, th {
    max-width:40px;
    overflow:hidden;
  } .title-img { 
    opacity:0.7;
    z-index:-1;
  }
}

@media only screen and (max-width: 420px) {
    .container {
      padding-left: 0; padding-right: 0; 
	    margin-left: 0px; margin-right: 0px;
    }
	.container article {
      padding-left: 0; padding-right: 0; 
	    margin-left: 14px; margin-right: 14px;
    }
	.container article > .container {
      padding-left: 0; padding-right: 0; 
	    margin-left: -14px; margin-right: -14px;
    }
	h2 {
    letter-spacing: 0.8rem;
	}
	#logo h3 {
		letter-spacing: 1.1rem;
	}
	.side-menu > .container {
      margin-left: 10px; margin-right: 10px;
    }
	.title-img { 
		opacity:0.4;
	}
}