html, body { width: 100%; height: 100%; }

#wrapper { width: 100%; /*max-width: 1640px;*/ height: 100%; opacity: 0; }

hr.one { width: 86%; margin: 0 auto; border-top: 1px solid #00228f; }
hr.two { width: 86%; margin: 0 auto; border-top: 1px solid #b7b7b7; }

.title-wrapper { width: 86%; margin: 0 auto; padding: 5vw 0vw 2vw 0vw; }
.title-wrapper h1.title { font: normal 8.4vw Helvetica; font-size: min(8.4vw, 100px); color: #00228f; }

.subtitle-wrapper { padding: 1.5vw 0vw; width: 86%; margin: 0 auto; }
.subtitle-wrapper p { font: normal 1.2vw Courier; color: #00228f; float: left; }
.subtitle-wrapper a { text-decoration: underline; font: normal 1.2vw Courier; color: #00228f; float: right; }

.about { width: 86%; margin: 0 auto; padding: 3vw 0vw 1vw 0vw; }
.about p { width: 100%; height: 6vw; font: normal 1.8vw Helvetica; color: #00228f; }
.about p a { font: normal 1.8vw Helvetica; color: #00228f; }

.search-wrapper { position: relative; width: 86%; height: 2.5vw; margin: 0 auto; padding: 4vw 0vw .6vw 0vw; }
.search-wrapper .item { float: left; font: normal 1.1vw Courier; color: #00228f; height: 2vw; box-sizing: border-box; }
.search-wrapper .expand-all { width: 10%; }
.search-wrapper .expand-all-button { cursor: pointer; background: url("../img/expand.collapse.jpg?v=001") center center no-repeat; width: 2vw; height: 2vw; background-size: 200% 100%; background-position: 100% 0%; }
.search-wrapper .expand-all.on .expand-all-button { background-position: 0% 0%; }
.search-wrapper .title { width: 20%; padding-top: .4vw; }
.search-wrapper .artist { width: 20%; padding-top: .4vw; }
.search-wrapper .submittedby { width: 15%; padding-top: .4vw; }
.search-wrapper .location { width: 14%; padding-top: .4vw; }
.search-wrapper .searchform { padding-top: .4vw; }
.search-wrapper .searchform select { outline: none; border: 0; font: normal 1.1vw Courier; color: #00228f; }
.search-wrapper .play-all { width: 4%; float: right; }
.search-wrapper.playing .play-all { display: none; }
.search-wrapper .play-all-button { cursor: pointer; float: right; background: url("../img/play.jpg?v=001") center center no-repeat; width: 2vw; height: 2vw; background-size: 100% 100%; }

.search-wrapper .playing-anim { cursor: pointer; height: 1.6vw; display: none; width: 6vw; float: right; position: relative; }
.search-wrapper.playing .playing-anim { display: block; }
.search-wrapper .playing-anim .bar.one { background-color: rgba(0, 34, 143, 1.000); position: absolute; right: 0vw; bottom: 0px; height: 1vw; width: .25vw; -webkit-animation: move1 infinite 1s linear; }
.search-wrapper .playing-anim .bar.two { background-color: rgba(0, 34, 143, 1.000); position: absolute; right: .65vw; bottom: 0px; height: 1vw; width: .25vw; -webkit-animation: move2 infinite 1s linear; }
.search-wrapper .playing-anim .bar.three { background-color: rgba(0, 34, 143, 1.000); position: absolute; right: 1.3vw; bottom: 0px; height: 1vw; width: .25vw; -webkit-animation: move3 infinite 1s linear; }

.addasong-wrapper { width: 86%; margin: 0 auto; position: relative; padding: 1.5vw 0vw; }
.addasong-wrapper .addasongbutton { cursor: pointer; background: #00228f; width: 100%; padding: 3vw 0px; border-radius: 1.5vw; }
.addasong-wrapper .addasongbutton p { color: white; text-align: center; font: normal 2.6vw Helvetica; }
.addasong-wrapper form.addsongform { padding-left: 10%; display: none; }
.addasong-wrapper form.addsongform input { width: 20%; height: 3vw; padding-left: 1vw; box-sizing: border-box; border-radius: .5vw .5vw; border: 2px solid rgba(0, 34, 143, 1.000); outline: none; font: normal 1.2vw Helvetica; color: #00228f; }
.addasong-wrapper form.addsongform input._title { width: 20%; margin-right: calc(1.25% + 4px); }
.addasong-wrapper form.addsongform input._artist { width: 20%; margin-right: calc(1.25% + 4px); }
.addasong-wrapper form.addsongform input._submittedby { width: 15%; margin-right: calc(1.25% + 4px); }
.addasong-wrapper form.addsongform input._location { width: 14%; margin-right: calc(1.25% + 4px); }
.addasong-wrapper form.addsongform .top { margin-bottom: 2vw; }
.addasong-wrapper form.addsongform select { width: 16%; height: 3vw; border-radius: .5vw; padding-left: 1vw; border: 2px solid rgba(0, 34, 143, 1.000); outline: none; font: normal 1.2vw Helvetica; color: #00228f; }
.addasong-wrapper form.addsongform textarea { width: 93%; height: 10vw; margin-bottom: 2vw; border-radius: 1vw; padding: 1vw; box-sizing: border-box; resize: none; border: 2px solid rgba(0, 34, 143, 1.000); outline: none; font: normal 1.2vw Helvetica; color: #00228f; }
.addasong-wrapper form.addsongform .submit { cursor: pointer; margin: 0 auto; background: #00228f; width: 30%; padding: 1vw 0px; border-radius: .5vw .5vw; }
.addasong-wrapper form.addsongform .submit p { color: white; text-align: center; font: normal 1.4vw Helvetica; }
.addasong-wrapper form.addsongform .required { border-color: red; }
.addasong-wrapper .thanks { width: 100%; text-align: center; }
.addasong-wrapper .thanks { text-align: center; font: normal 5vw Helvetica; color: #00228f; position: absolute; top: calc(50% - 6.5vw); display: none; }

ul.songs { width: 86%; margin: 0 auto; position: relative; }
ul.songs li.song { position: relative; padding: 1vw 0vw; border: 1px solid #b7b7b7; border-width: 0px 0px 1px 0px; }
ul.songs li.song.pending { opacity: .6; }
ul.songs li.song .item { float: left; font: normal 1.1vw Helvetica; color: #00228f; height: 2vw; box-sizing: border-box; }

ul.songs li.song .expand { width: 10%; }
ul.songs li.song .expand-button { cursor: pointer; background: url("../img/expand.song.jpg?v=001") center center no-repeat; width: 2vw; height: 2vw; background-size: 200% 100%; background-position: 100% 0%; }
ul.songs li.song .expand.open .expand-button { background-position: 0% 0%; }

ul.songs li.song .song-title { width: 20%; padding-top: .4vw; }
ul.songs li.song .song-band { width: 20%; padding-top: .4vw; }
ul.songs li.song .song-user-name { width: 15%; padding-top: .4vw; }
ul.songs li.song .song-user-location { width: 15%; padding-top: .4vw; }
ul.songs li.song .song-file-under { width: 10%; padding-top: .4vw; }

ul.songs li.song .play { cursor: pointer; width: 5%; float: right; padding-top: .4vw; }
ul.songs li.song.playing .play { display: none; }
ul.songs li.song .play .play-button { float: right; background: url("../img/playsong.jpg?v=001") center center no-repeat; width: 1vw; height: 1vw; background-size: 200% 100%; background-position: 0% 0%; }
ul.songs li.song.playing .play .play-button { background-position: 100% 0%; }

@-webkit-keyframes move1 {
    0% { height: 16%; }
    25% { height: 66%; }
    75% { height: 50%; }
    100% { height: 16%; }
}

@-webkit-keyframes move2 {
    0% { height: 5%; }
    25% { height: 41%; }
    75% { height: 66%; }
    100% { height: 5%; }
}

@-webkit-keyframes move3 {
    0% { height: 25%; }
    25% { height: 5%; }
    75% { height: 66%; }
    100% { height: 25%; }
}

ul.songs li.song .playing-anim { cursor: pointer; height: 1.6vw; display: none; width: 6vw; float: right; position: relative; }
ul.songs li.song.playing .playing-anim { display: block; }
ul.songs li.song .playing-anim .bar.one { background-color: rgba(0, 34, 143, 1.000); position: absolute; right: 0vw; bottom: 0px; height: 1vw; width: .25vw; -webkit-animation: move1 infinite 1s linear; }
ul.songs li.song .playing-anim .bar.two { background-color: rgba(0, 34, 143, 1.000); position: absolute; right: .65vw; bottom: 0px; height: 1vw; width: .25vw; -webkit-animation: move2 infinite 1s linear; }
ul.songs li.song .playing-anim .bar.three { background-color: rgba(0, 34, 143, 1.000); position: absolute; right: 1.3vw; bottom: 0px; height: 1vw; width: .25vw; -webkit-animation: move3 infinite 1s linear; }

ul.songs li.song:last-child { border-width: 0px 0px 0px 0px; }

ul.songs li.song .extra { display: none; padding: 2vw 0px 0px 10%; }
ul.songs li.song.open .extra { display: block; }
ul.songs li.song .extra .song-user-description { width: 100%; font: normal 1.1vw Helvetica; color: #00228f; }

.contact { padding: 2vw 0vw; width: 86%; margin: 0 auto; }
.contact p { text-align: center; font: normal 1.2vw Courier; color: #00228f; }
.contact a { text-decoration: underline; color: #00228f; }

.rip { width: 86%; margin: 0 auto; padding: 4vw 0vw 8vw 0vw; }
.rip img { display: block; width: 16vw; margin: 0px auto 1.5vw auto; }
.rip p { text-align: center; font: normal 1.2vw courier; color: #00228f; }

#song-template { display: none; }