/* ------------------------ */
/* ----- Theme Colors ----- */
/* ------------------------ */
/* Use whenever you need to apply a color scheme-specific color to an element */

/* purple */
 .theme1.purple, h2.purple { color: #C6168D; } 
.theme2.purple { color: #92278F; }
.theme3.purple { color: #5C2E91; }
.accent.purple { color: #ed1c24; }
.bg1.purple {
    background-color: #C6168D;
    border-color: #C6168D;
    border-width: 1px;
}
.bg2.purple { background-color: #92278F; }
.bg3.purple { background-color: #5C2E91; }
.bg-accent.purple { background-color: #ed1c24; }

/* red */
.theme1.red, h2.red { color: #f15922; }
.theme2.red { color: #ed1c24; }
.theme3.red { color: #a92b31; }
.accent.red { color: #f47920; }
.bg1.red {
    background-color: #f15922;
    border-color: #f15922;
    border-width: 1px;
}
.bg2.red { background-color: #ed1c24; }
.bg3.red { background-color: #a92b31; }
.bg-accent.red { background-color: #f47920; }

/* blue */
.theme1.blue, h2.blue { color: #00aeef; }
.theme2.blue { color: #0089d0; }
.theme3.blue { color: #0060af; }
.accent.blue { color: #92278F; }
.bg1.blue {
    background-color: #00aeef;
    border-color: #00aeef;
    border-width: 1px;
}
.bg2.blue { background-color: #0089d0; }
.bg3.blue { background-color: #0060af; }
.bg-accent.blue { background-color: #92278F; }

/* green */
.theme1.green, h2.green { color: #20bdbe; }
.theme2.green { color: #01a490; }
.theme3.green { color: #006b6b; }
.accent.green { color: #0089d0; }
.bg1.green {
    background-color: #20bdbe;
    border-color: #20bdbe;
    border-width: 1px;
}
.bg2.green { background-color: #01a490; }
.bg3.green { background-color: #006b6b; }
.bg-accent.green { background-color: #0089d0; }

/* orange */
.theme1.orange, h2.orange { color: #fcaf17; }
.theme2.orange { color: #f47920; }
.theme3.orange { color: #dd5828; }
.accent.orange { color: #01a490; }
.bg1.orange {
    background-color: #fcaf17;
    border-color: #fcaf17;
    border-width: 1px;
}
.bg2.orange { background-color: #f47920; }
.bg3.orange { background-color: #dd5828; }
.bg-accent.orange { background-color: #01a490; }

/* ---------------------- */
/* ----- Nav Colors ----- */
/* ---------------------- */
/* Theme colors for main navigation: flat colors when nav is vertical */

/* default is red */
nav { 
    background-color: #ed1c24;
    background-image: -webkit-linear-gradient(top, #ed1c24 0%, #B01018 100%);
    background-image: linear-gradient(to bottom, #ed1c24 0%, #B01018 100%);
} 
nav .menu > li > a { background-color: #ed1c24; }
nav .menu > li > a:hover,
nav .menu > li > a:focus,
nav .menu > li > a:active { background-color: #f15922; }
nav .menu > li > a.active { background-color: #a92b31; }
nav .menu > li > ul { background-color: #fcaf17; }
nav .menu > li > ul {
    background-repeat: no-repeat;
    background-position: left-top; 
}
nav .menu > li > ul { background-image: url('../red/images/nav/menupanel-bg.gif'); }

/* purple */
nav.purple { 
    background-color: #c6168d;
    background-image: -webkit-linear-gradient(top, #c6168d 0%, #92278f 100%);
    background-image: linear-gradient(to bottom, #c6168d 0%, #92278f 100%);
} 
nav.purple .menu > li > a { background-color: #c6168d; }
nav.purple .menu > li > a:hover,
nav.purple .menu > li > a:focus,
nav.purple .menu > li > a:active { background-color: #a92b31; }
nav.purple .menu > li > a.active { background-color: #5c2e91; }
nav.purple .menu > li > ul { background-color: #ed1c24; }
nav.purple .menu > li > ul { background-image: url('../purple/images/nav/menupanel-bg.gif'); }

/* blue */
nav.blue { 
    background-color: #00aeef;
    background-image: -webkit-linear-gradient(top, #00aeef 0%, #0089d0 100%);
    background-image: linear-gradient(to bottom, #00aeef 0%, #0089d0 100%);
} 
nav.blue .menu > li > a { background-color: #00aeef; }
nav.blue .menu > li > a:hover,
nav.blue .menu > li > a:focus,
nav.blue .menu > li > a:active { background-color: #5c2e91; }
nav.blue .menu > li > a.active { background-color: #0060af; }
nav.blue .menu > li > ul { background-color: #c6168d; }
nav.blue .menu > li > ul { background-image: url('../blue/images/nav/menupanel-bg.gif'); }

/* green */
nav.green { 
    background-color: #20bdbe;
    background-image: -webkit-linear-gradient(top, #20bdbe 0%, #01a490 100%);
    background-image: linear-gradient(to bottom, #20bdbe 0%, #01a490 100%);
} 
nav.green .menu > li > a { background-color: #20bdbe; }
nav.green .menu > li > a:hover,
nav.green .menu > li > a:focus,
nav.green .menu > li > a:active { background-color: #0060af; }
nav.green .menu > li > a.active { background-color: #006b6b; }
nav.green .menu > li > ul { background-color: #00aeef; }
nav.green .menu > li > ul { background-image: url('../green/images/nav/menupanel-bg.gif'); }

/* orange */
nav.orange { 
    background-color: #fcaf17;
    background-image: -webkit-linear-gradient(top, #fcaf17 0%, #f47920 100%);
    background-image: linear-gradient(to bottom, #fcaf17 0%, #f47920 100%);
} 
nav.orange .menu > li > a { background-color: #fcaf17; }
nav.orange .menu > li > a:hover,
nav.orange .menu > li > a:focus,
nav.orange .menu > li > a:active { background-color: #006b6b; }
nav.orange .menu > li > a.active { background-color: #dd5828; }
nav.orange .menu > li > ul { background-color: #20bdbe; }
nav.orange .menu > li > ul { background-image: url('../orange/images/nav/menupanel-bg.gif'); }

/* Theme colors for main navigation: gradients and borders only when nav is horizontal */

/* TODO: media query could be removed if mobile menu uses separate color classes */
@media screen and (min-width: 768px) {
    /* default is red */
    nav {
        background-color: #fcaf17;
        background-image: -webkit-linear-gradient(top, #fcaf17 0%, #f47920 100%);
        background-image: linear-gradient(to bottom, #fcaf17 0%, #f47920 100%);
    }
    nav .menu > li > a {
        background-color: #ed1c24;
        background-image: -webkit-linear-gradient(top, #ed1c24 0%, #a92b31 100%);
        background-image: linear-gradient(to bottom, #ed1c24 0%, #a92b31 100%);
        border-left: 1px solid;
        border-right: 1px solid;
        border-left-color: #A51A22;
        border-right-color: #D94950;
    }
    nav .menu > li > a:hover,
    nav .menu > li > a:focus,
    nav .menu > li > a:active {
        border-left-color: #A33A22;
        border-right-color: #DD7256;
        background-image: none;
    }
    nav .menu > li > a.active {
        border-left-color: #7B2127;
        border-right-color: #B35659;
        background-image: none;
    }
    /* purple */
    nav.purple {
        background-color: #ed1c24;
        background-image: -webkit-linear-gradient(top, #ed1c24 0%, #B01018 100%);
        background-image: linear-gradient(to bottom, #ed1c24 0%, #B01018 100%);
    }
    nav.purple .menu > li > a {
        background-color: #c6168d;
        background-image: -webkit-linear-gradient(top, #c6168d 0%, #92278f 100%);
        background-image: linear-gradient(to bottom, #c6168d 0%, #92278f 100%);
        border-left-color: #791860;
        border-right-color: #A84692;
    }
    nav.purple .menu > li > a:hover,
    nav.purple .menu > li > a:focus,
    nav.purple .menu > li > a:active {
        border-left-color: #68161A;
        border-right-color: #9E494C;
        background-image: none;
    }
    nav.purple .menu > li > a.active {
        border-left-color: #442768;
        border-right-color: #74589C;
        background-image: none;
    }
    /* blue */
    nav.blue {
        background-color: #c6168d;
        background-image: -webkit-linear-gradient(top, #c6168d 0%, #92278f 100%);
        background-image: linear-gradient(to bottom, #c6168d 0%, #92278f 100%);
      
    }
    nav.blue .menu > li > a {
        background-color: #00aeef;
        background-image: -webkit-linear-gradient(top, #00aeef 0%, #0089d0 100%);
        background-image: linear-gradient(to bottom, #00aeef 0%, #0089d0 100%);
        border-left-color: #156FA6;
        border-right-color: #40A2DB;
    }
    nav.blue .menu > li > a:hover,
    nav.blue .menu > li > a:focus,
    nav.blue .menu > li > a:active {
        border-left-color: #412465;
        border-right-color: #715497;
        background-image: none;
    }
    nav.blue .menu > li > a.active {
        border-left-color: #0F4982;
        border-right-color: #3C79B4;
        background-image: none;
    }
    /* green */
    nav.green {
        background-color: #00aeef;
        background-image: -webkit-linear-gradient(top, #00aeef 0%, #0089d0 100%);
        background-image: linear-gradient(to bottom, #00aeef 0%, #0089d0 100%);
      
    }
    nav.green .menu > li > a {
        background-color: #20bdbe;
        background-image: -webkit-linear-gradient(top, #20bdbe 0%, #01a490 100%);
        background-image: linear-gradient(to bottom, #20bdbe 0%, #01a490 100%);
        border-left-color: #218481;
        border-right-color: #4FB9B5;
    }
    nav.green .menu > li > a:hover,
    nav.green .menu > li > a:focus,
    nav.green .menu > li > a:active {
        border-left-color: #0E417B;
        border-right-color: #3C75B1;
        background-image: none;
    }
    nav.green .menu > li > a.active {
        border-left-color: #0D4343;
        border-right-color: #3A7776;
        background-image: none;
    }
    /* orange */
    nav.orange {
        background-color: #20bdbe;
        background-image: -webkit-linear-gradient(top, #20bdbe 0%, #01a490 100%);
        background-image: linear-gradient(to bottom, #20bdbe 0%, #01a490 100%);
      
    }
    nav.orange .menu > li > a {
        background-color: #fcaf17;
        background-image: -webkit-linear-gradient(top, #fcaf17 0%, #f47920 100%);
        background-image: linear-gradient(to bottom, #fcaf17 0%, #f47920 100%);
        border-left-color: #C17324;
        border-right-color: #F7A550;
    }
    nav.orange .menu > li > a:hover,
    nav.orange .menu > li > a:focus,
    nav.orange .menu > li > a:active {
        border-left-color: #0D4343;
        border-right-color: #3A7776;
        background-image: none;
    }
    nav.orange .menu > li > a.active {
        border-left-color: #A43923;
        border-right-color: #D76850;
        background-image: none;
    }
}