@import url(CMApp.css);
@import url(base.css);
BODY {
  padding: 0;
  margin: 0;
  background: #000;
  /*
  background: #171d23 url("/img/tpl/bg.gif") top left repeat-x;
  */
}

BODY, TD, TH {
  color: #bbb; }

INPUT, SELECT {
  color: #666; }

A {
  outline: none; }

A, A:visited {
  color: #7AA3CC; }

A:hover {
  color: #9cf; }

A:active {
  color: #8BA84F; }

H1 {
  color: #ddd; }

IMG {
  border-color: #404040; }

HR {
  border: none;
  border-top: 1px solid #404040; }

#header {
  /* width: 1140px; */
  margin: 30px auto;
  padding: 0 40px;
  text-align: left;
}

#body {
  margin: 0 auto; }

#footer {
  width: 1140px;
  height: 20px;
  margin: 0 auto 20px auto;
  padding: 3px 10px;
  font-size: 0.75em;
  text-align: left; }

#content {
  margin: 0 40px;
  clear: both;
  padding: 30px 40px;
  background-color: #181F26;
  border: 1px solid #272e36;
  /* line-height: 1.25em;*/
}

#inner {
  /* max-width: 1140px; */
  margin: 0 auto; }

#content.index {
  margin-top: 10px;
  background-color: #efefef;
  color: #333; }

#content.index PRE {
  font-family: 'Lucida Console', Monaco, Courier, monospace;
  font-size: 0.75em; }

#content.index A {
  color: #36c; }


.social-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  font-family: "Gudea", sans-serif;
  font-size: 18px;
  margin: 10px 0px 0px 0px;
}

.social-nav {
  margin: 4px;
  list-style-type: none;
}

.social-nav ul {
	margin: 0px;
}

.social-nav li {
	display: inline-block;
	margin: 0px 4px;
}


#nav {
  /*background-color: #000;*/
  max-width: 1140px;
  min-width: 860px;
  margin: 25px auto 3px;
  padding: 0 40px; }

#nav UL {
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 101;
  border-collapse: collapse;
  height: 20px; }

#nav LI {
  float: left;
  height: 20px;
  padding: 0 12px 0 0;
  margin: 0;
  vertical-align: middle;
  border: none; }

#nav LI:hover, #nav LI.ieHover {
  background-color: #324454; }

#nav LI UL {
  list-style: none;
  clear: both;
  position: absolute;
  width: 170px;
  top: 124px;
  visibility: hidden;
  margin: 0;
  padding: 0; }

#nav LI:hover UL, #nav LI.ieHover UL {
  visibility: visible; }

#nav LI.on:hover UL, #nav LI.ieHover.on UL {
  visibility: hidden; }

#nav LI A {
  padding: 5px 20px 5px 10px; }

#nav LI UL LI {
  width: 170px;
  padding: 0 0 0 12px;
  margin: 0;
  text-transform: none;
  text-align: left;
  background-color: #324454;
  border-top: 1px solid #434C54;
  border-left: 1px solid #3D5366;
  border-right: 0;
  border-bottom: 0; }

#nav LI UL LI:hover, #nav LI UL LI.ieHover {
  background-color: #4D6699;
  border: none;
  border-top: 1px solid #5C7C99;
  border-left: 1px solid #334E66; }

#nav LI UL LI A, #nav LI:hover UL LI A, #nav LI.ieHover UL LI A {
  display: block;
  height: 16px;
  width: 160px;
  padding: 3px 5px 3px 5px;
  font-family: "Adobe Garamond",Garamond,"Times New Roman",Times,serif;
  font-weight: normal;
  font-size: 14px;
  text-align: left;
  text-transform: none;
  text-decoration: none;
  color: #ccc; }

/* #subnav moved to admin.css -- pub.tpl is the only template that emits it,
   and only inside its area == 'admin' branch. */

#wiki {
  width: 99%;
  height: 550px;
  overflow: auto;
  margin-bottom: 10px;
  border: 1px solid #666; }

UL.announce LI {
  margin-bottom: 20px; }

UL.dl LI {
  margin-top: 20px;
  font-size: 11pt; }

UL.dl.slim LI {
  margin-top: 5px; }

UL.dl LI.col {
  width: 50%;
  float: left;
  list-style-type: none; }

UL.dl LI SPAN {
  font-size: 10pt;
  margin-left: 5px; }

UL.dl UL LI {
  margin-top: 3px; }

TABLE.roster TD {
  vertical-align: top;
  padding: 5px;
  line-height: 1.25em; }

EM.chair {
  display: block;
  margin-left: .55em;
  color: #fff;
  font-family: helvetica,arial,sans-serif;
  font-size: 12px;
  letter-spacing: 0;
  font-style: normal; }

EM.chair.botmargin {
  margin-bottom: 8px; }

body:after {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }
  @media only screen and (max-width: 640px) {
    body:after {
      content: 'mobile'; } }
  @media only screen and (min-width: 641px) {
    body:after {
      content: 'tablet'; } }
  @media only screen and (min-width: 960px) {
    body:after {
      content: 'screen'; } }
  @media only screen and (min-width: 1200px) {
    body:after {
      content: 'large'; } }
  @media only screen and (min-width: 1800px) {
    body:after {
      content: 'largest'; } }

.card .hero .heroimg span, .box.tile a span {
  font: 20px "Gudea", sans-serif;
  color: #fff; 
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); }

.card {
  margin: 4px 0px 0px 0px;
  overflow: hidden; }
  .card .hero {
    position: relative; }
    .card .hero .herotxt, .card .hero .heroimg {
      width: 100%;
      position: relative;
      height: 0;
      background-color: #000; }
    .card .hero .herotxt {
	  float: right;
      height: 240px;
      background-image: linear-gradient(#C9A96E, #000000);
      color: #fff;
      font: 20px "Gudea", sans-serif; }
      .card .hero .herotxt p {
        padding: 0;
        margin: 0.5em 0; }
        .card .hero .herotxt p.subtitle {
          color: #ddd;
          font-size: 0.92em;
          letter-spacing: 0.1em;
          text-transform: uppercase;
          margin: -20px 0 0 0; }
      .card .hero .herotxt .composer {
        text-transform: uppercase;
        font-size: 0.75em; }
        .card .hero .herotxt .composer:after {
          content: ':';
          margin: 0.125em; }
      .card .hero .herotxt .secondary {
        text-transform: uppercase;
        font-size: 0.8em; }
      .card .hero .herotxt .concert-2022 {
        font-size: 0.8em; }
      .card .hero .herotxt .mega {
        font-size: 1.0em; }
      .card .hero .herotxt .artist {
        font-size: 1rem; }
      @media only screen and (min-width: 960px) {
        .card .hero .herotxt {
          width: 50%;
          height: 0;
          padding-bottom: 30%; }
          .card .hero .herotxt p {
            margin: 0.8em 0; }
          .card .hero .herotxt .composer {
            display: block; }
            .card .hero .herotxt .composer:after {
              display: none; } }
      .card .hero .herotxt div {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 24px; }
        .card .hero .herotxt div a.date {
          display: block;
          letter-spacing: 2px;
          color: #fff;
          font-size: 18px;
		  font-weight: bold;
          text-transform: uppercase; }
    .card .hero .heroimg {
      float: left;
      background-size: cover;
      width: 25%;
      padding-bottom: 30%; }
      @media only screen and (min-width: 960px) {
        .card .hero .heroimg {
          width: 25%;
          padding-bottom: 30%; } }
      .card .hero .heroimg span {
        position: absolute;
        bottom: 10px;
        right: 10px; }
    .card .hero button {
      padding: 5px 20px;
      text-align: center;
      font: 16px "Gudea", sans-serif;
      text-transform: uppercase;
      background: #ecd82c;
      color: #000;
      border: 1px solid #ccc;
      cursor: pointer;
      letter-spacing: 1px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
      position: absolute;
      right: 24px;
      bottom: 24px; }
      @media only screen and (min-width: 960px) {
        .card .hero button {
          float: none;
          position: absolute;
          left: 24px;
          left: auto; } }

.box {
  position: relative;
  box-sizing: border-box;
  float: left;
  width: 100%;
  margin-bottom: 40px; }
  @media only screen and (min-width: 960px) {
    .box {
      width: 48%; }
      .box:first-child {
        margin-right: 4%; } }
  .box.tile {
    background-position: 0 0;
    background-repeat: none;
    background-size: cover; }
    .box.tile:before {
      content: "";
      display: block;
      padding-top: 50%; }
    .box.tile:after {
      content: "";
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 50%;
      pointer-events: none;
      background-image: linear-gradient(transparent, #000);
      z-index: 0; }
    .box.tile a {
      position: absolute;
      display: block;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      outline: none;
      z-index: 2; }
      .box.tile a span {
        font-size: 20px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 20px; }
  .box h2 {
    margin-bottom: 12px; }
  .box p {
    padding: 0 5px; }

h1.latest {
  font-weight: normal;
  font-variant: small-caps;
  font-size: 26px;
  letter-spacing: 0.1em;
  color: #f6f6f6; }

span.date {
  font-weight: bold;
  color: #85ab36; }


/*# sourceMappingURL=notturna.css.map */