/*
  Color scheme: #bc1e2d
  #20a8ba
*/
@font-face {
  font-family: Univers;
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/UniversLTStd-UltraCn.otf") format("opentype");
}

@font-face {
  font-family: Univers-Light;
  font-style: normal;
  font-weight: 200;
  src: url("/fonts/UniversLTStd-Light.otf") format("opentype");
}

html {min-height: 100%; font-size: 12px;}
body {background: #fff; font-size: 1.25em; font-family: 'Univers', sans-serif; color: #000; position: relative; min-height: 100%;}
::selection {background: #20a8ba;}
a {color: #bc1e2d;}
a:hover {color: #bc1e2d;}
h1 {font-size: 46px;}
h2 {font-size: 34px;}

.sponsored-msg {margin: 0 auto 20px; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; display: none;}
.sponsored-msg .alert {padding: 5px;}

#video-frame {margin-bottom: 30px;}

/* Index Carousel */
#header {height: 100%;}
.carousel-inner {height: 100%; position: absolute;}
.carousel-inner .item {height: 100%;}
#header.carousel-fade .carousel-inner > .item {padding: 0; height: 100%;}
.slider-caption h1 {margin-bottom: 25px;}
.carousel-overlay {position: relative; width: 100%; top: 0; text-align: center; z-index: 10; color: #fff;}
.carousel-overlay h2 {margin-top: 5px; font-size: 60px;}
.carousel-overlay .container {position: relative; top: 2%;}
.carousel-overlay #socials {}
.carousel-overlay #socials .fb-like {margin-right: 15px;}
.carousel-overlay #socials .fb-like > span {vertical-align: baseline !important;}
#backstage-slogan {position: absolute; right: 0; bottom: 0; display: inline-block;}
#backstage-slogan a {padding: 8px 12px; font-size: 15px;}
#logo {height: 60px;}

#page-home {font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}
#page-home .container {width: 100%;}
#page-home #header-intro {margin-bottom: 15px; overflow: hidden; position: relative;}
#page-home #header-intro h1 {margin-bottom: 0;}
#page-home #header-intro h2 {margin-top: 0; text-align: right; letter-spacing: 2px;}
#page-home #second-slogan {margin: 100px 0 50px;}
#page-home #second-slogan h3 {margin: 0 auto 6px; font-size: 28px; font-weight: 300;}
#page-home #video-wrap {margin-bottom: 120px;}
#page-home #search-wrap {margin-bottom: 50px; min-height: 200px;}
#page-home #copyright {font-family: "Open Sans",sans-serif; font-size: 12px; background-color: transparent; border-top: 0;}
#page-home .ui-autocomplete {max-height: 175px; overflow-y: scroll;}
#page-home #search-shows-form #autocomplete-wrap #autocomplete {height: 50px; font-size: 20px; width: 75%; float: left; border-radius: 4px 0 0 4px;}
#page-home #search-shows-form button {height: 50px; font-size: 20px; padding-top: 6px; width: 25%; border-radius: 0 2px 2px 0;}
#page-home #footer {background-color: transparent; padding: 0; overflow: hidden;}
#page-home #footer ul {list-style-type: none; overflow: hidden;}
#page-home #footer ul li {float: left; margin-right: 4px;}
#page-home #footer #footer-social-links img {height: 40px;}

form {margin-bottom: 25px;}
form fieldset legend {font-size: 36px; padding-top: 12px;}
form .form-group input, form .form-group select, form .btn {font-size: 25px;}
.form-inline .input-group {vertical-align: baseline; display: table;}
.form-inline .control-group {margin-bottom: 15px;}
.form-inline .control-group label {margin-right: 4px;}

/* Nav Bar */
.navbar {height: 70px; padding-bottom: 0;}
.navbar .filter {width: 250px; font-size: 20px; padding-bottom: 2px;}

nav {margin: 100px auto; text-align: center;}
nav ul {margin-left: 0; padding-left: 0; list-style: none; position: relative; display: inline-table;}
nav ul li:hover > ul {display: block;}
nav ul li {float: left; text-align: left;} 
nav ul li a {display: block; padding: 15px 10px; color: #2a2a2a; background-color: white; text-decoration: none;}     
nav ul ul {border-radius: 0px; padding: 0; position: absolute; top: 100%; display: none;}
nav ul ul li {float: none; border-bottom: 2px solid #eaeaea; position: relative;}
nav ul ul li a {padding: 15px 10px; color: #838383;} 
nav ul li#logout-link-wrap a {background-color: transparent; font-size: 28px; color: #fff; padding-top: 10px;}
.navbar-nav {margin-top: 16px;}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {color: #fff;}
.navbar-default .navbar-nav > .active > a:after, .navbar-default .navbar-nav > .active > a:hover:after, .navbar-default .navbar-nav > li > a:focus:after, .navbar-default .navbar-nav > li > a:hover:after {background-color: transparent;}

.container.main-container {margin-top: 70px; padding-top: 15px; min-height: 90vh;}
nav.navbar {margin-top: 0; padding-top: 0; background-color: #bc1e2d; z-index: 10002;}
nav a {color: #000;}
.navbar-header {width: 100%;}
.navbar-brand {padding: 0; height: auto; line-height: inherit; font-family: "Kaushan Script",cursive;}
.navbar > .container .navbar-brand {margin-left: 0; background-color: #bc1e2d;}
.navbar > .container .navbar-brand img {height: 56px; position: relative; top: 6px; float: left; margin-right: 8px;}
.navbar > .container h2 {display: inline-block; float: left; margin-top: 12px;}
.navbar:hover > .container .navbar-brand h2 {color: #fff;}

.ui-autocomplete {z-index: 10011 !important;}
.ui-widget-content a:hover {text-decoration: none; color: #000;}
.ui-autocomplete-loading {background: url("/img/select2-spinner.gif") no-repeat scroll 99% center white;}
.ui-autocomplete-category {font-weight: bold; padding: .2em .4em; margin: .8em 0 .2em; line-height: 1.5;}

/* Show title with date underneath */
.show-title {text-align: center; margin-bottom: 15px;}
.show-title .title-info-wrap {position: relative; min-height: 175px; overflow: hidden; text-align: center;}
.show-title a {color: #fff;}
.show-title h1 {padding: 35px 20px 0; margin-bottom: 20px; font-size: 46px; margin-top: 0;}
.show-title h2 {margin: 1px 0 22px; font-size: 34px; color: #eee;}
.show-title h6 {margin: 0; padding-bottom: 8px;}
.show-title h6 a {color: #fff; font-size: 18px;}

.site-header {margin-bottom: 20px;}
.site-header .title-info-wrap {}
.site-header .title-wrap {min-height: 100px; text-align: center;}
.site-header h1 {position: relative; padding: 28px 0 0;}

#partners {margin-bottom: 20px; overflow: hidden;}
#partners .partner {float: left; margin-right: 50px;}
#partners .partner#pour-house img {height: 150px;}

.show-title.single-line h1 {padding-bottom: 25px;}
.show-title.single-line a {color: #fff; text-decoration: underline; font-weight: 800;}

/* City.php page */
#boxes-wrap {}
#boxes-wrap .row {margin: 0;}
#boxes-wrap .title-wrap {min-height: 100px; margin-bottom: 20px; padding: 0 10px;}
#boxes-wrap h1 {text-align: center; padding: 28px 0 9px; margin-bottom: 5px; font-size: 50px; margin-top: 0; position: relative;}
#boxes-wrap h2 {font-size: 40px;}
#boxes-wrap h4 {text-align: center;}
#boxes-wrap h4 a {padding: 5px 0; margin-bottom: 20px; font-size: 20px; margin-top: 0; position: relative; color: #fff; text-decoration: underline;}
#boxes-wrap h1 span a {font-weight: 700; color: #fff; text-decoration: underline;}
#boxes-wrap {overflow: hidden; margin-bottom: 10px;}
#boxes-wrap .show-link-wrap {overflow: hidden;}
#boxes-wrap .date {font-size: 34px; padding: 10px 0 5px;}
#boxes-wrap .show-link {display: block; float: left; margin: 5px 20px 20px 5px; position: relative; overflow: hidden;}
#boxes-wrap .show-link.sponsored {border: 2px solid #bc1e2d; box-shadow: 0 0 4px 2px rgba(50, 50, 50, 0.75);}
#boxes-wrap .show-link.show-voted a {background-color: rgba(188, 30, 45, 0.6);}
#boxes-wrap .show-link.show-voted a .check-overlay {position: absolute; height: 100%; width: 100%; top: 0; left: 0; background: url("/img/check.png") center center no-repeat; background-size: 75px 75px;}
#boxes-wrap .show-link.show-voted a .title {position: inherit;}
#boxes-wrap .show-link.show-voted a .voted-text {position: absolute; line-height: 25px; font-size: 25px; color: #000; bottom: 5px; width: 50px; left: 50%; margin-left: -25px;}
#boxes-wrap .show-link a {display: block; overflow: hidden;}
#boxes-wrap .show-link .bar {position: absolute; top: 0; padding: 0 25px; width: 100%;} /*background: rgb(160, 160, 160); background: rgba(160, 160, 160, .7);*/
#boxes-wrap .show-link:hover .bg-overlay {background: rgba(0, 0, 0, .7);}
#boxes-wrap .show-link .title {color: #fff; text-align: center; display: inline-block; vertical-align: middle; line-height: 34px; font-size: 32px; font-weight: 800; letter-spacing: 2px; position: relative; width: 100%; padding: 20px 12px 12px;}
#boxes-wrap .show-link .view-votes {position: absolute; color: #fff; bottom: 0; padding-bottom: 3px; margin-bottom: 8px; width: 112px; left:20%; left: calc(50% - 56px);}
#boxes-wrap .show-link .view-votes:hover {background-color: #1A92A2; border-color: #1A92A2;}

#search-shows-form {margin-bottom: 15px; overflow: hidden; padding-top: 5px;}
#search-shows-form button {font-size: 24px; height: 50px; font-family: Arial,sans-serif;}
#search-shows-form .col-sm-2 {padding-right: 0;}
#search-shows-form #autocomplete-wrap {margin-bottom: 8px; padding-left: 0;}
#search-shows-form #autocomplete-wrap #autocomplete {height: 50px; font-size: 26px;}

#date-nav-wrap {}
#date-nav-wrap #date-nav {}
#date-nav-wrap #date-nav li.title {text-align: center; font-size: 20px; margin-top: 7px;}
#date-nav-wrap #date-nav li {font-size: 18px;}

#artists-search-wrap {overflow: hidden;}

/* Show.php page */
.show-wrap {}

#select-songs-title {margin: 35px 0;}
#select-songs-title h4 {font-size: 40px;}

.song-form {overflow: hidden;}
.song-form fieldset {margin-bottom: 20px; min-height: 300px;}
.song-form fieldset .artist {text-align: center; font-size: 60px; border-bottom: 0; padding: 26px 0 0; margin-bottom: 0;}
.song-form fieldset .artist-extra {margin-bottom: 15px;}
.song-form fieldset .artist-extra a {padding: 9px 14px; min-width: 170px; font-family: 'Helvetica Neue'; font-size: 16px;}
.song-form .song {display: block; float: left; margin: 0 19px 15px 0; width: 150px; height: 150px; line-height: 150px; padding: 0 15px; border: 2px solid #bc1e2d; font-size: 28px; text-align: center; position: relative; cursor: pointer; overflow: hidden;}
.song-form.lg .song {height: 250px; width: 250px; line-height: 250px; font-weight: 400; font-size: 32px;}
.song-form .song span {display: inline-block; vertical-align: middle; line-height: 30px; color: #bc1e2d;}
.song-form .song input {display: none;}
.song-form .song .check-circle {height: 0; width: 0; position: absolute; top: 50%; left: 50%; border-radius: 50%; transition: all .15s ease-in-out; background: url("/img/check.png") center center no-repeat; background-size: 75px 75px;}
.song-form .song.selected .check-circle {height: 100%; width: 100%; opacity: .7; background-color: #fff; border-radius: 4px; top: 0; left: 0;}
#artist-container .song-form {padding: 0;}

#artists-nav {display: inline-block; padding: 0; position: relative; border-bottom: 0;}
#artists-nav.affix {top: 0;}
#artists-nav.affix {position: fixed;}
#artists-nav.affix-bottom {position: absolute; top: auto;}
#artists-nav .artist-label.affix-top {position: absolute;}
#artists-nav .artist-label.affix-bottom {position: absolute;}
#artists-nav .artist-label a {background-color: transparent; border: none; text-align: center; font-size: 28px; margin: 0;}
#artists-nav .artist-label a img {margin: 0 auto; display: block;}

#vote-for-songs {font-size: 25px;}

#showballot {}
#showballot > h2 {font-size: 44px;}

/* Ballot.php */
#ballot {}
#ballot .artist {}
#ballot .artist h1 {padding: 20px 20px 12px; font-size: 42px;}
#ballot .artist .row {margin: 0 0 10px 0;}
#ballot .artist .song-votes-wrap {padding-right: 0; font-size: 18px;}
#ballot .artist .song-votes {text-align: left; background-color: #20a8ba; padding-left: 5px; border: 2px solid #20a8ba; border-left: 0; border-right: 0; min-width: 50px;}
#ballot .artist .song-votes span {color: #fff; position: relative; top: 2px;}
#ballot .artist .song-name {font-family: 'Univers-Light'; border: 2px solid #20a8ba; text-align: left; height: 30px; padding-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#ballot .artist .song-name span {position: relative; top: 1px;}

/* Artist.php */
#artist-container h1 {text-decoration: underline;}
#artist-container .show-title h1 {text-decoration: none;}

#legend {list-style-type: square;text-align: left; margin-bottom: 0;}

.overflow {overflow: hidden; display: none; transition: all .15s ease-in-out;}
.toggle-overflow {display: inline-block; font-size: 25px; vertical-align: middle; line-height: 150px; width: 150px; text-align: center; cursor: pointer; text-decoration: underline;}
#ballot .toggle-overflow {line-height: 50px;}

ul ul {display: none;}
ul li.active ul {display: block;}

.center {text-align: center;}

.box {background-color: #bc1e2d; color: #fff; position: relative;}
.box.light {background-color: rgba(188, 30, 45, 0.6);}
.show-voted .btn-blue {border-color: transparent;}
.btn-blue {background-color: #20a8ba; border-color: #20a8ba; color: #fff;}
.btn-blue:hover {color: #fff;}
.btn-twitter:hover {background-color: #0084b4; border-color: #0084b4; color: #fff;}
.btn-twitter {background-color: #00aced; border-color: #00aced; color: #fff; padding: 9px 14px; min-width: 170px; font-family: 'Helvetica Neue'; font-size: 16px;}
.bg-overlay {position: absolute; height: 100%; width: 100%; top: 0; left: 0; background: rgba(0, 0, 0, .5); transition: all .15s ease-in-out;}
.bg-overlay.dark {background: rgba(0, 0, 0, .6);}
.img-bg {background-size: 100% auto; background-position: 50% 50%;}
#vote-btn {margin-bottom: 15px; padding-bottom: 5px; font-size: 25px; width: 100%;}

#share-links {position: relative; margin-bottom: 10px;}
#share-links .share-btn {}
#share-links .fb-share-button {top: -6px; margin-right: 4px;}

.fb-comments {margin-bottom: 15px;}

footer {min-height: 70px; background-color: #bc1e2d; z-index: 10000; position: relative; bottom: 0; overflow: hidden; padding-bottom: 10px;}
footer .list-wrap {overflow: hidden;}
footer ul {list-style-type: none; overflow: hidden; padding-top: 10px; display: inline-block; margin-bottom: 0;}
footer ul li {float: left; font-size: 30px; margin-right: 20px;}

#footer-links li a {color: #fff;}
#footer-links li a:hover {text-decoration: none;}

#footer-social-links {margin-bottom: 10px;}
#footer-social-links img {height: 50px;}

footer .powered-by {text-align: center; color: #fff;}
footer .powered-by a {color: #fff;}
footer .copyright {text-align: center; color: #fff;}
footer .plain-font {font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}

#down-triangle {float: right; width: 0; height: 0; margin-top: 10px; border-top: 10px solid #2ecc71; border-left: 10px solid transparent; border-right: 10px solid transparent; background-color: white;}

.circle {float: right; display: inline; width: 10px; height: 10px; margin-top: 5px; border: 3px solid #8ce5b2; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%;}

.dropdown-menu { max-height: 500px;  overflow-y: auto;  overflow-x: hidden;}

#tfheader{ background-color:#c3dfef; } #tfnewsearch{ float:right;  padding:20px; } .tftextinput{ margin: 0;  padding: 5px 15px;  font-family: Arial, Helvetica, sans-serif;  font-size:14px;  border:1px solid #0076a3; border-right:0px;  border-top-left-radius: 5px 5px;  border-bottom-left-radius: 5px 5px; } .tfbutton { margin: 0;  padding: 5px 15px;  font-family: Arial, Helvetica, sans-serif;  font-size:14px;  outline: none;  cursor: pointer;  text-align: center;  text-decoration: none;  color: #ffffff;  border: solid 1px #0076a3; border-right:0px;  background: #0095cd;  background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));  background: -moz-linear-gradient(top, #00adee, #0078a5);  border-top-right-radius: 5px 5px;  border-bottom-right-radius: 5px 5px; } .tfbutton:hover { text-decoration: none;  background: #007ead;  background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));  background: -moz-linear-gradient(top, #0095cc, #00678e); } /* Fixes submit button height problem in Firefox */ .tfbutton::-moz-focus-inner { border: 0; } .tfclear{ clear:both; }

/* https://unindented.org/articles/github-ribbon-using-css-transforms/ */
.ribbon {
  background-color: #a00;
  overflow: hidden;
  white-space: nowrap;
  /* top left corner */
  position: absolute;
  left: -38px;
  top: 10px;
  z-index: 10000;
  /* 45 deg ccw rotation */
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
  /* shadow */
  -webkit-box-shadow: 0 0 10px #888;
     -moz-box-shadow: 0 0 10px #888;
          box-shadow: 0 0 10px #888;
}
.ribbon a {
  border: 1px solid #faa;
  color: #fff;
  display: block;
  font: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 1px 0;
  padding: 10px 40px;
  text-align: center;
  text-decoration: none;
  /* shadow */
  text-shadow: 0 0 5px #444;
}