@charset "utf-8";

/* Helper ----------------------------------- */
.fix-float::after {
	content: "";
	display: block;
	clear: both;
}

/* Base ------------------------------- */
*{ padding:0; margin:0; box-sizing: border-box;}
html *{ position: relative;}
ul, ol{ list-style-type: none;}
body{ background: #eee; font:15px/1 Arial,'微軟正黑體','細明體'; letter-spacing: 1px;}
a{ text-decoration: none;}
a:hover{ text-decoration: underline;}
img{ border:0;}

/* Layout -------------------------------------- */
#Wrap {
	width: 960px;
	margin: 1em auto;
}

#Header, #Footer {
	background-color: #f6f6f6;
	padding: 1em;
}

#Header {
	height: 55px;
}

#Header, #Main {
	margin-bottom: 1em;
}

#Content {
	width: 70%;
	float: left;
	padding: 15px;
}

#Sidebar{
	width: 30%;
	float: right;
	padding: 15px;
}

.l-flip #Content{
	float: right;
}

.l-flip #Sidebar{
	float: left;
}

/* Module --------------------------------- */
.card {
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 3px;
}

/* Header ------------------------------------ */
.site {
	position: absolute;
	top: -10px;
}

.site-name, .site-desc {
	display: inline-block;
	vertical-align: middle;
}

.site-name a {
	display: block;
	width: 65px;
	height: 79px;
	background-image: url('../images/logo.png');
	text-indent: -9999px;
}

.site-name a:hover {
	background-position: 0 -76px;
}

.site-desc {
	width: 235px;
	font-size: 13px;
	font-weight: 100;
	color:#999;
	line-height: 1.3;
}

/* Content ---------------------------------------- */
.post-title {
	margin-bottom: .5em;
	font-size: 30px;
	font-weight: 100;
}

.post-content p, .post-content img {
	margin-bottom: 1.5em;
}

.post-content p {
	line-height: 1.6;
}

.post-content h2 {
	margin-bottom: .5em;
	font-size: 22px;
	font-weight: 100;
	color: #e36c09;
}

.post-content img {
	max-width: 100%;
	padding: .5em;
	box-sizing: border-box;
	background-color:#f6f6f6;
	border: 1px solid #e6e6e6;
}

/* Sidebar --------------------------------- */
.box{ margin-bottom: 1em;}
.box-hdr{ border-bottom:solid 2px #ddd; margin-bottom: 1em;}
.boxTitle{ font-size: 18px; font-weight: 100; border-bottom: solid 2px #09c; display: inline-block; padding-bottom: .3em; top:2px;}
.list1 li{ margin-top: 10px; border-top: solid 1px #ddd; padding-top: 10px;}
.list1 li:first-child{ margin-top: 0; padding-top: 0; border: 0;}
.list1 li > a{ float:left;}
.list1-con{ margin-left:70px; height: 60px;}
.list1-con a{ font-size: 14px; line-height: 1.4; height: 40px; overflow: hidden; display: inline-block; color:#09c;}
.list1-con a:hover{ text-decoration: none; color: #000;}
.views .fa{ color:#666; margin-left: 3px;}
.list1-con .views{ font-size: 13px; color:#999; text-align: right;}
.list2 a{ display: block; margin-top: 1em; border:solid 1px #ddd;}
.list2 a:hover{ border-color: #09c;}
.list2 img{ width: 100%; height: auto; display: block;}
.msg{ line-height: 1.5;}

/* Footer ----------------------------------- */
.cr{ font-size: 12px;}

/* Animation --------------------------------------- */
.loading{ height: 20px; left:50%; margin-left: -10px;}
.loading span{ border-radius:50%; width:20px; height:20px; border:solid 1px #ccc; position:absolute;}
.line1{
	border-color:#06F;
	-webkit-animation:r1 2s infinite linear;}
.line2{
	border-color:#F0F;
	-webkit-animation:r2 1.5s infinite linear;}
.line3{
	border-color:#FF0;
	-webkit-animation:r3 .8s infinite linear;}

@-webkit-keyframes r1{
	from{ -webkit-transform:rotateX(0) rotateY(0)}
	to{  -webkit-transform:rotateX(360deg) rotateY(360deg)}
}
@-webkit-keyframes r2{
	from{ -webkit-transform:rotateX(0)}
	to{  -webkit-transform:rotateX(360deg)}
}
@-webkit-keyframes r3{
	from{ -webkit-transform:rotateY(0)}
	to{  -webkit-transform:rotateY(360deg)}
}