﻿.widgetContainer {
    position: fixed;
    top: -5px;
    right: 5px;
    z-index: 200;
}

#widget {
    -webkit-box-shadow: 0 5px 5px rgba(2, 2, 2, .25);
    -o-box-shadow: 0 5px 5px rgba(2, 2, 2, .25);
    -moz-box-shadow: 0 5px 5px rgba(2, 2, 2, .25);
    -ms-box-shadow: 0 5px 5px rgba(2, 2, 2, .25);
    box-shadow: 0 5px 5px rgba(2, 2, 2, .25);
}

    #widget > ul {
        display: table-cell;
        position: relative;
    }

    #widget, #widget ul, #widget ul li, #widget ul li a {
        padding: 0;
        margin: 0;
        line-height: 1;
        font-family: 'Source Sans Pro', sans-serif;
        font-weight: bold;
        font-size: 11pt;
        color: white;
        /*-webkit-transition: all ease .1s;
    -o-transition: all ease .1s;
    -moz-transition: all ease .1s;
    -ms-transition: all ease .1s;
    transition: all ease .1s;*/
    }

        #widget:before, #widget:after, #widget > ul:before, #widget > ul:after {
            content: '';
            display: table;
        }


        #widget:after, #widget > ul:after {
            clear: both;
        }

        #widget a {
            text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
        }

        #widget ul {
            background: #828282;
            border-radius: 3px;
            border: 1px solid #666;
            -webkit-box-shadow: 0 1px 2px rgba(2, 2, 2, .25), inset 0 1px 1px rgba(255, 255, 255, .15);
            -o-box-shadow: 0 1px 2px rgba(2, 2, 2, .25), inset 0 1px 1px rgba(255, 255, 255, .15);
            -moz-box-shadow: 0 1px 2px rgba(2, 2, 2, .25), inset 0 1px 1px rgba(255, 255, 255, .15);
            -ms-box-shadow: 0 1px 2px rgba(2, 2, 2, .25), inset 0 1px 1px rgba(255, 255, 255, .15);
            box-shadow: 0 1px 2px rgba(2, 2, 2, .25), inset 0 1px 1px rgba(255, 255, 255, .15);
        }

            #widget ul.help {
                background-color: #008de5;
            }

            #widget ul > li {
                float: right;
                list-style: none;
            }

                #widget ul > li > a.first {
                    display: block;
                    text-decoration: none;
                    padding: 5px 7px;
                    position: relative;
                    background: url(../images/gear.png) top left no-repeat;
                    padding-left: 35px;
                    line-height: 24px;
                    font-size: 1.1em;
                }

                    #widget ul > li > a.first:hover {
                        background: #a4a4a4;
                        background: url(../images/gear.png) top left no-repeat;
                        -webkit-box-shadow: inset 0 0 1px #666;
                        -o-box-shadow: inset 0 0 1px #666;
                        -moz-box-shadow: inset 0 0 1px #666;
                        -ms-box-shadow: inset 0 0 1px #666;
                        box-shadow: inset 0 0 1px #666;
                    }

                #widget ul > li > a.help {
                    display: block;
                    text-decoration: none;
                    background: url(../images/help.png) center left no-repeat;
                    background-size: 24px;
                    padding: 5px 7px;
                    position: relative;
                    padding-left: 35px;
                    line-height: 24px;
                    font-size: 1.1em;
                }

                    #widget ul > li > a.help:hover {
                        background: url(../images/help.png) center left no-repeat;
                        background-size: 24px;
                        -webkit-box-shadow: inset 0 0 1px #666;
                        -o-box-shadow: inset 0 0 1px #666;
                        -moz-box-shadow: inset 0 0 1px #666;
                        -ms-box-shadow: inset 0 0 1px #666;
                        box-shadow: inset 0 0 1px #666;
                    }

                #widget ul > li > a.tech {
                    display: block;
                    text-decoration: none;
                    padding: 5px 7px;
                    position: relative;
                    line-height: 24px;
                    font-size: 1.1em;
                }

                    #widget ul > li > a.tech:hover {
                        background: transparent;
                        -webkit-box-shadow: inset 0 0 1px #666;
                        -o-box-shadow: inset 0 0 1px #666;
                        -moz-box-shadow: inset 0 0 1px #666;
                        -ms-box-shadow: inset 0 0 1px #666;
                        box-shadow: inset 0 0 1px #666;
                    }


                #widget ul > li > a {
                    display: block;
                    text-decoration: none;
                    padding: 7px 10px;
                    position: relative;
                    font-size: .9em;
                    line-height: 18px;
                }

                    #widget ul > li > a:hover {
                        background: #a4a4a4;
                        -webkit-box-shadow: inset 0 0 1px #666;
                        -o-box-shadow: inset 0 0 1px #666;
                        -moz-box-shadow: inset 0 0 1px #666;
                        -ms-box-shadow: inset 0 0 1px #666;
                        box-shadow: inset 0 0 1px #666;
                        /*-webkit-transition: all ease .1s;
                            -o-transition: all ease .1s;
                            -moz-transition: all ease .1s;
                            -ms-transition: all ease .1s;
                            transition: all ease .1s;*/
                    }

                        #widget ul > li > a:hover:before {
                            content: '';
                            z-index: 2;
                            position: absolute;
                            border: 1px solid white;
                            border-top: 0;
                            border-bottom: 0;
                            border-right: 0;
                            width: 100%;
                            height: 100%;
                            top: 0;
                            left: -1px;
                            opacity: .2;
                        }

                        #widget ul > li > a:hover:after {
                            content: '';
                            z-index: 2;
                            position: absolute;
                            border: 1px solid white;
                            border-top: 0;
                            border-bottom: 0;
                            border-left: 0;
                            width: 100%;
                            height: 100%;
                            top: 0;
                            right: -1px;
                            opacity: .2;
                        }

        #widget > ul > li > ul {
            opacity: 0;
            visibility: hidden;
            position: absolute;
        }

        #widget > ul > li:hover > ul {
            opacity: 1;
            visibility: visible;
            position: absolute;
            border-radius: 0 0 3px 3px;
            -webkit-box-shadow: none;
            -o-box-shadow: none;
            -moz-box-shadow: none;
            -ms-box-shadow: none;
            box-shadow: none;
        }

        #widget > ul > li > ul {
            position: absolute;
            white-space: nowrap;
            right: 0px;
        }

            #widget > ul > li > ul > li {
                float: none;
                position: relative;
            }

                #widget > ul > li > ul > li > ul {
                    opacity: 0;
                    visibility: hidden;
                    position: absolute;
                }

                #widget > ul > li > ul > li:hover > ul {
                    opacity: 1;
                    visibility: visible;
                    position: absolute;
                }

                #widget > ul > li > ul > li > ul {
                    left: 202px;
                    top: 1px;
                    width: 200px;
                }

                    #widget > ul > li > ul > li > ul > li {
                        float: none;
                    }
