Line 329: | Line 329: | ||
#loading div:nth-of-type(2){ bottom:0;} | #loading div:nth-of-type(2){ bottom:0;} | ||
#loading span{ width:0%; height:4px; background:white; position:absolute; left:0; top:50%; margin-top:-2px; z-index:60; transition:.10s;} | #loading span{ width:0%; height:4px; background:white; position:absolute; left:0; top:50%; margin-top:-2px; z-index:60; transition:.10s;} | ||
+ | .pure-g{ | ||
+ | letter-spacing:-.31em;text-rendering:optimizespeed; | ||
+ | font-family:FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif; | ||
+ | display:-webkit-box; | ||
+ | display:-webkit-flex; | ||
+ | display:-ms-flexbox; | ||
+ | display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:flex-start;-ms-flex-line-pack:start; | ||
+ | align-content:flex-start} | ||
+ | @media all and (-ms-high-contrast:none),(-ms-high-contrast:active){table .pure-g{display:block}} | ||
+ | .opera-only :-o-prefocus,.pure-g{word-spacing:-.43em} | ||
+ | .pure-u,.pure-u-1,.pure-u-1-1,.pure-u-1-12,.pure-u-1-2,.pure-u-1-24,.pure-u-1-3,.pure-u-1-4,.pure-u-1-5,.pure-u-1-6,.pure-u-1-8,.pure-u-10-24,.pure-u-11-12,.pure-u-11-24,.pure-u-12-24,.pure-u-13-24,.pure-u-14-24,.pure-u-15-24,.pure-u-16-24,.pure-u-17-24,.pure-u-18-24,.pure-u-19-24,.pure-u-2-24,.pure-u-2-3,.pure-u-2-5,.pure-u-20-24,.pure-u-21-24,.pure-u-22-24,.pure-u-23-24,.pure-u-24-24,.pure-u-3-24,.pure-u-3-4,.pure-u-3-5,.pure-u-3-8,.pure-u-4-24,.pure-u-4-5,.pure-u-5-12,.pure-u-5-24,.pure-u-5-5,.pure-u-5-6,.pure-u-5-8,.pure-u-6-24,.pure-u-7-12,.pure-u-7-24,.pure-u-7-8,.pure-u-8-24,.pure-u-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto} | ||
+ | .pure-g [class*=pure-u]{font-family:sans-serif} | ||
+ | .pure-u-1-24{width:4.1667%} | ||
+ | .pure-u-1-12,.pure-u-2-24{width:8.3333%} | ||
+ | .pure-u-1-8,.pure-u-3-24{width:12.5%} | ||
+ | .pure-u-1-6,.pure-u-4-24{width:16.6667%} | ||
+ | .pure-u-1-5{width:20%} | ||
+ | .pure-u-5-24{width:20.8333%} | ||
+ | .pure-u-1-4,.pure-u-6-24{width:25%} | ||
+ | .pure-u-7-24{width:29.1667%} | ||
+ | .pure-u-1-3,.pure-u-8-24{width:33.3333%} | ||
+ | .pure-u-3-8,.pure-u-9-24{width:37.5%} | ||
+ | .pure-u-2-5{width:40%} | ||
+ | .pure-u-10-24,.pure-u-5-12{width:41.6667%} | ||
+ | .pure-u-11-24{width:45.8333%} | ||
+ | .pure-u-1-2,.pure-u-12-24{width:50%} | ||
+ | .pure-u-13-24{width:54.1667%} | ||
+ | .pure-u-14-24,.pure-u-7-12{width:58.3333%} | ||
+ | .pure-u-3-5{width:60%} | ||
+ | .pure-u-15-24,.pure-u-5-8{width:62.5%} | ||
+ | .pure-u-16-24,.pure-u-2-3{width:66.6667%} | ||
+ | .pure-u-17-24{width:70.8333%} | ||
+ | .pure-u-18-24,.pure-u-3-4{width:75%} | ||
+ | .pure-u-19-24{width:79.1667%} | ||
+ | .pure-u-4-5{width:80%} | ||
+ | .pure-u-20-24,.pure-u-5-6{width:83.3333%} | ||
+ | .pure-u-21-24,.pure-u-7-8{width:87.5%} | ||
+ | .pure-u-11-12,.pure-u-22-24{width:91.6667%} | ||
+ | .pure-u-23-24{width:95.8333%} | ||
+ | .pure-u-1,.pure-u-1-1,.pure-u-24-24,.pure-u-5-5{width:100%} | ||
+ | @media screen and (min-width:0em){.pure-u-sm-1,.pure-u-sm-1-1,.pure-u-sm-1-12,.pure-u-sm-1-2,.pure-u-sm-1-24,.pure-u-sm-1-3,.pure-u-sm-1-4,.pure-u-sm-1-5,.pure-u-sm-1-6,.pure-u-sm-1-8,.pure-u-sm-10-24,.pure-u-sm-11-12,.pure-u-sm-11-24,.pure-u-sm-12-24,.pure-u-sm-13-24,.pure-u-sm-14-24,.pure-u-sm-15-24,.pure-u-sm-16-24,.pure-u-sm-17-24,.pure-u-sm-18-24,.pure-u-sm-19-24,.pure-u-sm-2-24,.pure-u-sm-2-3,.pure-u-sm-2-5,.pure-u-sm-20-24,.pure-u-sm-21-24,.pure-u-sm-22-24,.pure-u-sm-23-24,.pure-u-sm-24-24,.pure-u-sm-3-24,.pure-u-sm-3-4,.pure-u-sm-3-5,.pure-u-sm-3-8,.pure-u-sm-4-24,.pure-u-sm-4-5,.pure-u-sm-5-12,.pure-u-sm-5-24,.pure-u-sm-5-5,.pure-u-sm-5-6,.pure-u-sm-5-8,.pure-u-sm-6-24,.pure-u-sm-7-12,.pure-u-sm-7-24,.pure-u-sm-7-8,.pure-u-sm-8-24,.pure-u-sm-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto} | ||
+ | .pure-u-sm-1-24{width:4.1667%} | ||
+ | .pure-u-sm-1-12,.pure-u-sm-2-24{width:8.3333%} | ||
+ | .pure-u-sm-1-8,.pure-u-sm-3-24{width:12.5%} | ||
+ | .pure-u-sm-1-6,.pure-u-sm-4-24{width:16.6667%} | ||
+ | .pure-u-sm-1-5{width:20%} | ||
+ | .pure-u-sm-5-24{width:20.8333%} | ||
+ | .pure-u-sm-1-4,.pure-u-sm-6-24{width:25%} | ||
+ | .pure-u-sm-7-24{width:29.1667%} | ||
+ | .pure-u-sm-1-3,.pure-u-sm-8-24{width:33.3333%} | ||
+ | .pure-u-sm-3-8,.pure-u-sm-9-24{width:37.5%} | ||
+ | .pure-u-sm-2-5{width:40%} | ||
+ | .pure-u-sm-10-24,.pure-u-sm-5-12{width:41.6667%} | ||
+ | .pure-u-sm-11-24{width:45.8333%} | ||
+ | .pure-u-sm-1-2,.pure-u-sm-12-24{width:50%} | ||
+ | .pure-u-sm-13-24{width:54.1667%} | ||
+ | .pure-u-sm-14-24,.pure-u-sm-7-12{width:58.3333%} | ||
+ | .pure-u-sm-3-5{width:60%} | ||
+ | .pure-u-sm-15-24,.pure-u-sm-5-8{width:62.5%} | ||
+ | .pure-u-sm-16-24,.pure-u-sm-2-3{width:66.6667%} | ||
+ | .pure-u-sm-17-24{width:70.8333%} | ||
+ | .pure-u-sm-18-24,.pure-u-sm-3-4{width:75%} | ||
+ | .pure-u-sm-19-24{width:79.1667%} | ||
+ | .pure-u-sm-4-5{width:80%} | ||
+ | .pure-u-sm-20-24,.pure-u-sm-5-6{width:83.3333%} | ||
+ | .pure-u-sm-21-24,.pure-u-sm-7-8{width:87.5%} | ||
+ | .pure-u-sm-11-12,.pure-u-sm-22-24{width:91.6667%} | ||
+ | .pure-u-sm-23-24{width:95.8333%} | ||
+ | .pure-u-sm-1,.pure-u-sm-1-1,.pure-u-sm-24-24,.pure-u-sm-5-5{width:100%}} | ||
+ | |||
+ | @media screen and (min-width:48em){.pure-u-md-1,.pure-u-md-1-1,.pure-u-md-1-12,.pure-u-md-1-2,.pure-u-md-1-24,.pure-u-md-1-3,.pure-u-md-1-4,.pure-u-md-1-5,.pure-u-md-1-6,.pure-u-md-1-8,.pure-u-md-10-24,.pure-u-md-11-12,.pure-u-md-11-24,.pure-u-md-12-24,.pure-u-md-13-24,.pure-u-md-14-24,.pure-u-md-15-24,.pure-u-md-16-24,.pure-u-md-17-24,.pure-u-md-18-24,.pure-u-md-19-24,.pure-u-md-2-24,.pure-u-md-2-3,.pure-u-md-2-5,.pure-u-md-20-24,.pure-u-md-21-24,.pure-u-md-22-24,.pure-u-md-23-24,.pure-u-md-24-24,.pure-u-md-3-24,.pure-u-md-3-4,.pure-u-md-3-5,.pure-u-md-3-8,.pure-u-md-4-24,.pure-u-md-4-5,.pure-u-md-5-12,.pure-u-md-5-24,.pure-u-md-5-5,.pure-u-md-5-6,.pure-u-md-5-8,.pure-u-md-6-24,.pure-u-md-7-12,.pure-u-md-7-24,.pure-u-md-7-8,.pure-u-md-8-24,.pure-u-md-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-u-md-1-24{width:4.1667%} | ||
+ | .pure-u-md-1-12,.pure-u-md-2-24{width:8.3333%} | ||
+ | .pure-u-md-1-8,.pure-u-md-3-24{width:12.5%} | ||
+ | .pure-u-md-1-6,.pure-u-md-4-24{width:16.6667%} | ||
+ | .pure-u-md-1-5{width:20%} | ||
+ | .pure-u-md-5-24{width:20.8333%} | ||
+ | .pure-u-md-1-4,.pure-u-md-6-24{width:25%} | ||
+ | .pure-u-md-7-24{width:29.1667%} | ||
+ | .pure-u-md-1-3,.pure-u-md-8-24{width:33.3333%} | ||
+ | .pure-u-md-3-8,.pure-u-md-9-24{width:37.5%} | ||
+ | .pure-u-md-2-5{width:40%} | ||
+ | .pure-u-md-10-24,.pure-u-md-5-12{width:41.6667%} | ||
+ | .pure-u-md-11-24{width:45.8333%} | ||
+ | .pure-u-md-1-2,.pure-u-md-12-24{width:50%} | ||
+ | .pure-u-md-13-24{width:54.1667%} | ||
+ | .pure-u-md-14-24,.pure-u-md-7-12{width:58.3333%} | ||
+ | .pure-u-md-3-5{width:60%} | ||
+ | .pure-u-md-15-24,.pure-u-md-5-8{width:62.5%} | ||
+ | .pure-u-md-16-24,.pure-u-md-2-3{width:66.6667%} | ||
+ | .pure-u-md-17-24{width:70.8333%}.pure-u-md-18-24,.pure-u-md-3-4{width:75%}.pure-u-md-19-24{width:79.1667%}.pure-u-md-4-5{width:80%}.pure-u-md-20-24,.pure-u-md-5-6{width:83.3333%}.pure-u-md-21-24,.pure-u-md-7-8{width:87.5%}.pure-u-md-11-12,.pure-u-md-22-24{width:91.6667%}.pure-u-md-23-24{width:95.8333%}.pure-u-md-1,.pure-u-md-1-1,.pure-u-md-24-24,.pure-u-md-5-5{width:100%}} | ||
+ | |||
+ | </style> | ||
+ | <!-- for the menu and all--> | ||
+ | <style type="text/css"><!-- | ||
+ | |||
+ | .pure-menu { | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | .pure-menu-fixed { | ||
+ | position: fixed; | ||
+ | left: 0; | ||
+ | top: 0; | ||
+ | z-index: 3; | ||
+ | } | ||
+ | .pure-menu-list, | ||
+ | .pure-menu-item { | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .pure-menu-list { | ||
+ | list-style: none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | .pure-menu-item { | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | .pure-menu-link, | ||
+ | .pure-menu-heading { | ||
+ | display: block; | ||
+ | text-decoration: none; | ||
+ | white-space: nowrap; | ||
+ | } | ||
+ | .pure-menu-item .pure-menu-item { | ||
+ | display: block; | ||
+ | } | ||
+ | .pure-menu-heading { | ||
+ | text-transform: uppercase; | ||
+ | color: #565d64; | ||
+ | } | ||
+ | .pure-menu-link, { | ||
+ | color: #777; | ||
+ | } | ||
+ | |||
+ | .pure-menu-link, | ||
+ | .pure-menu-heading { | ||
+ | padding: .5em 1em; | ||
+ | } | ||
+ | .pure-menu-active > .pure-menu-link, | ||
+ | .pure-menu-link:hover, | ||
+ | .pure-menu-link:focus { | ||
+ | background-color: #eee; | ||
+ | } | ||
+ | .pure-menu-selected .pure-menu-link, | ||
+ | .pure-menu-selected .pure-menu-link:visited { | ||
+ | color: #000; | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | color: #777; | ||
+ | } | ||
+ | |||
+ | .pure-img-responsive { | ||
+ | max-width: 100%; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | #layout, | ||
+ | #menu, | ||
+ | .menu-link { | ||
+ | -webkit-transition: all 0.2s ease-out; | ||
+ | -moz-transition: all 0.2s ease-out; | ||
+ | -ms-transition: all 0.2s ease-out; | ||
+ | -o-transition: all 0.2s ease-out; | ||
+ | transition: all 0.2s ease-out; | ||
+ | } | ||
+ | |||
+ | #layout { | ||
+ | position: relative; | ||
+ | left: 0; | ||
+ | padding-left: 0; | ||
+ | } | ||
+ | #layout.active #menu { | ||
+ | left: 175px; | ||
+ | width: 175px; | ||
+ | } | ||
+ | |||
+ | #layout.active .menu-link { | ||
+ | left: 175px; | ||
+ | } | ||
+ | |||
+ | .content { | ||
+ | margin: 0 auto; | ||
+ | padding: 0 2em; | ||
+ | max-width: 800px; | ||
+ | margin-bottom: 50px; | ||
+ | line-height: 1.6em; | ||
+ | } | ||
+ | |||
+ | .header { | ||
+ | margin: 0; | ||
+ | color: #333; | ||
+ | text-align: center; | ||
+ | padding: 2.5em 2em 0; | ||
+ | border-bottom: 1px solid #eee; | ||
+ | } | ||
+ | .header h1 { | ||
+ | margin: 0.2em 0; | ||
+ | font-size: 3em; | ||
+ | font-weight: 300; | ||
+ | } | ||
+ | .header h2 { | ||
+ | font-weight: 300; | ||
+ | color: #ccc; | ||
+ | padding: 0; | ||
+ | margin-top: 0; | ||
+ | } | ||
+ | |||
+ | .content-subhead { | ||
+ | margin: 50px 0 20px 0; | ||
+ | font-weight: 300; | ||
+ | color: #888; | ||
+ | } | ||
+ | |||
+ | |||
+ | #menu { | ||
+ | margin-left: -175px; /* "#menu" width */ | ||
+ | width: 175px; | ||
+ | position: fixed; | ||
+ | top: 18px; | ||
+ | left: 0; | ||
+ | bottom: 0; | ||
+ | z-index: 1000; /* so the menu or its navicon stays above all content */ | ||
+ | background: #000000; | ||
+ | overflow-y: auto; | ||
+ | -webkit-overflow-scrolling: touch; | ||
+ | } | ||
+ | #menu a { | ||
+ | color: #999; | ||
+ | border: none; | ||
+ | padding: 0.6em 0 0.6em 0.6em; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | Remove all background/borders, since we are applying them to #menu. | ||
+ | */ | ||
+ | #menu .pure-menu, | ||
+ | #menu .pure-menu ul { | ||
+ | border: none; | ||
+ | background: transparent; | ||
+ | } | ||
+ | |||
+ | #menu .pure-menu ul, | ||
+ | #menu .pure-menu .menu-item-divided { | ||
+ | border-top: 1px solid #333; | ||
+ | } | ||
+ | /* | ||
+ | Change color of the anchor links on hover/focus. | ||
+ | */ | ||
+ | #menu .pure-menu li a:hover, | ||
+ | #menu .pure-menu li a:focus { | ||
+ | background: #333; | ||
+ | } | ||
+ | |||
+ | #menu .pure-menu-selected, | ||
+ | #menu .pure-menu-heading { | ||
+ | background: #1f8dd6; | ||
+ | } | ||
+ | #menu .pure-menu-selected a { | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | #menu .pure-menu-heading { | ||
+ | font-size: 110%; | ||
+ | color: #fff; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | .menu-link { | ||
+ | position: fixed; | ||
+ | display: block; /* show this only on small screens */ | ||
+ | top: 18px; | ||
+ | left: 0; /* "#menu width" */ | ||
+ | background: #000; | ||
+ | background: rgba(0,0,0,0.7); | ||
+ | font-size: 10px; /* change this value to increase/decrease button size */ | ||
+ | z-index: 10; | ||
+ | width: 2em; | ||
+ | height: auto; | ||
+ | padding: 2.1em 1.6em; | ||
+ | } | ||
+ | |||
+ | .menu-link:hover, | ||
+ | .menu-link:focus { | ||
+ | background: #000; | ||
+ | } | ||
+ | |||
+ | .menu-link span { | ||
+ | position: relative; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .menu-link span, | ||
+ | .menu-link span:before, | ||
+ | .menu-link span:after { | ||
+ | background-color: #fff; | ||
+ | width: 100%; | ||
+ | height: 0.2em; | ||
+ | } | ||
+ | |||
+ | .menu-link span:before, | ||
+ | .menu-link span:after { | ||
+ | position: absolute; | ||
+ | margin-top: -0.6em; | ||
+ | content: " "; | ||
+ | } | ||
+ | |||
+ | .menu-link span:after { | ||
+ | margin-top: 0.6em; | ||
+ | } | ||
+ | @media (min-width: 88em) { | ||
+ | |||
+ | .header, | ||
+ | .content { | ||
+ | padding-left: 2em; | ||
+ | padding-right: 2em; | ||
+ | } | ||
+ | |||
+ | #layout { | ||
+ | padding-left: 175px; /* left col width "#menu" */ | ||
+ | left: 0; | ||
+ | } | ||
+ | #menu { | ||
+ | left: 175px; | ||
+ | } | ||
+ | |||
+ | .menu-link { | ||
+ | position: fixed; | ||
+ | left: 175px; | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #layout.active .menu-link { | ||
+ | left: 175px; | ||
+ | } | ||
+ | #Qidilist .divList{ width:1100px; height:520px; margin:0px auto; position:relative;} | ||
+ | } | ||
+ | |||
+ | @media (max-width: 88em) { | ||
+ | #layout.active { | ||
+ | position: relative; | ||
+ | left: 175px; | ||
+ | } | ||
+ | #Qidilist .divList{ width:900px; height:500px; margin:0px auto; position:relative;} | ||
+ | } | ||
+ | .pure-menu-item .pure-menu-item{display:block;background-color:#cccccc} | ||
+ | .pure-menu-children{display:none;position:relative;top:0;margin:0;padding:0;z-index:3} | ||
+ | .pure-menu-active>.pure-menu-children,.pure-menu-allow-hover:hover>.pure-menu-children{display:block;position:relative} | ||
+ | .pure-menu-has-children>.pure-menu-link:after{padding-left:.5em;content:"\25B8";font-size:small} | ||
.pure-button { | .pure-button { | ||
Line 437: | Line 790: | ||
</ul> | </ul> | ||
<ul id="Qidilist"> | <ul id="Qidilist"> | ||
+ | <li id="home" class="liList"> | ||
+ | <div id="homeContent" class="divList"> | ||
+ | <ul class="homeContent1"> | ||
+ | </ul> | ||
+ | <ul class="homeContent2"> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </li> | ||
<li id="abstract" class="liList"> | <li id="abstract" class="liList"> | ||
Line 445: | Line 806: | ||
</li> | </li> | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</ul> | </ul> | ||
</div> | </div> |
Revision as of 14:22, 16 October 2017