/** Styling for the TalkTrackV stage component.
  */


div.TalkTrack
{
    color: #DDD;
    background-color: #000; /* not so light as stage, needs more contrast.  Same as
      CycleSpot */
    margin: 0;
    vertical-align: middle;
    padding: 0 0 2px 0; /*2px 0 2px 0;*/
    width: 100%;
    height: 16px; /* always show track */
    overflow: hidden;
    direction: rtl;
}


div.TalkTrack img.UpdateButton
{
    opacity: 0;
}


div.TalkTrack img.gwt-Image-hover
{
    cursor: pointer;
    opacity: 100;
}

div.gwt-PopupPanel table.popupPanel
{
    background-color: #303030;
    border-color: #909090;
    color: #f4f4f4;
    border: 2px solid #777; /* width used in position calculation for headsUp */
    border-radius:           4px;
    -moz-border-radius:    4px;
    -webkit-border-radius: 4px;
    font-size: .85em;

    display: inline-block; /* to allow top/bottom padding */
    padding: 4px;
    /* padding-top: 2px;
    padding-bottom: 2px; /* used in position calculation for headsUp */
    z-index: 16; /* one more than huds */
    position: absolute;
}

div.gwt-PopupPanel table.popupPanel button.closeButton {
    background-color: #303030;
    color: #f4f4f4;
    border: none;
    font-weight: bold;
    cursor: pointer;
}

div.gwt-PopupPanel table.popupPanel button.updateButton {
    margin: 4px;
    background-color: #f4f4f4;
    color: #303030;
    border: thin;
    border-radius:           2px;
    -moz-border-radius:    2px;
    -webkit-border-radius: 2px;
    font-weight: bold;
    cursor: pointer;
}


div.gwt-PopupPanel table.popupPanel button.updateButton-disabled {
    background-color: #848484;
    font-weight: normal;
    cursor: default;
}

div.TalkTrack img.HistorySeparator
{
    padding-left: 1.5px;
    padding-right: 1.5px;
}

/** - headsUp --------------------------
  */
div.TalkTrack div.headsUp
{
    pointer-events: none; /* because visiblity controlled in code via opacity (for sake of
      transitions) and we don't want it interacting with mouse when invisible */
    transition:           opacity .2s ease-in .3s; /* property, duration, timing function, delay */
      -moz-transition:    opacity .2s ease-in .3s;
      -webkit-transition: opacity .2s ease-in .3s;

    position: absolute;
    left: 0; right: 0; /* fill div.voteTrack parent.  100% width too wide owing to parent padding */
    top: 0; bottom: 0;
    z-index: 15; /* raise above normal content */
    direction: ltr;
}


div.TalkTrack div.headsUp div.display
{
    left: 0; right: 0; /* fill div.headsUp parent */
    position: absolute; /* not relative because that changes the meaning of 'bottom'
      position if height differs from container height (as it usually will) */
}


div.TalkTrack div.headsUp div.display.top
{
    top: -3px;
}

div.TalkTrack div.headsUp div.shuttle
{
    display: inline-block; /* no need for full block, also to match form of field */
    position: relative; /* HeadsUpDisplay.Shuttler slides it horizontally, tracking mouse */
}


div.TalkTrack div.headsUp div.shuttle span.expander
{
    text-align: right;

    display: inline-block;
 /*   width: 150px;  same as HeadsUpDisplay.EXPANDER_WIDTH */
}


div.TalkTrack div.headsUp div.shuttle span.field
{
    color: #999999;
    background-color: #303030;
    border-color: #909090;
    border: 2px solid #777; /* width used in position calculation for headsUp */
    border-radius:           4px;
    -moz-border-radius:    4px;
    -webkit-border-radius: 4px;
    font-size: .85em;

    display: inline-block; /* to allow top/bottom padding */
    padding-top: 2px;
    padding-bottom: 2px; /* used in position calculation for headsUp */
}


div.TalkTrack div.headsUp div.shuttle span.field.left
{
    border-right: none;
    padding-left: 0.3em;
    padding-right: 0.3em;
}


div.TalkTrack div.headsUp div.shuttle span.field.right
{
    border-left: none;
    padding-right: 0.3em;
    padding-left: 0.3em;
}

div.TalkTrack div.headsUp div.shuttle span.field.right span.field.sender
{
    color: #f4f4f4;
    border: none;
    padding: 0;
    font-weight: bold;
}


div.TalkTrack div.headsUp div.shuttle span.field.right span.field.separator
{
    border: none;
    padding: 0;
}


div.TalkTrack div.headsUp div.shuttle span.field.right span.field.addressee
{
    border: none;
    padding: 0;
}


div.TalkTrack div.headsUp div.display.bottom
{
    top: 50px;
}


div.TalkTrack div.headsUp div.display.bottom span.field
{
    background-color: #303030;
/*    background:           linear-gradient(#f8f8f8, #dadada);
      background:    -moz-linear-gradient(#f8f8f8, #dadada);
      background: -webkit-linear-gradient(#f8f8f8, #dadada); */
    border-color: #909090;
    color: #c9c9c9;
    width: 180px;
}


div.TalkTrack div.headsUp div.rail /* on which shuttle slides horizontally, also for div.rail.foot */
{
    overflow: hidden; /* Suppress scroll bar when shuttle passes right edge.  Cannot hide
      overflow-x alone, as Firefox (16) then forces overflow-y to auto, hiding it too.
      Therefore overflow-x must be hidden on innermost container, which must be at the
      correct y position (itself or its parents).  So we cannot have a single rail/shuttle
      for top and bottom displays, as that would require y positioning the child displays
      to top and bottom. */
   position: relative; /* HeadsUpDisplay.Shuttler rides it vertically, tracking mouse */
}

div.TalkTrack div.headsUp div.rail.foot {
    height: 16px;
}


div.TalkTrack div.headsUp div.rail span.shuttle.foot
{
    display: inline-block; /* no need for full block, also to match form of field */
    position: relative; /* HeadsUpDisplay.Shuttler slides it horizontally, tracking mouse */
    z-index: 30; /* raise above normal content */
}


div.TalkTrack div.headsUp div.rail span.shuttle
{
    display: inline-block; /* no need for full block, also to match form of field */
    position: relative; /* HeadsUpDisplay.Shuttler slides it horizontally, tracking mouse */
}


div.TalkTrack div.headsUp div.rail span.shuttle span.field
{
    border-style: solid;
    border-radius:         24px;
    -moz-border-radius:    24px;
    -webkit-border-radius: 24px;
    border-width: 3px;
    /*font-size: 1.0625em; /*1.0625em; /* 0.85 (actual) = 0.8 (track) / 1.0625 (formal) */
    font-size: .85em;

    display: inline-block; /* to allow top/bottom padding */
 /* padding: 0.2em 0.3em 0.2em 0.3em; but then Chrome (25) clips bottom border on top
      field, so use px instead: */
    padding: 6px 9px 6px 9px; /*TRBL*/
}

/* -------------- T a l k V ------------------ */

div.TalkTrack img.talkV
{
    cursor: url(cursor.cur) 10 10, auto; /* CSS3 hotspot redundant with .cur file's
      internal hotspot encoding, which Chrome (22) ignores.  Could therefore have used PNG
      instead.  Final entry is fallback cursor. */
/*    vertical-align: top; /* default is baseline, which is below track */
}