@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500|Roboto+Condensed:700);

* {
    padding: 0;
    margin: 0;
}

#calculator .only-print {
    display: none !important;
}

#calculator {
    position: absolute;
    border: 1px solid #f7f7f7;
    width: 750px;
    height: 400px;
    top: 50%;
    left: 50%;
    margin: -200px 0px 0px -375px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;

    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 300;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;      
}

#calculator strong {
    font-weight: 500;
}

#calculator .settings {
    margin: 10px;
    float: left;
    height: 360px;
    background: #f7f7f7;
    width: 290px;
    border: 1px solid #eee;
    padding: 10px;
    position: relative;
}

#calculator .row:before,
#calculator .row:after {
    content: " ";
    display: table;
}

#calculator .col-4,
#calculator .col-5,
#calculator .col-6,
#calculator .col-7,
#calculator .col-8 {
    float: left;
    margin-right: 2.5%;
}

#calculator .col-4 {
    width: 22.5%;
}
#calculator .col-5 {
    width: 35%;
}
#calculator .col-6 {
    width: 47.5%;
}
#calculator .col-7 {
    width: 60%;
}
#calculator .col-8 {
    width: 72.5%;
}

#calculator .row:after {
    clear: both;
}

#calculator .settings .input {
    margin-bottom: 15px;
}

#calculator .settings .input label {
    display: block;
    margin-bottom: 4px;
}

#calculator .settings .input input,
#calculator .settings .input textarea {
    display: block;
    padding: 3px 10px;
    border: 1px solid #eee;
    background: #fff;
    color: #000;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    width: 90%;
}

#calculator .settings .input input:focus,
#calculator .settings .input textarea:focus {
    border: 1px solid #D1B545;
}

#calculator #CalcLogo {
    position: absolute;
    bottom: 8px;
    left: 10px;
    width: 49px;
    height: 55px;
    background: url('../img/ls-logo.png');
}

#calculator #CalcLogo a {
    display: block;
    width: 49px;
    height: 55px;
}

#calculator #CalcActions {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 190px;
    height: 40px;
}

#calculator #CalcActions a {
    display: inline-block;
    height: 40px;
    width: 40px;
    margin-right: 5px;
    background: url('../img/buttons.gif') no-repeat;
    outline: none;
}

#calculator #CalcActions a#CalcShowTable {
    background-position: 0px 0px;
}
#calculator #CalcActions a#CalcShowTable:hover,
#calculator #CalcActions a#CalcShowTable.active {
    background-position: 0px -40px;
}

#calculator #CalcActions a#CalcEmail {
    background-position: -40px 0px;
}
#calculator #CalcActions a#CalcEmail:hover,
#calculator #CalcActions a#CalcEmail.active {
    background-position: -40px -40px;
}

#calculator #CalcActions a#CalcPrint {
    background-position: -80px 0px;
}
#calculator #CalcActions a#CalcPrint:hover {
    background-position: -80px -40px;
}

#calculator #CalcActions a#CalcInfo {
    margin-right: 0;
    background-position: -120px 0px;
}
#calculator #CalcActions a#CalcInfo:hover,
#calculator #CalcActions a#CalcInfo.active {
    background-position: -120px -40px;
}

#calculator #CalcGraph {
    margin-top: 10px;
    width: 410px;
    height: 282px;
    background: #ffffff;
}

#calculator #CalcPaymentTotal,
#calculator #CalcNumberPayments,
#calculator #CalcInterestTotal {
    height: 60px;
    width: 144px;
    position: absolute;
    left: 330px;
    top: 310px;
    padding: 10px;
    color: #000;
    font-size: 0.95em;
    background: #DDBF44;
    border: 1px solid #D1B545;

    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    -o-user-select: text;
    user-select: text;  
}

#calculator #CalcNumberPayments {
    width: 59px;
    left: 496px;
    background: #F0F0F0;
    border: 1px solid #ddd;
    border-left: 0;
    color: #000;
}

#calculator #CalcInterestTotal {
    width: 144px;
    left: 576px;
    background: #002A79;
    border: 1px solid #000;
    color: #fff;
}

#calculator #CalcPaymentTotal span,
#calculator #CalcNumberPayments span,
#calculator #CalcInterestTotal span {
    display: block;
    font-size: 2.0em;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: bold;
}

#calculator #CalcHelp,
#calculator #CalcSchedule,
#calculator #CalcSendEmail {
    position: absolute;
    left: 319px;
    top: 0px;
    width: 392px;
    height: 362px;
    padding: 10px;
    z-index: 1000;
    display: none;

    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    -o-user-select: text;
    user-select: text;  
}

#calculator #CalcClose {
    position: absolute;
    top: 5px;
    left: 695px;
    width: 17px;
    height: 16px;
    font-size: 0.8em;
    background: #c00;
    color: #fff;
    font-weight: bold;
    text-align: center;
    z-index: 2000;
    border: 1px solid #700;
    cursor: pointer;
    display: none;
}

#calculator .CalcBack {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: #ffffff;
    opacity: 0.97;
}

#calculator #CalcHelp .CalcHelpContent {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1001;
}

#calculator #CalcSchedule .CalcScheduleContent {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1001;
    height: 372px;
    width: 402px;
    overflow-y: scroll;
    overflow-x: hidden;
}

#calculator #CalcSchedule .CalcScheduleContent table {
    width: 98%;
    font-size: 0.85em;
    border-collapse: collapse;
}

#calculator #CalcSchedule .CalcScheduleContent table tr td,
#calculator #CalcSchedule .CalcScheduleContent table tr th {
    padding: 3px 5px;
    margin: 0;
    border-bottom: 1px dotted #ddd;
    text-align: center;
    background: rgba(0, 0, 0, 0.03);
}

#calculator #CalcSchedule .CalcScheduleContent table tr:nth-child(2n) td {
    background: none;
}

#calculator #CalcSchedule .CalcScheduleContent table tr th {
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #f4f4f4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f4f4f4));
    background: -webkit-linear-gradient(top, #ffffff 0%,#f4f4f4 100%);
    background: -o-linear-gradient(top, #ffffff 0%,#f4f4f4 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#f4f4f4 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#f4f4f4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f4f4',GradientType=0 );

    font-weight: 500;
    border-right: 1px dotted #ddd;
}

#calculator #CalcSchedule .CalcScheduleContent table tr th:last-child {
    border-right: 0;
}

#calculator #CalcSendEmail .CalcEmailContent {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1001;
    width: 95%;
}

#calculator #CalcSendEmail .CalcEmailContent .input {
    margin-bottom: 8px;
}

#calculator #CalcSendEmail .CalcEmailContent .errored label {
    color: #b00;
}

#calculator #CalcSendEmail .CalcEmailContent .errored input {
    border: 1px solid #b00;
}

#calculator #CalcSendEmail .CalcEmailContent #CalcEmailFormSubmit {
    border: 0px;
    background: #DDBF44;
    color: #ffffff;
    font-weight: bold;
    padding: 5px 8px;
    cursor: pointer;
}

#calculator #CalcSendEmail .CalcEmailContent #CalcEmailFormSubmit:hover,
#calculator #CalcSendEmail .CalcEmailContent #CalcEmailFormSubmit:focus {
    background: #002A79;
}

#calculator #CalcStats {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 110px;
    height: 130px;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    font-size: 0.8em;
    padding: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

#calculator #CalcStats .year {
    font-size: 1.3em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 4px;
}

#calculator #CalcStats .principal-left,
#calculator #CalcStats .interest-left {
    padding-left: 5px;
    border-left: 3px solid #5D8FEA;
}

#calculator #CalcStats .interest-left {
    border-left: 3px solid #002A79;
}

#calculator #CalcStats .balance-left {
    padding-left: 8px;
    border-top: 1px solid #777;
    margin-top: 4px;
}

#calculator #CalcStats .principal-left span,
#calculator #CalcStats .interest-left span,
#calculator #CalcStats .balance-left span {
    display: block;
    font-weight: bold;
    margin-bottom: 4px;
}