html {
  height: 100vh;
  margin: 0;
  padding: 0;
}
body {
  box-sizing: border-box;
  background: #3F3534 url('images/texture.png') repeat;
  font: 21px Charter, Georgia, Cambria, "Times New Roman", Times, serif;
  line-height: 1.58;
  color: #333333;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  border-bottom: 4px solid #9CAB30;
}
#admin-bar-wrapper {
  overflow: visible; /* Not sure why this is necessary. */
}
#page-wrapper {
  box-sizing: border-box;
  min-height: calc(100vh - 4px); /* Minus 4px body border. */
  padding-top: 20px;
  padding-bottom: 48px;
}
@media (min-width: 48em) {
  #page-wrapper {
    background: url('images/back-gear-grey.gif') no-repeat fixed 31px 210px;
    background-position: right 200px bottom 20px;
  }
}
#page {
  padding: 0;
  max-width: 920px;
  min-height: 800px;
  position: relative;
}
@media all and (min-width: 960px) {
  #page {
    margin: 0 auto;
  }
}
.l-header {
  position: relative;
  z-index: 2;

  padding: 0;
  background: #3F3534 url('images/texture.png') repeat;

  font-family: Helvetica, sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 1;
}
@media (min-width: 48em) {
  .l-header {
    background-color: #403736;
    background-image: -webkit-linear-gradient(#3E3534, #191514);
    background-image: -o-linear-gradient(#3E3534, #191514);
    background-image: linear-gradient(#3E3534, #191514);
  }
}
.l-header-inner {
  max-width: none;
}
.l-header .block {
  display: block;
  white-space: nowrap;
  box-sizing: border-box;
}
@media (min-width: 48em) {
  .l-header .block {
    display: inline-block;
    width: 50%;
    vertical-align: top;
  }
}
.l-header .block-system-header {
  position: relative;
  z-index: 10;
  max-width: 200px
}
@media (min-width: 48em) {
  .l-header .block-system-header {
    max-width: none;

  }
}

/* Mobile-only menu styling related to the toggle button. */
@media (max-width: 47.9375em) {
  .l-header .menu-toggle-button {
    color: white;
    overflow: visible;
    line-height: 2;
  }
  .l-header .menu-toggle-button-icon {
    top: 12px;
  }
  .l-header .menu-toggle-state ~ .menu {
    display: block;
    overflow: hidden;
    -webkit-transition: height 500ms;
    -moz-transition: height 500ms;
    -o-transition: height 500ms;
    transition: height 500ms;
  }
  .l-header .menu-toggle-state:not(:checked) ~ .menu {
    display: block;
    height: 0;
  }
  .l-header .menu-toggle-state:not(:checked) ~ .menu a {
    display: none;
  }
  .l-header .menu-toggle-state:checked ~ .menu {
    display: block;
    height: 120px; /* Dependent on number of menu items. Increase if needed. */
  }
  .l-header .menu-toggle-state:checked ~ .menu a {
    display: inherit;
  }

  .l-header .block-menu {
    margin-top: -34px;
    text-align: right;
    position: relative;
    z-index: 3;
  }
}
/* Small mobile screens push navigation to new line. */
@media (max-width: 30em) {
  .l-header .block-menu {
    margin-top: 0;
    text-align: center;
  }
}

@media (min-width: 48em) {
  .l-header .block-menu {
    margin-top: 0;
    padding: 0 5px; /* Align the right-most border with the content box. */
  }
  .l-header .block-menu ul {
    text-align: right;
  }
}
.l-header .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block;
}
.l-header .menu li {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 0 0 auto;
  list-style-type: none;
  text-align: center;
  z-index: 1;
}
@media (min-width: 48em) {
  .l-header .menu li {
    display: inline-block;
    width: auto;
    text-align: right;
    margin: 0;
  }
}
.l-header .menu a,
.l-header .menu a:link,
.l-header .menu a:visited,
.l-header .site-name a {
  box-sizing: border-box;
  display: block;
  width: 100%;
  color: white;
  padding: 10px 14px;
  text-decoration: none;

  -webkit-text-shadow: 0 1px 1px rgba(0,0,0,0.25);
  -moz-text-shadow: 0 1px 1px rgba(0,0,0,0.25);
  text-shadow: 0 1px 1px rgba(0,0,0,0.25);
  -webkit-transition: all 500ms;
  -moz-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
}
@media (min-width: 48em) {
  .l-header .menu li:first-child:before {
    content: '';
    position: absolute;
    top: -1px;
    left: -2px;
    border-left: #1B1615 solid 1px;
    height: 100%;
    z-index: 1;
  }
  .l-header .menu li {
    display: inline-block;
    width: auto;
    border-left: #4C3F3E solid 1px;
    border-right: #1B1615 solid 1px;
    position: relative;
  }
  .l-header .menu li:last-child a {
    border-right: none;
  }
  .l-header .menu li:hover {
    border-left: #3D3030 solid 1px;
  }
  .l-header .menu li.active,
  .l-header .menu li.active:hover {
    border-left: #1B1615 solid 1px;
  }
  .l-header .menu a:hover {
    background: #3D3030;
  }
}

.l-header .menu a.active {
  background: #1B1615;
}

.l-header a.logo {
  float: left;
  padding: 0 10px;
}
.l-header .logo img {
  height: 50px;
  width: auto;
  float: left;
  margin-top: -6px;
  margin-bottom: -12px;
}
.l-header .name-and-slogan {
  font-size: 18px;
}
.l-header .site-name {
  color: white;
  display: inline;
  text-shadow: none;
  font-weight: normal;
  font-size: 100%;
}

.l-header .site-name strong {
  font-weight: normal;
}
.l-header .site-name a {
  margin: 0;
  font-size: 100%;
}

.messages {
  text-align: left;
  margin-bottom: 1em;
  font-size: 80%;
}
#page {
  background: #9cab30 url(images/dot-fade.png) repeat-x top left;
}

@media (min-width: 48em) {
  #page {
    border: 1px solid black;
  }
  #page:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('images/back-gear-green.gif') no-repeat fixed 31px 210px;
    background-position: right 200px bottom 20px;
    z-index: 0;
  }
}
.l-wrapper {
  margin: 20px;
  padding: 20px;
  background: #fff url(images/dot-fade-white.png) repeat-x left bottom;
  box-shadow: 0 3px 9px -3px #000;
  position: relative;
  z-index: 2;
}
body.front .l-content,
body.page-taxonomy-term .l-content {
  padding: 0;
  margin: 0 20px 20px 20px;
  background: none;
  box-shadow: none;
}
body.front .l-wrapper,
body.page-taxonomy-term .l-content {
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}
body.page-taxonomy-term .l-content {
  padding-top: 20px;
}

.page-title {
  margin: 0 0 20px;
}
.l-sidebar {
  position: relative;
  text-align: left;
}
.l-footer {
  padding: 10px 0;
  clear: both;
  text-align: center;
}

/* Common styles */
.links {
  font-size: 90%;
}

a, a:link, a:visited {
  color: #2763A5;
  text-decoration: none;

  -webkit-transition: color 500ms;
  -moz-transition: color 500ms;
  -o-transition: color 500ms;
  transition: color 500ms;
}

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

a:active, a.active { 
  color: #89A3E4; 
}

.l-footer a {
  color: white;
}

.breadcrumb {
  color: white;
}
.breadcrumb a, .breadcrumb a:link, .breadcrumb a:visited  {
  color: #D3D293;
}
.breadcrumb a:hover, .breadcrumb a:focus {
  color: #6191C5;
  text-decoration: underline;
}

.page-title, .page-title a, .page-title a:hover {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 300%;
  font-weight: normal;
  margin: 0 0 20px;
  line-height: 1;
  text-align: center;
}

h1, h1 a, h1 a:hover {
  font-size: 140%;
  font-family: Helvetica, Arial, sans-serif;
  margin: .5em 0 .5em 0;
}

h2 {
  font-size: 180%;
  color: #111;
  font-weight: normal;
  font-family: Helvetica, sans-serif;
  margin: 12px 0;
  line-height: 1;
}
h2 a,
h2 a:link,
h2 a:visited {
  color: #333;
}

h2 a:hover {
  color: #000;
  text-decoration: none;
}

h3 { 
  font-size: 120%;
  color: #444;
  font-weight: normal;
  font-family: Helvetica, Arial, sans-serif;
  margin: 8px 0;
}

h4, h5, h6 {
  font-weight: bold;
  font-family: Helvetica, Arial, sans-serif;
}

pre {
  background: #ddd;
  border: 1px solid #aaa;
  padding: 0.75em 1.5em;
}

blockquote {
  border: 1px #ccc solid;
  border-width: 1px 0px;
  margin: 0.5em 1em;
  padding: 0.3em;
  font-style: italic;
}

code {
  font-size: 100%;
  font-family: Profont, 'lucida console', 'Courier New', Monaco, monospace;
}

img { 
  border: 0; 
}

ol, ul, dl { 
  position: relative;
  margin: 0;
}

abbr.created {
  border-bottom: none;
  text-decoration: none;
}

/* Styles available in the WYSIWYG */
.more {
  font-size: 90%;
  font-style: italic;
  text-align: right;
}
.description {
  color: #333;
  font-size: 90%;
}
.indent {
  margin-left: 20px;
}
.column-two {
  width: 40%;
  float: left;
  margin-left: 20px;
}
.column-three {
  width: 25%;
  float: left;
  margin-left: 20px;
}
.float-right {
  float: right;
  margin: 0 0 10px 10px;
}
.float-left {
  float: left;
  margin: 0 10px 10px 0;
}
.center {
  text-align: center;
}

/* Nodes */
.node {
  position: relative;
}
.node-content,
.comment {
  letter-spacing: -.003em;
}
.node-content p,
.comment {
  margin-top: 38px;
}
.node img,
.comment img {
  max-width: 100%;
  height: auto;
}
.node ul.links,
.comment ul.links {
  text-align: right;
  display: block;
}
.node .field-name-field-tags {
  padding-left: 20px;
  background: url(images/icon-tags.png) no-repeat left;
  line-height: 1.2;
  font-size: 16px;
}
.node .submitted,
.comment .submitted {
  color: #333;
  font-style: italic;
  font-size: 16px;
  margin: 0;
}
.node .field-name-field-tags div {
  display: inline;
  padding: 0 1em 0 0;
}
.node .field-name-body {
  margin: 20px 0;
}
.node-image-border .field-name-field-image img {
  box-shadow: 0 3px 9px -3px #000;
}
.node.view-mode-teaser {
  margin-bottom: 20px;
}
.node.view-mode-teaser {
  font-size: 90%;
}
.node.view-mode-teaser p {
  margin-top: 24px;
}
.node.view-mode-teaser .submitted {
  margin: 0;
}
.view-display-id-archive .view-content > div:not(:first-child) .node:before {
  content: '';
  display: block;
  padding: 1em 0 0 0;
  margin: 0 1em 2em;
  border-bottom: 2px dotted #ccc;
}
.node-full .node-feature-image {
  text-align: center;
}

.node-full .field-label-inline .field-items .field-item {
  display: inline;
  padding: 0 5px;
}

/* Front page nodes */
.front .view-promoted  .node {
  padding-bottom: 30px;
  background: #FFF url(images/dot-fade-white.png) repeat-x left bottom;
  padding: 20px 20px 40px;
  margin: 20px 0;
  box-shadow: 0 3px 9px -3px #000;
}
.view-promoted .more-link {
  font-family: Helvetica, sans-serif;
  text-align: right;
}
.view-promoted .more-link a {
  display: inline-block;
  padding: 0 12px;
  background: white;
  text-decoration: none;
  border-radius: 2px;
  box-shadow: 0 3px 9px -3px #000; /* Match that of the article wrappers. */
  line-height: 2;

  -webkit-transition: background 500ms;
  -moz-transition: background 500ms;
  -o-transition: background 500ms;
  transition: background 500ms;
}
.view-promoted .more-link a:after {
  content: ' >';
  font-family: Arial;
}

/* Comments */
#comments {
  clear: both;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 12px dotted #939F42;
}
#comments h2.comment-form {
  font-size: 140%;
}
.comment h3 {
  margin: 0;
  font-weight: 600;
}
.comment h3 a {
  color: #333;
}
.comment {
  margin: 1em 0;
}
/* Top level comments. */
.comments > .comment:not(:nth-of-type(1)):before {
  content: '';
  display: block;
  padding: 1em 0 0 0;
  margin: 0 1em 1em;
  border-bottom: 2px dotted #ccc;
}
/* Comment replies. */
.indented .comment {
  border-left: 4px solid #afafaf;
  padding-left: 10px;
}

/* Comment preview */
.form-actions #edit-preview {
  margin-left: 12px;
}

/* Comment form */
/* Target the form elements but not the comment preview. */
#comment-form {
  white-space: nowrap;
}
#comment-form .form-item,
#comment-form .form-actions {
  font: 16px Helvetica, sans-serif;
}
#comment-form input[type="text"],
#comment-form input[type="email"],
#comment-form input[type="url"] {
  width: 100%;
}

@media (min-width: 48em) {
  #comment-form .form-item-name,
  #comment-form .form-item-mail {
    display: inline-block;
    width: 50%;
    vertical-align: top;
    margin-bottom: 0;
    box-sizing: border-box;
  }
  #comment-form .form-item-name {
    padding-right: 10px;
  }
  #comment-form .form-item-mail {
    padding-left: 10px;
    margin-left: -4px;
  }
}
#comment-form .form-item-subject {
  margin-bottom: 1.2em;
}
#comment-form .form-item-subject input {
  width: 100%;
}
#comment-form textarea {
  font-family: 'Andale Mono', monospace;
  line-height: 1.5;
  height: 20em;
}
#comment-form .filter-wrapper {
  font: 16px Helvetica, sans-serif;
  line-height: 1;
  margin: .5em 0;
}

/* Forms */
textarea,
select,
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
  border: 1px solid #848484;
  padding: .4em .2em;
  font-size: 1em;
}

.l-content .form-actions {
  text-align: right;
}
.l-content .form-actions .form-submit,
.l-content .form-actions a {
  font-size: 100%;
  padding: 6px 18px;
  vertical-align: middle;
}
.l-content .form-required {
  color: #9FA839;
  font-weight: normal;
}
.l-content .filter-guidelines {
  padding: 0;
}
.l-content .filter-guidelines .tips {
  padding: 0;
  color: #666;
  font-size: 80%;
  line-height: 1.5;
  list-style-type: none;
}
.l-content .filter-wrapper {
  padding: 0;
  border: none;
}

/* Tabs */
ul.tabs {
  font: 16px Helvetica, sans-serif;
}
ul.tabs li {
  display: inline-block;
}
ul.tabs li a {
  padding: 3px 12px;
  display: inline-block;
  margin-bottom: -1px;
}

/* Pagers */
.item-list .pager li {
  padding: 0;
  display: inline-block;
  margin: 16px 6px;
  white-space: nowrap;
  font: 16px Helvetica, sans-serif;
  line-height: 2;
}
.item-list .pager li a,
.item-list .pager li.pager-current {
  display: inline-block;
  padding: 0 12px;
  background: white;
  text-decoration: none;
  color: black;
  border-radius: 2px;
  box-shadow: 0 1px 3px -1px #000;

  -webkit-transition: background 500ms;
  -moz-transition: background 500ms;
  -o-transition: background 500ms;
  transition: background 500ms;
}
.item-list .pager li.pager-current {
  background-color: #373633;

  background-image: -webkit-linear-gradient(#3E3534, #191514);
  background-image: -o-linear-gradient(#3E3534, #191514);
  background-image: linear-gradient(#3E3534, #191514);
  background-repeat: repeat-x;
  color: white;
}
.item-list .pager a:hover {
  background-color: #9cab30;
  color: #fff;
}

/* Inline videos */
.video-wrapper,
.oembed-provider-youtube {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%
}
.oembed-provider-youtube iframe,
.video-wrapper iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}
iframe[src*="youtube"] {
  width: 100%;
}

/* Sidebar blocks */
.l-sidebar {
  padding: 20px;
}
.l-sidebar .block {
  margin: 0 0 15px;
  padding: 12px;
  background: white;
  box-shadow: 0 3px 9px -3px #000;
}
.l-sidebar .block .content {
  font-size: .9em;
}
.l-sidebar h2 {
  margin: 0 0 8px;
  position: relative;
  text-align: left;
  font-family: Helvetica, sans-serif;
  font-size: 140%;
  font-weight: normal;
}
#donate {
  max-width: 300px;
  margin: 0 auto;
}
#block-block-1 label {
  display: inline;
}
#block-block-1 #edit-os0,
#block-block-1 #edit-os1 {
  width: 100%;
}
#block-block-1 .form-item {
  margin: 5px 0;
}
#block-block-1 .donate-amount-wrapper .donate-amount {
  width: 70%;
  display: inline-block;
}
#block-block-1 .donate-amount-wrapper .donate-currency {
  width: 30%;
  display: inline-block;
}
#block-block-1 .donate-amount-wrapper input {
  width: 97%;
}
#block-block-1 .donate-amount-wrapper select {
  width: 100%;
}
#block-block-1 .donate-button {
  margin-top: 10px;
  text-align: center;
}

/* Portfolio */
.views-gallery-summary {
  padding-bottom: 30px;
  border-radius: 10px;
  border-radius: 10px;
  margin: 40px 0;
  position: relative;
  min-height: 80px;
  text-align: left;
}
.views-gallery-summary a {
  font-size: 250%;
  color: #333;
}
.views-gallery-summary .category-preview a {
  font-size: 140%;
  position: relative;
  top: 0;
  color: #333;
}
.views-gallery-summary a:hover {
  color: #000;
  text-decoration: none;
}
.views-gallery-summary .category-preview a.portfolio-gallery-thumb {
  float: left;
  border: 1px solid #000;
  margin-right: 20px;
  line-height: 0;
}
.view-portfolio {
  text-align: center;
}
.view-portfolio table {
  width: 90%;
  margin: 0 auto;
}
.view-portfolio td {
  width: 33.3%;
  text-align: center;
  vertical-align: top;
  padding-bottom: 10px;
}
.view-portfolio table a {
  font-size: 140%;
  color: #333;
}
.view-portfolio table a.portfolio-gallery-thumb {
  background: white;
  border: 1px solid black;
  line-height: 0;
  display: inline-block;
  zoom: 1;
}