html { color: #000; background: #fff; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset,img { border: 0; }
address,caption,cite,code,dfn,em,strong,th,var,optgroup { font-style: inherit; font-weight: inherit; }
del,ins { text-decoration: none; }
li { list-style: none; }
caption,th { text-align: left; }
h1,h2,h3,h4,h5,h6,th { font-size: 100%; font-weight: normal; }
q:before,q:after { content: ''; }
abbr,acronym { border: 0; font-variant: normal; }
sup { vertical-align: baseline; }
sub { vertical-align: baseline; }
legend { color: #000; }
input,button,textarea,select,optgroup,option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; }
input,button,textarea,select { *font-size: 100%; }

body {
	font-family: Helvetica, Arial, "LiHei Pro", PMingLiU, sans-serif;
	font-size: 12px;
	line-height: 20px;
	color: #fff;
	-webkit-text-size-adjust: none;
}
input, textarea, select {
	font-family: Helvetica, Arial, "LiHei Pro", PMingLiU, sans-serif;
	font-size: 1.0em;
}
input { vertical-align: middle; }
iframe { overflow-x: hidden; }
a { color: #fff45c; text-decoration: underline; }
a:hover { color: #fff; text-decoration: none; }
.invisible { display: none; }
.clear {
	_height: 1%;
	overflow: hidden;
	_overflow: none;
}

#container {
	position: relative;
	width: 550px;
	height: 880px;
	background: #b6070d;
	margin: 0 auto;
}
#header {
	position: relative;
	height: 340px;
	background: url(images/header.jpg);
}
	#menu {
		position: absolute;
		bottom: 20px;
		right: 0;
		width: 210px;
	}
		#menu a {
			display: block;
			height: 30px;
		}
		#menu a.current { background: url(images/menu-current.jpg); }
		#menu a#menu-rule.current { background-position: 0 -30px; }
		#menu a#menu-index.current { background-position: 0 -60px; }
		#menu a#menu-join.current { background-position: 0 -90px; }
#main {
	height: 480px;
	overflow: hidden;
	background: url(images/main.jpg) no-repeat;
}
	.list {
		padding: 0 0 0 25px;
	}
	.grid {
		float: left;
		width: 240px;
		height: 210px;
		border: 1px solid #8e0005;
		margin: 0 10px 10px 0;
	}
		.post { position: relative; }
			.post a { display: block; width: 100%; height: 100%; }
			.post span {
				position: absolute;
				display: block-inline;
				color: #000;
				width: 120px;
				height: auto;
				font-size: 12px;
				line-height: 16px;
				border-right: 1px solid #333;
				border-bottom: 1px solid #333;
				background: #fff;
				padding: 5px;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
			}
		.grid .post {
			width: 240px;
			height: 160px;
		}
			.grid .post-1 { background: url(images/small-p1.jpg); }
			.grid .post-2 { background: url(images/small-p2.jpg); }
			.grid .post-3 { background: url(images/small-p3.jpg); }
			.grid .post-4 { background: url(images/small-p4.jpg); }
			.grid .post-5 { background: url(images/small-p5.jpg); }
			.grid .post-6 { background: url(images/small-p6.jpg); }
			.grid .post-7 { background: url(images/small-p7.jpg); }
			
			.post-1 span.word-1 { top: 5px; left: 5px; }
			.post-1 span.word-2 { bottom: 5px; right: 5px; }
			.post-2 span.word-1 { top: 5px; left: 5px; width: 48px; }
			.post-2 span.word-2 { bottom: 5px; right: 5px; width: 48px; }
			.post-3 span.word-1 { bottom: 5px; left: 5px; }
			.post-3 span.word-2 { top: 5px; right: 5px; width: 48px; }
			.post-4 span.word-1 { top: 5px; left: 5px; width: 96px; }
			.post-4 span.word-2 { bottom: 5px; right: 5px; width: 48px; }
			.post-5 span.word-1 { bottom: 5px; left: 5px; width: 96px; }
			.post-5 span.word-2 { top: 5px; right: 5px; }
			.post-6 span.word-1 { top: 10px; left: 10px; }
			.post-6 span.word-2 { bottom: 5px; right: 5px; width: 84px; }
			.post-7 span.word-1 { top: 5px; left: 5px; width: 84px; }
			.post-7 span.word-2 { top: 5px; right: 5px; width: 84px; }

		.grid-bottom {
			height: 40px;
			line-height: 20px;
			background: #8e0005;
			padding: 5px;
		}
			.grid-bottom ul {
				float: left;
				width: 120px;
			}
				.grid-bottom ul li {
					height: 20px;
					overflow: hidden;
				}
			.vote-button {
				float: right;
				display: block;
				width: 110px;
				height: 40px;
				text-align: center;
				font-size: 1.25em;
				color: #9c0409;
				text-decoration: none;
				background: url(images/vote-button.jpg);
			}
			.vote-button:hover { color: #9c0409; }
				.vote-button span {
					display: block;
					font-size: 0.8em;
					color: #000;
				}
		.page {
			height: 20px;
			line-height: 20px;
			text-align: center;
			background: #8e0005;
			padding: 8px 0;
		}
			.page a {
				color: #fff;
				margin: 0 3px;
			}
		#view {
			width: 500px;
			background: #8e0005;
		}
		#fancybox-content {
			border-color: #8e0005;
		}
.big {
	position: relative;
	width: 100%;
	height: 400px;
	background: #8e0005;
	padding: 20px 0 0;
}
	.big-grid .post {
		position: relative;
		width: 450px;
		height: 300px;
		margin: 0 auto;
	}
	.big-grid .post-1 { background: url(images/p1.jpg); }
	.big-grid .post-2 { background: url(images/p2.jpg); }
	.big-grid .post-3 { background: url(images/p3.jpg); }
	.big-grid .post-4 { background: url(images/p4.jpg); }
	.big-grid .post-5 { background: url(images/p5.jpg); }
	.big-grid .post-6 { background: url(images/p6.jpg); }
	.big-grid .post-7 { background: url(images/p7.jpg); }

	.big-grid .post span { width: 120px; }
	.big-grid .post-1 span.word-1 { top: 20px; left: 20px; }
	.big-grid .post-1 span.word-2 { bottom: 20px; right: 20px; }
	.big-grid .post-2 span.word-1 { top: 20px; left: 20px; }
	.big-grid .post-2 span.word-2 { bottom: 20px; right: 20px; }
	.big-grid .post-3 span.word-1 { bottom: 20px; left: 20px; }
	.big-grid .post-3 span.word-2 { top: 20px; right: 20px; }
	.big-grid .post-4 span.word-1 { top: 20px; left: 20px; }
	.big-grid .post-4 span.word-2 { bottom: 20px; right: 20px; }
	.big-grid .post-5 span.word-1 { bottom: 20px; left: 20px; }
	.big-grid .post-5 span.word-2 { top: 20px; right: 20px; }
	.big-grid .post-6 span.word-1 { top: 20px; left: 20px; }
	.big-grid .post-6 span.word-2 { bottom: 20px; right: 20px; }
	.big-grid .post-7 span.word-1 { top: 100px; left: 20px; }
	.big-grid .post-7 span.word-2 { top: 140px; right: 30px; }


	
	.big-grid .grid-bottom {
		width: 450px;
		margin: 10px auto 0;
	}
		.big-grid .grid-bottom ul {
			width: 330px;
		}
		.big-grid .grid-bottom ul li {
			display: inline;
			border-right: 1px solid #af070d;
			padding: 0 5px;
		}
		.share {
			float: left;
			width: 320px;
			padding: 2px 5px;
		}
			.share a { margin: 0 2px 0 0; }
.flip a {
	position: absolute;
	top: 160px;
	display: block;
	width: 14px;
	height: 40px;
}
	.flip a.prev {
		left: 0;
		background: url(images/flip-prev.jpg);
	}
	.flip a.next {
		right: 0;
		background: url(images/flip-next.jpg);
	}

.intro {}
	.intro-video {
		width: 360px;
		height: 270px;
		border: 1px solid #fff;
		background: #000;
		margin: 20px auto;
	}
	.intro-text {
		overflow: hidden;
		height: 150px;
		background: #8e0005;
		padding: 10px 20px;
	}
		.intro-text p { margin: 0; }
		.intro-text p img { vertical-align: top; }
		.intro-text p span { color: #fff45c; }
		.intro-text .left { float: left; width: 48%; }
		.intro-text .right { float: right; width: 48%; }
.rule {
	height: 450px;
	overflow: auto;
	background: #8e0005;
	padding: 15px;
}
	.rule h2 {
		font-family: 微軟正黑體, simhei;
		font-size: 1.5em;
		color: #fff200;
		margin: 5px 0;
	}
	.rule-text {
		margin: 5px 5px 15px;
	}
	ul.rule-text li {
		list-style-type: circle;
		margin: 0 0 0 1.5em;
	}
	ol.rule-text li {
		list-style-type: decimal;
		margin: 0 0 0 1.5em;
	}
.join {
	position: relative;
	height: 450px;
	overflow: hidden;
	background: #8e0005;
	padding: 30px 0 0;
}
	.grid-form {
		padding: 15px 50px 0;
	}
		.grid-form ul input {
			color: #fff;
			width: 435px;
			border: 0;
			border-bottom: 1px solid #fff;
			background: #8e0005;
		}
	.join .flip a.prev { left: 20px; }
	.join .flip a.next { right: 20px; }
	.submit {
		text-align: right;
		margin: 10px 0 0;
	}
		.send-button {
			width: 110px;
			height: 30px;
			font-size: 1.25em;
			color: #9c0409;
			border: 0;
			background: url(images/send-button.jpg);
		}

.blog-article {
	width: 480px;
	background: #8e0005;
	padding: 15px 0 0;
}
	.blog-article .grid-bottom {
		text-align: center;
		height: auto;
		padding: 0 0 15px;
	}
	
#footer {
	width: 550px;
	height: 60px;
	background: url(images/footer.jpg);
}
