/*
 * User Interface Toolbar - Pure CSS
 *
 * @author: Francisco Neves
 */


body > ul
{
    list-style: none;
    float: left;
}





/* ==== General Styling ==== */
/** BG Positions */
.bg-left
{
    background-position: left;
}

/** Border-radius */
.radius-2
{
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}

/** Iconize */
.iconize-12
{
    min-height: 12px;
    min-width: 12px;
    padding-left: 20px;
    background-repeat: no-repeat;
}

/* ==== Buttons ==== */
.ui-button
{
    cursor: pointer;
}

    input.ui-button, .ui-button .ui-button-content
    {
        display: table;
        padding: 10px 16px;
    }

    /* Button Gradient Colors */
    .ui-button.grey-gradient
    {
        border: 1px solid #C3C3C3;
        background: #FCFCFC;
        background: linear-gradient(top bottom, #FCFCFC 0%, #F1F1F1 100%);
        background: -moz-linear-gradient(top, #FCFCFC 0%, #F1F1F1 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FCFCFC), color-stop(100%, #F1F1F1));
        background: -webkit-linear-gradient(top, #F8F8F8 0%, #E8E8E8 100%);
        background: -o-linear-gradient(top, #FCFCFC 0%, #F1F1F1 100%);
        background: -ms-linear-gradient(top, #FCFCFC 0%, #F1F1F1 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#FCFCFC', endColorstr = '#F1F1F1', GradientType = 0);
        zoom: 1;
    }

        .ui-button.grey-gradient:hover, .ui-button.grey-gradient:active
        {
            background: #E8E8E8;
            background: linear-gradient(top bottom, #FBFBFB 0%, #E8E8E8 100%);
            background: -moz-linear-gradient(top, #FBFBFB 0%, #E8E8E8 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FBFBFB), color-stop(100%, #E8E8E8));
            background: -webkit-linear-gradient(top, #FBFBFB 0%, #E8E8E8 100%);
            background: -o-linear-gradient(top, #FBFBFB 0%, #E8E8E8 100%);
            background: -ms-linear-gradient(top, #FBFBFB 0%, #E8E8E8 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#E8E8E8',GradientType=0 );
            zoom: 1;
        }

        .ui-button.grey-gradient:active
        {
            box-shadow: 0 0 5px #E2E2E2 inset;
            -webkit-box-shadow: 0 0 5px #E2E2E2 inset;
            -moz-box-shadow: 0 0 5px #E2E2E2 inset;
        }

/* ==== Button Toolbar ==== */
ul.ui-toolbar
{
    display: table;
    list-style: none;
    margin: 0;
    padding: 0;
}

    ul.ui-toolbar > li
    {
        float: left;
        cursor: pointer;
    }

        ul.ui-toolbar > li.ui-button
        {
            border-right-width: 0px;
        }

            ul.ui-toolbar > li.ui-button:last-child
            {
                border-right-width: 1px;
                cursor: pointer;
            }

            /* First & Last Child with Border */
            ul.ui-toolbar > li.ui-button:first-child
            {
                border-radius: 2px 0 0 2px;
                -moz-border-radius: 2px 0 0 2px;
                -webkit-border-radius: 2px 0 0 2px;
            }

            ul.ui-toolbar > li.ui-button:last-child
            {
                border-radius: 0 2px 2px 0;
                -moz-border-radius: 0 2px 2px 0;
                -webkit-border-radius: 0 2px 2px 0;
            }

    /* With Drop Button */
    ul.ui-toolbar li.has-drop
    {
        position: relative !important;
    }

        ul.ui-toolbar li.has-drop:hover
        {
            box-shadow: 0 0 5px #E2E2E2 inset;
            -webkit-box-shadow: 0 0 5px #E2E2E2 inset;
            -moz-box-shadow: 0 0 5px #E2E2E2 inset;
        }

            ul.ui-toolbar li.has-drop:hover > ul
            {
                display: table;
                margin: 0;
                padding: 0;
            }

        ul.ui-toolbar li.has-drop span.arrow
        {
            display: inline-block;
            width: 0;
            height: 0;
            vertical-align: center;
            padding-top: 1px;
            border-top: 4px solid black;
            border-right: 4px solid transparent;
            border-left: 4px solid transparent;
            content: "";
            opacity: 0.6;
        }

        ul.ui-toolbar li.has-drop ul
        {
            display: none;
            list-style: none;
            position: absolute;
            border: 1px solid #C3C3C3;
            z-index: 5;
            min-width: 160px;
        }

            ul.ui-toolbar li.has-drop ul.right-dropdown
            {
                right: 1px;
            }

            ul.ui-toolbar li.has-drop ul.left-dropdown
            {
                left: 1px;
            }

            ul.ui-toolbar li.has-drop ul > li
            {
                display: table;
                width: 100%;
            }

                ul.ui-toolbar li.has-drop ul > li a
                {
                    display: table;
                    width: 100%;
                    padding: 10px 10px;
                    border-bottom: 1px solid #E4E4E4;
                    border-top: 1px solid white;
                    background: #FCFCFC;
                    background: -moz-linear-gradient(top, #fcfcfc 0%, #f1f1f1 100%);
                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#f1f1f1));
                    background: -webkit-linear-gradient(top, #fcfcfc 0%,#f1f1f1 100%);
                    background: -o-linear-gradient(top, #fcfcfc 0%,#f1f1f1 100%);
                    background: -ms-linear-gradient(top, #fcfcfc 0%,#f1f1f1 100%);
                    background: linear-gradient(top, #fcfcfc 0%,#f1f1f1 100%);
                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f1f1f1',GradientType=0 );
                    box-sizing: border-box;
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    -ms-box-sizing: border-box;
                }

                    ul.ui-toolbar li.has-drop ul > li a:hover
                    {
                        background: #F5F5F5;
                    }