/***
* Stylesheet for Cakeulator (fka TZCalc / Transferzentrum Calculator)
* 
* Author: Christoph Mauerhofer http://christophmauerhofer.com
***/

/* Font families */
@font-face {
    font-family: "Droid Serif";
    src: url("./fonts/DroidSerif.eot");
    src: local("Droid Serif"), local("DroidSerif"),
         url("./fonts/DroidSerif.ttf") format("truetype"),
         url("./fonts/DroidSerif.woff") format("woff");
}
@font-face {
    font-family: "Droid Sans";
    src: url("./fonts/DroidSans.eot");
    src: local("Droid Sans"), local("DroidSans"),
         url("./fonts/DroidSans.ttf") format("truetype"),
         url("./fonts/DroidSans.woff") format("woff");
}

/* General */
* {
    margin: 0;
    padding: 0;
}
body {
    font-family: "Droid Serif", "Times New Roman", TimesNewRoman, Times, serif;
    font-size: 14px;
    font-weight: normal;
    text-align: left;
    color: #555;
    background: transparent url(layout/pattern_tile.png) repeat;
}
a img {
    border: 0;
}
a:focus, input:focus, canvas:focus {
    outline: none;
}

/* Vignette-effect in background */
#vignette img {
    visibility: visible;
    position: fixed;
    z-index: 1;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

/* Text-input fields */
input.text {
    width: 190px;
    height: 41px;
    padding-right: 5px;
    padding-left: 25px;
    font-family: "Droid Serif", "Times New Roman", TimesNewRoman, Times, serif;
    font-size: 25px;
    font-weight: normal;
    text-align: right;
    border: none;
    color: #777;
}

/* Error- and Warning-Boxes */
#error {
    visibility: hidden;
    position: absolute;
    top: 265px;
    left: 240px;
    width: 440px;
    height: 50px;
    padding: 15px 20px;
    font-family: "Droid Sans", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    color: #d00;
    border: 2px solid #d00;
    background-color: #fdd;
}
#error.show {
    visibility: visible;
}
#error strong {
    font-weight: bold;
}

#warning {
    visibility: hidden;
    position: absolute;
    top: 202px;
    left: 210px;
    width: 520px;
    height: 40px;
    padding: 5px 10px;
    font-family: "Droid Sans", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4em;
    color: #fa7c00;
    border: 2px solid #fa7c00;
    background-color: #fffa72;
}
#warning.show {
    visibility: visible;
}
#warning strong {
    font-weight: bold;
}

#wrapper {
    position: relative;
    z-index: 2;
    width: 960px;
    height: 800px;
    margin: 0 auto;
}

/* Header */
#header {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 960px;
    height: 200px;
}
#header h1 {
    width: 100%;
    height: 120px;
    margin-top: 15px;
    text-indent: -10000px;
    background: transparent url(layout/title.png) center top no-repeat;
}
#header h2 {
    position: absolute;
    left: -3px;
    width: 966px;
    height: 59px;
    text-indent: -10000px;
    background: transparent url(layout/subtitle.png) center top no-repeat;
    cursor: help;
}

#content {
    position: absolute;
    top: 220px;
    left: 0px;
    width: 960px;
    height: 600px;
}

#yourPiece {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 220px;
    height: 220px;
    border-bottom: 2px solid #cccbc3;
}
#yourPiece h3 {
    width: 100%;
    height: 55px;
    margin-bottom: 10px;
    text-indent: -10000px;
    background: transparent url(layout/your_piece.png) center top no-repeat;
}
#yourPiece #virtCompPayPct {
    width: 100%;
    height: 40px;
    margin-top: 20px;
    padding-top: 21px;
    font-family: "Droid Sans", Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    background: transparent url(layout/your_piece_pct.png) center -1px no-repeat;
}
#yourPiece input#inputVirtCompPay {
    background: transparent url(layout/input_your_piece_bg.png) no-repeat;
}

#fhPiece {
    position: absolute;
    top: 220px;
    left: 0px;
    width: 220px;
    height: 220px;
    border-bottom: 2px solid #cccbc3;
}
#fhPiece h3 {
    width: 100%;
    height: 55px;
    margin-bottom: 10px;
    text-indent: -10000px;
    background: transparent url(layout/fh_piece.png) center center no-repeat;
}
#fhPiece #chargesSumPct {
    width: 100%;
    height: 40px;
    margin-top: 20px;
    padding-top: 21px;
    font-family: "Droid Sans", Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    background: transparent url(layout/fh_piece_pct.png) center top no-repeat;
}
#fhPiece input#outputChargesSum {
    color: #aaa;
    background: transparent url(layout/input_fh_piece_bg.png) no-repeat;
}

#totalCosts {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 220px;
    height: 180px;
    border-bottom: 2px solid #cccbc3;
}
#totalCosts h3 {
    width: 100%;
    height: 55px;
    margin-bottom: 10px;
    text-indent: -10000px;
    background: transparent url(layout/total_costs.png) center top no-repeat;
}
#totalCosts #inputTotalCosts {
    background: transparent url(layout/input_total_costs_bg.png) no-repeat;
}
#totalCosts #taxesSwitch ul {
    list-style-type: none;
}
#totalCosts #taxesSwitch ul li {
    float: left;
    width: 55px;
    height: 17px;
    margin: 10px 0px 0px 30px;
    padding-top: 1px;
    padding-left: 20px;
    cursor: pointer;
    background: transparent url(layout/radio_empty_sw.png) left no-repeat;
}
#totalCosts #taxesSwitch ul li.selected {
    font-weight: bold;
    background: transparent url(layout/radio_selected_sw.png) left no-repeat;
}

/* Calculation Details */
#calcDetails {
    position: absolute;
    top: 190px;
    right: 0px;
    width: 220px;
    height: 250px;
    border-bottom: 2px solid #cccbc3;
}
#calcDetails h3 {
    width: 100%;
    height: 55px;
    margin-bottom: 20px;
    text-indent: -10000px;
    background: transparent url(layout/calc_details.png) center center no-repeat;
}
#calcDetails table {
    width: 100%;
    font-size: 10px;
    font-style: italic;
}
#calcDetails table tr.emptyLine {
    height: 5px;
}
#calcDetails table td.item {
}
#calcDetails table td.value {
    width: 75px;
    text-align: right;
}

#diagram {
    position: absolute;
    top: 0px;
    left: 220px;
    width: 520px;
    height: 550px;
}
#diagram #graphic {
    width: 490px;
    height: 490px;
    margin-top: 15px;
    margin-left: 15px;
    background: transparent;
}
#diagram #graphic #noCanvas {
    width: 100%;
    height: 100%;
    text-align: center;
    color: #d00;
    background: transparent url(cake.png) center center no-repeat;
}

#notice {
    position: absolute;
    top: 460px;
    right: 0px;
    width: 220px;
    height: 100px;
    font-size: 10px;
    color: #aaa;
}

#footer {
    position: absolute;
    top: 440px;
    left: 0px;
    width: 220px;
    height: 110px;
    text-indent: -10000px;
}
#footer a {
    display: block;
    width: 120px;
    height: 70px;
    margin: 20px 50px;
    text-indent: -10000px;
    background: transparent url(layout/svp_logo.png) center center no-repeat;;
}

#noscript {
    position: absolute;
    top: 255px;
    left: 110px;
    width: 700px;
    height: 300px;
    padding: 18px 20px;
    font-family: "Droid Sans", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    color: #d00;
    border: 2px solid #d00;
    background-color: #fdd;
}