@import "styles/reset.css";
/* -- General Styles -- */
#wrap {
  width: 850px;
  margin: 0 auto;
  background: linear-gradient(180deg, gainsboro 0%, white 10%, white 100%);
  background-color: #fff; }

body {
  font-family: arial, sans-serif;
  background-color: #2b1e27;
  color: #555; }

img {
  max-width: 100%; }

h1 {
  font-size: 38px;
  margin: 0 0 30px 0; }

h2 {
  font-size: 28px;
  margin: 30px 0; }

h3 {
  font-size: 26px;
  margin: 40px 0 15px 0; }

h4 {
  font-size: 20px;
  margin: 30px 0 15px 0; }

h5 {
  font-size: 18px;
  margin: 30px 0 5px 0; }

hr {
  margin-bottom: 15px; }

p {
  font-size: 14px;
  line-height: 22px;
  margin: 0 0 15px 0; }

a {
  text-decoration: none;
  color: #00aeef; }

a:hover {
  color: #333; }

.line {
  clear: both;
  border-bottom: 1px #ddd solid; }

.project-line {
  clear: both;
  border-bottom: 1px #ddd dotted;
  padding-top: 40px;
  margin-bottom: 55px; }

.hide {
  display: none; }

/* -- Header -- */
#header {
  float: left;
  margin: 30px 0 0 0;
  width: 100%; }
  #header h1 {
    width: 297px;
    height: 58px;
    text-indent: -9999px;
    margin: 0 auto; }

/* -- Nav -- */
#nav {
  float: left;
  width: 100%;
  margin: 30px 0 0 0;
  background-color: #eeeeee;
  border-top: 1px #ddd solid;
  border-bottom: 1px #ddd solid;
  height: 62px; }
  #nav li + li:before {
    content: "~";
    padding: 0 15px; }
  #nav ul {
    display: grid;
    margin: 0 30px;
    height: 21px;
    padding: 23px 0; }
    #nav ul li a {
      margin: 0;
      color: #777;
      text-decoration: none;
      text-transform: uppercase; }
      #nav ul li a:hover {
        color: #00aeef; }
    #nav ul li:hover > ul {
      display: block; }
    #nav ul ul {
      background-color: #eee;
      display: none;
      margin: 0;
      padding: 0;
      width: 260px;
      height: auto;
      position: absolute;
      border: solid 1px #ddd;
      left: 0px;
      top: 20px; }
      #nav ul ul a {
        font-size: 16px;
        padding: 0 10px; }
      #nav ul ul li {
        float: none;
        right: 0;
        padding: 10px; }
        #nav ul ul li:hover {
          background-color: #00aeef !important;
          color: #fff !important;
          cursor: pointer; }
          #nav ul ul li:hover a {
            color: #fff; }
  #nav li {
    grid-row: 1;
    font-size: 18px; }
    #nav li a.current {
      color: #00aeef; }

/* -- Content -- */
#main {
  float: left;
  padding: 0 50px;
  margin-bottom: 50px; }
  #main.Auditions form {
    display: grid; }
    #main.Auditions form label {
      white-space: pre-line; }
      #main.Auditions form label[required] span:first-of-type:after {
        content: " *";
        color: red; }
    #main.Auditions form textarea {
      resize: vertical; }
    #main.Auditions form input[type="submit"] {
      margin-top: 15px; }
    #main.Auditions form .sub {
      font-size: .75em; }
  #main.Contact input, #main.Contact textarea {
    margin-top: 5px;
    margin-bottom: 10px; }
  #main.CD img {
    width: 527px;
    margin-right: 38px; }
  #main.CD ul {
    margin-bottom: 1em; }
  #main.Directors img {
    width: 183px; }
  #main.History img {
    height: 199px; }
  #main.Schedule .fc-list-item.category-concert .fc-event-dot {
    background-color: #3788d8; }
  #main.Schedule .fc-list-item.category-parade .fc-event-dot {
    background-color: red; }
  #main.Schedule .fc-list-item.category-event .fc-event-dot {
    background-color: green; }
  #main.Schedule .fc-list-item-location {
    font-size: 75%;
    margin-bottom: 1em; }
  #main.Schedule .fc-list-item-description p {
    font-size: inherit;
    line-height: inherit;
    margin: inherit; }
  #main.Schedule .fc-list-item-title {
    font-weight: bold; }
  #main.Schedule .other-event span.fc-event-dot {
    background-color: red; }
  #main.Schedule a {
    color: #555; }
    #main.Schedule a:hover {
      color: #555; }
  #main.EventDetails span.label {
    font-weight: bold; }
  #main.EventDetails div {
    margin: 5px 0; }
    #main.EventDetails div.description {
      margin-top: 15px; }
  #main.EventDetails .mapouter, #main.EventDetails .gmap_canvas {
    height: 500px;
    width: 750px; }
  #main.EventDetails .mapouter {
    position: relative;
    text-align: right; }
  #main.EventDetails .gmap_canvas {
    overflow: hidden;
    background: none !important; }
    #main.EventDetails .gmap_canvas iframe {
      height: 100%;
      width: 100%; }
  #main.EventDetails h2 a {
    font-size: 55%;
    margin-left: 20px; }

img.left {
  float: left;
  margin-right: 15px; }

img.right {
  float: right;
  margin-left: 15px; }

/* -- Footer -- */
#footer {
  clear: both;
  background-color: #eeeeee;
  height: 29px;
  text-align: center;
  margin: 30px 0 0 0;
  border-top: 1px #ddd solid; }
  #footer p {
    font-size: 12px;
    color: #888;
    padding: 4px 0 0 0;
    margin-bottom: 0; }