/* kylesmith-music */

html, body {
  margin: 0;
  padding: 0;
}
body {
  color: #444;
  font: 100%/1.5 verdana, sans-serif;
  background-color: #d5edff;
}

a {
  color: #059;
}
  a:visited {
    color: #707;
  }
  a:focus, a:hover {
    color: #153;
    text-decoration: none;
  }

.skip {
  position: absolute;
  left: -999em;
  top: -99em;
  padding: 5px;
  border: 1px solid #000;
  background-color: #fff;
}
  .skip:focus {
    left: 1em;
    top: 1em;
  }
  .skip:visited {
    color: #059;
  }

nav, main {
  display: block;
  padding: .5em .4em 1em;
}

nav {
  text-align: center;
}
nav ul,
nav li {
  margin: 0;
  padding: 0;
  display: inline;
  list-style: none;
}
nav a {
  display: inline-block;
  vertical-align: top;
  width: 65%;
  color: #222;
  margin-bottom: 1em;
  padding: .5em;
  text-decoration: none;
  border: 1px solid #059;
  border-radius: 3px;
}
  nav a:visited {
    color: #222;
  }
  nav a:hover, nav a:focus {
    background-color: #fff;
  }

a[aria-current] {
  background-color: #f5f5f5;
  outline: 2px solid #000;
  outline-offset: 3px;
}
  a[aria-current]:focus {
    outline-offset: 0;
    outline: unset;
  }

main * + * {
  margin-top: 1em;
}

@media screen and (min-width: 30em) {
  nav, main {
    width: 80%;
    max-width: 40em;
    margin: 0 auto;
    padding: 1em 0 2em;
  }
  nav {
    padding-bottom: 0;
  }
  nav a {
    width: auto;
    margin-bottom: .5em;
  }
  nav li+li a {
    margin-left: 1em; 
  }
}


h1, h2 {
  margin: 0;
  font-family: georgia, serif;
}
h2 {
  border-bottom: 1px solid black;
}

fieldset {
  border: 0;
  border-top: 1px solid #059;
}
legend {
  margin: 0 auto;
  padding: 0 1em;
  text-align: center;
  background-color: #fff;
  border: 1px solid #059;
}
fieldset>div+div {
  margin-top: 1.2em;
}

label {
  display: block;
  margin-bottom: .3em;
}
  label span {
    font-size: .9em;
    color: #666;
  }
input, select, textarea {
  display: inline-block;
  box-sizing: border-box;
  min-width: 60%;
  margin: 0;
  padding: .5em;
  font: 100%/1.5 verdana, sans-serif;
  border: 1px solid #787878;
  border-radius: 3px;
}
select, input[type=submit] {
  display: block;
  min-width: 0;
}
select, input[type=submit] {
  background: #fff linear-gradient(to bottom, #fff 0%,#e5e5e5 100%) 0 0  repeat ;
}
  select:hover, select:focus,
  input[type=submit]:hover,
  input[type=submit]:focus {
    background-color: #fff;
    background-image: none;
  }
  input:focus, select:focus, textarea:focus {
    border-color: #121212;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    outline: 1px dotted #059;
    outline-offset: 2px;
  }

.select-css {
  position: relative;
  display: inline-block;
  margin-top: 0;
}
    .select-css svg {
      position: absolute;
      right: .5em;
      top: 40%;
      width: .5em;
      height: .5em;
    }
    .select-css select {
      padding: .6em 2.8em .6em .8em;
      color: #444;
      box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
      -moz-appearance: none;
      -webkit-appearance: none;
      appearance: none;
    }
    .select-css select::-ms-expand {
      display: none;
    }
    .select-css option {
      font-weight:normal;
    }

textarea {
  max-width: 90%;
}

.mouseDetected *:focus {
  outline: 2px dotted transparent;
}