* { margin: 0; padding: 0; }

body { 
    background: #eeeeee;
    font: 62.5% "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a:hover {
    text-decoration: none;
}

#header {
    background: url(/static/img/base/header.png) top left repeat-x;
    height: 75px;
}

    #header .inner {
        width: 860px;
        margin: 0 auto;
        position: relative;
    }
    
    #header h1, #header h2 {
        display: none;
    }
    
    #header img,
    #header a img {
        position: absolute;
        border: none;
    }
    
    #header img.logo {
        top: 25px;
        left: 0;
    }
    
    #header img.slogan {
        top: 30px;
        right: 0;
    }

#nav {
    background: url(/static/img/base/navBg.png) top left repeat-x;
    height: 30px;
}

    #nav ul.nav {
        width: 858px;
        margin: 0 auto;
        height: 30px;
        background: url(/static/img/base/navDark.png) top left no-repeat;
        padding: 0 1px;
    }
    
    #nav ul.nav li {
        list-style-type: none;
        float: left;
        background: url(/static/img/base/navDark.png) top right no-repeat;
    }
    
    #nav ul.nav li.last {
        height: 30px;
        line-height: 30px;
        background: url(/static/img/base/navLight.png) top left no-repeat;
    }
    
    #nav ul.nav li a {
        display: block;
        height: 30px;
        line-height: 30px;
        font-size: 1.2em;
        color: #666;
        text-decoration: none;
        text-transform: uppercase;
        padding: 0 19px 0 20px;
        margin-right: 1px;
        background: url(/static/img/base/navLight.png) top left no-repeat;
        text-shadow: 0 1px 0 #DDD;
    }
    
    #nav ul.nav li a:hover {
        color: #444;
        background: url(/static/img/base/navLightHover.png) top left no-repeat;
    }
    
    body.body-home #nav ul.nav li.nav-home a,
    body.body-blog #nav ul.nav li.nav-blog a,
    body.body-asides #nav ul.nav li.nav-asides a,
    body.body-tasty #nav ul.nav li.nav-tasty a,
    body.body-elixir #nav ul.nav li.nav-elixir a,
    body.body-about #nav ul.nav li.nav-about a,
    body.body-contact #nav ul.nav li.nav-contact a {
        font-weight: bold;
        color: #333;
        background: url(/static/img/base/navLightHover.png) top left no-repeat;
    }
    
        body.body-home li.nav-home span,
        body.body-blog li.nav-blog span,
        body.body-asides li.nav-asides span,
        body.body-tasty li.nav-tasty span,
        body.body-elixir li.nav-elixir span,
        body.body-about li.nav-about span,
        body.body-contact li.nav-contact span {
            background: url(/static/img/base/navGlow.png) top left repeat-x;
            height: 7px;
            display: block;
        }

#subheader {
    background: #111 url(/static/img/base/subHeader.png) bottom left repeat-x;
    padding: 20px 0;
    font-size: 1.2em;
}

    #subheader .inner {
        width: 860px;
        margin: 0 auto;
        color: #FFF;
        position: relative;
    }
    
    #subheader h3 {
        color: #EEE;
        font-size: 2em;
        font-weight: normal;
        display: inline;
    }
    
    #subheader h3 a:link,
    #subheader h3 a:visited {
        color: #EEE;
        text-decoration: none;
    }
    
    #subheader h3 span {
        color: #B3B3B3;
    }
    
    #subheader small.post-meta {
        color: #999;
        text-transform: uppercase;
        font-size: 0.95em;
        margin-left: 1.5em;
    }
    
        #subheader small.post-meta a {
            color: #999;
        }
    
    #subheader p {
        line-height: 2em;
    }
    
    #subheader a {
        color: #FFF;
    }

#wrapper {
    background: #FFF;
    padding: 20px 0;
}

    #wrapper .inner {
        width: 860px;
        margin: 0 auto;
    }
    
    #wrapper .inner:after {
        content: ".";
        display: block;
        visibility: hidden;
        height: 0;
        clear: both;
    }
    
/** ==[ #content styles ]============================================= **/

#wrapper #content {
    float: left;
    width: 530px;
    display: block;
}

#wrapper #content h3 {
    font-size: 1.8em;
    line-height: 1em;
    margin-bottom: .75em;
    color: #444;
    text-transform: uppercase;
}

    #wrapper #content h3 span {
        color: #777;
        font-weight: normal;
    }

#wrapper #content h4 {
    font-size: 1.6em;
    line-height: 2em;
    color: #CC0048;
}

#wrapper #content h4 a:link,
#wrapper #content h4 a:visited {
    color: #ff004a;
    text-decoration: none;
}

    #wrapper #content h4 a:hover {
        color: #B90036;
    }

#wrapper #content h5.post-meta {
    font-size: 1.1em;
    font-weight: normal;
    color: #999;
    text-transform: uppercase;
    margin-bottom: 1em;
}

    #wrapper #content h5.post-meta a {
        color: #555;
    }

#wrapper .item-list .post,
#wrapper .item-list .aside {
    margin-bottom: 2em;
    position: relative;
}

#wrapper .item-list .post .item-icon,
#wrapper .item-list .aside .item-icon {
    width: 30px;
    height: 30px;
    background: url(/static/img/itemIcons.png) 0 0 no-repeat;
    position: absolute;
    left: -40px;
    top: 2px;
}

#wrapper .item-list .post .item-icon {
    background-position: top left;
}

    #wrapper .item-list .post:hover .item-icon {
        background-position: top right;
    }

#wrapper .item-list .aside .item-icon {
    background-position: bottom left;
}

    #wrapper .item-list .aside:hover .item-icon {
        background-position: bottom right;
    }


#wrapper #content .item-list h4 {
    color: #ff004a;
}

    #wrapper #content .item-list h4 span {
        font-weight: normal;
        color: #FF6693;
    }
    
    #wrapper #content .item-list .aside h4 {
        font-size: 1.3em !important;
    }
    
    #wrapper #content .item-list .aside p {
        font-size: 1.2em !important;
        color: #888;
    }


#wrapper #content p,
#wrapper #content ul li {
    font-size: 13px;
    line-height: 22px;
    margin-bottom: 20px;
}

#wrapper #content blockquote {
    margin-left: 10px;
    padding: 0 40px;
    color: #999;
    background: url(/static/img/blockquoteBg.png) 0 0 no-repeat;
}

#wrapper #content ul {
    margin-left: 2em;
    list-style-type: square;
}

#wrapper #content strong {
    font-weight: bold;
}

#wrapper #content img {
    margin-bottom: 1em;
}

#wrapper #content .post-content a:link,
#wrapper #content .post-content a:visited {
    padding: 2px 4px;
    color: #FF005A;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    text-decoration: none;
}

    #wrapper #content .post-content:hover a:link,
    #wrapper #content .post-content:hover a:visited {
        background: #FAEBF0;
    }
    
    
    #wrapper #content a.img {
        padding: 0 !important;
        border: none !important;
        margin: 0 !important;
    }
    
    #wrapper #content img.left {
        float: left;
        margin: 1em 1em 1em 0;
    }
    
    #wrapper #content img.right {
        float: right;
        margin: 1em 0 1em 1em;
    }
    

#wrapper #content .post-content a:hover {
    background: #FF005A !important;
    color: #FFF;
}

#wrapper #content .post-content p a.continue {
    color: #333;
    font-weight: bold;
    text-decoration: none;
}

#wrapper #content .post-content p:hover a.continue {
    background: #EEE;
}

#wrapper #content .post-content p a.continue:hover {
    background: #333 !important;
    color: #FFF !important;
}

#wrapper #content .social-sharing {
    display: block;
}

    #wrapper #content .social-sharing .social-item {
        float: left;
        margin-right: 15px;
    }

#wrapper #content pre {
    font-family: Consolas, Monaco, Courier, "Courier New", Verdana, sans-serif !important;
}

#wrapper #content .viewMore {
    border-top: 1px solid #EEE;
    height: 30px;
    line-height: 30px;
    text-align: right;
    font-size: 1.3em;
}

    #wrapper #content .viewMore a {
        color: #AAA;
    }

#wrapper #content small.caption {
    font-size: 1.1em;
    margin: 0 0 1em 0;
    border-bottom: 1px solid #EEE;
    padding-bottom: 1em;
    display: block;
    text-align: center;
    color: #444;
    line-height: 1.5em;
}

#wrapper #content p small.caption {
    font-size: 0.84615em;
}

/** ==[ comments ]=========================================== **/
ol.post-comments {
    list-style: none;
}

    ol.post-comments li {
        margin-bottom: 2em;
        padding-bottom: 1em;
        clear: both;
        border-bottom: 1px solid #EEE;
    }
    
        ol.post-comments li.last {
            border-bottom: none;
        }
    
        ol.post-comments li .commentMeta {
            float: left;
            width: 140px;
            text-align: right;
        }
        
            ol.post-comments li .commentMeta span {
                display: block;
                line-height: 1.5em;
            }
            
            ol.post-comments li .commentMeta span.author {
                color: #999;
                font-weight: bold;
                font-size: 1.3em;
            }
            
                ol.post-comments li .commentMeta span.author a {
                    color: #999;
                }
            
            ol.post-comments li .commentMeta span.time {
                color: #666;
                font-size: 1.1em;
            }


        ol.post-comments li .commentBody {
            display: block;
            margin-left: 155px;
        }


/** ==[ status messages ]============================================= **/
div.alert {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 5px 10px 5px 37px;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.8em;
    margin: 0 0 1em 0;
}

    div.alert.success {
        background: #C3E77D url(/static/img/alerts/success.png) 10px center no-repeat;
    }
    
    div.alert.error {
        background: #ED8A8C url(/static/img/alerts/error.png) 10px center no-repeat;
    }
    
    div.alert.warning {
        background: #F1B773 url(/static/img/alerts/warning.png) 10px center no-repeat;
    }
    
    div.alert.note {
        background: #EEE url(/static/img/alerts/note.png) 10px center no-repeat;
    }

/** ==[ contact styles ]============================================= **/
form {
    margin-bottom: 2em;
}

form fieldset {
    border: none;
    margin: 0 0 10px 0;
    font-size: 1.2em;
}

    form fieldset div.field {
        margin-bottom: 1em;
    }
    
    form div.field.hidden {
        display: none;
    }
    
    form fieldset div.field label {
        float: left;
        width: 150px;
        text-align: right;
        color: #999;
        line-height: 2em;
    }
    
    form fieldset div.field input,
    form fieldset div.field textarea,
    form fieldset div.field ul.errorlist,
    form div.buttons {
        display: block;
        margin-left: 170px;
    }
    
        form fieldset div.field input,
        form fieldset div.field textarea {
            padding: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            width: 300px;
            background: #EEE;
            border: 1px solid #EEE;
        }
    
        form fieldset div.field input:hover,
        form fieldset div.field textarea:hover {
            border-color: #AAA;
        }
        
        form fieldset div.field.error input,
        form fieldset div.field.error textarea {
            border-color: #F25D45;
        }
        
        form fieldset div.field input:focus,
        form fieldset div.field textarea:focus {
            border-width: 2px;
            padding: 4px;
            border-color: #FF337B;
            background: #FFF;
            outline: none;
        }
    
    form fieldset div.field ul.errorlist {
        list-style: none;
        line-height: 1.7em;
        font-size: 0.9166em;
        color: #F25D45;
    }

/** ==[ #sidebar styles ]============================================= **/

#wrapper #sidebar {
    float: right;
    width: 290px;
    display: block;
}

    #wrapper #sidebar .module {
        margin-bottom: 1em;
    }

    #wrapper #sidebar a:link,
    #wrapper #sidebar a:visited {
        padding: 2px 4px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        text-decoration: none;
    }
    
    #wrapper #sidebar:hover a:link,
    #wrapper #sidebar:hover a:visited {
        background: #EEE;
    }
    
    #wrapper #sidebar a:hover {
        background: #333 !important;
        color: #FFF !important;
    }
    
    #wrapper #sidebar a.btn:hover {
        background: url(/static/img/btnRight.png) 100% -26px no-repeat !important;
        color: #333 !important;
    }
    
    #wrapper #sidebar a.btn:active {
        background: url(/static/img/btnRight.png) 100% -52px no-repeat !important;
        color: #333 !important;
    }
    

    #wrapper #sidebar img.mug {
        margin-bottom: 0.5em;
    }

    #wrapper #sidebar h4 {
        color: #999;
        font-size: 1.3em;
        line-height: 2.6em;
    }
    
        #wrapper #sidebar h4 a:link,
        #wrapper #sidebar h4 a:visited {
            color: #999;
        }
    
        #wrapper #sidebar h4 span {
            font-weight: normal;
        }
    
    #wrapper #sidebar p {
        color: #333;
        font-size: 1.2em;
        line-height: 1.8em;
        margin-bottom: 1em;
    }

    #wrapper #sidebar p a {
        color: #666;
        font-weight: bold;
    }
    
    #wrapper #sidebar .module.twitter {
        
    }
    
        #wrapper #sidebar .module.twitter span.date {
            font-weight: bold;
        }
    
    #wrapper #sidebar .module dl.metalist {
        font-size: 1.2em;
    }
    
        #wrapper #sidebar .module dl.metalist dt {
            font-weight: bold;
            line-height: 1.8em;
        }
        
        #wrapper #sidebar .module dl.metalist dt a {
            color: #333;
        }
        
        #wrapper #sidebar .module dl.metalist dt a:hover {
            color: #FFF;
        }
        
        #wrapper #sidebar .module dl.metalist dd {
            color: #AAA;
            font-size: 0.95em;
            margin-bottom: 1em;
            padding-left: 4px;
        }
    
    #wrapper #sidebar ul {
        list-style-type: square;
        margin-left: 20px;
        font-size: 1.2em;
        line-height: 1.7em;
    }
    
    #wrapper #sidebar ul.requirements {
        font-size: 1.1em;
        color: #555;
    }
        
        #wrapper #sidebar ul li {
            margin-bottom: 1em;
        }

#wrapper ul.salad-list {
    font-size: 1.3em;
    line-height: 1.6em;
    margin: 0 0 3em 3em;
    list-style-type: square;
}

    #wrapper ul.salad-list li {
        margin-bottom: 1em;
    }

/** ==[ buttons styles ]============================================= **/
.buttons {
    display: block;
    padding: 5px 0;
}
    
    .buttons.top {
        margin-top: 10px;
    }
    
    .buttons.bottom {
        margin-bottom: 10px;
    }
    
    .buttons.center {
        text-align: center;
    }

span.or {
    font-size: 13px;
    line-height: 26px;
    margin-right: 7px;
    font-weight: bold;
}

a.btn, button.btn {
    font-size: 13px !important;
    border: 0 !important;
    padding: 0 !important;
    font-family: "Helvetica Neue", Helvetica, Arial, Sans-serif;
    height: 26px !important;
    width:auto;
    overflow: visible;
    display: inline-block;
    background: url(/static/img/btnRight.png) top right no-repeat !important;
    font-weight: bold;
    color: #333 !important;
    text-decoration: none;
    text-shadow: #FFF 0 1px 0;
    margin-right: 7px;
    outline: none;
    position: relative;
}

button.btn::-moz-focus-inner {
    border: none;  /* overrides extra padding in Firefox */
    margin-right: -2px !important;
}

.subheader .btn.right {
    position: absolute;
    top: 28px;
    right: 0;
}

a.btn span, 
button.btn span {
    display: block;
    padding: 0 0 0 20px !important;
    margin: 0 20px 0 0 !important;
    height: 26px;
    line-height: 26px;
    background: url(/static/img/btnLeft.png) top left no-repeat;
    white-space: nowrap;
    position: relative;
}

    a.btn:hover,
    button.btn:hover {
        background: url(/static/img/btnRight.png) 100% -26px no-repeat !important;
        cursor: pointer;
        color: #333 !important;
    }
    
    a.btn:hover span,
    button.btn:hover span {
        background-position: 0 -26px;
        background-color: transparent !important;
    }
    
    a.btn:active,
    button.btn:active {
        background: url(/static/img/btnRight.png) 100% -52px no-repeat !important;
    }
    
    a.btn:active span,
    button.btn:active span {
        background-position: 0 -52px;
    }

#sidebar .buttons {
    font-size: 1.2em;
}

/** ==[ #footer styles ]============================================= **/
#footer {
    width: 860px;
    margin: 15px auto 30px auto;
    text-align: center;
    font-size: 1.2em;
    color: #555;
    line-height: 1.8em;
    height: 1.8em;
}

    #footer p.left {
        float: left;
        font-weight: bold;
    }
    
    #footer p.right {
        float: right;
    }

    #footer a {
        color: #555;
    }
    
    #footer a:hover {
        text-decoration: none;
    }

    .amp {
        font: italic 120% "Baskerville", "Goudy Old Style", "Palatino", "Book Antiqua", serif;
    }


/** ==[ home specifics ]============================================= **/
.body-home #subheader h4 {
    font-size: 1.5em;
}

    .body-home #subheader p {
        font-size: 1.2em;
        color: #FFCCDE;
    }
    
        .body-home #subheader p a {
            color: #FFCCDE;
        }

/** ==[ tasty specifics ]============================================= **/

.body-tasty {
    
}

    .themeIntro {
        float: left;
        width: 280px;
        clear: both;
    }
    
        .themeIntro h4 {
            font-size: 1.4em;
            line-height: 1.8em;
            font-weight: normal;
            color: #FFCCDE;
        }
        
        .themeIntro .otherSites {
            color: #999;
        }
        
            .themeIntro .otherSites p.siteCloud {
                font-size: 1.2em;
                font-weight: bold;
            }
        
            .themeIntro .otherSites a {
                color: #CCC;
            }
            
            .themeIntro .otherSites a:hover {
                color: #FFF;
            }
    
    .themeVideo {
        display: block;
        margin-left: 310px;
    } 

.featureGrid {
    
}

    .featureGrid .feature {
        float: left;
        width: 170px;
        margin-right: 10px;
    }
    
        .featureGrid .feature.last {
            margin-right: 0;
        }
    
    .featureGrid .feature img {
        float: left;
        margin: 0 10px 10px 0;
    }
    
        .featureGrid .feature h4,
        .featureGrid .feature p {
            margin-left: 45px;
        }
        
        .featureGrid .feature h4 {
            font-size: 1.3em !important;
            margin-bottom: 5px;
            color: #666;
        }
        
        .featureGrid .feature p {
            font-size: 1.1em;
            line-height: 1.7em !important;
        }

div.buyNow {
    padding: 10px 20px;
    background: #FFFDCC;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    font-size: 1.2em;
}

    div.buyNow h4 {
        color: #6B692E !important;
    }

.chooseVariant p {
    margin-bottom: 1em;
}

ul.variantChoices {
    list-style-type: none;
    margin: 0 50px;
}

    ul.variantChoices li {
        margin-top: 15px;
        padding-bottom: 15px;
    }
    
        ul.variantChoices li.top {
            border-bottom: 1px solid #EEE;
        }
    
        ul.variantChoices input {
            float: left;
            margin-top: 10px;
        }
    
        ul.variantChoices li span {
            display: block;
            margin-left: 25px;
        }
        
        ul.variantChoices li span.name {
            font-weight: bold;
            font-size: 1.2em;
            margin-bottom: 0.5em;
        }

.body-tasty p.lastmodified {
    color: #666;
    text-align: right;
}

.body-tasty p.hr {
    color: #666;
    text-align: center;
}

.body-tasty p.sig {
    text-indent: 3em;
    color: #666;
    font-family: "Baskerville", "Goudy Old Style", "Palatino", "Book Antiqua", serif;
    font-style: italic;
    font-size: 1.5em !important;
}

span.code,
code {
    font-family: Consolas, Monaco, Courier, "Courier New", Verdana, sans-serif;
    padding: 2px;
    background: #EEE;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

.unicefBadge {
    width: 288px;
    height: 175px;
    display: block;
    position: absolute;
    background: url(/static/img/tasty/unicef.png) top left no-repeat;
    right: 0;
    top: -120px;
}

/** ==[ clearfix ]============================================= **/
.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.clearfix:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}

.floatRight {
    display: block;
    float: right;
    margin: 0 0 10px 10px;
}