/* ================================

No Thirst Software
01/07/13

A refresh of the No Thirst Software
website, starting with MoneyWell Express.
Sleek, modern, and blue.

   _       _       _
__(.)<  __(.)>  __(.)>
\___)   \___)   \___) 
Get your ducks in a row
And away we go...

==================================== */


/*  ===================================

IMPORTS

==================================== */
@import url('skeleton.css'); /* Responsive Grid */


/*  ===================================

RESET

==================================== */
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
    }
table {
    border-collapse:collapse;
    border-spacing:0;
    }
fieldset,img {
    border:0;
    }
address,caption,cite,code,dfn,th,var {
    font-style:normal;
    font-weight: 200;
    }
ol,ul {
    list-style:none;
    }
li {
    font-style: normal;
    font-weight: 200;
    }
caption,th {
    text-align:left;
    }
figure {
	}
figcaption {
    text-align:left;
    font-size: 90%;
    font-style: italic;
    font-weight: 200;
    color: #999;
	}
h1,h2,h3,h4,h5,h6 {
    font-size:150%;
    font-weight: 200;
    color: #555;
    }
q:before,q:after {
    content:'';
    }
abbr,acronym {
    border:0;
    }
a img {
    border: 0;
    }


/*  ===================================

GLOBAL ELEMENTS

==================================== */
body {
	background: url(/images/mwe/blue-tile-bg.jpg);
    color: #222;
    font: 200 18px 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.clearfix{
    clear: both;
}

/* Typography */
a {
    -webkit-transition: color 0.2s ease-in;  
       -moz-transition: color 0.2s ease-in;  
         -o-transition: color 0.2s ease-in;  
            transition: color 0.2s ease-in;
}

.center {
    text-align: center;
}

/* Images */
img {
    max-width: 100%;
}

.leftTight {
    padding-right: 5px;
    float: left;
}

.rightTight {
    padding-left: 5px;
    float: right;
}

.leftImage {
    padding-right: 10px;
    float: left;
}

.rightImage {
    padding-left: 10px;
    float: right;
}

/* Hide mobile-only elements */
.show-on-mobile {
    display: none !important;
}

.inline {
	padding: 0;
	float: none;
	position: relative;
}


/*  ===================================

TEASER PAGE

==================================== */
#teaser {
    background: #0a0d12;
    margin: 0 auto;
    padding: 0 10px;
    width: 600px;
}

    #teaser-content {
        background: #0a0d12 url(/images/mwe/mwe-teaser.jpg) no-repeat center top;
    }

        #teaser-content h1 {
            /*background: url(/images/mwe/teaser-tagline.png) no-repeat center 440px;*/
            border-bottom: 1px solid #3c3d41;
            color: #cecfd0;
            font-size: 26px;
            font-weight: 300;
            margin: 0 auto;
            padding: 420px 0 20px;
            text-align: center;
            max-width: 480px;
        }

/* Signup form */
#teaser .signup {
    margin-bottom: 10px;
    padding: 20px 10px 0;
    text-align: center;
}

    /* Email input */
    #teaser .signup #signup_email {
        background: #9e9e9e; /* Old browsers */
        background: -moz-linear-gradient(top, #9e9e9e 0%, #bdbdbd 10%, #fdfdfd 100%); /* Firefox */
        background: -webkit-linear-gradient(top, #9e9e9e 0%,#bdbdbd 10%,#fdfdfd 100%); /* Chrome, Safari */
        background: -o-linear-gradient(top, #9e9e9e 0%,#bdbdbd 10%,#fdfdfd 100%); /* Opera */
        border: none;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -o-border-radius:5px;
        border-radius: 5px;
        -webkit-box-shadow: inset 0 2px 3px rgba(0,0,0,0.5);
        -moz-box-shadow: inset 0 2px 3px rgba(0,0,0,0.5);
        -o-box-shadow: inset 0 2px 3px rgba(0,0,0,0.5);
        box-shadow: inset 0 2px 3px rgba(0,0,0,0.5);
        display: inline-block;
        font: 18px 'Helvetica Neue', Helvetica, Arial, sans-serif;
        height: 40px;
        margin-right: 10px;
        padding: 0 10px;
        width: 260px;
    }

        #teaser .signup #signup_email:focus {
            background: #fff;
            outline: none;
        }

    /* Signup button */
    #teaser .signup #webform_submit_button {
        background: #50b2cc; /* Old browsers */
        background: -moz-linear-gradient(top, #50b2cc 0%, #378ec6 100%); /* Firefox */
        background: -webkit-linear-gradient(top, #50b2cc 0%,#378ec6 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #50b2cc 0%,#378ec6 100%); /* Opera 11.10+ */
        border: none;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -o-border-radius:5px;
        border-radius: 5px;
        -webkit-box-shadow: inset 0 1px rgba(255,255,255,0.4);
        -mox-box-shadow: inset 0 1px rgba(255,255,255,0.4);
        -o-box-shadow: inset 0 1px rgba(255,255,255,0.4);
        box-shadow: inset 0 1px rgba(255,255,255,0.4);
        color: #0e3141;
        cursor: pointer;
        display: inline-block;
        font: 18px 'Helvetica Neue', Helvetica, Arial, sans-serif;
        line-height: 40px;
        text-shadow: 0 1px rgba(255,255,255,0.5);
        width: 165px;
    }

        #teaser .signup #webform_submit_button:hover { 
            background: #4ec6df; /* Old browsers */
            background: -moz-linear-gradient(top, #4ec6df 0%, #4eaddf 100%); /* Firefox */
            background: -webkit-linear-gradient(top, #4ec6df 0%,#4eaddf 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #4ec6df 0%,#4eaddf 100%); /* Opera 11.10+ */
        }
        #teaser .signup #webform_submit_button:active { 
            background: #50b2cc; /* Old browsers */
            background: -moz-linear-gradient(bottom, #50b2cc 0%, #378ec6 100%); /* Firefox */
            background: -webkit-linear-gradient(bottom, #50b2cc 0%,#378ec6 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(bottom, #50b2cc 0%,#378ec6 100%); /* Opera 11.10+ */
            -webkit-box-shadow: inset 0 2px 3px rgba(0,0,0,0.7);
            -moz-box-shadow: inset 0 2px 3px rgba(0,0,0,0.7);
            -o-box-shadow: inset 0 2px 3px rgba(0,0,0,0.7);
            box-shadow: inset 0 2px 3px rgba(0,0,0,0.7);
        }

    /* Error feedback */
    #teaser .signup .mimi_field_feedback {
        clear: left;
        color: #F32D2D;
        float: left;
        margin-top: 5px;
    }

/* Confirmation */
#teaser .confirmation h3 {
    color: #fff;
    font-weight: 300;
}


/*  ===================================

HEADER

==================================== */
#header {
    background: url(/images/mwe/header-bg.png) repeat-x;
    height: 61px;
}

/* Logo */
    #logo {
        background: url(/images/mwe/logo.png) no-repeat left top;
        float: left;
        height: 61px;
        text-indent: -9999em;
        width: 122px;
    }
    @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (   min--moz-device-pixel-ratio: 2),
    only screen and (     -o-min-device-pixel-ratio: 2/1),
    only screen and (        min-device-pixel-ratio: 2),
    only screen and (                min-resolution: 192dpi),
    only screen and (                min-resolution: 2dppx) { 
    
        #logo {
            background-image: url(/images/mwe/logo-2x.png);
            background-size: 122px auto;
        }

    }

    #logo:hover {
        background-position: left bottom;
    }

/* Main Navigation */
#nav {
    float: right;
}

    #nav ul {
        float: right;
        margin-right: -15px;
    }

        #nav ul li {
            float: left;
            font-size: 16px;
        }

        #nav ul li a {
            color: #c4c7c9;
            display: block;
            line-height: 60px;
            padding: 0 15px;
            text-decoration: none;
        }

        #nav ul li a:hover {
            color: #fff;
        }

        #nav ul li a.active {
            background: url(/images/mwe/nav-active-small.png) no-repeat center top;
            color: #fff;
        }

        #nav ul li a.active.small {
            background: url(/images/mwe/nav-active-small.png) no-repeat center top;
        }


/*  ===================================

BANNER CONTENT

==================================== */
#banner {
    background: url(/images/mwe/banner-glow.png) no-repeat center bottom;
    color: #fff;
    padding-bottom: 80px;
    text-shadow: 0 2px 1px rgba(0,0,0,0.7);
}

    #banner .content {
        padding-top: 50px;
    }

/* Typography */
    #banner h1 {
    	color: #fff;
        font-size: 56px;
        font-weight: 100;
    }

    #banner h3 {
        border-bottom: 1px solid #6a7078;
        color: #bec8d4;
        font-size: 30px;
        font-weight: 100;
        padding-bottom: 30px;
    }

    #banner p {
        font-size: 18px;
        line-height: 24px;
        padding: 30px 0;
    }

    #banner a {
        color: #98ebfc;
    }

        #banner a:hover {
            color: #fff;
        }

/* iPhone Preview image */
    #banner #iphone {
        bottom: -150px;
        left: -60px;
        position: absolute;
    }

/* Screenshots */
    #banner .screenshots {
        border-bottom: 1px solid #6a7078;
        margin: 0 -10px 30px;
        overflow: hidden;
    }

        #banner .screenshots li {
            float: left;
            margin-bottom: 25px;
            width: 20%;
        }

/* App Store button & info */
    #banner #appstore {
        background: #50b2cc; /* Old browsers */
        background: -moz-linear-gradient(top, #47a8dc 0%, #216fac 100%); /* Firefox */
        background: -webkit-linear-gradient(top, #47a8dc 0%,#216fac 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #47a8dc 0%,#216fac 100%); /* Opera 11.10+ */
        border: 1px solid #404650;
        -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
             -o-border-radius: 5px;
                border-radius: 5px;
        -webkit-box-shadow: inset 0 1px rgba(255,255,255,0.4), 0 1px 3px rgba(0,0,0,0.4);
           -mox-box-shadow: inset 0 1px rgba(255,255,255,0.4), 0 1px 3px rgba(0,0,0,0.4);
             -o-box-shadow: inset 0 1px rgba(255,255,255,0.4), 0 1px 3px rgba(0,0,0,0.4);
                box-shadow: inset 0 1px rgba(255,255,255,0.4), 0 1px 3px rgba(0,0,0,0.4);
        color: #0e3141;
        cursor: pointer;
        display: inline-block;
        font: 18px 'Helvetica Neue', Helvetica, Arial, sans-serif;
        height: 69px;
        position: relative;
        text-align: center;
        text-decoration: none;
        text-shadow: 0 1px rgba(255,255,255,0.4);
        width: 242px;
    }

        #banner #appstore:hover {
            background: #4ec6df; /* Old browsers */
            background: -moz-linear-gradient(top, #4aaad7 0%, #2478b1 100%); /* Firefox */
            background: -webkit-linear-gradient(top, #4aaad7 0%,#2478b1 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #4aaad7 0%,#2478b1 100%); /* Opera 11.10+ */
        }

        #banner #appstore:active {
            background: #50b2cc; /* Old browsers */
            background: -moz-linear-gradient(bottom, #47a8dc 0%, #216fac 100%); /* Firefox */
            background: -webkit-linear-gradient(bottom, #47a8dc 0%,#216fac 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(bottom, #47a8dc 0%,#216fac 100%); /* Opera 11.10+ */
            -webkit-box-shadow: inset 0 2px 3px rgba(0,0,0,0.7);
               -moz-box-shadow: inset 0 2px 3px rgba(0,0,0,0.7);
                 -o-box-shadow: inset 0 2px 3px rgba(0,0,0,0.7);
                    box-shadow: inset 0 2px 3px rgba(0,0,0,0.7);
        }

        #banner #appstore .apple {
            float: left;
            margin: 4px 10px 0 0;
        }

        #banner #appstore .free-ribbon {
            position: absolute;
            top: -2px;
            left: -2px;
        }

        #banner #appstore > span {
            display: inline-block;
            margin: 8px auto 0;
        }

        #banner #appstore > span > span {
            display: block;
            font-size: 30px;
            margin-top: -5px;
        }

    #banner .appstore-info {
        float: left;
        font-size: 14px;
        margin-right: 40px;
/*        padding-top: 15px;*/
        max-width: 340px;
    }

#ipadBanner {
	background-image: url(/images/mwipad-device-600.png);
	background-repeat: no-repeat;
	background-position: top left;
	margin-top: 0;
	margin-left: -80px;
	height: 500px;
}

#ipadBanner .content {
	margin-left: 620px;
	margin-right: 0;
	padding-top: 50px;
}

    #ipadBanner h1 {
    	/*color: #fff;*/
        font-size: 54px !important;
        font-weight: 100;
    }

    #ipadBanner h3 {
        border-bottom: 1px solid #6a7078;
        /*color: #bec8d4;*/
        font-size: 36px !important;
        font-weight: 100;
        padding-bottom: 30px;
    }

    #ipadBanner p {
        font-size: 18px;
        line-height: 24px;
        padding: 30px 0;
    }

/*  ===================================

MAIN CONTENT

==================================== */
/* Styles from default.css */
.bannerRight {
    position: absolute;
    left: 600px;
    top: 110px;
}
.downloadNowFloating {
    position: absolute;
    left: 610px;
    top: 260px;
    z-index: 1;
    text-align: center;
}
.downloadNowFloating p {
    color: #888;
    font-size: 0.80em;
}
.downloadNowFloating a {
    text-decoration: none;
    border-bottom: none;
    padding-bottom: 4px;
}

.feature { padding-top: 20px; position: relative; clear: both; border-top: 1px dashed #ccc; }
.feature.first { padding-top: 0; border-top: none; }

.floatLeft { margin-left: -20px; padding-right: 20px; float: left; margin-bottom: 20px; }
.textRight { float: right;}
.floatRight { margin-right: -20px; padding-left: 20px; float: right; margin-bottom: 20px; }
.flushLeft { margin-left: -40px; padding-right: 20px; float: left; margin-bottom: 20px; }
.flushRight { margin-right: -40px; padding-left: 20px; float: right; margin-bottom: 20px; }
.bleedLeft { margin-left: -80px; padding-right: 20px; float: left; margin-bottom: 20px; position: relative; }
.bleedRight { margin-right: -60px; padding-left: 20px; float: right; margin-bottom: 20px; }

.helpImage { border: 1px solid #ccc; }
.helpImageFloatRight { margin-right: -20px; margin-left: 20px; float: right; margin-bottom: 20px; border: 1px solid #ccc; }
.helpImageFloatLeft { margin-left: -20px; margin-right: 20px; float: left; margin-bottom: 20px; border: 1px solid #ccc; }

.column { float: left; }
.grid1col, .grid2col, .grid3col { width: 100%; }
.row1, .row2 { padding-top: 20px; padding-bottom: 20px; clear: both; }
.row1 img { float: right; margin-left: 20px; }
.row2 img { float: left; margin-right: 20px; }

.grid1col .column { width: 100%; margin-left: 0; }
.grid1col .column.last { width: 100%; float: left; }
.grid1col .row1 { background-color: white; }
.grid1col .row2 { background-color: #dfe5ee; }

.grid2col .column { width: 49%; margin-left: 2%; }
.grid2col .column.last { width: 48%; float: right; }

.grid3col .column { width: 31%; margin-left: 3%; }
.grid3col .column.last { width: 31%; float: right; }

.column.first, .column.last { margin-left: 0 !important; }
.column.last { float: right !important; }

/* New Styles */
#content {
    background: #fff;
    padding: 40px 0;
}

    #content .centered {
        text-align: center;
        padding-bottom: 10px;
    }

/* Typography */
#content h1 {
    font-size: 36px;
    margin-bottom: 0.3em;
}

#content h2 {
    font-size: 32px;
    margin-bottom: 0.3em;
}

#content h3 {
    font-size: 28px;
    margin-bottom: 0.3em;
}

#content h4 {
    font-size: 24px;
}

#content p {
    line-height: 1.5em;
    margin-bottom: 1.2em;
}

#content a {
    color: #587CB8;
    text-decoration: none;
}

    #content a:hover {
        color: #495F85;
    }

#content ul,
#content ol {
    margin-bottom: 1.2em;
    padding-left: 2.8em;
    overflow: hidden;
}

    #content ul li,
    #content ol li {line-height: 1.5em;}

    #content ul li {list-style: disc;}
    #content ol li {list-style: decimal;}

#content .row.even p,
#content .row.even h3 {
    margin-right: 20px;
}

#content .listHeader { color: #444; margin-bottom: 0; /*padding-top: .5em; */}
#content .indexHeader { padding-bottom: 5px; font-weight: 100; border-bottom: 1px solid #999; margin-bottom: 10px; }

/* Rows Structure */
#content .row {
    margin-bottom: 40px;
}

    #content .row.even {
        background: #e8edf5;
        padding: 20px 0;
    }

    #content .row .image {
        text-align: center;
    }


/*  ===================================

SUBNAV

==================================== */
#subnav {
    float: right;
    margin-bottom: 20px;
    margin-right: -10px;
    top: -10px;
    position: relative;
    display: inline-block;
/*  border: 1px solid red; */
}

#subnav.top-50 {
    top: -50px;
}

#subnav a.active {
    font-weight: 200;
    border-bottom: 3px inset #C7D4EC;
}

#subnav ul {
    margin: 0;
    padding: 0;
    display: block;
    overflow: visible;
    position: relative;
    float: right;
    list-style: none;
}

#subnav li {
    display: inline;
    padding-left: 16px;
    position: relative;
    float: left;
    padding-right: 16px;
    margin-left: 5px;
}

#subnav a {
    text-decoration: none;
    border-bottom: none;
    padding-bottom: 4px;
}

#subnav a:hover {
    border-bottom: 3px inset #eee;
}

#subnav .divider {
    margin: 0 -10px 0 -10px;
    font-size: 1em; 
}

/* Search */
.subnavSearchBox {
    float: right;
    margin-bottom: 20px;
    margin-left: 20px;
    top: -10px;
    position: relative;
}

.subnavSearchBox.top-50 {
    top: -50px;
}

.roundedTextBox {
    background: #fff url(/images/search-icon-12.png) no-repeat 4px 4px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    outline: none;
    padding: 3px 3px 3px 18px;
}
    
    .roundedTextBox:hover {
        border-color: #999;
    }

    .roundedTextBox:focus {
        border-color: #4eaddf;
        -moz-box-shadow: 0 0 10px #4ec6df;
             box-shadow: 0 0 10px #4ec6df;
    }

.hiddenSubmitButton {display: none;}

/*  ===================================

BREADCRUMB

==================================== */
#breadcrumb {
    float: left;
    margin-bottom: 20px;
    margin-right: -10px;
    top: -10px;
    position: relative;
    display: inline-block;
}

#breadcrumb-50 {
    top: -50px;
}

#breadcrumb ul {
    margin: 0;
    padding: 0;
    display: block;
    overflow: visible;
    position: relative;
    float: right;
    list-style: none;
}

#breadcrumb li {
    display: inline;
    padding-left: 2px;
    /*margin: 0;*/
    position: relative;
    float: left;
}

#breadcrumb a {
    text-decoration: none;
    border-bottom: none;
    padding-right: 24px;
    background: transparent url('/images/breadcrumb-divider.png') no-repeat right center;
}

#breadcrumb a:hover {
    font-weight: 300;
}

#breadcrumb .divider {
    margin: 0 -10px 0 -10px;
    font-size: 1em; 
}


/*  ===================================

MAD MIMI FORM

==================================== */
#content .tinyBox {
    padding-top: 5px;
}

/* Email input */
#content .tinyBox #signup_email {
    background: #fff; /* Old browsers */
    background: -moz-linear-gradient(top, #f3f3f3 0%,#fff 100%); /* Firefox */
    background: -webkit-linear-gradient(top, #f3f3f3 0%,#fff 100%); /* Chrome, Safari */
    background: -o-linear-gradient(top, #f3f3f3 0%,#fff 100%); /* Opera */
    border: 1px solid #999;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
         -o-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
       -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
         -o-box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
    display: inline-block;
    font: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 34px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 0 10px;
    width: 260px;
}

    #content .tinyBox #signup_email:focus {
        background: #fff;
        border-color: #4eaddf;
        box-shadow: 0 0 10px #4ec6df;
        outline: none;
    }

/* Signup button */
#content .tinyBox input[type="submit"] {
    background: #50b2cc; /* Old browsers */
    background: -moz-linear-gradient(top, #50b2cc 0%, #378ec6 100%); /* Firefox */
    background: -webkit-linear-gradient(top, #50b2cc 0%,#378ec6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #50b2cc 0%,#378ec6 100%); /* Opera 11.10+ */
    border: 1px solid #378ec6;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
         -o-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: inset 0 1px rgba(255,255,255,0.4);
       -mox-box-shadow: inset 0 1px rgba(255,255,255,0.4);
         -o-box-shadow: inset 0 1px rgba(255,255,255,0.4);
            box-shadow: inset 0 1px rgba(255,255,255,0.4);
    color: #0e3141;
    cursor: pointer;
    display: inline-block;
    font: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 34px;
    padding: 0 15px;
    text-shadow: 0 1px rgba(255,255,255,0.5);
}

    #content .tinyBox input[type="submit"]:hover { 
        background: #4ec6df; /* Old browsers */
        background: -moz-linear-gradient(top, #4ec6df 0%, #4eaddf 100%); /* Firefox */
        background: -webkit-linear-gradient(top, #4ec6df 0%,#4eaddf 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #4ec6df 0%,#4eaddf 100%); /* Opera 11.10+ */
    }
    #content .tinyBox input[type="submit"]:active { 
        background: #50b2cc; /* Old browsers */
        background: -moz-linear-gradient(bottom, #50b2cc 0%, #378ec6 100%); /* Firefox */
        background: -webkit-linear-gradient(bottom, #50b2cc 0%,#378ec6 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(bottom, #50b2cc 0%,#378ec6 100%); /* Opera 11.10+ */
        -webkit-box-shadow: inset 0 2px 3px rgba(0,0,0,0.7);
           -moz-box-shadow: inset 0 2px 3px rgba(0,0,0,0.7);
             -o-box-shadow: inset 0 2px 3px rgba(0,0,0,0.7);
                box-shadow: inset 0 2px 3px rgba(0,0,0,0.7);
    }


/*  ===================================

BUTTONS AND BADGES

==================================== */
.saleBadge {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 99;
}

.awaitingApprovalBadge {
    position: absolute;
    top: 0px;
    left: 400px;
    z-index: 99;
}

.priceTagBadge {
    position: absolute;
    top: 0px;
    left: 800px;
    z-index: 99;
}

.offerEnds {
    position: absolute;
    top: 0px;
    left: 180px;
    z-index: 99;
}

.freetrial {
    display: block;
    background-image: url(/images/FreeTrial.png);
    background-repeat: no-repeat;
    text-indent: -999em;  /* Comment this out to show the text! */
    width: 30px;
    padding-bottom: 8px;
    padding-right: 54px;
    margin: -5px 0 0 5px;
}

.buynow {
    display: block;
    background-image: url(/images/BuyNow.png);
    background-repeat: no-repeat;
    text-indent: -999em;  /* Comment this out to show the text! */
    width: 30px;
    padding-bottom: 8px;
    padding-right: 54px;
    margin: -5px 0 0 -20px;
}

div.shadowButton { 
    clear: both;
    text-align: center;
}

a.buyButton,
a.shadowButton,
a.smallShadowButton,
a.jobsButton {
    background: #50b2cc; /* Old browsers */
    background: -moz-linear-gradient(top, #50b2cc 0%, #378ec6 100%); /* Firefox */
    background: -webkit-linear-gradient(top, #50b2cc 0%,#378ec6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #50b2cc 0%,#378ec6 100%); /* Opera 11.10+ */
    border: 1px solid #378ec6;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
         -o-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: inset 0 1px rgba(255,255,255,0.4), 0 1px 3px rgba(0,0,0,0.4);
       -mox-box-shadow: inset 0 1px rgba(255,255,255,0.4), 0 1px 3px rgba(0,0,0,0.4);
         -o-box-shadow: inset 0 1px rgba(255,255,255,0.4), 0 1px 3px rgba(0,0,0,0.4);
            box-shadow: inset 0 1px rgba(255,255,255,0.4), 0 1px 3px rgba(0,0,0,0.4);
    color: #0e3141 !important;
    cursor: pointer;
    display: inline-block;
    font: 20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 34px;
    padding: 5px 15px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px rgba(255,255,255,0.5);
}
    
    a.buyButton:hover,
    a.shadowButton:hover,
    a.smallShadowButton:hover,
    a.jobsButton:hover { 
        background: #4ec6df; /* Old browsers */
        background: -moz-linear-gradient(top, #4ec6df 0%, #4eaddf 100%); /* Firefox */
        background: -webkit-linear-gradient(top, #4ec6df 0%,#4eaddf 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #4ec6df 0%,#4eaddf 100%); /* Opera 11.10+ */
    }

    a.buyButton:active,
    a.shadowButton:active,
    a.smallShadowButton:active,
    a.jobsButton:active { 
        background: #50b2cc; /* Old browsers */
        background: -moz-linear-gradient(bottom, #50b2cc 0%, #378ec6 100%); /* Firefox */
        background: -webkit-linear-gradient(bottom, #50b2cc 0%,#378ec6 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(bottom, #50b2cc 0%,#378ec6 100%); /* Opera 11.10+ */
        -webkit-box-shadow: inset 0 2px 3px rgba(0,0,0,0.7);
           -moz-box-shadow: inset 0 2px 3px rgba(0,0,0,0.7);
             -o-box-shadow: inset 0 2px 3px rgba(0,0,0,0.7);
                box-shadow: inset 0 2px 3px rgba(0,0,0,0.7);
    }

/* Shadow Button - Tutorials/Support page */
a.shadowButton {
    margin: 0 10px 20px;
    width: 240px;
}

/* Small Shadow Button - Tutorials/Support page */
div.smallShadowButton { margin: 0 auto 60px; width: 230px; clear: both; }

a.smallShadowButton {
    font-size: 16px;
    margin: 0;
    width: 200px;
}

/* Buy Button - MWM Purchase page */
a.buyButton {
    float: left;
    font-size: 20px;
    line-height: 34px;
    margin: 40px 20px;
    padding: 5px 15px;
    width: 320px;
}

a.jobsButton {
    margin-bottom: 20px;
}


/*  ===================================

HOMEPAGE

==================================== */
#banner.home {
    text-align: center;
}

    #banner.home p {
        font-size: 16px;
        padding-top: 10px;
    }


/*  ===================================

MONEYWELL MAC

==================================== */
#overview {
    padding-left: 256px;
}

.filist {
    position: relative;
    float: left;
    width: 300px;
    text-align: left;
    margin: 0;
    padding: 0;
}

.filist ul, .filist ol {
    margin: 0;
    padding: 0 0 0 10px;
    font-size: .75em;
    line-height: 1.5em;
    color: #777;
}


/*  ===================================

MONEYWELL EXPRESS PAGE

==================================== */
#mwe-content #BackgroundSync .image {
    padding-top: 50px;
}

#mwe-content #iPhone5 .image {
    margin-bottom: -20px;
}


/*  ===================================

DEBTQUENCHER

==================================== */
/* Quotes */
.quote {
    background: url(/images/quoteLeft.png) no-repeat 10px -5px;
}

.quote p {
    font-size: .75em;
    margin-bottom: 5px;
    font-weight: 100;
    font-style: italic;
    padding-left: 36px;
}

.quote p.tag {
    font-size: .75em;
    color: #999;
    text-align: right;
    padding-bottom: 4px;
}


/*  ===================================

SUPPORT PAGES

==================================== */
/* Main page */
.videoThumbnail {
    position: relative;
    float: left;
    text-align: center;
    padding-left: 15px;
}

.videoThumbnail p {
    text-align: center;
    font-style: italic;
    font-size: 0.80em;
}

.videoThumbnail a:link,
.videoThumbnail a:visited {
    border-bottom: none;
}

.satisfaction {
	float: right;
}

/* Help Banner */
.helpBanner {
    margin-bottom: 15px;
    border-bottom: 1px dotted; #aaa;
    position: relative;
}

.helpBanner h1 {
    font-size: 50px !important;
    font-weight: 100 !important;
}

.helpBanner img {
    padding-right: 10px;
    float: left;
}

/* Help Footer */
.helpFooter {
    padding-top: 10px;
    border-top: 1px dotted #aaa;
    clear: both;
}

/*  ===================================

Internal Pages

==================================== */

.support fieldset div {
	margin:0.8em 0;
	clear:both;
}
.support form {
	margin:1em;
	width:45em;
}
.support label {
	float:left;
	width:10em;
	font:bold 0.95em;
	text-align:right;
	padding:.25em;
	margin-right:0.5em;
	clear: both;
}
.support legend {
	color:#0b77b7;
	font-size:.95em;
}
.support legend span {
	width:10em;
	text-align:right;
}
.support input {
	border:1px solid #ddd;
	background:#fafafa;
	font-size:.95em;
	-moz-border-radius:0.4em;
	-khtml-border-radius:0.4em;
}
.support input:hover, input:focus {
	border-color:#c5c5c5;
	background:#f6f6f6;
}
.support input[type=text] {
	padding:.25em;
	width:30em;
} 
.support input[type=submit] {
	padding:.25em 2em;
	cursor:pointer;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.support fieldset {
	border:1px solid #ddd;
	padding:0 0.5em 0.5em;
}


/*  ===================================

JOBS

==================================== */
.positionFilled {
    position: absolute;
    left: 40px;
    top: 140px;
    z-index: 10;
}

.positionAvailable {
    position: absolute;
    left: 540px;
    top: 140px;
    z-index: 10;
}


/*  ===================================

404 ERROR PAGE

==================================== */
.error404 {
    background: url(/images/404.png) no-repeat center center;
    width: 100%;
    height: 400px;
}
.error404 h2 {
    font-weight: bold;
    text-align: center;
    font-size: 3em;
    padding-top: 10%;
}
.error404 h3 {
    font-weight: bold;
    text-align: center;
    font-size: 1.5em;
    margin-top: 1.5em;
}


/*  ===================================

FOOTER

==================================== */
#copyright {
    background: #fff;
    color: #888;
    font-size: 12px;
}

    #copyright .container {
        border-top: 1px solid #ccc;
        padding: 15px 0;
        text-align: center;
    }


/*  ===================================

PAGE WITH NO WHITE CONTENT AREA

==================================== */
body.nocontent #banner {
    background: none;
    padding-top: 50px;
}

body.nocontent #copyright {
    background: none;
    color: #a0a5b2;
}

    body.nocontent #copyright .container {
        border-top: 1px solid rgba(255,255,255,0.2);
    }


/*  ===================================

RESPONSIVE GOODNESS

==================================== */
/* Tablet portrait & smaller */
@media screen and (max-width: 959px) {

    /* Hide on mobile */
    .hide-on-mobile {display: none !important;}

    /* Show on mobile */
    .show-on-mobile {display: block !important;}

    /* Main Navigation */
    #nav .mobile-nav {
        background: rgba(0,0,0,0.2);
        border: 1px solid rgba(0, 0, 0, 0.2);
        color: #fff;
        line-height: 30px;
        margin-top: 15px;
        padding: 0 30px;
        text-decoration: none;
    }

        #nav .mobile-nav.active {background: rgba(0,0,0,0.8);}

    #nav ul {
        background: rgba(0, 0, 0, 0.8);
        -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
           -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
             -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
                box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
        display: none;
        float: none;
        margin-right: 0;
        padding: 10px 10px 0;
        position: absolute;
        top: 46px;
        right: 0;
        z-index: 101;
    }

        #nav ul li {
            display: block;
            float: none;
            margin-bottom: 10px;
        }

        #nav ul li a {
            color: #fff;
            line-height: 40px;
        }

        #nav ul li a.active,
        #nav ul li a:hover {
            background: #50b2cc; /* Old browsers */
            background: -moz-linear-gradient(top, #50b2cc 0%, #378ec6 100%); /* Firefox */
            background: -webkit-linear-gradient(top, #50b2cc 0%,#378ec6 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #50b2cc 0%,#378ec6 100%); /* Opera 11.10+ */
        }

    /* Banner Content */
    #banner .content {padding-left: 0;}
    #banner #appstore {width: 100%;}
    #banner .appstore-info {display: block; float: none;}
}

/* Mobile */
@media only screen and (max-width: 767px) {

    /* Banner Content */
    #banner h1 {font-size: 34px;}
    #banner h3 {font-size: 26px;}

    /* Main Content */
    .floatLeft, .floatRight {
        float: none;
        display: block;
        margin-right: 0;
        margin-left: 0;
        padding-right: 0;
        padding-left: 0;
    }

    #content .row.even p,
    #content .row.even h3,
    #content .row.even .image {
        margin-left: 20px;
        margin-right: 20px;
    }

    #content .row.even .image {
        margin-bottom:1.2em;
    }

    /* Subnav menu & Search */
    .subnavSearchBox {
        float: none;
        margin-left: 0;
        top: -30px;
        width: 100%;
    }

    .roundedTextBox {width: 277px;}

    #subnav {
        float: none;
        margin-right: 0;
        top: -30px;
    }
    #subnav ul {
        float: none; 
        text-align: center;
    }
    #subnav li {
        display: inline-block;
        float: none;
        margin: 0 10px 15px;
        padding: 0;
    }

    /* Banner */
    .bannerRight,
    .downloadNowFloating {
        position: static;
    }

    /* MoneyWell Mac */
    #overview {padding-left: 0;}

    /* MoneyWell Express Page Tweaks */
    #mwe-content #BackgroundSync .image {padding-top: 0;}
    #mwe-content #iPhone5 .image {margin-bottom: 0;}
}