Template:NJU-China/Pages css

@charset "utf-8"; /* CSS Document */

• {

   box-sizing: border-box;
   margin: 0;
   padding: 0;

} html, body {

   width: 100%;
   height: 100%;
   background-color:#FFF;

} a{

   text-decoration: none;

} canvas{

   position: fixed;

} .mw-content-ltr{

   height: auto;
   margin: 0 ;
   padding: 0 ;
   width: 100% !important;
   background:rgba(200,227,238,0.8) !important;

}

/*loader start*/ .chromeframe {

   margin: 0.2em 0;
   background: #ccc;
   color: #000;
   padding: 0.2em 0;}

1. loader-wrapper {

   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index:999999;}

1. loader {

   display: block;
   position: relative;
   left: 50%;
   top: 50%;
   width: 150px;
   height: 150px;
   margin: -75px 0 0 -75px;
   border-radius: 50%;
   border: 3px solid transparent;
   /* COLOR 1 */
   border-top-color: #FFF;
   -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
   -ms-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
   -moz-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
   -o-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
   animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
   z-index:1001;}

1. loader:before {

   content: "";
   position: absolute;
   top: 5px;
   left: 5px;
   right: 5px;
   bottom: 5px;
   border-radius: 50%;
   border: 3px solid transparent;
   /* COLOR 2 */
   border-top-color: #FFF;
   -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
   -moz-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
   -o-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
   -ms-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
   animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}

1. loader:after {

   content: "";
   position: absolute;
   top: 15px;
   left: 15px;
   right: 15px;
   bottom: 15px;
   border-radius: 50%;
   border: 3px solid transparent;
   border-top-color: #FFF;
   /* COLOR 3 */
   -moz-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
   -o-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
   -ms-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
   -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
   animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}

@-webkit-keyframes spin {

   0%{
       -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
       -ms-transform: rotate(0deg);  /* IE 9 */
       transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
   }100%{
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */}

}

@keyframes spin {

   0%{
       -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
       -ms-transform: rotate(0deg);  /* IE 9 */
       transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
   }100%{
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */}

}

1. loader-wrapper .loader-section {

   position: fixed;
   top: 0;
   width: 51%;
   height: 100%;
   background: #197580; /* Old browsers */
   z-index: 1000;
   -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */
   -ms-transform: translateX(0);  /* IE 9 */
   transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */}

1. loader-wrapper .loader-section.section-left {left: 0;}
2. loader-wrapper .loader-section.section-right {right: 0;}

/* Loaded */ .loaded #loader-wrapper .loader-section.section-left {

   -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
   -ms-transform: translateX(-100%);  /* IE 9 */
   transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */
   -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
   transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}

.loaded #loader-wrapper .loader-section.section-right {

   -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
   -ms-transform: translateX(100%);  /* IE 9 */
   transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */
   -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
   transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}

.loaded #loader {

   opacity: 0;
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;}

.loaded #loader-wrapper {

   visibility: hidden;
   -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
   -ms-transform: translateY(-100%);  /* IE 9 */
   transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */
   -webkit-transition: all 0.3s 1s ease-out;
   transition: all 0.3s 1s ease-out;}

/* JavaScript Turned Off */ .no-js #loader-wrapper {display: none;} .no-js h1 {color: #222222;}

1. loader-wrapper .load_title {

   font-family:'Open Sans';
   color:#FFF; font-size:19px; width:100%; text-align:center; z-index:9999999999999; position:absolute; top:60%; opacity:1; line-height:30px; }

1. loader-wrapper .load_title span { font-weight:normal; font-style:italic; font-size:13px; color:#FFF; opacity:0.5;}

/*Navigationbar Start*/ ul, li {

   list-style: none outside none;

} .nav-menu {

   display: block;
   background: #74adaa;
   /*width:910px;*/
   margin: 25px auto 25px;

} .nav-menu > li {

   display: inline;
   float:left;
   border-right:1px solid #94c0be;
   position: relative;

} .nav-menu > li:last-child {

   border-right: none;

} .nav-menu li a {

   color: #fff;
   display: block;
   text-decoration: none;
   font-family:'sans-serif'!important;
   -webkit-font-smoothing: antialiased;
   -moz-font-smoothing: antialiased;
   font-smoothing: antialiased;
   text-transform: capitalize;
   overflow: visible;
   line-height: 20px;
   font-size: 18px;
   padding: 15px 30px 15px 31px;

}

/* animation domination */ .three-d {

   -webkit-perspective: 200px;
   -moz-perspective: 200px;
   -ms-perspective: 200px;
   -o-perspective: 200px;
   perspective: 200px;
   -webkit-transition: all .07s linear;
   -moz-transition: all .07s linear;
   -ms-transition: all .07s linear;
   -o-transition: all .07s linear;
   transition: all .07s linear;
   position: relative;

}

.three-d:not(.active):hover {

   cursor: pointer;

}

.three-d:not(.active):hover .three-d-box, .three-d:not(.active):focus .three-d-box {

   -wekbit-transform: translateZ(-25px) rotateX(90deg);
   -moz-transform: translateZ(-25px) rotateX(90deg);
   -o-transform: translateZ(-25px) rotateX(90deg);
   -ms-transform: translateZ(-25px) rotateX(90deg);
   transform: translateZ(-25px) rotateX(90deg);

}

.three-d-box {

   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
   -webkit-transform: translatez(-25px);
   -moz-transform: translatez(-25px);
   -ms-transform: translatez(-25px);
   -o-transform: translatez(-25px);
   transform: translatez(-25px);
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
   -o-transform-style: preserve-3d;
   transform-style: preserve-3d;
   -webkit-pointer-events: none;
   -moz-pointer-events: none;
   -ms-pointer-events: none;
   -o-pointer-events: none;
   pointer-events: none;
   position: absolute;
   top: 0;
   left: 0;
   display: block;
   width: 100%;
   height: 100%;

}

.front {

   -webkit-transform: rotatex(0deg) translatez(25px);
   -moz-transform: rotatex(0deg) translatez(25px);
   -ms-transform: rotatex(0deg) translatez(25px);
   -o-transform: rotatex(0deg) translatez(25px);
   transform: rotatex(0deg) translatez(25px);

}

.back {

   -webkit-transform: rotatex(-90deg) translatez(25px);
   -moz-transform: rotatex(-90deg) translatez(25px);
   -ms-transform: rotatex(-90deg) translatez(25px);
   -o-transform: rotatex(-90deg) translatez(25px);
   transform: rotatex(-90deg) translatez(25px);
   color: #FFE7C4;

}

.front, .back {

   display: block;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background: #74adaa;
   padding: 15px 30px 15px 31px;
   color: white;
   -webkit-pointer-events: none;
   -moz-pointer-events: none;
   -ms-pointer-events: none;
   -o-pointer-events: none;
   pointer-events: none;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;

} .nav-menu li .active .front, .nav-menu li .active .back, .nav-menu li a:hover .front, .nav-menu li a:hover .back {

   background-color: #51938f;
   -webkit-background-size: 5px 5px;
   background-size: 5px 5px;
   background-position: 0 0, 30px 30px;
   background-image: -webit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
   background-image: -moz-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
   background-image: -ms-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
   background-image: -o-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
   background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

} .nav-menu ul {

   position: absolute;
   left: -22px;
   text-align: left;
   line-height: 40px;
   font-size: 14px;
   width: 160px;
   -webkit-transition: all 0.3s ease-in;
   -moz-transition: all 0.3s ease-in;
   -ms-transition: all 0.3s ease-in;
   -o-transition: all 0.3s ease-in;
   transition: all 0.3s ease-in;
   -webkit-transform-origin: 0px 0px;
   -moz-transform-origin: 0px 0px;
   -ms-transform-origin: 0px 0px;
   -o-transform-origin: 0px 0px;
   transform-origin: 0px 0px;
   -webkit-transform: rotateX(-90deg);
   -moz-transform: rotateX(-90deg);
   -ms-transform: rotateX(-90deg);
   -o-transform: rotateX(-90deg);
   transform: rotateX(-90deg);
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   -o-backface-visibility: hidden;
   backface-visibility: hidden;

} .nav-menu > li:hover ul {

   display: block;
   -webkit-transform: rotateX(0deg);
   -moz-transform: rotateX(0deg);
   -ms-transform: rotateX(0deg);
   -o-transform: rotateX(0deg);
   transform: rotateX(0deg);

}

.scrollbar{

   position: fixed;
   top: 16px;
   left: 0;
   height: 3px;
   background: #80be49;
   transition-duration: 0.75s,0.75s;
   z-index: 99999;
   width: 0;

}

/*ner back start*/ .ner-back-img{

   z-index:9998;
   width:100px;
   height:700px;
   position: relative;
   animation: bar-float 2s linear infinite;

} @keyframes bar-float {

   0%{
       top:-20px;
   }
   50%{
       top:0px;
   }
   100%{
       top:-20px;
   }

}

.ner-back{

   position:fixed;
   right:1%;
   z-index:99;
   top:-720px;
   transition-duration: 1s,1s;
   cursor: pointer;

}

/*Header start*/ .header{

   opacity:1;
   width: 100%;
   height:150px;
   -webkit-transition: all 0.5s ease-in-out;
   transition-duration: 1s,1s;
   position: absolute;
   top: 16px;

} .nav{

   position: relative;
   float:right;
   top:10px;
   right:calc(20% - 200px);
   z-index: 9998;

} .branding_img{

   position: relative;
   float:left;
   height:100px;
   width:100px;
   margin:0 0 0 0;
   z-index: 9999;
   left:17px;

} .branding_img_w{

   position: relative;
   height:42px;
   width:133px;
   top:0;
   left:0;
   z-index: 9999;

} .branding{

   position:relative;
   float:left;
   height:150px;
   width:133px;
   top:15px;
   left:calc(20% - 200px);
   z-index: 9999;
   cursor: pointer;

}

.main{

   position: relative;
   max-width: 813px;
   padding: 20px;
   margin-left: auto;
   margin-right: auto;
   background-color: rgba(255, 255, 255, 0.49);
   color: #3f3f3f;
   font-size: 19px;
   line-height: 1.8;
   z-index: 10;
   margin-top: 10px;

}

.branding_f{

   cursor: pointer;
   transition-duration: 1s,1s;
   position:fixed;
   opacity:0;
   top:3%;
   left:2%;
   z-index:9999;
   height:100px;

} .branding_img_f{

   position: relative;
   float:left;
   height:75px;
   width:75px;
   margin:0 0 0 0;
   z-index: 9999;

} .branding_img_w_f{

   position: relative;
   height:40px;
   width:126px;
   z-index: 9999;
   left:5px;
   top:18px;

} .footer{

   position:relative;
   width:150%;
   left:-25%;

} .footer_img{

   width:100%;

} .toc_container{

   z-index: 98!important;
   width: 250px!important;
   height: 99%!important;
   background-color: rgba(255,255,255,0)!important;
   transform: translateX(0)!important;
   right: calc((100% - 950px - 340px)/2)!important;
   position: absolute !important;
   top: 0!important;
   padding-top: 0px!important;
   padding-bottom: 10px!important;

} .toc{

   overflow-y: auto!important;
   position: -webkit-sticky!important;
   position: sticky!important;
   top: 100px!important;
   font-size: 15px!important;
   border: 0;
   opacity:0.85;
   background-color:rgba(255,255,255,0.3);

} .table_container{

   width:60%!important;
   text-align: center!important;
   margin-left: auto!important;
   margin-right: auto!important;

} .table_container{

   width:70%!important;
   text-align: center!important;
   margin-left: auto!important;
   margin-right: auto!important;

} .top{

   top:0;
   width:100%;
   position:relative;
   left:0px;
   opacity: 0.8;

} h1{

   margin-top: 25px;

} h2{

   margin-top: 10px;

} p{

   font-family: "Microsoft YaHei";
   font-size: 19px!important;
   text-align: justify;
   line-height: 1.8 !important;

} .pic_container_{} .more{

   width:100%;
   background-color:rgba(255,255,255,0.7);
   bottom:0;
   position:relative;

}

       .next_p{
           bottom: 0%;
           left: 75%;
           width: 4%;
           position: relative;
       }
       .next_p:hover{
           transform: scale(1.2);
           -webkit-transform: scale(1.2);
           -moz-transform: scale(1.2);
           -o-transform: scale(1.2);
           -ms-transform: scale(1.2);
       }