::selection {
    background: #4F57AA;
    color: #ffffff;
}

::-moz-selection {
    background: #4F57AA;
    color: #ffffff;
}

body, html {
  height: 100%;
}


h1, h2, h3, h4 {
    font-weight: normal;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}


body {
    background: #fff;
    font: 14px/1.35 "brandon-grotesque", Arial, Helvetica, sans-serif;
    color: #69707a;
    font-weight: 400;
    -webkit-font-smoothing:antialiased;
    margin: 0;
} 

li {
    list-style: none;
}

li.last, .colors li.last, .buttons li.last {
    margin-right: 0;
}

.left {
    position: fixed;
    top: 0; 
    left: 0;
    height: 100%; 
    width: 200px;
    background-color: #eeeeee;
}

.left ul {
    padding-top: 20px;
}

.left ul.bottom {
    bottom: 20px;
    position: absolute;
}

.left li {
    padding: 10px 0;
}

.right {
    margin-left: 200px;
    height: 100%;
}

.header {
    text-align: center;
    padding: 4em 0 4em 0;
    border-bottom: 1px solid #eeeeee;
}

.section {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    border-bottom: 1px solid #eeeeee;
}

.content {
    width: 100%;
    padding: 40px 0;
    margin: 0 auto;
    max-width: 1000px;
}

.content li {
    margin: 20px 0;
    padding: 20px;
    background-color: #fafafa;
    border-radius: 4px;
}

.content ul {
    width: 100%;
    padding: 0;
    margin: 0;
}

.content li.dark {
    background-color: #69707a;
}

#horizontal {
    display: table;
    width: 100%;
}

#horizontal li {
    display: inline-block;
    margin: 0;
    float: left;
}


/* ==========================================================================
   Text
   ========================================================================== */


h1 {
    font-size: 42px;
    font-family: "adobe-garamond-pro",sans-serif;
    font-style: italic;
    line-height: 2;
}

h2 {
    font-size: 30px;
    font-family: "adobe-garamond-pro",sans-serif;
    line-height: 2;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

p {
    margin: auto;
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 1.6;
    max-width: 660px;
}

.small {
    font-size: 16px;
    margin-bottom: 8px;
}

.tiny {
    font-size: 14px;
    margin-bottom: 8px;
}

.nav {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.chinese {
    font-size: 20px;
    font-family: sans-serif;
    color: #a4cec0;
    letter-spacing: 4px;
    font-weight: bold;
}

.nav a {
    color: #69707a;
}

a {
    text-decoration: none;
    transition: all 0.35s;
    color: #69707a;
}

a.teal {
    color: #a4cec0;
}

a.blue {
    color: #4F57AA;
}

a.serif {
    font-family: "adobe-garamond-pro",sans-serif;
}

a.active {
    color: #383c41;
}

a.italic {
    font-style: italic;
}

a:hover, a.teal:hover, a.blue:hover {
    color: #383c41;
}

a:active {
    position: relative;
    top: 1px;
}

.logo {
    color: #69707a;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}

.ampersand {
    font-family: "adobe-garamond-pro",sans-serif;
    font-style: italic;
    font-size: 1.45em;
    font-weight: 600;
    color: #a4cec0;
    position: relative;
    top: 2px;
    left: -1px;
}

.justify {
    text-align: justify;
}

.right-align {
    text-align: right;
}

li.success {
    padding: 10px 20px;
    background-color: #a4cec0;
    color: #ffffff;
}

li.fail {
    padding: 10px 20px;
    background-color: #e17c5e;
    color: #ffffff;
}

li.success p, li.fail p {
    text-align: left;
    max-width: 100%;
    margin-bottom: 0;
}

hr {
    background-color: #eeeeee;
    color: #eeeeee;
    height: 1px;
    border: none;
}


/* ==========================================================================
   Colors
   ========================================================================== */

.colors ul {
    padding-top: 10px;
    display: inline-block;
    color: #fff;
}

.colors li {
    width: 18.4%;
    margin-right: 2%;
    padding: 20px 0 0;
    float: left;
}

.colors li.teal {
    background-color: #a4cec0;
}

.colors li.lead {
    background-color: #383c41;
}

.colors li.charcoal {
    background-color: #69707a;
}

.colors li.heather {
    background-color: #eeeeee;
    color: #69707a;
}

.colors li.white {
    background-color: #ffffff;
    color: #69707a;
    -webkit-box-shadow: inset 0px 0px 0px 1px rgba(238,238,238,1);
    -moz-box-shadow: inset 0px 0px 0px 1px rgba(238,238,238,1);
    box-shadow: inset 0px 0px 0px 1px rgba(238,238,238,1);
}

.selected {
    color: #ffffff;
    background-color: #4F57AA;
    max-width: 140px;
    margin-bottom: 0;
}


/* ==========================================================================
   Buttons
   ========================================================================== */


.buttons ul {
    padding-top: 10px;
    display: inline-block;
}

.buttons li {
    width: 32%;
    margin-right: 2%;
    padding: 100px 0;
    float: left;
}

li.last .button {
    margin: 5px 0;
}

.button-large {
    font-family: "brandon-grotesque", "Brandon Grotesque";
    font-size: 18px;
    letter-spacing: 2px;
    font-weight: 600;
    text-transform: uppercase;
    border: 2px solid #ffffff;
    color: #ffffff;
    background-color: transparent;
    padding: 12px 32px;
    cursor: pointer;
    -moz-outline:0 none;
    outline:0 none;
    text-overflow: ellipsis;
    -webkit-font-smoothing: antialiased;
    -webkit-transition: all 0.35s;
    -moz-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
}

.button-large.teal {
    border: 2px solid #a4cec0;
    color: #a4cec0;
}

.button-large:hover {
    background: #ffffff;
    color: #383c41;
}

.button-large.teal:hover {
    background: #a4cec0;
    color: #ffffff;
}

.button-large:active {
    border: 2px solid #eeeeee;
    background-color: #eeeeee;
}

.button-large.teal:active {
    border: 2px solid #8cc3b1;
    background-color: #8cc3b1;
}

.button {
    font-family: "adobe-garamond-pro",sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 44px;
    color: #ffffff;
    background-color: #69707a;
    padding: 0 28px;
    cursor: pointer;
    border: none;
    -moz-outline:0 none;
    outline:0 none;
    text-overflow: ellipsis;
    -webkit-font-smoothing: antialiased;
    -webkit-transition: all 0.35s;
    -moz-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
}

.button:hover {
    background-color: #383c41;
}

.button:active {
    position: relative;
    top: 1px;
}


/* TEA & CERAMICS */


.buttons ul.categories {
    padding-top: 10px;
    display: inline-block;
}

.buttons ul.categories li {
    margin: 10px 0;
    padding: 10px;
    float: left;
    background-color: #ffffff;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
    border-right: 1px solid #eeeeee;
    border-radius: 0;
}

.buttons ul.categories.tea li {
    width: 14.5%;
}

.buttons ul.categories.ceramic li {
    width: 22.8%;
}

.buttons ul.categories li.last {
    border-right: none;
}

.button.category {
    width: 100%;
    padding: 0;
    background-color: #ffffff;
    color: #69707a;
}

li.last .button.category {
    margin: 0;
}

.button.green:hover {
    background-color: #c5d6a2;
    color: #ffffff;
}

.button.white:hover {
    background-color: #d7d0c9;
    color: #ffffff;
}

.button.oolong:hover {
    background-color: #f1c68f;
    color: #ffffff;
}

.button.red:hover {
    background-color: #e17c5e;
    color: #ffffff;
}

.button.aged:hover {
    background-color: #867682;
    color: #ffffff;
}

.button.teal:hover {
    background-color: #a4cec0;
    color: #ffffff;
}

.button.botanical:hover {
    background-color: #c7a5c5;
    color: #ffffff;
}


/* ==========================================================================
   Products
   ========================================================================== */

img {
    max-width: 100%;
} 

.product li {
    background: transparent;
}

li.grid {
    width: 310px;
    padding: 0 35px 0 0;
}

li.grid.last {
    padding-right: 0;
}

.product ul {
    padding: 35px 0;
    border-bottom: 1px solid #eeeeee;
}

.product ul#horizontal.last {
    padding-bottom: 10px;
    border-bottom: none;
}

.product p {
    max-width: 100%;
}

li.grid p {
    margin-bottom: 0;
}

li.list p {
    margin-bottom: 10px;
}

.out-of-stock {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #d77759;
}

.product-image {
    display: block;
    position: relative;
}

.product-text {
    padding-top: 10px;
}

.product-image, img.thumbnail {
    opacity: 1;
    transition: opacity .35s ease-in-out;
    -moz-transition: opacity .35s ease-in-out;
    -webkit-transition: opacity .35s ease-in-out;
}

.product-image:hover, img.thumbnail:hover {
    opacity: .8;
}

li.list.full .product-image:hover {
    opacity: 1;
}

li.grid a:active {
    top: 0px;
}

.overlay p {
    top: 44%;
    width: 100%;
    position: absolute;
}

.overlay-text {
    position: absolute;
}

.product a:hover {
    }

li.list, li.list.full {
    text-align: left;
    padding: 0;
    width: 100%;
}

li.list img {
    width: 31%;
    margin-right: 3.5%;
    float: left;
}

li.list.full img {
    width: 65%;
}

li.list img.thumbnail {
    width: 100px;
}

.product ul.thumbnail-image {
    float: left;
    padding: 0;
    border-bottom: none;
}

#horizontal ul.thumbnail-image li {
    margin: 10px 10px 0 0;
    padding: 0;
}

.product-name {
    border-bottom: 1px solid #eeeeee;
    margin-left: 68.5%;
    padding-bottom: 10px;
}

.product-options {
    padding-top: 24px;
}

.add-to-cart {
    padding-top: 40px;
    text-align: center;
}


/* ==========================================================================
   Content pages
   ========================================================================== */

.section.hero {
    background-color: #eeeeee;
    height: 260px;
}

.section.hero.about {
    background-image: url("http://song.pithytwigs.com/img/teafriends.jpg");
    background-repeat: no-repeat;
    background-position: center; 
    height: 460px;
    position: relative;
    background-size: cover;
}

.about-message {
    position: absolute;
    width: 100%;
    top: 6%;
    left: 0;
    color: #69707a;
}

.section.hero h1 {
    padding-top: 60px;
}

#support p, #colophon p, #about p {
    text-align: justify;
}

#support h2, #wholesale h2, #colophon h2, #about h2, #support h3, #wholesale h3, #colophon h3, #about h3 {
    padding: 14px 0;
}

blockquote {
    position: relative;
    max-width: 660px;
    margin: auto;
}

blockquote p {
    text-align: justify;
    font-style: italic;
    font-size: 24px;
}

blockquote p:before { 
    content: "“"; 
    font-size: 42px;
    color: #a4cec0;
    top: -12px;
    left: -20px;
    position: absolute;
}

blockquote p:after { 
    content: "”";
    font-size: 42px;
    color: #a4cec0;
    bottom: -20px;
    position: absolute;
}

.gallery {
    background-image: url("http://song.pithytwigs.com/img/shop-gallery1.jpg");
    width: 840px;
    height: 540px;
    margin: 60px auto 40px;
}

#about .gallery h2 {
    padding-top: 24%;
    color: #fff;
}

#about .hours {
    text-align: center;
}

.map {
    background-color: #a4cec0;
    height: 340px;
    color: #ffffff;
}

.map p {
    padding-top: 10%;
}



/* ==========================================================================
   404
   ========================================================================== */

.no-border {
    border-bottom: none;
}

.error {
    font-family: "adobe-garamond-pro",sans-serif;
    padding-top: 60px;
    letter-spacing: 20px;
    font-size: 280px;
    color: #4F57AA;
    border-bottom: none;
    margin: 0 auto;
    line-height: 1.35;
}