/* mobile */

@media print, screen and (max-width: 39.99875em) {
a.site-title h1, a.site-title, .site-title-label {
  font-weight: normal !important;
  font-size: 1.8rem !important;
 }

#content {
 padding: .5rem 1rem !important;
}

a.site-link {
 font-size: 1.4rem !important;
}

div.site-thumbnail img {
 clear:both;
 padding-bottom: 15px;
}
}

/* nav and buttons */

a.nav-header {
 border-bottom:0;
}

a.nav-header:hover {
 border-bottom: 1px dotted #FF8533;
}

.menu .active>a, .toc-block>ul .active>a, .toc-block ul ul .active>a {
    background: #FF8533;
    color: #000;
}

.button {
    background-color: #FFF;
    color: #000;
}

.button:hover, .button:active, .button:focus {
 background-color:#FF8533;
}

button.menu-toggle:hover {
 background-color:#FF8533;
}


/* body */

body, h1, h2, h3, h4, h5, h6 {
 font-family: "Gill Sans", sans-serif;
 font-weight: 300;
}

/* header and site title */

header {
 border-top: 1rem solid #FF8533;
}

.top-bar {
 padding: 0.5rem 2rem !important;
}

a.site-title, a.site-title h1, .site-title-label {
 font-family: "Gill Sans", sans-serif;
 font-size: 2rem;
 text-decoration: none !important;
}

/* content */

#content {
 padding: 1rem 2rem !important;
}

a.site-link {
 font-size: 2rem;
 border-bottom: 2px dotted #FF8533;
 text-decoration:none;
}

a:hover, a:focus {
    color: #000;
}

div.site {
 clear: left;
 padding-top: 20px;
 padding-bottom: 20px;
}

div.site-thumbnail {
 float: left;
 width: 200px;
 padding-right: 15px;
 padding-bottom: 15px;
}

a.site-link {
 font-size: 1.6em;
}

/* site thumbnail images */
.site-thumbnail img {
 -webkit-box-shadow: -2px 4px 10px -4px rgba(0,0,0,0.75);
 -moz-box-shadow: -2px 4px 10px -4px rgba(0,0,0,0.75);
 box-shadow: -2px 4px 10px -4px rgba(0,0,0,0.75);
 margin: 10px 20px 20px 0;
}


/* slideout menu */

#offCanvas {
 webkit-box-shadow:  inset -13px 0 20px -13px rgb(10 10 10 / 9%);
 box-shadow: inset -13px 0 20px -13px rgb(10 10 10 / 9%);
}

/* footer */ 
footer {
 max-width: none;
 min-height: 160px;
 background-color: #222;
 color: #fff;
 padding: 1rem 2rem;
}

.footer-logo {
 float: right;
 padding-left: 20px;
}

.footer-logo a, .footer-text, .footer-text a {
 color: #fff;
 font-family: "Gill Sans", sans-serif;
 font-weight: normal;
 border: 0;
}

.footer-text a:hover {
 color: #FF8533;
 background-color: #222;
}