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

body {
    background: black url(../img_common/200305cvs_jug-of-wine_qual50_1200x895.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;
}
.int-nav img {
    vertical-align: middle;
    padding: 0 5px 5px 0;
}
.lettrine{
    float: left;
    clear: left;
    padding: 0 20px 5px 0;
}
/* ========== ASIDE ========== */ 
aside {
    position: fixed; top: 120px; left: 120px; 
    color: #5c2610;
    width: 150px;
    text-align: center;
    line-height: 1.5em;
}
aside.top240 {
    position: fixed; top: 250px; left: 120px; 
    color: #5c2610;
    width: 150px;
    text-align: center;
    line-height: 1.5em;
}
aside.black {
    position: fixed; top: 150px; left: 120px; 
    color: #5c2610;
    width: 150px;
    text-align: center;
    line-height: 1.5em;
}
aside.black a {
    color: #d26720;
}
/* ========== DIVISION ========== */ 
div#background-image {
    background: url(../img_common/200305cvs_jug-of-wine_qual50_wash_1200x1790.jpg) 0 0 no-repeat fixed;
    margin: 0 7% 0 100px;
}
div#background {
    background-color: transparent;
    max-width: 880px;
    margin: 30px 5% 0 200px;
    padding: 0 0 5% 0;
}
div#background-black {
    background-color: #22110B;
    color: #E7E0C9;
    margin: 0 0 0 100px;
}
/* ========== FIGURE ========== */ 
figure.inline {
    float: left;
    display: table;
    width: 100px;
    padding: 10px;
    vertical-align: top;
    text-align: center;
}
figure.inline img {
    padding: 10px;
}
figure.inline150 {
    float: left;
    display: table;
    width: 150px;
    padding: 10px;
    vertical-align: top;
    text-align: center;
}
figure.inline150 img {
    padding: 10px;
}
figure.inline150 figcaption {
    padding: 0 10px 10px 10px;
}
figure.inline250 {
    float: left;
    display: table;
    width: 250px;
    padding: 10px;
    vertical-align: top;
    text-align: center;
}
figure.inline250 img {
    padding: 10px;
}
figure.inline250 figcaption {
    padding: 0 10px 10px 10px;
}
figure.navig {
    float: left;
    display: table;
    width: 64px;
    vertical-align: top;
    text-align: center;
    font-size: 90%;
    line-height: 1em;
}
figure.navig img {
    padding: 10px;
}
figure img {
    padding: 10px 40px 10px 0;
}
figcaption.150 {
    max-width: 140px;
}
/* ========== 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: 20px 0 0 50px;
    font-style: italic;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: #5c2610;
    z-index: -1;
}
.sub-header {
    margin: 10px 20% 20px 0px;
    font-size: 110%;
    color: #c17753;
}
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.compact {
    line-height: 1em;
}
ul.artw-info {
    list-style-type: circle;
    list-style-position: outside;
    margin: 0 0 0 20px;
}
ul.square { 
    list-style-type: square;
    list-style-position: outside;
    margin: 0 0 0 40px;
}
ul.circle { 
    list-style-type: circle;
    list-style-position: outside;
    margin: 0 0 0 40px;
}
ul.upper-roman { 
    list-style-type: upper-roman;
    list-style-position: outside;
    margin: 0 0 0 40px;
}
ul.fungcheung {
    list-style-image: url(../img_common/seal_fungcheung_9x9.png);
    list-style-position: outside;
}
ul.fungcheung-mod01 {
    list-style-image: url(../img_common/seal_fungcheung_9x9.png);
    list-style-position: outside;
    padding: 0 0 0 50px;
}
ul.cv00 {
    list-style: none;
    text-align: left;
    text-indent: -60px;
    line-height: 1.2em;
    padding: 0 0 10px 60px;
}
ul.cv00 li {
    padding: 10px 0 0 0;
}
ul.cv01 {
    list-style: circle;
    list-style-position: outside;
    text-align: left;
    text-indent: 0;
    line-height: 1.25em;
    padding: 0 0 15px 15px;
}
ul.cv01-mod01 {
    text-align: left;
    text-indent: 0;
    line-height: 1.25em;
    padding: 0 0 15px 35px;
}
ul.lev00 {
    margin: 0 0 0 10px;
    padding: 1em 0 0 0;
    list-style: circle;
    text-align: left;
    line-height: 1.5em;
}

ul.lev01{
    margin: 0 0 0 10px;
    padding: 0 0 0.5em 0;
    list-style: none;
    text-align: left;
    line-height: 1em;
    font-size: 80%;
}
ul.lev01 li {
    padding: 0.25em 0 0 0;
}
/* ========== LINKS ========== */ 
a {text-decoration: none;}
a:link {color: #873c24;}
a:visited {color: #cfa843;}
a:hover {color: #873c24; background-color: #ded7c2;}
a:active {color: purple;}

.ext-links {display: block;}

.on-dark-bg {
    background-color: #f1ead7;
    padding: 0 5px 0 5px;
}

/* ========== NAV ========== */ 
nav {
    position: fixed; top: 140px; left: 120px; 
    color: #5c2610;
    width: 150px;
    text-align: center;
    line-height: 1.25em;
}
/* ========== P ========== */ 
p.gallery {
    clear: left;
}
p.gallery img {
    padding: 10px 30px 10px 0;
}
p.link-bg a {
    background-color: #f1ead7;
    font-size: 90%;
    padding: 5px 15px 5px 15px;
}
/* ========== SECTION ========== */ 
section {
    padding: 30px 0 0 0;
}
section p {
    padding: 5px 0 0 0;
}
section h3,h4 {
    font-variant: small-caps;
    padding: 5px 0 0 0;
    letter-spacing: 110%;
}
/* ========== TABLE ========== */ 
table {
    margin: 20px 0 0 0;
    border-collapse: separate;
    border-spacing: 1px 1px;
    border: solid 2px #ded7c2;
}
thead {
    background-color: #f1ead7;
}
td {
    border: solid 1px;
    padding: 5px 10px 5px 10px;
}
/* ========== CLASS ========== */
.aligncenter-img {
    display: block;
    margin: 10px auto 20px;
    
}
.aligncenter-txt {text-align: center;}

.bord-4s-5px {border: solid 5px #f1ead7;}
.bord-b-5px {border-bottom: solid 5px #f1ead7;}
.bord-b-2px {border-bottom: solid 2px #f1ead7;}
.bord-t-5px {border-top: solid 5px #f1ead7;}
.bord-t-2px {border-top: solid 2px #f1ead7;}
.bord-t-1px {border-top: solid 1px #f1ead7;}
.bord-t01 {border-top: solid 10px #ded7c2;}
.bord-t-10px {border-top: solid 10px #ded7c2;}
.bord-lt-10px {border-left: solid 10px #cfa843;}

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

.fl {float: left;} 
.fr {float: right;}

.smallcaps {font-variant: small-caps;}

.font200 {font-size: 200%;}
.font150 {font-size: 150%;}
.font135 {font-size: 135%;}
.font120 {font-size: 120%;}
.font110 {font-size: 110%;}
.font90 {font-size: 90%;}
.font80 {font-size: 80%;}
.font70 {font-size: 70%;}
.font50 {font-size: 50%;}

.font-b {font-weight: bold}

.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-50 {margin: 0 0 0 50px;}
.marg-lt-60 {margin: 0 0 0 60px;}
.marg-lt-70 {margin: 0 0 0 70px;}
.marg-lt-80 {margin: 0 0 0 80px;}
.marg-lt-120 {margin: 0 0 0 120px;}
.marg-t-20 {margin: 50px 0 0 0;}

.pad-b-5 {padding: 0 0 5px 0;}
.pad-b-15 {padding: 0 0 15px 0;}
.pad-b-30 {padding: 0 0 30px 0;}
.pad-b-100 {padding: 0 0 100px 0;}
.pad-lt-10 {padding: 0 0 0 10px;}
.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-t-100 {padding: 100px 0 0 0;}
.pad-t-150 {padding: 150px 0 0 0;}
.pad-t-200 {padding: 200px 0 0 0;}

/* ========== THUMBslider CLASS ========== */
.thumbslider1R {
    position: relative;
    height: 594px;
    width: 752px;
    overflow: hidden;
    margin: 0;
}
.thumbslider2R {
    position: relative;
    height: 668px;
    width: 752px;
    overflow: hidden;
    margin: 0;
}
.thumbslider3R {
    position: relative;
    height: 742px;
    width: 752px;
    overflow: hidden;
    margin: 0;
}
.thumbsliderArtBk {
    position: relative;
    height: 1142px;
    width: 752px;
    overflow: hidden;
    margin: 0;
}
.thumbslider1R figure {
    float: left;
}
.thumbslider2R figure {
    float: left;
}
.thumbslider3R figure {
    float: left;
}
.thumbsliderArtBk figure {
    float: left;
}
.large1R {
    position: absolute;
    top: 594px;
    left: 76px;
    z-index: 1;
        -webkit-transition: top 1s ease;
        -moz-transition: top 1s ease;
        -o-transition: top 1s ease;
        -ms-transition: top 1s ease;
        transition: top 1s ease;
}
.large2R {
    position: absolute;
    top: 668px;
    left: 76px;
    z-index: 1;
        -webkit-transition: top 1s ease;
        -moz-transition: top 1s ease;
        -o-transition: top 1s ease;
        -ms-transition: top 1s ease;
        transition: top 1s ease;
}
.large3R {
    position: absolute;
    top: 742px;
    left: 76px;
    z-index: 1;
        -webkit-transition: top 1s ease;
        -moz-transition: top 1s ease;
        -o-transition: top 1s ease;
        -ms-transition: top 1s ease;
        transition: top 1s ease;
}
.largeArtBk {
    position: absolute;
    top: 1142px;
    left: 76px;
    z-index: 1;
        -webkit-transition: top 1s ease;
        -moz-transition: top 1s ease;
        -o-transition: top 1s ease;
        -ms-transition: top 1s ease;
        transition: top 1s ease;
}
.instruction {
    position: absolute;
    top: 258px;
    width: 752px;
    text-align: center;
    font-size: 90%;
    color: #b6b1a3;
}
a:hover .thumb {
  -webkit-box-shadow: 0px 0px 5px rgba(1,1,1,0.5);
  -moz-box-shadow: 0px 0px 5px rgba(1,1,1,0.5);
  box-shadow: 0px 0px 5px rgba(1,1,1,0.5);
}
 
a:hover .large1R {
  top: 80px;
}
a:hover .large2R {
  top: 160px;
}
a:hover .large3R {
  top: 240px;
}
a:hover .largeArtBk {
  top: 240px;
}
figure.thumb img {
    padding: 10px 0 0 10px;
}
figure.thumbArtBk img {
    padding: 5px 0 0 5px;
}
figure.thumbArtBk figcaption {
    text-align: center;
    font-size: 90%;
    padding: -5px 0 0 0;
}
figure.large1R figcaption {
    text-align: center;
    font-size: 90%;
}
figure.large2R figcaption {
    text-align: center;
    font-size: 90%;
}
figure.large3R figcaption {
    text-align: center;
    font-size: 90%;
}
figure.largeArtBk figcaption {
    text-align: center;
    font-size: 90%;
}
/* ################################ */