styles.css

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,600);

body {
    /*text-align: center;*/
}

.frame {
    margin-top: 50px;  
}

.logo2 {
    text-align:center;
    vertical-align:middle;
    margin-top: 8px;
}

.nav-extra {
  border-top:white;
  border-left:white;
  border-radius:white;
  border-right:white;
  background-color:white;
}

.logo {
    vertical-align: center;
    text-align: center;
    color:#8a68e0;
    margin-top: 8px;
    position: absolute;
    z-index:-5;
    left:50%;
    top:-250px;
    transform: translateX(-50%);
    /*font-family: "Open Sans";*/
    /*margin-bottom: 30px;*/
    /*font-size: 100px;*/
}

.logo span.sub {
    color:#8a68e0;
    font-weight: 500;
}

.logo span.bold {
    color:#8a68e0;
    font-weight: 800;
}

.logo h1 {
    font-size:140px;
}

.semibold {
    font-weight:600;
    text-decoration: none;
}

.btn-extra {
    padding: 10px 40px;
    color:#fff;
    background-color:#8a68e0;
    margin-top: 8px;
    margin-bottom: 8px; 
    border: 1px solid transparent;
    border-color: #8a68e0;
    font-family:"Open Sans";
    vertical-align:middle;
    font-size: 21px;
}

.btn3 {

    margin-top: 8px;
    margin-bottom: 8px; 
    padding: 15px 40px;
    height: 50 px;
    width:50 px;
    font-size: 21px;
    line-height: 1.33;
    border-radius: 6px;
    color: #fff;
    background-color: #8a68e0;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    background-image: none;
    border: 1px solid transparent;
    text-decoration: none;
    background: 0 0;
    box-sizing: border-box;
    font-family: "open sans";
}

.btn2 {

  padding:15px 40px;
  position: relative;
  vertical-align: middle;
  width: 100px;
  height: 50px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #8a68e0;
  border: 0;
  border-bottom: 2px solid #8a68e0;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #8a68e0;
  box-shadow: inset 0 -2px #8a68e0;
  margin-top: 8px;
  margin-bottom: 8px;
  font-family:"Open Sans";
  font-size:21px;
  text-decoration: none;


}

.container {
    margin-left: 0;
    margin-right: 0;
    width:100%;
    height:100%;
    padding: 0;
    /*background-color: rgba(220, 220, 220, 0.2);*/
}

.searchLanding-bg {
    top:0;
    height:800px;
    width:100%;
    position:fixed;
    z-index:0;
    background-size: cover;
    background-image: url('http://freelargephotos.com/000519_l.jpg');
    background-position: center;
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
}

/*.searchLanding {
    background-size: cover;
    background-image: url('http://hdwallpapers360.com/wp-content/uploads/color-blurry-background.jpg');
    background-position: center;
}*/
/*^^^ DEPRECATED, merged with .container*/

.searchbox {
    margin-top: 29%;
    border: none;
    font-family: Helvetica;
    font-size: 40px;
    outline:none;
    position:fixed;
    z-index:99;
    left:50%;
    transform: translateX(-40%);
    display:block;
}

.searchbox.submitted {
    margin-top: 0px;
    transition:.3s;
}

.searchbox.fake_submitted {
    margin-top: 10px;
    transition:.3s;
}
.searchLanding.submitted {
    /*display:none;*/
}

#searchPrefix {
    position:absolute;
    z-index:3;
    left: -200px;
    font-size:.5em;
    display:none;
}

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
  text-align:default;
}

#navigation {
    top: -60px;
    z-index:98;
    width:100%;
    border-radius: 0px;
    position: fixed;
    height:80px;
    /*border-bottom:gray 4px solid;*/
    border-bottom:white;
    background-color: white;
}

#navElems {
}

#navigation.submitted {
    top:0;
    transition: .5s;
}

.queryPrefix {
    color: #333;
    font-family: Open Sans;
    font-weight: 300;
    font-size: 22px;
}

#query {
    color: #333;
    font-family: Open Sans;
    font-weight: 300;
    font-size: 22px;
}

input {
    padding: 15px;
}

#searchInput {
    border: none;
    height: 38px;
    font-size: 26px;
    font-family: Open Sans;
    font-weight: 300;
    background: rgba(240, 240, 240, 1);
    padding: 30px;
}

#searchInput:focus {
    outline: none;
}

.navbar-inverse {
    /*background: rgba(184, 153, 189, 0.6);*/
    background: none;
}


#login-modal {
    position:fixed;
    z-index:99;
    height:100%;
    width:100%;
    background-color: rgba(0,0,0,0.7);
    display:block;
    transition: background-color 0.5s;
}

#login-modal.hidden {
    background-color: rgba(255, 255, 255, 0.3);
    transition: background-color 0.3s;
    display:none;
}

.wisteria-flat-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #8e44ad;
  border: 0;
  border-bottom: 2px solid #80399d;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #80399d;
  box-shadow: inset 0 -2px #80399d;
}
.wisteria-flat-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.login-box {
    position:relative;
    background-color: white;
    border: gray 10px solid;
    margin: 0 auto;
    margin-top: 10%;
    padding:20px;
    width:35%;
}

.login-box table {
    margin: 0 auto;
    border-spacing:5px;
}

.login-button {
    background-image: none;
    background-color:purple;
}

.form-label {
    margin-top:2px;
    padding:1px;
    margin-left:15px;
    border-radius: 0px;
}

.form-controll {
    border:none;
    background-color: whitesmoke;
    padding:1px;
    margin-left:15px;
    border-radius: 0px;
}

.form-controll:focus {
    outline:none;
}

.form-title{
    text-align: center;
    font-size: 30;
}

/*BACKBONE FORMATTING*/

/*Grid and itemized stuff*/

.result_item {
    position:relative;
    display: inline-block;
    visibility:default;
    width:300px;
    height:300px;
    margin-right:15px;
    margin-bottom:15px;
    /*background-color: whitesmoke;*/
    text-align: center;
    padding:10px;
}

/*.resultCollection {
    left: 0;
    position:absolute;
    z-index:-1;
}

.resultCollection.moved {
    left:-100%;
    transition: 0.5s;
}*/

.submitLogin{
    margin-top:30px;
}

#resultContainer {
    margin: 0 20px;
    margin-top: 65px;
    margin-left:100px;
    position: absolute;
    width:100%;
    height:100%;
    text-align: center;
}

.itemCont {
    position:relative;
    overflow:hidden;
}

.itemCont img {
    height:70%;
    width:70%;
    left:50%;
    margin-top:20px;
    opacity: 0.8;
}

.itemCont img:hover {
    opacity:1;
}

.itemCont p {
    margin-top:10px;
}

/*Spotify element*/

/*#spotifyelement {
    margin: 0 auto;
    left: 0;
    position:absolute;
    z-index: -1;
}

#spotifyelement.moved {
    left:-100%;
    transition: 0.5s;
}*/

#songContainer img {
    height:500px;
    width:450px;
}

#songContainer {
    display: inline-block;
}

/*Universal Backbone containers that slide out, yet are named different*/

.resultCollection, #spotifyelement {
    margin: 0 auto;
    left: 0;
    /*position:absolute;*/
    z-index: 97;
    position:absolute;
}
#spotifyelement {
    margin-left: 30%;
}

.resultCollection.moved, #spotifyelement.moved {
    left: -100%;
    transition: 0.5s;
}