html { height: 100%; }

body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
    color: #111;
    background-color: #b7ba7e; /* green. Same as sidebar-first, so extends to bottom of page */
}

#sidebar-first {
    float: left;
    box-sizing: border-box;
    left: 0;
    top: 0;
    width: 20%;
    margin: 0;
    padding: 1em;
    padding-left: 0;
    text-align: right;
    list-style-type: none;
    font-size: 150%;
    background-color: #b7ba7e; /* green; may be redundant if same as body */
}

#sidebar-first a {
    text-decoration: none;
    color: black;
}
#sidebar-first a:hover {
    text-decoration: none;
    color: #e43b16; /* red as in seal */
}
#sidebar-first a:active {
    text-decoration: none;
    color: #e43b16;	/* red as in seal */
}
#sidebar-first ul {
    list-style-type: none;
    list-style-image: none;
    text-align: right;
    padding: 0;
}
#sidebar-first a.active {
    text-decoration: none;
    color: #e43b16;	/* red as in seal */
}
img#sidebar-logo {
    margin: 0 0 1em auto;
    display: block;
}
ul.menu {
    border: medium none;
    list-style: none outside none;
}
/* main division (not sidebar) */
#nihao {
	background-color: #fffcdf; /* off-white */
	float: left;
	box-sizing: border-box;
	margin-left: 20%;
	width: 80%;
	/* height: 100%; */
	min-height: 100%;
	padding: 2em;
	margin: 0px
}
#nihao a {
	color: #e43b16;	/* red as in seal */
}
a, a:link, a:visited, a:hover {
    text-decoration: none;
}
img.regular-tree {
    float: right;
}
#name-and-slogan {
/*
    background-image: url(trees_large_crop_green.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
*/
}
#copyright {
    font-size: 50%;
}
#shop-name {
}
#top-bar {
    font-family: Verdana, sans-serif;
    font-size: .9em;
    line-height: 1.8em;
    width: 80%;
    margin: 0 0 0 auto;
    background-color: #fffcdf;
    text-align: center;
}
#top-bar ul {
    margin-top: 0;
    list-style: none outside none;
    padding: 0;
    margin: 0;
}
#top-bar li {
    padding: .3em .4em;
    display: inline;
    border: 1px solid #aaa;
    border-bottom-left-radius: .5em;
    border-bottom-right-radius: .5em;
    background-color: #eee;
}
#container {
}

#navbar {
    width: 100%;
    color: #333;
    line-height: 90%;
    border: none;
    border-bottom: 1px solid silver;
}

#top {
    padding: .5em;
    background-color: #f33;
    border-bottom: 1px solid gray;
}

#top h1 {
    padding: 0;
    margin: 0;
    margin: .1em;
    font-family: serif;
}

h5 {
    margin: 0;
    padding: 0;
}

#sidebar-secondary {
    float: left;
    width: 12%;
    margin: 0;
    padding: 1em;
}

#content {
    margin-left: 15%;
    margin-right: 15%;
    padding: 1em;
}

#pagination {
    clear:both;
    display: block;
    width:100%;
    float: none;
    padding: 1em;
}

#pagination ul {
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 1em;
}

#pagination li {
    list-style-type: none;
    display: inline;
    padding-bottom: 1px;
}

#pagination a, #pagination a:visited {
    padding: 0 5px;
    text-decoration: none;
}

#pagination li.currentpage {
    font-weight: bold;
    padding: 0 5px;
}

#content div.productreviews {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 1em;
}


#content div.productreviews h2 {
    font-size: 1.17em;
}

#content div.productreviews span.label {
    float: left;
    width: 80px;
}

#footer {
}

#content h2 {
    margin: 0 0 .5em 0;
}

.brandcategories {
    clear: both;
}

.brandImage,
.productImage {
    margin: 1em;
}

.productImage p {
    font-size: .9em;
}

.productImage img {
    margin: .3em .5em .5em 0;
    float: left;
}

#menu_container ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}


#shipping ul li {
    list-style-type: none;
    text-decoration: none;
    padding-left: 1em;
    text-indent: -1em;
}

/* Checkout */
#checkoutprogress {
    border-bottom: 1px solid #666;
    margin-bottom: 2em;
    line-height: normal;
}
#checkoutprogress ul {
    font-size: 110%;
    display: inline;
    margin-left: 0;
    padding-left: 0;
}
#checkoutprogress li {
    margin-left: 3px;
    margin-right: 3px;
    padding-left: 7px;
    padding-right: 7px;
    display: inline;
    list-style: none;
    color: #000;
    border: 1px solid #666;
    background-color: #dddabd;
    border-top-left-radius: .5em;
    border-top-right-radius: .5em;
    border-bottom: 1px solid #ccc;
}
#checkoutprogress li.active {
    background-color: #fffcdf;
    color: #000;
    border: 1px solid #000;
    border-bottom: 2px solid #fffcdf;
}
#checkoutprogress a {
    text-decoration: none;
    color: #000;
}
#checkoutprogress a:hover {
    color: #00f;
}
#wishlist ul li,
#product_category ul li {
    list-style: none;
    padding: 0.5em;
    border-bottom: 1px dashed #e0e0e0;
    background-color: white;
}

#wishlist ul li:hover
#product_category ul li:hover {
    background-color: #f0fff0;
}

#wishlist ul li a,
#product_category ul li a {
    display: block;
}

#wishlist span.date {
    font-style: italic;
    display: block;
    margin-left: .5em;
    font-size: .84em;
}

#wishlist form {
    display: inline;
}

#menu_container a {
    display: block;
    color: #FFF;
    background-color: #7F7F7F;
    width: 9em;
    padding: 3px 17px 3px 8px;
    text-decoration: none;
    border-bottom: 1px solid #fff;
    font-weight: bold;
}

#menu_container a:hover {
    background-color: #B6B6B6;
    color: #FFF;
}

#menu_container li li a {
    display: block;
    color: #FFF;
    background-color: #C0C0C0;
    width: 9em;
    padding: 3px 8px 3px 17px;
    text-decoration: none;
    border-bottom: 1px solid #fff;
    font-weight: normal;
}

#menu_container li li li a {
    display: block;
    color: #FFF;
    width: 9em;
    background-color: #C0C0C0;
    padding: 3px 1px 3px 24px;
    text-decoration: none;
    border-bottom: 1px solid #fff;
    font-weight: normal;
}

#menu_container a.current:before {
    content: "\0020 \0020 \0020 \00BB \0020";
}

.addressblock {
    padding-top: .5em;
    padding-bottom: .5em;
}

.profile li {
    list-style-type: none;
}

/* order history page table */
.ordertable {
    width: 100%;
    font-weight: normal;
    border-collapse: collapse;
}
.ordertable thead {
    background-color: #ddd;
}
.ordertable td {
    border-bottom: 1px solid black;
    vertical-align: text-bottom;
    padding: .5em;
}
.ordertable td.ordernumber a {
    text-decoration: none;
}
.ordertable span.orderitemqty {
    font-style: italic;
}
.ordertable td.ordertototal {
    text-align: right;
}
p {
    line-height: 150%;
}

.help, p.help {
    font-size: .75em; color:#999;
}

img {
    border: none;
}
ul.messages {
    list-style: none;
    border: 1px solid #ff6666;
    border-radius: .5em;
    padding-left: .5em;
    line-height: 2em;
    background-color: #efefef;
}
.error {
    color: #ff5555;
    font-weight: bold;
    text-align: center;
}

/* =============== Navigation Bars ===================== */

#navbar ul {
    margin: 1em;
    padding: 0px;
}
#navbar ul li {
    display: inline;
    list-style: none;
}
#navbar ul li {
    padding-left: 0.7em;
    padding-right: 0.5em;
    border-left: 1px solid #b0b0b0;
}
#navbar ul li.first {
    padding-left: 0em;
    border-left: none;
}

.recentview h3 {
    padding-bottom: 10px;
}

.recentitem {
    padding-bottom: 10px;
}

div.recentlyadded {
    display: block;
}

#payment ul li{
    list-style-type: none;
}

/* ============ Upsell section ============== */

div.upsell {
    padding-top: 10px;
}

div.upsell .upselldescription {
    padding-bottom: 10px;
}

#info_box {
    padding-left: 5px;
    padding-right: 5px;
}
#info_box ul {
    margin: 5px;
    padding-left: 10px;
}

/* Error messages for forms */
ul.errorlist {
    margin: 0;
    padding: 0;
    list-style: none;
}
ul.errorlist li {
    font-weight: bold;
    color: #c00;
    /*font-size: 12px;*/
    margin: 0 0 3px;
    padding: 4px 5px;
}
form.cflink li {
    display: inline;
}
div.cflink {
    border: solid red 1px;
    padding: .5em;
    margin-top: 1em;
    overflow: scroll;
}
.price {
    font-weight: bold;
    margin-left: 2em;
}
span.dc {
    border: 1px solid #d6d6d6;
    background-color: #f6f6f6;
}
div.social {
}
#contact-info-form input[type='text'] {
    width: 15em;
}
#contact-info-form select {
    width: 15.4em;
}
table.cart {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}
.cart td, .cart th {
    border: 1px solid #000;
    padding: 2px;
}
.cart th {
    background-color: #aaa;
    color: #000;
}
li.cart-info a {
    text-decoration: none;
}
div.cart-info {
    border: 1px solid red;
    padding: .2em .2em;
    background: white;
    margin: 0 0 0 auto;
    font-size: 100%;
}
.cart-link {
    text-align: center;
}
.cart-link a, .checkout-link a {
    text-decoration: none;
}
.checkout-link {
    border-top: 1px solid black;
    text-align: center;
}
#product_images img {
    float: left;
    margin-right: 1em;
    margin-bottom: 1em;
}
.right { text-align: right; }
.left { text-align: left; }
.center { text-align: center; }
img.unicode-logo {
    margin-top: 1em;
    margin-bottom: 0;
}
img.social-logo {
    margin-top: 0;
    margin-bottom: 0;
}
#wenlin-registration-form ul, #wenlin-free-order-form ul {
    padding-left: 0;
}
#wenlin-registration-form li.required-field label, #wenlin-free-order-form li.required-field label {
    font-weight: bold;
}
#wenlin-registration-form li, #wenlin-free-order-form li {
    list-style: none;
}
#wenlin-registration-form, #wenlin-free-order-form, form#options {
    line-height: 1.9em;
}
input#id_number_of_chars {
    width: 3em;
}
#wenlin-registration-form li ul li {
    display: inline;
}
#wenlin-registration-form textarea {
    display: block;
}
#fix-label label, form#options label {
    display: inline-block;
    width: 9em;
    text-align: right;
}
#fix-label input {
    width: 15em;
}
#fix-label select {
    width: 15.4em;
}
form#options label {
    width: 11em;
}
div.short-desc {
    margin-top: .3em;
}
#reports-form div {
    margin-bottom: .5em;
}
li.admin-link {
    background: linear-gradient(to right, #B7BA7E, #bfdf7f);
}
.reports-table {
    border-collapse: collapse;
    width: 100%;
}
.reports-table th {
    border-bottom: 1px solid gray;
}
.reports-table thead tr :first-child {
    width: 10%;
}
div#product_images {
    float: left;
    padding-right: .5em;
}
div#product-order-form {
    float: left;
    padding: .5em;
}
p.nota-bene {
    line-height: 1.4em;
    border: 1px dotted blue;
    padding: .7em;
    background-color: #eed;
}
.donate-form, .recommends {
  border-top: 1px solid gray;
  margin-top: 1.5em;
}
#wiki-account>table {
    border-collapse: collapse;
    border: 1px solid gray;
    background-color: #efefef;
    margin-bottom: .5em;
}
#wiki-account th, #wiki-account td {
    border: 1px solid #ccc;
    padding: .5em;
}
#wiki-account th {
    background-color: #d8db9f;
    text-align: right;
}
#login-form, #registration-form {
  border: 1px solid gray;
  padding: .8em;
  border-radius: .3em;
  max-width: 26em;
}
#login-form input, #registration-form input {
  width: 21em;
}
#login-form button,
#registration-form button,
#wenlin-registration-form button {
  padding-left: 1em;
  padding-right: 1em;
}
#login-form tr:last-of-type > td, #registration-form tr:last-of-type > td {
  text-align: center;
  padding-top: .7em;
}
#cantonese-dict-message .title {
    text-align: center;
    font-weight: bold;
}
#cantonese-dict-message {
    background-color: #fafafa;
    padding: 1em 2em;
    border: 1px solid #e6e6e6;
}
.wenlin-for-web > div, .wenlin-for-desktop > div {
    border-bottom: 1px dotted green;
}
.group:after {
    content: "";
    display: table;
    clear: both;
}
div.group-controls {
    margin-top: 1em;
    display: none;
}
div.group-controls > button.active {
    outline: 3px solid red;
}

.captcha-image {
    display: flex;
    flex-direction: row;
    margin: .4em 0;
    align-items: center;
    justify-content: space-between;
    max-width: 200px;
}
.captcha-image button {
    flex: .4;
}