/*-----------------------------------------------------------------------------------------------*/
/*                                  CSS Style for Mortgage Calculator                            */
/*                                                                                               */
/*-----------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------------------*/
/*                                          GENERAL STYLES                                       */
/*-----------------------------------------------------------------------------------------------*/


.schedule {
    width: 100%;
}
.schedule td {
    text-align: center;
    padding: 5px;
}

.schedule th {
    background-color: #777;
    color: #ccc;
    text-align: center;
    padding: 5px 0 5px 0;
}

tr.evenRow td {
    background-color: #FFFFFF;
}
tr.oddRow td {
    background-color: #E6E6E6;
}

.highlight {
    background-color: #9fe48e; 
    color: #000;
}

#schedule {
    float:left;
    width: 650px;
    padding: 25px;
}



/*-----------------------------------------------------------------------------------------------*/
/*                                         Form and Text Area Drop Shadow                        */
/*-----------------------------------------------------------------------------------------------*/


.formDiv
{
    float: left;
    position: relative;
    width: 500px;
    padding: 25px;
    background-color: #fff;
    border: 1px solid #999;
}
.formDiv:before, .formDiv:after
{
    position: absolute;
    width: 40%;
    height: 30px;
    content: ' ';
    left: 12px;
    bottom: 12px;
    background: transparent;
    -webkit-transform: skew(-5deg) rotate(-5deg);
    -moz-transform: skew(-5deg) rotate(-5deg);
    -ms-transform: skew(-5deg) rotate(-5deg);
    -o-transform: skew(-5deg) rotate(-5deg);
    transform: skew(-5deg) rotate(-5deg);
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
    z-index: -1;
}
.formDiv:after
{
    left: auto;
    right: 12px;
    -webkit-transform: skew(5deg) rotate(5deg);
    -moz-transform: skew(5deg) rotate(5deg);
    -ms-transform: skew(5deg) rotate(5deg);
    -o-transform: skew(5deg) rotate(5deg);
    transform: skew(5deg) rotate(5deg);
}

.blurb {
    position: relative;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #999;
}

.blurb:before, .blurb:after
{
    position: absolute;
    width: 40%;
    height: 30px;
    content: ' ';
    left: 12px;
    bottom: 12px;
    background: transparent;
    -webkit-transform: skew(-5deg) rotate(-5deg);
    -moz-transform: skew(-5deg) rotate(-5deg);
    -ms-transform: skew(-5deg) rotate(-5deg);
    -o-transform: skew(-5deg) rotate(-5deg);
    transform: skew(-5deg) rotate(-5deg);
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
    z-index: -1;
}
.blurb:after
{
    left: auto;
    right: 12px;
    -webkit-transform: skew(5deg) rotate(5deg);
    -moz-transform: skew(5deg) rotate(5deg);
    -ms-transform: skew(5deg) rotate(5deg);
    -o-transform: skew(5deg) rotate(5deg);
    transform: skew(5deg) rotate(5deg);
}