/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 04.09.2015, 14:45:58
    Author     : florian
*/

form.interestcalculator {
    
}
    form.interestcalculator ul {
        padding: 0;
        margin: 0;
    }
    form.interestcalculator li {
        list-style: none;
        list-style-position: inside;
        list-style-image: none;
        display: inline-block;
        padding: 3px;
        background-image: none;
    }
    form.interestcalculator li label {
        text-align: center;
        border-bottom: 1px solid #003782;
    }
    form.interestcalculator input {
        text-align: right;
        margin: 3px 0;
        padding: 3px;
    }
        form.interestcalculator input[readonly="readonly"] {
            background-color: transparent;
            border: 1px solid transparent;
            outline: none;
            box-shadow: none;
        }
        form.interestcalculator input.result {
            font-weight: bold;
        }
    
    form.interestcalculator button {
        padding: 5px;
        border: 1px solid #003782;
        border-radius: 3px;
        background-color: #ccd7e6;
        color: #003782;
    }
    form.interestcalculator button.calculate {
        color: #fff;
        font-weight: bold;
        padding: 6px;
        border: 0 none;
        
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e4221d+14,bf0d0d+75 */
        background: rgb(228,34,29); /* Old browsers */
        background: -moz-linear-gradient(-45deg,  rgba(228,34,29,1) 14%, rgba(191,13,13,1) 75%); /* FF3.6-15 */
        background: -webkit-linear-gradient(-45deg,  rgba(228,34,29,1) 14%,rgba(191,13,13,1) 75%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(135deg,  rgba(228,34,29,1) 14%,rgba(191,13,13,1) 75%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4221d', endColorstr='#bf0d0d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
        
    }

/* sparbuch */
form.interestcalculator.sparbuch li {
    width: 140px;
}
    form.interestcalculator.sparbuch li input {
        width: 100px;
    }

    
/* table */
form.interestcalculator table {
    margin-top: 15px;
    clear: both;
    font-size: 16px;
    line-height: 28px;
    width: 95%;
}
form.interestcalculator table.revenue thead {
    background-color: #003782;
}
    form.interestcalculator table.revenue thead th {
        padding: 5px 15px 5px 10px;
        width: 25%;
    }
    form.interestcalculator table.revenue tbody tr:nth-child(even) td {
        background-color: #fff;
    }
    form.interestcalculator table.revenue tbody tr:nth-child(odd) td {
        background-color: #ECF0F6;
    }
    form.interestcalculator table.revenue td {
        padding-right: 15px;
    }
    form.interestcalculator table.revenue td.year,
    form.interestcalculator table.revenue td.rate {
        text-align: center;
    }
    form.interestcalculator table.revenue td.income,
    form.interestcalculator table.revenue td.total,
    form.interestcalculator table.revenue td.total_income,
    form.interestcalculator table.revenue td.bonus,
    form.interestcalculator table.revenue td.total_total {
        text-align: right;
    }
    form.interestcalculator table.revenue tfoot {
        font-weight: bold;
    }
    

/* responsive part */
@media screen and (max-width: 590px) {

    table.revenue,
    table.revenue thead,
    table.revenue tbody,
    table.revenue th,
    table.revenue td,
    table.revenue tr {
        display: block;
        overflow: hidden;
    }

    table.revenue thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    form.interestcalculator table.revenue tr {
        margin-bottom: 15px;
    }
    
    form.interestcalculator table.revenue td,
    form.interestcalculator table.revenue td.year,
    form.interestcalculator table.revenue td.rate,
    form.interestcalculator table.revenue td.income,
    form.interestcalculator table.revenue td.total,
    form.interestcalculator table.revenue td.total_income,
    form.interestcalculator table.revenue td.bonus,
    form.interestcalculator table.revenue td.total_total {
        padding: 0.25em 0.5em;
        text-align: left;
        line-height: 16px;
    }
    table.revenue tbody td:before {
        content: attr(data-label) ": ";
        display: inline-block;
        font-weight: bold;
        width: 5em;
    }

}
@media screen and (min-width: 591px) {
    
    table.revenue {
        display: table;
        width: 100%;
    }

    table.revenue thead {
        display: table-header-group;
    }

    table.revenue thead tr {
        position: static;
        top: auto;
        left: auto;
    }

    table.revenue tbody {
        display: table-row-group;
    }

    table.revenue tr {
        display: table-row;
    }

    table.revenue th, table.revenue td {
        display: table-cell;
        padding: 6px 12px;
        vertical-align: top;
        text-align: left;
    }

    table.revenue td:before {
        content: "";
        width: auto;
    }
    
    
}

//