/* =============================================================================
   Custom styles for shaokao-delivery.de
   ========================================================================== */



html, button, input, select, textarea {
    font-family: "museo-sans",sans-serif;
    color: #222;
}

::-moz-selection {
    background: #d2d2d2;
    color: #fff;
}

::selection {
    background: #d2d2d2;
    color: #fff;
}


/* =============================================================================
   Links
   ========================================================================== */

a {
    color: #111;
    text-decoration: none;
    cursor: pointer;
}

    a:visited {
        color: #111;
    }

    a:hover {
        color: #111;
    }

   


ins {
    background: #ff9;
    color: #000;
}

mark {
    background: #ff0;
    color: #000;
}



    input:invalid, textarea:invalid {
        background-color: #f0dddd;
    }


.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: black;
    padding: 0.2em 0;
}

.wartung {
    background-color: rgba(0,0,0,0.8);
    color: #fff;
}

body {
    font-family: "museo-sans",sans-serif;
    
}


.wrapper {
   color: #111;
    
}

.header {
    background-color: rgb(224,218,210);
    
}
#nav-icon span{
    background:rgb(205,14,46);
}

.lieferzeiten, .lieferzeiten a {
    color: rgb(205,14,46);
}

    .mainMenu a:hover, .secondaryMenu a:hover,
    .mainMenu a.current, .secondaryMenu a.current {
        color: rgb(205,14,46);
    }


.login, .registrierung {
    background-color: #fff;
}

    .login h2, .registrierung h2 {
        color: rgb(205,14,46);
        
    }

    .login input.button, .registrierung input.button {
        background-color: #fff;
       
    }

    .login input[type="text"],
    .login input[type="password"],
    .registrierung input[type="text"],
    .registrierung input[type="password"] {
       
        border: solid 1px #d2d2d2;
        
    }

/***************************************


        General Styles


***************************************/
input {
    border: 1px solid rgb(205,14,46);
    background-color: transparent;
}


select {
    border: 1px solid rgb(205,14,46);
    background-color:transparent;
}

select {
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
}


.select2-container--default .select2-selection--single {
    border: 1px solid rgb(205,14,46);
}

.sliderOverlay .select2-container--default .select2-selection--single {
    border: 1px solid #fff;
}


.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #000;
}

.select2-dropdown {
    border: 1px solid rgb(205,14,46);
}

.Home .select2-dropdown {
    border: 1px solid #fff;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: rgb(205,14,46);
    color: white;
}

.orange {
    color: rgb(205,14,46);
    font-weight: 100;
}

.white {
    color: #fff;
}
.thirdMenu .white{
    color:rgb(205,14,46);
}

textarea {
    border: solid 1px rgb(205,14,46);
    background-color: transparent;
}
/***************************************


        Startpage Styles


***************************************/
.loading {
    background-color: #efefef;
}

.home .flexslider.bilder {
    background-color: #d2d2d2;
}

.home .sliderOverlay {
    color: #fff;
}

.sliderOverlay .button.white {
    border: 1px solid #fff;
    color: #fff;
}


.home .schwarz {
    background-color: #000;
}

    .home .schwarz h1 {
        color: #fff;
    }

.home .restaurantText {
    color: rgb(205,14,46);
}

.home .orange {
    background-color: rgb(224,218,210); 
    color: rgb(205,14,46);
}

.redBox {
    background-color: red;
}

.whiteBox {
    background-color: rgb(224,218,210); 
}

.orangeBox {
    background-color: rgb(224,218,210); 
    color: rgb(205,14,46);
}

/***************************************


        Produktübersicht Styles


***************************************/
/****************** warenkorb **********************/

.deleteLink {
    color: #999;
    
}


.buttonBeschriftungKlein {
    color: rgb(205,14,46);
}

button.bestellButton {
    color: #fff;
    background-color: rgb(205,14,46);
    border: solid 1px rgb(205,14,46);
}

#warenkorbZusammenfassung .button {
    background-color: #fff;
}

button.bestellButton[disabled] {
    background-color: #d2d2d2;
    color: #efefef;
    border: solid 1px #d2d2d2;
}

.error {
    color: rgb(205,14,46);
}

h1.warenkorbUeberschrift {
    color: rgb(205,14,46);
}

.showStrasseInput {
    color: #555;

}

input.valueMissing,
select.valueMissing,
select.valueMissing + .select2 .select2-container--default,
select.valueMissing + .select2 .select2-selection--single {
    background-color: #e30613;
    color: #fff;
}

    select.valueMissing + .select2 .select2-container--default .select2-selection__rendered,
    select.valueMissing + .select2 .select2-selection--single .select2-selection__rendered,
    select.valueMissing + .select2 .select2-container--default .select2-selection__arrow b,
    select.valueMissing + .select2 .select2-selection--single .select2-selection__arrow b {
        border-color: #fff transparent transparent transparent;
        color: #fff;
    }
/****************** detailansicht **********************/

.artikeldetail {
    background-color: #fff;
}

.showMenueOptions {
    color: rgb(205,14,46);
}

.buttonBeschriftung {
    color: rgb(205,14,46);
}

.button, .anzahl {
    border: 1px solid rgb(205,14,46);
    color: rgb(205,14,46);
}

.anzahl {
    color: #000;
}

    .anzahl input {
        border: 0px solid #fff;
    }

    .button.links {
        border-right: solid 0px #fff;
    }

    .button.rechts {
        border-left: solid 0px #fff;
    }

    .button.red {
        background-color: #ed0012;
    }

strong.red {
    color: #ed0012;
}



.artikelAllergieInformationen {
    color: #999;
}

.detailsAnzeigen {
    border: solid 1px rgb(205,14,46);
    color: rgb(205,14,46);
}


.schattierung {
    background-color: rgba(0, 0, 20, 0.01);
    
}

    .schattierung.dunkel {
        background-color: rgba(0, 0, 20, 0.25);
    }

#manga_artikelVorschau .pure-u-1:nth-child(8n+1) .schattierung {
    background-color: rgba(0, 0, 20, 0.025);
}

#manga_artikelVorschau .pure-u-1:nth-child(8n+2) .schattierung {
    background-color: rgba(0, 0, 20, 0.06);
}

#manga_artikelVorschau .pure-u-1:nth-child(8n+3) .schattierung {
    background-color: rgba(0, 0, 20, 0.015);
}

#manga_artikelVorschau .pure-u-1:nth-child(8n+4) .schattierung {
    background-color: rgba(0, 0, 20, 0.05);
}

#manga_artikelVorschau .pure-u-1:nth-child(8n+5) .schattierung {
    background-color: rgba(0, 0, 20, 0.06);
}

#manga_artikelVorschau .pure-u-1:nth-child(8n+6) .schattierung {
    background-color: rgba(0, 0, 20, 0.015);
}

#manga_artikelVorschau .pure-u-1:nth-child(8n+7) .schattierung {
    background-color: rgba(0, 0, 20, 0.05);
}

#manga_artikelVorschau .pure-u-1:nth-child(8n) .schattierung {
    background-color: rgba(0, 0, 20, 0.01);
}

#manga_artikelVorschau .pure-u-1:nth-child(8n+1) .schattierung.dunkel {
    background-color: rgba(0, 0, 20, 0.2);
}

#warenkorbZusammenfassung .schattierung {
    background-color: rgba(20, 0, 20, 0.015);
}

#manga_bestellpositionen .pure-u-1:nth-child(2n) .schattierung {
    background-color: rgba(0, 0, 20, 0.06);
}

/************ Warenkorb ****************/

.overlay-noOrderToday, 
.overlay-noOrderToday-Christmas{
   
    background-color: rgba(239, 109, 0,0.9);
    color:#fff;
}


/***************************************


        Textseite Styles


***************************************/


/************** Bestätigungsseite *************************/

.statusanzeige {
    color: #fff;
    background-color: rgb(205,14,46);
}

.pure-g.bestellpositionen [class*="pure-u"] {
    border-bottom: solid 1px #d2d2d2;
}

.pure-g.bestellpositionen .noBorder,
.pure-g.bestellpositionen .pure-g [class*="pure-u"] {
    border-bottom: solid 0px #fff;
}
/***************************************


        Footer Styles


***************************************/



.footer {
    background-color: #000;
    color: #fff;
}

    .footer a {
        color: #fff;
    }




/* ==|== media queries ======================================================
   EXAMPLE Media Query for Responsive Design.
   This example overrides the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */


@media screen and (max-width: 767px) {

   

    .mainMenu a {
        border-top: solid 1px #fff;
    }

    .secondaryMenu a, .thirdMenu a {
        border-top: solid 1px #fff;
    }

    .mainMenu, .secondaryMenu {
        border-bottom: solid 1px #fff;
    }

   
    .home .sliderOverlay {
        color: rgb(205,14,46);
    }

    .sliderOverlay .select2-container {
        border: solid 1px rgb(205,14,46);
    }

}