source: trunk/web/style/transmission/common.scss @ 13755

@mixin verticalGradient($topColor, $bottomColor) {
        background-color: mix($topColor, $bottomColor);
        background-image: -webkit-gradient(linear, left top, left bottom, from($topColor), to($bottomColor)); 
        background-image: -webkit-linear-gradient(top, $topColor, $bottomColor); 
        background-image:    -moz-linear-gradient(top, $topColor, $bottomColor); 
        background-image:     -ms-linear-gradient(top, $topColor, $bottomColor); 
        background-image:      -o-linear-gradient(top, $topColor, $bottomColor); 
        background-image:         linear-gradient(top, $topColor, $bottomColor);
}

@mixin imageOnVerticalGradient($src, $topColor, $bottomColor) {
        background-color: mix($topColor, $bottomColor);
        background-image: url($src); /* fallback */
        background-image: url($src), -webkit-gradient(linear, left top, left bottom, from($topColor), to($bottomColor)); /* Saf4+, Chrome */
        background-image: url($src), -webkit-linear-gradient(top, $topColor, $bottomColor); /* Chrome 10+, Saf5.1+ */
        background-image: url($src), -moz-linear-gradient(top, $topColor, $bottomColor); /* FF3.6+ */
        background-image: url($src), -ms-linear-gradient(top, $topColor, $bottomColor); /* IE10 */
        background-image: url($src), -o-linear-gradient(top, $topColor, $bottomColor); /* Opera 11.10+ */
        background-position: center;
        background-repeat: no-repeat;
}

@mixin buttonImage($image-url, $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom) {
        @include imageOnVerticalGradient($image-url, $idle-color-top, $idle-color-bottom);
        &:active, &.selected {
                @include imageOnVerticalGradient($image-url, $active-color-top, $active-color-bottom);
        }
}

$nonselected-gradient-top: white;
$nonselected-gradient-bottom: #BBB;
$selection-color: #cdcdff;
$selected-gradient-top: $selection-color;
$selected-gradient-bottom: white;

@mixin button {
        cursor: pointer;
        -moz-user-select: none;
        -webkit-user-select: none;
        display: inline-block;
        border-style: solid;
        border-color: #aaa;
        border-width: 1px;
        padding: 3px;
}

@mixin roundedBox($radius) {
        -moz-border-radius: $radius;
        border-radius: $radius;
}

@mixin leftRoundedBox($radius) {
        -moz-border-radius-topleft: $radius;
        -moz-border-radius-bottomleft: $radius;
        border-top-left-radius: $radius;
        border-bottom-left-radius: $radius;
}
@mixin rightRoundedBox($radius) {
        -moz-border-radius-topright: $radius;
        -moz-border-radius-bottomright: $radius;
        border-top-right-radius: $radius;
        border-bottom-right-radius: $radius;
}

@mixin roundedButton($radius) {
        @include button;
        @include roundedBox($radius);
}

/*--------------------------------------
 *
 * G L O B A L
 *
 *--------------------------------------*/

html {
        margin: 0;
        padding: 0;
        height: 100%;
}

body {
        font: 62.5% "lucida grande", Tahoma, Verdana, Arial, Helvetica, sans-serif; /* Resets 1em to 10px */
        color: #222;/* !important; */
        background: #FFF;
        text-align: center;
        margin: 0 0 30px;
        overflow: hidden;
        img { border: none; }
        a { outline: 0; }
}

/***
****
****  ABOUT DIALOG
****
***/

#about-dialog
{
        > * {
                text-align: center;
        }
        > #about-logo {
                background: transparent url('images/logo.png') top left no-repeat;
                width: 64px;
                height: 64px;
                margin-left: 100px;
        }
        > #about-title {
                font-size: 1.3em;
                font-weight: bold;
        }
}

/***
****
****  TOOLBAR
****
***/
$toolbar-gradient-top: #ddd;
$toolbar-gradient-bottom: #bbb;
$toolbar-height: 36px;

div#toolbar
{
        width: 100%;
        height: $toolbar-height;
        margin: 0px;
        padding: 2px;
        border-bottom: 1px solid #AAA;
        @include verticalGradient($toolbar-gradient-top, $toolbar-gradient-bottom);

        $idle-color-top: $nonselected-gradient-top;
        $idle-color-bottom: $nonselected-gradient-bottom;
        $active-color-top: $selected-gradient-top;
        $active-color-bottom: $selected-gradient-bottom;

        > * {
                @include button;
                width: 34px;
                height: 34px;
                float: left;
                border: none;
                padding: 0px 3px;
        }

        >div#toolbar-separator {
                height: 25px;
                margin-top: 8px;
                margin-bottom: 5px;
                border-left: 1px solid #aaa;
                width: 3px;
        }

        > div#toolbar-open {
                background: url('images/toolbar-folder.png') no-repeat;
                margin-left: 4px;
        }
        > div#toolbar-remove {
                background: url('images/toolbar-close.png') no-repeat;
        }
        > div#toolbar-start {
                background: url('images/toolbar-start.png') no-repeat;
        }
        > div#toolbar-pause {
                background: url('images/toolbar-pause.png') no-repeat;
        }
        > div#toolbar-start-all {
                background: url('images/toolbar-start-all.png') no-repeat;
        }
        > div#toolbar-pause-all {
                background: url('images/toolbar-pause-all.png') no-repeat;
        }

        > div#toolbar-inspector {
                background: url('images/toolbar-info.png') no-repeat;
                float: right;
                margin-right: 4px;
        }

        > *.disabled {
                opacity: 0.25;
        }
}

/***
****
****  STATUSBAR
****
***/

$statusbar-gradient-top: #ddd;
$statusbar-gradient-bottom: #bbb;
$statusbar-height: 26px;

#statusbar
{
        height: $statusbar-height;
        width: 100%;
        border-bottom: 1px solid #AAA;
        overflow: hidden;
        position: relative;
        @include verticalGradient($statusbar-gradient-top, $statusbar-gradient-bottom);

        #filter
        {
                float: left;
                margin-left: 5px;

                input#torrent_search {
                        height: 18px;
                        width: 100px;
                        border-radius: 6px;
                        &.blur { color: #999; }
                }

                #filter-count { margin-left: 8px; }
        }

        #speed-info
        {
                float: right;
                margin-top: 5px;
                margin-right: 10px;

                * {
                        display: inline-block;
                }

                #speed-up-icon {
                        margin-left: 8px;
                        width: 8px;
                        height: 8px;
                        background: url('images/arrow-up.png') bottom no-repeat;
                }

                #speed-dn-icon {
                        width: 8px;
                        height: 8px;
                        background: url('images/arrow-down.png') bottom no-repeat;
                }

                #speed-up-container, #speed-dn-container {
                        display: inline;
                }
        }
}

/***
****
****  TORRENT CONTAINER
****
***/

$torrent-container-top: $toolbar-height + $statusbar-height + 6px;

div#torrent_container {
        position: fixed;
        top: $torrent-container-top;
        bottom: 22px;
        right: 0px;
        left: 0px;
        padding: 0px;
        margin: 0px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
}

ul.torrent_list
{
        width: 100%;
        margin: 0;
        padding: 0;
        text-align: left;
        cursor: pointer;

        li.torrent
        {
                border-bottom: 1px solid #ccc;
                padding: 4px 30px 5px 14px;
                color: #666;
                background-color: white;

                &.compact { padding: 4px; }
                &.even { background-color: #F7F7F7; }
                &.selected { background-color: $selection-color; }
                &.compact { div.torrent_name { color: black; } }

                // start-stop button
                a {
                        float: right;
                        position: relative;
                        right: -22px;
                        top: 1px;

                        img {
                                position: relative;
                                right: -10px;
                        }

                        div {
                                background: url('images/buttons/torrent_buttons.png');
                                height: 14px;
                                width: 14px;
                        }
        
                        div.torrent_pause { background-position: left top; }
                        div.torrent_resume { background-position: center top; }
        
                        &:active {
                                div.torrent_pause { background-position: left bottom; }
                                div.torrent_resume { background-position: center bottom; }
                        }
                        &:hover {
                                div.torrent_pause { background-position: left center; }
                                div.torrent_resume { background-position: center center; }
                        }
                }

                div.torrent_name
                {
                        font-size: 1.3em;
                        font-weight: bold;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        color: #222;
                        margin-top: 2px;
                        margin-bottom: 2px;

                        &.compact { font-size: 1.0em; font-weight: normal; }
                        &.paused { font-weight: normal; color: #777; }
                }

                div.torrent_progress_details,
                div.torrent_peer_details {
                        clear: left;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                }

                div.torrent_progress_details.error,
                div.torrent_peer_details.error {
                        color: #F00;
                }

                &.selected div.torrent_progress_details.error,
                &.selected div.torrent_peer_details.error {
                        color: #FFF;
                }
        }

        /**
         * Progressbar
         *
         * Each progressbar has three elemens: a parent container and two children,
         * complete and incomplete.
         *
         * The only thing needed to set the progressbar percentage is to set
         * the complete child's width as a percentage. This is because incomplete
         * is pinned to the full width and height of the parent, and complete
         * is pinned to the left side of the parent and has a higher z-index.
         *
         * The progressbar has different colors depending on its state, so there
         * are five 'decorator' classNames: paused, queued, magnet, leeching, seeding.
         */
        div.torrent_progress_bar_container
        {
                height: 10px;
                position: relative;

                &.compact {
                        width: 50px;
                        position: absolute;
                        right: 10px;
                        margin-top: 2px;
                        /*float: right;*/
                }
                &.full {
                        margin-top: 2px;
                        margin-bottom: 5px;
                }
        }
        div.torrent_peer_details.compact
        {
                margin-top: 2px;
                margin-right: 65px; /* leave room on the right for the progressbar */
                float: right; /* pins it next to progressbar & forces torrent_name to ellipsize when it bumps up against this div */
        }
        div.torrent_progress_bar
        {
                height: 100%;
                position: absolute;
                top: 0px;
                left: 0px;
                background-image: url('images/progress.png');
                background-repeat: repeat-x;
                border: 1px solid #888;

                &.complete                   { z-index: 2; }
                &.complete.paused            { background-position: left -30px; border-color: #989898; }
                &.complete.magnet            { background-position: left -20px; border-color: #CFCFCF; }
                &.complete.leeching          { background-position: left   0px; border-color: #3D9DEA; }
                &.complete.leeching.queued   { background-position: left -70px; border-color: #889CA5; }
                &.complete.seeding           { background-position: left -40px; border-color: #269E30; }
                &.complete.seeding.queued    { background-position: left -60px; border-color: #8A998D; }
                &.incomplete                 { z-index: 1; width: 100%; }
                &.incomplete.paused          { background-position: left -20px; border-color: #CFCFCF; }
                &.incomplete.magnet          { background-position: left -50px; border-color: #D47778; }
                &.incomplete.leeching        { background-position: left -20px; border-color: #CFCFCF; }
                &.incomplete.leeching.queued { background-position: left -80px; border-color: #C4C4C4; }
                &.incomplete.seeding         { background-position: left -10px; border-color: #29AD35; }
        }
}

/***
****
****  PREFERENCES
****
***/

#prefs-dialog.ui-tabs .ui-tabs-panel {
        padding: 0px;
        -moz-user-select: none;
        -webkit-user-select: none;
}

.prefs-section
{
        margin: 10px;
        text-align: left;

        > * {
                padding-top: 8px;
                padding-left: 8px;
        }

        .title {
                font-weight: bold;
                font-size: larger;
                padding-left: 0px;
        }

        .row {
                .key {
                        float: left;
                        padding-top: 3px;
                        > * { margin-left: 0px; }
                }
                .value {
                        margin-left: 150px;
                        > * { width: 100%; }
                }
        }

        .checkbox-row {
                > input { margin: 0px; }
                > label { margin-left: 5px; }
        }

        #alternative-speed-limits-title {
                padding-left: 18px;
                background: transparent url('images/blue-turtle.png') no-repeat;
        }
}

/***
****
****  TORRENT INSPECTOR
****
***/

$inspector-width: 570px;

div#torrent_inspector
{
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        text-align: left;
        padding: 15px;
        top: $torrent-container-top;
        position: fixed;
        width: $inspector-width;
        z-index: 5;
        border-left: 1px solid #888;
        bottom: 22px;
        right: 0px;

        $idle-color-top: $nonselected-gradient-top;
        $idle-color-bottom: $nonselected-gradient-bottom;
        $active-color-top: $selected-gradient-top;
        $active-color-bottom: $selected-gradient-bottom;

        #inspector-close
        {
                display: none;
        }

        #inspector-tabs-wrapper
        {
                width: 100%;
                overflow: hidden;
                text-align: center;

                #inspector-tabs
                {
                        $border-radius: 5px;

                        display: inline-block;

                        > * {
                                @include button;
                                width: 30px;
                                height: 20px;
                        }

                        > #inspector-tab-info {
                                @include leftRoundedBox($border-radius);
                                @include buttonImage('images/inspector-info.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
                                border-left-width: 1px;
                        }

                        > #inspector-tab-peers {
                                @include buttonImage('images/inspector-peers.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
                        }

                        > #inspector-tab-trackers {
                                @include buttonImage('images/inspector-trackers.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
                        }

                        > #inspector-tab-files {
                                @include rightRoundedBox($border-radius);
                                @include buttonImage('images/inspector-files.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
                        }
                }
        }

        #inspector_header
        {
                margin-top: 8px;

                #torrent_inspector_name
                {
                        font-weight: bold;
                        font-size: large;
                }
        }

        ul.tier_list
        {
                margin: 2px 0 8px 0;
                width: 100%;
                padding-left: 0px;
                text-align: left;
                display: block;
                cursor: default;
                list-style-type: none;
                list-style: none;
                list-style-image: none;
                clear: both;

                li {
                        overflow: hidden;
                }
                .tracker_activity {
                        float: left;
                        color: #666;
                        width: 330px;
                        display: table;
                        margin-top: 1px;
                }
                .tracker_activity div {
                        padding: 2px;
                }
                table {
                        float: right;
                        color: #666;
                }
                th {
                        text-align: right;
                }
        }

        li.inspector_tracker_entry {
                padding: 3px 0 3px 2px;
                display: block;

                &.odd {
                        background-color: #EEEEEE;
                }
        }

        div.tracker_host {
                font-size: 1.2em;
                font-weight: bold;
                color: #222;
        }

        /* Files Inspector Tab */

        #inspector_file_list {
                padding: 0 0 0 0;
                margin: 0 0 0 0;
                text-align: left;
                cursor: default;
                overflow: hidden;
        }

        #inspector_file_list {
                width: 100%;
                margin: 6px 0 0 0;
                padding-top: 6px;
                padding-bottom: 10px;
                text-align: left;
                display: block;
                cursor: default;
                list-style-type: none;
                list-style: none;
                list-style-image: none;
                clear: both;
        }
        li.inspector_torrent_file_list_entry {
                padding: 3px 0 3px 2px;
                display: block;
                &.skip { color: #666; }
                &.even { background-color: #F7F7F7; }
        }

        div.inspector_torrent_file_list_entry_name {
                font-size: 1.2em;
                color: black; 
                display: inline;
                margin-left: 0px;
        }
        li.inspector_torrent_file_list_entry.skip>.inspector_torrent_file_list_entry_name {
                color: #999;
        }
        div.inspector_torrent_file_list_entry_progress {
                color: #999;
                margin-left: 20px;
        }

        ul.single_file li.inspector_torrent_file_list_entry>.file_wanted_control,
        li.inspector_torrent_file_list_entry.complete>.file_wanted_control {
                cursor: default;
        }
}

/* Peers Inspector Tab */
#inspector_peers_list {
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        text-align: left;
        cursor: default;
        overflow: hidden;

        > div.inspector_group {
                padding-bottom: 0;
                margin-bottom: 0;
        }
}

table.peer_list {
        width: 100%;
        border-collapse: collapse;
        text-align: left;
        cursor: default;
        clear: both;
        table-layout: fixed;

        .encryptedCol { width: 16px; }
        .upCol { width: 70px; }
        .downCol { width: 70px; }
        .percentCol { width: 30px; padding-right: 5px; text-align: right; }
        .statusCol { width: 40px; padding-right: 5px; }
        .addressCol { width: 180px; }
        .clientCol { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

tr.inspector_peer_entry
{
        div.encrypted-peer-cell
        {
                width: 16px;
                height: 16px;
                background: transparent url('images/lock_icon.png') no-repeat;
        }

        &.odd
        {
                background-color: #EEEEEE;
        }
}

/***
****  File Priority Buttons
***/

div.file-priority-radiobox
{
        $border-radius: 5px;

        display: inline;
        float: right;
        margin: 4px;
        margin-top: 2px;

        > * {
                @include button;
                width: 20px;
                height: 12px;
        }

        // We have row after row of these buttons, so the flashy colors used in the inspector tabs look harsh here.
        // Keep the same basic color theme, but look less harsh, by cutting the gradient's color range.
        $idle-color-top:      mix( $nonselected-gradient-top, $nonselected-gradient-bottom, 80% );
        $idle-color-bottom:   mix( $nonselected-gradient-top, $nonselected-gradient-bottom, 20% );
        $active-color-top:    mix( $selected-gradient-top,    $selected-gradient-bottom,    80% );
        $active-color-bottom: mix( $selected-gradient-top,    $selected-gradient-bottom,    20% );

        > div.low {
                @include leftRoundedBox($border-radius);
                @include buttonImage('images/file-priority-low.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
                border-right-width: 0px;
        }

        > div.normal {
                @include buttonImage('images/file-priority-normal.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
        }

        > div.high {
                @include rightRoundedBox($border-radius);
                @include buttonImage('images/file-priority-high.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
                border-left-width: 0px;
        }
}


/****
*****
*****  MAIN WINDOW FOOTER
*****
****/

div.torrent_footer
{
        height: 22px;
        border-top: 1px solid #555;
        bottom: 0;
        position: fixed;
        width: 100%;
        z-index: 3;

        @include verticalGradient($statusbar-gradient-top, $statusbar-gradient-bottom);

        > * {
                float: left;
                margin: 2px 4px;
                width: 18px;
                height: 12px;
                padding: 2px 8px;
                float: left;
                border: 1px solid #888;
                -moz-user-select: none;
                -webkit-user-select: none;
        }

        $idle-color-top: $nonselected-gradient-top;
        $idle-color-bottom: $nonselected-gradient-bottom;
        $active-color-top: $selected-gradient-top;
        $active-color-bottom: $selected-gradient-bottom;

        div.main_container {
                @include roundedBox(5px);
                @include buttonImage('images/settings.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
        }

        #prefs-button {
                @include roundedBox(5px);
                @include buttonImage('images/wrench.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
        }

        #turtle-button {
                @include roundedBox(5px);
                @include buttonImage('images/turtle.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
                &:active, &.selected {
                        @include imageOnVerticalGradient('images/blue-turtle.png', $active-color-top, $active-color-bottom);
                }
        }

        #compact-button {
                @include roundedBox(5px);
                @include buttonImage('images/compact.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
        }
}

/****
*****
*****  DIALOGS
*****
****/

div.dialog_container {
        position: absolute;
        top: 0;
        left: 0px;
        margin: 0px;
        width: 100%;
        height: 100%;
        text-align: center;
        color: black;
        font-size: 1.1em;
}

div.dialog_container div.dialog_window {
        background-color: #eee;
        margin: 0 auto;
        opacity: .95;
        border-top: none;
        text-align: left;
        width: 420px;
        z-index: 10;
        overflow: hidden;
        position: relative;
        -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.7);
        top: 80px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
        div.dialog_container div.dialog_window {
                top: 0;
                margin-top: 71px;
        }
}

div.dialog_container .dialog_logo {
        width: 64px;
        height: 64px;
        margin: 20px 20px 0 20px;
        float: left;
        background: transparent url('images/logo.png') top left no-repeat;
}

div.dialog_container div.dialog_window h2.dialog_heading {
        display: block;
        float: left;
        width: 305px;
        font-size: 1.2em;
        color: black;
        margin-top: 20px;
}

div.dialog_container div.dialog_window div.dialog_message {
        float: left;
        padding-left: 3px;
        margin-left: -3px;
        width: 305px;
        overflow: hidden;
}

div.dialog_container div.dialog_window a {
        display: block;
        float: right;
        margin: 10px 20px 10px -8px;
        padding: 5px;
        background-color: #EEE;
        border: 1px solid #787878;
        width: 50px;
        height: 15px;
        text-align: center;
        font-weight: bold;
        text-decoration: none;
        color: #323232;
        -webkit-appearance: button;
        font: -webkit-control;
        cursor: default;
}

div.dialog_container div.dialog_window a:hover,
div.dialog_container div.dialog_window a:active {
        background: #C0C8D6 url('images/filter_bar.png') bottom repeat-x;
}

div#upload_container div.dialog_window div.dialog_message label {
        margin-top: 15px;
        display: block;
}

div#upload_container div.dialog_window div.dialog_message input {
        width: 249px;
        margin: 3px 0 0 0;
        display: block;
}

div#upload_container div.dialog_window div.dialog_message input[type=text] {
        width: 245px;
        padding: 2px;
}

div#upload_container div.dialog_window div.dialog_message input[type=checkbox] {
        margin: 15px 3px 0 0;
        display: inline;
        width: auto;
}

div#upload_container div.dialog_window div.dialog_message #auto_start_label {
        display: inline;
}

div.dialog_container div.dialog_window form {
        margin: 0;
        padding: 0px;
}

div#move_container input#torrent_path {
        width: 286px;
        padding: 2px;
}


iframe#torrent_upload_frame {
        display: block; /* Don't change this : safari forms won't target hidden frames (they open a new window) */
        position: absolute;
        top: -1000px;
        left: -1000px;
        width: 0px;
        height: 0px;
        border: none;
        padding: 0;
        margin: 0;
}

/****
*****
*****  POPUP MENU
*****
****/

.trans_menu {
        margin: 0;
        padding: 0;
}

.trans_menu,
.trans_menu ul {
        list-style: none;
}

.trans_menu ul {
        /* place it right above the button */
        position: relative;
        bottom: 18px;

        min-width: 210px;
        background-color: white;
        padding: 5px 0;
        text-align: left;
        list-style: none;
        -webkit-border-radius: 5px;
        -webkit-box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

.trans_menu ul ul {
        min-width: 150px;
}

.trans_menu ul ul#footer_sort_menu {
        min-width: 175px;
}

.trans_menu > * li {
        margin: 0;
        padding: 3px 10px 3px 20px !important;
        color: #000;
        cursor: default;
        text-indent: auto !important;
        width: inherit;
}

.trans_menu li.separator,
.trans_menu li.separator.hover {
        border-top: 1px solid #ddd;
        margin: 5px 0;
        padding: 0px;
        background: transparent;
}

.trans_menu li span.arrow {
        float: right;
}

.trans_menu li.hover li.hover span.arrow, .trans_menu li.hover li.hover li.hover span.selected {
        color: white;
}

.trans_menu span.selected {
        margin: 0 3px 0 -15px;
        color: #666;
        float: left;
}

.trans_menu div.outerbox {
        display: none;
        background: transparent;
        border: 1px solid rgba(0,0,0,0.1);
        -webkit-border-radius: 5px;
}

.trans_menu div.inner {
        left: 0;
        margin: 0;
}

.trans_menu li.main li {
        z-index: 2;
        min-width: 78px;
}

.trans_menu a {
        text-decoration: none;
        cursor: default;
}

/*--------------------------------------
 *
 * C O N T E X T   M E N U
 *
 *--------------------------------------*/

div#jqContextMenu
{
        -webkit-border-radius: 5px;
        border: 1px solid rgba(0,0,0,0.1);
        -moz-user-select: none;
        -webkit-user-select: none;

        ul {
                filter: alpha(opacity=98);
                -moz-opacity: .98;
                opacity: .98;
                -webkit-box-shadow: 0 10px 25px rgba(0,0,0,0.4);
                -webkit-border-radius: 5px;
        }

        li.separator, div#jqContextMenu li.separator:hover {
                background: inherit !important;
                border-top: 1px solid #ddd !important;
                margin: 5px 0 !important;
                padding: 0px;
        }
}