body {
    font-family: Microsoft Yahei, arial, sans-serif;
    font-size:1.4em;
    margin: 0;
    padding: 0;
    width:1400px;
    margin-right: auto;
    margin-left: auto;
}
#background {
    background-color:#3a4047;
    text-align: center;
}
a {
    cursor: pointer;
    text-decoration: none;
}
p {
    margin:0;
}
ul {
    margin: 0;
    padding: 0;
}
li {
    list-style-type: none;
}
#loadingstatus {
    display: none;
}
#banner{
    font-size: 4em;
    margin: 0;
    max-width: 100%;
    background-color:#478bf7; 
    padding-top: 35px;
    padding-bottom: 35px;
}
#home {    
    position: absolute;
    float: left;
    font-size: 24px;
    font-weight: lighter;
    margin-left: 20px;
    margin-bottom: 10px;
}
.center {
    display: inline-block;
    clear: both;
    color:white;
    text-align: center;
    font-size: 24px;
    font-weight: lighter;
    margin-top: 20px;
    margin-bottom:px;
}
.centerp {
    display: inline-block;
    clear: both;
    color:white;
    text-align: center;
    font-size: 14px;
    font-weight: lighter;
    margin-top: 5px;
    margin-bottom: 20px;
}
#searchArea {
    float: left;
}
#searchbar {

}
#titlesearch {
    float: left;
    text-align: center;
}
.listView {
    padding-top: 2px;
    border-top: .1px solid black;
    border-bottom: .1px solid black;
    display: inline-block;
    width:100%;
    font-size: .9em;
}
.listView:hover {
    background-color:black;
    color:white;
}
.listView hr {
    margin:0px;
}
#leftPane{
    display: inline;
    float: left;
    background-color: white;   
    display:inline-block; 
    border:solid 1.5px;
    width:300px;
    height:680px;
    margin-top:10px;
    padding:2px;
    overflow:auto;
}
#first {
    background-color: white;
    padding:17px; 
    float: left;
    display: inline-block;
    margin-left: 25px;
}
input:hover, input:focus {
    border-color:#2f63b5; 
}
.songinfo {
    width:250px;
    font-size: .9em;
    text-indent: 3px;
}
#second {
    background-color: #478bf7;
    padding:17px;
    float: left;
    display: inline-block;
    margin-left: 25px;  
}
#third {
    float: left;
    display: inline-block;
    margin-top: 90px;
    margin-left: 25px; 
}
.contributer {
    margin:0;
    padding: 0;
    margin-left:0px; 
    text-align: center;
}
#firstform {
    column-count: 2;
    margin-top: 10px;
}
#firstform li{
    padding-top: 10px;
}
#secondform {
    margin-top: 10px;
}
#title {

}
#artist {
    
}
#genre {
    
}
#album {

}
#artist2 {

}
#genre2 {

}
#id {
}
#submit {

}
#lyricbox {
    width:500px;
    height: 400px;
    font-family: Cambria, Georgia, serif;
    font-size: 1em;
}
#chordbox {
    width:500px;
    height: 400px;
    font-family: Cambria, Georgia, serif;
}
#update {
    
}
#delete {
    
}
.buttons {
    width: 170px;
    font-family: arial, sans-serif;
    cursor: pointer;
    font-size:1.1em;
    color:white;
    margin-top:10px;
    background-color: #478bf7;
    text-align: center;
    border: .25px solid black;
    border-radius:3px;
    list-style-type: none;
    padding:10px ;
    margin-bottom: 5px;
}
.buttons:hover {
      background-color:#2f63b5;
}

@media only screen and (max-width: 960px){
body {
    width:100%;
}
#banner{
    font-size: 2em;
    margin: 0;
    max-width: 100%;
    background-color:#478bf7; 
    padding-top: 35px;
    padding-bottom: 35px;
}
}
@media only screen and (max-width: 880px){
 /**/
 #banner{
    font-size: 1em;
    margin: 0;
    max-width: 100%;
    background-color:#478bf7; 
    padding-top: 35px;
    padding-bottom: 35px;
}
}