html {
		      font-family: "Roboto", GillSans, Calibri, Trebuchet, sans-serif;
		    }
		    body{
		    	padding-top: 64px;
		    }
			
			h1 {
			    font-size: 4.2rem;
			}

			h2 {
			    font-size: 2.5rem;
			}

			h3 {
			    font-size: 2rem;
			}
			h4{
				font-size: 1.7rem;
			}
			th,td{
				word-wrap: break-word;
			    word-break: break-all;
			    max-width: 400px;
			}
		    code{
		    	background-color: #ddd;
		    	padding: 15px;
		    	display: block;

		    	word-break:break-all; 
				word-wrap:break-word;
				white-space: pre-wrap; 

		    }
		    nav .brand-logo{
		    	display: none;
		    }

		    .language-comment{
				display: none;
		    }

		    #markdownContent input[type=checkbox]{
		    	display: inline-block;
		    	position: relative;
		    	left: 0;
		    	opacity: 1;
		    	margin-left: 0 !important;
		    }
	
		    #markdownContent table{
			    border-collapse: separate;
    			border-spacing: 3;
			}
			#markdownContent table thead,
			#markdownContent table tr.even, 
			#markdownContent table tr.alt, 
			#markdownContent table tr:nth-of-type(even){
			    background: #F9F9F9;
			}
		
			#markdownContent strong{
				font-weight: bolder !important;
    			font-family: arial;
			}
			#markdownContent>h2{
				padding-top: 15px;
			}
			#markdownContent>h3{
				padding-top: 10px;
			}

			#markdownContent ul{
				padding-left: 40px;
			}

			.row{
				overflow-x:hidden; 
			}
		    nav{
				position: fixed;
				top:0;
				z-index: 1000;
			}
			.brand-logo{
				text-indent: 20px;
			}
			#listBtn{
				display: none;
			}
			 #rightBtn {
            	display: none;
       		 }

			#lnav.navLeftPanel{
				height: 100%;
				height: calc(100% - 64px);
				position: fixed;
				overflow-y: auto;
				display: block;
				margin: 0;
				padding: 0;
				z-index: 900;
			}
			#lnav.navLeftPanel:hover{
				/*overflow-y: auto;*/
			}
			

			#lnav li {
			    height: 50px;
			    line-height: 50px;
			    /*background-color: rgba(0, 0, 0, 0.15);*/
			    border-bottom: solid 1px #555;
			    padding: 0 10px;
			    color: white;
			    transition: 0.2s;
			    width:100%;
			}
			#lnav li a{
				color: white;
				height: 50px;
			    line-height: 50px;
			    color: white;
			    display: inline-block;
			    width: 100%;
			}
			li.focus{
				border-left: solid 6px #0277bd ;
			}
			li.sub{
				display: none;
			}
			li.sub.show{
				display: block;
				background-color: #37474f;
				animation: fadeIn 0.2s;
				-webkit-animation: fadeIn 0.2s;
			}
			li.sub>a{
				text-indent: 10px;
				/*color:#888;*/
			}
				
			#markdownContent.container{
				box-sizing: content-box;
				margin-top: 20px;
				padding-top: 1px;
				padding-bottom: 10px;
				padding-left: 4%;
				padding-right: 4%;
				box-shadow: 0 0 5px #555;
			}
			.rightBtnGroup{
            position: absolute;
            right: 60px;
        } 
        .rightBtnGroup dl, .rightBtnGroup dd{
            margin: 0;
            text-align: center;
            box-sizing: border-box;
            cursor: pointer;
        }
        .rightBtnGroup dl{
            display: none;
        }
        .rightBtnGroup #doctype-List dl{
        	display: block;
        }
        .rightBtnGroup dl.show{
            display: block;
            animation: fadeIn 0.3s;
            -webkit-animation: fadeIn 0.3s;
        }
        .rightBtnGroup li span{
            display: inline-block;
		    padding: 0 8px;
		    min-width: 90px;
		    text-align: center;
        }
        .rightBtnGroup li span:after{
		    /*content: '▾';*/
		    content: '\25BE';
		    margin-left: 5px;
        }
        .rightBtnGroup li#doctype-List span{
			display: none;
		}
        .rightBtnGroup li#doctype-List:hover{
            background-color: transparent;
        }
        .rightBtnGroup li:hover{
            background-color: #607d8b;
        }
        .rightBtnGroup dd:hover{
          background-color: #607d8b;
            color:white;
        }
        .rightBtnGroup #doctype-List>dl>dd{
        	display: inline-block;
        }
        .rightBtnGroup #doctype-List>dl>dd:after {
		    content: '\25BE';
		    margin-left: 5px;
		}
		.rightBtnGroup dd{
			position: relative;
			top:0;
			display: block;
		    padding-left: 10px;
		    padding-right: 10px;
		}
        .rightBtnGroup dd.son{
        	display: none;
        	white-space: nowrap;
        	position: absolute;
        	z-index: 999;
        	color:white;
        	background-color: #607d8b;
        	padding: 0 20px;
    		box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
        }
        .rightBtnGroup #doctype-List>dl>dd dd:hover,
        .rightBtnGroup li#platform-List>dl>dd:hover,
        .rightBtnGroup li#language-List>dl>dd:hover{
          background-color: #546e7a;
          color:#00bfff;
        }

        .rightBtnGroup dd.son.md_focus{
        	color:#00bfff;
        }
		.rightBtnGroup #development-List dd.md_focus,
		.rightBtnGroup #platform-List dd.md_focus,
		.rightBtnGroup #language-List dd.md_focus{
			color:#00bfff;
		}
		.rightBtnGroup #development-List dd:hover,
		.rightBtnGroup #platform-List dd:hover,
		.rightBtnGroup #language-List dd:hover{
        	color:#00bfff;
			background-color: #546e7a;
		}

        .rightBtnGroup dd.md_focus{
        	color: #0060ff;
        }
        .rightBtnGroup li>dl>dd.md_focus:hover{
        	color: white;
        }



			@media only screen and (max-width: 600px){
				#lnav.navLeftPanel{
					height: auto;
					position: fixed;
					/*overflow-y: auto;*/
					top: 56px;
					display: none;
					max-height: 90%;
					overflow-y: scroll;
					/*overflow: visible;*/
				}
				#lnav.navLeftPanel::-webkit-scrollbar{
					width: 0px;
				}
				#lnav li{
					padding: 0 25px;
				}
				#listBtn{
					position: absolute;
					left: 10px;
				    color: #fff;
				    display: inline-block;
				    padding: 0;
				}
				#markdownContent.container{
					box-shadow: none;
				}
				#lnav.navLeftPanel.show{
					display: block;
					animation: bounceInDown 0.6s;
					-webkit-animation: bounceInDown 0.6s;	/* Safari 和 Chrome */
				}	

				#rightBtn {
                position: absolute;
                right: 5px;
                color: #fff;
                display: inline-block;
                padding: 0;
            }
            .rightBtnGroup{
                right: 0px;
                top: 54px;
                background-color: #263238;
                width: 100%;
                display: none;
            }
            .rightBtnGroup.show {
                display: block;
                animation: bounceInDown 0.6s;
                -webkit-animation: bounceInDown 0.6s; /* Safari 和 Chrome */
            }

            .rightBtnGroup li{
                float: none;
                width: 100%;
                height: 50px;
                padding: 0 20px;
                /*text-align: right;*/
                border-bottom: solid 1px #555;
            }
            .rightBtnGroup dl{
                display: inline-block;
            }
            .rightBtnGroup li span{
                width: 33%;
                height: 50px;
                text-align: center;

            }
            .rightBtnGroup dd{
                display: inline-block;
                width: 70px;
                height: 50px;
                
            }
            .rightBtnGroup dl.show{
                display: inline;
                animation: fadeIn 0.3s;
                -webkit-animation: fadeIn 0.3s;
            }
            .rightBtnGroup li:hover{
               background-color: #263238;
            }
			}

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(../fonts/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

			

			@-webkit-keyframes bounceInDown {
			  from, 60%, 75%, 90%, to {
			    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
			    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
			  }

			  0% {
			    opacity: 0;
			    -webkit-transform: translate3d(0, -3000px, 0);
			    transform: translate3d(0, -3000px, 0);
			  }

			  60% {
			    opacity: 1;
			    -webkit-transform: translate3d(0, 25px, 0);
			    transform: translate3d(0, 25px, 0);
			  }

			  75% {
			    -webkit-transform: translate3d(0, -10px, 0);
			    transform: translate3d(0, -10px, 0);
			  }

			  90% {
			    -webkit-transform: translate3d(0, 5px, 0);
			    transform: translate3d(0, 5px, 0);
			  }

			  to {
			    -webkit-transform: none;
			    transform: none;
			  }
			}

			@keyframes bounceInDown {
			  from, 60%, 75%, 90%, to {
			    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
			    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
			  }

			  0% {
			    opacity: 0;
			    transform: translate3d(0, -3000px, 0);
			    transform: translate3d(0, -3000px, 0);
			  }

			  60% {
			    opacity: 1;
			    transform: translate3d(0, 25px, 0);
			    transform: translate3d(0, 25px, 0);
			  }

			  75% {
			    transform: translate3d(0, -10px, 0);
			    transform: translate3d(0, -10px, 0);
			  }

			  90% {
			    transform: translate3d(0, 5px, 0);
			    transform: translate3d(0, 5px, 0);
			  }

			  to {
			    transform: none;
			    transform: none;
			  }
			}

			@keyframes fadeIn {
			  from {
			    opacity: 0;
			  }

			  to {
			    opacity: 1;
			  }
			}


		/* 设置滚动条的样式 */
		::-webkit-scrollbar {
		    width: 10px;
		    height: 10px;
		    /*background-size: blue;*/
		}
		::-webkit-scrollbar-track {
		  background-color: #b0bec5;
		} /* 滚动条的滑轨背景颜色 */

		::-webkit-scrollbar-thumb {
			  background-color: rgba(0, 0, 0, 0.2); 
		} /* 滑块颜色 */

		::-webkit-scrollbar-button {
			  /*background-color: #78909c;*/
		} /* 滑轨两头的监听按钮颜色 */

		::-webkit-scrollbar-corner {
			  background-color: black;
		} /* 横向滚动条和纵向滚动条相交处尖角的颜色 */

		.progress{
			width: 53%;
			margin: 23% auto;
		}