body {
  background-color: #EEE;
  overflow-y: scroll;
}

body,
input,
button,
select,
code {
  font-family: Arial, Tahoma, sans-serif;
}

/* Keeps the text from disappearing while the custom font is downloaded */
.wf-ubuntu-n4-active body,
.wf-ubuntu-n4-active input,
.wf-ubuntu-n4-active button,
.wf-ubuntu-n4-active select,
.wf-ubuntu-n4-active code {
  font-family: 'Ubuntu', Arial, Tahoma, sans-serif;
}

/* just in case a browser won't load a custom font if its not used */
.web-font {
  font-family: 'Ubuntu', Arial, Tahoma, sans-serif;
}

a {
  color: #1B1B1B;
}

a.link {
  color: #0187C5;
}

a:hover {
  color: #0187C5;
  text-decoration: underline;
}

a.close {
  font-size: 24px;
}

#user {
  width: 135px;
}

.tooltip-arrow {
  border-right-color: #05C !important;
}

.tooltip-inner {
  background-color: #05C;
}

.center {
  text-align: center;
}

code {
  font-size: 14px;
}

#artistList {
  margin-bottom: 14px;
}

#logo-container {
  background-color: #000;
  margin:20px 0;
  overflow:hidden;
  position:relative;
  line-height: 0;
}

#logo-container .logo-bg {
  display:none;
  position: absolute;
  width: 10%;
}

#logo-container a {
  position: relative;
}

#logo-container #logo {
  width: 100%;
  vertical-align: top;
}

#footer {
  border-top: 1px solid #DDD;
  margin-top:35px;
  padding: 1em 0em;
}

.container {
  background-color: #FFF;
}

.nav-tabs > .active > a {
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1) inset;
}

.alert {
  margin-bottom: 10px;
}

/*
 * Social share buttons
 * CSS based from: Mark Dotto's github-buttons
 */
.share-row {
  margin-bottom: 20px;
  text-align: right;
}

.share-row a {
  padding: 2px 5px;
  color: #555;
  text-decoration: none;
  text-shadow: 0 1px 0 #fff;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 3px;
  background-color: #f5f5f5;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fafafa), to(#eaeaea));
  background-image: -webkit-linear-gradient(#fafafa, #eaeaea);
  background-image: -moz-linear-gradient(top, #fafafa, #eaeaea);
  background-image: -ms-linear-gradient(#fafafa, #eaeaea);
  background-image: -o-linear-gradient(#fafafa, #eaeaea);
  background-image: linear-gradient(#fafafa, #eaeaea);
  background-repeat: no-repeat;
  border: 1px solid #d4d4d4;
  border-bottom-color: #bcbcbc;
  font-size: 16px;
  margin-right: 4px;
}

.btn-twitter i {
  color: #00ACED;
}

.btn-facebook i {
  color: #3B5998;
}

.btn-lastfm i {
  color: #d51007;
}

.btn-spotify i {
  color: #7AB800;
}

.share-row a:hover,
.share-row a:focus,
.share-row a:active {
  color: #fff;
  text-decoration: none;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}

.share-row a:hover i,
.share-row a:focus i,
.share-row a:active i {
  color: #fff;
}

.share-row a.btn-twitter:hover,
.share-row a.btn-twitter:focus {
  border-color: #007EA5;
  background-color: #00A0D1;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#00A0D1), to(#008EB9));
  background-image: -webkit-linear-gradient(#00A0D1, #008EB9);
  background-image: -moz-linear-gradient(top, #00A0D1, #008EB9);
  background-image: -ms-linear-gradient(#00A0D1, #008EB9);
  background-image: -o-linear-gradient(#00A0D1, #008EB9);
  background-image: linear-gradient(#00A0D1, #008EB9);
}

.share-row a.btn-twitter:active {
  border-color: #007EA5;
  background-color: #00A0D1;
}

.share-row a.btn-facebook:hover,
.share-row a.btn-facebook:focus {
  border-color: #133783;
  background-color: #3B5998;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6D84B4), to(#3B5998));
  background-image: -webkit-linear-gradient(#6D84B4, #3B5998);
  background-image: -moz-linear-gradient(top, #6D84B4, #3B5998);
  background-image: -ms-linear-gradient(#6D84B4, #3B5998);
  background-image: -o-linear-gradient(#6D84B4, #3B5998);
  background-image: linear-gradient(#6D84B4, #3B5998);
}

.share-row a.btn-facebook:active {
  border-color: #133783;
  background-color: #3B5998;
}

.share-row a.btn-lastfm:hover,
.share-row a.btn-lastfm:focus {
  border-color: #990801;
  background-color: #DB1505;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#DB1505), to(#A50600));
  background-image: -webkit-linear-gradient(#DB1505, #A50600);
  background-image: -moz-linear-gradient(top, #DB1505, #A50600);
  background-image: -ms-linear-gradient(#DB1505, #A50600);
  background-image: -o-linear-gradient(#DB1505, #A50600);
  background-image: linear-gradient(#DB1505, #A50600);
}

.share-row a.btn-lastfm:active {
  border-color: #990801;
  background-color: #DB1505;
}

.share-row a.btn-spotify:hover,
.share-row a.btn-spotify:focus {
  border-color: #AADD06;
  background-color: #7AB800;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#A1CB0D), to(#82B201));
  background-image: -webkit-linear-gradient(#A1CB0D, #82B201);
  background-image: -moz-linear-gradient(top, #A1CB0D, #82B201);
  background-image: -ms-linear-gradient(#A1CB0D, #82B201);
  background-image: -o-linear-gradient(#A1CB0D, #82B201);
  background-image: linear-gradient(#A1CB0D, #82B201);
}

.share-row a.btn-spotify:active {
  border-color: #AADD06;
  background-color: #7AB800;
}

.share-row a:active {
  background-image: none !important;
  -webkit-box-shadow: inset 0 2px 5px rgba(0,0,0,.10);
     -moz-box-shadow: inset 0 2px 5px rgba(0,0,0,.10);
          box-shadow: inset 0 2px 5px rgba(0,0,0,.10);
}

/* Google Responsive Adsense Ads */
.ad-overflow {
  overflow: hidden;
}

.responsivead {
  display: block;
  margin: auto;
  width: 728px;
  height: 90px;
}

/* Our custom responsive css */
@media (max-width: 767px) {
  body {
    padding: 0;
  }

  .container {
    padding: 8px;
  }

  /* makes the nav-tabs into nav-stacked */
  .nav-tabs > li {
    float: none;
  }

  .nav-tabs > li > a {
    margin-right: 0;
  }

  .nav-tabs {
    border-bottom: 0;
  }

  .nav-tabs > li > a {
    border: 1px solid #ddd !important;
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
  }

  .nav-tabs > li:first-child > a {
    -webkit-border-radius: 4px 4px 0 0;
       -moz-border-radius: 4px 4px 0 0;
            border-radius: 4px 4px 0 0;
  }

  .nav-tabs > li:last-child > a {
    -webkit-border-radius: 0 0 4px 4px;
       -moz-border-radius: 0 0 4px 4px;
            border-radius: 0 0 4px 4px;
  }

  .nav-tabs > li > a:hover {
    z-index: 2;
    border-color: #ddd;
  }

  /* Google Responsive Adsense Ads */
  .responsivead {
    width: 320px;
    height: 50px;
  }
}

@media (min-width: 768px) {
  body {
    margin-bottom: 400px;
  }

  #logo-container {
    margin: 20px;
  }
}

@media (min-width: 768px) and (max-width: 979px) {
  /* Google Responsive Adsense Ads */
  .responsivead {
    width: 468px;
    height: 60px;
  }
}

/* Custom Fuel UX datagrid.css */
.datagrid .sorted,
.datagrid .sortable:hover {
  color: #333333;
  text-shadow: 'none';
  background-color: #f1f1f1;
  background-image: -moz-linear-gradient(top, #f9f9f9, #e5e5e5);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e5e5e5));
  background-image: -webkit-linear-gradient(top, #f9f9f9, #e5e5e5);
  background-image: -o-linear-gradient(top, #f9f9f9, #e5e5e5);
  background-image: linear-gradient(to bottom, #f9f9f9, #e5e5e5);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f9f9f9, endColorstr=#e5e5e5, GradientType=0);
  border-color: #e5e5e5 #e5e5e5 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.datagrid .sorted i {
  float: right;
}
.datagrid .sortable {
  cursor: pointer;
}
.datagrid .grid-controls {
  margin-top: 7px;
}
.datagrid .grid-controls select {
  margin: 0 5px;
  width: 60px;
}
.datagrid .grid-controls > span {
  font-weight: normal;
  vertical-align: middle;
  position: relative;
}
.datagrid .grid-controls .search {
  margin-top: 7px;
}
.datagrid .grid-controls input[type=number]::-webkit-inner-spin-button,
.datagrid .grid-controls input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.datagrid .grid-pager input {
  margin: 0;
  width: 60px;
}

/* Bootstrap 2.1.1 tweak */
select {
	padding: 4px;
}