/**
 * @package Portal
 * @lastmodified $Id$
 *
 * @tableofcontents
 *
 * 1. Global Styles
 * 2. Main Box
 *    2.1 Form
 *    2.1.1 Slider
 *    2.1.1 Strom Slider
 *    2.1.1 Gas Slider
 *    2.2 Vorteile
 */

/* @section 1. Global Styles */

html {
    min-height: 100%;
}

body {
    background: #fff;
    color: #444;
    font: 0.75em/1.5em Rubik, sans-serif;
}

.tooltip {
    max-width: 30em;
}

.textLight {
    color: #909090
}

.brandingHeader {
    min-width: 950px;
}

.headerContainer {
    max-width: 950px;
}

.wrapper {
    width: 950px;
    margin: 0 auto
}

.main {
    position: relative;
    background: #f8fbff;
    border: 1px solid #bccee2;
    padding: 0;
    min-height: 390px;
    -moz-box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.1);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px
}

.footer {
    line-height: 1.3em;
    margin-top: 15px;
    width: 950px;
}

/* @section 2. Main Box */

.headline {
    padding: 5px 15px;
    border-bottom: 1px solid #bccee2;
    font-size: 1.75em;
    background-color: #ddedff;
    background: -moz-linear-gradient(center top, #fff, #ddedff);
    background: -ms-linear-gradient(center top, #fff, #ddedff);
    background: -o-linear-gradient(center top, #fff, #ddedff);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddedff));
    background: -webkit-linear-gradient(center top, #fff, #ddedff);
    background: linear-gradient(center top, #fff, #ddedff)
}

.icoStrom,
.icoGas,
.formSlider .sliderStromDummys li,
.formSlider .sliderGasDummys li,
.formSlider .ui-slider-handle {
    background: url("../img/landing/pvg_sprite_lp_8.png") no-repeat scroll 0 0 transparent;
    display: inline-block
}

.badge,
.badge span {
    background: url("../img/pvg_sprite_badgets.png") no-repeat scroll 0 0 transparent;
    display: inline-block
}

.advantages {
    display: inline-block;
    width: 300px;
    margin: 20px 0 0 25px;
    vertical-align: top
}

.advantages h3,
.advantages ul {
    margin-bottom: 20px
}

.advantages li span {
    display: inline-block;
    margin-left: 2%;
    vertical-align: middle;
    width: 85%
}

.badge {
    background-position: -365px -1px;
    width: 132px;
    height: 130px;
    border: 1px solid #2a4d8f;
    border-width: 1px 1px 0 0;
    position: absolute;
    right: -1px;
    top: -1px;
    -moz-border-radius: 0 3px 0 0;
    -webkit-border-radius: 0 3px 0 0;
    border-radius: 0 3px 0 0
}

.badge span {
    background-position: -367px -132px;
    width: 130px;
    height: 90px
}

.testimonial {
    background: url("../img/landing/testimonial_lp8.png") no-repeat scroll right bottom transparent;
    bottom: 0;
    height: 235px;
    position: absolute;
    right: 10px;
    width: 370px;
}

/* @section 2.1 Form */

.landingForm {
    text-align: center;
    display: inline-block;
    vertical-align: top;
    width: 220px;
    height: 330px;
    padding: 5px 20px;
    margin: 5px 0 0 15px;
    border: 1px solid #bed697;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 2px 2px 2px #717070;
    -moz-box-shadow: 2px 2px 2px #717070;
    box-shadow: 2px 2px 2px #717070;
    background: #cbe21c;
    background: -moz-linear-gradient(center top, #cbe21c, #9dc211);
    background: -ms-linear-gradient(center top, #cbe21c, #9dc211);
    background: -o-linear-gradient(center top, #cbe21c, #9dc211);
    background: -webkit-gradient(linear, left top, left bottom, from(#cbe21c), to(#9dc211));
    background: -webkit-linear-gradient(center top, #cbe21c, #9dc211);
    background: linear-gradient(center top, #cbe21c, #9dc211);
}

.formHeadline {
    text-align: left;
    width: 220px;
    height: 34px;
    font: bold 18px/34px Rubik, sans-serif;
    color: #fff;
    padding: 0 10px;
    position: relative;
    left: -28px;
    background: #149bd5;
    background: -moz-linear-gradient(center top, #149bd5, #0d65be);
    background: -ms-linear-gradient(center top, #149bd5, #0d65be);
    background: -o-linear-gradient(center top, #149bd5, #0d65be);
    background: -webkit-gradient(linear, left top, left bottom, from(#149bd5), to(#0d65be));
    background: -webkit-linear-gradient(center top, #149bd5, #0d65be);
    background: linear-gradient(center top, #149bd5, #0d65be);
}

.formHeadline:after {
    background: url("../img/pvg_sprite_3.6.3.png") repeat scroll -34px 0 transparent;
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    position: absolute;
    left: 0;
    bottom: -7px
}

.icoStrom,
.icoGas {
    width: 41px;
    height: 43px;
    display: inline-block;
    position: absolute;
    right: -4px;
    top: -4px
}

.icoStrom {
    background-position: -1px -1px
}

.icoGas {
    background-position: -45px -1px
}

.formList {
    height: 245px;
    text-align: left
}

.formList .formLabel {
    margin-top: 5px;
    font-weight: 500
}

.radio-group {
    height: 80px;
}

li.plzList,
.form-radio-group {
    margin-bottom: .5em;
}

.formList .label,
.formList .label-el {
    font-weight: 500;
}

.formList .icoError {
    height: 28px;
    margin-left: -1px;
    vertical-align: top
}

.formList select,
.input-box,
.formList input:not([type="checkbox"]):not([type="radio"]) {
    height: 28px;
    line-height: 22px;
    text-align: center;
    width: 100%;
}

.formList input.error:not([class*="hadCity"]):not([type="checkbox"]):not([type="radio"]) {
    width: calc(100% - 2px);
}

.formList .plzList input {
    width: 100%;
    font-weight: 500
}

.formList .plzList input.hadCity {
    width: 80px;
}

.formList select.citySelect {
    margin-left: 2px;
    width: 138px;
}

.formList select {
    font-weight: 500;
    height: 28px;
    padding: 2px;
}

.formList input:not([type="checkbox"]):not([type="radio"]):focus {
    background-color: #dbecff;
}

.formList input:not([type="checkbox"]):not([type="radio"]).error {
    border-radius: 0 .35em .35em 0;
}

.formList input:not([type="checkbox"]):not([type="radio"]).error:focus {
    background-color: #f7d9d9;
}

.formList .cityLine .city {
    display: none;
}

.formList .plzList input.hadCity ~ .city,
.formList .withCity .city:not([type="checkbox"]):not([type="radio"]) {
    border-left: 0;
    display: inline-block;
    margin-left: -2px;
    width: 142px;
}

.city {
    border-left: none;
    pointer-events: none;
}

/* Keep the same look of merged inputs between browsers and calculators */
@supports (-moz-appearance: none) {
    input[name="zip"]:not(:focus):not(:active) ~ .city {
        -moz-appearance: none;
        border: 1px solid #888;
    }
}

.formList .cityLine .icoError {
    margin-left: -24px;
}

.ui-helper-hidden-accessible {
    display: none
}

.ui-menu-item {
    text-align: left
}

/* @section 2.1.1 Slider */

.formSlider {
    position: relative;
    margin-top: 5px;
    height: 60px
}

.formSlider input {
    float: right;
    margin-top: -30px;
    position: relative
}

.formSlider .ui-slider {
    height: 5px;
    background: #FFF;
    border: 1px solid #DCDCDC;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
    position: relative;
    margin: 10px 8px 0
}

/* @section 2.2 Vorteile */

.footer {
    position: relative
}

.footer .copyrightParagraph {
    margin-bottom: 10px
}

.footer .copyrightParagraph a {
    margin: 0 4px;
    text-decoration: none;
}

.footer .recommendation {
    position: absolute;
    right: 0;
    text-align: right;
    color: #2a4d8f;
    font: bold 1.2em/1.4em Rubik, sans-serif
}

.footer .recommendation span {
    font-style: italic
}

.footer p {
    text-align: center
}

/* @section 2.3 Badgets */
.testimonial .badgeSeal .seal::after {
    background-size: cover !important;
    background: url(../../power/img/seal.svg);
    content: '';
    height: 95px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}

.testimonial .badgeSeal {
    top: 0;
    height: 78px;
    left: 0;
    position: absolute;
    width: 147px;
    cursor: pointer;
}

.testimonial .badgeSeal .seal {
    height: 65px;
    width: 125px;
}

/*tarif radio button*/
.form-radio-group label.icon-radio-label {
    border-color: #fff;
}

.form-radio-group input:checked + label .icon,
.form-radio-group input:checked + label {
    border-color: #f9ff18;
    color: #f9ff18;
}

.form-radio-group .icon,
.form-radio-group .tariff-meta {
    color: #fff;
}

.formBox .usgBox .value {
    line-height: 2.5em;
}

.powerCalculator .form-radio-group.usg-radio-group,
.gasCalculator .form-radio-group.usg-radio-group {
    width: 100%;
}

.powerCalculator .form-radio-group label.icon-radio-label:first-of-type{
    margin-left: 0;
}