* {
    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: 21px;
}

body.mobile {
    font-size: 36px;
}

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

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

.title a {
    display: inline-block;
}

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%;
}

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

body.mobile .navbar-brand {
    font-size: 36px;
}

body.mobile .navbar-nav {
    font-size: 36px;
}

body.mobile div.outer {
    margin: 4% 2% 2% 2%;
}

div.outer {
    margin: 5% 10% 2% 10%;
}

div.date {
    font-size: 80%;
    display: inline-block;
    color: darkgray;
}

@media screen and (max-width: 640px) { 
    div.date {
        display: none;
    } 
} 

/* paginator CSS */
.paginator {
    text-align: right;
    margin: 4% 10% 4% 10%;
}

.paginator .page-number,
.paginator .extend {
    border: 1px solid #ddd;
    cursor: pointer;
    padding: 15px 20px;
}

.paginator .page-number:hover,
.paginator .extend:hover {
    background-color: #eee;
    font-size: 100%;
}

/* footer */
.footer {
    margin-top: 35px;
    margin-bottom: 25px;
}