/* global style */
body{padding-bottom: 20px;}
h1{font-size: 22px;}
h3{font-size: 18px;}
h3{font-size: 16px;}
h4{font-size: 14px; font-weight:600;}
h5{font-size: 14px;}

/* style of blogNav */
#blogNav{background-repeat: repeat-x;background-image: -moz-linear-gradient(top, #f9f9f9 0%, #e5e5e5 100%);background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e5e5e5));background-image: -webkit-linear-gradient(top, #f9f9f9 0%,#e5e5e5 100%);background-image: -o-linear-gradient(top, #f9f9f9 0%,#e5e5e5 100%);background-image: linear-gradient(top, #f9f9f9 0%,#e5e5e5 100%);}
#blogNav .nav > li > a{font-weight: bold;}
#blogNav .nav > li > a:hover{background-color: #fff;color: #373A3F;background-image: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 100%);background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f1f1f1));background-image: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 100%);background-image: -o-linear-gradient(top, #ffffff 0%,#f1f1f1 100%);background-image: linear-gradient(top, #ffffff 0%,#f1f1f1 100%);}
#blogNav .nav >li.active>a,#blogNav .nav >li.active>a:hover,#blogNav .nav >li.active>a:focus{background-color: #ddd;color: #373A3F; background-image: none;box-shadow: inset 0 3px 7px rgba(0,0,0,.15);}

@media (max-width: 767px)
{
  #blogNav .nav{margin: 0}
  #blogNav .nav + .nav{border-top: 1px solid #d5d5d5;}
  #blogNav .nav > li{display: block; float: left; width: 25%; border-left: 1px dashed #ddd}
  #blogNav .nav > li > a{text-align: center; padding: 5px; margin: 5px; border-radius: 6px}

  #headTitle {position: static; margin-top: 15px;}

  .card {margin-bottom: 10px;}
}
@media (max-width: 480px){#blogNav .nav > li{width: 33.333333333333%;}}
@media (max-width: 480px) {#blogNav .nav > li{width: 50%;}}

/* style of footer */
#footNav .icon-rss-sign{color: #f39800}
#footNav .icon-rss-sign:hover{text-decoration: none; color: #ED9C28}

/* articles */
#articles .card{background-color: #fff;padding: 5px 5px 0}
#articles .card-heading a{font-weight: bold; color: #145BCC}
#articles .card .media{max-width: 200px; max-height: 100px}
#articles .card .media img{max-height: 100%}

.article{background-color: #fff}

/* pager */
.pager{margin-bottom: 20px;display: block;}
.pager .page{padding: 0}

/* footer */
#footer{background-color: #fff}