/*
Theme Name: Laughing Elephant
Theme URI: http://mattifesto.com/
Description: A theme designed for laughingelephant.com
Version: 01.02.18
Author: Matt Calkins
Author URI: http://mattifesto.com
*/

/*
 * Colors
 *
 * Text Brown:      #1a110b
 * Dark Brown:      #4d3422
 * Medium Brown:    #805739
 * Light Brown:     #b37950
 *
 * Deep Red:        #831915
 * Light Red:       #de5646
 *
 * Header Blue:     #213433
 *
 */


/**
 * Elements
 *
 */

html
{
    background-image: url("images/ArgyleBackgroundWide.jpg");
    background-position: top center;
    color: #1a110b;
    font-family: Georgia, serif;
}

a
{
    color: #831915;
    text-decoration: none;
}

.body a
{
    text-decoration: underline;
}

a:hover
{
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6
{
    font-weight: normal;
}

button,
a.Button
{
    height: 20px;
    background-color: #db9e72;
    border: 1px solid #b37950;
    color: #1a110b;
    font-family: Georgia, serif;
    font-size: 11px;
    padding: 0px 10px;
}

a.Button
{
    padding: 3px 10px;
    text-decoration: none;
}

button:hover,
a.Button:hover
{
    background-color: #e9ab7f;
}

input[type=text]
{
    height: 18px;
    border: 1px solid #b37950;
}

label
{
    margin-bottom: 2px;
}

textarea
{
    min-height: 100px;
    width: 100%;
    max-width: 390px;
    border: 1px solid #b37950;
    padding: 4px;
}


/**
 * Previous Stylesheet Additions and Overrides
 *
 */


/**
 * Shared Classes
 *
 */

div.Spinner
{
    background-image: url("images/spinner.gif");
    height: 16px;
    width: 16px;
}

    /* ul.Horizontal */

ul.Horizontal
{
    padding: 0px;
}

ul.Horizontal > li
{
    display: inline;
}

ul.Horizontal > li + li
{
    margin-left: 20px;
}

    /* .badge */

.badge
{
    width: 480px;
    xbackground-color: #db9e72;
    border: 1px solid #b37950;
    margin: 0px auto;
    text-align: center;
}

.badge > .header
{
    padding: 10px;
}

.badge > .container
{
    padding: 0px 10px 20px;
}

    /* .no-results Formatting for when pages don't have posts to display. */

.no-results
{
    width: 400px;
    margin: 0px auto;
}

    /* .pair */

.pair
{
    float: left;
    margin: 0px 30px 30px 0px;
}

.pair.small
{
    width: 75px;
}

.pair.medium
{
    width: 150px;
}

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

.pair .title
{
    display: block;
    border-bottom: 1px solid #805739;
    color: #805739;
    font-size: 10px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.pair .value
{
    display: block;
    color: #4d3422;
    font-size: 12px;
    line-height: 12px;
    margin: 0px 15px;
}

    /* .stationery */

div.Stationery > div.header
{
    height: 100px;
    width: 550px;
    background-image: url("images/LetterHeadTop.png");
    margin: 0px auto;
    padding: 0px;
}

div.Stationery > div.body
{
    width: 400px;
    background-image: url("images/LetterHeadMiddle.png");
    margin: 0px auto;
    padding: 30px 75px 20px;
}

div.Stationery > div.footer
{
    width: 400px;
    background-image: url("images/LetterHeadBottom.png");
    background-position: bottom left;
    margin: 0px auto;
    padding: 30px 75px 35px;
}


/**
 * .SearchForm
 *
 */

.SearchForm
{
    width: 150px;
    text-align: right;
}

.SearchForm label > span
{
    display: none;
}


/**
 * #pagecontainer
 *
 */

#pagecontainer
{
    width: 1050px;
    margin: 0px auto;
}


/**
 * #header
 *
 */

#header > div.header
{
    height: 35px;
    background-image: url('images/HeaderHeader.png');
}

#header > div.container
{
    position: relative;
    height: 240px;
    background-image: url('images/HeaderCenter.jpg');
    background-repeat: no-repeat;
    background-position: 35px 0px;
}

#header > div.container > div.Left
{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 35px;
    background-image: url('images/HeaderLeft.png');
}

#header > div.container > div.Right
{
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 35px;
    background-image: url('images/HeaderRight.png');
}

#header a
{
    color: #222;
}

#blogName,
#blogDescription
{
    display: none;
}

#header ul.Horizontal
{
    font-size: 14px;
    font-variant: small-caps;
    letter-spacing: 1px;
}

#header h1 a
{
    position: absolute;
    bottom: 40px;
    left: 40px;
    height: 180px;
    width: 540px;
}

#header .Extra
{
    position: absolute;
    top: -3px;
    left: 50px;
}

#header .Login
{
    position: absolute;
    top: -3px;
    right: 50px;
}

#header .SearchForm
{
    position: absolute;
    top: 25px;
    right: 40px;
    width: 300px;
    padding: 2px;
}

#header .PullDownMenu
{
    position: absolute;
    bottom: 7px;
    left: 50px;
    width: 950px;
}

#header .PullDownMenu li li a
{
    color: #eee;
}

#headerCarlLink
{
    display: block;
    position: absolute;
    bottom: 30px;
    right: 25px;
    height: 115px;
    width: 220px;
}

#headerCarlLink > span
{
    display: none;
}


/**
 * #title
 *
 */

#title
{
    background-image: url("images/PageBackground.M.png");
    padding: 10px 75px 10px;
    text-align: center;
}

body.FrontPage #title
{
    display: none;
}

#title .key,
#title .subtitle
{
    display: block;
    font-size: 11px;
    font-style: italic;
}

#title .time
{
    display: block;
    margin-bottom: 2px;
}

#title .author:before
{
    content: "Posted by: ";
}

body.single.product #title .subtitle
{
    display: none;
}


/**
 * #content
 *
 */

#content
{
    position: relative;
    background-image: url('images/PageBackground.M.png');
    background-repeat: repeat-y;
}

body.FrontPage #content
{
    height: 1000px;
    background-image: url('images/FrontContentCenter.jpg');
    background-position: 35px 0px;
    background-repeat: no-repeat;
    color: #eee;
}

body.FrontPage #content > div.Left
{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 35px;
    background-image: url('images/FrontContentLeft.png');
}

body.FrontPage #content > div.Right
{
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 35px;
    background-image: url('images/FrontContentRight.png');
}

#content > div.header
{
    height: 20px;
    padding: 0px 75px;
}

body.FrontPage #content > div.header
{
    display: none;
}

#content > div.body,
#content > div.container
{
    /* overflow: hidden; This is important because the theme is not in control
     * of the content that will be inside this section and if it has margins it
     * can cause odd visual breaks in the theme otherwise. */
    overflow: hidden;

    padding: 0px 75px 20px;
}

#content > div.footer
{
    padding: 0px 125px 40px;
}


/**
 * #content.single
 *
 */

#content.single > .footer div.meta
{
    width: 190px;
    float: left;
    margin-right: 10px;
}

#content.single > .footer div.meta.related
{
    width: 340px;
}

    /* This rule affects all #content, but is here for precedence. */
#content > .footer div.meta.edit
{
    width: 50px;
    float: right;
    margin-right: 0px;
    text-align: right;
}

#content.single > .footer h5
{
    margin-bottom: 5px;
}

#content.single > .footer ul
{
    list-style-type: none;
    padding-left: 0px;
}

#content.single > .footer li
{
    margin-bottom: 5px;
}


/**
 * #content.single.product
 *
 */

#content.single.product > .body
{
    padding: 0px 110px 20px;
}

#content.single.product .product-content
{
    overflow: hidden;
}

#content.single.product .product-instance
{
    width: 398px;
    border: 1px solid #b37950;
    margin: 0px 0px 40px 30px;
}

#content.single.product .product-instance .header
{
    border-bottom: 1px solid #b37950;
    padding: 10px 5px 0px;
    text-align: center;
}

#content.single.product .ProductImage
{
    float: left;
    max-width: 400px;
    -ms-interpolation-mode: bicubic;
}

#content.single.product .ImagePlaceHolder
{
    width: 398px;
    border: 1px solid #b37950;
    padding: 200px 0px;
    text-align: center;
}

#content.single.product .product-instance h3
{
    margin-bottom: 5px;
}

#content.single.product .product-instance h4.ProductCode,
#content.single.product .product-instance div.Price
{
    color: #4d3422;
    font-size: 14px;
    margin-bottom: 5px;
    text-align: center;
}

#content.single.product .product-instance div.Cart
{
    text-align: center;
    margin-bottom: 20px;
}

#content.single.product .product-instance div.Cart div.Indicator
{
    margin-bottom: -10px;
}

#content.single.product .product-instance div.Cart button
{
    width: 80px;
    margin-top: 15px;
}

#content.single.product .product-instance div.Cart span.Quantity
{
    font-size: 48px;
    margin: 0px 20px;
    vertical-align: middle;
}

#content.single.product .product-instance .body
{
    padding: 15px;
    overflow: hidden;
}

#content.single.product .product-instance .notice
{
    display: none;
    margin-left: 20px;
}

#content.single.product .product-metadata
{
    margin: 10px 5px;
    overflow: hidden;
    padding: 5px;
}

#content.single.product .footer
{
    width: 800px;
    border-top: 1px solid #b37950;
    margin: 20px auto 0px;
    padding: 20px 10px;
}

/**
 * .postlink
 *
 */

.postlink
{
    width: 293px; /* (900 - 20) / 3 */
    float: left;
    margin: 0px 0px 20px;
}

.postlink + .postlink
{
    margin-left: 10px;
}

.postlink .Thumbnail
{
    float: left;
    margin: 0px 10px 0px 0px;
}

.postlink .ReadMoreLink
{
    display: none;
}

.postlink .body
{
    margin: 10px 0px;
}

.postlink .pair
{
    float: none;
    margin: 0px auto 10px;
}

/**
 * .postlink.product
 *
 */

.postlink.product .time
{
    display: none;
}

.postlink.product .product-content
{
    overflow: hidden;
}

.postlink.product .product-instance
{
    border: 1px solid #b37950;
    margin: 0px 5px 15px 0px;
    overflow: hidden;
}

.postlink.product .Thumbnail
{
    width: 150px;
    -ms-interpolation-mode: bicubic;
}

.postlink.product .ImagePlaceHolder
{
    width: 148px;
    border: 1px solid #b37950;
    padding: 90px 0px;
    text-align: center;
}

.postlink.product h3
{
    border-bottom: 1px solid #b37950;
    font-size: 14px;
    line-height: 16px;
    margin: 0px 0px 5px;
    padding: 10px 5px;
    text-align: center;
}

.postlink.product h3 a
{
    text-decoration: none;
}

.postlink.product h3 a:hover
{
    text-decoration: underline;
}

.postlink.product h4.ProductCode,
.postlink.product div.Price
{
    color: #4d3422;
    font-size: 12px;
    margin-bottom: 5px;
    text-align: center;
}

.postlink.product .product-instance .cartIndicator
{
    margin-bottom: 10px;
    text-align: center;
}

.postlink.product .product-instance .cartIndicator .number
{
    font-size: 36px;
}

.postlink.product .product-instance .cartIndicator .text
{
    font-size: 10px;
}

.postlink.product .product-instance div.Buttons
{
    margin-bottom: 15px;
    text-align: center;
}

.postlink.product .product-instance div.Buttons > button
{
    margin-bottom: 5px;
}


/**
 * .posts-navigation
 *
 */

.posts-navigation
{
    width: 500px;
    border-top: 1px solid #b37950;
    font-size: 14px;
    font-style: italic;
    margin: 0px auto;
    overflow: hidden;
    padding: 20px 0px 0px;
}

.posts-next
{
    float: right;
}


/**
 * #comments
 *
 */

#comments
{
    background-image: url("images/PageBackground.M.png");
    padding: 0px 100px;
}

#comments > .header
{
    padding: 0px 0px 50px;
}

#comments > .container > .clear-floats
{
    padding-bottom: 70px;
}


/**
 * .comment
 *
 */

.comment
{
    width: 400px;
    float: left;
}

.comment + .comment
{
    margin-left: 50px;
}

.comment .number
{
    min-width: 75px;
    float: left;
    font-size: 48px;
    margin: -10px 15px 10px 0px;
    text-align: right;
}

.comment .time
{
    font-size: 10px;
}

.comment > .body
{
    clear: both;
}

.comment > .footer
{
    text-align: right;
}


/**
 * #commentForm
 *
 */

#commentForm
{
    background-image: url("images/PageBackground.M.png");
    padding: 0px 0px 40px;
}

#commentForm > .badge
{
    margin-bottom: 20px;
}

#commentForm form
{
    width: 400px;
    margin: 0px auto;
}

#commentForm form > .footer
{
    text-align: right;
}


/**
 * #footer
 *
 */

#footer
{
    clear: both;
}

#footer > div.container
{
    position: relative;
    height: 230px;
    background-image: url('images/FooterCenter.jpg');
    background-position: 35px 0px;
    background-repeat: no-repeat;
    padding: 10px 90px 0px;
}

#footer > div.container > div.Left
{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 35px;
    background-image: url('images/FooterLeft.png');
}

#footer > div.container > div.Right
{
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 35px;
    background-image: url('images/FooterRight.png');
}

#footer > .footer
{
    height: 35px;
    background-image: url('images/FooterFooter.png');
}

#footer a
{
    color: #eee;
}

#footer .column
{
    width: 170px;
    float: left;
}

#footer h4
{
    margin-bottom: 5px;
}

#footer ul
{
    list-style-type: none;
    padding: 0px;
}

#footer li
{
    margin-bottom: 3px;
}

#footer p.About
{
    font-size: 14px;
    line-height: 1.6;
    padding-top: 20px;
    overflow: hidden;
}

#footer p.About span.Special
{
    color: #eee;
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#footer div.Meta
{
    position: absolute;
    bottom: 0px;
    width: 800px; /* Should be full width of container for proper center. */
    font-size: 10px;
    text-align: center;
}

#footer div.Meta .Special
{
    font-style: italic;
}

#footer div.Meta .copyright
{
    margin-bottom: 7px;
}

/**
 * #content.user (Your Account)
 *
 */

#content.user dt
{
    margin-bottom: 5px;
}

#content.user dd
{
    margin: 0px 0px 10px 20px;
}