/*----------------------------------------------------------
Style section for mobile web app
----------------------------------------------------------*/

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */

/* Font Settings*/
#main-content h3
{
    font-size: medium;
    font-weight: lighter;
    color: #333;
}

.ui-btn-hover-b,
.ui-btn-up-b,
.agbText
{
    font-weight: lighter !important;
    color: #333 !important;
    -webkit-text-shadow: none !important;
    text-shadow: none !important;
}

.agbBtn
{
    text-align: left !important;
    width: 50px;
    margin-left: 0px !important;
    padding-left: 0px !important;
}

    .agbBtn .ui-btn-inner
    {
        padding: 0px !important;
    }

.ui-btn-text
{
    font-weight: lighter !important;
    -webkit-text-shadow: none !important;
    text-shadow: none !important;
    font-size: 14px;
}

/*end*/

.bigBtn {
    border: 1px solid !important;
}

.bigBtn .ui-btn-text {
    font-size: 135% !important;
    text-align: center;
    padding: 2px;
    font-weight: 200;
}

.modal
{
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba( 255, 255, 255, .8 ) url(../Content/Images/ajax-loader-mobile.gif) 50% 50% no-repeat;
}


.ui-content
{
    padding-left: 5px !important;
    padding-right: 5px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    min-height: inherit !important;
}

.info_close
{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 11;
}

.impressum
{
    color: white;
    font-size: large;
}

.label_register
{
    color: black;
    font-size: 95% !important;
}

/*display none hides the second checkbox in checkbox*/
#loginForm input[type=checkbox]
{
    display: none;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal
{
    display: block;
}

#deliveryOKIcon .ui-icon-custom
{
    background-image: url(../Content/Images/Mobile/DateOK.png);
    background-position: 2px 2px;
    -moz-background-size: 90%;
    -o-background-size: 90%;
    -webkit-background-size: 90%;
    background-size: 90%;
}

.header
{
    text-align: center;
    line-height: 29px;
    font-size: 16px;
    white-space: nowrap;
    vertical-align: middle;
    margin: 0px !important;
}

.background_aktion
{
    background: url(../Content/Images/Aktionen/DefaultAktion/WebApp.jpg) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.overlay_aktion
{
    background: transparent url(../Content/Images/Aktionen/DefaultAktion/WebApp_overlay.png);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
}

.background
{
    background: transparent url(../Content/Images/Mobile/background.png) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.list_background
{
    background: transparent url(../Content/Images/PageLayout/Transparent-90.png) repeat !important;
    border: none !important;
    margin-bottom: 2px !important;
    padding: 0 5px;
}

.list_background_shoppingCart
{
    background: transparent url(../Content/Images/PageLayout/Transparent-90.png) repeat !important;
    border: none !important;
    margin-bottom: 2px !important;
}

.list_background_aktion a
{
    color: #cc0000 !important;
    margin-top: 5px;
    /*background: transparent url(../Content/Images/PageLayout/Transparent-red.png) repeat !important;*/
}

.background_0
{
    background: transparent url(../Content/Images/PageLayout/Transparent-0.png) repeat !important;
}

.background_50
{
    background: transparent url(../Content/Images/PageLayout/Transparent-50.png) repeat !important;
    border: none !important;
}

.background_75
{
    background: transparent url(../Content/Images/PageLayout/Transparent-75.png) repeat !important;
    padding: 10px 5px;
}

.amount_button_minus
{
    width: 40px;
    height: 35px;
    background: transparent url(../Content/Images/Mobile/Plus.png) no-repeat !important;
}

.list_logon
{
    background: none !important;
    border: none !important;
    margin-bottom: 10px !important;
}

    .list_logon h2
    {
        font-size: 24px;
        color: #333;
        text-align: center;
        font-weight: lighter;
    }

    .list_logon .ui-input-text
    {
        font-size: 14px;
    }

.keep-logged-in span
{
    color: #333 !important;
    margin-top: -10px;
}

    .keep-logged-in span.ui-btn-text
    {
        margin-left: -20px;
    }

input.ui-input-text
{
    background: white;
}

.list_logon .ui-checkbox .ui-btn-icon-left .ui-btn-inner
{
    padding-left: 25px !important;
    padding-top: 0px !important;
}

.keep-logged-in .ui-checkbox .ui-btn-icon-left .ui-icon
{
    left: 0px !important;
}

.list_logon .loginBtn span
{
    color: #cc0000 !important;
}

.list_logon .ui-btn
{
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}

.nav_icon
{
    width: 32px;
    height: 32px;
    background: transparent;
    -moz-background-size: contain;
    -o-background-size: contain;
    -webkit-background-size: contain;
    background-size: contain;
    background-repeat: no-repeat;
    -moz-background-size: contain;
    -o-background-size: contain;
    -webkit-background-size: contain;
    background-size: contain;
}

.selected_backgroundX
{
    /*background: linear-gradient(#5a5a5a, #282828) repeat scroll 0 0 #5c5b5a;*/
    background: #757d7f; /* Old browsers */
    background: -moz-linear-gradient(top, #757d7f 0%, #444444 59%, #212121 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#757d7f), color-stop(59%,#444444), color-stop(100%,#212121)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #757d7f 0%,#444444 59%,#212121 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #757d7f 0%,#444444 59%,#212121 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #757d7f 0%,#444444 59%,#212121 100%); /* IE10+ */
    background: linear-gradient(to bottom, #757d7f 0%,#444444 59%,#212121 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#757d7f', endColorstr='#212121',GradientType=0 ); /* IE6-9 */
}

.ui-header.ui-bar-b
{
    /*padding-top: 14px;*/
    border-top: none;
    border-left: none;
    border-right: none;
}

.ui-footer
{
    padding: 0px;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-top: 1px solid #ccc !important;
}

/*@media screen and (max-height: 250px)
{
    .ui-footer
    {
        visibility: hidden !important;
    }
}*/

.topnav-btn-right span
{
    text-align: right;
}

.nav_aktion
{
    background-image: url(../Content/Images/Mobile/Aktion.png );
}

.nav_aktion_selected
{
    background-image: url(../Content/Images/Mobile/Aktion_selected.png );
}

.nav_sortiment
{
    background-image: url(../Content/Images/Mobile/Sortiment.png );
}

.nav_sortiment_selected
{
    background-image: url(../Content/Images/Mobile/Sortiment_selected.png );
}

.nav_warenkorb
{
    background-image: url(../Content/Images/Mobile/Warenkorb.png );
}

.nav_warenkorb_selected
{
    background-image: url(../Content/Images/Mobile/Warenkorb_selected.png );
}

.nav_mehr
{
    background-image: url(../Content/Images/Mobile/Mehr.png );
}

.nav_mehr_selected
{
    background-image: url(../Content/Images/Mobile/Mehr_selected.png );
}

.nav_link
{
    text-decoration: none;
}

.nav_text
{
    font-size: 10px !important;
    color: #aaa;
    font-weight: normal;
    margin-top: -7px;
}

    .nav_text.selected
    {
        color: #00529c !important;
    }

.mobile_badge
{
    position: absolute;
    top: -25px;
    left: 6px;
    width: 55px;
    height: 40px;
    -moz-background-size: contain;
    -o-background-size: contain;
    -webkit-background-size: contain;
    background-size: contain;
    background-repeat: no-repeat;
    -moz-background-size: contain;
    -o-background-size: contain;
    -webkit-background-size: contain;
    background-size: contain;
}

.mobile_badge_ordered
{
    background-image: url(../Content/Images/Mobile/Badge_bestellt.png);
}

.mobile_badge_unordered
{
    background-image: url(../Content/Images/Mobile/Badge_unbestellt.png);
}

.mobile_badge_ordered_large
{
    background-image: url(../Content/Images/Mobile/Badge_bestellt_large.png);
}

.mobile_badge_unordered_large
{
    background-image: url(../Content/Images/Mobile/Badge_unbestellt_large.png);
}

.mobile_badge_text
{
    position: absolute;
    top: -13px;
    left: 18px;
    width: 30px;
    height: 30px;
    color: white;
    font-size: 95%;
    font-weight: 300;
}

.mobileRappFormularBack
{
    background: transparent url('../Content/Images/PageLayout/Transparent-75.png') repeat;
    border: none;
    color: #404040;
    padding: 10px;
    font-size: small;
    margin-top: 5px;
}

    .mobileRappFormularBack .button, .mobileRappFormularBack .button-gray
    {
        width: 160px;
        padding: 0px;
    }

.mobileRappFormularTab
{
    background: transparent url('../Content/Images/PageLayout/Transparent-75.png') repeat;
    border: none;
    top: 10px;
    height: 27px;
    padding: 8px 20px 0px 20px;
    color: #0066cc;
    font-size: 20px;
    position: absolute;
    border-top-left-radius: 3px 3px;
    border-top-right-radius: 3px 3px;
    border-bottom-right-radius: 0px 0px;
    border-bottom-left-radius: 0px 0px;
}

/*Custom Jquery mobil Icons*/
.ui-header .ui-btn-icon-left .ui-btn-inner
{
    padding-left: 25px !important;
}

.ui-icon-arrow-d,
.ui-icon .ui-icon-shadow
{
    background: transparent url(../Content/Images/Mobile/Arrow_down.png ) no-repeat !important;
    -moz-background-size: contain !important;
    -o-background-size: contain !important;
    -webkit-background-size: contain !important;
    background-size: contain !important;
    box-shadow: none !important;
}

.ui-icon-arrow-u,
.ui-icon .ui-icon-shadow
{
    background: transparent url(../Content/Images/Mobile/Arrow_up.png ) no-repeat !important;
    -moz-background-size: contain !important;
    -o-background-size: contain !important;
    -webkit-background-size: contain !important;
    background-size: contain !important;
    box-shadow: none !important;
}

.ui-icon-arrow-r,
.ui-icon .ui-icon-shadow
{
    background: transparent url(../Content/Images/Mobile/Arrow_right.png ) no-repeat !important;
    -moz-background-size: contain !important;
    -o-background-size: contain !important;
    -webkit-background-size: contain !important;
    background-size: contain !important;
    box-shadow: none !important;
}

.ui-icon-arrow-l,
.ui-icon .ui-icon-shadow
{
    background: transparent url(../Content/Images/Mobile/Arrow_left.png ) no-repeat !important;
    -moz-background-size: contain !important;
    -o-background-size: contain !important;
    -webkit-background-size: contain !important;
    background-size: contain !important;
    box-shadow: none !important;
}

.ui-icon-plus,
.ui-icon .ui-icon-shadow
{
    background: transparent url(../Content/Images/Mobile/Plus.png ) no-repeat !important;
    -moz-background-size: contain !important;
    -o-background-size: contain !important;
    -webkit-background-size: contain !important;
    background-size: contain !important;
    box-shadow: none !important;
}

.ui-icon-minus,
.ui-icon .ui-icon-shadow
{
    background: transparent url(../Content/Images/Mobile/Minus.png ) no-repeat !important;
    -moz-background-size: contain !important;
    -o-background-size: contain !important;
    -webkit-background-size: contain !important;
    background-size: contain !important;
    box-shadow: none !important;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
    color: #f00;
    display: block;
    margin-top: 8px;
    text-align: center;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #f00;
    background-color: #fee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #c00;
    margin-left: -40px;
    font-size: small;
    margin-bottom: 20px;
}

    .validation-summary-errors ul
    {
        list-style: none;
        list-style-type: none;
    }


.validation-summary-valid
{
    display: none;
}

/* -------------------------------
    jQuery Style new defined
    ----------------------------*/

.ui-btn-active a.ui-link-inherit
{
    color: #00529c !important;
    -webkit-text-shadow: none;
    text-shadow: none;
}

.ui-collapsible .ui-btn-active
{
    background: #fff !important;
    color: #00529c !important;
}

.article_list .ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li
{
    padding: 0px 10px 0px 10px !important;
}

#ShoppingCartContent .article_list
{
    border-bottom: 1px solid #ccc;
}

.aktion_background
{
    background: #bcd5ed !important;
}

.ui-btn-inner
{
    border-top: none !important;
}

.ui-loader
{
    background: none !important;
    border: none !important;
}

.ui-icon-loading
{
    background-image: none !important;
}

.ui-shadow-inset
{
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.ui-btn-up-c:visited
{
    color: #333;
}

/* jQuery mobile styles
-----------------------------------------------------------*/

/* Make listview buttons fill the whole horizontal width of the screen */
.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li
{
    padding-right: 15px;
}

.ui-bar-a, .ui-body-a, .ui-btn-up-a, .ui-btn-hover-a, .ui-btn-down-a,
.ui-bar-b, .ui-body-b, .ui-btn-up-b, .ui-btn-hover-b, .ui-btn-down-b,
.ui-bar-c, .ui-body-c, .ui-btn-up-c, .ui-btn-hover-c, .ui-btn-down-c,
.ui-bar-d, .ui-body-d, .ui-btn-up-d, .ui-btn-hover-d, .ui-btn-down-d,
.ui-bar-e, .ui-body-e, .ui-btn-up-e, .ui-btn-hover-e, .ui-btn-down-e,
.ui-btn-active
{
    -webkit-text-shadow: none;
    text-shadow: none;
}

.bigBtn .ui-btn-inner,
#HistorischerWarenkorbListe .bigBtn .ui-btn-inner
{
    padding: 0px !important;
}

.ui-collapsible-heading
{
    margin-top: 3px !important;
}

.rapp-mobile-list.ui-listview .ui-btn-text a
{
    color: #333;
}

.rapp-mobile-delivery
{
    font-weight: normal !important;
    color: #cc0000 !important;
}

.rapp-mobile-label
{
    font-size: 120%;
    font-weight: lighter;
    color: black;
}

.rapp-mobile-label-bold {
    font-size: 120%;
    font-weight: bold;
    color: black;
}

.delivery-desc
{
    font-size: 80%;
    color: #666;
}

#ArtikelContent .bigBtn .ui-btn-inner
{
    text-align: left;
    padding-left: 10px;
}

/* End Style section for mobile web app
----------------------------------------------------------*/



/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body {
    font-family: Arial, Helvetica, 'Open Sans', sans-serif;
    color: white;
    padding: 0px;
    margin: 0px;
    font-weight: lighter;
    background-color: #002c5a;
    width: auto;
    height: auto;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
.page
{
    width: 100%;
    min-width: 1080px;
    position: absolute;
    max-width: 1920px;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: #002c5a;
}

#header_container
{
    background-color: black;
    height: 105px;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
}

#rappoffer_container
{
    height: 250px;
    background-color: #0066cc;
    position: absolute;
    top: 105px;
    left: 0px;
    right: 0px;
    background-repeat: no-repeat;
    padding: 0;
}

#rappoffer_overlay
{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-repeat: no-repeat;
}


#user_container
{
    position: absolute;
    bottom: 15px;
    left: 35px;
    padding: 0;
}

#menu_container
{
    position: absolute;
    height: 60px;
    background-image: url('../Content/Images/PageLayout/Menue_60_BG.jpg');
    background-repeat: repeat-x;
    top: 355px;
    left: 0px;
    right: 0px;
    z-index: 50;
}

#main_container
{
    background-color: #002c5a;
    min-height: 00px;
    position: absolute;
    top: 415px;
    left: 0px;
    right: 0px;
    background-repeat: no-repeat;
    padding-bottom: 50px;
}

#menu_container_employee
{
    height: 50px;
    background-image: url('../Content/Images/PageLayout/Menue_60_BG.jpg');
    background-repeat: repeat-x;
    z-index: 50;
}

#main_container_employee
{
    background-color: #002c5a;
    background-repeat: no-repeat;
}

#main_employee
{
    background: none;
    position: relative;
    top: 0px;
    left: 0px;
    right: 0px;
    padding: 0px;
    margin-bottom: 30px;
}

#logo_employee
{
    z-index: 100;
    width: 60px;
    height: 60px;
    top: 3px;
    position: absolute;
    left: 40px;
    background-image: url('../Content/Images/PageLayout/Logo_60.png');
    background-repeat: no-repeat;
    cursor: pointer;
}

#main_overlay
{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-repeat: no-repeat;
}

#main
{
    background: none;
    position: relative;
    top: 0px;
    left: 0px;
    right: 0px;
    padding: 0px;
    margin-bottom: 30px;
}

#pageFadeOut
{
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 120px;
    background: transparent url('../Content/Images/PageLayout/Footer_FadeOut.png') no-repeat;
}

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

strong
{
    font-weight: bold;
}

.highlight
{
    color: #06c;
}

    .highlight.link
    {
        text-decoration: underline;
    }

        .highlight.link:hover
        {
            color: #55a0e7;
            cursor: pointer;
        }

        .highlight.link:visited
        {
            color: #404040;
        }

.continuous_text
{
    line-height: 140%;
}

.button_personal
{
    background-image: url('../Content/Images/PageLayout/Button_Personal.png');
    background-color: transparent;
    background-repeat: no-repeat;
    width: 105px;
    height: 34px;
    padding: 0px;
}

    .button_personal:hover
    {
        background-image: url('../Content/Images/PageLayout/Button_Personal_hover.png');
    }

.button, .button:hover
{
    background-repeat: repeat-x;
    height: 34px;
    vertical-align: middle;
    border-style: solid;
    border-width: 1px;
    border-color: #303030;
    padding: 0px 10px 0px 10px;
    margin: 0;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
}

.button
{
    background-image: url('../Content/Images/PageLayout/Button_BG.png');
}

    .button:hover
    {
        background-image: url('../Content/Images/PageLayout/Button_hover_BG.png');
    }

    .button:disabled {
        background-image: url('../Content/Images/PageLayout/Button_disabled_BG.png');
    }

.button-gray, .button-gray:hover
{
    background-repeat: repeat-x;
    height: 34px;
    vertical-align: middle;
    border-style: solid;
    border-width: 1px;
    border-color: #a0a0a0;
    padding: 0px 10px 0px 10px;
    margin: 0;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
    background-position: center;
}

.button-gray
{
    background-image: url('../Content/Images/PageLayout/Button_LightGray_BG.png');
}

    .button-gray:hover
    {
        background-image: url('../Content/Images/PageLayout/Button_LightBlue_BG.png');
    }


.button_text, .button_text:hover, .button-gray_text, .button-gray_text:hover, .button-red_text, .button-red_text:hover, .button-gray_increasetext
{
    font-size: small;
    color: white;
    text-decoration: none;
    display: block;
    height: 34px;
    line-height: 34px;
}


    .button-gray_text, .button-gray_text:hover
    {
        color: #404040;
    }

.button-gray_increasetext
{
    color: #404040;
    height: 27px;
    line-height: 27px;
}

.button-gray_inputtext {
    color: #404040;
    height: 34px;
    line-height: 30px;
    font-family: Arial, Helvetica, 'Open Sans', sans-serif;
    font-size: small;
}

.button_inputtext {
    color: white;
    height: 34px;
    line-height: 30px;
    font-family: Arial, Helvetica, 'Open Sans', sans-serif;
    font-size: small;
}

*:focus
{
    outline: none;
}

.button-red, .button-red:hover
{
    background-repeat: repeat-x;
    height: 34px;
    vertical-align: middle;
    border-style: solid;
    border-width: 1px;
    border-color: #404040;
    padding: 0px 10px 0px 10px;
    margin: 0;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
    background-position: center;
}

.button-red
{
    background-image: url('../Content/Images/PageLayout/Button_Red_BG.png');
}

    .button-red:hover
    {
        background-image: url('../Content/Images/PageLayout/Button_Red_hover_BG.png');
    }

.button-gray.disabled
{
    background-image: url('../Content/Images/PageLayout/Button_Gray_disabled_BG.png');
    cursor: default;
    color: #a0a0a0;
    border-color: #cccccc;
}

.button.disabled
{
    background-image: url('../Content/Images/PageLayout/Button_disabled_BG.png');
    cursor: default;
    border-style: solid;
    border-color: #55a0e7;
    border-width: 1px;
}


/* MAIN PAGE SETTINGS
 --------------------------------------------------------------------------------------*/

#address
{
    color: #CEAC51;
    font-size: 70%;
    text-align: left;
    top: 81px;
    padding: 0px;
    position: absolute;
    left: 200px;
    white-space: nowrap;
}

#logo
{
    z-index: 100;
    width: 130px;
    height: 137px;
    top: 20px;
    position: absolute;
    left: 40px;
    background-image: url('../Content/Images/PageLayout/BrauereiRapp_130.png');
    background-repeat: no-repeat;
    cursor: pointer;
}

#newsFlash
{
    z-index: 5;
    height: 50px;
    top: 105px;
    position: absolute;
    left: 100px;
    background-image: url('../Content/Images/PageLayout/Transparent-75.png');
    background-repeat: repeat;
    padding: 0px 20px 0px 70px;
    border-radius: 5px;
}

#header_container .stripe
{
    position: relative;
    background-color: #996619;
    left: 0px;
    background-image: url('../Content/Images/PageLayout/GoldStreifen.jpg');
    background-repeat: no-repeat;
    height: 3px;
}


#welcome_text
{
    font-size: medium;
    color: white;
    text-decoration: none;
}

#welcome_info
{
    font-size: small;
    color: white;
    text-decoration: none;
    height: 30px;
    vertical-align: top;
}

#menu1
{
    font-size: small;
    position: absolute;
    right: 40px;
    top: 20px;
}

    #menu1 a
    {
        color: #d0d0d0;
        margin-left: 20px;
        text-decoration: none;
    }

        #menu1 a:focus
        {
            outline: none;
        }

        #menu1 a:hover
        {
            color: #CEAC51;
        }

.faq
{
    width: 40px;
    height: 40px;
    background-image: url('../Content/Images/Icons/FAQ.png');
}

    .faq:hover
    {
        background-image: url('../Content/Images/Icons/FAQ_hover.png');
    }

#user_container .button
{
    width: 105px;
    padding: 0px;
}

#ShoppingCartOverlay
{
    position: fixed;
    padding: 20px;
    width: 174px;
    display: none;
    z-index: 200;
    background-color: transparent;
    border: 2px solid #c00000;
    border-radius: 8px;
    background: url('../Content/Images/PageLayout/Transparent-90.png') repeat;
    text-align: center;
    font-size: small;
    font-weight: bold;
    color: #404040 !important;
}

/* MENU SETTINGS 
   ---------------------------------------------------------------------------------------- */
.mainMenu
{
    position: absolute;
    background-color: transparent;
    height: 60px;
    right: 40px;
    left: 40px;
    top: 0px;
}

.menuButtonContainer
{
    position: relative;
    float: left;
    margin: 0px 6px 0px 0px;
}

.menuButton
{
    color: White;
    font-size: small;
    padding: 0;
    text-align: center;
    border-radius: 3px;
    background: url('../Content/Images/PageLayout/DefaultMenu_BG.png') repeat-x;
    height: 37px;
    line-height: 37px;
    margin-top: 11px;
    width: 160px;
    border: 1px solid #2c2c2c;
    cursor: pointer;
    display: block;
    text-decoration: none;
}

    .menuButton.selected
    {
        background: url('../Content/Images/PageLayout/DefaultMenu_selected_BG.png') repeat-x;
    }


    .menuButton:hover
    {
        background: url('../Content/Images/PageLayout/DefaultMenu_hover_BG.png') repeat-x;
    }


.productButton
{
    font-size: medium;
    background: url('../Content/Images/PageLayout/ProductMenu_BG.png') repeat;
    height: 51px;
    line-height: 51px;
    margin-top: 4px;
    width: 152px;
}

    .productButton.selected
    {
        background: url('../Content/Images/PageLayout/ProductMenu_selected_BG.png') repeat-x;
    }


    .productButton:hover
    {
        background: url('../Content/Images/PageLayout/ProductMenu_hover_BG.png') repeat;
    }

.shoppingCartButtonContainer
{
    position: absolute;
    float: none;
    margin: 0px 0px 0px 0px;
    right: 0px;
    top: 0px;
}

.shoppingCartButton
{
    font-size: medium;
    background: url('../Content/Images/PageLayout/WarenkorbMenu_BG.png') repeat;
    height: 51px;
    margin-top: 4px;
    line-height: 12px;
    width: 215px;
}

.debtInfoContainer
{
    background: url('../Content/Images/PageLayout/WarenkorbMenu_BG.png') repeat;
    height: auto;
    text-align: center; 
    width: 105px;
}

    .shoppingCartButton.selected
    {
        background: url('../Content/Images/PageLayout/WarenkorbMenu_selected_BG.png') repeat-x;
    }


    .shoppingCartButton:hover
    {
        background: url('../Content/Images/PageLayout/WarenkorbMenu_hover_BG.png') repeat;
    }

.subMenuContainer
{
    background: transparent url('../Content/Images/PageLayout/Transparent-90.png') repeat !important;
    position: absolute;
    top: 60px;
    left: 0px;
    display: none;
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    line-height: 32px;
    -moz-box-shadow: 2px 2px 10px #444 !important;
    -webkit-box-shadow: 2px 2px 10px #444 !important;
    box-shadow: 2px 2px 10px #444 !important;
    white-space: nowrap;
    min-width: 100%;
}

.subMenuButton
{
    color: #404040;
    background: none;
    border: none;
    border-bottom: 1px solid #c0c0c0;
    margin: 0px;
    height: 32px !important;
    line-height: 32px !important;
    width: 100%;
}

    .subMenuButton:hover
    {
        background: #bcd5ed;
    }


/* ADVERTIZING ORDER BOX (Remark: advertising renamed to rappoffer due to some browser plugins do block elements with rappoffer in its name)
   ---------------------------------------------------------------------------------------- */
#rappofferOrderBottom, #rappofferOrderTop
{
    background: url('../Content/Images/PageLayout/Transparent-75.png') repeat;
    border: none;
    position: absolute;
    margin: 0;
    padding: 10px;
    width: 250px;
    color: #404040;
    font-size: small;
    border-radius: 3px;
    z-index: 100;
}

#rappofferOrderBottom
{
    top: 500px;
    left: 750px;
}

#rappofferOrderTop
{
    top: 140px;
    right: 40px;
}

#morerappoffer
{
    width: 270px;
    height: 35px;
    background-color: #c00000;
    border-radius: 3px;
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: -10px;
    margin-top: 10px;
    cursor: pointer;
    color: white;
    font-weight: bold;
    text-decoration: none;
}

#rappofferButtonBottom
{
    position: absolute;
    top: 500px;
    left: 750px;
    cursor: pointer;
}

#rappofferButtonTop
{
    position: absolute;
    top: 165px;
    right: 40px;
    cursor: pointer;
}

.articleTitel
{
    font-weight: bold;
    font-size: medium;
}

.articleDescription
{
    margin-top: 5px;
    margin-bottom: 10px;
}

.addToCartBlock
{
    height: 60px;
}

.articleCost
{
    vertical-align: bottom;
    margin-bottom: 5px;
}

.articleAmount
{
    text-align: right;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 5px;
}

.articleShoppingCartButton
{
    width: 60px;
    height: 60px;
}

    .articleShoppingCartButton input
    {
        outline: none;
    }

/* MAIN SETTINGS 
   ---------------------------------------------------------------------------------------- */
h2
{
    font-size: 24px;
    font-weight: normal;
    color: #0066cc;
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: 50px;
}

h3
{
    font-size: middle;
    font-weight: bold;
    color: #404040;
}

.orderAmountDropDown
{
    height: 220px !important;
}

    .orderAmountDropDown .t-item
    {
        padding-right: 13px !important;
        text-align: right !important;
    }

    .orderAmountDropDown .t-input
    {
        text-align: center;
    }

.rappDropDown
{
    background-color: transparent !important;
    background: url('../Content/Images/PageLayout/Transparent-90.png') repeat !important;
    border: 1px solid #c0c0c0 !important;
    border-radius: 3px;
}

    .rappDropDown .t-item
    {
        font-size: small;
        background-color: transparent;
        color: #404040;
        border-top: 1px solid transparent;
        border-bottom: 1px solid #bbbbbb;
    }

        .rappDropDown .t-item:hover
        {
            background-color: #bdd5ec!important;
            border-top: 1px solid #404040;
            border-bottom: 1px solid #404040;
        }

.orderAmount
{
    width: 40px !important;
}

.rappDropBox
{
    font-size: small !important;
    border-radius: 3px !important;
    background: white url('../Content/Images/PageLayout/Transparent-50.png') repeat !important;
    color: #404040 !important;
}

    .rappDropBox .t-dropdown-wrap
    {
        border: 1px solid #55a0e7;
    }

    .rappDropBox .t-input
    {
        color: #404040;
        background-color: white !important;
    }

    .rappDropBox .t-select
    {
        background: none !important;
        background-color: white !important;
    }

    .rappDropBox .t-icon
    {
        background: url('../Content/Images/Icons/DropDown_Arrow.png') repeat !important;
    }

.rappInput
{
    font-size: small !important;
    border: 1px solid #55a0e7;
    border-radius: 3px;
    /*background: url('../Content/Images/PageLayout/Transparent-75.png') repeat !important;*/
    color: #404040;
    padding: 2px;
}

.rappWhiteInput
{
    font-size: small !important;
    border: 1px solid #55a0e7;
    border-radius: 3px;
    background: url('../Content/Images/PageLayout/Transparent-90.png') repeat !important;
    color: #404040;
    padding: 2px;
}

.rappInputHigh
{
    color: #c00000 !important;
    font-weight: bold !important;
}


/* DEFAULT CONTENT STYLES
   ----------------------------------------------------------------------------------------- */
.rappFormularBack
{
    background: transparent url('../Content/Images/PageLayout/Transparent-75.png') repeat;
    border: none;
    color: #404040;
    padding: 20px;
    font-size: small;
    position: absolute;
    top: 55px;
    border-top-left-radius: 0px 0px;
    border-top-right-radius: 3px 3px;
    border-bottom-right-radius: 3px 3px;
    border-bottom-left-radius: 3px 3px;
}

.rappTextBack
{
    background: transparent url('../Content/Images/PageLayout/Transparent-75.png') repeat;
    border: none;
    color: #404040;
    padding: 20px;
    font-size: small;
    border-radius: 3px 3px;
    position: absolute;
    top: 330px;
}

.rappAGBBack
{
    background: transparent url('../Content/Images/PageLayout/Transparent-75.png') repeat;
    border: none;
    color: #404040;
    padding: 20px;
    font-size: small;
    border-radius: 3px 3px;
    position: absolute;
    top: 250px;
}

.rappTextBack.old
{
    background: transparent url('../Content/Images/PageLayout/Transparent-gray-75.png') repeat;
    position: absolute;
    top: 55px !important;
    border-top-left-radius: 0px 0px;
    border-top-right-radius: 3px 3px;
    border-bottom-right-radius: 3px 3px;
    border-bottom-left-radius: 3px 3px;
}

.rappFormularBack.old
{
    background: transparent url('../Content/Images/PageLayout/Transparent-gray-75.png') repeat;
}

.rappFormularBack .button, .rappFormularBack .button-gray
{
    width: 160px;
    padding: 0px;
}

.rappFormularTab
{
    background: transparent url('../Content/Images/PageLayout/Transparent-75.png') repeat;
    border: none;
    top: 20px;
    height: 27px;
    padding: 8px 20px 0px 20px;
    color: #0066cc;
    font-size: 20px;
    position: absolute;
    border-top-left-radius: 3px 3px;
    border-top-right-radius: 3px 3px;
    border-bottom-right-radius: 0px 0px;
    border-bottom-left-radius: 0px 0px;
}

    .rappFormularTab.old
    {
        background: transparent url('../Content/Images/PageLayout/Transparent-gray-75.png') repeat;
    }

.rappInfoText
{
    font-weight: bold;
    color: #0066cc;
    list-style: none;
}

.rappDeliveryText
{
    font-weight: bold !important;
    color: #0066cc !important;
}

.rappSpecialPrice
{
    color: #c00000 !important;
    font-weight: bold !important;
}

.rappDisable
{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: url('../Content/Images/PageLayout/Transparent-30.png') repeat;
}

.cancel-symbol
{
    background: url('../Content/Images/Icons/Cancel.png') repeat;
    width: 24px;
    height: 24px;
    cursor: pointer;
    float: left;
    margin-left: 5px;
}

    .cancel-symbol:hover
    {
        background: url('../Content/Images/Icons/Cancel_hover.png') repeat;
    }

.apply-symbol
{
    background: url('../Content/Images/Icons/Apply.png') repeat;
    width: 24px;
    height: 24px;
    cursor: pointer;
    float: left;
    margin-left: 5px;
}

    .apply-symbol:hover
    {
        background: url('../Content/Images/Icons/Apply_hover.png') repeat;
    }

/* Special Settings for EmloyeeLayout-Master
   ---------------------------------------------------------------------------------------------- */
#EmployeeLayout #menu_container
{
    height: 50px;
    background-image: url('../Content/Images/PageLayout/Menue_50_BG.jpg');
    top: 105px;
}

#EmployeeLayout #main_container
{
    top: 155px;
    background: #002c5a url('../Content/Images/Aktionen/Default/large.jpg') no-repeat;
}

#EmployeeLayout .mainMenu
{
    left: 120px;
    top: -5px;
}

#EmployeeLayout #welcome_text
{
    margin: 20px;
    font-size: small;
    color: white;
    text-decoration: none;
}

.badge
{
    position: absolute;
    top: -4px;
    right: -4px;
    padding: 0px 3px 0px 3px;
    color: #c00000;
    background: White;
    border: 2px solid #c00000;
    font-size: 8pt;
    font-weight: bold;
    border-radius: 10px;
}



/* Special Settings for QuickOrder
   ---------------------------------------------------------------------------------------------- */
.rappQuickBack
{
    background: transparent url('../Content/Images/PageLayout/Transparent-50.png') repeat;
    border: none;
    color: #404040;
    padding: 0px;
    font-size: small;
    position: relative;
    border-radius: 3px;
    float: left;
    margin: 0px 20px 32px 0px;
    width: 400px;
}

#quickOrder .quickHeadline
{
    padding: 10px 10px 10px 10px;
    margin: 0px 0px 10px 0px;
    color: #404040;
    border-radius: 3px;
    -moz-box-shadow: 2px 2px 5px #444;
    -webkit-box-shadow: 2px 2px 5px #444;
    box-shadow: 2px 2px 5px #444;
    font-size: medium;
    font-weight: bold;
}

/* Special Settings for Calendar
   ---------------------------------------------------------------------------------------------- */
.rappCalendarBack
{
    background: transparent url('../Content/Images/PageLayout/Transparent-75.png') repeat;
    border: none;
    padding: 0px;
    font-size: small;
    position: relative;
    border-radius: 3px;
    float: left;
    margin: 0px 10px 10px 0px;
}


.rappCalendar
{
    border: none !important;
    background: none !important;
}

    .rappCalendar .t-header
    {
        background: transparent url('../Content/Images/PageLayout/Button_BG.png') repeat-x !important;
        padding: 10px !important;
        border: none !important;
    }

    .rappCalendar .t-group, .t-content
    {
        background: none !important;
    }

    .rappCalendar th
    {
        background-color: #bcd5ed !important;
        color: #002c5a;
    }

    .rappCalendar .t-other-month a
    {
        color: #999999 !important;
    }

.t-calendar .t-state-selected
{
    background-color: transparent !important;
}

.t-calendar td
{
    cursor: default !important;
}

.rappCalendar .t-action-link
{
    text-decoration: none !important;
    background-color: transparent !important;
    border: 1px solid #0066cc !important;
    cursor: default !important;
    border-radius: 3px;
}

.rappCalendar a.t-link.t-action-link
{
    color: #c00000 !important;
    font-weight: bold !important;
}

.rappCalendar .t-link
{
    color: #404040;
    cursor: default;
}

.t-widget, .t-input
{
    border-color: #c0c0c0 !important;
    border-style: solid;
    border-width: 1px;
}

#TourDatesOverview h2
{
    margin: 20px 20px 20px 20px;
}

/* Special settings for product sheet
   ---------------------------------------------------------------------------------------------- */

.rappArticle
{
    float: left;
    background: transparent;
    margin: 0px 4px 4px 0px;
    width: 298px;
    height: 192px;
    padding: 20px;
    color: Black;
    position: relative;
    font-size: small;
}







/* Special settings for modal popup
   ---------------------------------------------------------------------------------------------- */

.modal-overlay
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #000000;
    opacity: .65;
    filter: alpha(opacity=65);
    z-index: 101;
}

.modal-window
{
    position: fixed;
    top: 50%;
    left: 50%;
    margin: 0;
    padding: 0;
    z-index: 102;
    background: transparent url(../Content/Images/PageLayout/Transparent-90.png) repeat;
    border: none;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

.close-window
{
    position: absolute;
    width: 24px;
    height: 24px;
    right: 20px;
    top: 20px;
    background: transparent url(../Content/Images/PageLayout/close-button.png) no-repeat scroll right top;
    text-indent: -99999px;
    overflow: hidden;
    cursor: pointer;
    boder-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 1px solid #404040;
}


/* Special settings for Article Detail View
   ---------------------------------------------------------------------------------------------- */

.detailHeadline
{
    margin-top: 50px;
    font-size: 130%;
    font-weight: bold;
}


/* Special settings for CustomerGrid
   ---------------------------------------------------------------------------------------------- */

.t-page-i-of-n input
{
    width: 2em;
    vertical-align: baseline;
    font-size: 1em;
    margin-right: 10px !important;
    margin-left: 10px !important;
}

/*
.t-icon
{
    background-image: url('../Content/Images/Icons/sprite.png') !important;
}
*/

#CustomerGrid .t-link:hover
{
    color: #55a0e7;
    background: none;
}

.t-header .t-link
{
    color: #888 !important;
}

.shadow
{
    -moz-box-shadow: 1px 1px 2px #888 !important;
    -webkit-box-shadow: 1px 1px 2px #888 !important;
    box-shadow: 1px 1px 2px #888 !important;
}




/* Special settings for Transparent Theme
   ---------------------------------------------------------------------------------------------- */
.t-alt
{
    background-color: #FFF !important;
    /*background:url('../Content/Images/PageLayout/grid_alt_BG.png') !important; */
}

.t-widget, div.t-combobox
{
    border-color: #c5c5c5 !important;
    background: url('../Content/Images/PageLayout/grid_BG.png') !important;
}

.t-state-selected
{
    background-image: none !important;
    border-color: #aaa;
}

.t-state-hover, .t-state-hover:hover
{
    background-image: none !important;
    color: #0066cc;
}

#Grid .t-link:hover
{
    color: #55a0e7;
    background: none;
}

/* Special settings for article detail html
   ---------------------------------------------------------------------------------------------- */
/*.detailSpecial
{
    font-weight: bold;
    font-style:italic;
    font-size:medium;
    color: #c00000;
}

.detailBackground
{
    font-size: small;
    background: none;
    color: #404040;
}

.detailAlternate
{
    background-color: #bcd5ed;
}

.detailTitle
{
    font-weight: bold;
}*/

/* Special settings for Company Sites
   ---------------------------------------------------------------------------------------------- */

.historyDate
{
    font-size: large;
    color: #0066cc;
    vertical-align: top;
}

.subTitle
{
    font-size: 200%;
    line-height: 200%;
    color: #0066cc;
    vertical-align: top;
}


/* Special settings for Recipes
   ---------------------------------------------------------------------------------------------- */
.recipeCategory, .recipeCategorySelected
{
    width: 168px;
    float: left;
    cursor: pointer;
    margin-right: 5px;
    text-align: left;
    color: #404040;
    padding: 10px;
    border: 1px solid #ddd;
    background: url(../Content/Images/PageLayout/Transparent-50.png) repeat;
}

.recipeCategorySelected
{
    color: #06c;
    font-weight: bold;
    /*background: url('../Content/Images/PageLayout/ProductMenu_hover_BG.png') repeat-x ;*/
}

    .recipeCategory:hover, .recipeCategorySelected:hover
    {
        background-color: #bcd5ed;
    }

.recipesTitel
{
    color: #0066cc;
    font-size: large;
}

/* Special settings for HomeService
   ---------------------------------------------------------------------------------------------- */

#homeService
{
    background-image: url('../Content/Images/Liefergebiet.png');
    width: 927px;
    height: 1025px;
}

/* Special settings for CallCenter
   ---------------------------------------------------------------------------------------------- */
.deliveryDate
{
    font-weight: bold;
}

.noCustomerList
{
    font-style: italic;
    color: #666;
}

.customerName
{
    font-size: 20px;
}

.phoneSymbol
{
    float: left;
    width: 48px;
    height: 48px;
    background: transparent url('../Content/Images/Icons/Phone.png') no-repeat;
    margin: 0px 10px 0px 0px;
}

.phoneNumber
{
    font-size: 17px;
    font-weight: bold;
    color: #06c;
}

.customerCounter
{
    clear: both;
    margin: 10px 0px 10px 0px;
    font-size: 80%;
}

#articleArea .quickHeadline
{
    width: 100%;
    height: 24px;
    line-height: 24px;
    padding: 0px 5px 0px 5px;
    font-weight: bold;
}

.button-gray.callcenter,
.button-gray_text.callcenter
{
    height: 24px;
    width: 24px;
    line-height: 24px;
    font-size: 20px;
}

.shoppingSymbol
{
    width: 53px;
    height: 48px;
    background: transparent url('../Content/Images/Icons/Shopping.png') no-repeat;
    background-position: left;
}


/* Special settings for telerik calendar (Lieferkalendar) 
   ---------------------------------------------------------------------------------------------- */
.t-other-month  /*Hide days of previous/next month*/
 {  
    visibility: hidden !important;     
  } 


/* cookie banner */
.cookie-banner {
    position: fixed;
    width: 100vw;
    display: block;
    left: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    color: black;
    box-sizing: border-box;
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 1em;
}
.cookie-banner-hint-row {
    text-align: center;
}
.cookie-banner-row {
    padding-top: 1em;
    text-align: right;
}

/* modal customization */
.jconfirm {
    color: black;
}
.jconfirm-title-c {
    text-align: center;
}

/* Jobs page*/
.jobs-page-intro-text {
    margin-bottom: 3em;
}

.jobs-table {
    margin-top: 2em;
    width: 100%;
}

.jobs-table thead {
    font-weight: bold;
}

.jobs-table tbody td {
    padding-top: 0.5em;
}

.jobs-table-date-header {
    width: 15%;
}

.jobs-table-jobname-header {
    width: 65%;
}

.jobs-table-startdate-header {
    width: 20%;
}

/* Knockout Validation */
.validationMessage {
    color: red;
}

/* Customer Data Edit */
hr.black {
    border-color: black;
}

.rapp-mobile-label.black {
    color: black;
}