@import url(https://fonts.googleapis.com/css?family=Gafata);
/*
Style for default layout
 */
/*
功能:使footer始终贴底
Sticky Footer Solution
by Steve Hatcher
 */
* {
    margin:0;
    padding:0;
    text-align:center;
}

/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

body,html{
    margin:0;
    padding:0;
    text-align:center;
    font-family:'Gafata',Helvetica,Arial,sans-serif,"Microsoft JhengHei";
    background:rgba(250,250,250,0.9);
}



a{
    color:#fefefe;
    text-decoration:none;
}


#footer_container {
    bottom:0px;
    height:60px;
    position:fixed;
    left:0;
    width:100%;
    font-size:10pt;
    color:#777;
    padding-top:40px;


    background: -moz-linear-gradient(top,  rgba(245,245,230,0) 0%, rgba(245,245,230,1) 38%, rgba(245,245,230,1) 40%, rgba(245,245,230,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,245,230,0)), color-stop(38%,rgba(245,245,230,1)), color-stop(40%,rgba(245,245,230,1)), color-stop(100%,rgba(245,245,230,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(245,245,230,0) 0%,rgba(245,245,230,1) 38%,rgba(245,245,230,1) 40%,rgba(245,245,230,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(245,245,230,0) 0%,rgba(245,245,230,1) 38%,rgba(245,245,230,1) 40%,rgba(245,245,230,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(245,245,230,0) 0%,rgba(245,245,230,1) 38%,rgba(245,245,230,1) 40%,rgba(245,245,230,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(245,245,230,0) 0%,rgba(245,245,230,1) 38%,rgba(245,245,230,1) 40%,rgba(245,245,230,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f5f5e6', endColorstr='#f5f5e6',GradientType=0 ); /* IE6-9 */

}
#footer{
    line-height:60px;
    margin:0,auto;
    width:100%;
    text-align:center;

}

#copy{
    padding-top:15px;;
    color:white;
    position:relative;
    clear:both;
}
/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/**********************************************************/

.info-container{
    width:160px;
    height: 180px;
    margin-top:30px;
    margin-left:auto;
    margin-right: auto;
    text-align: center;
}

.info-name{
    text-align: center;
    width: 300px;
    color:#333;
    font-size: 16px;
}
.info-name span{
}

.info-contact{
    clear: both;
    height:auto;
    width:260px;
    margin-top:20px;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    padding-top:10px;
}
.info-contact i{
  width:40px;
  height:40px;
  display: inline-block;
  line-height:40px;
  font-size:16pt;
  color:#fefefe;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  background:rgba(192, 57, 43,0.9) ;
}
.info-contact i:hover{
    background:rgba(192, 57, 43,0.7);
    cursor:pointer;
}

.info-avatar{

    width: 160px;
    height: 160px;
    background-image:url('./logo.jpg');
    box-shadow:
        inset 0 0 0 0 rgba(200,95,66, 0.4),
        inset 0 0 0 6px rgba(255,255,255,0.4),
        0 1px 3px rgba(0,0,0,0.7);
    border-radius: 80px;
    -webkit-border-radius: 80px;
    -moz-border-radius: 80px;
    background-size:160px 160px;
    background-repeat:no-repeat;

-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;


}
.info-avatar:hover{

    cursor: pointer;
    box-shadow:
        inset 0 0 0 0 rgba(200,95,66, 0.4),
        inset 0 0 0 2px rgba(255,255,255,0.4),
        0 1px 1px rgba(0,0,0,0.7);
    background-image:url('./logo-hover.jpg');
    background-size:160px 160px;
    background-repeat:no-repeat;

}


.section-container{
    clear: both;
    height:auto;
    width:400px;
    margin-top:10px;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
}
.section{
    float:left;
    width:100%;
    margin-top:20px;
}
.section-title{
    float:left;
    font-weight: bold;
    font-size: 20px;
    color:#333;
}
.section-body{
    width:100%;
    float:left;
}

.section-body .item-title{
    float:left;
    color:#fefefe;
    padding:8px 0px 8px 0px;
    width:120px;
    margin-left:10px;
    margin-top:10px;
}
.item-title:nth-child(1+3b){
    margin-left:0px;
}

.playlist{
    cursor:pointer;
}
.player{
    margin-top:10px;
    float:left;
    width:100%;
}