@charset "UTF-8";

.Accordion {
    overflow: hidden;
    width: 160px;
    background: #f36523;
}


.AccordionPanel {
    margin: 0px;
    padding: 0px;
}
.AccordionPanelTab {
    
    font: bold 12px/25px Arial;
    color: #fff;
    margin: 0px;
    padding: 0px 10px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
}

.AccordionPanelContent {
    background: #fff;
    overflow: auto;
    margin: 0px;
    padding: 0px;
    height: 200px;
}

.AccordionPanelOpen .AccordionPanelTab {
    background-color: #6d6e72;
}
.AccordionPanelContent ul{margin: 0px 0px;padding: 5px 0px;display: block;}

.AccordionPanelContent ul li{display: block;margin: 0;padding: 0px 10px;}
.AccordionPanelContent ul li a{display: block;font: normal 12px/20px Arial;color: #000;text-decoration: none} 
.AccordionPanelContent ul li:hover{background: #eeeeee}
/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.AccordionPanelTabHover {
    background: #6d6e72
}
.AccordionPanelOpen .AccordionPanelTabHover {
    /*color: #555555;*/
}

/* This is an example of how to change the appearance of all the panel tabs when the
 * Accordion has focus. The "AccordionFocused" class is programatically added and removed
 * whenever the Accordion gains or loses keyboard focus.
 */
.AccordionFocused .AccordionPanelTab {
    /*background-color: #3399FF;*/
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open when the Accordion has focus.
 */
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
    /*background-color: #33CCFF;*/
}
/* Rules for Printing */

@media print {

    .Accordion {
        overflow: visible !important;
    }

    .AccordionPanelContent {
        display: block !important;
        overflow: visible !important;
        height: auto !important;
    }
}