/* --------------------------------------------------------------------------
 * Foundstrap  : Theme Switcher
 *  
 * file        : theme-switcher.css
 * Version     : 1.0
 * Author      : foundstrap - team
 * Author URI  : http://foundstrap.com
 *
 * Foundstrap Copyright 2015 All Rights Reserved.
 * -------------------------------------------------------------------------- */

#toggle-switcher {
    display: block;
    width: 50px;
    height: 50px;
    right: 192px;
    top: -1px;
    background: #fff;
    position: absolute;
    text-align: center;
    cursor: pointer;
    border: 1px solid #e1e1e1;
    border-right: none;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-topleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out
}
#toggle-switcher i {
    font-size: 26px;
    line-height: 48px;
    color: #169fe6;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out
}
#toggle-switcher:hover {
    background: #fff
}
#toggle-switcher:hover i {
    color: #42b3ed
}
#theme-switcher {
    position: fixed;
    z-index: 999;
    top: 100px;
    right: -194px;
    min-width: 194px;
    background: #fff;
    margin-right: -1px;
    border: 1px solid #e1e1e1;
    -webkit-box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.15);
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-left-radius: 5px
}
#theme-switcher .heading-switcher {
    height: 48px;
    display: block;
    padding: 13px;
    text-align: center;
    position: relative
}
#theme-switcher .heading-switcher h5 {
    color: #adadad;
    margin: 0
}
#theme-switcher .separator-switcher {
    margin: 10px 0
}
#theme-switcher .container-switcher {
    padding: 0px 10px 20px
}
#theme-switcher .footer-switcher {
    padding: 0px 10px 20px
}
#theme-switcher .pattern-theme {
    margin-top: 15px;
    display: none
}
#theme-switcher .option-frame a {
    text-align: center;
    min-width: 55px;
    display: inline-block;
    background: #f7f7f7;
    padding: 5px 15px;
    font-size: 14px;
    margin-right: 10px;
    color: inherit;
    -webkit-border-radius: 5px;
    border-radius: 5px
}
#theme-switcher .option-frame a.active,
#theme-switcher .option-frame a:hover {
    background: #169fe6;
    color: #fff
}
#theme-switcher .reset {
    text-align: center;
    min-width: 55px;
    display: block;
    background: #169fe6;
    color: #fff;
    padding: 5px 15px;
    font-size: 14px;
    -webkit-border-radius: 5px;
    border-radius: 5px
}
#theme-switcher h4 {
    display: block;
    margin: 0;
    font-size: 16px;
    padding: 0;
    font-family: Arial, "sans-serif";
    font-weight: bold;
    text-transform: uppercase
}
#theme-switcher h5 {
    font-size: 17px;
    margin-bottom: 15px
}
#theme-switcher .form-control {
    height: 32px;
    padding: 0 10px;
    font-size: 14px
}
#theme-switcher .option a {
    text-align: center;
    min-width: 55px;
    display: inline-block;
    background: #f7f7f7;
    padding: 5px 15px;
    font-size: 14px;
    margin-right: 10px;
    color: inherit
}
#theme-switcher .option a.active,
#theme-switcher .option a:hover {
    background: #d4d4d4, #e1e1e1;
    color: #fff
}
#theme-switcher .reset {
    text-align: center;
    min-width: 55px;
    display: block;
    background: #d4d4d4, #e1e1e1;
    color: #fff;
    padding: 5px 15px;
    font-size: 14px
}
#theme-switcher ul {
    margin-top: 0;
    margin-bottom: 10px
}
#theme-switcher ul li {
    padding: 0 5px 10px
}
#theme-switcher span {
    display: block;
    height: 33px;
    cursor: pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
    box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out
}
#theme-switcher span:hover,
#theme-switcher span:focus,
#theme-switcher span.active {
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75)
}
#theme-switcher #default {
    background: #169fe6
}
#theme-switcher #grey {
    background: #7f8c8d
}
#theme-switcher #green {
    background: #87B822
}
#theme-switcher #yellow {
    background: #F0C42C
}
#theme-switcher #red {
    background: #E75B4C
}
#theme-switcher #orange {
    background: #F28424
}
#theme-switcher #purple {
    background: #a66bbe
}
#theme-switcher #emerald {
    background: #50c878
}
#theme-switcher #broken-noise {
    background: url(../images/pattern/broken-noise.png) repeat repeat
}
#theme-switcher #gplay {
    background: url(../images/pattern/gplay.png) repeat repeat
}
#theme-switcher #shattered-dark {
    background: url(../images/pattern/shattered-dark.png) repeat repeat
}
#theme-switcher #graphy {
    background: url(../images/pattern/graphy.png) repeat repeat
}