/* =========================================== */
/* GLOBAL RULES */
/* =========================================== */

body {
    background: black url(../img_common/book1cover_qual75_1200x1200.jpg) 0 0 no-repeat fixed; 
    margin: 0;
    padding: 0;
    font-family: Arial, Liberation, Verdana, serif;
    font-size: 16px;
}
article, aside, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
em {
    font-style: italic;
} 
ul {
    list-style: none;
}
/* ========== ARTICLE ========== */ 
article {
    padding: 15px 0 0 0;
    clear: left;
}
.lettrine {
    float: left;
    clear: left;
    padding: 10px 20px 10px 0;
}
/* ========== ASIDE ========== */ 
aside {
    position: fixed; top: 170px; left: 120px; 
    color: #5c2610;
    width: 150px;
    text-align: center;
    line-height: 1.5em;
}
/* ========== DIVISION ========== */ 
div#background-image {
    background: url(../img_common/book1cover_yellow-wash_1200x1200.jpg) 0 0 no-repeat fixed;
    margin: 0 5% 0 100px;
}
div#background {
    background-color: transparent;
    max-width: 890px;
    margin: 150px 5% 0 200px;
    padding: 0 0 5% 0;
}
/* ========== FIGURE ========== */ 
figure.inline {
    float: left;
    display: table;
    width: 100px;
    padding: 10px;
    vertical-align: top;
    text-align: center;
}
figure.inline img {
    padding: 10px;
}
figure {
    margin: 10px 0 10px 80px;
}
figure img {
    padding: 10px 10px 10px 0;
}
figcaption.framed {
    max-width: 570px;
    padding: 10px 20px 10px 0;
    text-align: left;
    border: solid 5px #ded7c2;
}
figcaption.framed2 {
    max-width: 400px;
    padding: 10px 20px 10px 20px;
    text-align: left;
    border: solid 5px #ded7c2;
}
/* ========== FOOTER ========== */ 
footer {
    margin: 50px 0 0 0;
    border-top: solid 5px #ded7c2;
    font-size: 90%;
    text-align: center;
    clear: left;
}
footer p {
    padding: 5px 0;
}
/* ========== HEADER ========== */ 
header {
    margin: 0 10% 0 0;
    font-style: italic;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: #5c2610;
    z-index: -1;
}
h1, h2, h3, h4 {
font-family: sans-serif;
}
h1 {font-size: 200%;}
h2 {font-size: 150%;}
h3 {font-size: 120%;}
h4 {font-size: 100%;}
h5 {font-size: 90%;}
h6 {font-size: 80%;}

/* ========== LIST ========== */ 
ul.toc{
    list-style-type:    none ;
    line-height: 1.25em;
    text-align: left;
    margin: 0 0 0 30px;
}
ul.square { 
    list-style-type: square;
    list-style-position: outside;
    margin: 0 0 0 80px;
}
ul.circle { 
    list-style-type: circle;
    list-style-position: outside;
    margin: 0 0 0 80px;
}
ul.circle-lev2 { 
    list-style-type: circle;
    list-style-position: outside;
    margin: 0 0 0 40px;
}
ul.seal{ 
    list-style-image: url(../img_common/seal_fungcheung_9x9.png);
    list-style-position: outside;
    margin: 0 0 0 80px;
}
ul.seal-chap {
    list-style-image: url(../img_common/seal_fungcheung_13x13.png);
    list-style-position: outside;
    margin: 0 0 0 30px;
    padding: 15px 0 0 0;
    font-variant: small-caps;
    font-size: 120%;
    font-weight: 900;
    letter-spacing: 110%;
}
/* ========== LINKS ========== */ 
a {text-decoration: none;}
a:link {color: #873c24;}
a:visited {color: #cfa843;}
a:hover {color: #873c24; background-color: #ded7c2;}
a:active {color: purple;}

/* ========== SECTION ========== */ 
section {
    padding: 30px 0 0 0;
}
section p {
    margin: 0 0 0 30px;
    padding: 5px 10px 0 0;
}
section h3 {
    padding: 15px 0 0 0;
    font-variant: small-caps;
    font-weight: 900;
    letter-spacing: 110%;
}
section h4 {
    margin: 0 0 0 30px;
    padding: 15px 0 0 0;
    font-variant: small-caps;
    font-weight: 900;
    letter-spacing: 110%;
}

/* ========== CLASS ========== */
.align-c {text-align: center;}

.clearleft {clear: left;}
.clearright {clear: right;}

.fl {float: left;} 

.font120 {font-size: 120%;}
.font110 {font-size: 110%;}
.font90 {font-size: 90%;}
.font80 {font-size: 80%;}
.font70 {font-size: 70%;}

.framed {
    max-width: 570px;
    padding: 10px 20px 10px 0;
    text-align: left;
    border: solid 5px #ded7c2;
}

.lineH-075em {line-height: 0.75em;}
.lineH-1em {line-height: 1em;}
.lineH-125em {line-height: 1.25em;}

.marg-lt-20 {margin: 0 0 0 20px;}
.marg-lt-30 {margin: 0 0 0 30px;}
.marg-lt-40 {margin: 0 0 0 40px;}
.marg-lt-100 {margin: 0 0 0 100px;}
.marg-t-40 {margin: 40px 0 0 0;}

.pad-b-15 {padding: 0 0 15px 0;}
.pad-t-05 {padding: 5px 0 0 0;}
.pad-t-10 {padding: 10px 0 0 0;}
.pad-t-15 {padding: 15px 0 0 0;}
.pad-t-20 {padding: 20px 0 0 0;}
.pad-t-25 {padding: 25px 0 0 0;}
.pad-t-30 {padding: 30px 0 0 0;}
.pad-t-50 {padding: 50px 0 0 0;}

.pad-b-neg10 {padding: 0 0 -10px 0;}
.pad-t-neg10 {padding: -10px 0 0 0;}

/* ################################ */