/**
 * 容器
 */
body{ padding-bottom:20px; }
.wrapper {
	background-color: #2d3e50;
	margin-bottom: 1em;
	-webkit-font-smoothing: antialiased;	/*平滑，讓文字更好看一點*/
}
.wrapper a{ color:#6fbef3; }
.wrapper .pure-menu-selected .pure-menu-link{ color:#fff; }
.wrapper .pure-menu-link:hover{ color:#ddd; background-color:#2d3e50; }

/**
 * 文章顯示佈局
 */
h2 a, td a{ text-decoration:none; color:#000; }
h2 a:hover, td a:hover{ text-decoration:underline; color:#215B63; }
#menu{ font-size:20px; }
.l-box{ padding: 3px 20px; }
.article{ line-height:1.8em; }
table{ border-collapse:collapse; margin-bottom:15px; }
table td, table th{border:1px solid #ddd; padding:8px; vertical-align:top; }
table th{ background-color:#ddd; font-weight:bold; }

/**
 * 分頁碼碼
 */
#pages{ margin:2em 0; }
#pages a,#pages strong{ margin:0 1px; padding:8px 12px;}
#pages a:link, #pages a:visited, #pages a:active{ text-decoration:none; color:#333; background-color:#d8d8d8; }
#pages a:hover{ background-color:#2a9fd6; color:#fff; }
#pages strong{ background-color:#2a9fd6; color:#fff; font-weight:normal; }
hr{ border:1px solid #ddd;}

/**
 * 標簽樣式
 */
.tags{ margin:0 1em; }
.tags a:link, .tags a:visited, .tags a:active{ 
	color:#fff; text-decoration:none; background-color:#5aba59; padding:0.3em 1em; margin:0 0.1em; font-size:0.8em;
}

/**
 * 導航欄在手機上會自動豎直擺放
 */
@media screen and (max-width: 600px){		/* or 40em */
	.wrapper .pure-menu-list{display: block;}
	.wrapper .pure-menu .pure-menu-item{display: block;}
	.tags{ display:block; }
}
/**
 * 響應式菜單欄
 */
#login{
	float: right;
}
#menu-icon{
	display: none;
	float: right;
	font-family: Arial, Helvetica, sans-serif;
	padding: .5em 1em;			/* .pure-menu-link有bug，因此不使用它，只模仿它 */
}
#menu-icon:hover{
	color: #ddd;
}
#menu-icon:link, #menu-icon:visited, #menu-icon:active{
	text-decoration: none;
}
@media screen and (max-width: 600px){
	#login{
		float: none;
	}
	#menu ul.pure-menu-list li.pure-menu-item{
		display: none;
	}
	#menu.responsive ul.pure-menu-list li.pure-menu-item{
		display: block;
	}
	#menu-icon{
		display: block;
	}
}
/**
 * 編輯器
 */
textarea#article{
	width: 100%;
	height: 500px;
}
#preview-container{
	padding: .2em .6em;
}
iframe#preview{
	width: 100%;
	height: 420px;
    border: 1px solid #ccc;
    border-radius: 4px;
	box-shadow: inset 0 1px 3px #ddd;
}
@media screen and (max-width: 600px){
	#preview-container{
		padding: 0;
	}
	textarea#article{
		height: 400px;
	}
	iframe#preview{
		height: 200px;
	}
}