html {
  height: 100%;
  width: 100%;
  color: white;
  background-color: #000;
}

body {
  width: 100%;
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  height: 40px;
  margin: 0 0 10px 0;
  padding: 0;
  background: #0cf;
  color: white;
}

header h1 {
  margin: 0;
  padding: 5px;
  font-size: 20px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  text-align: center;
}

h2 {
    max-width: 90vw;
}

br {
  clear: both;
}

.center {
  margin: 0 auto;
  width: 500px;
  width: fit-content;
}

nav {
  width: 980px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

nav ul {
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

nav ul li {
  display: inline!important;
  margin-right: 16px;
}

a {
    color: #0cf;
    text-decoration: none;
}

a:link {

}

a:visited {
  color: #f6f;
}

a:hover {
    font-weight: bold;
    text-shadow:0px 0px 10px #f90;
}

a:visited:hover {
    font-weight: bold;
    text-shadow:0px 0px 10px #f90;
}

#delbutt button, #delconf button {
    cursor: pointer;
}

#delbutt button b:hover, #delconf button b:hover {
    text-shadow:0px 0px 10px #f0a;
}

#content {
  width: 100%;
  min-height: 500px;
  padding: 0;
}

#success {
    margin: 0 auto;
    width: 350px;
    width: fit-content;
    font-style: italic;
    font-weight: bold;
    color: red;
}

div#login {
  margin: 0 auto;
  text-align: center;
}

#login input {
  border-color: gainsboro;
  font-size: large;
}

#loginsubmit {
  color: #fff;
  background-color: #05D;
  padding: 15px;
  border-radius: 25px;
  font-weight: bold;
  border: none;
}

#loginsubmit:hover {
  box-shadow: 3px 3px #888;
}

.adminlist {
  width: 500px;
  margin: 0 auto;
}

.adminshow, .adminedit, .adminnew, .admindelete {
  width: 330px;
  margin: 0 auto;
}


hr {
  width: 950px;
	margin: 0;
	border-width: 0;
	color: #9ee;
	background-color: #9ee;
	height: 1px;
}



.formdata div {
  margin: 5px;
  display: inline;
  float: left;
}

form div label, form div input {
	display: inline;
}

form div label {
	font-weight: bold;
}

#sort {
  float: left;
  width: 50%;
}

#stype {
  float: right;
  width: 30%;
}

#stype a {
  color: black;
  font-weight: bold;
}

#delbutt, #editbutt {
    float: right;
    max-width: 1000px;
    margin: 0 auto;
}

#delbutt a, #editbutt a {
    text-decoration: none;
    color: black;
}

#album-form, #track-form, #trackdata {
	text-align: left;
	max-width: 1000px;
    overflow: hidden;
	margin: 0 auto;
    clear: both;
    background-color: dimgrey;
}

#artist input, .gartist input {
	width: 278px;
}

#title input {
	width: 400px;
}

#disc input, #discs input, #tracks input {
	width: 20px;
}

#genre input {
	width: 120px;
}

#length input, #format input, #date input {
	width: 74px;
}

#label input {
	width: 230px;
}

#catno input, #barcode input, #country input {
	width: 110px;
}

#like input {
    width: 527px;
}

#playwhen input {
	width: 450px;
}

#note textarea {
	width: 555px;
	height: 20px;
}

#filler {
    width: 100px;
    height: 30px;
}

.rating input {
    width: 25px;
    text-align: center;
}

#cover {
  float: right;
  width: 230px;
  position: relative;
  right: 25px;
}

#cover label {
  float: left;
}

#upload {
    position:relative;
    top: 5px;
}

#coverpic > img {
  width: 200px;
  object-fit: contain;
  border: solid 1px dimgrey;
  position: relative;
  top: -70px;
}

.tno input {
	width: 20px;
}

.tartist input {
  width: 250px;
}

.tname input {
  width: 350px;
}

.tlength input {
	width: 60px;
	text-align: right;
}

.tnote textarea {
	width: 465px;
	height: 28px;
}

#note label, .tnote label {
  float: left;
}

#songlyrics textarea, #lyrics textarea {
    height: 60vh;
    width: 90vw;
    max-width: 980px;
}


/* Search CSS */

#datenote, #basiclyricssearch, #advlyricssearch, #search1, #search2 {
  max-width: 550px;
  margin: 0 auto;
  text-align: center;
  overflow: auto;
}

form#advsearch > div, form#advmdbsearch > div {
  float: left;
  padding: 5px;
}

form#advsearch > div > label, form#advmdbsearch > div > label {
  text-align: left;
  float: left;
}

#adv-submit {
    float: left;
  margin-top: 5px;
}

.lyr-result {
    padding: 4px;
}

.lyr-result:nth-of-type(2n+3), .result-item:nth-of-type(2n+3) {
  background: #333;
}

.pagelinks {
  margin: 0 auto;
  width: 90vw;
  width: fit-content;
}

#refineartist div {
  margin: 0 auto;
  width: 600px;
  width: fit-content;
}

#lyricsheet {
  width: 90vw;
  width: fit-content;
  max-width: 90vw;
  margin: 0 auto;
}

#lyricresults {
  width: 90vw;
  width: fit-content;
  margin: 0 auto;
}

#musicresults {
  width: 50%;
  margin: 0 auto;
}

#artistresults {
  text-align: center;
}

#albumresults {
  display: inline-block;
}

.result-item, .result-item .res-album {
  clear: both
}

.result-item {
  width: 100%;
  display: table;
  margin: 0 auto;
}

.result-item div {
  float: left;
}

.res-details {
    padding: 10px 0;
}

.res-details > div {
    padding: 5px 0;
}

#albumwrapper {
  width: 75%;
  margin: 0 auto;
}

.res-track, #tlheader, .discheader, .res-album .albumname {
  clear: both;
  overflow: auto;
}

#albumdetails {
  float: left;
  max-width: 40%;
}

.discheader, .tracklist {
    min-width: 50%;
    max-width: 90%;
    margin: 0 auto;
    overflow: auto;
}

.tracklist {
  padding: 10px;
  border: 1px solid black;
}

.col1 {
    clear: left;
}

.col1, .time, .sgenre, .tnote {
  float: left;
}

.col2 {
  float: right;
  width: 50%;
}

.time {
  min-width: 45px;
  text-align: right;
  margin-right: 7px;
}

.sgenre {
  min-width: 80px;
  margin-right: 7px;
}

.tnote {
  min-width: 100px;
  max-width: 300px;
}


/*COVER IMAGE*/

.res-cover {
  padding: 5px;
}

.res-cover img {
  width: 75px;
  object-fit: contain;
  border: solid 1px dimgrey;
}

#albumcoverfull {
  float: right;
  width: 30vw;
  justify-content: center;
}

#flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#albumcoverfull img {
  margin: 0 auto;
  max-height: 500px;
  max-width: 30vw;
  object-fit: contain;
}

#imago {
  background-color: rgba(0,0,0,0.5);
  width: 100%;
  height: 100%;
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
}

#imago img {
  margin: 0 auto;
  position: relative;
  top: 5vh;
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}


/* Actions */

.actions {
  margin-bottom: 1em;
}


/* Lists */

table {
  border-collapse: collapse;
  vertical-align: top;
}

table.list {
  width: 100%;
}

table.list tr td {
  border: 1px solid #999999;
}

table.list tr th {
  border: 1px solid #0055DD;
  background: #0055DD;
  color: white;
  text-align: left;
}

/* Forms */

dl {
  clear: both;
  overflow: hidden;
  margin: 0.5em 0;
}

dt {
  float: left;
  font-weight: bold;
  width: 125px;
}

dd {
  float: left;
  margin-left: 1em;
}

#operations {
  clear: both;
  margin: 1em 0 1em 75px;
}

/* Errors */

.errors {
  display: inline-block;
  border: 2px solid red;
  color: red;
  padding: 1em;
  margin-bottom: 1em;
}

.errors ul {
  margin-bottom: 0;
  padding-left: 1em;
}

/* Session Messages */

#message {
  color: #0055DD;
  background: white;
  border: 2px solid #0055DD;
  padding: 1em 15px;
  margin: 1em auto;
  width: 80%;
  width: fit-content;
}


footer {
  width: 100%;
  background: #0cf;
  color: white;
	display: block;
	position: fixed;
	bottom: 0;
	right: 0;
}

div#cc {
	-moz-transform: scale(-1, 1);
	-webkit-transform: scale(-1, 1);
	-o-transform: scale(-1, 1);
	-ms-transform: scale(-1, 1);
	transform: scale(-1, 1);
	float: left;
}

@media only screen and (max-width: 1000px) {
    /* { font-size: 22pt!important; }*/

    header {
      height: 40px;
    }

    nav ul li {
      margin-right: 5px;
    }

    hr, #album-form, #track-form, #trackdata, .formdata {
        max-width: 95vw;
    }

    textarea, #playwhen input {
      width: 90vw!important;
    }

    nav {
      width: 85vw;
    }

    .rating input, #disc input, #tracks input, #tno input, #lyricid input {
        width: 30px!important;
    }

    #length input, #tlength input, #date input, #format input {
        width: 70px!important;
    }

    input, #lyricssearch input {
      width: unset!important;
    }

    form#advsearch > div, form#advmdbsearch > div {
      float: none;
      overflow: hidden;
      width: 350px;
      width: fit-content;
      margin: 0 auto;
    }

    #adv-submit {
        float: none;
    }

    #albumwrapper {
        width: 90vw;
        text-align: center;
    }

    #albumdetails {
      text-align: left;
      width: 50%;
    }

    #albumdetails, #albumcoverfull {
      float: none;
      margin: 0 auto;
      height: unset;
      max-width: unset;
    }

    #albumcoverfull img {
      max-width: 70vw;
    }

    .tracklist {
      width: auto;
    }

    .time {
      min-width: 40px;
    }

    .sgenre {
      min-width: 70px;
    }

    .tnote {
      min-width: 60px;
      max-width: 175px;
    }

    div.col1, div.col1 *, div.col2, div.col2 * {
      /*font-size: 22pt!important;*/
    }

    #musicresults {
      width: 90%;
    }

    .res-details {
      line-height: unset;
      width: 75vw;
    }

    .result-item {
      overflow: auto;
      width: 90vw;
    }

    .res-track > div, .res-album > div {

    }

    .res-cover img {
      width: 75px;
      object-fit: contain;
      border: solid 1px dimgrey;
    }

}

@media only screen and (max-width: 700px) {
  form#advsearch > div, form#advmdbsearch > div {
    float: none;
    overflow: hidden;
  }

  form#advsearch input, form#advmdbsearch input {
    float: left;
  }

  .res-cover img {
    width: 20vw;
    object-fit: contain;
    border: solid 1px dimgrey;
  }

  .res-details {
      width: 65vw;
      padding: 0;
  }

  .tnote {
    max-width: 100px;
  }

  #albumdetails {
    width: 70vw;
  }

  #albumcoverfull img {
      width: 90vw;
      object-fit: contain;
  }

  div.adminlist table {
    width: unset;
  }
}

@media only screen and (max-width: 525px) {
  .tnote {
    display: none;
  }

  .col2 {
    width: 35%;
  }
}

@media only screen and (max-width: 420px) {
    .res-details > div {
        padding: 0;
    }

    .col2 {
      display: none;
    }
}