* {
  box-sizing: border-box;
}

/* reset CSS */
table {
  font-size: 100%;
}

/* end reset CSS */

body {
  font-family: STFangSong, Helvetica, Arial, Vernada, Tahoma, STXihei,
    'Microsoft YaHei', 'Songti SC', SimSun, Heiti, sans-serif;
  font-size: 20px;
}

body.mobile {
  font-size: 3.5rem;
}

.navbar-brand {
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Helvetica, STKaiti,
    SimSun, serif;
  font-size: 100%;
}

.title a {
  display: block;
}

.title a:hover  {
  cursor: pointer;
  background-color: #f1eff0;
}

.title a:active  {
  cursor: grabbing;
}

.title {
  cursor: default;
  padding: 15px 20px;
}

.title details {
  /* background: #cfd7ff; */
  border: 1px solid #4e57ef;
  box-shadow: 3px 4px 0px #aaaab7;
  line-height: 2em;
}
.title details>summary {
  padding: 0 5px;
}

details a {
  margin-top: .5rem;
}

li.title:hover {
  background-color: #eee;
  font-size: 100%;
}

.panel {
  border-radius: 0;
  font-size: 100%;
}

.panel-default > .panel-heading {
  background-image: none;
  background-color: #fff;
  font-size: 100%;
}

.navbar-default {
  background-image: none;
  background-color: #fff;
  box-shadow: none;
  font-size: 100%;
  margin-bottom: 3px;
}

.navbar-brand,
.navbar-nav {
  font-size: 20px;
}

body.mobile .navbar-brand {
  line-height: 2rem;
  font-size: 3.5rem;
}

body.mobile .navbar-nav {
  font-size: 4rem;
}

div.outer {
  margin: 0 10% 0 10%;
  padding: 1.5em 0 .8em 0;
}

body.mobile div.outer {
  margin: 0 1rem 0 1rem;
}

body.mobile .big-icon {
  width: 4.3rem;
  height: 6px;
}

body.mobile .navbar-nav li {
  margin-bottom: 1rem;
}


/*  added by nonwill */

div.listouter {
  margin: 0 10% 0 10%;
  padding-bottom: 0;
}

body.mobile div.listouter {
  margin: 0 1rem 1rem 1rem;
} 

div.listouter+.outer{
  margin-top: 1px;
  padding-top: 0;
}
 
.navbar+div.outer {
 padding-top: 0 !important;
}

/*   float the navbar   */
/* 
.navbar-default {
  margin-bottom: 1px;
  position: fixed;
  top: 0;
  width: 100%;
  border-bottom: 1px solid #FFCC66;
}
.navbar+div { margin-top: 58px; }
body.mobile .navbar+div { margin-top: 6.8rem; }
*/
/* another one, no need to margin-top the next div.
 works well in modern browser */
.navbar-default {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  width: 100%;
  border-bottom: 1px solid #FFCC66;
}
/* end of another one */

/*   ---end of float the navbar---   */

.listouter>div:last-child{
margin:0;
}

footer a:hover, footer a:focus, .title a:hover, .title a:focus {
  text-decoration: none;
}
 
/*  added by nonwill */

img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
  box-shadow: 0 0 10px #555;
  border-radius: 6px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  -webkit-box-shadow: 0 0 10px #555;
}

img.displayed {
  text-align: center;
  display: block;
}

.navbar-default .navbar-collapse>.navbar-nav.navbar-right>li>a .long_name {display:none !important}
.navbar-default .navbar-collapse.in>.navbar-nav.navbar-right>li>a .long_name {display:inline !important}