body, p, ul, li { padding:0; margin:0; font-size:15px; line-height:150%; font-family: "Helvetica Neue", Roboto, "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif; color:#FFFFFF;}
ul, li { list-style:none; }
img { border:none; vertical-align:middle; }
a { text-decoration:none; }
a:hover { text-decoration:none; }

/*Scrollbar*/
::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; }
::-webkit-scrollbar {width: 6px; background-color: #F5F5F5;}
::-webkit-scrollbar-thumb {background-color: #000000;}

/*kangzhan maps*/
#kangzhan p a { color:#FFFFFF; text-decoration:none; }
#kangzhan p a:hover { text-decoration:underline; }

/*CSS*/
#main {background: rgba(0, 0, 0, 0.85); min-width: 320px;}
#content {width: 912px;margin:0 auto; padding-top:70px;}
.title { margin-top:30px; margin-bottom:30px; font-size:18px;}
.msgl { display:block; width:500px;}
.leftup { background:url(ua.png);height:20px; width:20px; margin-left:20px; margin-top:-10px;}
.leftbox { background-color:#0098ff;}
.msgtext { padding:8px;}
.msgtime { margin-left:390px;}
.msgr { display:block; margin-top:30px; margin-left:412px; width:500px;}
.rightdown { background:url(ub.png);height:20px; width:20px; margin-left:460px;}
.rightbox { background-color:#034888;}
.bookshelf { width:912px; height:592px;background-image: url('bookshelf.jpg'); margin-top:5px;}
.bookshelf img { -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 3px 4px #000; border:1px solid transparent; }
.bookshelf img:hover { border:1px #f88e30 solid; }
.bookshelf table { width:912px; border: 0px; height:570px;}
.bookshelf table tr { height:185px;}
.bookshelf table tr td { width:152px; text-align:center; vertical-align:bottom;}
.bookshelf table tr td div { text-align:center;}

#metro {padding-top: 85px; height:384px; margin-left: 66px;position:relative; z-index:1;}
#footer { text-align:center; margin-top:50px;margin-bottom: 30px;}

#topnav {background:#034888; font-size: 12px; text-align: center;}
#topnav a {color:#d54d34; font-weight:bold; }
#topname { width: 200px; height:42px; margin-right: 66px;float:right;}
#topname div { float:right; font-size:18px; color:#FFFFFF; /* margin-left:5px; */ text-align:right; }
#topname div span { font-size: 14px; line-height: 42px;margin-left: 10px;}
#topname div img { border-radius:21px; }

#preloader { background-image: url('sina2.png'); width: 0px; height: 0px; display: inline;}
#preloader1 { background-image: url('pan2.png'); width: 0px; height: 0px; display: inline;}

#sina { position:absolute; width:120px; height:120px; background-color:#0098ff;}
#sina a { position:absolute; width:120px; height:120px; background:url('sina1.png');}
#sina a:hover { position:absolute; width:120px; height:120px; background:url('sina2.png');}
#blog  { position:absolute; margin-left:132px; width:252px; height:120px; background:url('blog.png');}
#blog a { position:absolute; width:252px; height:120px;}
#blog p { font-size:14px; margin-top: -17px; margin-left: 10px; margin-right: 10px;}
#blog p span { font-size:12px;}
#wedding  { position:absolute; margin-left: 132px; margin-top: 132px;width:120px; height:120px; background-color:#e51400;}
#wedding a { position:absolute; width:120px; height:120px; background:url('wedding.png');}
#maps  { position:absolute; margin-left: 396px; width:120px; height:120px; background-color:#034888;}
#maps a { position:absolute; width:120px; height:120px; background:url('maps.png');}
#map1, #map2 { width:100%; height:600px}
#calendar { position:absolute; margin-left: 528px; width:252px; height:120px; background:url('calendar.png');}
#ctext { line-height:100%; font-weight:lighter; position:absolute; right: 10px; top: 7px; z-index:10;}
#ctext span {font-size:50px; line-height:125%; float:right; }
#books  { position:absolute; margin-top:132px; width:120px; height:120px; background-color:#f4b300;}
#books a { position:absolute; width:120px; height:120px; background:url('bookshelf.png');}
#picasa { position:absolute; height:120px; width:252px; margin-left:264px; margin-top:132px; overflow:hidden;}
#ptext { font-size:16px; position:absolute; left:3px; top:100px; z-index:30;}
#gplus { position:absolute; width:120px; height:120px; margin-top:132px; margin-left: 528px;background-color: #008A00;}
#gplus a { position:absolute; width:120px; height:120px; background:url('g.png');}
#onedrive { position:absolute; width:120px; height:120px; margin-top:132px; margin-left: 660px; background-color:#034888;}
#onedrive a { position:absolute; width:120px; height:120px; background:url('skyd1.png');}
#amazon { position:absolute; margin-top:264px; width:252px; height:120px; background-color:#FFFFFF;}
#amazon a { position:absolute; width:252px; height:120px; background:url('amazon.png');}
#panoramio  { position:absolute; margin-top:264px; margin-left: 264px; width:120px; height:120px;}
#panoramio a { position:absolute; width:120px; height:120px; background:url('pan1.png');}
#panoramio a:hover { position:absolute; width:120px; height:120px; background:url('pan2.png');}
#music { position:absolute; margin-left: 396px; margin-top:264px; width:252px; height:120px; background:url('music.png');}
#mtext { font-size:14px; line-height:140%; position:absolute; left:84px; top:6px; z-index:10;}
#me { position:absolute; height:120px; width:120px; margin-top:264px; margin-left: 660px; overflow:hidden;}

/*Responsive*/
@media screen and (max-width: 820px) {
    #content {width: 384px;}
	#metro { padding-top: 15px; height: 648px; margin-left:0px;}
	#topname { display: none;}
	#map1, #map2 { height:240px}
	
    #maps  { margin-top:132px; margin-left:0px;}
    #calendar { margin-top:132px; margin-left: 132px;}
	
    #books  { display: none;}
	#picasa { margin-top:264px; margin-left:0px;}    
	#gplus { margin-top:264px; margin-left: 264px;}
	
    #wedding  { margin-left:132px; margin-top:396px;}
	#onedrive { margin-top:396px; margin-left:264px;}	
	#amazon { display: none;}
	#panoramio  { margin-top:396px; margin-left:0px;}
	
	#music { margin-top:528px; margin-left:0px;}
	#me { margin-top:528px; margin-left:264px;}

	.msgl { width:320px;}
	.msgtime { margin-left:215px;}
	.msgr { margin-left:64px; width:320px;}
	.rightdown { margin-left:280px;}
}

@media screen and (max-width: 419px) {
	#content {width: 252px; padding-top: 30px;}
	#metro { padding-top:0px; height:528px;}
	#topname { display: none;}
	#footer {margin-top:15px; margin-bottom:15px;}
	#map1, #map2 { height:160px}
	
    #sina { margin-top:132px;}
	#blog  { margin-left:0px;}
	#maps  { display:none;}
    #calendar { display:none;}
	
    #books  { display:none;}
    #panoramio  { display:none;}
	#gplus { display:none;}
	
	#picasa { margin-top:264px;}
	#onedrive { margin-top:132px; margin-left:132px;}
	
	#amazon { display:none;}
	#wedding  { margin-top:396px; margin-left:0px;}
	
	#music { display:none;}
	#me { margin-top:396px; margin-left:132px;}
	
	.msgl { width:220px;}
	.msgtime { margin-left:115px;}
	.msgr { margin-left:32px; width:220px;}
	.rightdown { margin-left:180px;}
}