@media (max-width:767px) {

.header-top .col-xs-2, .col-xs-10 {
padding:0;
}

}
            
            
            .main {
            background: #fafafa;
            }
                        
nav[data-toggle='toc'] .nav > li > a {
  display: block;
  padding: 4px 20px;
  font-size: 13px;
  font-weight: 500;
  color: #767676;
}
nav[data-toggle='toc'] .nav > li > a:hover,
nav[data-toggle='toc'] .nav > li > a:focus {
  padding-left: 19px;
  color: #4b8eca;
  text-decoration: none;
  background-color: transparent;
  border-left: 1px solid #4b8eca;
}
nav[data-toggle='toc'] .nav > .active > a,
nav[data-toggle='toc'] .nav > .active:hover > a,
nav[data-toggle='toc'] .nav > .active:focus > a {
  padding-left: 18px;
  font-weight: bold;
  color: #4b8eca;
  background-color: transparent;
  border-left: 2px solid #4b8eca;
}

/* Nav: second level (shown on .active) */
nav[data-toggle='toc'] .nav .nav {
  display: none; /* Hide by default, but at >768px, show it */
  padding-bottom: 10px;
}
nav[data-toggle='toc'] .nav .nav > li > a {
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 30px;
  font-size: 12px;
  font-weight: normal;
}
nav[data-toggle='toc'] .nav .nav > li > a:hover,
nav[data-toggle='toc'] .nav .nav > li > a:focus {
  padding-left: 29px;
}
nav[data-toggle='toc'] .nav .nav > .active > a,
nav[data-toggle='toc'] .nav .nav > .active:hover > a,
nav[data-toggle='toc'] .nav .nav > .active:focus > a {
  padding-left: 28px;
  font-weight: 500;
}


nav[data-toggle='toc'] .nav > .active > ul {
  display: block;
}

hr {border-color:#ececec;}

.well,.panel {border-radius: 4px;border: 1px solid #e1e8ed;box-shadow: 0;}

.panel .btn i,.btn span{
 color:#666666;
}
.panel .panel-heading {
 background-color:#fff;
 font-weight:700;
 font-size:16px;
 color:#262626;
 border-bottom: 1px solid #e1e8ed;
border-top: 0;
border-left: 0;
border-right: 0;
}
#grayheading {
  background:#f1f1f1;
}
.panel .panel-heading a {
 font-weight:400;
 font-size:11px;
}
.panel .panel-heading h2{
 margin-bottom:5px;
}
.panel .panel-default {
 border-color:#cccccc;
}
.panel .panel-thumbnail {
 padding:0;
}
.panel .img-circle {
 width:50px;
 height:50px;
}

h2 {
font-weight:300;
color: #3c4542;
font-size: 26px;

}

.uppercase {
text-transform:uppercase;
}

 h5 { 
 border:0 solid #efefef; 
 border-bottom-width:1px;
 padding-bottom:10px;
}





.hint {
  color: #4b8eca;
  display: inline-block;
  font-weight: bold;
  left: 20px; 
  position: relative;
  top: 0.5em;
}
.hint:before {
  content: 'â†‘';
  display: block;
  font-size: 3em;
  margin-bottom: 5px;
  text-align: center;
}


@media (max-width: 768px) {

  nav.affix[data-toggle='toc'] {
    position: static;
  }


  nav[data-toggle='toc'] .nav .nav {
    display: block;
  }

  .hint {
    top: 0;
  }
}


@media (min-width: 768px) {
  h1:first-child {
    margin-top: 0;
  }
}     
        .navbox{
position:fixed;height:300px;
max-width: 210px;
}
@media (max-width: 768px) {
.navbox{
position:relative;
width:100%;
height:100%;
margin-bottom:30px;
}
}
.rightbox {
margin-left: 250px;
}
@media (max-width: 768px) {
.rightbox {
margin-left: 0px;
}
}

.container p {
margin-bottom:10px;
}


.panel-body h4 {
font-weight:300;
font-size:22px;
}
.panel-body p {
font-size:13px;
font-weight:700;
color:#16325c;
margin-bottom: 5px;
}
.panel-body ul {
padding-left: 12px;
}
.panel-body .row {
padding-top:15px;
padding-bottom:15px;
padding-left: 20px;
padding-right: 20px;
}
@media (max-width: 768px) {
.panel-body .row {
padding-top:5px;
padding-bottom:5px;
padding-left: 0px;
padding-right: 0px;
}
}
.activeITA {
color:#93c47d;
}
.activeITA:hover {
color:#93c47d;
}
.inactiveITA {
color:#ea4b36;
}
.inactiveITA:hover {
color:#ea4b36;
}  

.panel .btn-gray {
            color: #3c4542;
background-color: #f7f7f9;
    border: 1px solid #e1e1e8;
}

.panel .btn-gray:hover {
            color: #3c4542;
background-color: #e2e2e9;
    border: 1px solid #e1e1e8;
}             