/**
 * Left sidebar addon
 *
 * @package    BardCanvas
 * @subpackage Responsive Template
 * @author     Alejandro Caballero - lava.caballero@gmail.com
 */

/* By default, the sidebar is visible */

#left_sidebar                   { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; line-height: 16px;
                                  width: 150px; float: left; padding-top: 20px; }
#content                        { width: calc(100% - 150px); float: left; }

#left_sidebar .group            { padding: 5px 0; margin: 0 0 20px 0; background-color: white;
                                  border: 1px solid #E5E5E5; border-radius: 3px; }
#left_sidebar .group .title     { display: block; margin: 0 0 0 2px; padding: 2px 6px; color: darkslategray;
                                  font-weight: bold; font-size: 8pt; line-height: normal; text-transform: uppercase; }

#left_sidebar .item             { display: block; margin: 0 4px 0 10px; padding: 4px 6px; }
#left_sidebar .item.selected    { background-color: #BDD8F2; }
#left_sidebar .item.highlighted { background-color: rgba(255, 255, 0, 0.25); }
#left_sidebar .item.important   { color: #990d0d; }
#left_sidebar .item.critical    { background-color: rgba(128, 0, 0, 0.25); border: 1px solid #990d0d; }

#left_sidebar a                                    ,
#left_sidebar .pseudo_link                         { text-decoration: none; color: grey; }
#left_sidebar a.item:hover                         ,
#left_sidebar .pseudo_link:hover                   { background-color: #DDEBF8; }
#left_sidebar a.item.highlighted:hover             ,
#left_sidebar  .item.pseudo_link.highlighted:hover { background-color: rgba(255, 255, 0, 0.51); }
#left_sidebar a.item.critical:hover                ,
#left_sidebar  .item.pseudo_link.critical:hover    { color: white; background-color: rgba(128, 0, 0, 0.51); }


#left_sidebar .group .title:empty { display: none; }

#header .main_menu_item#left_sidebar_trigger { cursor: pointer; display: none; }

/* We'll hide it for small displays (less than 480px wide) */

@media all and (min-width: 100px) and (max-width: 480px)
{
    #left_sidebar { display: none; }
    #content      { float: none; width: 100%; }
    
    #header .main_menu_item#left_sidebar_trigger { display: inline-block; }
}

/* Overrides for the toggler */

body[data-left-sidebar-visible="true"] #left_sidebar {
    background-color: silver;
    display: block; margin-bottom: 10px; padding-right: 10px; width: 100%;
    position: relative; z-index: 100;
}

body[data-left-sidebar-visible="true"] #left_sidebar .group {
    margin-left: 10px;
}

/* The trigger is hidden when the main menu is expanded on small devices. */
#header .main_menu_item#left_sidebar_trigger.visible { display: none; }