style.css

*{
	margin:0 auto;
	padding: 0;
}
a{
	text-decoration: none;
	color: #666;
}
li{
	list-style: none;
}
::-webkit-scrollbar {
    width: 4px;
}
::-webkit-scrollbar-button {
    background-color: #aaa;
}
::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #eee;
}
::-webkit-scrollbar-track {
    background-color: #aaa;
}
body{
	width: 100%;
	min-width: 1024px;
	height: 100%;
	color: #666;
    font: 13px/2.2 "Century Gothic","Microsoft yahei";
    transition: background .5s;
    background: #ccc;
}
.popup{
	height: 5px;
	background: #eee;
}
.content{
	width: 960px;
	height: 100%;
	height: 1000px;	
}
.bgmusic{
	width: 100%;
	height: 100px;
	margin-top: 15px;
	position: fixed;
	z-index: 1;
}
.portraitorscul-pture{ 
	width: 100px;
	height:100px;
	line-height: 96px;
	text-align:center; 
	float: left;
	background: #fff;
}
.portraitorscul-pture img{
	width: 80px;
	height: 80px;
	vertical-align:middle;
	-webkit-transition: -webkit-transform 0.4s ease-out;
	-moz-transition: -moz-transform 0.4s ease-out;
	transition: transform 0.4s ease-out;
}
.portraitorscul-pture a:hover img{
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	transform: rotate(360deg);
}

.music-content{
	width: 720px;
	height: 80px;
	padding: 10px;
	margin-left: 10px;
	float: left;
	background: #fff;
}
.music-content h4{
	font-size: 15px;
	margin-top: 10px;
	line-height: 15px;
    font-weight: 400;
    text-decoration: none;
    color: #aaa;
    float: left;
}
.music-time{
	margin-top: 12px;
	font-size: 14px;
	line-height: 14px;
	float: right;
}
.progress-bar{
	width: 720px;
	height: 8px;
	margin-top: 38px;
	clear: both;
	background: #ddd;
	
}
.progress-bar-pass{
	    width: 99%;
        height: 100%;
        border-radius: 1px;
        float: left; 
        background: #aaa;
        animation: loader 1s linear infinite;
        -moz-animation: loader 1s linear infinite;
        -webkit-animation: loader 1s linear infinite;
        -o-animation: loader 1s linear infinite;    
}
.progress-bar:hover .progress-bar-pass{
        animation-play-state: paused;
        -moz-animation-play-state: paused;
        -o-animation-play-state: paused;
        -webkit-animation-play-state: paused;
}
@keyframes loader { from { width: 0%; } to { width: 100%; } } 
@-moz-keyframes loader { from { width: 0%; } to { width: 100%; } } 
@-webkit-keyframes loader { from { width: 0%; } to { width: 100%; } } 
@-o-keyframes loader { from { width: 0%; } to { width: 100%; } }
.progress-bar-tag{
	width: 94px;
	height: 28px;
	line-height:28px; 
	border-radius: 2px;
	margin: 10px 10px 0 0;
	float: left;
	text-align: center;
	background: #ddd;
	
}

.progress-bar-tag:last-child{
	margin-right: 0px;
}
.music-control{
	width: 80px;
	height: 80px;
	margin-left: 10px;
	padding: 10px 10px;
	float: left;
	background: #fff;
}
.music-control-inner{
	width: 80px;
	height: 73px;
	padding-top: 7px;
	background: #eee;
}
.stopbtn{
	width: 60px;
	height: 30px;
	line-height: 30px;
	margin-bottom: 3px;
	text-align: center;
	background: #ddd;
}
.stopbtn i{
	width: 14px;
	height: 11px;
	display: inline-block;
	background: url(images/musiccontrol.png) no-repeat;
}

.prebtn{
	width: 28px;
	height: 17px;
	line-height: 22px;
	margin-left: 10px;
	text-align: center;
	display: inline-block;
	background: #ddd;
}
.prebtn i{
	width: 14px;
	height: 12px;
	display: inline-block;
	background: url(images/musiccontrol.png) no-repeat 0px -13px;
}
.nextbtn{
	width: 28px;
	height: 17px;
	line-height: 22px;
	text-align: center;
	display: inline-block;
	background: #ddd;
	
}
.nextbtn i{
	width: 14px;
	height: 11px;
	display: inline-block;
	background: url(images/musiccontrol.png) no-repeat 0px -12px;
	-moz-transform:rotate(180deg); 
	-webkit-transform:rotate(180deg);
	transform:rotate(180deg);
}
.volbtn{
	width: 60px;
	height: 8px;
	margin-top: -4px;
	background: #ddd;
}
.volbtn i{
	width: 50%;
	height: 100%;
	display: inline-block;
	position: relative;
	top: -11px;
	background: #bbb;
}
.container{
	width: 620px;
	height: 900px;
	top: 125px;
	position: relative;
	float: left;
	
}
.post-main{
	width: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
	background: #eee;
}
.post-main h2{
	line-height: 40px;
	text-align: center;
}
.article-img{
	width: 560px;
	height: 410px;
	line-height: 410px;
	border-radius: 3px;
	text-align: center;
	background: #e1e1e1;
	
}
.post-main img{
	width: 98%;
	border-radius: 3px;
	vertical-align: middle;
}
 .article-img:hover ,.progress-bar-tag:hover{
	background:  #878787;
	color: #fff;
    opacity: .6;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.article-content{
	margin-top: 20px;
	width: 560px;
}
.address{
	width: 540px;
	margin-top: 20px;
	padding: 10px;
	background: #e1e1e1;
}
.address p{
	line-height: 30px;
}
.post-meta{
	width: 560px;
	margin-top: 10px;
	padding: 10px 30px;
	position: relative;
	float: left;
	background: #eee;
}
.share{
	width: 600px;
	height: 30px;
	padding: 10px;
	margin-top: 10px;
	float: left;
	position: relative;
	background: #eee;
}
.other-acticle{
	width: 600px;
	height: 250px;
	padding: 0px 5px 10px 15px;
	margin-top: 10px;
	float: left;
	position: relative;
	background: #eee;
}
.other-acticle li{
	width: 110px;
	height: 120px;
	margin-right: 10px;
	margin-top: 10px;
	float: left;
}
.other-acticle li span{
	width: 100%;
	height: 23px;
	top: -32px;
	display: inline-block;
	text-align: center;
	position: relative;
	color: #fff;
	background: #a4a4a4;
	opacity: 0.5;
}
.nav-main{
	width: 330px;
	height: 900px;
	top: 125px;
	position: relative;
	float: right;
}
.nav-search{
	width: 310px;
	height: 30px;
	padding: 10px;
	background: #eee;
}
.search-box{
	width: 180px;
	height: 30px;
	border-radius: 3px;
	float: left;
	background: #ccc;
}
.search-box input{
	width: 140px;
	height: 20px;
	padding: 5px;
	line-height: 20px;
	font-size: 12px;
	outline: 0;
	border: 0;
	float: left;
	color: #8E8E8E;
	background-color: #ddd;
    transition: background-color .5s;
	-webkit-writing-mode: horizontal-tb;
}
.search-box span{
	width: 30px;
	height: 30px;
	line-height: 34px;
	float: left;
	text-align: center;
	display: inline-block;
}
.search-box span{
	vertical-align: middle;
}
.search-tags{
	width: 55px;
	height: 30px;
	border-radius: 3px;
	margin-left: 10px;
	text-align: center;
	display: inline-block;
	float: left;
	background: #ddd;
}
.side-bar-post-list{
	width: 310px;
	height: 370px;
	padding: 10px;
	margin-top: 10px;
	background: #eee;
	
}

.side-bar-post-list ul li{
	
	line-height: 28px;
}
.side-bar-post-list ul li span{
	width: 20px;
	height: 20px;
	line-height: 20px;
	margin-right: 6px;
	text-align: center;
	display: inline-block;
	background: #ddd;
}
.locale-time{
	width: 100%;
	height: 40px;
	line-height: 40px;
	margin-top: 10px;
	text-align: center;
	background: #eee;
}
.kalendar{
	width: 100%;
	height: 200px;
	margin-top: 10px;
	background: #eee;
}
.kalendar th,.kalendar td{
	width: 45px;
	height: 25px;
	margin-left: 2px;
	text-align: center;
}
.kalendar th{
	background: #ddd;
}
.other{
	width: 100%;
	height: 300px;
	margin-top: 10px;
	background: #eee;
}