/******************************************************
	Google Fonts (Prefered):
	font-family: 'Open Sans', sans-serif;
*******************************************************/

/*******************************************************
    General
*******************************************************/
html {
    height: 100%;
    overflow-x:auto; 
    overflow-y:scroll;
}


body {
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
  /* For footer  */
  	position:relative;
    min-height:100%;
}

#wrapper {
    max-width: 750px;
    margin: 0 auto;
    padding: 0 2.5%;
  	padding-bottom: 6.5em;
    height: 100%;
}
/* 750px: the width of all content apart from heading */

img {
    max-width: 100%;
}
/* Ensure img zoom with (full-fill) its container */

iframe {
    max-width: 100%;
}
/* Ensure iframe zoom with (full-fill) its container */

a {
    text-decoration: none;
}

a:link {
	color: #069;
}

a:visited {
	color: #069;
}

a:hover {
	text-decoration: underline;
    color: #e13411;
}

hr {
	margin: 0 auto;
    height: 0.15em;
    border: none;
    color: #363032;
    background: #363032;
}

hr.red {
    color: #e13411;
    background: #e13411;
  /*  height: 0.15em; Unify the height of footer hr and header hr */
}

/*******************************************************
    Heading
*******************************************************/

header {
	margin: 0 0 2em 0;
	width: 100%;
    background-color: #363032;
}

#logo {
    padding-top: 1em;
    padding-bottom: 1em;
	text-align: center;
    font-size: 0.85em;
    background-color: #f7fafa;
}

#logo a.logotype {
    font-family: 'Gravitas One', cursive;
    font-style: normal;
    font-weight: 400;
    font-size: 2em;
    color: #e13411;
    text-decoration: none;
}

#logo span {
	color: #777;
}

/* remove what should display on a tablet */

span.heading_tablet {
    display: none;
}

span.heading_desktop {
    display: none;
}

span.phone_h {
    display: none;
}

/*******************************************************
    Nav
*******************************************************/

nav {
	padding-top: 0.4em;
    text-align: center;
}

nav ul {
	margin: 0 auto;
    padding: 0;
	list-style: none;
}

nav ul li {
	display:inline-block;
    padding: 0.2em 0.25em 0em;
}

nav ul li a {
    color: aliceblue;
    font-family: 'Squada One', cursive;
    font-weight: 400;
    font-style: normal;
	text-decoration: none;
  	padding: 0.15em 0.5em;
    font-size: 1.1em;
}

nav ul li a:link {
	color: white;
}

nav ul li a:visited {
	color: white;
}

nav ul li a:hover {
	color: #e13411;
    text-decoration: none;
}

nav ul li a.selected {
    background-color: #e13411;
    color: white;
}

/*******************************************************
    Footer
*******************************************************/

footer {
  	position:absolute;
  	bottom:0;
  	width:100%;
  	height:9em;
/* Make the footer sticky to the bottom */
    text-align: center;
  	padding-bottom: 0.5em;
/*  1em 80%  */
    font-size: 0.8em;
 	background-color: #f7fafa;
}

footer p {
    margin: 0 auto;
    padding: 0.15em 0;
    color: #333333;
}

footer p.first {
	padding-top: 0.75em;
}

/*******************************************************
    Article page: Article
*******************************************************/

article {
    max-width: 550px;
    margin: 0 auto;
}

article h1 {
    font-family: 'Playfair Display', serif;
    font-style: normal;
    font-weight: 700;
    text-align: center;
    margin: 1.5em auto 0.5em;
    line-height: 1em;
    letter-spacing: -1px;
    color: #444444;
/*  original 2em to 1.5em  */
    font-size: 1.75em;
}

#post_info {
    max-width: 700px;
    margin: 0 auto;
    color: #637470;
    line-height: 1.25em;
    text-align: center;
}

#post_info p {
/*  0.9 80%  */
    font-size: 0.72em;
    margin: 0.5em 0;
    display: inline-block;
}

#post_info a:hover {
    color: #e13411;
    border-color: #e13411;
}

#post_content {
    max-width: 700px;
    margin: 1em auto 0.8em;
/*  1.15 80%  */
    font-size: 0.92em;
    line-height: 1.5em;
    color: #333333;
    text-align: left;
}

/* 中文段落首行缩进两字符 */
#post_content p.chinese {
    text-indent: 2em;
}

/* 英文段落不缩进 */
#post_content p.english {
    text-indent: 0;
}

#post_content a:hover {
    color: #e13411;
}

#post_content h3 {
    letter-spacing: -1px;
    color: #444444;
    font-weight: 600;
}

#post_content img {
    max-width: 400px;
    width: 100%;
    height: auto;
    display: block;
    margin: 1em auto;
    border-radius: 4px;
}

#post_content img.portrait {
    max-width: 300px;
}

#post_content img.landscape {
    max-width: 500px;
}

/* Image caption */
#post_content .img-container {
    text-align: center;
    margin: 1em auto;
}

#post_content .img-container img {
    margin: 0 auto;
    cursor: zoom-in;
}

#post_content .img-caption {
    font-size: 0.85em;
    color: #666;
    margin-top: 0.5em;
    text-align: center;
}

/* Lightbox */
#lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    cursor: zoom-out;
}

#lightbox.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

#lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 4px;
}

#post_content ul,ol {
    font-size: 0.9em;
}

/* Amazing! fluid youtube video, ref: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */

/* The second implement of text divider, from 'think with type'  */

#text_divider {
    margin: 0 auto;
    max-width: 700px;
    padding-bottom: 2em;
    background-image: url('../img/text_divider.png');
    background-repeat: repeat-x;
    opacity: 0.3;
}


/*******************************************************
    Article page: Pagination
*******************************************************/

#pagination {
    margin: 2.5em auto 0;
/*  1.1 80%  */
    font-size: 0.88em;
    font-weight: 600;
    max-width: 720px;
}

#pagination a.newer_posts {
    padding-left: 0.3em;
    display: block;
    float: left;
}

#pagination a.older_posts {
    padding-right: 0.3em;
    display: block;
    float: right;
}

#clearfloat {
    margin-bottom: 1.5em;
    height: 0;
    width: 0;
    clear: both;
}

/* Article page navigation - Previous left, Home center, Next right */
#pagination.article {
    position: relative;
    text-align: center;
    font-weight: 600;
    margin: 0 auto;
    padding: 2em 1em;
    max-width: 550px;
    overflow: hidden;
}

#pagination.article a.newer_posts,
#pagination.article span.newer_posts {
    float: left;
    display: block;
    padding-left: 0.3em;
    width: 120px;
    text-align: left;
}

#pagination.article a.older_posts,
#pagination.article span.older_posts {
    float: right;
    display: block;
    padding-right: 0.3em;
    width: 120px;
    text-align: right;
}

#pagination.article a:not(.newer_posts):not(.older_posts) {
    display: inline-block;
    padding: 0 1em;
}

#pagination.article span.placeholder {
    visibility: hidden;
    width: 120px;
}

/*******************************************************
    Single Article page
*******************************************************/

#breadcrumb.article{
    max-width: 570px;
}

article h1.article {
    margin: 1em auto 0.5em;
}

#post_content.article {
    margin: 1em auto 0;
}

/*******************************************************
    Me page
*******************************************************/

/* section one location, size and general settings */

#portrait {
    margin: 2.5em auto 1.5em;
}

#portrait img {
    display: block;
    max-width: 300px;
    /* iPhone 8 以下 */
    margin: 0 auto;
   /* border-radius: 100%; */
}

/* section two location, size and general settings */


#about {
    max-width: 350px;
    margin: 0 auto 1em;
/*  1.05 80%  */
    font-size: 0.84em;
    line-height: 1.35em;
    color: #333333;
    text-align: left;
}

#about2 {
    max-width: 350px;
    margin: 0 auto 4em;
/*  1.05 80%  */
    font-size: 0.84em;
    line-height: 1.35em;
    color: #333333;
    text-align: left;
}

#about2 a.download {
/*  0.8 80%  */
    display: inline-block;
    font-size: 0.72em;
    color: #637470;
    border: #637470 1px solid;
    text-decoration: none;
    border-radius: 0.25em;
    margin-top: 0.5em;
    padding: 0.15em 1em;
}

#about2 a:hover {
    color: #e13411;
    border-color: #e13411;
}

/* section three location, size and general settings */

#contact {
    max-width: 350px;
    margin: 0 auto 1em;
/*  1.15 80%  */
    font-size: 0.92em;
    line-height: 1.6em;
    color: #333333;
}

#contact ul {
    padding: 0;
}

#contact ul li {
    list-style: none;
    margin: 0 0 0.5em 0;
}

#contact ul li a {
/*  0.9 80%  */
    font-size: 0.84em;
    vertical-align: baseline;
    display: inline-block;
    min-height: 1.7em;
    background-repeat: no-repeat;
    background-size: 1.7em auto;
    padding: 0 0 0 1.95em;
}

#contact ul li a.email {
  background-image: url('../img/email.png');
}

#post_content a.title:hover{
    color: #444444;
    text-decoration: none;
}

#breadcrumb{
    max-width: 570px;
    margin: 0 auto 1.75em;
    font-size: 0.8em;
}

#breadcrumb a{
    padding-left: 5px;
    font-weight: 600;
}

#links {
    padding: 0;
    text-align: center;
/*  1em 80%  */
    font-size: 0.7em;
}

#links a {
    margin: 0.5em 0.25em;
    padding: 0.5em 0.75em;
    text-decoration: none;
    display: inline-block;
}

#links a:link {
    color: #637470;
}

#links a:visited {
    color: #637470;
}

#links a:hover {
    color: #e13411;
}

#links a:active {
    color: #637470;
}

/*******************************************************
    Error page
*******************************************************/

#error_box {
    margin: 4em auto;
    max-width: 330px;
    border: #637470 3px solid;
    border-radius: 1.5em;
}

#error_text {
    margin: 1em auto 2em;
    padding: 0 1em;
    font-size: 0.8em;
}

#error_box p.title {
    font-family: 'Squada One', cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 1.8em;
}

#error_img {
    display: none;
}

#clearfloat_error_page {
    height: 0;
    width: 0;
    clear: both;
}

#error_nav {
    margin: 0 auto;
}

#error_nav ul {
    padding: 0;
}

#error_nav ul li {
	display:inline-block;
}

#error_nav ul li a{
	color: #069;
    text-decoration: underline;
}

#error_nav ul li a:hover {
    color: #e13411;
}