/*------------------------------------*\
   BASE STORYNEXUS TEMPLATE

   CONTENTS
   - RESET AND UTILITIES
   - STRUCTURE
   - BASIC STYLES
   - REUSABLE CLASSES

   RESET AND UTILITIES

   http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
\*------------------------------------*/

html, body, div, span, applet, object, iframe,
blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

strong, b {
    font-weight: bold;
}

strong, b {
    font-weight: bold;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}

input[type=submit],
input[type=button] {
    margin: 0;
}

input::-moz-focus-inner /*Remove button padding in FF*/ {
    border: 0;
    padding: 0;
}
/* Clearfix */
/* From http://nicolasgallagher.com/micro-clearfix-hack/ */
/* For modern browsers */
.simple-form-field:before,
.simple-form-field:after,
.row:before,
.row:after,
.cf:before,
.cf:after {
    content: "";
    display: table;
}

.simple-form-field:after,
.row:after,
.cf:after {
    clear: both;
}
/* For IE 6/7 (trigger hasLayout) */
.row,
.cf {
    zoom: 1;
}
/* IE fixes */

.lt-ie8 .tab-item,
.lt-ie8 .nav1-item,
.lt-ie8 .usernav-item,
.lt-ie8 .footer1-item,
.lt-ie8 .footer2-item,
.lt-ie8 .choice-goal-target {
    /* IE7 hack to mimic inline-block on block elements */
    *display: inline;
    *zoom: 1;
}

input[type=submit] {
    margin: 0;
}

small {
    font-size: 0.8em;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html {
    min-height: 100%;
    position: relative;
}

body {
    margin: 0;
    padding: 0 0 0 0;
    background-color: #000;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    color: #fff;
    height: 100%;
    position: relative;
}

.accesskeys {
    margin: 0px;
    padding: 0px;
    position: absolute;
    top: -1000px;
    font-size: 0.1em;
    line-height: 1px;
}

.outer_wrapper {
    position: relative;
    margin: 0 auto;
    padding: 0 0 0 0;
    width: 960px;
    display: block;
}

    /* hack for proper expansion of float wrapper */
    .outer_wrapper:after {
        content: '.';
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }


/* standard styles */

p {
    margin: 0 0 0 0;
    padding: 0;
    font-size: 0.8em;
    line-height: 16pt;
}


h1 {
    margin: 0 0 0.4em 0;
    padding: 0;
    font-size: 1.2em;
    font-weight: normal;
    clear: both;
    color: #fff;
}

h2 {
    padding: 0;
    margin-bottom: 2px;
    font-size: 1.1em;
}

h3 {
    margin-bottom: 5px;
    padding: 0;
    font-size: 1em;
}

h4 {
    margin: 0;
    padding: 0;
    font-size: 0.9em;
}

h5 {
    margin: 0;
    padding: 0;
    color: #000;
    font-size: 0.8em;
}

/* standard styles */


.lhs_col {
    margin: 0;
    padding: 0;
    float: left;
    width: 130px;
    height: auto;
}

.rhs_col {
    margin: 0;
    padding: 0;
    float: left;
    width: 830px;
    height: auto;
}



.content {
    margin: 0 15px;
    padding: 0 0 0 0;
    float: left;
}


.content_lhs {
    margin: 0;
    padding-top: 10px;
    float: left;
    width: 700px;
    height: auto;
}

.content_rhs {
    margin-top: 15px;
    padding: 0px;
    float: left;
    width: 130px;
    height: auto;
}


.rhs_textbox_head {
    margin: 20px 0 0 0;
    float: left;
    width: 130px;
    min-height: 14px;
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/css_img/rhshead.png);
}

.rhs_textbox {
    padding: 0 8px;
    float: left;
    width: 114px;
    word-break: break-word;
    height: auto;
    font-size: 0.9em;
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/css_img/rhsbody.png);
}

.rhs_textbox_foot {
    float: left;
    width: 130px;
    min-height: 14px;
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/css_img/rhsfoot.png);
}

.rhs_textbox_footer {
    margin: 30px 0 0 0;
    padding: 5px 15px 5px 15px;
    float: left;
    width: 127px;
    height: auto;
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/rhs/rhsbody.png);
}

.rhs_textbox p {
    margin: 0;
    padding: 0;
    float: left;
    color: #000;
    line-height: 12pt;
    font-size: 0.755em;
}

.rhs_textbox h1 {
    margin: 0;
    padding: 0;
    float: left;
    color: #C8170E;
    line-height: 12pt;
}

div.betaribbon {
    display: none;
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/beta.png);
    position: absolute;
    left: 40px;
    height: 100px;
    width: 100px;
    top: 40px;
    z-index: 10;
}

/* INTRO CONTENT */

div.teaser {
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/larger/gazettewithshadow.jpg);
    width: 581px;
    height: 768px;
    margin-left: auto;
    margin-right: auto;
}

input.chargen {
    border-radius: 2px;
    width: 250px;
    height: 20px;
    margin: 0px 5px 3px 0;
    border: none;
}

.home-link, a.home-link, a.home-link:active, a.home-link:visited, a.home-link:hover, a.home-link:link {
    color: #a5a5a5;
    text-decoration: underline;
}

#home-header .home-caption {
    font-size: 18px;
    width: 670px;
    font-style: italic;
}

.home-caption {
    color: #cccccc;
}

#errorMessage {
    float: right;
    width: 100px;
    font-size: 10px;
    color: Red;
}

#home-header .home-caption cite {
    float: right;
    margin-right: 40px;
}

.home-caption cite {
    display: block;
}

div#home-header {
    padding-top: 20px;
}

div#home-container {
    padding: 0px 90px 0px 280px;
    width: 660px;
    margin: 0 auto;
    color: #cccccc;
}

#home-container p {
    margin: 10px 0;
    line-height: normal;
}

div#home-login {
    width: 260px;
    padding: 15px;
    background: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/css_img/home-panel-trans.png);
    float: left;
}

    div#home-login label {
        color: #FFFFFF;
    }

div#home-blurb {
    width: 240px;
    padding: 0px 130px 0px 0px;
    float: left;
}

    div#home-blurb h3 {
        margin-top: 0px;
    }

div.intro_main {
    min-width: 1024px;
    min-height: 900px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    margin-top: -15px;
}

div.intro_main_noimg {
    width: 1024px;
    height: 900px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

p.teaser {
    float: none;
    text-align: center;
    clear: left;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    margin-bottom: 20px;
    font-size: 1em;
}

div.redirect {
    clear: both;
}

    div.redirect p, h1, h2, h3, h4, h5 {
        float: none;
    }




.area_hdr {
    margin: 0 15px;
    padding: 0;
    float: left;
    width: 670px;
    min-height: 173px;
    background-repeat: no-repeat;
    position: relative;
    background-repeat: no-repeat;
}

#sharedContentFeed {
    float: right;
    width: 114px;
    background: #b8a98c;
    box-shadow: 0 2px 8px #000000;
    padding: 5px;
    border: 3px solid #736448;
    color: #000000;
    font-weight: 300;
    font-size: 8pt;
    max-height: 175px;
    overflow: hidden;
}

    #sharedContentFeed h3 {
        margin: 0 0 0.2em 0;
        padding-bottom: 0.2em;
    }

    #sharedContentFeed li a {
        display: block;
        color: #000000;
        padding-bottom: 0.2em;
        margin-bottom: 0.2em;
        border-bottom: 1px solid #B1996D;
    }

        #sharedContentFeed li a strong {
            color: #295800;
        }

.qualityCategory {
    border-bottom: 1px solid black;
    padding-bottom: 2px;
    margin-bottom: 2px;
    clear: both;
}



/* ------------------------- */
/* -- YOU NO TAKE CANDLE! -- */
/* ------------------------- */
.candle-container {
    position: relative;
    width: 65px;
    height: 235px;
    display: inline-block;
}

#actionsCandle1 {
    margin: 0 0 0 -10px;
}

    #actionsCandle1.onlyOne {
        margin: 0 0 0 30px;
    }

.candle-body {
    width: 65px;
    height: 184px;
    background: url('http://images.echobazaar.failbettergames.com.s3.amazonaws.com/css_img/candle01BG.png') left bottom no-repeat;
    position: absolute;
    bottom: 0;
    /*	-webkit-transition: height 1s ease;
	-moz-transition: height 1s ease;
	-ms-transition: height 1s ease;
	-o-transition: height 1s ease;
	transition: height 1s ease; */
}

    .candle-body.snuffed, #actionsCandle2 .candle-body.snuffed {
        background: url('http://images.echobazaar.failbettergames.com.s3.amazonaws.com/css_img/candleSnuffed.png') left bottom no-repeat;
    }

        .candle-body.snuffed .candle-tip {
            display: none;
        }

.candle-tip {
    width: 65px;
    height: 75px;
    background: url('http://images.echobazaar.failbettergames.com.s3.amazonaws.com/css_img/candleTop.png') left top no-repeat;
    margin-top: -45px;
}

#actionsCandle2 .candle-body {
    background: url('http://images.echobazaar.failbettergames.com.s3.amazonaws.com/css_img/candle02BG.png') left bottom no-repeat;
}


/* CANDLES END */


.welcome {
    margin-top: 175px;
    padding: 0;
    float: left;
    color: #CCCCCC;
    font-size: 0.8em;
}


.lhs_image {
    margin: 0;
    padding: 0;
    float: left;
    height: 621px;
    width: 135px;
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/lhs_label.png);
    background-repeat: no-repeat;
}


/* CARD TABLE*/

table.card {
    border-collapse: collapse;
    padding: 0;
    width: 120px;
    font-size: 0.8em;
    margin: 30px 0em 0.2em 10px;
}

    table.card th {
        font-weight: bold;
        padding: 3px 0px 2px 4px;
        margin: 0 0 0 0;
        font-size: 0.855em;
        color: #000;
        border-width: 0;
        border-style: 0;
        text-align: left;
        line-height: normal;
    }

        table.card th p {
            padding: 0 0 0 0;
            margin: 0 0 0 0;
            border: 0;
            font-size: 100%;
            font-weight: bold;
            line-height: normal;
            color: #BD0707;
        }

    table.card td {
        padding: 2px 9px 2px 4px;
        margin: 0 0 0 0;
        vertical-align: top;
        text-align: center;
        font-size: 95%;
        line-height: normal;
        color: #BD0707;
        font-weight: bold;
    }

        table.card td p {
            font-size: 100%;
            line-height: normal;
            padding: 0 0 0 0;
            margin: 0 0 0 0;
            border: 0;
        }



/* TABS STARTS */


ul#tabnav {
    display: block;
    padding: 0;
    margin: 10px 0 0 0;
    text-align: left;
    font-size: 0.7em;
    max-height: 2.4em;
}

    ul#tabnav li {
        display: inline-block;
        font-weight: normal;
        width: 80px;
        margin: 0 7px 0 0;
        background-position: center;
        font-size: 0.955em;
        text-align: center;
    }

        ul#tabnav li a, ul#tabnav li a:link, ul#tabnav li a:visited {
            display: inline-block;
            text-decoration: none;
            white-space: nowrap;
            color: #35322E;
            width: 85px;
            padding: 0.5em 0;
            background: #817766;
            border-radius: 5px 5px 0 0;
            box-shadow: inset 0 -2px 1px rgba(0,0,0,0.7);
            border-top: 1px solid rgba(255,255,255,0.3);
            font-weight: bold;
        }

            ul#tabnav li a:hover {
                text-decoration: none;
                color: #000;
                background: #b69868;
            }

            ul#tabnav li a.selected {
                color: #000;
                background: #bdaf95;
                box-shadow: none;
            }


.tab_content_bg {
    margin: 0 0 0 0;
    padding: 0;
    float: left;
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/tabs/parchtile.jpg);
    background-repeat: repeat-y;
    width: 665px;
    height: auto; /*min-height: 380px;*/
    color: #000;
    position: relative;
    z-index: 1;
}

.shareDalog_content_bg {
    margin: 0 0 0 0;
    padding: 0;
    float: left;
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/tabs/parchtile.jpg);
    background-repeat: repeat-y;
    width: 665px;
    height: auto; /*min-height: 380px;*/
    color: #000;
    position: relative;
}

.tab_content_ftr {
    margin: 0;
    padding: 0;
    float: left; /*removed parchment footer while we trial Paul's new texture 	background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/tabs/tab_content_ftr.png); 	background-repeat: repeat-y;*/
    width: 663px;
    height: auto;
    min-height: 32px;
    position: relative;
    z-index: 1;
}


.tab_content_bg_bordered {
    margin: 0 0 0 0;
    padding: 0px 10px 0px 10px;
    float: left;
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/tabs/curlymain.png);
    background-repeat: repeat-y;
    width: 645px;
    height: auto;
    min-height: 380px;
    color: #000;
    position: relative;
    z-index: 1;
}

div.space_wheretabs_arent {
    float: left;
    width: 665px;
    height: 34px;
}

div.bordered_header {
    margin: 0;
    padding: 0;
    float: left;
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/tabs/curlyheader.png);
    background-repeat: repeat-y;
    width: 665px;
    height: auto;
    min-height: 30px;
    position: relative;
    z-index: 2;
}

div.bordered_footer {
    margin: 0;
    padding: 0;
    float: left;
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/tabs/curlyfooter.png);
    background-repeat: repeat-y;
    width: 665px;
    height: auto;
    min-height: 30px;
    position: relative;
    z-index: 2;
}

.tab_content {
    margin: 10px 10px 0 17px;
    padding: 0;
    float: left;
    width: 630px;
    min-height: 380px;
}

.tab_content_bordered {
    margin: 0 15px 0 17px;
    padding: 0;
    float: left;
    width: 610px;
}

.tab_content p, .tab_content h1, .tab_content h2, .tab_content h3 {
    margin: 0 0 10px 0;
    padding: 0;
    color: #000;
    border: none;
}

/* TABS STARTS */
ul#bazaarnav {
    display: block;
    padding: 0 0 0 0px;
    margin: 10px 0 0 0;
    text-align: left;
    float: left;
    width: 660px;
}

    ul#bazaarnav li {
        display: block;
        float: left;
        font-weight: normal;
        height: 22px;
        width: 76px;
        margin: 0;
        padding: 3px 3px 0px 1px;
        background-position: right center;
        text-align: center;
    }

        ul#bazaarnav li a, ul#bazaarnav li a:link, ul#bazaarnav li a:visited {
            display: block;
            float: left;
            padding: 3px 3px 0px 1px;
            margin: 0;
            text-decoration: none;
            white-space: nowrap;
            font-weight: normal;
            color: #fff;
            width: 76px;
            height: 22px;
            background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/tabs/unselected.png);
            background-repeat: no-repeat;
        }

        ul#bazaarnav li.smaller a, ul#bazaarnav li.smaller a:link, ul#bazaarnav li.smaller a:visited {
            width: 60px;
        }

        ul#bazaarnav li.smaller {
            width: 60px;
        }

        ul#bazaarnav li a.active {
            color: #fff;
            padding: 3px 3px 0px 1px;
            margin: 0;
            width: 80px;
            height: 22px;
            background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/tabs/unselected.png);
            background-repeat: no-repeat;
        }


        ul#bazaarnav li a:hover {
            text-decoration: none;
            color: #000;
            font-weight: normal;
            padding: 3px 3px 0px 1px;
            margin: 0;
            background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/tabs/selected.png);
            background-repeat: no-repeat;
            height: 26px;
            width: 80px;
            background-position: 0px top;
            position: relative;
            z-index: 10;
        }

        ul#bazaarnav li a.selected {
            text-decoration: none;
            font-weight: normal;
            color: #000;
            padding: 3px 3px 0px 1px;
            margin: 0;
            background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/tabs/selected.png);
            background-repeat: no-repeat;
            height: 26px;
            width: 80px;
            background-position: 0px top;
            position: relative;
            z-index: 10;
        }

.bazaar_content_bg {
    margin: 0 0 0 0;
    padding: 0;
    float: left;
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/tabs/bazaar_content.png);
    background-repeat: repeat-y;
    width: 645px;
    height: auto;
    min-height: 380px;
    color: #000;
    position: relative;
    z-index: 1;
}

.bazaar_content_ftr {
    margin: 0;
    padding: 0;
    float: left;
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/tabs/bazaar_content_ftr.png);
    background-repeat: repeat-y;
    width: 643px;
    height: auto;
    min-height: 32px;
    position: relative;
    z-index: 1;
}

.bazaar_content {
    margin: 10px 10px 0 17px;
    padding: 0;
    float: left;
}

    .bazaar_content p {
        border: medium none;
        color: #000000;
        float: left;
        margin: 0 0 5px;
        padding: 0;
    }

.actions {
    margin: 10px 0 5px 0;
    padding: 5px 0;
    float: left;
    width: 130px;
    text-align: center;
    color: #fff;
    font-size: 0.8em;
    font-weight: bold;
    border-top: 1px solid #252525;
    border-bottom: 1px solid #252525;
}

.actions_remaining {
    margin: 0 0 0 20px;
    padding: 0;
    color: #63AC22 !important;
}

#actionsCountdownMinutes:after {
    content: ":";
}

.timer {
    padding: 0;
    float: left;
    text-align: center;
    width: 130px;
    font-size: 0.7em;
    color: #AFAFAF;
}

.whysoslow {
    margin: 10px 15px 10px 13px;
    padding: 0;
    float: left;
    font-size: 0.8em;
}

.time {
    padding: 0;
    background-color: #000;
    color: #FFD52C;
}

.clickable {
    cursor: pointer;
}

/* STORYLET STARTS */
.storylet {
    border: 1px solid black;
    position: relative;
    margin: 0px 0 6px 0;
    padding: 6px 0 6px 6px;
    float: left;
    min-height: 105px;
    width: 625px;
    background: #d8d2c9;
    background-repeat: repeat-x;
}

    .storylet.locked {
        background: #BEB9AA;
    }

.storylet_lhs {
    margin: 0;
    /*padding: 0 15px 0 0;*/
    float: left;
    /*width: 105px;*/
}

.storylet_rhs {
    margin: 0 0 30px 0;
    padding: 0;
    float: left;
    width: 525px;
}

.storylet_farright {
    margin: 0;
    padding: 0;
    float: left;
    width: 100px;
}

.unlocked {
    margin: 0 0 0 2px;
    padding: 0 0 0 5px;
    float: left;
    position: relative;
    top: -20px;
    color: #000;
    width: 96px;
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/unlocked_bg.png);
    background-repeat: repeat;
}

.storylet p {
    margin: 0;
    padding: 0;
    float: left;
    width: auto;
}

.storylet h1, .storylet h2, .storylet h3 {
    margin: 0 0 0 0;
    padding: 0;
    font-size: 1em;
}

/* STORYLET ENDS */

/* YOU CONTENT STARTS */


.you_lhs {
    margin: 0;
    padding: 0;
    float: left;
    height: auto;
    width: 135px;
}

    .you_lhs p {
        float: left;
    }


#you_pic {
    position: absolute;
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/frame_top.png);
    margin: 0;
    top: 0px;
    left: 0px;
    padding-left: 15px;
    padding-top: 16px;
    float: left;
    height: 235px;
    width: 185px;
    z-index: 15;
}

#you_home {
    background: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/frame_top.png);
    position: absolute;
    padding-left: 15px;
    padding-top: 16px;
    float: left;
    top: 40px;
    left: 12px;
    height: 235px;
    width: 185px;
    z-index: 10;
}

#you_extras {
    position: absolute;
    top: 300px;
    width: 100%;
    z-index: 90;
}

.frame_button {
    position: relative;
    left: 26px;
    top: -20px;
}



.progress {
    -moz-background-clip: border;
    -moz-background-inline-policy: continuous;
    -moz-background-origin: padding;
    margin: 0 0 0 0;
    padding: 0;
}

.rank {
    -moz-background-clip: border;
    -moz-background-inline-policy: continuous;
    -moz-background-origin: padding;
    background: #FFFFFF none repeat-x scroll 0 0;
    border: 1px solid #D8B072;
    display: block;
    height: 12px;
    margin-right: 5px;
    width: 120px;
}

.red {
    margin: 0 0 0 0px;
    padding: 0 0 0 0;
    font-weight: bold;
    color: #C8170E;
    position: relative;
    top: 0;
}


.you_top_lhs {
    margin: 0;
    padding: 0;
    float: left;
    width: 330px;
    margin-right: 30px;
}

.you_top_rhs {
    margin: 0;
    padding: 0;
    float: left;
    width: 230px;
}




.you_mid_lhs {
    margin: 6px 20px 0px 0px;
    padding: 0;
    float: left;
    width: 212px;
    position: relative;
}

.you_mid_mid {
    margin: 0 -40px 0px 0px;
    padding: 0;
    float: left;
    width: 155px;
    height: auto;
    position: relative;
    left: -7px;
    top: -5px;
}

.you_mid_rhs {
    margin: 0 0 0 0px;
    padding: 0;
    float: left;
    width: 280px;
    position: relative;
    top: -5px;
}

#profile-options {
    margin: 10px 0;
}

    #profile-options h2 {
        border-bottom: 1px solid #000000;
        font-size: 0.8em;
        margin-bottom: 0;
    }

#setProfileToPrivate {
    margin-bottom: 0.5em;
}

#ProfilePrivateMessage {
    font-size: 7pt;
    color: #555555;
    padding-left: 2.8em;
}

#quality-chooser {
    background: #A89D8C;
    box-shadow: 0 1px 3px #000000;
    box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.3), 0 1px 3px rgba(0,0,0,0.75);
}

.you_bottom {
    float: left;
    clear: both;
    margin: 20px 0 0 0;
}


.you_bottom_lhs {
    clear: both;
    margin: 0;
    padding: 0;
    float: left;
    width: 300px;
}



.you_bottom_rhs {
    margin: 0 0 0 30px;
    padding: 0;
    float: left;
    width: 300px;
}

.qualitiesToggleDiv {
    float: left;
    clear: both;
}

.qualities {
    margin: 0 0 10px 0;
    padding: 0;
}

    .qualities.relationshipQuality {
        border: 1px solid #333333;
        background: rgba(255,255,255,0.1);
        cursor: pointer;
        padding-bottom: 5px;
    }

        .qualities.relationshipQuality .rq-icon {
            float: left;
            margin-right: 20px;
        }

        .qualities.relationshipQuality .plusMinus {
            float: right;
            width: 15px;
            height: 15px;
            background: #333333;
            font-size: 7pt;
            color: #FFFFFF;
            font-weight: bold;
            text-align: center;
            line-height: 13px;
        }

.relationshipsList {
    font-size: 0.8em;
    padding-top: 0.5em;
    clear: both;
}

    .relationshipsList ul {
        margin-left: 1.5em !important;
    }

.qualities_lhs {
    padding: 0;
    float: left;
    width: 55px;
}

.qualities_rhs {
    margin: 0;
    padding: 0;
    float: left;
    width: 220px;
}

    .qualities_rhs p {
        margin: 6px 0 0 0;
        padding: 0;
        float: left;
        line-height: 9pt;
        font-size: 0.7em;
    }



.you_icon {
    min-height: 57px;
}

ul.you_icon P {
    padding: 0;
    margin: 2px 0 0 0;
    float: left;
    line-height: normal;
}

ul.you_icon {
    display: block;
    padding: 0;
    margin: 0px 0 0 0;
    text-align: left;
    float: left;
    margin-top: 10px !important;
}

    ul.you_icon li {
        margin: 0 10px 10px 0;
        padding: 0;
        width: 40px;
        height: 52px;
        min-height: 52px;
        max-width: 40px;
        display: block;
        float: left;
        position: relative;
    }

.you_lhs ul.you_icon li {
    margin: 0 5px 5px 0;
}



ul.you_icon li a, ul.you_icon li a:link, ul.you_icon li a:visited {
    margin: 0;
    padding: 0;
    width: 40px;
    height: 52px;
    float: left;
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/you/icon_placeholder_bg.png);
    background-repeat: repeat;
    border: 2px solid #333333;
    box-shadow: 0 2px 3px rgba(0,0,0,0.75);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

ul.noborder li a, ul.noborder li a:link, ul.noborder li a:visited {
    border: 2px solid #000 !important;
}


ul.you_icon li a.active {
    margin: 0;
    padding: 0;
    width: 40px;
    height: 52px;
    float: left;
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/you/icon_placeholder_bg.png);
    background-repeat: repeat;
}

/* IS THIS NEEDED?
ul.you_icon li a:hover
{
    text-decoration: none;
    float: left;
    color: #000;
    margin: 0;
    padding: 0;
    width: 40px;
    height: 52px;
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/you/icon_placeholder_bg.png);
    background-repeat: repeat;
    border: 1px solid #DE0707;
}
*/

ul.you_icon li.empty-icon {
    width: 40px;
    max-width: 42px;
    height: 52px;
    margin: 3px 8px 6px 2px;
    box-shadow: 0 0 3px 1px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.1);
}

.you_divider {
    margin: 11px 0 7px 0;
    padding: 0;
    float: left;
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/you/you_divider.png);
    background-repeat: no-repeat;
    height: 3px;
    width: 130px;
}



a.spendit, a.spendit:link, a.spendit:visited {
    color: #DE0707;
    text-decoration: none;
    cursor: pointer;
}

    a.spendit:hover {
        text-decoration: underline;
        cursor: pointer;
    }


/* YOU CONTENT ENDS */



/* BAZAAR ITEMS START */
.bazaar_item {
    margin: 20px 25px 0 0;
    padding: 6px 0 0 6px;
    float: left;
    height: auto;
    min-height: 110px;
    width: 275px;
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/bazaar_item_bg.png);
    background-repeat: repeat-x;
    border-top: 1px solid #7F766A;
    border-bottom: 1px solid #7F766A;
}

.bazaar_item_lhs {
    margin: 0;
    padding: 0;
    float: left;
    width: 50px;
}

    .bazaar_item_lhs img {
        float: left;
        margin: 2px 10px 0px 2px;
        padding: 0;
        border: 1px solid #ccc;
    }

.bazaar_item_rhs {
    margin: 0;
    padding: 0;
    float: left;
    width: 220px;
}

.bazaar_item p {
    margin: 10px 0 10px 0;
    padding: 0;
    float: left;
    width: 205px;
    font-size: 0.7em;
    line-height: 12pt;
}

.bazaar_item_title {
    margin: 0 0 0 0;
    padding: 0;
    font-size: 0.755em;
    height: 40px;
    font-weight: bold;
}

.bazaar_item_amount {
    color: #BE1007;
}

.fadeable_message {
    color: #BE1007;
}

/* BAZAAR ITEMS END */


div#storyletsSection {
    margin-top: -40px;
}

#deckDrawSection {
    clear: both;
}

#card_deck {
    float: left;
    width: 134px;
    height: 162px;
    margin: 3px 8px 0px -5px;
}

.cardDeckLink-general {
    display: block;
    width: 132px;
    height: 162px;
    background: url('http://images.echobazaar.failbettergames.com.s3.amazonaws.com/cards/decks_new.png');
    background-repeat: no-repeat;
    cursor: pointer;
}

.deck-size-full {
    background-position: 0 0;
}

.deck-size-2 {
    background-position: -132px 0;
}

.deck-size-1 {
    background-position: -264px 0;
}

.deck-size-none {
    background-position: -496px 0;
}

#cardDeckLinkGrey.deck-size-full {
    background-position: 0 -165px;
}

#cardDeckLinkGrey.deck-size-2 {
    background-position: -132px -165px;
}

#cardDeckLinkGrey.deck-size-1 {
    background-position: -264px -165px;
}

#cardDeckLinkGrey.deck-size-none {
    background-position: -496px -165px;
}

.cardDeckLink-general:after {
    display: block;
    width: 118px;
    height: 148px;
    background: url('http://images.echobazaar.failbettergames.com.s3.amazonaws.com/cards/card_new_back.png');
    background-repeat: no-repeat;
    content: '';
    position: relative;
    left: 16px;
    top: -3px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    box-shadow: 0 3px 5px #000000;
    box-shadow: 0 3px 5px rgba(0,0,0,0.8);
    border-radius: 3px;
}

#cardDeckLinkGrey:after {
    background-position: -118px 0;
}

.refill-nex {
    display: block;
    width: 118px;
    height: 149px;
    box-shadow: 0 3px 5px #000000;
    box-shadow: 0 3px 5px rgba(0,0,0,0.8);
    border-radius: 3px;
    margin: -5px 0 0 10px;
}

.cardDeckLink-general:hover:after, .cardDeckLink-general:focus:after {
    left: 21px;
    top: -8px;
    box-shadow: -5px 8px 5px #000000;
    box-shadow: -5px 8px 5px rgba(0,0,0,0.3);
    z-index: 10;
}

#cardDeckLinkGrey:hover:after, #cardDeckLinkGrey:focus:after {
    left: 16px;
    top: -3px;
    transition: all 0.3s ease;
    box-shadow: 0 3px 5px #000000;
    box-shadow: 0 3px 5px rgba(0,0,0,0.8);
}

.deck-contents-description {
    font-size: 8pt;
    color: #555555;
    text-align: center;
}

ul#cards {
    float: left;
    text-align: left;
    clear: none;
    width: 490px;
}

.hand-slot-empty {
    width: 118px;
    height: 148px;
    background: rgba(0,0,0,0.2);
    border-radius: 3px;
    box-shadow: 0 0 8px 2px rgba(0,0,0,0.2);
}

ul#cards li {
    margin: 0 10px 40px 0;
    width: 114px;
    height: 148px;
    display: block;
    float: left;
    position: relative;
}


    ul#cards li a, ul#cards li a:link, ul#cards li a:visited {
        margin: 0 10px 0 0;
        padding: 10px 9px 8px 9px;
        float: left;
        width: 100px;
        height: 130px;
        background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/cards/cards_new.png);
        background-repeat: no-repeat;
        position: relative;
        z-index: 5;
        overflow: hidden;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        box-shadow: 0 3px 5px #000000;
        box-shadow: 0 3px 5px rgba(0,0,0,0.8);
        border-radius: 3px;
    }

        ul#cards li a.active {
            margin: 0 10px 0 0;
            padding: 20px 0 0 15px;
            width: 118px;
            height: 150px;
            float: left;
            background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/cards/cardtemplate_light.png);
            background-repeat: no-repeat;
        }

a.redCard {
    background-position: -590px 0;
}

a.bronzeCard {
    background-position: -354px 0;
}


a.silverCard {
    background-position: -236px 0;
}

a.blackCard {
    background-position: -472px 0;
}

a.goldCard {
    background-position: -118px 0;
}

a.purpleCard {
    background-position: -708px 0;
}


ul#cards li a:hover {
    text-decoration: none;
    color: #000;
    background-repeat: no-repeat;
    margin: -5px 0 10px 5px;
    box-shadow: -5x 8px 5px #000000;
    box-shadow: -5px 8px 5px rgba(0,0,0,0.3);
    z-index: 10;
}


ul#cards li.card_deck {
    margin: 0 0px 0 0;
    padding: 29px 0 0 0px;
    width: 140px;
    height: 165px;
    display: block;
    float: left;
}

#cardDeckLinkGrey {
    opacity: 1;
    filter: alpha(opacity=100);
}


ul#cards li.card_deck a {
    margin: 0 0px 0 0;
    padding: 20px 0 0 0px;
    width: 140px;
    height: 165px;
    display: block;
    float: left;
    background-image: none;
}

ul#cards li.card_deck form a {
    padding: 0;
}

    ul#cards li.card_deck form a input, ul#cards li.card_deck form a img {
        width: 125px;
        height: 160px;
    }

ul#cards li.card_deck a, ul#cards li.card_deck a:link, ul#cards li.card_deck a:visited {
    margin: 0 10px 0 0;
    padding: 20px 0 0 0px;
    width: 140px;
    height: 165px;
    float: left;
    background-repeat: no-repeat;
}

    ul#cards li.card_deck a.active {
        margin: 0 10px 0 0;
        padding: 20px 0 0 0px;
        width: 140px;
        height: 165px;
        float: left;
        background-repeat: no-repeat;
    }






/* TABS ENDS */




a, a:link, a:visited {
    color: #C8170E;
    text-decoration: none;
    margin: 0;
    padding: 0;
}

    a, a:hover {
        color: #C8170E;
        text-decoration: underline;
        margin: 0;
        padding: 0;
    }

        a, a:active {
            color: #C8170E;
            text-decoration: none;
            margin: 0;
            padding: 0;
        }

div.clear {
    clear: both;
}

div.clear5 {
    margin: 0;
    padding: 0;
    height: 5px;
    clear: both;
}

div.clear30 {
    margin: 0;
    padding: 0;
    height: 30px;
    clear: both;
}

div.clear70 {
    margin: 0;
    padding: 0;
    height: 70px;
    clear: both;
}

.content ul {
    font-size: 0.8em;
    list-style-position: outside;
    margin: 0;
    padding: 0;
    clear: both;
}

.content strong {
    font-weight: bold;
}

.content u {
    text-decoration: underline;
}

.content em {
    font-style: italic;
}

/******************** image alignment start */

.img-float-left {
    float: left;
    margin: 2px 10px 0px 2px;
    padding: 0;
}

.img-float-left-border {
    width: 80px;
    height: 105px;
    float: left;
    margin: 0px 10px 0px 0px;
    padding: 0;
    border: 1px solid #000;
}

.img-float-right {
    float: right;
    margin: 2px 2px 5px 10px;
    padding: 0;
}



/******************** image alignment end */



/******************** standard buttons start */


#home-login .standard_btn:hover {
    background: #c6f191 !important;
}


.standard_btn:hover, .standard_btn:focus, a:hover.standard_btn,
input:hover.standard_btn,
.standard_btn.label {
    background: #f9d486 !important;
}

.standard_btn.cancel {
    background: #d98b89;
}

    .standard_btn.cancel:hover {
        background: #d98b89 !important;
    }


.standard_btn.greyed, .standard_btn:disabled, .standard_btn:disabled:hover, .standard_btn:disabled:focus {
    cursor: default !important;
    color: #83817f;
    background: #cfcbc8 !important;
}

input:hover.standard_btn.greyed {
    border: 1px solid #5E3D1A;
    background: #FFFFFF !important;
    color: #83817f;
}

a.action-cost {
    position: relative;
    z-index: 1000;
    float: right;
    border-left-width: 0px !important;
    width: 29px !important;
}

.standard_btn, a.standard_btn,
input.standard_btn {
    width: auto !important;
    font-size: 14px;
    background: #FFF;
    color: #000;
    font-weight: bold;
    border: 1px solid #5E3D1A;
    box-shadow: 1px 1px 2px 0px #666;
    text-decoration: none !important;
    margin: 0;
    cursor: pointer;
}

.standard_btn, a.standard_btn {
    height: 18px;
    text-align: center;
    display: block;
    padding: 3px 6px !important;
    width: auto !important;
    display: inline-block; /*width: 100px;*/
}

button.standard_btn {
    box-sizing: content-box;
}

input.standard_btn {
    box-sizing: border-box;
    height: 26px;
    display: block;
    padding: 3px 5px !important;
}

.standard_btn.small {
    font-size: 0.78em;
    height: auto;
    padding: 3px 8px !important;
}

/**standard buttons end */



/****discard buttons start */

input.discard_btn {
    font-size: 0.7em !important;
    font-weight: normal;
    color: #000;
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/standard_btn_bg.jpg);
    border: 1px solid #5E3D1A;
    background-repeat: repeat-x;
    display: inline;
    cursor: pointer;
    margin: 0;
    padding: 2px !important;
    position: absolute;
    bottom: -30px;
    left: 35px;
}

input:hover.discard_btn {
    color: #C03C02;
    width: auto !important;
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/standard_btn_bg_hover.jpg);
    display: inline;
    cursor: pointer;
    border: 1px solid #C03C02;
}

/**discard buttons end */


/* table-with-header */
.content table.plain {
    clear: both;
    border-collapse: collapse;
    padding: 0;
    width: 96%;
    font-size: 0.815em;
    margin: .6em 0em 1.3em 0em;
    border-bottom: 1px solid #000;
}

    .content table.plain th {
        font-weight: bold;
        padding: 3px 5px 2px 4px;
        margin: 0 0 0 0;
        font-size: 0.815em;
        color: #D7BA83;
        border-color: #000;
        border-width: 0;
        border-style: 0;
        text-align: left;
        line-height: normal;
    }

        .content table.plain th p {
            padding: 0 0 0 0;
            margin: 0 0 0 0;
            border: 0;
            font-size: 100%;
            font-weight: bold;
            line-height: normal;
            color: #fff;
        }

    .content table.plain td {
        border: 1px solid #000;
        padding: 6px 6px 5px 4px;
        margin: 0 0 0 0;
        vertical-align: top;
        text-align: left;
        font-size: 95%;
        line-height: normal;
    }

        .content table.plain td p {
            font-size: 100%;
            line-height: normal;
            padding: 0 0 0 0;
            margin: 0 0 0 0;
            border: 0;
        }


/**FORM ELEMENTS START */

label {
    font-size: 0.755em;
    color: #000;
}


select {
    padding: 0.2em;
    width: auto;
}




/**FORM ELEMENTS END */


.float_right {
    margin: 0;
    padding: 0;
    float: right;
}

.float_left {
    margin: 0;
    padding: 0;
    float: left;
}

p.red {
    font-size: 0.755em;
    line-height: 17pt;
    margin: 0 0 0 0px;
    padding: 6px 0px 6px 0px !important;
    float: left;
    color: #FF3333;
    clear: both;
}



/*FOOTER START*/


.footer {
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/footer_line.png);
    background-position: center top;
    background-repeat: no-repeat;
    clear: both;
    height: 229px;
    margin: 20px auto 0 auto;
    padding: 10px 0 0;
    width: 960px;
}


.footer_links {
    margin: 0;
    padding: 0;
    float: left;
    width: 305px;
}

    .footer_links p {
        margin: 0 0 0 15px;
        padding: 0;
        font-size: 0.7em;
        color: #63AC22;
    }


* html .footer_links {
    margin: 0;
    padding: 0;
    float: left;
}


ul#footernav {
    display: block;
    padding: 0;
    margin: 0 0.8em 0 0;
    width: 600px;
    float: right;
}

    ul#footernav li {
        display: block;
        float: right;
    }


        ul#footernav li a, ul#footernav li a:link, ul#footernav li a:visited {
            display: block;
            padding: 0px 7px 0px 7px;
            text-decoration: none;
            font-weight: normal;
            font-size: 0.755em;
            color: #63AC22;
        }

            ul#footernav li a.active {
                color: #78CE2C;
            }

            ul#footernav li a:hover {
                text-decoration: underline;
                color: #78CE2C;
            }


/*FOOTER END*/
/*QUALITY CHANGE BOX STARTS*/

.quality_update_box {
    box-shadow: 7px 7px 8px #818181;
    -webkit-box-shadow: 5px 5px 4px #A19D9B;
    -moz-box-shadow: 5px 5px 4px #A19D9B;
    filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=4, offY=4, positive=true);
    border: 1px solid #666;
    background-color: #EFE9E1;
    height: auto;
    width: 630px;
    float: left;
    padding: 0;
    margin: 0 0 20px 0;
}

    .quality_update_box h3 {
        padding: 0;
        margin-left: 14px;
        margin-top: 10px;
        margin-bottom: 10px;
        float: left;
    }



    .quality_update_box p {
        padding: 0;
        margin: 2px 0 0 0;
        float: left;
        width: 565px;
    }

    .quality_update_box a {
        color: #FF3333;
    }


    .quality_update_box .score {
        padding: 0;
        margin: 0px 0 0 0;
        float: left;
        width: auto;
        font-size: 0.755em;
        font-weight: bold;
        position: relative;
    }

    .quality_update_box .red {
        margin: 0 0 0 0px;
        padding: 0 2px 0 2px;
        font-weight: bold;
        color: #FF3333;
        position: relative;
        top: 0;
    }


ul#quality_update {
    display: block;
    padding: 0;
    margin: 0 0 10px 15px;
    text-align: left;
    float: left;
}

    ul#quality_update li {
        margin: 5px 5px 0px 0;
        padding: 0;
        width: 40px;
        height: 52px;
        min-height: 52px;
        max-width: 40px;
        display: block;
        float: left;
    }




        ul#quality_update li a, ul#quality_update li a:link, ul#quality_update li a:visited {
            margin: 0;
            padding: 0;
            width: 40px;
            height: 52px;
            float: left;
            background-repeat: repeat;
            border: 1px solid #333333;
        }

            ul#quality_update li a.active {
                margin: 0;
                padding: 0;
                width: 40px;
                height: 52px;
                float: left;
                background-repeat: repeat;
            }


            ul#quality_update li a:hover {
                text-decoration: none;
                float: left;
                color: #000;
                margin: 0;
                padding: 0;
                width: 40px;
                height: 52px;
                background-repeat: repeat;
                border: 1px solid #DE0707;
            }



.quality_update_progress {
    -moz-background-clip: border;
    -moz-background-inline-policy: continuous;
    -moz-background-origin: padding;
    float: left;
    margin: 0 0 0 0;
    padding: 0;
}

.quality_update_rank {
    float: left;
    -moz-background-clip: border;
    -moz-background-inline-policy: continuous;
    -moz-background-origin: padding;
    background: #FFFFFF none repeat-x scroll 0 0;
    border: 1px solid #D8B072;
    display: block;
    height: 12px;
    width: 400px;
    margin: 2px 5px 0 5px;
    padding: 0;
}


/*QUALITY CHANGE BOX ENDS*/

.storylet_flavour_text {
    box-shadow: 7px 7px 8px #818181;
    -webkit-box-shadow: 5px 5px 4px #A19D9B;
    -moz-box-shadow: 5px 5px 4px #A19D9B;
    filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=4, offY=4, positive=true);
    border: 1px solid #666;
    background-color: #EFE9E1;
    height: auto;
    width: 610px;
    padding: 10px 10px 10px 10px;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 1em;
}

.whoMadeThisHeaderText {
    float: left;
    width: 500px;
}

.whoMadeThis {
    float: right;
    width: 100px;
    font-size: 8pt;
    cursor: pointer;
    color: #777777;
    text-align: right;
}

    .whoMadeThis i {
        font-size: 11pt;
        position: relative;
        top: 0.1em;
    }

.storylet_flavour_text h3 {
    margin-bottom: 10px;
}

.storylet_flavour_text p {
    margin-bottom: 10px;
}


#activeStoryletBox .quality_update_box {
    background-color: #D3C7B7;
}

/*FORMATTED TEXT*/

a.onparchment {
    color: #C8170E;
    text-decoration: underline;
}

div.centred {
    margin: 0 auto;
    text-align: center;
}

h2.diaryhead {
    margin: 0 auto;
    text-align: center;
    color: #FFFFFF;
    font-style: italic;
    font-family: "Book Antiqua", Palatino, serif;
}

div.diary {
    margin: 0 auto;
    text-align: left;
    color: #333333;
    font-style: italic;
    font-weight: bold;
    font-family: "Book Antiqua", Palatino, serif;
}

div.fancytext {
    margin: 0 auto;
    font-family: "Book Antiqua", Palatino, serif;
}

div.fancytextcentred {
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
    font-family: "Book Antiqua", Palatino, serif;
}


.foxfire a {
    color: #BCF22B;
    text-decoration: underline;
}

.foxfire a, div.foxfire a:hover {
    color: #fff;
    text-decoration: underline;
}

.foxfire a, div.foxfire a:active {
    color: #BCF22B;
    text-decoration: underline;
}

div.sidebarlink {
    font-size: smaller;
    text-align: center;
}

    div.sidebarlink a, div#sidebarshare a:active {
        color: #63AC22;
        text-decoration: underline;
        font-weight: bold;
    }

        div.sidebarlink a:hover, div#sidebarshare a:focus {
            color: #78CE2C;
        }


#sidebar {
    width: 130px;
    margin: 0px auto;
}

.fl_sidebar_ad {
    position: relative;
    display: block;
    width: 130px;
    height: 275px;
}

.fl_sidebar_ad_base, .fl_sidebar_ad_highlight {
    position: absolute;
    top: 0;
    left: 0;
}

.fl_sidebar_ad_highlight {
    opacity: 0;
    -webkit-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    -ms-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
}

.fl_sidebar_ad:hover .fl_sidebar_ad_highlight, .fl_sidebar_ad:focus .fl_sidebar_ad_highlight {
    opacity: 1;
}
/*quantity on thing quality
div.qq
{
    color: #FFF;
    font-size: 10pt;
    text-decoration: none;
    position: relative;
    top: 35px;
    height: 0;
    width: 1px;
    font-weight: bold;
}
*/
div.qq {
    position: absolute;
    bottom: -6px;
    right: -6px;
    text-align: center;
    line-height: 12px;
    padding: 2px;
    background: #333333;
    font-size: 6pt;
    color: #e9e9e9;
    min-width: 12px;
    height: 12px;
    border-radius: 12px;
    box-shadow: 0 1px 2px #000000;
    box-shadow: 0 1p 2px rgba(0, 0, 0, 0.5);
    font-family: Verdana, Sans-Serif;
    font-weight: bold;
}

    div.qq:empty {
        display: none;
    }
/*level on status quality*/
div.ql {
    color: #DE0707;
    font-size: 0.9em;
    text-decoration: none;
    position: relative;
    top: 35px;
    height: 0;
    width: 1px;
    font-weight: bold;
}



/*landing page content
----------------------------------------------------------*/


.site-message {
    padding: 4px;
    float: left;
    clear: left;
    width: 620px;
    margin-top: 10px;
}

    .site-message h3.date {
        float: right;
        font-size: smaller;
        margin: 0px 0px 0px 0px;
    }

    .site-message p {
        margin: 0px;
        padding: 0px;
        line-height: normal;
    }

    .site-message h2 {
        font-size: 14px;
        margin: 0px;
        padding: 0px;
    }

    .site-message .message-content {
        /*    float:left;     width:560px; */
    }

    .site-message .message-icon {
        float: left;
        margin-right: 5px;
        width: 40px;
        height: 52px;
    }

    .site-message a {
        font-size: smaller;
        text-decoration: underline;
    }

    .site-message p, .site-message h1, .site-message h2, .site-message h3 {
        margin: 0 0 0px 0;
        padding: 0;
        color: black;
        border: none;
    }




div#headline {
    clear: both;
    font-size: 0.8em;
    font-weight: bold;
}

div#invitesAlert {
    float: left;
    width: 100px;
    height: 30px;
    padding-top: 10px;
    padding-left: 10px;
}

img#invitesImage {
    float: left;
}

div#invitesLink {
    float: left;
    padding-top: 10px;
    font-size: 0.8em;
    font-weight: bold;
}

div#topMap {
    margin-left: -17px;
    width: 670px;
    overflow: hidden;
    position: relative;
    clear: both;
}

div.landingPageColumn {
    float: left;
    width: 305px;
    margin: 20px 0px 0px 0px;
}

table.landingtable {
    clear: left;
}

span.feedmessage {
    font-size: 0.8em;
}

input.friendimage {
    margin: 5px 5px 5px 5px;
    float: left;
    height: 52px;
    width: 40px;
}

span.friendtext {
    margin: 5px 5px 10px 0px;
    float: left;
    font-size: 0.8em;
}

table.landingtable a {
    color: #C8170E;
}

div.landing_scrolling {
    overflow: auto;
    height: 400px;
}

.bordered-panel {
    position: relative;
    padding: 5px;
    margin-bottom: 8px;
    background: #d6c6ac;
    border: 2px solid #7d7560;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    clear: both;
}

    .bordered-panel.with-buttons {
        padding-bottom: 28px;
    }

.with-buttons .buttons {
    position: absolute;
    bottom: 10px;
    right: 10px;
}


.redesign_heading h1, .redesign_heading h2, .redesign_heading h3 {
    margin: 0px !important;
    padding: 0px !important;
    clear: none;
}

div.redesign-panel {
    margin: 20px;
    background: #b8a98c;
    padding: 20px;
    color: #000000;
}

.redesign_heading,
h1.redesign,
h2.redesign,
h3.redesign {
    text-transform: uppercase;
    border: 0px solid black;
    border-bottom-width: 1px;
    line-height: normal;
    color: #000000;
}

.bordered-panel .panel-icon {
    width: 40px;
    height: 52px;
    float: left;
    margin: 0px 5px 5px 0px;
    border: 1px solid #837663;
}

#recentEvents {
    float: right;
}

.explanation {
    font-weight: bold;
    font-style: italic;
    font-size: .8em;
}

/*end landing page content
----------------------------------------------------------*/



/*image gallery
----------------------------------------------------------*/

ul.imagegallery li {
    display: block;
    float: left;
    margin-left: 20px;
}

    ul.imagegallery li p {
        width: 100px;
        text-align: center;
        font-style: italic;
        line-height: 12px;
        font-size: 12px;
    }


/*----------------------------------------------------------
*/

/* small-icon buttons
----------------------------------------------------------*/

ul.iconbuttons {
    display: block;
    padding: 0 0 0 0px;
    margin: 0;
    text-align: left;
    float: left;
    clear: both;
}

    ul.iconbuttons li {
        margin: 0 3px 0 0;
        padding: 2px 0 0 2px;
        width: 48px;
        height: 58px;
        display: block;
        float: left;
    }


        ul.iconbuttons li a, ul#cards li a:link, ul#cards li a.visited {
            margin: 0 5px 0 0;
            padding: 2px 0 0 2px;
            width: 48px;
            height: 58px;
            float: left;
            background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/iconbuttonsmall.png);
            background-repeat: no-repeat;
        }

            ul.iconbuttons li a:active {
                margin: 0 5px 0 0;
                padding: 2px 0 0 2px;
                width: 48px;
                height: 58px;
                float: left;
                background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/iconbuttonsmall.png);
                background-repeat: no-repeat;
            }


            ul.iconbuttons li a:hover {
                margin: 0 5px 0 0;
                padding: 2px 0 0 2px;
                width: 48px;
                height: 58px;
                float: left;
                background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/iconbuttonsmall.png);
                background-repeat: no-repeat;
            }




/* TOOLTIP 
----------------------------------------------------------
This is used in the jquery-based tooltip hover script.*/
#tooltip {
    position: absolute;
    border: 1px solid #333;
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/tooltip_bg.png);
    padding: 2px 5px;
    color: #333;
    display: none;
    width: 200px;
    font-size: 0.755em;
    z-index: 2000;
}

    #tooltip strong {
        color: Black;
    }

a.tooltip {
    text-decoration: none !important;
}

.tooltip .tooltip {
    display: none;
}

#tooltip .wordy-list {
    list-style-type: disc;
    margin: 0;
    padding: 0.3em 0 0 1.5em;
    font-size: 0.9em;
}

    #tooltip .wordy-list li {
        padding: 0;
        margin: 0;
    }


/*Help icon
-------------------*/
a.helpicon {
    color: black;
    font-weight: bold;
    font-size: 1em;
}


/*Challenges
----------------------------------------------------------*/
span.diff6 em {
    color: #92278f;
    font-style: inherit;
}

span.diff5 em {
    color: #981b1e;
    font-style: inherit;
}

span.diff4 em {
    color: #f26522;
    font-style: inherit;
}

span.diff3 em {
    color: #fcaf17;
    font-style: inherit;
}

span.diff2 em {
    color: #00aeef;
    font-style: inherit;
}

span.diff1 em {
    color: #8dc63f;
    font-style: inherit;
}

span.diff0 em {
    color: inherit;
    font-style: inherit;
}


/*Character Creation
----------------------------------------------------------*/
img.avatarchoice {
    cursor: pointer;
    margin: 9px;
    box-shadow: 2px 2px 2px 0px #666;
    border: 1px solid black;
}

img.selectedavatarchoice {
    background-color: Gray;
    border: 4px solid Black;
    margin: 6px;
}

/*end Character Creation
----------------------------------------------------------*/

/*mysteries
----------------------------------------------------------*/
div.mystery {
    font-size: 0.8em;
}

div.mysteryImage {
    float: left;
    padding-top: 2px;
    margin-right: 10px;
}

div.mysteryRhs {
    float: left;
}


div.mysteryAnswer {
    margin-bottom: 10px;
}

div.mysteryRandomAnswer {
}
/*end mysteries
----------------------------------------------------------*/
/*FATE
----------------------------------------------------------*/
.fate-buy-header {
    overflow: hidden;
}

    .fate-buy-header p {
        float: left;
        width: 70%;
    }

    .fate-buy-header .purchase-fate-button {
        float: right;
        width: 30%;
    }

.purchase-fate-button {
    text-transform: uppercase;
    display: inline-block;
    text-transform: uppercase;
    font-weight: bold;
    color: #312510;
    background: #deb253;
    background: -moz-linear-gradient(top, #deb253 0%, #d38f19 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#deb253), color-stop(100%,#d38f19));
    background: -webkit-linear-gradient(top, #deb253 0%,#d38f19 100%);
    background: -o-linear-gradient(top, #deb253 0%,#d38f19 100%);
    background: -ms-linear-gradient(top, #deb253 0%,#d38f19 100%);
    background: linear-gradient(to bottom, #deb253 0%,#d38f19 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#deb253', endColorstr='#d38f19',GradientType=0 );
    box-shadow: 0 1px 2px #000000, inset 0 1px #ffdf5f;
    border: 1px solid #996914;
    display: inline-block;
    cursor: pointer;
    margin-left: 0 5px;
    padding: 8px 16px;
    text-shadow: 0 1px 1px #ffdf5f;
    font-size: 1.2em;
    border-radius: 2px;
}

    .purchase-fate-button:hover, .purchase-fate-button:focus {
        background: #ffdf5f;
        background: -moz-linear-gradient(top, #ffdf5f 0%, #fb9200 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffdf5f), color-stop(100%,#fb9200));
        background: -webkit-linear-gradient(top, #ffdf5f 0%,#fb9200 100%);
        background: -o-linear-gradient(top, #ffdf5f 0%,#fb9200 100%);
        background: -ms-linear-gradient(top, #ffdf5f 0%,#fb9200 100%);
        background: linear-gradient(to bottom, #ffdf5f 0%,#fb9200 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdf5f', endColorstr='#fb9200',GradientType=0 );
        border: 1px solid #c07000;
        text-decoration: none;
    }

#exceptional-friends {
    background: #d8cab9;
    overflow: hidden;
    padding: 10px;
    margin-bottom: 15px;
    border: 3px solid #000000;
    border-radius: 9px;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.7);
    font-size: 0.9em;
}

.exceptional-friend-content {
    float: right;
    width: 450px;
}

.exceptional-friend-card {
    float: left;
    width: 140px;
    margin-right: 10px;
}

.exceptional-friend-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 2px solid #000000;
}

.exceptional-friend-content .story-highlight {
    margin: 0 0 1em 0;
    padding: 6px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.3), inset 0 1px rgba(255,255,255,0.3);
    border-radius: 6px;
    border: 1px solid #94856E;
    background: #d8d2c9;
    background-repeat: repeat-x;
}

.exceptional-friend-footer .purchase-fate-button {
    float: right;
}

.exceptional-friend-footer p {
    float: left;
    font-size: 1em;
    font-weight: bold;
    margin-top: 0.5em;
    text-transform: uppercase;
}

td.fatecard {
    width: 140px;
    text-align: center;
}

    td.fatecard a {
        cursor: pointer;
    }

        td.fatecard a.cannot-afford {
            opacity: 0.4;
            cursor: inherit;
        }


div.fatereadout {
    width: 641px;
    height: 24px;
    text-align: center;
    padding-top: 2px;
    font-weight: bold;
    background-image: url('http://images.echobazaar.failbettergames.com.s3.amazonaws.com/fate/fatereadout.png');
}

ul.qualities {
    list-style: none;
}

    ul.qualities li {
        float: left;
        margin-right: 5px;
    }
/*END FATE
----------------------------------------------------------*/
ul.mantelpiece-scrapbook li {
    display: block;
    width: 100%;
    height: auto;
    max-width: inherit;
}

.profile-quality-selection {
    margin-left: 50px;
}

    .profile-quality-selection h5 {
        margin-bottom: 0.2em;
    }

    .profile-quality-selection p {
        margin: 0 0 0.2em 0;
    }

ul.mantelpiece-scrapbook img {
    border: none;
    width: 40px;
    height: 52px;
}

span.dontshout {
    font-size: 12px;
}

div.informationPopover {
    display: none;
    position: relative;
    background-image: url('http://images.echobazaar.failbettergames.com.s3.amazonaws.com/tooltip_bg.png');
    z-index: 99;
    padding: 2px;
    font-size: 12px;
    width: 250px;
}

.storylet-form {
    margin: 0px auto;
    width: 500px;
}


    .storylet-form .submit {
        clear: both;
        float: right;
    }

    .storylet-form label {
        width: 100%;
        float: left;
        clear: both;
        margin: 0px 0px 3px 0px;
    }

        .storylet-form label input[type=text], .storylet-form select, .storylet-form textarea {
            float: right;
            width: 300px;
        }

a.usableitem {
    border: 2px solid #63AC22 !important;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.75);
    cursor: pointer;
}

    a.usableitem:hover {
        border-color: #78CE2C !important;
        box-shadow: 0 0 12px 1px #C0FF88;
    }

    a.usableitem.disabled, a.usableitem.disabled:hover {
        border: 2px solid #DE0707 !important;
        box-shadow: 2px 2px 3px rgba(0,0,0,0.75);
    }

.item-use-warning {
    display: block;
    padding-top: 0.5em;
    font-weight: bold;
    color: #C8170E;
    clear: both;
    font-size: 0.8em;
}

.gold-border {
    border: 1px solid gold !important;
}

.italic {
    font-style: italic;
}

#general-dialog {
    padding: 0px;
}

.ui-dialog {
    padding: 0px !important;
}

#general-dialog {
    background: #BEB096;
}

#shareDialogue {
    width: 450px;
    padding: 25px;
    float: left;
    position: relative;
    background: #BEB096;
}

    #shareDialogue h1 {
        font-size: 20px;
        line-height: 1em;
        color: #000000;
    }

#twitterInvites {
    min-height: 160px;
}

    #twitterInvites label {
        display: block;
        float: left;
        width: 33%;
    }

#editableText {
    width: 330px;
    margin: 10px 0;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
}

.outgoingMessage {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #5f5f5f;
    margin-bottom: 0.8em;
}

.sendOptions {
    margin-top: 20px;
}

    .sendOptions b {
        padding-right: 10px;
    }

.shareLabels {
    padding: 0 10px 0 5px;
    float: none;
    width: 513px;
}

/* external invitations*/


.signin_buttons {
    clear: both;
    width: 164px;
    margin: 0 auto;
}


/*http://pmob.co.uk/pob/centred-float.htm*/

.external-invitations-container {
    /*    padding-top:150px;
    float:right;
    position:relative;
    left:-50%;
    text-align:left;
*/
}

ul.external-invitations {
    list-style: none;
    /*
float:left;

position:relative;
left:50%;
*/
}

    ul.external-invitations li {
        margin-bottom: 20px;
        float: left;
        /*
    
    position:relative;
    margin-right:10px;
*/
    }

        ul.external-invitations li div.external-invitation { /*
     width: 380px;
    float: left;
    color: #000000;
    padding: 10px;
    background: #bcb8ad;
    -moz-box-shadow: 2px 2px 3px #000000;
    -webkit-box-shadow: 2px 2px 3px #000000;
*/
        }

        ul.external-invitations li p.call-to-action {
            /*
    width:350px;
    padding:10px 0px 30px 0px;
    margin:0px auto;
    text-align:center;
    clear:both;
*/
        }

        ul.external-invitations li h3 {
            font-size: 14px;
            /*
    margin: 0 0 10px 0;
    */
        }

        ul.external-invitations li img {
            float: left;
            border: 1px solid black;
            margin: 0px 10px 0px 0px;
            /*
    width: 122px;
    height: 160px;
    */
        }

        ul.external-invitations li div.external-invitation-text {
            float: left;
            width: 230px;
        }

a.qreq {
    display: block;
    float: right;
    margin-right: 5px;
    box-shadow: 1px 1px 1px 0px #666;
}

.qreq img {
    width: 22px;
    height: 28px;
    border: 1px solid black;
    display: block;
}

.qreq.qreq-aspect.validation-error {
    border: 3px dotted rgba(255, 0, 0, 0.6);
}
.qreq.qreq-aspect {
    border: 1px dotted rgba(0, 0, 0, 0.6);
    background: rgba(0, 0, 0, 0.2);
    box-shadow: none;
    cursor: pointer;   
}
.qreq-aspect img {
    width: 16px;
    height: 16px;
    margin: 5px 2px;
    box-shadow: 1px 1px 1px 0px #666;
    background: #000;

}
.qreq.unlock {
    opacity: .5;
}

.completed .qreq.unlock {
    opacity: 1;
}

.qreqs-and-go {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

    .qreqs-and-go .btn_standard, .qreqs, .go {
        float: right;
    }
.qreqs {
    margin-right: 10px;
}
.qreqs i {
    font-size: 20px;
    display: inline-block;
    color: #776F61;
    border-right: 2px solid #776F61;
    margin-right: 5px;
    padding-right: 5px;
    position: relative;
    top: 0.2em;
}

.challenge-description {
    font-style: italic;
}


/* ------------------- */
/* NEW STORYLET LAYOUT */
/* ------------------- */
#opportunitiesSection {
    margin-bottom: -20px;
}

h3.storylet-select-header {
    margin-bottom: 1.5em;
    font-size: 0.9em;
}

.storylet-select.storylet {
    margin-bottom: 25px;
    min-height: 75px;
    border-color: #94856E;
    box-shadow: 0 2px 3px rgba(0,0,0,0.3), inset 0 1px rgba(255,255,255,0.3);
    border-radius: 2px;
}

    .storylet-select.storylet h2 {
        margin-bottom: 0.2em;
        font-size: 0.9em;
    }

    .storylet-select.storylet p {
        line-height: 1.3em;
    }

.storylet_card {
    margin: -56px 0;
    padding: 6px;
    background: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/cards/slet_cards.png);
    background-repeat: no-repeat;
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.8);
    position: absolute;
    top: 50%;
    left: -6px;
    cursor: pointer;
    width: 75px;
    height: 98px;
}

    .storylet_card img {
        width: 75px;
        height: 99px;
    }

.storylet-select .storylet_rhs {
    margin: 0 10px 40px 10px;
    float: right;
    width: 530px;
}

.ambition .storylet_card, .seasonal .storylet_card {
    background-position: -174px 0;
}

.questiclestart .storylet_card, .questiclestep .storylet_card, .episodic .storylet_card, .questicleend .storylet_card {
    background-position: -261px 0;
}

.sinister .storylet_card {
    background-position: -348px 0;
}

.gold .storylet_card {
    background-position: -87px 0;
}


/*------------------------------------*\
   STORYNEXUS HEADER STYLES
\*------------------------------------*/


/*------------------------------------*\
   STRUCTURE
\*------------------------------------*/
.pageblock {
    width: 960px;
    margin: 0 auto;
}

#navbar {
    font-family: Helvetica, Sans-Serif;
    background: #eee;
    width: 100%;
    margin-bottom: 1em;
    padding: 0.5em 0;
    position: relative;
    z-index: 50;
    line-height: 1;
}

    #navbar ul {
        margin: 0;
        padding: 0;
    }

#navbar-inner {
    margin: 0 auto;
    width: 960px;
}

#snlogo-nav {
    float: left;
    width: 130px;
    height: 27px;
    margin-right: 20px;
    display: block;
}

#nav1 {
    float: left;
    width: 500px; /* ie7/8 needs a width */
}

.nav1-item {
    display: block;
    padding: 0 10px;
    float: left;
}

.nav1-item, .usernav-item {
    height: 33px;
    margin-bottom: -5px;
}

.nav1-split {
    display: none;
}

#nav1-story {
    max-width: 200px;
}

#SNGamesDD {
    display: none;
    background: #999999;
    padding-top: 7px;
    position: absolute;
}

.nav1-item:hover #SNGamesDD, .nav1-item:focus #SNGamesDD {
    display: block;
}

a.nav1-content .ico-world {
    float: left;
    margin: 2px 5px 0 0;
}

.sub-menu {
    display: none;
    background: #999999;
    margin-top: 5px !important;
    position: absolute;
}

    .sub-menu .ico-world {
        float: left;
        margin: 2px 5px 2px 0;
    }

.nav1-item:hover .sub-menu, .nav1-item:focus .sub-menu, .usernav-item:hover .sub-menu, .usernav-item:focus .sub-menu {
    display: block;
}

#usernav {
    float: right;
}

    #usernav ul {
        float: left;
    }

    #usernav li:last-child {
        padding-right: 0;
    }

.usernav-item {
    display: inline-block;
    padding: 0 5px;
    line-height: 27px;
}

.usernav-split {
    display: none;
}

#loginnav {
    float: right;
    height: 24px;
}

.usernav-loginField {
    height: 24px;
    float: left;
    margin-right: 1em;
}

    .usernav-loginField, .usernav-loginField input {
        font-size: 8pt;
    }

        .usernav-loginField label {
            margin-right: 0.5em;
        }

.nav1-socialLog {
    width: 24px;
    height: 24px;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#fb-like-container {
    float: right;
    margin: 2px 0 0 20px;
}

.nav-inbox-link {
    position: relative;
    top: 2px;
    font-size: 1.3em;
    color: #535353;
    text-shadow: 0 1px 1px #090909;
}

    .nav-inbox-link.new-mail {
        color: #FFFFFF;
        text-shadow: 0 2px 3px #000000;
        text-shadow: 0 2px 3px rgba(0,0,0,0.5);
    }
/* Footer structure */
#footer {
    font-family: Helvetica, Sans-Serif;
    clear: both;
    padding: 20px 0;
    font-size: 9pt;
    margin-top: 20px;
}

#footer1 {
    float: left;
    width: 500px; /* ie8 needs a width */
}

    #footer1 ul, #footer2 ul {
        padding-top: 5px;
    }

.footer1-item, .footer2-item {
    display: inline-block;
    padding-right: 5px;
    line-height: 1.2em;
}

    .footer1-item:after, .footer2-item:after {
        content: '|';
        padding-left: 5px;
    }

    .footer1-item:last-child, .footer2-item:last-child {
        padding-right: 0;
    }

        .footer1-item:last-child:after, .footer2-item:last-child:after {
            display: none;
        }

#footer2 {
    float: right;
    text-align: right;
}

/*------------------------------------*\
   DESIGN
\*------------------------------------*/
#navbar b, #footer b, #navbar strong, #footer strong {
    font-family: Helvetica, Sans-Serif;
    font-weight: bold;
}

#navbar {
    background: #222222;
    border-bottom: 1px solid #303030;
    font-weight: bold;
    padding: 5px 0;
    box-shadow: 0px 2px 3px 0px #000000;
}

#navbar-inner {
    min-height: 27px;
    line-height: 25px;
    text-transform: uppercase;
    font-size: 8pt;
    color: #FFFFFF;
}

#snlogo-nav {
    text-indent: -999px;
    overflow: hidden;
    background: url('http://images.echobazaar.failbettergames.com.s3.amazonaws.com/css_img/StoryNexusLogo.png') 0 0 no-repeat;
}

#nav1 {
    width: auto;
    color: #000000;
}

#navbar-inner a {
    color: #E7E7E7;
    text-decoration: none;
}

    #navbar-inner a:hover, #navbar-inner a:hover {
        color: #FFFFFF;
    }

#SNGamesDD {
    min-width: 102px;
    background: #da6f0c;
    font-size: 8pt;
    line-height: 1.8em;
    margin-left: -5px;
}

    #SNGamesDD a {
        display: block;
        padding: 5px;
    }

        #SNGamesDD a:hover, #SNGamesDD a:focus {
            background: #c76204;
        }

.sub-menu {
    min-width: 102px;
    background: #222222;
    font-size: 8pt;
    line-height: 1.8em;
    margin-left: -5px;
    letter-spacing: 0;
    box-shadow: 0px 3px 3px 0px #000000;
}

    .sub-menu a {
        display: block;
        padding: 0 5px;
        height: 24px;
        line-height: 20px;
        overflow: hidden;
    }

        .sub-menu a:hover, .sub-menu a:focus {
            background: #464646;
        }

    .sub-menu hr {
        margin: 5px 0 0 0;
        border-top: 1px solid #464646;
        border-bottom: 1px solid #000000;
    }

a.world-directory-link, #navbar-inner a.world-directory-link {
    border-top: 1px solid #446f8f;
    padding: 4px 8px;
    background: #274052;
    background: -moz-linear-gradient(top, #274052 0%, #183445 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#274052), color-stop(100%,#183445));
    background: -webkit-linear-gradient(top, #274052 0%,#183445 100%);
    background: -o-linear-gradient(top, #274052 0%,#183445 100%);
    background: -ms-linear-gradient(top, #274052 0%,#183445 100%);
    background: linear-gradient(to bottom, #274052 0%,#183445 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#274052', endColorstr='#183445',GradientType=0 );
    text-shadow: none;
    color: #aecbde;
    height: auto;
    box-shadow: 0 1px 2x #000000;
    box-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

    a.world-directory-link:hover, a.world-directory-link:focus, #navbar-inner a.world-directory-link:hover, #navbar-inner a.world-directory-link:focus {
        background: #2a5a82;
        background: -moz-linear-gradient(top, #2a5a82 0%, #1b4260 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2a5a82), color-stop(100%,#1b4260));
        background: -webkit-linear-gradient(top, #2a5a82 0%,#1b4260 100%);
        background: -o-linear-gradient(top, #2a5a82 0%,#1b4260 100%);
        background: -ms-linear-gradient(top, #2a5a82 0%,#1b4260 100%);
        background: linear-gradient(to bottom, #2a5a82 0%,#1b4260 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a5a82', endColorstr='#1b4260',GradientType=0 );
        color: #FFFFFF;
    }

.navDD i {
    color: #000000;
    color: rgba(0, 0, 0, 0.5);
    text-shadow: 0 1px 1px #303030;
}

li:hover .navDD i, li:focus .navDD i {
    color: #000000;
}

li:hover .navDD:after, li:hover .navDD:focus {
    color: #000000;
}
/* Footer design */
#footer {
    background: #000000;
    background: -moz-linear-gradient(top, #111111 0%, #000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#111111), color-stop(100%,#000000));
    background: -webkit-linear-gradient(top, #111111 0%,#000000 100%);
    background: -o-linear-gradient(top, #111111 0%,#000000 100%);
    background: -ms-linear-gradient(top, #111111 0%,#000000 100%);
    background: linear-gradient(to bottom, #111111 0%,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111111', endColorstr='#000000',GradientType=0 );
    border-top: 1px solid #222222;
    box-shadow: 0 0 20px #000000;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    color: #999999;
}

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

        #footer a:hover, #footer a:focus {
            color: #DA6F0C;
            text-decoration: none;
        }
/*.footer1-split {
	display: none;
} */
/*.footer2-split {
	display: none;
} */





/*markdown classes*/
.descriptive /*[]*/ {
    font-weight: bold;
    font-style: italic;
}


/* new challenge styles */
.challenge {
    background: #252525;
    outline: 1px solid #000000;
    border: 1px solid #323232;
    display: inline-block;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    font-weight: normal;
    font-family: Verdana, Sans-Serif;
    color: #d7d7d7;
    font-size: 8pt;
    line-height: 1.2em;
    font-style: normal;
    margin-top: 1em;
    cursor: pointer;
    float: left;
    clear: both;
}

    .challenge img {
        width: 18px;
        height: auto;
        border: none;
        float: left;
    }

    .challenge p {
        padding: 5px;
        margin: 0 0 0 18px;
        font-weight: bold;
        float: none;
        color: #d7d7d7;
        font-size: 8pt;
        line-height: inherit;
    }

a.challenge-info, a.challenge-info:hover {
    color: #d7d7d7;
    font-size: 10pt;
    text-shadow: 0 1px 2px #000000;
    margin: 1px 0 0 3px;
    text-decoration: none;
}

.challenge-details {
    padding: 5px;
    display: none;
}

.challenge-secondchance {
    display: block;
    clear: both;
    margin-top: 5px;
    padding: 4px 0 0 20px;
    position: relative;
    font-weight: bold;
}

    .challenge-secondchance input {
        position: absolute;
        top: 0;
        left: 0;
    }

    .challenge-secondchance label {
        cursor: pointer;
        color: #d7d7d7;
        font-size: inherit;
    }
.luck-description {
    clear: both;
    padding-top: 0.5em;
    font-size: 0.8em;
    font-style: italic;
    font-weight: bold;
}

.super-rewards {
    border-radius: 5px;
    width: 636px;
    border: 2px solid #000000;
}

.themed-form {
    border: none;
    padding: 5px;
    border-radius: 3px;
    display: block;
    margin-bottom: 10px;
    background: rgba(0,0,0,0.2);
    box-shadow: 0 1px 1px rgba(255,255,255,0.5), inset 0 1px 4px rgba(0,0,0,0.6);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}

    .themed-form::-webkit-input-placeholder {
        color: #FFFFFF;
        color: rgba(255,255,255,0.5);
    }

    .themed-form::-moz-placeholder {
        color: #FFFFFF;
        color: rgba(255,255,255,0.5);
    }

    .themed-form:-ms-input-placeholder {
        color: #FFFFFF;
        color: rgba(255,255,255,0.5);
    }

    .themed-form input:-moz-placeholder {
        color: #FFFFFF;
        color: rgba(255,255,255,0.5);
    }

.access-code-share {
    width: 100%;
    margin-top: 5px;
    display: block;
}

/*------------------------------------*/

.social-message-preview {
    background: #f9f9f9;
    padding: 10px;
    margin: 1em 0;
    border-top: 1px solid #FFFFFF;
    box-shadow: 0 1px 3px #000000;
    color: #303030;
    line-height: 1.1em;
    font-family: Arial, sans-serif;
}

    .social-message-preview img {
        float: left;
        margin-right: 10px;
        width: 50px;
        height: 50px;
    }

.social-message-body {
    margin-left: 60px;
}

    .social-message-body h6 {
        margin: 0 0 0.1em 0;
        font-size: 9pt;
        font-weight: bold;
    }

    .social-message-body p {
        font-size: 9pt;
        line-height: 1.1em;
        font-weight: normal;
    }

.social-message-preview.Twitter img {
    border-radius: 5px;
}

.social-message-preview.Twitter h6 {
    margin: 0;
    display: inline;
    color: #0084b4;
}

.social-message-preview.Twitter p {
    display: inline;
}

.social-message-preview.Twitter a {
    color: #0084b4;
}

.social-message-preview.Facebook {
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
}

    .social-message-preview.Facebook h6 {
        color: #3b5998;
    }

    .social-message-preview.Facebook a {
        color: #3b5998;
    }

.relationship-list {
    margin: 0.5em 0 0 2em;
    font-size: 0.8em;
    list-style-type: disc;
}

/*------------------------------------*\
   NEW BAZAAR CSS
\*------------------------------------*/
.currency-echo:before {
    content: '';
    display: inline-block;
    width: 1.8em;
    height: 1.8em;
    margin: 0 -0.1em -0.8em 0;
    background: url('img/icon-echo.svg') no-repeat;
    background-size: 100%;
}

.red .currency-echo:before {
    content: '';
    display: inline-block;
    width: 1.8em;
    height: 1.8em;
    margin: 0 -0.1em -0.8em 0;
    background: url('img/icon-echo-red.svg') no-repeat;
    background-size: 100%;
}

.shop-categories {
    width: 185px;
    float: left;
    box-shadow: 0 2px 4px #000000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.75);
}

.shop-items {
    width: 435px;
    padding: 5px;
    float: right;
    background: #dad2c5;
    border-top: 1px solid #e1dbd1;
    box-shadow: 0 2px 4px #000000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.75);
}

    .shop-items .simplePagerNav {
        display: block;
        text-align: center;
        font-weight: bold;
        margin: 10px 0;
        font-size: 8pt;
    }

        .shop-items .simplePagerNav li {
            display: inline-block;
            width: 14px;
            height: 14px;
            margin: 0 2px;
            line-height: 14px;
            text-align: center;
        }

            .shop-items .simplePagerNav li.currentPage {
                background: rgba(0,0,0,0.2);
            }

        .shop-items .simplePagerNav:before {
            content: 'page: ';
        }

.shop-categories ul li a {
    display: block;
    background: #948162;
    padding: 5px;
    height: 24px;
    line-height: 24px;
    border-top: 1px solid #a99a81;
    border-bottom: 1px solid #614b2b;
    font-size: 0.8em;
    font-weight: bold;
    color: #000000;
}

    .shop-categories ul li a .ellipsis {
        width: 130px;
        display: inline-block;
    }

    .shop-categories ul li a i {
        font-size: 1.25em;
        height: 24px;
        line-height: 24px;
        margin-left: 0 !important;
    }

    .shop-categories ul li a:hover, .shop-categories ul li a:focus {
        color: #FFFFFF;
        text-decoration: none;
    }

.shop-categories ul li.active a {
    background: #b69868;
    border-top: 1px solid #c5ad86;
    border-bottom: 1px solid #614b2b;
    color: #FFFFFF;
}

.shop-icon {
    float: left;
    box-shadow: 0 1px 3px #000000;
    box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.3), 0 1px 3px rgba(0,0,0,0.75);
    margin-right: 5px;
}

.shop-item {
    position: relative;
    border-top: 1px solid #e5e0d7;
    border-bottom: 1px solid #c4bdb1;
    padding: 10px 0;
}

    .shop-item:empty {
        border-top: none;
        border-bottom: none;
        padding: 0;
    }

.bazaar_message {
    display: block;
    cursor: pointer;
    background: #A89D8C;
    box-shadow: 0 1px 3px #000000;
    box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.3), 0 1px 3px rgba(0,0,0,0.75);
    z-index: 1000;
    position: fixed;
    padding: 5px;
    left: 50%;
    width: 350px;
    margin-left: -174px;
    text-align: center;
    top: 50%;
    font-weight: bold;
    font-size: 8pt;
}

    .bazaar_message p {
        font-size: 9pt;
        margin-bottom: 0.3em;
    }

.shop-item .item-icon {
    float: left;
    margin-right: 10px;
    position: relative;
}

    .shop-item .item-icon img {
        width: 32px;
        height: 42px;
        box-shadow: 0 1px 3px #000000;
        box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.3), 0 1px 3px rgba(0,0,0,0.75);
    }

.shop-item .item-quantity {
    position: absolute;
    bottom: -3px;
    right: -6px;
    text-align: center;
    line-height: 12px;
    padding: 2px;
    background: #333333;
    font-size: 6pt;
    color: #e9e9e9;
    min-width: 12px;
    height: 12px;
    border-radius: 12px;
    box-shadow: 0 1px 2px #000000;
    box-shadow: 0 1p 2px rgba(0, 0, 0, 0.5);
    font-family: Verdana, Sans-Serif;
    font-weight: bold;
}

.item-details {
    margin-left: 42px;
}

    .item-details h6 {
        font-size: 10pt;
        font-weight: bold;
        display: block;
        margin: 0 0 10px 0;
    }

.buy-options, .sell-options {
    display: inline-block;
    width: 48%;
}

.buy-options {
    margin-right: 2%;
}

.itemSetQuantity a {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    color: #000000;
    color: rgba(0,0,0,0.5);
}

    .itemSetQuantity a:hover, .itemSetQuantity a:focus {
        text-decoration: none;
        color: rgba(0,0,0,0.8);
    }

    .itemSetQuantity a.disabled, .itemSetQuantity a.disabled:hover, .itemSetQuantity a.disabled:focus {
        color: rgba(0,0,0,0.3);
    }

input.buysell {
    font-size: 0.8em;
    text-align: center;
    border: none;
    padding: 3px;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 10px;
    color: #000000;
    color: rgba(0,0,0,0.8);
    background: rgba(0,0,0,0.1);
    box-shadow: 0 1px 1px rgba(255,255,255,0.3), inset 0 1px 4px rgba(0,0,0,0.3);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}

    input.buysell:disabled {
        background: rgba(0,0,0,0.05);
        box-shadow: 0 1px 1px rgba(255,255,255,0.2), inset 0 1px 4px rgba(0,0,0,0.1);
        color: rgba(0,0,0,0.4);
    }

.shop_btn, a.shop_btn {
    font-size: 0.7em !important;
    font-weight: normal;
    color: #fff;
    background: #dd4f4f;
    background: -moz-linear-gradient(top, #dd4f4f 0%, #880b0c 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd4f4f), color-stop(100%,#880b0c));
    background: -webkit-linear-gradient(top, #dd4f4f 0%,#880b0c 100%);
    background: -o-linear-gradient(top, #dd4f4f 0%,#880b0c 100%);
    background: -ms-linear-gradient(top, #dd4f4f 0%,#880b0c 100%);
    background: linear-gradient(to bottom, #dd4f4f 0%,#880b0c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd4f4f', endColorstr='#880b0c',GradientType=0 );
    box-shadow: 0 1px 2px #000000;
    border: 1px solid #810706;
    display: inline-block;
    cursor: pointer;
    margin-left: 0 5px;
    padding: 4px 12px;
    font-weight: bold;
}

    .shop_btn:hover, .shop_btn:focus, a.shop_btn:hover, a.shop_btn:focus {
        background: #f94747;
        background: -moz-linear-gradient(top, #f94747 0%, #bb0e0f 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f94747), color-stop(100%,#bb0e0f));
        background: -webkit-linear-gradient(top, #f94747 0%,#bb0e0f 100%);
        background: -o-linear-gradient(top, #f94747 0%,#bb0e0f 100%);
        background: -ms-linear-gradient(top, #f94747 0%,#bb0e0f 100%);
        background: linear-gradient(to bottom, #f94747 0%,#bb0e0f 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f94747', endColorstr='#bb0e0f',GradientType=0 );
        border: 1px solid #7d0c0d;
        text-decoration: none;
    }

    .shop_btn:disabled, .shop_btn:disabled:hover, .shop_btn:disabled:focus {
        background: #989898;
        background: -moz-linear-gradient(top, #989898 0%, #505050 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#989898), color-stop(100%,#505050));
        background: -webkit-linear-gradient(top, #989898 0%,#505050 100%);
        background: -o-linear-gradient(top, #989898 0%,#505050 100%);
        background: -ms-linear-gradient(top, #989898 0%,#505050 100%);
        background: linear-gradient(to bottom, #989898 0%,#505050 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#989898', endColorstr='#505050',GradientType=0 );
        border: 1px solid #4b4b4b;
        color: #c9c9c9;
    }

.price {
    padding: 0;
    font-size: 0.8em;
    text-align: center;
    font-weight: bold;
}

    .price.disabled {
        color: rgba(0,0,0,0.5);
    }

.purchase-item {
    font-weight: bold;
    display: inline-block;
    font-size: 0.8em;
}

    .purchase-item a {
        float: left;
        display: block;
        width: 18px;
        height: 24px;
        margin-right: 5px;
    }

    .purchase-item img {
        width: 18px;
        height: 24px;
        box-shadow: 0 1px 3px #000000;
        box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.3), 0 1px 3px rgba(0,0,0,0.75);
    }

.purchase-item-details {
    margin: 5px 0 0 23px;
}

.mini-profile {
    background: #A89D8C;
    background: #bbac90 url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/css_img/journalFeedBg.jpg);
    box-shadow: inset 0 0 1px #cabea6, 0 2px 8px #000000;
    padding: 9px;
    border: 1px solid #5f594d;
    color: #31291a;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: 9pt;
}

    .mini-profile .ui-dialog-title {
        font-family: Georgia, Serif;
        font-size: 1.2em;
    }

.mini-avatar {
    float: left;
    width: 22%;
}

    .mini-avatar img {
        box-shadow: 0 2px 4px #000000;
        margin-bottom: 0.5em;
    }

    .mini-avatar button {
        width: 100px;
        text-align: center;
        text-transform: inherit;
    }

.mini-profile-copy {
    float: right;
    width: 78%;
}

    .mini-profile-copy h3 {
        font-size: 1.2em;
        font-family: Georgia, Serif;
    }

        .mini-profile-copy h3:first-child {
            margin-top: 0;
        }

.profile-link {
    font-weight: bold;
    font-size: 1.2em;
    display: block;
    margin-top: 1em !important;
}

#addResponse {
    text-align: center;
    display: none;
    font-size: 0.9em;
    font-weight: bold;
    padding: 8px;
    background: rgba(0,0,0,0.1);
    border-radius: 3px;
    margin-top: 1em;
}

.bazaar-dialog {
    background: #A89D8C;
    box-shadow: 0 2px 12px 2px #000000;
    box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.3), 0 2px 12px 2px rgba(0,0,0,0.75);
    color: #000000;
    font-size: 12pt;
}

@media only screen and (max-device-width: 320px) {
    .bazaar-dialog, .mini-profile {
        font-size: 3em;
    }
}

.bazaar-dialog .ui-dialog-titlebar {
    padding: 5px 10px;
    font-size: 0.8em;
}

    .bazaar-dialog .ui-dialog-titlebar .ui-dialog .ui-dialog-content {
        padding: 0 10px 10px 10px;
    }

.bazaar-dialog .item-icon {
    float: left;
    margin-right: 10px;
    position: relative;
}

    .bazaar-dialog .item-icon img {
        box-shadow: 0 1px 3px #000000;
        box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.3), 0 1px 3px rgba(0,0,0,0.75);
    }

.bazaar-dialog .item-quantity {
    position: absolute;
    bottom: -3px;
    right: -6px;
    text-align: center;
    line-height: 12px;
    padding: 2px;
    background: #333333;
    font-size: 6pt;
    color: #e9e9e9;
    min-width: 12px;
    height: 12px;
    border-radius: 12px;
    box-shadow: 0 1px 2px #000000;
    box-shadow: 0 1p 2px rgba(0, 0, 0, 0.5);
    font-family: Verdana, Sans-Serif;
    font-weight: bold;
}

.bazaar-dialog .item-details {
    margin-left: 55px;
}

    .bazaar-dialog .item-details h6 {
        margin-bottom: 0.3em;
        font-size: 0.9em;
    }

    .bazaar-dialog .item-details p {
        font-size: 8pt;
        margin-bottom: 0.8em;
    }

.bazaar-dialog .shop-btns {
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid #000000;
}

.bazaar-dialog hr {
    border: none;
    border-top: 1px solid #e5e0d7;
    border-bottom: 1px solid #c4bdb1;
}

.quantityMinus.bigNum, .quantityPlus.bigNum {
    font-size: 0.5em;
    font-weight: bold;
    display: inline-block;
    margin: 0 5px;
    padding: 3px 6px;
    background: #000000;
    background: rgba(0,0,0,0.5);
    color: #FFFFFF;
    color: rgba(255,255,255,0.5);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    text-align: center;
    border-radius: 3px;
}

    .quantityMinus.bigNum:hover, .quantityPlus.bigNum:hover {
        color: rgba(255,255,255,0.8);
    }

.quantityMinus.bigNum {
    margin-left: 0;
}

.purchase-message {
    text-align: center;
}

    .purchase-message h2 {
        margin: 0 0 0.5em 0;
    }

    .purchase-message .shop_btn.dialog-close {
        display: inline-block;
        margin: 10px auto 0 auto;
        font-size: 0.8em;
        cursor: pointer;
    }

.refreshBtn button, .refreshBtn a {
    margin-top: 0.5em;
}

a.fl-comic-button {
    display: inline-block;
    background: #4b8413;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 8pt;
    padding: 3px 10px;
    border: 2px solid #FFFFFF;
    margin-top: 5px;
    position: relative;
}

    a.fl-comic-button:hover, a.fl-comic-button:focus {
        text-decoration: none;
        background: #37610e;
    }

    a.fl-comic-button:before {
        background: url('http://images.echobazaar.failbettergames.com.s3.amazonaws.com/comic-splash.png') no-repeat;
        width: 40px;
        height: 39px;
        display: block;
        content: '';
        position: absolute;
        top: -15px;
        left: -30px;
    }

.externalInviteEmail input {
    display: inline-block;
    margin-right: 20px;
}

.externalInviteButton {
    display: inline-block;
    font-size: 14px;
    background: #FFF;
    color: #000;
    font-weight: bold;
    border: 1px solid #5E3D1A;
    box-shadow: 1px 1px 2px 0px #666;
    text-decoration: none !important;
    margin: 0;
    cursor: pointer;
}

.oppertunities-draw-header {
    float: left;
    width: 500px;
    font-size: 0.9em;
}

.toggle-map {
    float: right;
    margin-bottom: 1em;
    text-transform: uppercase;
    display: inline-block;
    text-transform: uppercase;
    font-weight: 600;
    color: #312510;
    background: #deb253;
    background: -moz-linear-gradient(top, #deb253 0%, #d38f19 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#deb253), color-stop(100%,#d38f19));
    background: -webkit-linear-gradient(top, #deb253 0%,#d38f19 100%);
    background: -o-linear-gradient(top, #deb253 0%,#d38f19 100%);
    background: -ms-linear-gradient(top, #deb253 0%,#d38f19 100%);
    background: linear-gradient(to bottom, #deb253 0%,#d38f19 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#deb253', endColorstr='#d38f19',GradientType=0 );
    box-shadow: 0 1px 2px #000000, inset 0 1px #ffdf5f;
    border: 1px solid #996914;
    display: inline-block;
    cursor: pointer;
    margin-left: 0 5px;
    padding: 8px 16px;
    text-shadow: 0 1px 1px #ffdf5f;
    letter-spacing: 0.1em;
    border-radius: 2px;
}

    .toggle-map:hover, .toggle-map:focus {
        background: #ffdf5f;
        background: -moz-linear-gradient(top, #ffdf5f 0%, #fb9200 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffdf5f), color-stop(100%,#fb9200));
        background: -webkit-linear-gradient(top, #ffdf5f 0%,#fb9200 100%);
        background: -o-linear-gradient(top, #ffdf5f 0%,#fb9200 100%);
        background: -ms-linear-gradient(top, #ffdf5f 0%,#fb9200 100%);
        background: linear-gradient(to bottom, #ffdf5f 0%,#fb9200 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdf5f', endColorstr='#fb9200',GradientType=0 );
        border: 1px solid #c07000;
        text-decoration: none;
    }
/* ACCORDIAN STYLES */
h2.faq-header {
    margin: 2em 0 1em 0;
}

.FAQ h3 {
    display: block;
    margin: 1em 0 0 0 !important;
    padding: 0.5em 0.5em 0.5em 2em;
    font-size: 0.8em;
    background: #A28E75;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

    .FAQ h3.ui-state-active {
        border-radius: 4px 4px 0 0;
        box-shadow: none;
    }

.FAQ .ui-accordion-content {
    background: #C9B996;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    padding: 1em;
    font-size: 0.9em;
}

.FAQ p {
    line-height: 1.4em;
}

.help-links {
    font-size: 8pt;
}

    .help-links i {
        font-size: 11pt;
        color: #000000;
    }

    .help-links a:hover i, .help-links a:focus i {
        text-decoration: none;
    }
/*NEX PURCHASING IN BRANCH */
.branch-action-purchase {
    display: block;
    clear: both;
    font-weight: bold;
    font-size: 7pt;
    font-style: normal;
    padding-top: 1em;
}

    .branch-action-purchase form {
        display: inline;
    }

    .branch-action-purchase .button-group {
        float: right;
    }

.actionRefreshBtn {
    color: #FFFFFF !important;
    background: #dd4f4f;
    font-size: 7pt;
    background: -moz-linear-gradient(top, #dd4f4f 0%, #880b0c 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd4f4f), color-stop(100%,#880b0c));
    background: -webkit-linear-gradient(top, #dd4f4f 0%,#880b0c 100%);
    background: -o-linear-gradient(top, #dd4f4f 0%,#880b0c 100%);
    background: -ms-linear-gradient(top, #dd4f4f 0%,#880b0c 100%);
    background: linear-gradient(to bottom, #dd4f4f 0%,#880b0c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd4f4f', endColorstr='#880b0c',GradientType=0 );
    box-shadow: 0 1px 2px #000000;
    font-weight: bold;
    margin-left: 0.5em;
    border: 1px solid #810706;
    display: inline-block;
    cursor: pointer;
    padding: 4px 8px !important;
    border-radius: 2px;
}

    .actionRefreshBtn:hover, .actionRefreshBtn:focus {
        background: #f94747;
        background: -moz-linear-gradient(top, #f94747 0%, #bb0e0f 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f94747), color-stop(100%,#bb0e0f));
        background: -webkit-linear-gradient(top, #f94747 0%,#bb0e0f 100%);
        background: -o-linear-gradient(top, #f94747 0%,#bb0e0f 100%);
        background: -ms-linear-gradient(top, #f94747 0%,#bb0e0f 100%);
        background: linear-gradient(to bottom, #f94747 0%,#bb0e0f 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f94747', endColorstr='#bb0e0f',GradientType=0 );
        border: 1px solid #7d0c0d;
        text-decoration: none;
    }

/* ------------------------- */
/* -- NEW HOMEPAGE STYLES -- */
/* ------------------------- */

/* #Base 960 Grid
================================================== */

.container {
    position: relative;
    width: 960px;
    margin: 0 auto;
    padding: 0;
}

    .container .column,
    .container .columns {
        float: left;
        display: inline;
        margin-left: 10px;
        margin-right: 10px;
    }

.row {
    margin-bottom: 20px;
}

/* Nested Column Classes */
.column.alpha, .columns.alpha {
    margin-left: 0;
}

.column.omega, .columns.omega {
    margin-right: 0;
}

/* Base Grid */
.container .one.column,
.container .one.columns {
    width: 40px;
}

.container .two.columns {
    width: 100px;
}

.container .three.columns {
    width: 160px;
}

.container .four.columns {
    width: 220px;
}

.container .five.columns {
    width: 280px;
}

.container .six.columns {
    width: 340px;
}

.container .seven.columns {
    width: 400px;
}

.container .eight.columns {
    width: 460px;
}

.container .nine.columns {
    width: 520px;
}

.container .ten.columns {
    width: 580px;
}

.container .eleven.columns {
    width: 640px;
}

.container .twelve.columns {
    width: 700px;
}

.container .thirteen.columns {
    width: 760px;
}

.container .fourteen.columns {
    width: 820px;
}

.container .fifteen.columns {
    width: 880px;
}

.container .sixteen.columns {
    width: 940px;
}

.container .one-third.column {
    width: 300px;
}

.container .two-thirds.column {
    width: 620px;
}

/* Offsets */
.container .offset-by-one {
    padding-left: 60px;
}

.container .offset-by-two {
    padding-left: 120px;
}

.container .offset-by-three {
    padding-left: 180px;
}

.container .offset-by-four {
    padding-left: 240px;
}

.container .offset-by-five {
    padding-left: 300px;
}

.container .offset-by-six {
    padding-left: 360px;
}

.container .offset-by-seven {
    padding-left: 420px;
}

.container .offset-by-eight {
    padding-left: 480px;
}

.container .offset-by-nine {
    padding-left: 540px;
}

.container .offset-by-ten {
    padding-left: 600px;
}

.container .offset-by-eleven {
    padding-left: 660px;
}

.container .offset-by-twelve {
    padding-left: 720px;
}

.container .offset-by-thirteen {
    padding-left: 780px;
}

.container .offset-by-fourteen {
    padding-left: 840px;
}

.container .offset-by-fifteen {
    padding-left: 900px;
}

/* #Clearing
================================================== */

/* Self Clearing Goodness */
.container:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
    content: '\0020';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.row:after,
.clearfix:after {
    clear: both;
}

.row,
.clearfix {
    zoom: 1;
}

/* You can also use a <br class="clear" /> to clear columns
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }
 */

.pull-right {
    float: right;
}

.pull-left {
    float: left;
}

html, body {
    height: 100%;
}

.homepage_background {
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/splash-images/hat.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    min-width: 960px;
    height: 100%;
}

#homepage-container {
    padding-top: 20px;
    color: #f4f4f4;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
}

    #homepage-container a {
        color: #FFFFFF;
    }

#home-title {
    margin-bottom: 20px;
}

.homepage-bodytext {
    text-shadow: 0 1px 3px rgba(0,0,0,0.75);
}

    .homepage-bodytext h3 {
        font-size: 1.5em;
        margin: 0 0 0.5em 0;
    }

    .homepage-bodytext p {
        font-size: 0.9em;
        line-height: 1.4em;
        margin-bottom: 0.5em;
    }

.home-caption {
    font-size: 0.8em;
    color: #cacaca;
    display: block;
    margin-bottom: 1em;
}

    .home-caption p {
        margin-bottom: 0;
    }

    .home-caption cite {
        font-weight: bold;
        font-style: italic;
    }

    .home-caption a {
        font-weight: bold;
        text-decoration: underline;
    }

.homepage-inset {
    color: #ebebeb;
    padding: 14px;
    background: #000000;
    background: rgba(0,0,0,0.5);
    box-shadow: 0 0 20px rgba(255,255,255,0.15), inset 0 0 1px rgba(255,255,255,0.5);
    border: 1px solid #000000;
}

    .homepage-inset h2 {
        font-size: 1em;
        margin: 0 0 0.5em 0;
    }

.home-footer {
    margin-top: 60px;
    font-size: 0.7em;
    color: #979797;
    text-shadow: 0 1px 3px rgba(0,0,0,0.75);
}

    .home-footer a {
        text-decoration: underline;
        color: #FFFFFF;
    }

    .home-footer.right-footer-links {
        text-align: right;
    }

.email-login-homepage {
    font-size: 0.8em;
}

    .email-login-homepage h4 {
        font-size: 0.9em;
        margin-bottom: 0.4em;
        font-weight: normal;
        font-size: 0.9em;
    }

        .email-login-homepage h4 label {
            font-weight: bold;
            font-size: 1em;
        }

    .email-login-homepage label {
        color: inherit;
        font-size: inherit;
        color: #adadad;
    }

    .email-login-homepage .checkbox-label {
        font-weight: normal;
    }

    .email-login-homepage input {
        display: inline-block;
        width: 100%;
        background: #363636;
        padding: 0.3em;
        border: 1px solid #4d4d4d;
        border-radius: 3px;
        box-shadow: 0 1px 3px #000000;
        color: #b0b0b0;
        box-sizing: border-box;
        ms-box-sizing: border-box;
        webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }

        .email-login-homepage input[type="checkbox"] {
            display: inline-block;
            width: auto;
            padding-right: 1em;
            position: relative;
            top: 0.15em;
            margin: 0 0.2em;
            background: none;
            border: none;
        }

/* inset specific styles */
.homepage-inset .email-login-homepage .login-field:first-child {
    margin-bottom: 0.5em;
}

.homepage-inset .email-login-homepage button[type="submit"] {
    margin: 1em 0;
}
/* navbar specific styles */
#homepage-navbar .email-login-homepage {
    float: right;
}

    #homepage-navbar .email-login-homepage .checkbox-label {
        display: inline-block;
        position: relative;
        margin: 0;
        padding: 0;
    }

    #homepage-navbar .email-login-homepage input[type="checkbox"] {
        padding: 0;
        margin: 0;
    }

    #homepage-navbar .email-login-homepage .login-field, #homepage-navbar .email-login-homepage button[type="submit"] {
        float: left;
    }

    #homepage-navbar .email-login-homepage button[type="submit"] {
        margin-top: 2.3em;
    }

    #homepage-navbar .email-login-homepage .login-field {
        width: 160px;
        margin: 5px 15px 0 0;
    }



.homepage-btn, a.homepage-btn {
    display: inline-block;
    text-transform: uppercase;
    background: #96e04c;
    background: -moz-linear-gradient(top, #96e04c 0%, #5e9c1f 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#96e04c), color-stop(100%,#5e9c1f));
    background: -webkit-linear-gradient(top, #96e04c 0%,#5e9c1f 100%);
    background: -o-linear-gradient(top, #96e04c 0%,#5e9c1f 100%);
    background: -ms-linear-gradient(top, #96e04c 0%,#5e9c1f 100%);
    background: linear-gradient(to bottom, #96e04c 0%,#5e9c1f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#96e04c', endColorstr='#5e9c1f',GradientType=0 );
    border: 1px solid #578b23;
    border-radius: 3px;
    box-shadow: inset 0 0 1px #93dc49, 0 2px 3px #000000;
    padding: 0.4em 1em;
    font-weight: bold;
    font-size: 0.9em;
    color: #21360d !important;
    text-shadow: 0 1px #8fd846;
    cursor: pointer;
}

    .homepage-btn:hover, .homepage-btn:focus, a.homepage-btn:hover, a.homepage-btn:focus {
        background: #9df754;
        background: -moz-linear-gradient(top, #9df754 0%, #6dba25 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9df754), color-stop(100%,#6dba25));
        background: -webkit-linear-gradient(top, #9df754 0%,#6dba25 100%);
        background: -o-linear-gradient(top, #9df754 0%,#6dba25 100%);
        background: -ms-linear-gradient(top, #9df754 0%,#6dba25 100%);
        background: linear-gradient(to bottom, #9df754 0%,#6dba25 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9df754', endColorstr='#6dba25',GradientType=0 );
        text-decoration: none;
    }

    .homepage-btn.large {
        display: block;
    }

    .homepage-btn.small {
        font-size: 0.7em;
    }

#homepage-navbar {
    color: #ebebeb;
    background: #000000;
    box-shadow: 0 0 20px rgba(255,255,255,0.15), inset 0 1px rgba(255,255,255,0.5);
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    border-bottom: 1px solid #000000;
    height: 60px;
    position: relative;
}

    #homepage-navbar a {
        color: #FFFFFF;
    }

.social-login-btn {
    padding: 0 5px 0 27px;
    border-radius: 3px;
    line-height: 22px;
    font-weight: bold;
    display: inline-block;
    cursor: pointer;
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/css_img/twitterFacebookGoogleLogin.png);
    background-repeat: no-repeat;
    border: none;
    min-height: 22px;
    font-size: 8pt;
    position: relative;
    text-align: left;
    margin-bottom: 0.3em;
}

    .social-login-btn::-moz-focus-inner {
        padding: 0;
        border: 0;
    }

    .social-login-btn:hover, .social-login-btn:focus {
        top: 1px;
    }

    .social-login-btn.facebook {
        background-position: 0 0;
        color: #FFFFFF;
    }

    .social-login-btn.twitter {
        background-position: 0 -22px;
        color: #363636;
    }

    .social-login-btn.google {
        background-position: 0 -44px;
        color: #363636;
    }

.primary-login-social .social-login-btn {
    display: block;
    width: 100%;
    min-height: 35px;
    line-height: 35px;
    padding: 0 5px 0 40px;
    font-size: 0.9em;
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/css_img/twitterFacebookLoginBig.png);
}

    .primary-login-social .social-login-btn.twitter {
        background-position: 0 -35px;
    }

.social-login-block {
    margin: 1em auto;
    width: 90%;
}

    .social-login-block aside {
        float: left;
        display: block;
        padding-right: 10px;
        border-right: 2px solid #898989;
        color: #898989;
        font-size: 0.9em;
        text-transform: uppercase;
        text-align: center;
        font-weight: bold;
        height: 50px;
        line-height: 50px;
    }

    .social-login-block.email aside {
        height: 2em;
        line-height: 2em;
    }

    .social-login-block.email .homepage-btn {
        width: 80%;
    }

.social-login-options {
    float: right;
    width: 80%;
    margin-left: 10px;
}

    .social-login-options .social-login-btn {
        width: 100%;
    }

.social-login-header {
    float: left;
    margin-top: 4px;
}

    .social-login-header h4 {
        color: #adadad;
        font-size: 0.7em;
        margin-bottom: 0.4em;
        font-weight: bold;
    }

    .social-login-header .social-login-btn {
        display: inline-block;
        width: 90px;
        margin: 5px 5px 0 0;
    }

    .social-login-header div, .social-login-header form {
        display: inline;
    }

.shared-content-container {
    background: #bbac90 url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/css_img/journalFeedBg.jpg);
    box-shadow: inset 0 0 1px #cabea6, 0 2px 8px #000000;
    padding: 9px;
    border: 1px solid #5f594d;
    color: #31291a;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: 9pt;
}

    .shared-content-container h2, .shared-content-container h4 {
        font-family: Georgia, Serif;
    }

    .shared-content-container h2 {
        margin: 0 0 1em 0;
        font-style: italic;
    }

    .shared-content-container h4 em {
        font-style: italic;
        color: #6f5d42;
    }

    .shared-content-container p {
        line-height: 1.4em;
        margin-top: 0.5em;
        font-size: 0.9em;
    }

    .shared-content-container li {
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #b3a58b;
        box-shadow: 0 1px 1px #c9bb9f;
    }

        .shared-content-container li a {
            color: #31291a !important;
            display: block;
            cursor: pointer;
            text-decoration: none;
        }

        .shared-content-container li img {
            float: left;
            box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.5), 0 2px 4px #000000;
        }

    .shared-content-container .share-content {
        margin-left: 50px;
    }

.toggleInstruction {
    color: #4A7222;
    font-style: italic;
    font-weight: bold;
}

.shared-content-container li a:hover h4, .shared-content-container li a:focus h4, .shared-content-container li a:hover toggleInstruction, .shared-content-container li a:focus toggleInstruction {
    color: #3b5e18;
}

.access-code-icon {
    float: left;
    margin-right: 10px;
}

    .access-code-icon img {
        box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.5), 0 2px 4px #000000;
    }

/*toggle view panels*/
.tv-panel {
    display: none;
    width: 100%;
}

.standard-btn-green, a.standard-btn-green {
    display: inline-block;
    text-transform: uppercase;
    background: #78CE2C;
    background: -moz-linear-gradient(top, #78CE2C 0%, #63AC22 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#78CE2C), color-stop(100%,#63AC22));
    background: -webkit-linear-gradient(top, #78CE2C 0%,#63AC22 100%);
    background: -o-linear-gradient(top, #78CE2C 0%,#63AC22 100%);
    background: -ms-linear-gradient(top, #78CE2C 0%,#63AC22 100%);
    background: linear-gradient(to bottom, #78CE2C 0%,#63AC22 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#78CE2C', endColorstr='#63AC22',GradientType=0 );
    border: 1px solid #578b23;
    border-radius: 2px;
    box-shadow: 0 2px 3px #000000;
    padding: 0.4em 1em;
    font-weight: bold;
    font-size: 0.9em;
    color: #21360d !important;
    cursor: pointer;
}

    .standard-btn-green:hover, .standard-btn-green:focus, a.standard-btn-green:hover, a.standard-btn-green:focus {
        background: #9df754;
        background: -moz-linear-gradient(top, #9df754 0%, #6dba25 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9df754), color-stop(100%,#6dba25));
        background: -webkit-linear-gradient(top, #9df754 0%,#6dba25 100%);
        background: -o-linear-gradient(top, #9df754 0%,#6dba25 100%);
        background: -ms-linear-gradient(top, #9df754 0%,#6dba25 100%);
        background: linear-gradient(to bottom, #9df754 0%,#6dba25 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9df754', endColorstr='#6dba25',GradientType=0 );
        text-decoration: none;
    }

/* ------------------------ */
/* --- ME PAGE REDESIGN --- */
/* ------------------------ */
.character-name-header {
    font-weight: bold;
    text-transform: capitalize;
}

.cameo-change {
    font-size: 0.8em !important;
    height: auto !important;
}

.character-name-header a {
    cursor: pointer;
}

    .character-name-header a:hover:after, .character-name-header a:focus:after {
        display: inline-block;
        margin-left: 0.5em;
        font-size: 8pt;
        color: #333333;
        content: '(Change name)';
    }

#scrapbook-and-mantelpiece {
    margin-top: 2em;
}

.inventory-header-and-button {
    font-size: 0.8em;
    margin-top: 0.5em;
}

    .inventory-header-and-button .explanation {
        float: left;
        color: #333333;
        line-height: 2.5em;
    }

    .inventory-header-and-button .standard_btn {
        float: right;
        margin-left: 1em;
    }

.me-page-inventory {
    float: left;
    width: 395px;
}

.me-profile-inventory-slot h5 {
    margin: 0.5em 0;
}

.me-profile-inventory-slot:first-child h5 {
    margin-top: 0;
}

.me-profile-slot {
    float: left;
    width: 40px;
    height: 52px;
    border: 2px solid #333333;
    background-image: -o-linear-gradient(bottom, #8A7E6C 0%, #736756 100%);
    background-image: -moz-linear-gradient(bottom, #8A7E6C 0%, #736756 100%);
    background-image: -webkit-linear-gradient(bottom, #8A7E6C 0%, #736756 100%);
    background-image: -ms-linear-gradient(bottom, #8A7E6C 0%, #736756 100%);
    background-image: linear-gradient(to bottom, #8A7E6C 0%, #736756 100%);
    box-shadow: inset 0 0 8px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.75);
}

    .me-profile-slot a {
        cursor: pointer;
    }

        .me-profile-slot a.usableitem {
            width: 40px;
            height: 52px;
            display: block;
            margin: -2px;
        }

    .me-profile-slot img {
        box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.3);
    }

ul.me-profile-slot-items {
    float: right;
    width: 340px;
    clear: none;
}

    ul.me-profile-slot-items li {
        margin: 0 6px 6px 0;
        float: left;
        position: relative;
        width: 31px;
        height: 39px;
    }

        ul.me-profile-slot-items li a {
            display: block;
            width: 27px;
            height: 35px;
            border: 2px solid #333333;
            background-image: -o-linear-gradient(bottom, #A39580 0%, #8E806A 100%);
            background-image: -moz-linear-gradient(bottom, #A39580 0%, #8E806A 100%);
            background-image: -webkit-linear-gradient(bottom, #A39580 0%, #8E806A 100%);
            background-image: -ms-linear-gradient(bottom, #A39580 0%, #8E806A 100%);
            background-image: linear-gradient(to bottom, #A39580 0%, #8E806A 100%);
            box-shadow: 0 2px 3px rgba(0,0,0,0.75);
            cursor: pointer;
        }

        ul.me-profile-slot-items li.slot-item-empty, ul.me-profile-slot-items li.slot-item-empty:hover, ul.me-profile-slot-items li.slot-item-empty:focus {
            width: 27px;
            height: 35px;
            margin: 2px 8px 8px 2px;
            box-shadow: 0 0 3px 1px rgba(0,0,0,0.2);
            background: rgba(0,0,0,0.1);
            border: none;
            -webkit-transform: none;
        }

        ul.me-profile-slot-items li a:hover, ul.me-profile-slot-items li a:focus, .me-profile-slot:hover, .me-profile-slot:focus {
            border-color: #F0A300;
        }

        ul.me-profile-slot-items li img {
            width: 27px;
            height: 35px;
        }
/* SCRAPBOOK AND MANTELPIECE OVERWRITES */
#mantelpiece .qq, #scrapbook .qq {
    display: none;
}
/* ------------------------ */
/* --- ACT INVITATION REDESIGN --- */
/* ------------------------ */

.fl-inset-box {
    border-radius: 2px;
    padding: 5px;
    background: #dad2c5;
    border-top: 1px solid #e1dbd1;
    box-shadow: 0 2px 4px #000000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.75);
    color: #333333;
    margin-bottom: 20px;
}

    .fl-inset-box h2 {
        font-size: 0.8em;
    }

    .fl-inset-box h5 {
        font-size: 0.7em;
        margin-bottom: 1em;
    }

.select-or-add-left, .select-or-add-right {
    width: 48%;
}

.select-or-add-left {
    float: left;
    margin-right: 1%;
}

.select-or-add-right {
    float: right;
    margin-left: 1%;
}

.select-or-add-left select {
    width: 100%;
}

.toggle-ineligible-contacts {
    font-size: 9pt;
    color: #555555;
    cursor: pointer;
}

    .toggle-ineligible-contacts:hover, .toggle-ineligible-contacts:focus {
        text-decoration: none;
    }

#disqualifiedContacts {
    padding: 0.5em 0 0 0.5em;
    font-size: 0.7em;
}

ul.disqualified-players {
    list-style-type: disc;
}

.disqualified-players li {
    list-style-type: disc;
    margin: 1em 0 0 1.5em;
}

.suggest-friend-button {
    float: right;
    margin: -0.2em 5px 0 0 !important;
}

.add-friend-feedback {
    font-size: 9pt;
    color: #555555;
}

.addNewFriendField {
    padding: 0.2em;
    width: 230px;
    margin-right: 10px;
}

.actInvitationMessage {
    margin-bottom: 20px;
    font-size: 0.8em;
}

.textarea-notice {
    color: #333333;
    font-size: 8pt;
    display: block;
    margin-bottom: 1em;
}

.act-invite-form-custommessage {
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif;
    padding: 0.2em;
    margin-top: 1em;
}
/* ----------------- */
/* --- NEW CARDS --- */
/* ----------------- */

ul#cards.hand-size4 li, ul#cards.hand-size5 li {
    width: 112px;
}
/* 
ul#cards.hand-size5 li
{
    width: 83px;
}
*/
.storylet-select.storylet.gold {
    background: #d8d2c9;
}

.storylet.gold {
    background: #ecc249;
}

/*------------------------------------*\
   TOOLTIPS & POPUPS
\*------------------------------------*/

#master-tooltip {
    display: none;
    position: absolute;
    font-size: 9pt;
    line-height: 1.2em;
    max-width: 250px;
    z-index: 1050;
}

    #master-tooltip:empty {
        padding: 0;
        border: 0;
        width: 0;
        height: 0;
    }

    #master-tooltip .tooltip {
        display: block;
    }

    #master-tooltip .button-simple {
        font-size: 0.8em;
    }

    #master-tooltip .wordy-list {
        list-style-type: disc;
        margin: 0;
        padding: 0.3em 0 0 1.5em;
        font-size: 0.9em;
    }

        #master-tooltip .wordy-list li {
            padding: 0;
            margin: 0;
        }

.active-tooltip .tooltipChoices {
    display: block;
}

.tooltipChoices {
    display: none;
}

    .tooltipChoices .button {
        font-size: 0.9em;
    }

.closeCM {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 15px;
    background: #555555;
    height: 15px;
    color: #caba99;
    border-radius: 10px;
    display: block;
    line-height: 1.2em;
    text-align: center;
    font-size: 11px;
    cursor: pointer;
}

    .closeCM:hover, .closeCM:focus {
        text-decoration: none;
        color: #FFFFFF;
    }

.contextMenuToggle {
    cursor: pointer;
}

#master-tooltip h3 {
    margin: 0;
    font-size: 1.1em;
}

#master-tooltip em {
    display: block;
    margin-top: 0.2em;
    font-size: 0.9em;
}

#master-tooltip p {
    margin: 0.5em 0 0 0 !important;
    font-size: 1em;
    line-height: 1.2em;
}

    #master-tooltip p:first-child {
        margin: 0;
    }

#master-tooltip .buttons {
    margin-top: 0.5em;
}

.tooltip .tt {
    display: none;
}

#master-tooltip {
    padding: 5px;
    border: 1px solid #555555;
    border-radius: 2px;
    background-image: url(http://images.echobazaar.failbettergames.com.s3.amazonaws.com/tooltip_bg.png);
    color: #30291b;
    box-shadow: 0 2px 6px 0 #000000, inset 0 0 1px #FFE7B3;
}

    #master-tooltip .standard_btn {
        font-size: 1em;
        padding: 0.2em 0.4em;
        margin-right: 0.5em;
        min-width: 40px;
    }
    #master-tooltip hr {
        padding: 0;
        margin: 1em 0;
        border: none;
        border-top: 2px dotted rgba(0, 0, 0, 0.5);
    }

#latestNewsBar {
    padding: 10px 0;
    background: #33422b;
    background: -moz-linear-gradient(top, #455b39 0%, #33422b 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#455b39), color-stop(100%,#33422b));
    background: -webkit-linear-gradient(top, #455b39 0%,#33422b 100%);
    background: -o-linear-gradient(top, #455b39 0%,#33422b 100%);
    background: -ms-linear-gradient(top, #455b39 0%,#33422b 100%);
    background: linear-gradient(to bottom, #455b39 0%,#33422b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#455b39', endColorstr='#33422b',GradientType=0 );
    box-shadow: inset 0 0 1px #93dc49, 0 2px 3px #000000;
}

    #latestNewsBar.hidden {
        display: none;
    }

    #latestNewsBar img {
        float: left;
        margin-right: 10px;
        height: 40px;
        box-shadow: 0 1px 2px #000000;
    }

.latest-news-content {
    float: left;
    font-size: 0.9em;
}

    .latest-news-content h4 {
        display: block;
    }

        .latest-news-content h4 date {
            font-size: 0.8em;
            color: #7AB35B;
        }

    .latest-news-content p {
        margin: 0;
        max-width: 800px;
    }

    .latest-news-content a {
        font-weight: bold;
        text-decoration: underline;
        color: inherit;
    }

        .latest-news-content a:hover, .latest-news-content a:focus {
            text-decoration: none;
        }

.close-latest-news {
    display: block;
    float: right;
    margin: 0.5em 0 0 10px;
    padding: 0.5em 1em;
    background: black;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    border: none;
    font-weight: 600;
    background: #96e04c;
    background: -moz-linear-gradient(top, #96e04c 0%, #5e9c1f 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#96e04c), color-stop(100%,#5e9c1f));
    background: -webkit-linear-gradient(top, #96e04c 0%,#5e9c1f 100%);
    background: -o-linear-gradient(top, #96e04c 0%,#5e9c1f 100%);
    background: -ms-linear-gradient(top, #96e04c 0%,#5e9c1f 100%);
    background: linear-gradient(to bottom, #96e04c 0%,#5e9c1f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#96e04c', endColorstr='#5e9c1f',GradientType=0 );
    border: 1px solid #578b23;
    box-shadow: inset 0 0 1px #93dc49, 0 2px 3px #000000;
    color: #21360d;
    text-shadow: 0 1px #8fd846;
}

    .close-latest-news:hover, .close-lastest-news:focus {
        background: #9df754;
        background: -moz-linear-gradient(top, #9df754 0%, #6dba25 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9df754), color-stop(100%,#6dba25));
        background: -webkit-linear-gradient(top, #9df754 0%,#6dba25 100%);
        background: -o-linear-gradient(top, #9df754 0%,#6dba25 100%);
        background: -ms-linear-gradient(top, #9df754 0%,#6dba25 100%);
        background: linear-gradient(to bottom, #9df754 0%,#6dba25 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9df754', endColorstr='#6dba25',GradientType=0 );
        text-decoration: none;
    }

/*------------------------------------*\
   FATE CARD DISCOUNTS
\*------------------------------------*/

.discount {
    position: relative;
}

    .discount:after {
        background: url('http://images.echobazaar.failbettergames.com.s3.amazonaws.com/css_img/50-discount-splash.png') no-repeat;
        position: absolute;
        display: block;
        content: '';
        width: 81px;
        height: 81px;
        top: -113px;
        right: -2px;
    }

.action-discount-link {
    display: block;
    font-weight: bold;
    text-align: center;
    color: #63AC22 !important;
}

/*------------------------------------*\
   PLAN STATE STYLE
\*------------------------------------*/

a.bookmark-plan {
    position: absolute;
    top: -2px;
    text-shadow: 0 2px 2px rgba(0,0,0,0.6);
    right: 10px;
    color: #9D978F;
    font-size: 28px;
    overflow: hidden;
    height: 28px;
}

    a.bookmark-plan i {
        position: relative;
        top: -20px;
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -ms-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        transition: all 0.2s ease;
    }

    a.bookmark-plan:hover, a.bookmark-plan:focus {
        color: #894949;
        ;
        text-decoration: none;
    }

        a.bookmark-plan:hover i, a.bookmark-plan:focus i, a.bookmark-plan.complete i {
            top: -10px;
        }

    a.bookmark-plan.complete:hover, a.bookmark-plan.complete:focus {
        color: #9D978F;
        text-decoration: none;
    }

.bookmark-plan.active, .bookmark-plan.active:hover, .bookmark-plan.active:focus {
    color: #C8170E;
}

    .bookmark-plan.active i {
        top: -10px;
    }

.bookmark-plan.complete {
    color: #9D978F;
}

ul.plans-list {
    margin-bottom: 2em;
}

    ul.plans-list:last-child {
        margin-bottom: 0;
    }

    ul.plans-list li.plan {
        display: block;
        margin: 0 0 1em 0;
        padding: 6px;
        box-shadow: 0 2px 3px rgba(0,0,0,0.3), inset 0 1px rgba(255,255,255,0.3);
        border-radius: 2px;
        border: 1px solid #94856E;
        background: #d8d2c9;
        background-repeat: repeat-x;
    }

        ul.plans-list li.plan:last-child {
            margin-bottom: 0;
        }

li.plan .plan-content {
    float: left;
    width: 560px;
    font-size: 1.2em;
}

li.plan .plan-image {
    float: left;
    width: 40px;
    height: 52px;
    margin: 0 10px 0 0;
    padding: 0;
    border: 1px solid #000;
}

li.plan header {
    border-bottom: 1px solid #EAE5DD;
    box-shadow: 0 1px #B6B2AB;
    margin-bottom: 0.5em;
}

    li.plan header h4 {
        float: left;
        max-width: 480px;
    }

    li.plan header h6 {
        font-style: italic;
        margin: 1em 0 0 0;
        clear: both;
        font-size: 0.8em;
    }

    li.plan header .plan-controls {
        float: right;
    }

        li.plan header .plan-controls a {
            color: #A61710;
            cursor: pointer;
        }

            li.plan header .plan-controls a:hover, li.plan header .plan-controls a:focus, a.edit-notes:hover, a.edit-notes:focus {
                color: #FF0C00;
                text-decoration: none;
            }

li.plan .branch-qRequirements, li.plan .notes-form {
    width: 49%;
}

li.plan .branch-qRequirements {
    float: right;
}

    li.plan .branch-qRequirements a.qreq {
        margin-bottom: 5px;
    }

li.plan .notes-form {
    float: left;
    font-size: 0.8em;
}

li.plan.editing .notes-form .note {
    display: none;
}

li.plan .notes-form .field-and-button {
    display: none;
}

li.plan.editing .notes-form .field-and-button {
    display: block;
}

li.plan .notes-form textarea {
    width: 100%;
    resize: vertical;
}

li.plan .notes-form .note {
    cursor: pointer;
    word-wrap: break-word;
}

/* MODAL DIALOG STYLES */
#modal-dialog p.center-alert {
    text-align: center;
    margin-bottom: 1em;
}

#modal-dialog .options {
    text-align: center;
    margin-bottom: 1em;
}

    #modal-dialog .options button {
        display: inline-block;
        margin: 0 1em;
        min-width: 3em;
        text-transform: uppercase;
        font-size: 0.9em;
    }




/* Mac - CSS added for Physical Orders */




.poEmailinvalid {
    border: medium none;
    padding: 5px;
    border-radius: 3px;
    display: block;
    margin-bottom: 10px;
    background: rgba(255, 5, 5, 0.2) none repeat scroll 0% 0%;
    box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5), 0px 1px 4px rgba(252, 6, 6, 0.6) inset;
    box-sizing: border-box;
    -moz-appearance: none;
    outline: medium none;
}

.order-page {
    padding: 10px;
}

    .order-page p {
        margin-bottom: 1em;
    }

#orderdiv {
    display: none;
}

.order-card {
    float: left;
    margin-right: 1em;
}

.order-form-col {
    width: 50%;
}

    .order-form-col.left {
        float: left;
    }

    .order-form-col.right {
        float: right;
    }

    .order-form-col input, .order-form-col select {
        width: 90%;
        font-size: 0.7em !important;
        font-family: inherit !important;
    }

    .order-form-col #order-button {
        width: inherit !important;
        margin: 2em 12em 1em 0px;
    }

    .order-form-col select {
        -moz-appearance: menulist;
    }

.order-desc {
    margin-right: 15px;
    font-family: CrimsonBold;
    font-size: 16px;
    font-style: italic;
    float: right;
    position: relative;
    width: 46%;
    padding: 1%;
    border: solid 1px #000;
    background: #BEB096 none repeat scroll 0% 0%;
    width: 450px;
}

.showitem-div {
    padding-right: 201px;
    padding-top: 90px;
}


/* TOOLTIP OVERRIDES*/

    .tt .quality-name {
        color: #C8170E;
    }

    .tt em {
        font-style: italic;
        display: inline !important;
    }

    .tt .hint-block {
        margin-top: 0.5em;
        padding-top: 0.5em;
        border-top: 1px solid #796b44;
        color: #6d6041;
    }

ul.wordy-list {
    margin-top: 0.5em !important;
}

    ul.wordy-list li.current {
        font-style: italic;
    }

        ul.wordy-list li.current::after {
            content: " \f00c";
            font-family: 'FontAwesome';
        }


/* NEW PAYMENT OPTIONS */
.braintree-options {
    font-size: 0.8em;
    width: 70%;
}

.security-notice {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.7em;
    background: #000000;
    padding: 0.3em 0.8em;
    color: #DAD2C5;
    border-radius: 1.5em;
    line-height: 1.8em;
}

    .security-notice i {
        font-size: 1.6em;
        margin-right: 0.3em;
        top: 0.05em;
        position: relative;
    }

/* ASPECTS */
ul.aspect-list li {
    height: 16px;
    line-height: 16px;
    padding-bottom: 0.5em;
    font-weight: bold;
}
ul.aspect-list li img {
    width: 16px;
    height: 16px;
    display: inline-block;
    float: left;
    margin-right: 0.5em;
}
label.aspect-selection {
    display: block;
    margin: 1em 0;
    cursor: pointer;
}
label.aspect-selection input {
    display: block;
    float: left;
    margin-right: 1em;
    height: 52px;
}
label.aspect-selection img {
    display: block;
    float: left;
    margin-right: 1em;
    height: 52px;
}
label.aspect-selection .aspect-selection-info {
    float: left
}
.aspect-selection-info h2 {
    margin-top: 0;
}

.choose-outfit {
    float: left;
    width: 75%;    
}

/* PHIL'S FORM STUFF. LOOKS QUITE NICE...'*/

.form__control {
    display: block;
    width: 100%;
    height: 29px;
    padding: 5px;
    font-size: 13px;
    line-height: 1.38462;
    color: #1d1d1d;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #a89e8c;
}

.form__control:focus {
    border-color: #7ebcc0;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(126, 188, 192, 0.6);
}
/* NEW HOMEPAGE STYLES FOR MOBILE ADVERTS*/
.homepage-divider {
    margin: 20px 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);   
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);   
}
.mobile-download-buttons {
    clear: both;
    margin-top: 20px;    
}
.mobile-download-button--ios {
    width: 50%;
}