@charset "UTF-8";
/*    --------------------------------------------------------------------------------------------------------------------------
body/global/reset Styles
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -    */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, 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 {
    border:0;
    margin:0; padding:0; 
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    outline:none;
    font-weight:normal;
}
html {
    overflow-y:scroll;
}
img {
    display:block;
}
body {
    background:#acffec url(../images/bg_repeat.png) 0 0 repeat-x;
    font:normal 14px Arial, Helvetica, sans-serif;
    color:#000;
    line-height:1;
}
ol, ul {
    list-style:none;
}
a {
    
}
 a:hover {

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

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse:collapse;
    border-spacing:0;
}
.altText {
    width:0; height:0;
    display:block;
    overflow:hidden;
}
.cleaner {
    border:0;
    margin:0; padding:0;
    height:0px;
    background:transparent;
    overflow:hidden;
    font-size:1px;
    clear:both;
}
.clearfix:after {
    content: ".";
    height:0;
    display: block;
    clear:both;
    visibility:hidden;
    line-height:0;
}
.clearfix {
    display:inline-block;
}    
html[xmlns] .clearfix {
    display:block;
}
* html .clearfix {
    height:1%;
}

.fullsiteLink {
    display:none;
}

noscript div {
    width:100%;
    font-size:1em;
    background:yellow;
    position:absolute;
    top:20px;
    text-align:center;
    padding:10px;
}

.br {
    display:block !important;
    height:0;
    margin:-5px 0 0 0 !important;
}

.noMargin {
    margin-right:0 !important;    
}
.visible {
    display:block !important;
}

@font-face {
    font-family: 'LondonBetweenRegular';
    src: url('../fonts/londonbetween-webfont.eot');
    src: url('../fonts/londonbetween-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/londonbetween-webfont.woff2') format('woff2'),
         url('../fonts/londonbetween-webfont.woff') format('woff'),
         url('../fonts/londonbetween-webfont.ttf') format('truetype'),
         url('../fonts/londonbetween-webfont.svg#londonbetweenregular') format('svg');
    font-weight: normal;
    font-style: normal;
}



.button {
    /* Regular CSS Stuff */
    color:#ffffff;
    text-decoration:none;
    padding:6px 8px;
    display:inline-block;
    text-align:center;
    border:0;
    cursor:pointer;
    font-size:14px;
    
    /*IE 7 Inline Block hack*/
    *display:inline;
    zoom:1;
    
    background:#4b7085 url(../images/bg_button_gradient.png) repeat-x;
    
    /* Rounded Edges */
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
    
    /* Shadow */
    -webkit-box-shadow: #4c7186 0px 2px 3px;
    -moz-box-shadow: #4c7186 0px 2px 3px;
    box-shadow: #4c7186 0px 2px 3px;
    
    /* CSS3Pie*/
    behavior:url('PIE.htc'); /* Relative to the document, not to CSS file. */
    position:relative;
}

.button.large {
    background:#4b7085 url(../images/bg_button_gradient_lg.png) repeat-x;
    font-size:24px;    
}
.button.small {
    font-size:11px;    
}
.spaceRight5 {
    margin-right:5px !important;    
}
.spaceRight10 {
    margin-right:10px !important;    
}

.button:hover {
    color:#acffec;
}
.button:hover span {
    color:#fff;
}
.button span,
strong,
#instructions .close:hover {
    color:#acffec;    
}
.whoOwes {
    margin:20px 0 0 0;    
}

ul.payments {

}
ul.payments li {
    display:inline-block;
    *display:inline;
    zoom:1;
    margin:0 5px 10px 5px;
}

.amountHolder {
    background:#fff url(../images/btn_sprite.png) 0 -48px no-repeat;
    padding:4px 1px 1px 1px;

    /* Rounded Edges */
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
    
    -webkit-box-shadow: inset #4c7186 2px 2px 3px;
    -moz-box-shadow: inset #4c7186 2px 2px 3px;
    box-shadow: inset #4c7186 2px 2px 3px;
    
    /* CSS3Pie*/
    behavior:url('PIE.htc');
    position:relative;
}
.amount {
    width:68px;
    height:22px;
    padding:0 9px;
    background:transparent;
    font:normal 16px Arial, Helvetica, sans-serif;
    border:0;
    text-align:center;
    outline:none;
    float:left;
}

.total.amount {
    width:180px;
    height:37px;
    margin:18px auto 0 auto;
    /*background:#fff url(../images/equals.png) 6px 16px no-repeat;*/
    background:#fff url(../images/btn_sprite.png) 7px -95px no-repeat;
    font-size:30px;    
    text-align:center;
    padding-top:3px;
    float:none;
    
    /* Rounded Edges */
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
    
    -webkit-box-shadow: inset #4c7186 2px 2px 3px;
    -moz-box-shadow: inset #4c7186 2px 2px 3px;
    box-shadow: inset #4c7186 2px 2px 3px;
    
    /* CSS3Pie*/
    behavior:url('PIE.htc');
    position:relative;
    -pie-poll:true;
}

#controls {
    margin-top:25px;    
}

.info {
    background:transparent;
    border:0;
    width:30px;
    float:left;
    font:normal 18px Arial, Helvetica, sans-serif;
}

#main {
    margin:0 auto 50px auto;
    padding:26px 0 0 0;
    position:relative;
}
header h1 {
    width:339px; height:37px;
    margin:0 auto 11px auto;
    background:url(../images/h1_wdioy.png) 0 0 no-repeat;    
    text-indent:-9999px;
}
header h2 {
    width:515px; height:22px;
    margin:0 auto 20px auto;
    background:url(../images/h2_bills.png) 0 0 no-repeat;
}
.section {
    padding:0 0 8px 0;
    border-right:dashed 1px #71b0c2;
    text-align:center;
    vertical-align:top;
    display:inline-block;
    zoom:1;
    *display:inline;
    position:relative;
}
.section.last {
    border:0;    
}
.name {
    background:none;
    padding:1px;
    border:0;
    font:normal 26px Arial, Helvetica, sans-serif;
    color:#fff;
    text-shadow: #4c7186 2px 2px 2px;
    text-align:center;
}
.name.highlight {
    background: #9AE4F0 url(../images/btn_sprite.png) 5px -235px no-repeat;
    border: 1px dashed #4C7186;
    margin:-2px 0 0 -2px;
}
#calculate {
    text-align:center;    
}
#resultsHolder {
    margin:0 0 40px 0;
    display:none;
}    
#resultsHolder .button {
    font-size:17px;
    width:135px;
    margin:0 20px 0 0;
    float:left;
}
#resultsHolder #iou {
    width:152px;
}

#result {
    padding:14px 35px;
    margin:15px 0 0 0;
    font:normal 24px Arial, Helvetica, sans-serif;
    color:#fff;
    text-shadow: #4c7186 2px 2px 2px;
    display:inline-block;
    *display:inline;
    zoom:1;
    
    background:#88d009 url(../images/bg_results_gradient.png) 0 0 repeat-x;
    
    /* CSS3Pie*/
    behavior:url('PIE.htc'); /* Relative to the document, not to CSS file. */
    position:relative;
}
#result a {
    font-size:14px;
    color:#fff;
    text-decoration:none;
}
#options {
    margin:10px auto 0 auto;
    width:340px; /* 495 with third button */
}
#footer {
    margin:0 0 40px 0; padding:3px 0;
    background:url(../images/bg_footer.png) 0 0 repeat-x;    
    font:normal 16px "LondonBetweenRegular", Arial, Helvetica, sans-serif;
    color:#fff;
    text-align:center;
    text-shadow: #4c7186 2px 2px 2px;
}
#footer a {
    color:#a4f3ee;
    text-decoration:none;
}
#footer a:hover {
    color:#fff;    
    text-decoration:underline;
}
#topMenu {
    position:absolute;
    top:10px; right:10px;
}
#topMenu a {
    float:left;
    margin:0 10px 0 0;
}

.modal {
    border:solid 2px #acffec;
    width:400px;
    padding:20px;
    margin:0 0 0 -220px;
    position:absolute;
    left:50%;
    background:url(../images/bg_alert.png) 0 0 repeat;    
    display:none;
    color:#fff;
    text-align:center;
}
.modal input {
    margin:0 0 10px 0;    
}
.modal .emails input {
    width:70%;
    text-align:center;
    font-size:13px;
}
.modal a {
    color:#fff;    
}
.modal_close {
    width:29px; height:29px;
    background:url(../images/gritter.png) 0 0 no-repeat;
    display:block;
    position:absolute;
    top:-9px; left:-12px;
    text-indent:-9999px;
}
.toDelete {
    background:#6da0aa;    
    cursor:pointer;
}
.delete {
    width:16px; height:16px;
    background:url(../images/btn_sprite.png) 2px -20px no-repeat;    
    display:block;
    position:absolute;
    right:2px; top:7px;
    display:none;
}
.error {
    background-color:#ffa7a2 !important;    
}
#email_error {
    color:#ffa7a2;
    width:400px;
    margin-bottom:10px;
    display:none;
}
.ie6 {
    display:none;
}
.disabled {
    cursor:default;
}
.disabled:hover {
    color:#fff;
}
.loader {
    display:none;
    position:absolute;
    left:50%; top:102px;
    margin:0 0 0 -16px;
}
/* Hide the mobile alerts*/
#alert.mobile {
    display:none !important;
}

.sharing {
    padding:0 0 0 28px;
}
.plus_holder {
    margin: 0px 0 0 20px;
    display: inline-block;
    position: relative;
    top: 3px;
}

/* Blog */
.blogroll {
    width: 75%;
    margin: 40px auto 0 auto;
}
.blogroll h2 {
    font:normal 34px "LondonBetweenRegular";
    color: #fff;
    text-shadow:1px 1px 3px #333;
    letter-spacing: -1px;
}
.blogroll ul {
    background: #fff;
    background: rgba(255,255,255,.75);
    padding: 3%;
}
.blogroll li {
    display: table;
}
.blogroll h3 {
    margin: 0 0 9px 0;
    font: normal 24px Arial;
}
.blogroll h3 a {
    text-decoration: none;
    color: #333;
}
.blogroll h3 a:hover {
    text-decoration: underline;
}
.blogroll p {
    font: normal 14px/23px Arial;
}
.blogroll img {
    display: table-cell;
    width: 220px;
    vertical-align: middle;
}
.blogroll .button {
    padding-left:20px;
    padding-right: 20px;
    font-size: 16px;
    float: right;
    margin: 15px 0 0 0;
}
.blogroll .article {
    width: 80%;
    padding-left: 5%;
    display: table-cell;
    vertical-align: top;
}