<div id="style_switcher" ng-controller="styleSwitcher" ng-class="{ 'switcher_open': styleSwitcherToggle}">
    <a class="switcher_toggle" ng-click="toggleStyleSwitcher()"><i class="icon_cog"></i></a>
    <div class="style_items">
        <div class="heading_b"><span class="heading_text">Top Bar Color</span></div>
        <ul class="clearfix" id="theme_switch">
            <li ng-click="topBarColor('style_0')" class="sw_tb_style_0" ng-class="{'style_active': tbStyleActive == 'style_0'}"></li>
            <li ng-click="topBarColor('style_1')" class="sw_tb_style_1" ng-class="{'style_active': tbStyleActive == 'style_1'}"></li>
            <li ng-click="topBarColor('style_2')" class="sw_tb_style_2" ng-class="{'style_active': tbStyleActive == 'style_2'}"></li>
            <li ng-click="topBarColor('style_3')" class="sw_tb_style_3" ng-class="{'style_active': tbStyleActive == 'style_3'}"></li>
            <li ng-click="topBarColor('style_4')" class="sw_tb_style_4" ng-class="{'style_active': tbStyleActive == 'style_4'}"></li>
            <li ng-click="topBarColor('style_5')" class="sw_tb_style_5" ng-class="{'style_active': tbStyleActive == 'style_5'}"></li>
            <li ng-click="topBarColor('style_6')" class="sw_tb_style_6" ng-class="{'style_active': tbStyleActive == 'style_6'}"></li>
            <li ng-click="topBarColor('style_7')" class="sw_tb_style_7" ng-class="{'style_active': tbStyleActive == 'style_7'}"></li>
            <li ng-click="topBarColor('style_8')" class="sw_tb_style_8" ng-class="{'style_active': tbStyleActive == 'style_8'}"></li>
            <li ng-click="topBarColor('style_9')" class="sw_tb_style_9" ng-class="{'style_active': tbStyleActive == 'style_9'}"></li>
            <li ng-click="topBarColor('style_10')" class="sw_tb_style_10" ng-class="{'style_active': tbStyleActive == 'style_10'}"></li>
            <li ng-click="topBarColor('style_11')" class="sw_tb_style_11" ng-class="{'style_active': tbStyleActive == 'style_11'}"></li>
            <li ng-click="topBarColor('style_12')" class="sw_tb_style_12" ng-class="{'style_active': tbStyleActive == 'style_12'}"></li>
            <li ng-click="topBarColor('style_13')" class="sw_tb_style_13" ng-class="{'style_active': tbStyleActive == 'style_13'}"></li>
            <li ng-click="topBarColor('style_14')" class="sw_tb_style_14" ng-class="{'style_active': tbStyleActive == 'style_14'}"></li>
        </ul>
        <hr/>
    </div>
    <div class="clearfix hidden-sm hidden-md hidden-xs sepH_b">
        <label>Fixed layout</label>
        <div class="pull-right"><input type="checkbox" id="fixed_layout_switch" ng-init="switch_layout_fixed = fixedLayout" class="js-switch mini-switch" ng-model="switch_layout_fixed" ui-switch></div>
    </div>
    <div class="style_items hidden-sm hidden-md hidden-xs" id="fixed_layout_bg_switch" ng-show="fixedLayout" ng-hide="!fixedLayout">
        <hr/>
        <div class="heading_b"><span class="heading_text">Background</span></div>
        <ul class="clearfix">
            <li ng-click="siteBg('bg_0')" class="sw_bg_0" ng-class="{'style_active': bgActive == 'bg_0'}"></li>
            <li ng-click="siteBg('bg_1')" class="sw_bg_1" ng-class="{'style_active': bgActive == 'bg_1'}"></li>
            <li ng-click="siteBg('bg_2')" class="sw_bg_2" ng-class="{'style_active': bgActive == 'bg_2'}"></li>
            <li ng-click="siteBg('bg_3')" class="sw_bg_3" ng-class="{'style_active': bgActive == 'bg_3'}"></li>
            <li ng-click="siteBg('bg_4')" class="sw_bg_4" ng-class="{'style_active': bgActive == 'bg_4'}"></li>
            <li ng-click="siteBg('bg_5')" class="sw_bg_5" ng-class="{'style_active': bgActive == 'bg_5'}"></li>
            <li ng-click="siteBg('bg_6')" class="sw_bg_6" ng-class="{'style_active': bgActive == 'bg_6'}"></li>
            <li ng-click="siteBg('bg_7')" class="sw_bg_7" ng-class="{'style_active': bgActive == 'bg_7'}"></li>
        </ul>
        <hr/>
    </div>
    <div class="clearfix sepH_b">
        <label>Top Menu</label>
        <div class="pull-right"><input type="checkbox" id="top_menu_switch" ng-init="switch_menu_top = topMenuAct" class="js-switch mini-switch" ng-model="switch_menu_top" ui-switch></div>
    </div>
    <div class="clearfix sepH_b">
        <label>Hide Breadcrumbs</label>
        <div class="pull-right"><input type="checkbox" id="breadcrumbs_switch" class="js-switch mini-switch" ng-model="switch_breadcrumbs_hide" ui-switch></div>
    </div>
    <div class="text-center sepH_a">
        <button ng-click="showCSS()" class="btn btn-default btn-xs btn-outline" type="button">Show CSS</button>
    </div>
</div>