@charset "gb2312";
/* CSS Document */
body,ul,div,img,h5,h4,h3,h2,h1,p,span,table,figure,i,li{ margin:0; padding:0}
a:link, a:visited {text-decoration: none; } 
img{ border:0}
ul{ list-style-type:none}
body{font-size:12px;background:#E3E3E5 url(../images/bg.jpg)  50% top scroll no-repeat;color:#5d5d5d; } 
.blank{ height:5px; overflow:hidden; width:100%; margin:auto; clear:both}
header{ padding:40px 0; width:1000px;  margin:auto; }
header h1{ font-size:36px; text-shadow:#fff 1px 1px 1px; font-family:'Arizonia', cursive;} /* google 在线字体 Arizonia */
header h1 a{color:#000;-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;}
header h1 a:hover{ padding-left:20px}
header p{margin:17px 0 0 0;text-shadow:#000 1px 1px 1px;color:#fff}
/* nav */
.nav{ margin: 40px auto 0; width:100%;} 
.nav ul{ width:700px;margin:auto; text-align:center; padding-left:100px}
.nav li	{ position: relative; display: inline-block;  margin-left: -50px; -webkit-transition: all 0.4s linear;  -moz-transition: all 0.4s linear; -o-transition: all 0.4s linear; -ms-transition: all 0.4s linear; transition: all 0.4s linear; float:left;}
.nav li a { display: inline-block; width: 100px; height: 100px; padding: 30px; border-radius: 50%; border-width: 8px; border-style: solid;float:left;}
.nav li:hover { z-index: 11; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1);-ms-transform: scale(1.1); transform: scale(1.1);}
.nav li:hover a { text-decoration: none;}
.nav li:hover span { -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -o-transition: all 0.4s linear; -ms-transition: all 0.4s linear; transition: all 0.4s linear; -webkit-animation: moveFromBottom 0.3s ease; -moz-animation: moveFromBottom 0.3s ease; -o-animation: moveFromBottom 0.3s ease; -ms-animation: moveFromBottom 0.3s ease; animation: moveFromBottom 0.3s ease;}
/* nth-child(1) 获取nav li 列表的第一条  */
.nav li:nth-child(1) a { color: #4d9683; text-shadow: 0 1px 0 #9de3cf; border-color: #549e89; background-color: #51c9a7;}
.nav li:nth-child(2) a { color: #be607e; text-shadow: 0 1px 0 #de8ba5; border-color: #e499b0; background-color: #e67b9c;}
.nav li:nth-child(3) a { color: #5e9eb4; text-shadow: 0 1px 0 #adddec; border-color: #a2cfde; background-color: #7ec9e3;}
.nav li:nth-child(4) a { color: #ba9d5e; text-shadow: 0 1px 0 #f5e0ad; border-color: #dcc999; background-color: #f0cd78;}
.nav li:nth-child(5) a { color: #b468a2; text-shadow: 0 1px 0 #e8acd8; border-color: #d8abcd; background-color: #dd91cb;}
.nav li:nth-child(1):hover a { color: #0f775c; text-shadow: 0 1px 0 #81e6c9; border-color: #0a8462; background-color: #00c18c;}
.nav li:nth-child(2):hover a { color: #b12a55; text-shadow: 0 1px 0 #ff95b7; border-color: #ba335c; background-color: #ea5180;}
.nav li:nth-child(3):hover a { color: #2883a2; text-shadow: 0 1px 0 #9cdef2; border-color: #4397b3; background-color: #55c1e5;}
.nav li:nth-child(4):hover a { color: #ab8228; text-shadow: 0 1px 0 #ffe199; border-color: #b08f3e; background-color: #f8c64d;}
.nav li:nth-child(5):hover a { color: #a33689; text-shadow: 0 1px 0 #ec97d6; border-color: #b7569f; background-color: #dd70c3;}
.nav span { display: block; line-height:100px; font-size: 24px; font-style: normal;}
.nav span:before { display: block;}
/* 动画效果 从底部开始平滑过渡 translate Y轴平移 scale 缩小0.5倍 */
@-webkit-keyframes moveFromBottom {
	 from {  -webkit-transform: translateY(120%) scale(0.5) ; opacity: 0; } to { -webkit-transform: translateY(0%) scale(1); opacity: 1;}
}
@-moz-keyframes moveFromBottom {
     from {  -webkit-transform: translateY(120%) scale(0.5) ; opacity: 0; } to { -webkit-transform: translateY(0%) scale(1); opacity: 1;}
}
@-ms-keyframes moveFromBottom {
     from {  -webkit-transform: translateY(120%) scale(0.5) ; opacity: 0; } to { -webkit-transform: translateY(0%) scale(1); opacity: 1;}
}
@-o-keyframes moveFromBottom {
     from {  -webkit-transform: translateY(120%) scale(0.5) ; opacity: 0; } to { -webkit-transform: translateY(0%) scale(1); opacity: 1;}
}
@keyframes moveFromBottom {
     from {  -webkit-transform: translateY(120%) scale(0.5) ; opacity: 0; } to { -webkit-transform: translateY(0%) scale(1); opacity: 1;}
}

/* article */
article{ width:1000px; margin:auto;overflow:hidden; clear:both; padding:30px 0}

/* aside */
.aside{ overflow:hidden; width:300px; float:left}
.aside ul{  margin:10px 0;}
.aside ul img{ width:290px; border-radius:50%; border:#FFF 4px solid;-webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -o-transition: all 0.4s linear; -ms-transition: all 0.4s linear; transition: all 0.4s linear; opacity:0.8}
.aside ul img:hover{border-radius:0;opacity:1}
.arrow_box {position: relative;background: #88b7d5;border: 4px solid #fff; width:260px; height:100px; color:#fff;line-height:1.9; padding:15px; box-shadow:#ccc 2px 3px 4px }
.arrow_box:after, .arrow_box:before {bottom: 100%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;}
.arrow_box:after {border-color: rgba(136, 183, 213, 0);border-bottom-color: #88b7d5;border-width: 20px;left: 50%;margin-left: -20px;}
.arrow_box:before {border-color: rgba(194, 225, 245, 0);border-bottom-color: #fff;border-width: 26px;left: 50%;margin-left: -26px;}
/* bloglist index */
.bloglist{ width:670px; overflow:hidden; float:right}
.bloglist h2{ background: url(../images/blogbgs.png) no-repeat right; line-height:29px; height:29px; font-size:14px; color:#3b3b3b; padding:10px 0 10px 0;}
.bloglist h2 a{color: #333; display:block;-webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -o-transition: all 0.4s linear; -ms-transition: all 0.4s linear; transition: all 0.4s linear;}
.bloglist h2 a:hover{cursor:pointer; text-shadow:#fff 1px 1px 1px;padding-left:20px}
.bloglist ul{ line-height:24px; padding:10px; margin-bottom:10px; background:rgba(255,255,255,0.5);  border-radius:10px}

/* footer */
#copright{line-height:40px; height:40px; text-align:center; width:100%;color:#fff; font-family:'Arizonia', cursive; font-size:20px; text-shadow:#999 1px 1px 1px}
#copright a{color:#fff}