@charset "UTF-8";
/* CSS Document */

html {
	background-image:url(../img/brick.gif);
	background-repeat:repeat;
	background-color:white;
	font-family:STKaiti, KaiTi, KaiTi_GB2312;
	color:#600;
}

#wrapper {
	width:800px;
	margin:auto;
}

.navi {
	height:240px;
	width:100%;
}

#topbanner1 {
	background-image:url(../img/title.jpg);
	width:800px;
	height:200px;
	margin-top:-10px;
}

#topbanner2 {
	background-image:url(../img/title2.jpg);
	width:800px;
	height:200px;
	margin-top:-10px;
}

#topbanner3 {
	background-image:url(../img/title3.jpg);
	width:800px;
	height:200px;
	margin-top:-10px;
}

.navitem {
	background-image:url(../img/plate.png);
	width: 160px;
	height:50px;
	float:left;
	margin-top:3px;
}

.navi a {
	color:white;
}

.navi a:hover {
	color:#FFFF33;
}

#main {
	margin-top:15px;
	padding:5px;
	height:auto;
	background-color:white;
	min-height:600px;
}

#intro {
	margin:15px;
}
	
#intro img {
	float:left;
}

.vpic, .hpic{
	float:left;
	position:relative;
}
#tileset {
	margin-left:16px;
	margin-top:10px;
}

.tile {
	width:180px;
	height:220px;
	float:left;
	margin-right:10px;
	margin-bottom:16px;
	padding-top:2px;
	border:1px solid #CCC;
}

.tile:hover {
	box-shadow:2px 2px 3px #ccc;
}
.tile-title {
	text-align:center;
	margin-top:0px;
}


#illustrate {
	float:left;
	width:280px;
	height:!important;
	margin:25px;
}

#illustrate img {
	width:100%;
}

#player {
	float:right;
	width:400px;
	height:!important;
	margin:25px;
}

#desc {
	float:right;
	width:400px;
	margin:25px;
	
}

.related {
	clear:both;
}

.related p {
	margin:auto;
}

.relatedsub {
	float:left;
	height:auto;
	width:auto;
	margin-left:25px;
	margin-top:5px;
	padding:5px;
	border:1px solid black;
	background-color:#CCFFFF;
}

.relatedsub:hover {
	background-color:#00FFFF;
}

.vpic {
	background-color:#00FFFF;
}

.hpic {
	background-color:#FCF;
}
.vpic img, .hpic img {
	display:none;
}

.vpic > * {
  vertical-align: bottom;
}

.hpic > * {
  vertical-align: bottom;
}

.picsub {
	background-color:#CFF;
	opacity:0.6;
	font-size:1.2em;
	width:100%;
	display:none;
}

.picsub p {
	margin-left:10px;
}

.vpic:hover .picsub {
	display:block;
	position:absolute;
	bottom:0;
}

.hpic:hover .picsub {
	display:block;
	position:absolute;
	bottom:0;
}


#sunyatsen {
	width:320px;
	height:480px;
	position:relative;
	left:0px;
	top:10px;
	background-image:url(../pic/SunYatSen.jpg);
	background-size: 100%;
}


#wongjim {
	width:450px;
	height:300px;
	position:relative;
	left:20px;
	top:0px;
	background-image:url(../pic/WongJim.jpg);
	background-size: 100%;
}


#wongjunying {
	width:200px;
	height:300px;
	position:relative;	
	left:40px;
	top:20px;
	background-image:url(../pic/WongJunYing.jpg);
	background-size: 100%;
}

#laichilau {
	width:180px;
	height:270px;
	position:relative;
	left:80px;
	top:10px;
	background-image:url(../pic/LaiChiLau.jpg);
	background-size: 100%;
}

#cheungyugai {
	width:240px;
	height:360px;
	position:relative;
	left:-520px;
	top:-60px;
	background-image:url(../pic/CheungYuGai.jpg);
	background-size: 100%;
}

#cheunggokwing {
	width:360px;
	height:240px;
	position:relative;
	left:260px;
	top:-300px;
	background-image:url(../pic/CheungGokWing.jpg);
	background-size: 100%;
}


#DaiYiuTing {
	width:160px;
	height:240px;
	position:relative;
	left:280px;
	top:-320px;
	background-image:url(../pic/DaiYiuTing.jpg);
	background-size: 100%;
}

#leungciuwai {
	width:330px;
	height:220px;
	position:relative;
	left:10px;
	top:-270px;
	background-image:url(../pic/LeungCiuWai.jpg);
	background-size: 100%;
}

#lumjik {
	width:200px;
	height:300px;
	position:relative;
	left:30px;
	top:-290px;
	background-image:url(../pic/LumJik.jpg);
	background-size: 100%;
}


#ipman {
	width:200px;
	height:300px;
	position:relative;
	left:50px;
	top:-280px;
	background-image:url(../pic/IpMan.jpg);
	background-size: 100%;
}


#chausingci {
	width:360px;
	height:240px;
	position:relative;
	left:240px;
	top:-250px;
	background-image:url(../pic/ChauSingCi.jpg);
	background-size: 100%;
}


#pangwaigok {
	width:200px;
	height:300px;
	position:relative;
	left:-340px;
	top:-330px;
	background-image:url(../pic/PangWaiGok.jpg);
	background-size: 100%;
}

#leekasing {
	width:160px;
	height:240px;
	position:relative;
	left:60px;
	top:-240px;
	background-image:url(../pic/LeeKaSing.jpg);
	background-size: 100%;
}



#footer {
	text-align:center;
	color:white;
}