/* Stephen Little Handcrafted Drums — values taken from the original Squarespace theme */
html { -webkit-text-size-adjust: 100%; }
html { background: #1f1f1f url(images/bg.jpg); }
body {
  margin: 0; color: #B3B3B3; background: #1f1f1f url(images/bg.jpg);
  font: 14px/20px Georgia, 'Times New Roman', serif;
}
#canvas { width: 864px; max-width: 100%; margin: 0 auto; box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* Header: gradient background, banner image, nav bar between brown rules */
#pageHeader { background: url(images/header-bg.jpg) 0 0 no-repeat; }
#bannerWrapper { margin: 7px 0 16px; line-height: 0; }
#bannerWrapper img { display: block; }
#navigation { border-top: 2px solid #51391E; border-bottom: 2px solid #51391E; background: url(images/bg.jpg); }
#navigation ul { list-style: none; margin: 0; padding: 0 0 0 22px; overflow: hidden; }
#navigation li { float: left; }
#navigation a {
  display: block; font: italic 17px/40px Georgia, 'Times New Roman', serif;
  color: #E2D9D6; text-decoration: none; margin-right: 30px;
}
#navigation a:hover { color: #804B2C; }

/* Content column (831px, offset like the original sidebar gap) */
#content {
  display: block; width: 831px; max-width: 100%; margin: 7px 0 0 auto; box-sizing: border-box;
  font: 16px/1.51em Georgia, 'Times New Roman', serif; color: #E8E8E8;
}
#content::after { content: ""; display: block; clear: both; }
#content p { margin: 1em 0; }
#content a { font-size: 21px; color: #EBEBD3; text-decoration: underline; }
#content p a, #content li p a { font-size: inherit; }
#content a:hover { color: #804B2C; text-decoration: none; }
h2 { font-weight: normal; text-align: center; text-decoration: underline; color: #D4D4D4; font-size: 1.5em; margin: 0 0 .8em; }
h3 { font: 20px 'Times New Roman', Palatino, serif; text-decoration: underline; color: #EBEBD3; margin: 0; padding-bottom: 5px; }
.header { margin-bottom: 2em; }

/* Inline images placed by the old editor */
.full-image-float-left { float: left; margin: 0 10px 8px 0; }
.full-image-float-right { float: right; margin: 0 0 8px 10px; }
.full-image-block { display: block; }
.full-image-float-left img, .full-image-float-right img, .full-image-block img, .full-image-inline img { display: block; }
.full-image-inline img { display: inline-block; }

/* Gallery lists: 200px square thumbnail left, title + text right */
.gallery-list { list-style: none; margin: 0; padding: 0; }
.gallery-list li { overflow: hidden; margin-bottom: 12px; }
.gallery-list .thumb { float: left; width: 220px; line-height: 0; }
.gallery-list .thumb img { width: 200px; height: 200px; object-fit: cover; display: block; }
.gallery-list .description { overflow: hidden; }
.gallery-list .description h3 a { font: 20px 'Times New Roman', Palatino, serif; }
#content .gallery-list .description p { margin: .2em 0 1em; }
.gallery-list .subtitle { margin-top: 5px; }

/* PayPal buttons */
#content form table { border-collapse: collapse; margin: .2em 0 .3em; }
#content form td { padding: 0; }
#content select { font: 8pt Arial, Tahoma, Verdana, Helvetica, sans-serif; max-width: 100%; }
#content input[type=image] { margin-top: 4px; }

/* Single photo pages */
.pagination { font-size: 22px; text-align: center; padding-bottom: 20px; line-height: 1.6; }
.pagination a.pg-prefix { font-size: 22px; margin-right: 6px; }
.pg-num { border-right: 1px solid #66655E; padding: 0 6px 3px; margin-left: 4px; }
#content a.pg-num { font-size: 22px; }
.pg-num.active { text-decoration: none; color: #BEBEBE; }
#main-picture-wrapper { text-align: center; line-height: 0; }
#main-picture-wrapper a { font-size: 0 !important; }
.picture-footer { margin-top: 1em; }
.picture-footer h3 { padding-bottom: 1em; }

/* Blog */
.journal-entry { margin-bottom: 2em; }
.journal-entry .title { margin: 0; }
#content .journal-entry .title a { color: #F5CA9F; font-size: inherit; }
.posted-on { font-size: 10px; text-transform: uppercase; color: #A6A6A6; padding: 0 0 15px; line-height: 1.4; }
.entry-nav { margin-bottom: 2em; }
#content .entry-nav a { font-size: 16px; }

/* Contact form (Squarespace classic form styling) */
.contact-form { padding: 0 0 1em; }
.contact-form label { display: block; font-weight: bold; font-size: 12px; padding: 5px 0; color: #E8E8E8; }
.contact-form .req { color: #990000; }
.contact-form input, .contact-form textarea {
  display: block; margin-top: 3px; font: 8pt Arial, Tahoma, Verdana, Helvetica, sans-serif;
  border: 1px solid #CCCCCC; padding: 2px; box-sizing: border-box; background: #fff; color: #000;
}
.contact-form input.medium { width: 180px; max-width: 100%; }
.contact-form textarea { width: 94%; height: 200px; }
.contact-form button { margin-top: 2em; width: 110px; font: 12px Arial, sans-serif; padding: 2px 5px 3px; }
.contact-form .hp { position: absolute; left: -5000px; }
.form-status { font-size: 14px; }
.form-status.ok { color: #9fd49f; }
.form-status.err { color: #e07a7a; }

/* Footer */
#pageFooter { clear: both; border-top: 2px solid #51391E; padding: 15px 0 100px; font-size: 11px; text-align: center; color: #B3B3B3; }

/* Phones: same look, narrower */
@media (max-width: 880px) {
  #canvas { padding: 0 12px; }
  #pageHeader { background-size: cover; }
  #navigation ul { padding-left: 8px; }
  #navigation a { margin-right: 18px; line-height: 34px; font-size: 16px; }
  #content { width: 100%; }
}
@media (max-width: 560px) {
  .gallery-list .thumb { float: none; width: auto; margin-bottom: 8px; }
  .full-image-float-left, .full-image-float-right { float: none; margin: 0 0 10px; }
  .pagination, #content a.pg-num, .pagination a.pg-prefix { font-size: 18px; }
}