stylesheet.css

body {
  margin-top: 1.0em;
  background: #e1e1e1 repeat url(img/body_bg.png) 0 0;
  background-attachment: fixed;
  font-family: Helvetica, Arial,微软雅黑,  FreeSans, san-serif;
  text-shadow: 1px 1px 0px #FFFFFF;
  color:#202d2f;
}

p{margin:0.5em 0}
a {
  color:#2266b4;
  text-decoration:none;
}
a:hover {
  color:#ffb000;
  text-decoration:none;
}
strong{
  font-weight:bolder;
}

h4 {
  margin:.2em;
}

.hidden{
  display:none;
}
.clear{
  clear:both;
}

#content{
  padding:0 7em;
  width:auto;
  height:auto;
  z-index:1;
}
#nav {
  position:absolute;
  top:0px;
  left:20px;
}

#nav ul, .feed ul{
  padding:0;
  list-style-type:none;
}

#nav li, .feed li {
  list-style: none outside none;
}

/* round navigation button */
#nav li {
  line-height:1.2em;
  background:rgb(36,87,176);
  background:rgba(36,87,176,0.7);
  -pie-background:rgba(36,87,176,0.7);
  border-radius:20px 20px 20px 20px;
  -webkit-border-radius:20px 20px 20px 20px;
  -moz-border-radius:20px 20px 20px 20px;
  -o-border-radius:20px 20px 20px 20px;
  -ms-border-radius:20px 20px 20px 20px;
  margin: 1em 0 1em 0;
  
  behavior: url(PIE.htc);
}

#nav li.hover {
  background:rgb(255,168,0);
  background:rgba(255,168,0,0.8);
  -pie-background:rgba(255,168,0,0.8);
  behavior: url(PIE.htc);
}

#nav .mail {
  background: no-repeat url(img/mail.png) 0 0;
}

#nav .bbs {
  background: no-repeat url(img/bbs.png) 0 0;
}
#nav .mirror {
  background: no-repeat url(img/ftp.png) 0 0;
}
#nav .wiki {
  background: no-repeat url(img/wiki.png) 0 0;
}
#nav .project {
  background: no-repeat url(img/github.png) 0 0;
}
#nav .rt {
  background: no-repeat url(img/twitter.png) 0 0;
}
#nav .book {
  background: no-repeat url(img/book.png) 0 0;
}
#nav .xdlinux {
  background: no-repeat url(img/sun.png) 0 0;
}

@-webkit-keyframes shine {
  0% {
    box-shadow: 0 0 16px #ffa000;
  }
  100% {
    box-shadow: 0 0 16px #ffa000, 0 0 26px #ffa000;
  }
}
@-moz-keyframes shine {
  0% {
    box-shadow: 0 0 16px #ffa000;
  }
  100% {
    box-shadow: 0 0 16px #ffa000, 0 0 26px #ffa000;
  }
}
@-ms-keyframes shine {
  0% {
    box-shadow: 0 0 16px #ffa000;
  }
  100% {
    box-shadow: 0 0 16px #ffa000, 0 0 26px #ffa000;
  }
}
@-o-keyframes shine {
  0% {
    box-shadow: 0 0 16px #ffa000;
  }
  100% {
    box-shadow: 0 0 16px #ffa000, 0 0 26px #ffa000;
  }
}

#nav .pulse {
	-webkit-animation-name: shine;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-webkit-animation-timing-function: ease-in-out;	
	
  -moz-animation-name: shine;
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
	-moz-animation-timing-function: ease-in-out;	
  
  -o-animation-name: shine;
	-o-animation-duration: 1s;
	-o-animation-iteration-count: infinite;
	-o-animation-direction: alternate;
	-o-animation-timing-function: ease-in-out;	
  
  -ms-animation-name: shine;
	-ms-animation-duration: 1s;
	-ms-animation-iteration-count: infinite;
	-ms-animation-direction: alternate;
	-ms-animation-timing-function: ease-in-out;	
  -pie-box-shadow: 0 0 16px #ffa000;
  behavior: url(PIE.htc);
}

#nav a {
  position:relative;
  display:block;
  width:40px;
  height:40px;
}

/* navigation tip shows only when button is on mouse hovered */
#nav a span {
  display:block;
  opacity:0;
  width:0px;
  height:0px;
  position:absolute;
  top:10px;
  left:50px;
  cursor:pointer;
  padding-left:4px;
  border-radius:10px 10px 10px 10px;
  -webkit-border-radius:10px 10px 10px 10px;
  -moz-border-radius:10px 10px 10px 10px;
  -o-border-radius:10px 10px 10px 10px;
  -ms-border-radius:10px 10px 10px 10px;
  -webkit-transition:all 0.5s ease-in-out;
  -moz-transition:all 0.5s ease-in-out;
  -o-transition:all 0.5s ease-in-out;
  -ms-transition:all 0.5s ease-in-out;
  transition:all 0.5s ease-in-out;	
}

#nav a span div {
  display:none;
}
#nav li.hover a {
  color:#888;
  text-shadow: 1px 1px 1px #ffcd00;
}

#nav a:hover span {
  behavior: url(PIE.htc);
  background:none;
  background:rgba(255,255,255,0.6);
  opacity:1;
  width:5em;
  height:1.2em;
  top:10px;
  left:50px;
}

#nav li.hover a span div {
  display:block;
  width:5em;
}

.feed {
  float:left;
  width:20em;
  min-height:140px;
  margin-right:1em;
}
.items {
  margin:0 0;
}
.feed h4 a {
color:#ef7715;
text-decoration:none;
}

.loader {
  text-align: center;
}

.items li {
  white-space:nowrap;
  overflow:hidden;
}
.items span {
  overflow:hidden;
}
.items .title {
  float:left;
  width: 15em;
}
.items .date {
  float:right;
}