Added preliminary chat support

MANIFEST.in

 include MANIFEST.in TODO run
 include bin/blink
-recursive-include resources *.ui *.png *.svg *.wav *.ico *.mng
-recursive-include doc     *.txt *.html install.*
+recursive-include resources *.ui
+recursive-include resources/chat style.xml *.style *.html *.css *.png *.svg *.jpg *.py
+recursive-include resources/icons *.png *.svg *.ico *.mng
+recursive-include resources/sounds *.wav
+recursive-include resources/tls *.crt
+recursive-include doc *.txt *.html install.*

Notes

@@ -16,6 +16,75 @@ Code refactoring
 Issues
 ------
 
+- in Smooth Operator check if the src attribute is atill needed in elements
+  that have the x-color class. there used to be a rule that matched elements
+  with an x-color class which also had a src attribute pointing to a
+  particular image, but since that was removed, no other rule matching
+  an element with the x-color class cares for the src attribute. check if
+  the src attribute on a span tag means anything, if not it can probably be
+  safely removed from message.html and message_continuation.html
+- don't show selected audio device on the incoming dialog for chat
+- reconsider the busy button on the incoming dialog (replace with ignore?)
+- if I have an audio(+chat) call and make another atempt to establish a call
+  (doesn't matter what kind), but cancel it, the hold button is left disabled
+- when a session is closed the chat window shows: "Disconnected: Connection
+  was closed cleanly", but when calling oneself and a loop is detected is
+  only says "Disconnected". It should actually only say Disconnected when
+  the connection is ended normally and show the failure reason if not.
+  Also when a connection is ended voluntarily it should not care if there
+  is a failure while stopping the streams.
+- 1 session active and aother on hold, it beeps every 15 seconds.
+- new problem introduced: because we create streams early, now the session
+  tiles show the stream icons before we even attempt to connect.
+- decide what to do about having keyboard shortcuts for hold/hangup in the
+  chat window (list may not be visible all the time and here we also
+  differentiate between hangup and delete session)
+- modify the conferencing code to use move inside the model instead of
+  remove+add, to avoid/minimize selection changes
+- move tray icon from the main window to Blink?
+- find out what messes up the selection while dragging a contact into a
+  conference if ignore_selection_changes is not set.
+- find a way to not have a chat session item selected when we press over
+  the close/expand indicators on the session tile.
+- if I have an audio only session and I add chat, it rings using the audio
+  outgoing ringtone. to fix maybe add a proposed_streams to BlinkSession
+  and put the proposed streams in there until they are accepted. this way
+  we know what is proposed even when handling BlinkSessionDidChangeState
+- there are session transitions that do not change the state (for example
+  a stream that is removed, either by local or remote, never switches the
+  state to sent/received_proposal and back. this means that one cannot
+  rely on BlinkSessionDidChangeState alone to handle session transitions,
+  but instead needs to also listed to BlinkSessionDidRemoveStream.
+- If an audio+chat session is on hold and the audio stream is removed while
+  on hold, it remains showing it being on hold until a new audio stream is
+  added. (this is not true anymore. it only shows on hold until it is
+  removed from the audio session list. maybe we should reset the active flag
+  early?)
+- I got an incoming call and the contact was found as a google contact, but
+  in history I have no name and the original uri. if I dial back, it doesn't
+  find the contact and says number@domain for the name.
+- is the ringtone for incoming chat only sessions appropriate?
+- not sure about passing a Contact object to the session instead of
+  contact.settings.
+- the DummyContact should follow the other contact APIs (have an id, ...)
+  in order to be usable in their place.
+- have a contact.default_streams that returns a list of StreamDescription?
+- have a contact.account property that returns the best account for outgoing?
+
+Ideas:
+------
+
+- On sessionAboutToBeRemoved, we should preselect the next item we want
+  selected, so when it is actually removed, we do not flip.flop the
+  selection (may also need the ignore_selection_changes flag to be set)
+- check the selectionCommand from the audio session model. it may be also
+  useful for the chat session model to avoid selection on mouse press
+  events (make it only happen on mouse release events).
+
+
+- exceptions:
+
+
 Investigate this exception:
 
 sip:nwpsefvl@10.0.0.1:52067 52067

blink/__init__.py

@@ -29,11 +29,6 @@ from gnutls.crypto import X509Certificate, X509PrivateKey
 from gnutls.errors import GNUTLSError
 from zope.interface import implements
 
-try:
-    from blink import branding
-except ImportError:
-    branding = Null
-
 from sipsimple.account import Account, AccountManager, BonjourAccount
 from sipsimple.addressbook import Contact, Group
 from sipsimple.application import SIPApplication
@@ -42,6 +37,11 @@ from sipsimple.storage import FileStorage
 from sipsimple.threading import run_in_twisted_thread
 from sipsimple.threading.green import run_in_green_thread
 
+try:
+    from blink import branding
+except ImportError:
+    branding = Null
+from blink.chatwindow import ChatWindow
 from blink.configuration.account import AccountExtension, BonjourAccountExtension
 from blink.configuration.addressbook import ContactExtension, GroupExtension
 from blink.configuration.datatypes import InvalidToken
@@ -109,15 +109,18 @@ class Blink(QApplication):
         self.setApplicationVersion(__version__)
 
         self.main_window = MainWindow()
+        self.chat_window = ChatWindow()
+
         self.ip_address_monitor = IPAddressMonitor()
         self.log_manager = LogManager()
         self.presence_manager = PresenceManager()
+        self.session_manager = SessionManager()
+        self.update_manager = UpdateManager()
 
         # Prevent application from exiting after last window is closed if system tray was initialized
         if self.main_window.system_tray_icon:
             self.setQuitOnLastWindowClosed(False)
 
-        self.update_manager = UpdateManager()
         self.main_window.check_for_updates_action.triggered.connect(self.update_manager.check_for_updates)
         self.main_window.check_for_updates_action.setVisible(self.update_manager != Null)
 
@@ -126,8 +129,6 @@ class Blink(QApplication):
         Contact.register_extension(ContactExtension)
         Group.register_extension(GroupExtension)
         SIPSimpleSettings.register_extension(SIPSimpleSettingsExtension)
-        session_manager = SessionManager()
-        session_manager.initialize(self.main_window, self.main_window.session_model)
 
         notification_center = NotificationCenter()
         notification_center.add_observer(self, sender=self.sip_application)
@@ -143,6 +144,11 @@ class Blink(QApplication):
         self.sip_application.thread.join()
         self.log_manager.stop()
 
+    def quit(self):
+        self.chat_window.close()
+        self.main_window.close()
+        super(Blink, self).quit()
+
     def fetch_account(self):
         filename = os.path.expanduser('~/.blink_account')
         if not os.path.exists(filename):

blink/chatwindow.py

+# Copyright (C) 2013 AG Projects. See LICENSE for details.
+#
+
+__all__ = ['ChatWindow']
+
+import os
+
+from PyQt4 import uic
+from PyQt4.QtCore import Qt, QEvent, QPointF, QPropertyAnimation, QRect, QSettings, QTimer, pyqtSignal
+from PyQt4.QtGui  import QAction, QDesktopServices, QIcon, QListView, QMenu, QPainter, QPalette, QPen, QPolygonF, QTextCursor, QTextDocument, QTextEdit
+from PyQt4.QtWebKit import QWebPage, QWebSettings, QWebView
+
+from abc import ABCMeta, abstractmethod
+from application.notification import IObserver, NotificationCenter
+from application.python import Null
+from application.python.types import MarkerType
+from collections import MutableSet
+from datetime import datetime, timedelta
+from lxml import etree
+from weakref import proxy
+from zope.interface import implements
+
+from sipsimple.configuration.settings import SIPSimpleSettings
+
+from blink.configuration.datatypes import FileURL
+from blink.configuration.settings import BlinkSettings
+from blink.resources import IconManager, Resources
+from blink.sessions import ChatSessionModel, ChatSessionListView, StreamDescription
+from blink.util import run_in_gui_thread
+from blink.widgets.color import ColorHelperMixin
+from blink.widgets.util import ContextMenuActions
+
+
+# Chat style classes
+#
+
+class ChatStyleError(Exception): pass
+
+
+class ChatHtmlTemplates(object):
+    def __init__(self, style_path):
+        try:
+            self.message = open(os.path.join(style_path, 'html/message.html')).read().decode('utf-8')
+            self.message_continuation = open(os.path.join(style_path, 'html/message_continuation.html')).read().decode('utf-8')
+            self.notification = open(os.path.join(style_path, 'html/notification.html')).read().decode('utf-8')
+        except (OSError, IOError):
+            raise ChatStyleError("missing or unreadable chat message html template files in %s" % os.path.join(style_path, 'html'))
+
+
+class ChatMessageStyle(object):
+    def __init__(self, name):
+        self.name = name
+        self.path = Resources.get('chat/styles/%s' % name)
+        try:
+            xml_tree = etree.parse(os.path.join(self.path, 'style.xml'), parser=etree.XMLParser(resolve_entities=False))
+        except (etree.ParseError, OSError, IOError):
+            self.info = {}
+        else:
+            self.info = dict((element.tag, element.text) for element in xml_tree.getroot())
+        try:
+            self.variants = tuple(sorted(name[:-len('.style')] for name in os.listdir(self.path) if name.endswith('.style')))
+        except (OSError, IOError):
+            self.variants = ()
+        if not self.variants:
+            raise ChatStyleError("chat style %s contains no variants" % name)
+        self.html = ChatHtmlTemplates(self.path)
+
+    @property
+    def default_variant(self):
+        default_variant = self.info.get('default_variant')
+        return default_variant if default_variant in self.variants else self.variants[0]
+
+    @property
+    def font_family(self):
+        return self.info.get('font_family', 'sans-serif')
+
+    @property
+    def font_size(self):
+        try:
+            return int(self.info['font_size'])
+        except (KeyError, ValueError):
+            return 11
+
+
+# Chat content classes
+#
+
+class Link(object):
+    __slots__ = 'prev', 'next', 'key', '__weakref__'
+
+
+class OrderedSet(MutableSet):
+    def __init__(self, iterable=None):
+        self.__hardroot = Link() # sentinel node for doubly linked list
+        self.__root = root = proxy(self.__hardroot)
+        root.prev = root.next = root
+        self.__map = {}
+        if iterable is not None:
+            self |= iterable
+
+    def __len__(self):
+        return len(self.__map)
+
+    def __contains__(self, key):
+        return key in self.__map
+
+    def __iter__(self):
+        root = self.__root
+        curr = root.next
+        while curr is not root:
+            yield curr.key
+            curr = curr.next
+
+    def __reversed__(self):
+        root = self.__root
+        curr = root.prev
+        while curr is not root:
+            yield curr.key
+            curr = curr.prev
+
+    def __repr__(self):
+        return '%s(%r)' % (self.__class__.__name__, list(self))
+
+    def add(self, key):
+        if key not in self.__map:
+            self.__map[key] = link = Link()
+            root = self.__root
+            last = root.prev
+            link.prev, link.next, link.key = last, root, key
+            last.next = link
+            root.prev = proxy(link)
+
+    def discard(self, key):
+        if key in self.__map:
+            link = self.__map.pop(key)
+            link_prev = link.prev
+            link_next = link.next
+            link_prev.next = link_next
+            link_next.prev = link_prev
+
+    def clear(self):
+        root = self.__root
+        root.prev = root.next = root
+        self.__map.clear()
+
+
+class ChatContentBooleanOption(object):
+    """Adds/removes name from css classes based on option being True/False"""
+
+    def __init__(self, name):
+        self.name = name
+
+    def __get__(self, obj, objtype):
+        if obj is None:
+            return self
+        return self.name in obj.__cssclasses__
+
+    def __set__(self, obj, value):
+        if value:
+            obj.__cssclasses__.add(self.name)
+        else:
+            obj.__cssclasses__.discard(self.name)
+
+    def __delete__(self, obj):
+        raise AttributeError('attribute cannot be deleted')
+
+
+class AnyValue: __metaclass__ = MarkerType
+
+class ChatContentStringAttribute(object):
+    """A string attribute that is also added as a css class"""
+
+    def __init__(self, name, allowed_values=AnyValue):
+        self.name = name
+        self.allowed_values = allowed_values
+
+    def __get__(self, obj, objtype):
+        if obj is None:
+            return self
+        try:
+            return obj.__dict__[self.name]
+        except KeyError:
+            raise AttributeError("'{}' attribute is not set".format(self.name))
+
+    def __set__(self, obj, value):
+        if self.allowed_values is not AnyValue and value not in self.allowed_values:
+            raise ValueError("invalid value for '{}': '{}'".format(self.name, value))
+        old_value = obj.__dict__.get(self.name, None)
+        obj.__cssclasses__.discard(old_value)
+        if value is not None:
+            obj.__cssclasses__.add(value)
+        obj.__dict__[self.name] = value
+
+    def __delete__(self, obj):
+        raise AttributeError('attribute cannot be deleted')
+
+
+class ChatContent(object):
+    __metaclass__ = ABCMeta
+
+    __cssclasses__ = ()
+
+    continuation_interval = timedelta(0, 5*60) # 5 minutes
+
+    history = ChatContentBooleanOption('history')
+    focus = ChatContentBooleanOption('focus')
+    consecutive = ChatContentBooleanOption('consecutive')
+    mention = ChatContentBooleanOption('mention') # keep it here? or keep it at all? -Dan
+
+    def __init__(self, message, history=False, focus=False):
+        self.__cssclasses__ = OrderedSet(self.__class__.__cssclasses__)
+        self.message = message
+        self.history = history
+        self.focus = focus
+        self.timestamp = datetime.now()
+
+    @property
+    def css_classes(self):
+        return ' '.join(self.__cssclasses__)
+
+    @property
+    def date(self):
+        return self.timestamp.strftime('%d %b %Y')
+
+    @property
+    def time(self):
+        return self.timestamp.strftime('%H:%M')
+
+    @property
+    def text_direction(self):
+        try:
+            return self.__dict__['text_direction']
+        except KeyError:
+            document = QTextDocument()
+            document.setHtml(self.message)
+            return self.__dict__.setdefault('text_direction', 'rtl' if document.firstBlock().textDirection() == Qt.RightToLeft else 'ltr')
+
+    def add_css_class(self, name):
+        self.__cssclasses__.add(name)
+
+    def is_related_to(self, other):
+        return type(self) is type(other) and self.history == other.history and timedelta(0) <= self.timestamp - other.timestamp <= self.continuation_interval
+
+    @abstractmethod
+    def to_html(self, style, **kw):
+        raise NotImplementedError
+
+
+class ChatNotification(ChatContent):
+    __cssclasses__ = ('event',)
+
+    def to_html(self, style, **kw):
+        return style.html.notification.format(message=self, **kw)
+
+
+class ChatEvent(ChatNotification):
+    __cssclasses__ = ('event',)
+
+
+class ChatStatus(ChatNotification):
+    __cssclasses__ = ('status',)
+
+
+class ChatMessage(ChatContent):
+    __cssclasses__ = ('message',)
+
+    direction = ChatContentStringAttribute('direction', allowed_values=('incoming', 'outgoing'))
+    autoreply = ChatContentBooleanOption('autoreply')
+
+    def __init__(self, message, sender, direction, history=False, focus=False):
+        super(ChatMessage, self).__init__(message, history, focus)
+        self.sender = sender
+        self.direction = direction
+
+    def is_related_to(self, other):
+        return super(ChatMessage, self).is_related_to(other) and self.sender == other.sender and self.direction == other.direction
+
+    def to_html(self, style, **kw):
+        if self.consecutive:
+            return style.html.message_continuation.format(message=self, **kw)
+        else:
+            return style.html.message.format(message=self, **kw)
+
+
+class ChatSender(object):
+    __colors__ = ["aqua", "aquamarine", "blue", "blueviolet", "brown", "burlywood", "cadetblue", "chartreuse", "chocolate", "coral", "cornflowerblue", "crimson", "cyan", "darkblue", "darkcyan",
+                  "darkgoldenrod", "darkgreen", "darkgrey", "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen", "darkslateblue",
+                  "darkslategrey", "darkturquoise", "darkviolet", "deeppink", "deepskyblue", "dimgrey", "dodgerblue", "firebrick", "forestgreen", "fuchsia", "gold", "goldenrod", "green",
+                  "greenyellow", "grey", "hotpink", "indianred", "indigo", "lawngreen", "lightblue", "lightcoral", "lightgreen", "lightgrey", "lightpink", "lightsalmon", "lightseagreen",
+                  "lightskyblue", "lightslategrey", "lightsteelblue", "lime", "limegreen", "magenta", "maroon", "mediumaquamarine", "mediumblue", "mediumorchid", "mediumpurple", "mediumseagreen",
+                  "mediumslateblue", "mediumspringgreen", "mediumturquoise", "mediumvioletred", "midnightblue", "navy", "olive", "olivedrab", "orange", "orangered", "orchid", "palegreen",
+                  "paleturquoise", "palevioletred", "peru", "pink", "plum", "powderblue", "purple", "red", "rosybrown", "royalblue", "saddlebrown", "salmon", "sandybrown", "seagreen", "sienna",
+                  "silver", "skyblue", "slateblue", "slategrey", "springgreen", "steelblue", "tan", "teal", "thistle", "tomato", "turquoise", "violet", "yellowgreen"]
+
+    def __init__(self, name, uri, iconpath):
+        self.name = name
+        self.uri = uri
+        self.iconpath = iconpath
+
+    def __eq__(self, other):
+        if not isinstance(other, ChatSender):
+            return NotImplemented
+        return self.name == other.name and self.uri == other.uri
+
+    def __ne__(self, other):
+        return not (self == other)
+
+    @property
+    def color(self):
+        return self.__colors__[hash(self.uri) % len(self.__colors__)]
+
+
+class ChatWebPage(QWebPage):
+    def __init__(self, parent=None):
+        super(ChatWebPage, self).__init__(parent)
+        self.setLinkDelegationPolicy(QWebPage.DelegateAllLinks)
+        self.linkClicked.connect(self._SH_LinkClicked)
+        #self.downloadRequested.connect(self._SH_DownloadRequested)
+        #self.setForwardUnsupportedContent(True)
+        #self.unsupportedContent.connect(self._SH_UnsupportedContent)
+        #allowed_actions = {QWebPage.InspectElement, QWebPage.CopyLinkToClipboard, QWebPage.CopyImageToClipboard, QWebPage.CopyImageUrlToClipboard}
+        disable_actions = {QWebPage.OpenLink, QWebPage.OpenLinkInNewWindow, QWebPage.DownloadLinkToDisk, QWebPage.OpenImageInNewWindow, QWebPage.DownloadImageToDisk,
+                           QWebPage.Back, QWebPage.Forward, QWebPage.Stop, QWebPage.Reload}
+        for action in (self.action(action) for action in disable_actions):
+            action.setVisible(False)
+
+    def acceptNavigationRequest(self, frame, request, navigation_type):
+        if navigation_type in (QWebPage.NavigationTypeBackOrForward, QWebPage.NavigationTypeReload):
+            return False
+        return super(ChatWebPage, self).acceptNavigationRequest(frame, request, navigation_type)
+
+    def triggerAction(self, action, checked=False):
+        if action == QWebPage.OpenLink:
+            return
+        super(ChatWebPage, self).triggerAction(action, checked)
+
+    def _SH_LinkClicked(self, url):
+        QDesktopServices.openUrl(url)
+
+    #def _SH_DownloadRequested(self, request):
+    #    print "-- download requested", request.url().toString()
+
+    #def _SH_UnsupportedContent(self, reply):
+    #    print "-- unsupported", reply.url().toString()
+
+
+class ChatWebView(QWebView):
+    sizeChanged = pyqtSignal()
+
+    def __init__(self, parent=None):
+        super(ChatWebView, self).__init__(parent)
+        palette = self.palette()
+        palette.setBrush(QPalette.Base, Qt.transparent)
+        self.setPalette(palette)
+        self.setPage(ChatWebPage(self))
+        self.setAttribute(Qt.WA_OpaquePaintEvent, False)
+        self.settings().setAttribute(QWebSettings.DeveloperExtrasEnabled, True) # temporary for debugging -Dan
+
+    def setChatFont(self, family, size):
+        settings = self.settings()
+        settings.setFontFamily(QWebSettings.StandardFont, family)
+        settings.setFontFamily(QWebSettings.FixedFont, family)
+        settings.setFontFamily(QWebSettings.SerifFont, family)
+        settings.setFontFamily(QWebSettings.SansSerifFont, family)
+        settings.setFontSize(QWebSettings.DefaultFontSize, size)
+        settings.setFontSize(QWebSettings.DefaultFixedFontSize, size)
+        self.update()
+
+    def contextMenuEvent(self, event):
+        menu = self.page().createStandardContextMenu()
+        if any(action.isVisible() and not action.isSeparator() for action in menu.actions()):
+            menu.exec_(event.globalPos())
+
+    def createWindow(self, window_type):
+        print "create window of type", window_type
+        return None
+
+    def resizeEvent(self, event):
+        super(ChatWebView, self).resizeEvent(event)
+        self.sizeChanged.emit()
+
+
+class ChatTextInput(QTextEdit):
+    textEntered = pyqtSignal(unicode)
+
+    def __init__(self, parent=None):
+        super(ChatTextInput, self).__init__(parent)
+        self.setTabStopWidth(22)
+        self.document().documentLayout().documentSizeChanged.connect(self._SH_DocumentLayoutSizeChanged)
+        self.history = []
+        self.history_index = 0 # negative indexes with 0 indicating the text being typed.
+        self.stashed_content = None
+
+    @property
+    def empty(self):
+        document = self.document()
+        last_block = document.lastBlock()
+        return document.characterCount() <= 1 and not last_block.textList()
+
+    def keyPressEvent(self, event):
+        key, modifiers = event.key(), event.modifiers()
+        if key in (Qt.Key_Enter, Qt.Key_Return) and modifiers == Qt.NoModifier:
+            document = self.document()
+            last_block = document.lastBlock()
+            if document.characterCount() > 1 or last_block.textList():
+                text = self.toHtml()
+                if not self.history or self.history[-1] != text:
+                    self.history.append(text)
+                self.history_index = 0
+                self.stashed_content = None
+                if document.blockCount() > 1 and not last_block.text() and not last_block.textList():
+                    # prevent an extra empty line being added at the end of the text
+                    cursor = self.textCursor()
+                    cursor.movePosition(cursor.End)
+                    cursor.deletePreviousChar()
+                text = self.toHtml()
+                self.clear()
+                self.textEntered.emit(text)
+            event.accept()
+        elif key == Qt.Key_Up and modifiers == Qt.ControlModifier:
+            try:
+                history_entry = self.history[self.history_index - 1]
+            except IndexError:
+                pass
+            else:
+                if self.history_index == 0:
+                    self.stashed_content = self.toHtml()
+                self.history_index -= 1
+                self.setHtml(history_entry)
+            event.accept()
+        elif key == Qt.Key_Down and modifiers == Qt.ControlModifier:
+            if self.history_index == 0:
+                pass
+            elif self.history_index == -1:
+                self.history_index = 0
+                self.setHtml(self.stashed_content)
+                self.stashed_content = None
+            else:
+                self.history_index += 1
+                self.setHtml(self.history[self.history_index])
+            event.accept()
+        else:
+            QTextEdit.keyPressEvent(self, event)
+
+    def _SH_DocumentLayoutSizeChanged(self, new_size):
+        self.setFixedHeight(min(new_size.height()+self.contentsMargins().top()+self.contentsMargins().bottom(), self.parent().height()/2))
+
+    def setHtml(self, text):
+        super(ChatTextInput, self).setHtml(text)
+        cursor = self.textCursor()
+        cursor.movePosition(QTextCursor.End)
+        self.setTextCursor(cursor)
+
+
+ui_class, base_class = uic.loadUiType(Resources.get('chat_widget.ui'))
+
+class ChatWidget(base_class, ui_class):
+    def __init__(self, session, parent=None):
+        super(ChatWidget, self).__init__(parent)
+        with Resources.directory:
+            self.setupUi(self)
+        self.session = session
+        self.style = ChatMessageStyle('Stockholm')
+        self.style_variant = self.style.default_variant
+        #self.style_variant = 'Blue - Red'
+        #self.style = ChatMessageStyle('Smooth Operator')
+        #self.style_variant = self.style.default_variant
+        #self.style_variant = 'Classic'
+        #self.style_variant = 'Time-Icon'
+        chat_template = open(Resources.get('chat/template.html')).read()
+        self.chat_view.setChatFont(self.style.font_family, self.style.font_size)
+        self.chat_view.setHtml(chat_template.format(base_url=FileURL(self.style.path)+'/', style_url=self.style_variant+'.style'))
+        self.chat_element = self.chat_view.page().mainFrame().findFirstElement('#chat')
+        self.composing_timer = QTimer()
+        self.last_message = None
+        # connect to signals
+        self.chat_input.textChanged.connect(self._SH_ChatInputTextChanged)
+        self.chat_input.textEntered.connect(self._SH_ChatInputTextEntered)
+        self.chat_view.sizeChanged.connect(self._SH_ChatViewSizeChanged)
+        self.chat_view.page().mainFrame().contentsSizeChanged.connect(self._SH_ChatViewFrameContentsSizeChanged)
+        self.composing_timer.timeout.connect(self._SH_ComposingTimerTimeout)
+
+    def add_message(self, message):
+        insertion_point = self.chat_element.findFirst('#insert')
+        if message.is_related_to(self.last_message):
+            message.consecutive = True
+            insertion_point.replace(message.to_html(self.style, user_icons='show-icons'))
+        else:
+            insertion_point.removeFromDocument()
+            self.chat_element.appendInside(message.to_html(self.style, user_icons='show-icons'))
+        self.last_message = message
+
+    def _align_chat(self, scroll=False):
+        #frame_height = self.chat_view.page().mainFrame().contentsSize().height()
+        widget_height = self.chat_view.size().height()
+        content_height = self.chat_element.geometry().height()
+        #print widget_height, frame_height, content_height
+        if widget_height > content_height:
+            self.chat_element.setStyleProperty('position', 'relative')
+            self.chat_element.setStyleProperty('top', '%dpx' % (widget_height-content_height))
+        else:
+            self.chat_element.setStyleProperty('position', 'static')
+            self.chat_element.setStyleProperty('top', None)
+        frame = self.chat_view.page().mainFrame()
+        if scroll or frame.scrollBarMaximum(Qt.Vertical) - frame.scrollBarValue(Qt.Vertical) <= widget_height*0.2:
+            #print "scroll requested or scrollbar is closer than %dpx to the bottom" % (widget_height*0.2)
+            #self._print_scrollbar_position()
+            self._scroll_to_bottom()
+            #self._print_scrollbar_position()
+
+    def _scroll_to_bottom(self):
+        frame = self.chat_view.page().mainFrame()
+        frame.setScrollBarValue(Qt.Vertical, frame.scrollBarMaximum(Qt.Vertical))
+
+    def _print_scrollbar_position(self):
+        frame = self.chat_view.page().mainFrame()
+        print "%d out of %d, %d+%d=%d (%d)" % (frame.scrollBarValue(Qt.Vertical), frame.scrollBarMaximum(Qt.Vertical), frame.scrollBarValue(Qt.Vertical), self.chat_view.size().height(),
+                                               frame.scrollBarValue(Qt.Vertical)+self.chat_view.size().height(), frame.contentsSize().height())
+
+    def _SH_ChatViewSizeChanged(self):
+        #print "chat view size changed"
+        self._align_chat(scroll=True)
+
+    def _SH_ChatViewFrameContentsSizeChanged(self, size):
+        #print "frame contents size changed to %r (current=%r)" % (size, self.chat_view.page().mainFrame().contentsSize())
+        self._align_chat(scroll=True)
+
+    def _SH_ChatInputTextChanged(self):
+        chat_stream = self.session.chat_stream
+        if chat_stream is None:
+            return
+        if self.chat_input.empty:
+            if self.composing_timer.isActive():
+                self.composing_timer.stop()
+                try:
+                    chat_stream.send_composing_indication('idle')
+                except Exception:
+                    pass
+        elif not self.composing_timer.isActive():
+            try:
+                chat_stream.send_composing_indication('active')
+            except Exception:
+                pass
+            else:
+                self.composing_timer.start(10000)
+
+    def _SH_ChatInputTextEntered(self, text):
+        #doc = QTextDocument()
+        #doc.setHtml(text)
+        #plain_text = doc.toPlainText()
+        #if len(plain_text) == 7 and plain_text[0] == '#':
+        #    body = self.chat_view.page().mainFrame().findFirstElement('body')
+        #    body.setStyleProperty('background', plain_text)
+        #    return
+        self.composing_timer.stop()
+        blink_session = self.session.blink_session
+        if blink_session.state == 'initialized':
+            blink_session.connect() # what if it was initialized, but is doesn't have a chat stream? -Dan
+        elif blink_session.state == 'ended':
+            blink_session.init_outgoing(blink_session.account, blink_session.contact, blink_session.contact_uri, [StreamDescription('chat')], reinitialize=True)
+            blink_session.connect()
+        elif blink_session.state == 'connected/*':
+            if self.session.chat_stream is None:
+                self.session.blink_session.add_stream(StreamDescription('chat'))
+                if self.session.chat_stream is None:
+                    self.add_message(ChatStatus('Could not add chat stream'))
+                    return
+        else: # cannot send chat message in any other state (what about when connecting -Dan)
+            self.add_message(ChatStatus("Cannot send chat messages in the '%s' state" % blink_session.state))
+            return
+
+        chat_stream = self.session.chat_stream
+        try:
+            chat_stream.send_message(text, content_type='text/html')
+        except Exception, e:
+            self.add_message(ChatStatus('Error sending chat message: %s' % e)) # decide what type to use here. -Dan
+            return
+        # TODO: cache this
+        identity = chat_stream.local_identity
+        if identity is not None:
+            display_name = identity.display_name
+            uri = '%s@%s' % (identity.uri.user, identity.uri.host)
+        else:
+            account = chat_stream.blink_session.account
+            display_name = account.display_name
+            uri = account.id
+        icon = IconManager().get('avatar') or self.session.default_user_icon
+        sender = ChatSender(display_name, uri, icon.filename)
+        self.add_message(ChatMessage(text, sender, 'outgoing'))
+
+    def _SH_ComposingTimerTimeout(self):
+        self.composing_timer.stop()
+        chat_stream = self.session.chat_stream or Null
+        try:
+            chat_stream.send_composing_indication('idle')
+        except Exception:
+            pass
+
+del ui_class, base_class
+
+
+ui_class, base_class = uic.loadUiType(Resources.get('chat_window.ui'))
+
+class ChatWindow(base_class, ui_class, ColorHelperMixin):
+    implements(IObserver)
+
+    def __init__(self, parent=None):
+        super(ChatWindow, self).__init__(parent)
+        with Resources.directory:
+            self.setupUi()
+        self.selected_item = None
+        self.session_model = ChatSessionModel(self)
+        self.session_list.setModel(self.session_model)
+        self.session_widget.installEventFilter(self)
+        self.state_label.installEventFilter(self)
+        self.mute_button.clicked.connect(self._SH_MuteButtonClicked)
+        self.hold_button.clicked.connect(self._SH_HoldButtonClicked)
+        self.record_button.clicked.connect(self._SH_RecordButtonClicked)
+        self.control_button.clicked.connect(self._SH_ControlButtonClicked)
+        self.session_model.sessionAdded.connect(self._SH_SessionModelSessionAdded)
+        self.session_model.sessionRemoved.connect(self._SH_SessionModelSessionRemoved)
+        self.session_model.sessionAboutToBeRemoved.connect(self._SH_SessionModelSessionAboutToBeRemoved)
+        self.session_list.selectionModel().selectionChanged.connect(self._SH_SessionListSelectionChanged)
+        self.dummy_tab = ChatWidget(None, self.tab_widget)
+        self.dummy_tab.setDisabled(True)
+        self.tab_widget.addTab(self.dummy_tab, "Dummy")
+        self.tab_widget.setCurrentWidget(self.dummy_tab)
+        geometry = QSettings().value("chat_window/geometry")
+        if geometry:
+            self.restoreGeometry(geometry)
+        notification_center = NotificationCenter()
+        notification_center.add_observer(self, name='SIPApplicationDidStart')
+        notification_center.add_observer(self, name='BlinkSessionNewIncoming')
+        notification_center.add_observer(self, name='BlinkSessionNewOutgoing')
+        notification_center.add_observer(self, name='BlinkSessionDidReinitializeForIncoming')
+        notification_center.add_observer(self, name='BlinkSessionDidReinitializeForOutgoing')
+        notification_center.add_observer(self, name='ChatStreamGotMessage')
+        notification_center.add_observer(self, name='ChatStreamGotComposingIndication')
+        notification_center.add_observer(self, name='ChatStreamDidSendMessage')
+        notification_center.add_observer(self, name='ChatStreamDidDeliverMessage')
+        notification_center.add_observer(self, name='ChatStreamDidNotDeliverMessage')
+        notification_center.add_observer(self, name='MediaStreamDidInitialize')
+        notification_center.add_observer(self, name='MediaStreamDidStart')
+        notification_center.add_observer(self, name='MediaStreamDidFail')
+        notification_center.add_observer(self, name='MediaStreamDidEnd')
+
+    def setupUi(self):
+        super(ChatWindow, self).setupUi(self)
+
+        # fix the SVG icons as the generated code loads them as pixmaps, losing their ability to scale -Dan
+        def svg_icon(filename_off, filename_on):
+            icon = QIcon()
+            icon.addFile(filename_off, mode=QIcon.Normal, state=QIcon.Off)
+            icon.addFile(filename_on,  mode=QIcon.Normal, state=QIcon.On)
+            icon.addFile(filename_on,  mode=QIcon.Active, state=QIcon.On)
+            return icon
+        self.mute_button.setIcon(svg_icon(Resources.get('icons/mic-on.svg'), Resources.get('icons/mic-off.svg')))
+        self.hold_button.setIcon(svg_icon(Resources.get('icons/pause.svg'), Resources.get('icons/paused.svg')))
+        self.record_button.setIcon(svg_icon(Resources.get('icons/record.svg'), Resources.get('icons/recording.svg')))
+        self.control_button.setIcon(QIcon(Resources.get('icons/cog.svg')))
+
+        self.control_menu = QMenu(self.control_button)
+        self.control_button.setMenu(self.control_menu)
+        self.control_button.actions = ContextMenuActions()
+        self.control_button.actions.connect = QAction("Connect", self, triggered=self._AH_Connect)
+        self.control_button.actions.connect_with_audio = QAction("Connect with audio", self, triggered=self._AH_ConnectWithAudio)
+        self.control_button.actions.disconnect = QAction("Disconnect", self, triggered=self._AH_Disconnect)
+        self.control_button.actions.add_audio = QAction("Add audio", self, triggered=self._AH_AddAudio)
+        self.control_button.actions.remove_audio = QAction("Remove audio", self, triggered=self._AH_RemoveAudio)
+        self.control_button.actions.dump_session = QAction("Dump session", self, triggered=self._AH_DumpSession) # remove later -Dan
+
+        self.session_list = ChatSessionListView(self)
+        self.session_list.setObjectName('session_list')
+        while self.tab_widget.count():
+            self.tab_widget.removeTab(0) # remove the tab(s) added in designer
+        self.tab_widget.tabBar().hide()
+        self.session_list.hide()
+        self.new_messages_button.hide()
+
+        self.info_label.setForegroundRole(QPalette.Dark)
+
+        # prepare self.session_widget so we can take over some of its painting and behaviour
+        self.session_widget.setAttribute(Qt.WA_Hover, True)
+        self.session_widget.hovered = False
+
+    def _get_selected_session(self):
+        return self.__dict__['selected_session']
+
+    def _set_selected_session(self, session):
+        old_session = self.__dict__.get('selected_session', None)
+        new_session = self.__dict__['selected_session'] = session
+        if new_session != old_session:
+            notification_center = NotificationCenter()
+            if old_session is not None:
+                notification_center.remove_observer(self, sender=old_session)
+                notification_center.remove_observer(self, sender=old_session.blink_session)
+            if new_session is not None:
+                notification_center.add_observer(self, sender=new_session)
+                notification_center.add_observer(self, sender=new_session.blink_session)
+                self._update_widgets_for_session()
+                self._update_control_menu()
+
+    selected_session = property(_get_selected_session, _set_selected_session)
+    del _get_selected_session, _set_selected_session
+
+    def _update_widgets_for_session(self):
+        session = self.selected_session
+        widget = session.widget
+        # session widget
+        self.name_label.setText(widget.name_label.text())
+        self.info_label.setText(widget.info_label.text())
+        self.icon_label.setPixmap(widget.icon_label.pixmap())
+        self.state_label.state = widget.state_label.state or 'offline'
+        self.hold_icon.setVisible(widget.hold_icon.isVisibleTo(widget))
+        self.is_composing_icon.setVisible(widget.is_composing_icon.isVisibleTo(widget))
+        self.audio_icon.setVisible(widget.audio_icon.isVisibleTo(widget))
+        self.audio_icon.setEnabled(widget.audio_icon.isEnabledTo(widget))
+        self.chat_icon.setVisible(widget.chat_icon.isVisibleTo(widget))
+        self.chat_icon.setEnabled(widget.chat_icon.isEnabledTo(widget))
+        self.video_icon.setVisible(widget.video_icon.isVisibleTo(widget))
+        self.video_icon.setEnabled(widget.video_icon.isEnabledTo(widget))
+        self.screen_sharing_icon.setVisible(widget.screen_sharing_icon.isVisibleTo(widget))
+        self.screen_sharing_icon.setEnabled(widget.screen_sharing_icon.isEnabledTo(widget))
+        # toolbar buttons
+        self.hold_button.setVisible('audio' in session.blink_session.streams)
+        self.hold_button.setChecked(session.blink_session.local_hold)
+        self.record_button.setVisible('audio' in session.blink_session.streams)
+        self.record_button.setChecked(session.blink_session.recording)
+        # fixme: also update their enabled/disabled state (maybe not here though as this is called everytime the session changes) -Dan
+        # possible fix: have flags on the chat session item to indicate if it can be hold/recorded and have the chat session item listen to session notifications
+        # and when it changes these flags it will post a ChatSessionItemDidChange notification, which will end up calling this function
+        # and updating the window widgets. the ChatWindow will then not listen to session notifications anymore to change the state.
+        # this will also help fix issues with changes for other sessions (non-selected) being leaked into the selected session and
+        # changing its hold/record state -Dan
+
+    def _update_control_menu(self):
+        menu = self.control_menu
+        menu.hide()
+        blink_session = self.selected_session.blink_session
+        state = blink_session.state
+        if state=='connecting/*' and blink_session.direction=='outgoing' or state=='connected/sent_proposal':
+            self.control_button.setMenu(None)
+            self.control_button.setIcon(QIcon(Resources.get('icons/cancel.png')))
+        elif state == 'connected/received_proposal':
+            self.control_button.setEnabled(False)
+        else:
+            self.control_button.setEnabled(True)
+            self.control_button.setIcon(QIcon(Resources.get('icons/cog.svg')))
+            menu.clear()
+            if state not in ('connecting/*', 'connected/*'):
+                menu.addAction(self.control_button.actions.connect)
+                menu.addAction(self.control_button.actions.connect_with_audio)
+            else:
+                menu.addAction(self.control_button.actions.disconnect)
+                if state == 'connected':
+                    menu.addAction(self.control_button.actions.add_audio if 'audio' not in blink_session.streams else self.control_button.actions.remove_audio)
+            #menu.addAction(self.control_button.actions.dump_session) # remove this later -Dan
+            self.control_button.setMenu(menu)
+
+    def show(self):
+        super(ChatWindow, self).show()
+        self.raise_()
+        self.activateWindow()
+
+    def closeEvent(self, event):
+        QSettings().setValue("chat_window/geometry", self.saveGeometry())
+        super(ChatWindow, self).closeEvent(event)
+
+    def eventFilter(self, watched, event):
+        event_type = event.type()
+        if watched is self.session_widget:
+            if event_type == QEvent.HoverEnter:
+                watched.hovered = True
+            elif event_type == QEvent.HoverLeave:
+                watched.hovered = False
+            elif event_type == QEvent.MouseButtonDblClick and event.button() == Qt.LeftButton:
+                self._EH_ShowSessions()
+        elif watched is self.state_label:
+            if event_type == QEvent.MouseButtonRelease and event.button() == Qt.LeftButton and event.modifiers() == Qt.NoModifier:
+                upper_half = QRect(0, 0, self.state_label.width(), self.state_label.height()/2)
+                if upper_half.contains(event.pos()):
+                    self._EH_CloseSession()
+                else:
+                    self._EH_ShowSessions()
+            elif event_type == QEvent.Paint and self.session_widget.hovered:
+                watched.event(event)
+                self.drawSessionWidgetIndicators()
+                return True
+        return False
+
+    def drawSessionWidgetIndicators(self):
+        painter = QPainter(self.state_label)
+        palette = self.state_label.palette()
+        rect = self.state_label.rect()
+
+        pen_thickness = 1.6
+
+        color = palette.color(QPalette.Normal, QPalette.WindowText)
+        if self.state_label.state in ('available', 'away', 'busy', 'offline'):
+            window_color = self.state_label.state_colors[self.state_label.state]
+        else:
+            window_color = palette.color(QPalette.Window)
+        background_color = self.background_color(window_color, 0.5)
+
+        pen = QPen(self.deco_color(background_color, color), pen_thickness, Qt.SolidLine, Qt.RoundCap, Qt.RoundJoin)
+        contrast_pen = QPen(self.calc_light_color(background_color), pen_thickness, Qt.SolidLine, Qt.RoundCap, Qt.RoundJoin)
+
+        # draw the expansion indicator at the bottom (works best with a state_label of width 14)
+        arrow_rect = QRect(0, 0, 14, 14)
+        arrow_rect.moveBottomRight(rect.bottomRight())
+
+        arrow = QPolygonF([QPointF(-3, -1.5), QPointF(0.5, 2.5), QPointF(4, -1.5)])
+        arrow.translate(1, 1)
+
+        painter.save()
+        painter.setRenderHint(QPainter.Antialiasing, True)
+        painter.setCompositionMode(QPainter.CompositionMode_SourceOver)
+        painter.translate(arrow_rect.center())
+        painter.translate(0, +1)
+        painter.setPen(contrast_pen)
+        painter.drawPolyline(arrow)
+        painter.translate(0, -1)
+        painter.setPen(pen)
+        painter.drawPolyline(arrow)
+        painter.restore()
+
+        # draw the close indicator at the top (works best with a state_label of width 14)
+        cross_rect = QRect(0, 0, 14, 14)
+        cross_rect.moveTopRight(rect.topRight())
+
+        painter.save()
+        painter.setRenderHint(QPainter.Antialiasing, True)
+        painter.setCompositionMode(QPainter.CompositionMode_SourceOver)
+        painter.translate(cross_rect.center())
+        painter.translate(+1.5, +1)
+        painter.translate(0, +1)
+        painter.setPen(contrast_pen)
+        painter.drawLine(-3.5, -3.5, 3.5, 3.5)
+        painter.drawLine(-3.5, 3.5, 3.5, -3.5)
+        painter.translate(0, -1)
+        painter.setPen(pen)
+        painter.drawLine(-3.5, -3.5, 3.5, 3.5)
+        painter.drawLine(-3.5, 3.5, 3.5, -3.5)
+        painter.restore()
+
+    @run_in_gui_thread
+    def handle_notification(self, notification):
+        handler = getattr(self, '_NH_%s' % notification.name, Null)
+        handler(notification)
+
+    def _NH_SIPApplicationDidStart(self, notification): # this should not run in the gui thread -Dan
+        notification.center.add_observer(self, name='CFGSettingsObjectDidChange')
+
+    def _NH_CFGSettingsObjectDidChange(self, notification):
+        settings = SIPSimpleSettings()
+        blink_settings = BlinkSettings()
+        if notification.sender is settings:
+            if 'audio.muted' in notification.data.modified:
+                self.mute_button.setChecked(settings.audio.muted)
+        elif notification.sender is blink_settings:
+            if 'presence.icon' in notification.data.modified:
+                QWebSettings.clearMemoryCaches()
+
+    def _NH_BlinkSessionNewIncoming(self, notification):
+        if 'chat' in notification.sender.streams.types:
+            # temporary show the session list view until we have a detail view -Dan
+            if not self.session_list.isVisibleTo(self):
+                self.session_list.animation.setDirection(QPropertyAnimation.Forward)
+                self.session_list.animation.setStartValue(self.session_widget.geometry())
+                self.session_list.animation.setEndValue(self.session_panel.rect())
+                self.session_list.show()
+                self.session_list.animation.start()
+            self.show()
+
+    def _NH_BlinkSessionNewOutgoing(self, notification):
+        if 'chat' in notification.sender.stream_descriptions.types:
+            # temporary show the session list view until we have a detail view -Dan
+            if not self.session_list.isVisibleTo(self):
+                self.session_list.animation.setDirection(QPropertyAnimation.Forward)
+                self.session_list.animation.setStartValue(self.session_widget.geometry())
+                self.session_list.animation.setEndValue(self.session_panel.rect())
+                self.session_list.show()
+                self.session_list.animation.start()
+            self.show()
+
+    def _NH_BlinkSessionDidReinitializeForIncoming(self, notification):
+        model = self.session_model
+        position = model.sessions.index(notification.sender.items.chat)
+        selection_model = self.session_list.selectionModel()
+        selection_model.select(model.index(position), selection_model.ClearAndSelect)
+        self.session_list.scrollTo(model.index(position), QListView.EnsureVisible) # or PositionAtCenter
+        if 'chat' in notification.sender.streams.types:
+            self.show()
+
+    def _NH_BlinkSessionDidReinitializeForOutgoing(self, notification):
+        model = self.session_model
+        position = model.sessions.index(notification.sender.items.chat)
+        selection_model = self.session_list.selectionModel()
+        selection_model.select(model.index(position), selection_model.ClearAndSelect)
+        self.session_list.scrollTo(model.index(position), QListView.EnsureVisible) # or PositionAtCenter
+        if 'chat' in notification.sender.stream_descriptions.types:
+            self.show()
+
+    # use BlinkSessionNewIncoming/Outgoing to show the chat window if there is a chat stream available (like with reinitialize) instead of using the sessionAdded signal from the model -Dan
+    # or maybe not. sessionAdded means it was added to the model, while during NewIncoming/Outgoing we do not know that yet. but then we have a problem with the DidReinitialize since
+    # they do not check if the session is in the model. maybe the right approach is to always have BlinkSessions in the model and if we need any other kind of sessions we create a
+    # different class for them that posts different notifications. in that case we can do in in NewIncoming/Outgoing -Dan
+
+    def _NH_BlinkSessionWillConnect(self, notification):
+        self.hold_button.setEnabled(False)
+
+    def _NH_BlinkSessionDidConnect(self, notification):
+        self.hold_button.setEnabled(True)
+
+    def _NH_BlinkSessionWillAddStream(self, notification):
+        self.hold_button.setEnabled(False)
+        if notification.data.stream.type == 'chat':
+            self.show()
+
+    def _NH_BlinkSessionDidAddStream(self, notification):
+        self.hold_button.setEnabled(True)
+
+    def _NH_BlinkSessionDidNotAddStream(self, notification):
+        self.hold_button.setEnabled(True)
+
+    def _NH_BlinkSessionDidRemoveStream(self, notification):
+        self._update_control_menu()
+
+    def _NH_BlinkSessionDidChangeState(self, notification):
+        # even if we use this, we also need to listen for BlinkSessionDidRemoveStream as that transition doesn't change the state at all -Dan
+        self._update_control_menu()
+
+    def _NH_ChatSessionItemDidChange(self, notification):
+        self._update_widgets_for_session()
+
+    def _NH_ChatStreamGotMessage(self, notification):
+        session = notification.sender.blink_session.items.chat
+        if session is None:
+            return
+        message = notification.data.message
+        if not message.content_type.startswith('text/'):
+            # TODO: check with OSX version what special messages we could get -Saul
+            return
+        if message.body.startswith('?OTRv2?'):
+            # TODO: add support for OTR -Saul
+            return
+        # TODO: if we are in a conference, find the contact and icon -Saul
+        uri = '%s@%s' % (message.sender.uri.user, message.sender.uri.host)
+        icon = session.icon or session.default_user_icon
+        sender = ChatSender(message.sender.display_name, uri, icon.filename)
+        content = message.body if message.content_type=='text/html' else QTextDocument(message.body).toHtml()
+        session.chat_widget.add_message(ChatMessage(content, sender, 'incoming'))
+        session.remote_composing = False
+
+    def _NH_ChatStreamGotComposingIndication(self, notification):
+        session = notification.sender.blink_session.items.chat
+        if session is None:
+            return
+        session.update_composing_indication(notification.data)
+
+    def _NH_ChatStreamDidSendMessage(self, notification):
+        session = notification.sender.blink_session.items.chat
+        if session is None:
+            return
+        # TODO: do we want to use this? Play the message sent tone? -Saul
+
+    def _NH_ChatStreamDidDeliverMessage(self, notification):
+        session = notification.sender.blink_session.items.chat
+        if session is None:
+            return
+        # TODO: implement -Saul
+
+    def _NH_ChatStreamDidNotDeliverMessage(self, notification):
+        session = notification.sender.blink_session.items.chat
+        if session is None:
+            return
+        # TODO: implement -Saul
+
+    def _NH_MediaStreamDidInitialize(self, notification):
+        if notification.sender.type != 'chat':
+            return
+        session = notification.sender.blink_session.items.chat
+        if session is None:
+            return
+        notification.sender._blink_fail_reason = None
+        #session.chat_widget.add_message(ChatStatus('Connecting...')) # disable it until we can replace it in the DOM -Dan
+
+    def _NH_MediaStreamDidStart(self, notification):
+        if notification.sender.type != 'chat':
+            return
+        session = notification.sender.blink_session.items.chat
+        if session is None:
+            return
+        session.chat_widget.add_message(ChatStatus('Connected'))
+
+    def _NH_MediaStreamDidEnd(self, notification):
+        if notification.sender.type != 'chat':
+            return
+        session = notification.sender.blink_session.items.chat
+        if session is None:
+            return
+        stream = notification.sender
+        if stream._blink_fail_reason:
+            session.chat_widget.add_message(ChatStatus('Disconnected: %s' % stream._blink_fail_reason))
+        else:
+            session.chat_widget.add_message(ChatStatus('Disconnected'))
+
+    def _NH_MediaStreamDidFail(self, notification):
+        if notification.sender.type != 'chat':
+            return
+        session = notification.sender.blink_session.items.chat
+        if session is None:
+            return
+        notification.sender._blink_fail_reason = notification.data.reason
+
+    # signal handlers
+    #
+    def _SH_MuteButtonClicked(self, checked):
+        settings = SIPSimpleSettings()
+        settings.audio.muted = checked
+        settings.save()
+
+    def _SH_HoldButtonClicked(self, checked):
+        if checked:
+            self.selected_session.blink_session.hold()
+        else:
+            self.selected_session.blink_session.unhold()
+
+    def _SH_RecordButtonClicked(self, checked):
+        if checked:
+            self.selected_session.blink_session.start_recording()
+        else:
+            self.selected_session.blink_session.stop_recording()
+
+    def _SH_ControlButtonClicked(self, checked):
+        # this is only called if the control button doesn't have a menu attached
+        if self.selected_session.blink_session.state == 'connected/sent_proposal':
+            self.selected_session.blink_session.sip_session.cancel_proposal()
+        else:
+            self.selected_session.end()
+
+    def _SH_SessionModelSessionAdded(self, session):
+        model = self.session_model
+        position = model.sessions.index(session)
+        session.chat_widget = ChatWidget(session, self.tab_widget)
+        self.tab_widget.insertTab(position, session.chat_widget, session.name)
+        selection_model = self.session_list.selectionModel()
+        selection_model.select(model.index(position), selection_model.ClearAndSelect)
+        self.session_list.scrollTo(model.index(position), QListView.EnsureVisible) # or PositionAtCenter
+
+    def _SH_SessionModelSessionRemoved(self, session):
+        self.tab_widget.removeTab(self.tab_widget.indexOf(session.chat_widget))
+        session.chat_widget = None
+        if not self.session_model.sessions:
+            self.close()
+        elif not self.session_list.isVisibleTo(self):
+            self.session_list.animation.setDirection(QPropertyAnimation.Forward)
+            self.session_list.animation.setStartValue(self.session_widget.geometry())
+            self.session_list.animation.setEndValue(self.session_panel.rect())
+            self.session_list.show()
+            self.session_list.animation.start()
+
+    def _SH_SessionModelSessionAboutToBeRemoved(self, session):
+        # choose another one to select (a chat only or ended session if available, else one with audio but keep audio on hold? or select nothing and display the dummy tab?)
+        #selection_model = self.session_list.selectionModel()
+        #selection_model.clearSelection()
+        pass
+
+    def _SH_SessionListSelectionChanged(self, selected, deselected):
+        #print "-- chat selection changed %s -> %s" % ([x.row() for x in deselected.indexes()], [x.row() for x in selected.indexes()])
+        self.selected_session = selected[0].topLeft().data(Qt.UserRole) if selected else None
+        if self.selected_session is not None:
+            self.tab_widget.setCurrentWidget(self.selected_session.chat_widget)
+            # start animation to show list? -Dan
+        elif self.session_model.sessions:
+            self.tab_widget.setCurrentWidget(self.dummy_tab)
+            # start animation to show list? -Dan
+        else:
+            self.hide()
+
+    def _AH_Connect(self):
+        blink_session = self.selected_session.blink_session
+        if blink_session.state == 'ended':
+            blink_session.init_outgoing(blink_session.account, blink_session.contact, blink_session.contact_uri, stream_descriptions=[StreamDescription('chat')], reinitialize=True)
+        blink_session.connect()
+
+    def _AH_ConnectWithAudio(self):
+        stream_descriptions = [StreamDescription('audio'), StreamDescription('chat')]
+        blink_session = self.selected_session.blink_session
+        blink_session.init_outgoing(blink_session.account, blink_session.contact, blink_session.contact_uri, stream_descriptions=stream_descriptions, reinitialize=True)
+        blink_session.connect()
+
+    def _AH_Disconnect(self):
+        self.selected_session.end()
+
+    def _AH_AddAudio(self):
+        self.selected_session.blink_session.add_stream(StreamDescription('audio'))
+
+    def _AH_RemoveAudio(self):
+        self.selected_session.blink_session.remove_stream(self.selected_session.blink_session.streams.get('audio'))
+
+    def _AH_DumpSession(self):
+        blink_session = self.selected_session.blink_session
+        print "state:   %r" % blink_session.state
+        print "streams: %r" % [stream for stream in blink_session.streams]
+        print "hold:    %r/%r" % (blink_session.local_hold, blink_session.remote_hold)
+        print "conf:    %r" % blink_session.conference
+        print "active:  %r" % blink_session.active
+
+    def _EH_CloseSession(self):
+        if self.selected_session is not None:
+            self.selected_session.end(delete=True)
+
+    def _EH_ShowSessions(self):
+        self.session_list.animation.setDirection(QPropertyAnimation.Forward)
+        self.session_list.animation.setStartValue(self.session_widget.geometry())
+        self.session_list.animation.setEndValue(self.session_panel.rect())
+        self.session_list.show()
+        self.session_list.animation.start()
+
+del ui_class, base_class
+
+

blink/configuration/account.py

@@ -10,11 +10,12 @@ from sipsimple.configuration import Setting, SettingsGroup, SettingsObjectExtens
 from sipsimple.configuration.datatypes import AudioCodecList, Hostname, MSRPConnectionModel, MSRPTransport, NonNegativeInteger, SIPTransportList, SRTPEncryption
 from sipsimple.util import user_info
 
-from blink.configuration.datatypes import ApplicationDataPath, CustomSoundFile, DefaultPath, HTTPURL, IconDescriptor
+from blink.configuration.datatypes import ApplicationDataPath, HTTPURL, IconDescriptor, SoundFile
+from blink.resources import Resources
 
 
 class BonjourMSRPSettingsExtension(BonjourMSRPSettings):
-    transport = Setting(type=MSRPTransport, default='tcp')
+    transport = Setting(type=MSRPTransport, default='tls')
 
 
 class BonjourSIPSettings(SettingsGroup):
@@ -27,6 +28,7 @@ class MessageSummarySettingsExtension(MessageSummarySettings):
 
 class MSRPSettingsExtension(MSRPSettings):
     connection_model = Setting(type=MSRPConnectionModel, default='relay')
+    transport = Setting(type=MSRPTransport, default='tls')
 
 
 class PresenceSettingsExtension(PresenceSettings):
@@ -59,11 +61,11 @@ class ServerSettings(SettingsGroup):
 
 
 class SoundSettings(SettingsGroup):
-    inbound_ringtone = Setting(type=CustomSoundFile, default=CustomSoundFile(DefaultPath), nillable=True)
+    inbound_ringtone = Setting(type=SoundFile, default=None, nillable=True)
 
 
 class TLSSettingsExtension(TLSSettings):
-    certificate = Setting(type=ApplicationDataPath, default=None, nillable=True)
+    certificate = Setting(type=ApplicationDataPath, default=ApplicationDataPath(Resources.get('tls/default.crt')), nillable=True)
 
 
 class XCAPSettingsExtension(XCAPSettings):
@@ -91,5 +93,6 @@ class BonjourAccountExtension(SettingsObjectExtension):
     rtp = RTPSettingsExtension
     sip = BonjourSIPSettings
     sounds = SoundSettings
+    tls = TLSSettingsExtension
 
 

blink/configuration/datatypes.py

@@ -63,7 +63,7 @@ class DefaultPath(object):
     def __repr__(self):
         return self.__class__.__name__
 
-class CustomSoundFile(object):
+class CustomSoundFile(object): # check if this data type is still needed -Dan
     def __init__(self, path=DefaultPath, volume=100):
         self.path = path
         self.volume = int(volume)

blink/configuration/settings.py

@@ -80,7 +80,7 @@ class SoundSettings(SettingsGroup):
 
 
 class TLSSettingsExtension(TLSSettings):
-    ca_list = Setting(type=ApplicationDataPath, default=None, nillable=True)
+    ca_list = Setting(type=ApplicationDataPath, default=ApplicationDataPath(Resources.get('tls/ca.crt')), nillable=True)
 
 
 class SIPSimpleSettingsExtension(SettingsObjectExtension):

blink/contacts.py

 # Copyright (C) 2010-2013 AG Projects. See LICENSE for details.
 #
 
-__all__ = ['Group', 'Contact', 'BonjourNeighbour', 'GoogleContact', 'ContactModel', 'ContactSearchModel', 'ContactListView', 'ContactSearchListView', 'ContactEditorDialog', 'GoogleContactsDialog']
+__all__ = ['Group', 'Contact', 'BonjourNeighbour', 'GoogleContact', 'ContactModel', 'ContactSearchModel', 'ContactListView', 'ContactSearchListView', 'ContactEditorDialog', 'GoogleContactsDialog', 'URIUtils']
 
 import cPickle as pickle
 import os
@@ -26,6 +26,8 @@ from datetime import datetime
 from eventlib import coros, proc
 from eventlib.green import httplib, urllib2
 from functools import partial
+from heapq import heappush
+from itertools import count
 from operator import attrgetter
 from twisted.internet import reactor
 from twisted.internet.error import ConnectionLost
@@ -36,16 +38,18 @@ from sipsimple.account import AccountManager, BonjourAccount
 from sipsimple.account.bonjour import BonjourServiceDescription
 from sipsimple.configuration import ConfigurationManager, DefaultValue, Setting, SettingsState, SettingsObjectMeta, ObjectNotFoundError
 from sipsimple.configuration.settings import SIPSimpleSettings
+from sipsimple.core import BaseSIPURI, SIPURI
 from sipsimple.threading import run_in_thread, run_in_twisted_thread
 from sipsimple.threading.green import Command, call_in_green_thread, run_in_green_thread
 
 from blink.configuration.datatypes import AuthorizationToken, InvalidToken, IconDescriptor, FileURL
 from blink.resources import ApplicationData, Resources, IconManager
-from blink.sessions import SessionManager
+from blink.sessions import SessionManager, StreamDescription
 from blink.util import QSingleton, run_in_gui_thread
 from blink.widgets.buttons import SwitchViewButton
 from blink.widgets.color import ColorHelperMixin
 from blink.widgets.labels import Status
+from blink.widgets.util import ContextMenuActions
 
 from blink.google.gdata.client import CaptchaChallenge, RequestError, Unauthorized
 from blink.google.gdata.contacts.client import ContactsClient
@@ -293,6 +297,7 @@ class BonjourNeighbour(object):
         self.hostname = hostname
         self.uris = BonjourNeighbourURIList(uris)
         self.presence = presence or BonjourPresence()
+        self.preferred_media = 'audio'
 
 
 class BonjourNeighboursList(object):
@@ -481,6 +486,7 @@ class GoogleContact(object):
         self.icon = icon
         self.uris = GoogleContactURIList(uris)
         self.presence = GooglePresence()
+        self.preferred_media = 'audio'
 
     def __reduce__(self):
         return (self.__class__, (self.id, self.name, self.company, self.icon, self.uris))
@@ -806,6 +812,63 @@ class GoogleContactsGroup(VirtualGroup):
         notification.center.post_notification('VirtualContactDidChange', sender=notification.data.contact)
 
 
+class DummyContactURI(object):
+    id = property(lambda self: self.uri)
+
+    def __init__(self, uri, type=u'', default=False):
+        self.uri = uri
+        self.type = type
+        self.default = default
+
+    def __repr__(self):
+        return "%s(%r, %r, %r)" % (self.__class__.__name__, self.uri, self.type, self.default)
+
+
+class DummyContactURIList(object):
+    def __init__(self, uris=[]):
+        self._uri_map = OrderedDict((uri.id, uri) for uri in uris)
+    def __getitem__(self, id):
+        return self._uri_map[id]
+    def __contains__(self, id):
+        return id in self._uri_map
+    def __iter__(self):
+        return iter(self._uri_map.values())
+    def __len__(self):
+        return len(self._uri_map)
+    __hash__ = None
+    def get(self, key, default=None):
+        return self._item_map.get(key, default)
+    def add(self, uri):
+        self._uri_map[uri.id] = uri
+    def pop(self, id, *args):
+        return self._uri_map.pop(id, *args)
+    def remove(self, uri):
+        self._uri_map.pop(uri.id, None)
+    @property
+    def default(self):
+        try:
+            return next(uri for uri in self if uri.default)
+        except StopIteration:
+            return None
+
+
+class DummyPresence(object):
+    def __init__(self, state=None, note=None):
+        self.state = state
+        self.note = note
+
+
+class DummyContact(object):
+    def __init__(self, name, uris):
+        self.name = name
+        self.uris = DummyContactURIList(uris)
+        self.presence = DummyPresence()
+        self.preferred_media = 'audio'
+
+    def __reduce__(self):
+        return (self.__class__, (self.name, self.uris))
+
+
 class Group(object):
     implements(IObserver)
 
@@ -918,7 +981,8 @@ class ContactIconDescriptor(object):
         self.icon = None
     def __get__(self, obj, objtype):
         if self.icon is None:
-            self.icon = QIcon(ApplicationData.get(self.filename))
+            self.icon = QIcon(self.filename)
+            self.icon.filename = self.filename
         return self.icon
     def __set__(self, obj, value):
         raise AttributeError("attribute cannot be set")
@@ -983,7 +1047,7 @@ class Contact(object):
             group = BonjourNeighboursGroup()
         else:
             group = None
-        self.settings = group.contacts[contact_id]
+        self.settings = group.contacts[contact_id] # problem if group is None -Dan
         self.__dict__.update(state)
 
     def __unicode__(self):
@@ -1007,10 +1071,10 @@ class Contact(object):
 
     @property
     def info(self):
-        if isinstance(self.settings, BonjourNeighbour):
-            return self.note or '@' + self.uri.host
-        else:
-            return self.note or self.uri
+        try:
+            return self.note or ('@' + self.uri.uri.host if isinstance(self.settings, BonjourNeighbour) else self.uri.uri)
+        except AttributeError:
+            return u''
 
     @property
     def uris(self):
@@ -1018,12 +1082,10 @@ class Contact(object):
 
     @property
     def uri(self):
-        if self.settings.uris.default is not None:
-            return self.settings.uris.default.uri
         try:
-            return next(uri.uri for uri in self.settings.uris)
+            return self.settings.uris.default or next(iter(self.settings.uris))
         except StopIteration:
-            return u''
+            return None
 
     @property
     def state(self):
@@ -1033,6 +1095,10 @@ class Contact(object):
     def note(self):
         return self.settings.presence.note
 
+    @property
+    def preferred_media(self):
+        return self.settings.preferred_media
+
     @property
     def icon(self):
         try:
@@ -1045,6 +1111,7 @@ class Contact(object):
                 pixmap = QPixmap()
                 if pixmap.loadFromData(self.settings.icon.data):
                     icon = QIcon(pixmap)
+                    icon.filename = None  # TODO: cache icons to disk -Saul
                 else:
                     icon = self.default_user_icon
             else:
@@ -1123,7 +1190,7 @@ class ContactDetail(object):
             group = BonjourNeighboursGroup()
         else:
             group = None
-        self.settings = group.contacts[contact_id]
+        self.settings = group.contacts[contact_id] # problem if group is None -Dan
         self.__dict__.update(state)
 
     def __unicode__(self):
@@ -1147,10 +1214,10 @@ class ContactDetail(object):
 
     @property
     def info(self):
-        if isinstance(self.settings, BonjourNeighbour):
-            return self.note or '@' + self.uri.host
-        else:
-            return self.note or self.uri
+        try:
+            return self.note or ('@' + self.uri.uri.host if isinstance(self.settings, BonjourNeighbour) else self.uri.uri)
+        except AttributeError:
+            return u''
 
     @property
     def uris(self):
@@ -1158,12 +1225,10 @@ class ContactDetail(object):
 
     @property
     def uri(self):
-        if self.settings.uris.default is not None:
-            return self.settings.uris.default.uri
         try:
-            return next(uri.uri for uri in self.settings.uris)
+            return self.settings.uris.default or next(iter(self.settings.uris))
         except StopIteration:
-            return u''
+            return None
 
     @property
     def state(self):
@@ -1173,6 +1238,10 @@ class ContactDetail(object):
     def note(self):
         return self.settings.presence.note
 
+    @property
+    def preferred_media(self):
+        return self.settings.preferred_media
+
     @property
     def icon(self):
         try:
@@ -1266,7 +1335,7 @@ class ContactURI(object):
             group = BonjourNeighboursGroup()
         else:
             group = None
-        self.contact = group.contacts[contact_id]
+        self.contact = group.contacts[contact_id] # problem if group is None -Dan
         if uri_id is not None:
             self.uri = self.contact.uris[uri_id]
         self.__dict__.update(state)
@@ -1645,7 +1714,7 @@ class ContactDelegate(QStyledItemDelegate, ColorHelperMixin):
         item = index.data(Qt.UserRole)
         if isinstance(item, Group):
             item.widget = GroupWidget(parent)
-            item.widget.collapse_button.toggled.connect(partial(self._update_list_view, item))
+            item.widget.collapse_button.toggled.connect(partial(self._update_list_view, item)) # the partial still creates a memory cycle -Dan
             return item.widget
         else:
             return None
@@ -2056,7 +2125,6 @@ class ContactModel(QAbstractListModel):
         self.state = 'stopped'
         self.items = ItemList()
         self.deleted_items = []
-        self.main_window = parent
         self.contact_list = parent.contact_list
         self.virtual_group_manager = VirtualGroupManager()
 
@@ -2552,7 +2620,6 @@ class ContactSearchModel(QSortFilterProxyModel):
 
     def __init__(self, model, parent=None):
         super(ContactSearchModel, self).__init__(parent)
-        self.main_window = parent
         self.contact_list = parent.search_list
         self.setSourceModel(model)
         self.setDynamicSortFilter(True)
@@ -2776,10 +2843,6 @@ class ContactDetailModel(QAbstractListModel):
             self.dataChanged.emit(index, index)
 
 
-class ContextMenuActions(object):
-    pass
-
-
 class ContactListView(QListView):
     def __init__(self, parent=None):
         super(ContactListView, self).__init__(parent)
@@ -2797,7 +2860,7 @@ class ContactListView(QListView):
         self.actions.delete_item = QAction("Delete", self, triggered=self._AH_DeleteSelection)
         self.actions.delete_selection = QAction("Delete Selection", self, triggered=self._AH_DeleteSelection)
         self.actions.undo_last_delete = QAction("Undo Last Delete", self, triggered=self._AH_UndoLastDelete)
-        self.actions.start_audio_session = QAction("Start Audio Call", self, triggered=self._AH_StartAudioCall)
+        self.actions.start_audio_call = QAction("Start Audio Call", self, triggered=self._AH_StartAudioCall)
         self.actions.start_chat_session = QAction("Start Chat Session", self, triggered=self._AH_StartChatSession)
         self.actions.send_sms = QAction("Send SMS", self, triggered=self._AH_SendSMS)
         self.actions.send_files = QAction("Send File(s)...", self, triggered=self._AH_SendFiles)
@@ -2807,11 +2870,14 @@ class ContactListView(QListView):
         self.needs_restore = False
         self.doubleClicked.connect(self._SH_DoubleClicked) # activated is emitted on single click
 
-    def setModel(self, model):
-        selection_model = self.selectionModel() or Null
-        selection_model.selectionChanged.disconnect(self._SH_SelectionModelSelectionChanged)
-        super(ContactListView, self).setModel(model)
-        self.selectionModel().selectionChanged.connect(self._SH_SelectionModelSelectionChanged)
+    def selectionChanged(self, selected, deselected):
+        super(ContactListView, self).selectionChanged(selected, deselected)
+        selection_model = self.selectionModel()
+        selection = selection_model.selection()
+        if selection_model.currentIndex() not in selection:
+            index = selection.indexes()[0] if not selection.isEmpty() else self.model().index(-1)
+            selection_model.setCurrentIndex(index, selection_model.Select)
+        self.context_menu.hide()
 
     def contextMenuEvent(self, event):
         model = self.model()
@@ -2865,7 +2931,7 @@ class ContactListView(QListView):
             self.actions.undo_last_delete.setEnabled(len(model.deleted_items) > 0)
         else:
             contact = selected_items[0]
-            menu.addAction(self.actions.start_audio_session)
+            menu.addAction(self.actions.start_audio_call)
             menu.addAction(self.actions.start_chat_session)
             menu.addAction(self.actions.send_sms)
             menu.addAction(self.actions.send_files)
@@ -2880,8 +2946,8 @@ class ContactListView(QListView):
             self.actions.undo_last_delete.setText(undo_delete_text)
             account_manager = AccountManager()
             default_account = account_manager.default_account
-            self.actions.start_audio_session.setEnabled(default_account is not None)
-            self.actions.start_chat_session.setEnabled(False)
+            self.actions.start_audio_call.setEnabled(default_account is not None)
+            self.actions.start_chat_session.setEnabled(default_account is not None)
             self.actions.send_sms.setEnabled(False)
             self.actions.send_files.setEnabled(False)
             self.actions.request_screen.setEnabled(False)
@@ -2900,7 +2966,7 @@ class ContactListView(QListView):
             item = selected_indexes[0].data(Qt.UserRole) if len(selected_indexes)==1 else None
             if isinstance(item, Contact):
                 session_manager = SessionManager()
-                session_manager.start_call(item.name, item.uri, contact=item, account=BonjourAccount() if isinstance(item.settings, BonjourNeighbour) else None)
+                session_manager.create_session(item, item.uri, [StreamDescription(media) for media in item.preferred_media.split('+')], connect=('audio' in item.preferred_media))
         elif event.key() == Qt.Key_Space:
             selected_indexes = self.selectionModel().selectedIndexes()
             item = selected_indexes[0].data(Qt.UserRole) if len(selected_indexes)==1 else None
@@ -2950,7 +3016,7 @@ class ContactListView(QListView):
             for group in self.model().items[GroupList]:
                 group.restore_state()
             self.needs_restore = False
-        main_window = self.model().main_window
+        main_window = QApplication.instance().main_window
         main_window.switch_view_button.dnd_active = False
         if not main_window.session_model.sessions:
             main_window.switch_view_button.view = SwitchViewButton.ContactView
@@ -2979,7 +3045,7 @@ class ContactListView(QListView):
                         group.collapse()
                     self.needs_restore = True
             if has_blink_contacts:
-                model.main_window.switch_view_button.dnd_active = True
+                QApplication.instance().main_window.switch_view_button.dnd_active = True
             event.accept()
             self.setState(self.DraggingState)
 
@@ -3034,7 +3100,6 @@ class ContactListView(QListView):
         selection_model.select(model.index(model.items.index(group)), selection_model.ClearAndSelect)
 
     def _AH_AddContact(self):
-        model = self.model()
         groups = set()
         for index in self.selectionModel().selectedIndexes():
             item = index.data(Qt.UserRole)
@@ -3043,21 +3108,20 @@ class ContactListView(QListView):
             elif isinstance(item, Contact) and not item.group.virtual:
                 groups.add(item.group)
         preferred_group = groups.pop() if len(groups)==1 else None
-        model.main_window.contact_editor_dialog.open_for_add(model.main_window.search_box.text(), preferred_group)
+        main_window = QApplication.instance().main_window
+        main_window.contact_editor_dialog.open_for_add(main_window.search_box.text(), preferred_group)
 
     def _AH_EditItem(self):
-        model = self.model()
         index = self.selectionModel().selectedIndexes()[0]
         item = index.data(Qt.UserRole)
         if isinstance(item, Group):
             self.scrollTo(index)
             item.widget.edit()
         else:
-            model.main_window.contact_editor_dialog.open_for_edit(item.settings)
+            QApplication.instance().main_window.contact_editor_dialog.open_for_edit(item.settings)
 
     def _AH_DeleteSelection(self):
-        model = self.model()
-        model.removeItems(self.selectionModel().selectedIndexes())
+        self.model().removeItems(self.selectionModel().selectedIndexes())
         self.selectionModel().clearSelection()
 
     def _AH_UndoLastDelete(self):
@@ -3100,10 +3164,12 @@ class ContactListView(QListView):
     def _AH_StartAudioCall(self):
         contact = self.selectionModel().selectedIndexes()[0].data(Qt.UserRole)
         session_manager = SessionManager()
-        session_manager.start_call(contact.name, contact.uri, contact=contact, account=BonjourAccount() if isinstance(contact.settings, BonjourNeighbour) else None)
+        session_manager.create_session(contact, contact.uri, [StreamDescription('audio')])
 
     def _AH_StartChatSession(self):
-        pass
+        contact = self.selectionModel().selectedIndexes()[0].data(Qt.UserRole)
+        session_manager = SessionManager()
+        session_manager.create_session(contact, contact.uri, [StreamDescription('chat')], connect=False)
 
     def _AH_SendSMS(self):
         pass
@@ -3185,15 +3251,7 @@ class ContactListView(QListView):
         item = index.data(Qt.UserRole)
         if isinstance(item, Contact):
             session_manager = SessionManager()
-            session_manager.start_call(item.name, item.uri, contact=item, account=BonjourAccount() if isinstance(item.settings, BonjourNeighbour) else None)
-
-    def _SH_SelectionModelSelectionChanged(self, selected, deselected):
-        selection_model = self.selectionModel()
-        selection = selection_model.selection()
-        if selection_model.currentIndex() not in selection:
-            index = selection.indexes()[0] if not selection.isEmpty() else self.model().index(-1)
-            selection_model.setCurrentIndex(index, selection_model.Select)
-        self.context_menu.hide()
+            session_manager.create_session(item, item.uri, [StreamDescription(media) for media in item.preferred_media.split('+')], connect=('audio' in item.preferred_media))
 
 
 class ContactSearchListView(QListView):
@@ -3211,7 +3269,7 @@ class ContactSearchListView(QListView):
         self.actions.delete_item = QAction("Delete", self, triggered=self._AH_DeleteSelection)
         self.actions.delete_selection = QAction("Delete Selection", self, triggered=self._AH_DeleteSelection)
         self.actions.undo_last_delete = QAction("Undo Last Delete", self, triggered=self._AH_UndoLastDelete)
-        self.actions.start_audio_session = QAction("Start Audio Call", self, triggered=self._AH_StartAudioCall)
+        self.actions.start_audio_call = QAction("Start Audio Call", self, triggered=self._AH_StartAudioCall)
         self.actions.start_chat_session = QAction("Start Chat Session", self, triggered=self._AH_StartChatSession)
         self.actions.send_sms = QAction("Send SMS", self, triggered=self._AH_SendSMS)
         self.actions.send_files = QAction("Send File(s)...", self, triggered=self._AH_SendFiles)
@@ -3220,11 +3278,14 @@ class ContactSearchListView(QListView):
         self.drop_indicator_index = QModelIndex()
         self.doubleClicked.connect(self._SH_DoubleClicked) # activated is emitted on single click
 
-    def setModel(self, model):
-        selection_model = self.selectionModel() or Null
-        selection_model.selectionChanged.disconnect(self._SH_SelectionModelSelectionChanged)
-        super(ContactSearchListView, self).setModel(model)
-        self.selectionModel().selectionChanged.connect(self._SH_SelectionModelSelectionChanged)
+    def selectionChanged(self, selected, deselected):
+        super(ContactSearchListView, self).selectionChanged(selected, deselected)
+        selection_model = self.selectionModel()
+        selection = selection_model.selection()
+        if selection_model.currentIndex() not in selection:
+            index = selection.indexes()[0] if not selection.isEmpty() else self.model().index(-1, -1)
+            selection_model.setCurrentIndex(index, selection_model.Select)
+        self.context_menu.hide()
 
     def contextMenuEvent(self, event):
         model = self.model()
@@ -3265,7 +3326,7 @@ class ContactSearchListView(QListView):
             self.actions.undo_last_delete.setEnabled(len(source_model.deleted_items) > 0)
         else:
             contact = selected_items[0]
-            menu.addAction(self.actions.start_audio_session)
+            menu.addAction(self.actions.start_audio_call)
             menu.addAction(self.actions.start_chat_session)
             menu.addAction(self.actions.send_sms)
             menu.addAction(self.actions.send_files)
@@ -3278,8 +3339,8 @@ class ContactSearchListView(QListView):
             self.actions.undo_last_delete.setText(undo_delete_text)
             account_manager = AccountManager()
             default_account = account_manager.default_account
-            self.actions.start_audio_session.setEnabled(default_account is not None)
-            self.actions.start_chat_session.setEnabled(False)
+            self.actions.start_audio_call.setEnabled(default_account is not None)
+            self.actions.start_chat_session.setEnabled(default_account is not None)
             self.actions.send_sms.setEnabled(False)
             self.actions.send_files.setEnabled(False)
             self.actions.request_screen.setEnabled(False)
@@ -3305,9 +3366,9 @@ class ContactSearchListView(QListView):
             item = selected_indexes[0].data(Qt.UserRole) if len(selected_indexes)==1 else None
             if isinstance(item, Contact):
                 session_manager = SessionManager()
-                session_manager.start_call(item.name, item.uri, contact=item, account=BonjourAccount() if isinstance(item.settings, BonjourNeighbour) else None)
+                session_manager.create_session(item, item.uri, [StreamDescription(media) for media in item.preferred_media.split('+')], connect=('audio' in item.preferred_media))
         elif event.key() == Qt.Key_Escape:
-            self.model().main_window.search_box.clear()
+            QApplication.instance().main_window.search_box.clear()
         elif event.key() == Qt.Key_Space:
             selected_indexes = self.selectionModel().selectedIndexes()
             item = selected_indexes[0].data(Qt.UserRole) if len(selected_indexes)==1 else None
@@ -3335,19 +3396,18 @@ class ContactSearchListView(QListView):
 
     def startDrag(self, supported_actions):
         super(ContactSearchListView, self).startDrag(supported_actions)
-        main_window = self.model().main_window
+        main_window = QApplication.instance().main_window
         main_window.switch_view_button.dnd_active = False
         if not main_window.session_model.sessions:
             main_window.switch_view_button.view = SwitchViewButton.ContactView
 
     def dragEnterEvent(self, event):
-        model = self.model()
-        accepted_mime_types = set(model.accepted_mime_types)
+        accepted_mime_types = set(self.model().accepted_mime_types)
         provided_mime_types = set(event.mimeData().formats())
         acceptable_mime_types = accepted_mime_types & provided_mime_types
         if event.source() is self:
             event.ignore()
-            model.main_window.switch_view_button.dnd_active = True
+            QApplication.instance().main_window.switch_view_button.dnd_active = True
         elif not acceptable_mime_types:
             event.ignore()
         else:
@@ -3386,9 +3446,8 @@ class ContactSearchListView(QListView):
         self.drop_indicator_index = QModelIndex()
 
     def _AH_EditItem(self):
-        model = self.model()
         contact = self.selectionModel().selectedIndexes()[0].data(Qt.UserRole)
-        model.main_window.contact_editor_dialog.open_for_edit(contact.settings)
+        QApplication.instance().main_window.contact_editor_dialog.open_for_edit(contact.settings)
 
     def _AH_DeleteSelection(self):
         model = self.model()
@@ -3434,10 +3493,12 @@ class ContactSearchListView(QListView):
     def _AH_StartAudioCall(self):
         contact = self.selectionModel().selectedIndexes()[0].data(Qt.UserRole)
         session_manager = SessionManager()
-        session_manager.start_call(contact.name, contact.uri, contact=contact, account=BonjourAccount() if isinstance(contact.settings, BonjourNeighbour) else None)
+        session_manager.create_session(contact, contact.uri, [StreamDescription('audio')])
 
     def _AH_StartChatSession(self):
-        pass
+        contact = self.selectionModel().selectedIndexes()[0].data(Qt.UserRole)
+        session_manager = SessionManager()
+        session_manager.create_session(contact, contact.uri, [StreamDescription('chat')], connect=False)
 
     def _AH_SendSMS(self):
         pass
@@ -3465,15 +3526,7 @@ class ContactSearchListView(QListView):
         item = index.data(Qt.UserRole)
         if isinstance(item, Contact):
             session_manager = SessionManager()
-            session_manager.start_call(item.name, item.uri, contact=item, account=BonjourAccount() if isinstance(item.settings, BonjourNeighbour) else None)
-
-    def _SH_SelectionModelSelectionChanged(self, selected, deselected):
-        selection_model = self.selectionModel()
-        selection = selection_model.selection()
-        if selection_model.currentIndex() not in selection:
-            index = selection.indexes()[0] if not selection.isEmpty() else self.model().index(-1, -1)
-            selection_model.setCurrentIndex(index, selection_model.Select)
-        self.context_menu.hide()
+            session_manager.create_session(item, item.uri, [StreamDescription(media) for media in item.preferred_media.split('+')], connect=('audio' in item.preferred_media))
 
 
 class ContactDetailView(QListView):
@@ -3500,7 +3553,7 @@ class ContactDetailView(QListView):
         self.actions.delete_contact = QAction("Delete Contact", self, triggered=self._AH_DeleteContact)
         self.actions.edit_contact = QAction("Edit Contact", self, triggered=self._AH_EditContact)
         self.actions.make_uri_default = QAction("Set Address As Default", self, triggered=self._AH_MakeURIDefault)
-        self.actions.start_audio_session = QAction("Start Audio Call", self, triggered=self._AH_StartAudioCall)
+        self.actions.start_audio_call = QAction("Start Audio Call", self, triggered=self._AH_StartAudioCall)
         self.actions.start_chat_session = QAction("Start Chat Session", self, triggered=self._AH_StartChatSession)
         self.actions.send_sms = QAction("Send SMS", self, triggered=self._AH_SendSMS)
         self.actions.send_files = QAction("Send File(s)...", self, triggered=self._AH_SendFiles)
@@ -3512,11 +3565,16 @@ class ContactDetailView(QListView):
     def setModel(self, model):
         old_model = self.model() or Null
         old_model.contactDeleted.disconnect(self._SH_ModelContactDeleted)
-        selection_model = self.selectionModel() or Null
-        selection_model.selectionChanged.disconnect(self._SH_SelectionModelSelectionChanged)
         super(ContactDetailView, self).setModel(model)
         model.contactDeleted.connect(self._SH_ModelContactDeleted)
-        self.selectionModel().selectionChanged.connect(self._SH_SelectionModelSelectionChanged)
+
+    def selectionChanged(self, selected, deselected):
+        super(ContactDetailView, self).selectionChanged(selected, deselected)
+        selection_model = self.selectionModel()
+        selection = selection_model.selection()
+        if selection_model.currentIndex() not in selection:
+            index = selection.indexes()[0] if not selection.isEmpty() else self.model().index(-1)
+            selection_model.setCurrentIndex(index, selection_model.Select)
 
     def eventFilter(self, watched, event):
         if event.type() == QEvent.Resize:
@@ -3540,7 +3598,7 @@ class ContactDetailView(QListView):
         contact_has_uris = model.rowCount() > 1
         menu = self.context_menu
         menu.clear()
-        menu.addAction(self.actions.start_audio_session)
+        menu.addAction(self.actions.start_audio_call)
         menu.addAction(self.actions.start_chat_session)
         menu.addAction(self.actions.send_sms)
         menu.addAction(self.actions.send_files)
@@ -3552,8 +3610,8 @@ class ContactDetailView(QListView):
             self.actions.make_uri_default.setEnabled(selected_item.uri is not model.contact.uris.default)
         menu.addAction(self.actions.edit_contact)
         menu.addAction(self.actions.delete_contact)
-        self.actions.start_audio_session.setEnabled(account_manager.default_account is not None and contact_has_uris)
-        self.actions.start_chat_session.setEnabled(False)
+        self.actions.start_audio_call.setEnabled(account_manager.default_account is not None and contact_has_uris)
+        self.actions.start_chat_session.setEnabled(account_manager.default_account is not None and contact_has_uris)
         self.actions.send_sms.setEnabled(False)
         self.actions.send_files.setEnabled(False)
         self.actions.request_screen.setEnabled(False)
@@ -3576,14 +3634,14 @@ class ContactDetailView(QListView):
 
     def startDrag(self, supported_actions):
         super(ContactDetailView, self).startDrag(supported_actions)
-        main_window = self.contact_list.model().main_window
+        main_window = QApplication.instance().main_window
         main_window.switch_view_button.dnd_active = False
         if not main_window.session_model.sessions:
             main_window.switch_view_button.view = SwitchViewButton.ContactView
 
     def dragEnterEvent(self, event):
         if event.source() is self:
-            self.contact_list.model().main_window.switch_view_button.dnd_active = True
+            QApplication.instance().main_window.switch_view_button.dnd_active = True
         if set(event.mimeData().formats()).isdisjoint(self.model().accepted_mime_types):
             event.ignore()
         else:
@@ -3618,7 +3676,7 @@ class ContactDetailView(QListView):
         self.contact_list._AH_DeleteSelection()
 
     def _AH_EditContact(self):
-        self.contact_list.model().main_window.contact_editor_dialog.open_for_edit(self.model().contact)
+        QApplication.instance().main_window.contact_editor_dialog.open_for_edit(self.model().contact)
 
     def _AH_MakeURIDefault(self):
         model = self.model()
@@ -3631,14 +3689,22 @@ class ContactDetailView(QListView):
         selected_indexes = self.selectionModel().selectedIndexes()
         item = selected_indexes[0].data(Qt.UserRole) if selected_indexes else None
         if isinstance(item, ContactURI):
-            selected_uri = item.uri.uri
+            selected_uri = item.uri
         else:
             selected_uri = contact.uri
         session_manager = SessionManager()
-        session_manager.start_call(contact.name, selected_uri, contact=contact, account=BonjourAccount() if isinstance(contact.settings, BonjourNeighbour) else None)
+        session_manager.create_session(contact, selected_uri, [StreamDescription('audio')])
 
     def _AH_StartChatSession(self):
-        pass
+        contact = self.contact_list.selectionModel().selectedIndexes()[0].data(Qt.UserRole)
+        selected_indexes = self.selectionModel().selectedIndexes()
+        item = selected_indexes[0].data(Qt.UserRole) if selected_indexes else None
+        if isinstance(item, ContactURI):
+            selected_uri = item.uri
+        else:
+            selected_uri = contact.uri
+        session_manager = SessionManager()
+        session_manager.create_session(contact, selected_uri, [StreamDescription('chat')], connect=False)
 
     def _AH_SendSMS(self):
         pass
@@ -3679,18 +3745,11 @@ class ContactDetailView(QListView):
         contact = self.contact_list.selectionModel().selectedIndexes()[0].data(Qt.UserRole)
         item = index.data(Qt.UserRole)
         if isinstance(item, ContactURI):
-            selected_uri = item.uri.uri
+            selected_uri = item.uri
         else:
             selected_uri = contact.uri
         session_manager = SessionManager()
-        session_manager.start_call(contact.name, selected_uri, contact=contact, account=BonjourAccount() if isinstance(contact.settings, BonjourNeighbour) else None)
-
-    def _SH_SelectionModelSelectionChanged(self, selected, deselected):
-        selection_model = self.selectionModel()
-        selection = selection_model.selection()
-        if selection_model.currentIndex() not in selection:
-            index = selection.indexes()[0] if not selection.isEmpty() else self.model().index(-1)
-            selection_model.setCurrentIndex(index, selection_model.Select)
+        session_manager.create_session(contact, selected_uri, [StreamDescription(media) for media in contact.preferred_media.split('+')], connect=('audio' in contact.preferred_media))
 
 
 # The contact editor dialog
@@ -3960,11 +4019,13 @@ class ContactURITableView(QTableView):
         self.context_menu.addAction(QAction("Delete", self, triggered=self._AH_DeleteSelection))
         self.horizontalHeader().setResizeMode(self.horizontalHeader().ResizeToContents)
 
-    def setModel(self, model):
-        selection_model = self.selectionModel() or Null
-        selection_model.selectionChanged.disconnect(self._SH_SelectionModelSelectionChanged)
-        super(ContactURITableView, self).setModel(model)
-        self.selectionModel().selectionChanged.connect(self._SH_SelectionModelSelectionChanged)
+    def selectionChanged(self, selected, deselected):
+        super(ContactURITableView, self).selectionChanged(selected, deselected)
+        selection_model = self.selectionModel()
+        selection = selection_model.selection()
+        if selection_model.currentIndex() not in selection:
+            index = selection.indexes()[0] if not selection.isEmpty() else self.model().index(-1, -1)
+            selection_model.setCurrentIndex(index, selection_model.Select)
 
     def contextMenuEvent(self, event):
         selected_items = [item for item in (index.data(Qt.UserRole) for index in self.selectionModel().selectedIndexes()) if not item.ghost]
@@ -3984,13 +4045,6 @@ class ContactURITableView(QTableView):
         model._remove_items([index for index in self.selectionModel().selectedIndexes() if not index.data(Qt.UserRole).ghost])
         self.selectionModel().clearSelection()
 
-    def _SH_SelectionModelSelectionChanged(self, selected, deselected):
-        selection_model = self.selectionModel()
-        selection = selection_model.selection()
-        if selection_model.currentIndex() not in selection:
-            index = selection.indexes()[0] if not selection.isEmpty() else self.model().index(-1, -1)
-            selection_model.setCurrentIndex(index, selection_model.Select)
-
 
 ui_class, base_class = uic.loadUiType(Resources.get('contact_editor.ui'))
 
@@ -4129,3 +4183,62 @@ class ContactEditorDialog(base_class, ui_class):
 del ui_class, base_class
 
 
+class URIUtils(object):
+    number_trim_re = re.compile(r'\(\s?0\s?\)|[-()\s]')
+    number_re = re.compile(r'^\s*\+?[-\d\s()]+$')
+
+    @classmethod
+    def is_number(cls, token):
+        return cls.number_re.match(token) is not None
+
+    @classmethod
+    def trim_number(cls, token):
+        return cls.number_trim_re.sub('', token)
+
+    @classmethod
+    def find_contact(cls, uri, display_name=None, exact=True):
+        contact_model = QApplication.instance().main_window.contact_model
+        if isinstance(uri, BaseSIPURI):
+            uri = SIPURI.new(uri)
+        else:
+            if '@' not in uri:
+                uri += '@' + AccountManager().default_account.id.domain
+            if not uri.startswith(('sip:', 'sips:')):
+                uri = 'sip:' + uri
+            uri = SIPURI.parse(str(uri).translate(None, ' \t'))
+        if cls.is_number(uri.user):
+            uri.user = cls.trim_number(uri.user)
+            is_number = True
+        else:
+            is_number = False
+
+        # Exact URI matches
+        for contact in (contact for contact in contact_model.iter_contacts() if contact.group.virtual):
+            for contact_uri in contact.uris:
+                if uri.matches(contact_uri.uri):
+                    return contact, contact_uri
+
+        if not exact and is_number:
+            number = uri.user.lstrip('0')
+            counter = count()
+            matched_numbers = []
+            for contact in (contact for contact in contact_model.iter_contacts() if contact.group.virtual):
+                for contact_uri in contact.uris:
+                    uri_str = contact_uri.uri
+                    if uri_str.startswith(('sip:', 'sips:')):
+                        uri_str = uri_str.partition(':')[2]
+                    contact_user = uri_str.partition('@')[0]
+                    if cls.is_number(contact_user):
+                        contact_user = cls.trim_number(contact_user) # these could be expensive, maybe cache -Dan
+                        if contact_user.endswith(number):
+                            ratio = len(number) * 100 / len(contact_user)
+                            if ratio >= 50:
+                                heappush(matched_numbers, (100-ratio, next(counter), contact, contact_uri))
+            if matched_numbers:
+                return matched_numbers[0][2:] # ratio, index, contact, uri
+
+        display_name = display_name or "%s@%s" % (uri.user, uri.host)
+        contact = Contact(DummyContact(display_name, [DummyContactURI(str(uri).partition(':')[2], default=True)]), None)
+        return contact, contact.uri
+
+

blink/mainwindow.py

@@ -11,7 +11,7 @@ from functools import partial
 from PyQt4 import uic
 from PyQt4.QtCore import Qt, QSettings, QUrl
 from PyQt4.QtGui  import QAction, QActionGroup, QDesktopServices, QMenu, QShortcut
-from PyQt4.QtGui  import QFileDialog, QIcon, QStyle, QStyleOptionComboBox, QStyleOptionFrameV2, QSystemTrayIcon
+from PyQt4.QtGui  import QApplication, QFileDialog, QIcon, QStyle, QStyleOptionComboBox, QStyleOptionFrameV2, QSystemTrayIcon
 
 from application.notification import IObserver, NotificationCenter
 from application.python import Null, limit
@@ -23,10 +23,10 @@ from sipsimple.configuration.settings import SIPSimpleSettings
 
 from blink.aboutpanel import AboutPanel
 from blink.accounts import AccountModel, ActiveAccountModel, ServerToolsAccountModel, ServerToolsWindow
-from blink.contacts import BonjourNeighbour, Contact, ContactEditorDialog, ContactModel, ContactSearchModel, GoogleContactsDialog
+from blink.contacts import Contact, ContactEditorDialog, ContactModel, ContactSearchModel, GoogleContactsDialog, URIUtils
 from blink.history import HistoryManager
 from blink.preferences import PreferencesWindow
-from blink.sessions import ConferenceDialog, SessionManager, SessionModel
+from blink.sessions import ConferenceDialog, SessionManager, AudioSessionModel, StreamDescription
 from blink.configuration.datatypes import IconDescriptor, FileURL, InvalidToken, PresenceState
 from blink.configuration.settings import BlinkSettings
 from blink.presence import PendingWatcherDialog
@@ -49,6 +49,8 @@ class MainWindow(base_class, ui_class):
         notification_center.add_observer(self, name='SIPApplicationDidStart')
         notification_center.add_observer(self, name='SIPAccountGotMessageSummary')
         notification_center.add_observer(self, name='SIPAccountGotPendingWatcher')
+        notification_center.add_observer(self, name='BlinkSessionNewOutgoing')
+        notification_center.add_observer(self, name='BlinkSessionDidReinitializeForOutgoing')
         notification_center.add_observer(self, sender=AccountManager())
 
         icon_manager = IconManager()
@@ -64,8 +66,7 @@ class MainWindow(base_class, ui_class):
         self.setWindowTitle('Blink')
         self.setWindowIconText('Blink')
 
-        qt_settings = QSettings()
-        geometry = qt_settings.value("main_window/geometry")
+        geometry = QSettings().value("main_window/geometry")
         if geometry:
             self.restoreGeometry(geometry)
 
@@ -110,10 +111,9 @@ class MainWindow(base_class, ui_class):
         self.contact_list.setModel(self.contact_model)
         self.search_list.setModel(self.contact_search_model)
 
-        # Sessions
-        self.session_model = SessionModel(self)
+        # Sessions (audio)
+        self.session_model = AudioSessionModel(self)
         self.session_list.setModel(self.session_model)
-
         self.session_list.selectionModel().selectionChanged.connect(self._SH_SessionListSelectionChanged)
 
         # Windows, dialogs and panels
@@ -131,6 +131,7 @@ class MainWindow(base_class, ui_class):
         self.add_contact_button.clicked.connect(self._SH_AddContactButtonClicked)
         self.add_search_contact_button.clicked.connect(self._SH_AddContactButtonClicked)
         self.audio_call_button.clicked.connect(self._SH_AudioCallButtonClicked)
+        self.chat_session_button.clicked.connect(self._SH_ChatSessionButtonClicked)
         self.back_to_contacts_button.clicked.connect(self.search_box.clear) # this can be set in designer -Dan
         self.conference_button.makeConference.connect(self._SH_MakeConference)
         self.conference_button.breakConference.connect(self._SH_BreakConference)
@@ -156,9 +157,9 @@ class MainWindow(base_class, ui_class):
         self.server_tools_account_model.rowsInserted.connect(self._SH_ServerToolsAccountModelChanged)
         self.server_tools_account_model.rowsRemoved.connect(self._SH_ServerToolsAccountModelChanged)
 
-        self.session_model.sessionAdded.connect(self._SH_SessionModelAddedSession)
-        self.session_model.sessionRemoved.connect(self._SH_SessionModelRemovedSession)
-        self.session_model.structureChanged.connect(self._SH_SessionModelChangedStructure)
+        self.session_model.sessionAdded.connect(self._SH_AudioSessionModelAddedSession)
+        self.session_model.sessionRemoved.connect(self._SH_AudioSessionModelRemovedSession)
+        self.session_model.structureChanged.connect(self._SH_AudioSessionModelChangedStructure)
 
         self.silent_button.clicked.connect(self._SH_SilentButtonClicked)
         self.switch_view_button.viewChanged.connect(self._SH_SwitchViewButtonChangedView)
@@ -226,8 +227,7 @@ class MainWindow(base_class, ui_class):
         self.identity.setStyleSheet("""QComboBox { padding: 0px 4px 0px 4px; }""" if wide_padding else "")
 
     def closeEvent(self, event):
-        qt_settings = QSettings()
-        qt_settings.setValue("main_window/geometry", self.saveGeometry())
+        QSettings().setValue("main_window/geometry", self.saveGeometry())
         super(MainWindow, self).closeEvent(event)
         self.about_panel.close()
         self.conference_dialog.close()
@@ -243,8 +243,8 @@ class MainWindow(base_class, ui_class):
 
     def enable_call_buttons(self, enabled):
         self.audio_call_button.setEnabled(enabled)
-        self.im_session_button.setEnabled(False)
-        self.ss_session_button.setEnabled(False)
+        self.chat_session_button.setEnabled(enabled)
+        self.screen_sharing_button.setEnabled(False)
 
     def load_audio_devices(self):
         settings = SIPSimpleSettings()
@@ -344,7 +344,8 @@ class MainWindow(base_class, ui_class):
     def _AH_RedialActionTriggered(self):
         session_manager = SessionManager()
         if session_manager.last_dialed_uri is not None:
-            session_manager.start_call(None, unicode(session_manager.last_dialed_uri))
+            contact, contact_uri = URIUtils.find_contact(session_manager.last_dialed_uri)
+            session_manager.create_session(contact, contact_uri, [StreamDescription('audio')]) # TODO: remember used media types and redial with them. -Saul
 
     def _AH_SIPServerSettings(self, checked):
         account = self.identity.itemData(self.identity.currentIndex()).account
@@ -368,7 +369,9 @@ class MainWindow(base_class, ui_class):
 
     def _AH_VoicemailActionTriggered(self, action, checked):
         account = action.data()
-        SessionManager().start_call("Voicemail", account.voicemail_uri, account=account)
+        contact, contact_uri = URIUtils.find_contact(account.voicemail_uri, display_name='Voicemail')
+        session_manager = SessionManager()
+        session_manager.create_session(contact, contact_uri, [StreamDescription('audio')], account=account)
 
     def _AH_HistoryMenuTriggered(self, action):
         account_manager = AccountManager()
@@ -377,7 +380,8 @@ class MainWindow(base_class, ui_class):
             account = account_manager.get_account(action.entry.account_id)
         except KeyError:
             account = None
-        session_manager.start_call(None, action.entry.target_uri, account=account)
+        contact, contact_uri = URIUtils.find_contact(action.entry.target_uri)
+        session_manager.create_session(contact, contact_uri, [StreamDescription('audio')], account=account) # TODO: memorize media type and use it? -Saul (not sure about history in/out -Dan)
 
     def _AH_SystemTrayShowWindow(self, checked):
         self.show()
@@ -385,12 +389,9 @@ class MainWindow(base_class, ui_class):
         self.activateWindow()
 
     def _AH_QuitActionTriggered(self, checked):
-        self.close()
         if self.system_tray_icon is not None:
             self.system_tray_icon.hide()
-            from blink import Blink
-            blink = Blink()
-            blink.quit()
+        QApplication.instance().quit()
 
     def _SH_AccountStateChanged(self):
         self.activity_note.setText(self.account_state.note)
@@ -443,11 +444,27 @@ class MainWindow(base_class, ui_class):
             list_view.detail_view._AH_StartAudioCall()
         else:
             selected_indexes = list_view.selectionModel().selectedIndexes()
-            contact = selected_indexes[0].data(Qt.UserRole) if selected_indexes else Null
-            address = contact.uri or self.search_box.text()
-            name = contact.name or None
+            if selected_indexes:
+                contact = selected_indexes[0].data(Qt.UserRole)
+                contact_uri = contact.uri
+            else:
+                contact, contact_uri = URIUtils.find_contact(self.search_box.text())
+            session_manager = SessionManager()
+            session_manager.create_session(contact, contact_uri, [StreamDescription('audio')])
+
+    def _SH_ChatSessionButtonClicked(self):
+        list_view = self.contact_list if self.contacts_view.currentWidget() is self.contact_list_panel else self.search_list
+        if list_view.detail_view.isVisible():
+            list_view.detail_view._AH_StartChatSession()
+        else:
+            selected_indexes = list_view.selectionModel().selectedIndexes()
+            if selected_indexes:
+                contact = selected_indexes[0].data(Qt.UserRole)
+                contact_uri = contact.uri
+            else:
+                contact, contact_uri = URIUtils.find_contact(self.search_box.text())
             session_manager = SessionManager()
-            session_manager.start_call(name, address, contact=contact, account=BonjourAccount() if isinstance(contact.settings, BonjourNeighbour) else None)
+            session_manager.create_session(contact, contact_uri, [StreamDescription('chat')], connect=False)
 
     def _SH_BreakConference(self):
         active_session = self.session_list.selectionModel().selectedIndexes()[0].data(Qt.UserRole)
@@ -468,7 +485,7 @@ class MainWindow(base_class, ui_class):
         if not self.search_box.text():
             return
         if any(type(item) is Contact for item in items) and self.contact_search_model.rowCount() == 0:
-            self.search_box.clear()
+            self.search_box.clear() # check this. it is no longer be the correct behaviour as now contacts can be deleted from remote -Dan
         else:
             active_widget = self.search_list_panel if self.contact_search_model.rowCount() else self.not_found_panel
             self.search_view.setCurrentWidget(active_widget)
@@ -509,15 +526,16 @@ class MainWindow(base_class, ui_class):
         self.session_model.conferenceSessions([session for session in self.session_model.active_sessions if session.conference is None])
 
     def _SH_MuteButtonClicked(self, muted):
-        self.mute_action.setChecked(muted)
-        self.mute_button.setChecked(muted)
-        SIPApplication.voice_audio_bridge.mixer.muted = muted
+        settings = SIPSimpleSettings()
+        settings.audio.muted = muted
+        settings.save()
 
     def _SH_SearchBoxReturnPressed(self):
         address = self.search_box.text()
         if address:
+            contact, contact_uri = URIUtils.find_contact(address)
             session_manager = SessionManager()
-            session_manager.start_call(None, address)
+            session_manager.create_session(contact, contact_uri, [StreamDescription('audio')])
 
     def _SH_SearchBoxTextChanged(self, text):
         self.contact_search_model.setFilterFixedString(text)
@@ -559,15 +577,15 @@ class MainWindow(base_class, ui_class):
             self.conference_button.setEnabled(len([session for session in self.session_model.active_sessions if session.conference is None]) > 1)
             self.conference_button.setChecked(False)
 
-    def _SH_SessionModelAddedSession(self, session_item):
-        if session_item.session.state is None:
-            self.search_box.clear()
+    def _SH_AudioSessionModelAddedSession(self, session_item):
+        if len(session_item.blink_session.streams) == 1:
+            self.switch_view_button.view = SwitchViewButton.SessionView
 
-    def _SH_SessionModelRemovedSession(self, session_item):
-        if not self.session_model.rowCount():
+    def _SH_AudioSessionModelRemovedSession(self, session_item):
+        if self.session_model.rowCount() == 0:
             self.switch_view_button.view = SwitchViewButton.ContactView
 
-    def _SH_SessionModelChangedStructure(self):
+    def _SH_AudioSessionModelChangedStructure(self):
         active_sessions = self.session_model.active_sessions
         self.active_sessions_label.setText(u'There is 1 active call' if len(active_sessions)==1 else u'There are %d active calls' % len(active_sessions))
         self.active_sessions_label.setVisible(any(active_sessions))
@@ -684,6 +702,9 @@ class MainWindow(base_class, ui_class):
         blink_settings = BlinkSettings()
         icon_manager = IconManager()
         if notification.sender is settings:
+            if 'audio.muted' in notification.data.modified:
+                self.mute_action.setChecked(settings.audio.muted)
+                self.mute_button.setChecked(settings.audio.muted)
             if 'audio.silent' in notification.data.modified:
                 self.silent_action.setChecked(settings.audio.silent)
                 self.silent_button.setChecked(settings.audio.silent)
@@ -782,6 +803,12 @@ class MainWindow(base_class, ui_class):
         self.pending_watcher_dialogs.append(dialog)
         dialog.show()
 
+    def _NH_BlinkSessionNewOutgoing(self, notification):
+        self.search_box.clear()
+
+    def _NH_BlinkSessionDidReinitializeForOutgoing(self, notification):
+        self.search_box.clear()
+
 
 del ui_class, base_class
 

blink/preferences.py

@@ -132,13 +132,8 @@ class AccountListView(QListView):
         #self.setItemDelegate(AccountDelegate(self))
         #self.setDropIndicatorShown(False)
 
-    def setModel(self, model):
-        selection_model = self.selectionModel() or Null
-        selection_model.selectionChanged.disconnect(self._SH_SelectionModelSelectionChanged)
-        super(AccountListView, self).setModel(model)
-        self.selectionModel().selectionChanged.connect(self._SH_SelectionModelSelectionChanged)
-
-    def _SH_SelectionModelSelectionChanged(self, selected, deselected):
+    def selectionChanged(self, selected, deselected):
+        super(AccountListView, self).selectionChanged(selected, deselected)
         selection_model = self.selectionModel()
         selection = selection_model.selection()
         if selection_model.currentIndex() not in selection:

blink/widgets/labels.py

@@ -13,11 +13,7 @@ from application.python.types import MarkerType
 
 from blink.resources import IconManager
 from blink.widgets.color import ColorHelperMixin
-from blink.widgets.util import QtDynamicProperty
-
-
-class ContextMenuActions(object):
-    pass
+from blink.widgets.util import QtDynamicProperty, ContextMenuActions
 
 
 class IconSelector(QLabel):

blink/widgets/util.py

 # Copyright (c) 2010-2013 AG Projects. See LICENSE for details.
 #
 
-__all__ = ['QtDynamicProperty']
+__all__ = ['QtDynamicProperty', 'ContextMenuActions']
 
 from PyQt4.QtCore import QPyNullVariant
 
@@ -25,3 +25,7 @@ class QtDynamicProperty(object):
         raise AttributeError("attribute cannot be deleted")
 
 
+class ContextMenuActions(object):
+    pass
+
+

resources/blink.ui

@@ -654,7 +654,7 @@ padding: 2px;</string>
              </widget>
             </item>
             <item>
-             <widget class="ToolButton" name="im_session_button">
+             <widget class="ToolButton" name="chat_session_button">
               <property name="minimumSize">
                <size>
                 <width>29</width>
@@ -670,8 +670,9 @@ padding: 2px;</string>
               <property name="toolTip">
                <string>Start a chat session or send an SMS</string>
               </property>
-              <property name="text">
-               <string>IM</string>
+              <property name="icon">
+               <iconset>
+                <normaloff>icons/chat.svg</normaloff>icons/chat.svg</iconset>
               </property>
               <property name="iconSize">
                <size>
@@ -685,7 +686,7 @@ padding: 2px;</string>
              </widget>
             </item>
             <item>
-             <widget class="ToolButton" name="ss_session_button">
+             <widget class="ToolButton" name="screen_sharing_button">
               <property name="minimumSize">
                <size>
                 <width>29</width>
@@ -780,7 +781,7 @@ padding: 2px;</string>
          <number>0</number>
         </property>
         <item>
-         <widget class="SessionListView" name="session_list">
+         <widget class="AudioSessionListView" name="session_list">
           <property name="horizontalScrollBarPolicy">
            <enum>Qt::ScrollBarAlwaysOff</enum>
           </property>
@@ -1325,11 +1326,6 @@ padding: 2px;</string>
    <extends>QComboBox</extends>
    <header>blink.accounts</header>
   </customwidget>
-  <customwidget>
-   <class>SessionListView</class>
-   <extends>QListView</extends>
-   <header>blink.sessions</header>
-  </customwidget>
   <customwidget>
    <class>SwitchViewButton</class>
    <extends>QPushButton</extends>
@@ -1345,6 +1341,11 @@ padding: 2px;</string>
    <extends>QToolButton</extends>
    <header>blink.widgets.buttons</header>
   </customwidget>
+  <customwidget>
+   <class>AudioSessionListView</class>
+   <extends>QListView</extends>
+   <header>blink.sessions</header>
+  </customwidget>
  </customwidgets>
  <tabstops>
   <tabstop>search_box</tabstop>
@@ -1359,8 +1360,8 @@ padding: 2px;</string>
   <tabstop>switch_view_button</tabstop>
   <tabstop>add_contact_button</tabstop>
   <tabstop>audio_call_button</tabstop>
-  <tabstop>im_session_button</tabstop>
-  <tabstop>ss_session_button</tabstop>
+  <tabstop>chat_session_button</tabstop>
+  <tabstop>screen_sharing_button</tabstop>
   <tabstop>silent_button</tabstop>
   <tabstop>session_list</tabstop>
   <tabstop>hangup_all_button</tabstop>

resources/chat/styles/Smooth Operator/Classic.style

+@charset "utf-8";
+
+body
+{
+	margin: 0px;
+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(149, 175, 219, 1)), to(rgba(255, 255 ,255, 1))) fixed repeat-x;
+	-webkit-background-size: auto;
+	word-wrap: break-word;
+	word-break: break-word;
+}
+
+#chat
+{
+	padding: 8px;
+	padding-bottom: 10px;
+}
+
+#chat div:first-child
+{
+	margin-top: 2px;
+}
+
+.first-focus:before
+{
+	position: absolute;
+	margin-top: -4px;
+	right: 5px;
+	font-size: 9px;
+	content: "\2b07";
+	content: "\25bc";
+	color: rgba(64, 64, 64, 1);
+	text-shadow: 0px 1px 1px rgba(255, 255, 255, 1);
+}
+
+.first-focus.message:not(.consecutive):before
+{
+	position: absolute;
+	margin-top: -8px;
+	right: 5px;
+	font-size: 9px;
+	content: "\2b07";
+	content: "\25bc";
+	color: rgba(64, 64, 64, 1);
+	text-shadow: 0px 1px 1px rgba(255, 255, 255, 1);
+}
+
+.regained-focus:not(.consecutive):before
+{
+	position: absolute;
+	margin-top: -24px;
+	right: 5px;
+	font-size: 9px;
+	content: "\2b06";
+	content: "\25b2";
+	color: rgba(64, 64, 64, 1);
+	text-shadow: 0px 1px 1px rgba(255, 255, 255, 1);
+}
+
+.regained-focus:before
+{
+	position: absolute;
+	margin-top: -4px;
+	right: 5px;
+	font-size: 9px;
+	content: "\2b06";
+	content: "\25b2";
+	color: rgba(64, 64, 64, 1);
+	text-shadow: 0px 1px 1px rgba(255, 255, 255, 1);
+}
+
+.last-focus > #insert:before
+{
+	position: absolute;
+	margin-top: -4px;
+	right: 5px;
+	font-size: 9px;
+	content: "\2b06";
+	content: "\25b2";
+	color: rgba(64, 64, 64, 1);
+	text-shadow: 0px 1px 1px rgba(255, 255, 255, 1);
+}
+
+.message:not(.consecutive),
+.status:not(.consecutive),
+.event:not(.consecutive)
+{
+	margin-right: 10px;
+	margin-top: 10px;
+	padding-top: 6px;
+	padding-bottom: 4px;
+	padding-right: 5px;
+	-webkit-border-radius: 5px;
+	min-width: 7em;
+}
+
+.message:not(.consecutive)
+{
+	color: rgba(64, 64, 64, 1);
+	-webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, .4);
+	min-height: 30px;
+}
+
+.status:not(.consecutive),
+.event:not(.consecutive)
+{
+	margin-left: 36px;
+	color: rgba(244, 244, 244, 1);
+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(96, 96, 96, 1)), to(rgba(64, 64, 64, 1)));
+	-webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, .5);
+	padding-left: 12px;
+	padding-top: 2px;
+	padding-bottom: 2px;
+}
+
+.history.status:not(.consecutive),
+.history.event:not(.consecutive)
+{
+	color: rgba(244, 244, 244, .75);
+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(112, 112, 112, .625)), to(rgba(48, 48, 48, .625)));
+	-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, .4);
+}
+
+.message img.x-icon
+{
+	max-width: 32px;
+	max-height: 32px;
+	z-index: 99;
+	margin-top: -2px;
+	position: absolute;
+	left: 12px;
+	-webkit-border-radius: 5px;
+	background: rgba(240, 240, 240, 1);
+}
+
+.history.message .x-icon
+{
+	opacity: .5;
+	background: rgba(240, 240, 240, .5);
+}
+
+.message.hide-icons img.x-icon,
+.IRC.message img.x-icon,
+.consecutive.message img.x-icon,
+.consecutive.message .x-sender,
+.message .x-iconmask
+{
+	display: none !important;
+}
+
+.message .x-wrap
+{
+	margin-left: 36px;
+	margin-top: -2px;
+	margin-bottom: -2px;
+	display: block;
+	padding-top: 2px;
+	padding-left: 12px;
+	padding-bottom: 5px;
+}
+
+.status .x-wrap,
+.event .x-wrap
+{
+	display: block;
+	padding-top: 0px;
+	padding-bottom: 1px;
+	margin-left: .18em;
+}
+
+.consecutive.message .x-wrap
+{
+	padding-top: 0px;
+}
+
+.consecutive.status .x-wrap,
+.consecutive.event .x-wrap
+{
+	padding-top: 5px;
+}
+
+.status.hide-icons,
+.event.hide-icons,
+.message.hide-icons .x-wrap,
+.IRC.status,
+.IRC.event,
+.IRC.message .x-wrap
+{
+	margin-left: 0px;
+}
+
+.incoming .x-sender
+{
+	color: rgba(168, 0, 40, 1);
+}
+
+.outgoing .x-sender
+{
+	color: rgba(0, 16, 144, 1);
+}
+
+.history.message.incoming .x-sender
+{
+	color: rgba(168, 0, 40, .5);
+}
+
+.history.message.outgoing .x-sender
+{
+	color: rgba(0, 16, 144, .5);
+}
+
+.x-sender
+{
+	font-weight: bold;
+	display: block;
+	padding-bottom: 3px;
+	margin-left: .18em;
+}
+
+.message.hide-icons .x-sender,
+.IRC.message .x-sender
+{
+	color: rgba(64, 64, 64, 1) !important;
+}
+
+.history.message.hide-icons .x-sender,
+.IRC.history.message .x-sender
+{
+	color: rgba(64, 64, 64, .5) !important;
+}
+
+.x-ltime
+{
+	display: none;
+}
+
+.x-rtime
+{
+	float: right;
+	color: rgba(184, 184, 184, 1);
+	font-size: .9em;
+	padding-left: 10px;
+	margin-top: .12em;
+}
+
+.message.history .x-rtime
+{
+	color: rgba(152, 152, 152, 1);
+}
+
+.message.x-hover .x-rtime,
+.message.history.x-hover .x-rtime
+{
+	color: rgba(120, 120, 120, 1);
+}
+
+.status .x-rtime,
+.event .x-rtime
+{
+	color: rgba(244, 244, 244, .75);
+}
+
+.message .x-mark
+{
+	font-size: 1.2em;
+	margin-left: -.74em;
+	margin-top: -.17em;
+	letter-spacing: -.2em;
+	float: left;
+}
+
+.message .x-mark:before
+{
+	content: "\2023\2023";
+}
+
+.message:not(.history) .x-mark
+{
+	color: rgba(208, 208, 208, 1) !important;
+}
+
+.message.history .x-mark
+{
+	color: rgba(176, 176, 176, .5) !important;
+}
+
+.status .x-mark,
+.event .x-mark
+{
+	display: none;
+}
+
+.message.hide-icons .x-mark,
+.status.hide-icons .x-mark,
+.event.hide-icons .x-mark,
+.IRC .x-mark
+{
+	left: 10px;
+}
+
+.message .x-message
+{
+	display: block;
+	margin-left: .18em;
+}
+
+.status .x-message
+{
+	word-wrap: break-word;
+	padding-top: 20px;
+}
+
+.message.history.x-hover .x-message
+{
+	color: rgba(112, 112, 112, 1);
+}
+
+.message.history .x-message
+{
+	color: rgba(136, 136, 136, 1);
+}
+
+img.emoticon
+{
+	vertical-align: top;
+}
+
+.history img.emoticon
+{
+	opacity: .4;
+}
+
+a,
+a:link
+{
+	color: inherit;
+	text-decoration: underline;
+}
+
+a:hover
+{
+	border-bottom: 1px solid;
+}
+
+a:active
+{
+	border-bottom: 2px solid;
+}
+
+img.fullSizeImage
+{
+	width: auto;
+	height: auto;
+	max-height: 100%;
+	max-width: 100%;
+}
+
+img.scaledToFitImage
+{
+	width: auto;
+	max-height: 10px;
+}
+
+.message.mention .x-message:before
+{
+	position: absolute;
+	margin-top: -1px;
+	content: "\23af";
+	right: 4px;
+	font-size: 12px;
+	content: "\2605";
+	color: rgba(64, 64, 64, 1);
+	text-shadow: 0px 1px 1px rgba(255, 255, 255, 1);
+}
+
+.history.message.mention .x-message:before
+{
+	position: absolute;
+	margin-top: -1px;
+	content: "\23af";
+	right: 4px;
+	font-size: 12px;
+	content: "\2605";
+	color: rgba(64, 64, 64, 1);
+	text-shadow: 0px 1px 1px rgba(255, 255, 255, 1);
+	opacity: .5;
+}
+
+.message.hide-icons .x-color,
+.IRC.message .x-color
+{
+	display: block;
+	width: 5px;
+	height: 18px;
+	position: absolute;
+	left: 12px;
+	-webkit-border-top-left-radius: 5px;
+	-webkit-border-bottom-right-radius: 5px;
+	z-index: 99;
+	margin-top: -2px;
+	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .75)), to(rgba(255, 255, 255, .25)));
+}
+
+.history.message .x-color
+{
+	opacity: .5;
+}
+
+.status .x-color,
+.event .x-color,
+.consecutive .x-color
+{
+	display: none !important;
+}
+
+.message
+{
+	background: none !important;
+}
+
+.message:not(.consecutive)
+{
+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(240, 240, 240, 1))) !important;
+}
+
+.message:not(.consecutive).x-hover
+{
+	background: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 1)), to(rgba(240, 240, 240, 1))) !important;
+	-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, .4), 0px 0px 1px rgba(0, 0, 0, .4);
+}
+
+.message:not(.consecutive).history
+{
+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(232, 232, 232, .75)), to(rgba(208, 208, 208, .75))) !important;
+}
+
+.message:not(.consecutive).history.x-hover
+{
+	background: -webkit-gradient(linear, left bottom, left top, from(rgba(232, 232, 232, .75)), to(rgba(208, 208, 208, .75))) !important;
+	-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, .4), 0px 0px 1px rgba(0, 0, 0, .4);
+}
+
+/* header */
+
+#x-wrap
+{
+	-webkit-box-shadow: 0px 4px 16px rgba(0, 0, 0, .75), 8px -8px 8px rgba(149, 175, 219, 1), -8px -8px 8px rgba(149, 175, 219, 1), -8px 16px 16px rgba(163, 185, 223, 1), 8px 16px 16px rgba(163, 185, 223, 1) !important;
+}
+
+#x-header .x-iconmask
+{
+	height: 48px !important;
+	width: 48px !important;
+	top: 4px !important;
+}
+
+#x-header img.x-icon
+{
+	position: absolute;
+	background: rgba(240, 240, 240, 1);
+	-webkit-border-radius: 5px !important;
+	width: 48px !important;
+	min-width: 48px !important;
+	height: 48px !important;
+	min-height: 48px !important;
+	top: 4px !important;
+}
+
+#x-header .x-icon.x-incoming
+{
+	left: 4px !important;
+}
+
+#x-header .x-icon.x-outgoing
+{
+	right: 4px !important;
+}
+
+#x-header .x-sender.x-incoming {
+	left: 56px !important;
+	color: rgba(168, 0, 40, 1);
+}
+
+#x-header .x-sender.x-outgoing {
+	right: 56px !important;
+	color: rgba(0, 16, 144, 1);
+}
+
+#x-wrap .x-iconmask,
+#x-wrap:not(.IRC) .x-color
+{
+	display: none !important;
+}
+
+#x-wrap.IRC img.x-icon,
+#x-wrap.IRC .x-iconmask
+{
+	display: none;
+}
+
+#x-wrap.IRC .x-sender.x-incoming
+{
+	left: 8px !important;
+}
+
+#x-wrap.IRC .x-sender.x-outgoing
+{
+	right: 8px !important;
+}
+
+#x-wrap.IRC .x-color.x-incoming
+{
+	left: 0px !important;
+	-webkit-border-top-left-radius: 5px !important;
+	-webkit-border-bottom-left-radius: 5px !important;
+}
+
+#x-wrap.IRC .x-color.x-outgoing
+{
+	right: 0px !important;
+	-webkit-border-top-right-radius: 5px !important;
+	-webkit-border-bottom-right-radius: 5px !important;
+}

resources/chat/styles/Smooth Operator/Dark.style

+@charset "utf-8";
+
+body
+{
+	margin: 0px;
+	background: -webkit-gradient(linear, left bottom, right bottom, from(rgba(120, 120, 120, 1)), to(rgba(102, 102, 102, 1))) bottom right repeat;
+	-webkit-background-size: 2px auto;
+	word-wrap: break-word;
+	word-break: break-word;
+}
+
+#chat
+{
+	padding: 8px;
+}
+
+.first-focus:before
+{
+	position: absolute;
+	margin-top: -4px;
+	right: 5px;
+	font-size: 9px;
+	content: "\2b07";
+	content: "\25bc";
+	color: rgba(64, 64, 64, 1);
+	text-shadow: 0px 1px 1px rgba(255, 255, 255, .5);
+}
+
+.regained-focus:not(.consecutive):before
+{
+	position: absolute;
+	margin-top: -15px;
+	right: 5px;
+	font-size: 9px;
+	content: "\2b06";
+	content: "\25b2";
+	color: rgba(64, 64, 64, 1);
+	text-shadow: 0px 1px 1px rgba(255, 255, 255, .5);
+}
+
+.regained-focus:before
+{
+	position: absolute;
+	margin-top: -6px;
+	right: 5px;
+	font-size: 9px;
+	content: "\2b06";
+	content: "\25b2";
+	color: rgba(64, 64, 64, 1);
+	text-shadow: 0px 1px 1px rgba(255, 255, 255, .5);
+}
+
+.last-focus > #insert:before
+{
+	position: absolute;
+	margin-top: -5px;
+	right: 5px;
+	font-size: 9px;
+	content: "\2b06";
+	content: "\25b2";
+	color: rgba(64, 64, 64, 1);
+	text-shadow: 0px 1px 1px rgba(255, 255, 255, .5);
+}
+
+.message:not(.consecutive),
+.status:not(.consecutive),
+.event:not(.consecutive)
+{
+	margin-right: 10px;
+	min-width: 7em;
+}
+
+.message:not(.consecutive).show-icons,
+.status:not(.consecutive).show-icons,
+.event:not(.consecutive).show-icons
+{
+	margin-left: 36px;
+}
+
+.message:not(.consecutive):not(.history),
+.status:not(.consecutive):not(.history),
+.event:not(.consecutive):not(.history)
+{
+	padding-top: 2px;
+	padding-bottom: 2px;
+	-webkit-border-top-right-radius: 5px;
+	-webkit-border-bottom-right-radius: 5px;
+}
+
+.message:not(.consecutive):not(.history)
+{
+	margin-top: 6px;
+}
+
+.message.mention .x-message:before
+{
+	position: absolute;
+	margin-top: -1px;
+	content: "\23af";
+	right: 4px;
+	font-size: 12px;
+	content: "\2605";
+	color: rgba(32, 32, 32, 1);
+	text-shadow: 0px 1px 1px rgba(255, 255, 255, .5);
+}
+
+.message:not(.consecutive):not(.history),
+.message:not(.consecutive):not(.history) img.x-icon
+{
+	min-height: 28px;
+	-webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, .2), 0px 2px 4px rgba(0, 0, 0, .4);
+}
+
+.message.mention:not(.consecutive):not(.history),
+.message.mention:not(.consecutive):not(.history) img.x-icon
+{
+	-webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, .5), 0px 3px 4px rgba(0, 0, 0, .4);
+}
+
+.message.autoreply:not(.consecutive):not(.history),
+.message.autoreply:not(.consecutive):not(.history) img.x-icon,
+.status:not(.consecutive):not(.history),
+.event:not(.consecutive):not(.history)
+{
+	-webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, .2), 0px 2px 4px rgba(0, 0, 0, .4);
+}
+
+.message.x-hover:not(.consecutive):not(.history),
+.message.x-hover:not(.consecutive):not(.history) img.x-icon
+{
+	-webkit-box-shadow: 0px 2px 4px rgba(255, 255, 255, .4);
+}
+
+.message.consecutive:not(.history)
+{
+	margin-left: 0px;
+	padding-top: 1px;
+	padding-bottom: 0px;
+	padding-right: 0px;
+}
+
+.message:not(.autoreply):not(.consecutive)
+{
+	color: rgba(208, 208, 208, 1);
+}
+
+.message.x-hover
+{
+	color: rgba(244, 244, 244, 1) !important;
+	text-shadow: 0px 1px 1px rgba(0, 0, 0, .4);
+}
+
+.message:not(.autoreply):not(.consecutive):not(.history):not(.x-hover),
+.message:not(.autoreply):not(.consecutive):not(.history):not(.x-hover) img.x-icon
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .3)), to(rgba(255, 255, 255, .3))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(96, 96, 96, 1)), to(rgba(88, 88, 88, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(88, 88, 88, 1)), to(rgba(64, 64, 64, 1))) 0px 16px no-repeat;
+	-webkit-background-size: 100% 1px, 100% 16px, 100% 100%;
+}
+
+.mention.message:not(.autoreply):not(.consecutive):not(.history):not(.x-hover),
+.mention.message:not(.autoreply):not(.consecutive):not(.history):not(.x-hover) img.x-icon
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .3)), to(rgba(255, 255, 255, .3))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(64, 64, 64, 1)), to(rgba(56, 56, 56, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(56, 56, 56, 1)), to(rgba(32, 32, 32, 1))) 0px 16px no-repeat;
+	-webkit-background-size: 100% 1px, 100% 16px, 100% 100%;
+}
+
+.message.autoreply:not(.history):not(.consecutive):not(.x-hover),
+.message.autoreply:not(.history):not(.consecutive):not(.x-hover) img.x-icon
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .2)), to(rgba(255, 255, 255, .2))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(160, 160, 160, 1)), to(rgba(156, 156, 156, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(156, 156, 156, 1)), to(rgba(152, 152, 152, 1))) 0px 16px no-repeat;
+	-webkit-background-size: 100% 1px, 100% 16px, 100% 100%;
+}
+
+.message.x-hover:not(.consecutive):not(.history),
+.message.x-hover:not(.consecutive):not(.history) img.x-icon
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(80, 80, 80, 1)), to(rgba(64, 64, 64, 1))) 0px 0px no-repeat;
+	-webkit-background-size: 100% 100%;
+}
+
+.message.consecutive
+{
+	background: none !important;
+}
+
+.message.autoreply:not(.consecutive)
+{
+	margin-top: 7px;
+}
+
+.status:not(.consecutive):not(.history),
+.event:not(.consecutive):not(.history)
+{
+	margin-top: 7px;
+	color: rgba(64, 64, 64, 1);
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .2)), to(rgba(255, 255, 255, .2))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(160, 160, 160, 1)), to(rgba(152, 152, 152, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(152, 152, 152, 1)), to(rgba(144, 144, 144, 1))) 0px 16px no-repeat;
+	-webkit-background-size: 100% 1px, 100% 16px, 100% 100%;
+}
+
+.status.consecutive,
+.event.consecutive
+{
+	margin-top: 2px;
+}
+
+.message:not(.consecutive) .x-color
+{
+	display: block;
+	position: absolute;
+	width: 5px;
+}
+
+.message.hide-icons:not(.consecutive) .x-color
+{
+	margin-left: -2px;
+	margin-top: -3px;
+	height: 15px;
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .0)), to(rgba(0, 0, 0, .6))) 0px 0px no-repeat;
+	-webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, .4);
+}
+
+.message.consecutive .x-color
+{
+	display: none !important;
+}
+
+.message img.x-icon
+{
+	width: 32px;
+	height: 32px;
+	margin-top: -2px;
+	position: absolute;
+	left: 6px;
+	z-index: 3;
+	//-webkit-background-size: 100% 16px, 100% 100%;
+	-webkit-border-top-left-radius: 5px;
+	-webkit-border-bottom-left-radius: 5px;
+}
+
+.message .x-iconmask
+{
+	width: 32px;
+	height: 32px;
+	margin-top: -2px;
+	position: absolute;
+	left: 6px;
+	z-index: 4;
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .4)), to(rgba(255, 255, 255, 0))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0))) 0px 16px no-repeat;
+	-webkit-background-size: 32px 16px, 32px 100%;
+	-webkit-border-top-left-radius: 5px;
+	-webkit-border-bottom-left-radius: 5px;
+}
+
+.autoreply.message:not(.x-hover) .x-iconmask
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(192, 192, 192, .4)), to(rgba(64, 64, 64, .3))) 0px 0px no-repeat;
+	-webkit-background-size: 32px 16px;
+}
+
+.x-hover.message .x-iconmask
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(96, 96, 96, .6)), to(rgba(64, 64, 64, .6))) 0px 0px no-repeat;
+	-webkit-background-size: 32px 32px;
+}
+
+.message.hide-icons img.x-icon,
+.consecutive.message img.x-icon,
+.consecutive.message .x-sender,
+.history.message img.x-icon,
+.message.hide-icons .x-iconmask,
+.consecutive.message .x-iconmask,
+.history.message .x-iconmask
+{
+	display: none !important;
+}
+
+.message .x-wrap
+{
+	display: block;
+	margin-left: .6em;
+	padding-left: 2px;
+	padding-right: 5px;
+	padding-bottom: 1px;
+}
+
+.status .x-wrap,
+.event .x-wrap
+{
+	display: block;
+	margin-left: .6em;
+	padding-left: 2px;
+	padding-right: 5px;
+	padding-bottom: 1px;
+}
+
+.x-sender
+{
+	font-weight: bold;
+	display: block;
+	padding-top: 1px;
+	padding-bottom: 2px;
+}
+
+.message.autoreply:not(.history):not(.x-hover)
+{
+	color: rgba(64, 64, 64, 1);
+}
+
+.x-ltime
+{
+	display: none;
+}
+
+.x-rtime
+{
+	float: right;
+	padding-left: 10px;
+	font-size: .9em;
+	margin-top: .15em;
+	color: rgba(184, 184, 184, 1);
+}
+
+.x-mark
+{
+	position: absolute;
+	left: 43px;
+	margin-left: -.07em;
+	margin-top: -.15em;
+	margin-right: -2px;
+	font-size: 1.2em;
+}
+
+.x-mark:before
+{
+	content: "\2023";
+}
+
+.message:not(.autoreply):not(.x-hover) .x-mark
+{
+	color: rgba(255, 255, 255, .2);
+}
+
+.message.autoreply:not(.history):not(.x-hover) .x-mark,
+.status:not(.history) .x-mark,
+.event:not(.history) .x-mark
+{
+	color: rgba(0, 0, 0, .3) !important;
+}
+
+.status .x-rtime,
+.event .x-rtime,
+.autoreply:not(.x-hover) .x-rtime
+{
+	color: rgba(64, 64, 64, .8);
+}
+
+.message.hide-icons .x-mark,
+.status.hide-icons .x-mark,
+.event.hide-icons .x-mark
+{
+	left: 7px;
+}
+
+img.emoticon
+{
+	vertical-align: top;
+}
+
+a,
+a:link
+{
+	color: inherit;
+	text-decoration: underline;
+}
+
+a:hover
+{
+	border-bottom: 1px solid;
+}
+
+a:active
+{
+	border-bottom: 2px solid;
+}
+
+img.fullSizeImage
+{
+	width: auto;
+	height: auto;
+	max-height: 100%;
+	max-width: 100%;
+}
+
+img.scaledToFitImage
+{
+	width: auto;
+	max-height: 10px;
+}
+
+/* history */
+
+.history.message:not(.consecutive),
+.history.event:not(.consecutive)
+{
+	display: block;
+	margin-top: 0px;
+	margin-left: 36px;
+	margin-bottom: 0px;
+	padding-top: 2px;
+	-webkit-border-radius: 0px;
+}
+
+.history.message:not(.consecutive):not(.x-hover),
+.history.event:not(.consecutive)
+{
+	-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, .1), 0px 3px 3px rgba(0, 0, 0, .15);
+}
+
+.history:not(.consecutive)
+{
+	-webkit-background-size: 100% 1px, 100% 1px, 100% 100%;
+}
+
+.history.message:not(.consecutive):not(.autoreply)
+{
+	color: rgba(184, 184, 184, 1);
+}
+
+.history.autoreply:not(.consecutive),
+.history.event:not(.consecutive)
+{
+	color: rgba(64, 64, 64, 1);
+}
+
+.history.message.mention .x-message:before
+{
+	color: rgba(72, 72, 72, 1);
+}
+
+#chat .history.message:not(.mention):not(.x-hover):first-child
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .2)), to(rgba(255, 255, 255, .2))) .5em 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(112, 112, 112, 1)), to(rgba(112, 112, 112, 1))) 0px 0px no-repeat;
+	-webkit-background-size: 100% 1px, 100% 100%;
+}
+
+.history.message:not(.mention):not(.consecutive):not(.x-hover)
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(88, 88, 88, 1)), to(rgba(88, 88, 88, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .2)), to(rgba(255, 255, 255, .2))) 0px 1px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(112, 112, 112, 1)), to(rgba(112, 112, 112, 1))) 0px 1px no-repeat;
+}
+
+.history.mention:not(.x-hover) + .history.message:not(.mention):not(.consecutive):not(.x-hover)
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(56, 56, 56, 1)), to(rgba(56, 56, 56, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .15)), to(rgba(255, 255, 255, .15))) 0px 1px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(112, 112, 112, 1)), to(rgba(112, 112, 112, 1))) 0px 1px no-repeat;
+}
+
+#chat .history.mention:not(.x-hover):first-child
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .2)), to(rgba(255, 255, 255, .2))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(96, 96, 96, .3)), to(rgba(96, 96, 96, .3))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(80, 80, 80, 1)), to(rgba(80, 80, 80, 1))) 0px 0px no-repeat;
+}
+
+.history.mention:not(.consecutive):not(.x-hover)
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(80, 80, 80, 1)), to(rgba(80, 80, 80, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .15)), to(rgba(255, 255, 255, .15))) 0px 1px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(80, 80, 80, 1)), to(rgba(80, 80, 80, 1))) 0px 1px no-repeat;
+
+}
+
+.history.mention + .history.mention:not(.consecutive):not(.x-hover)
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(64, 64, 64, 1)), to(rgba(64, 64, 64, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .1)), to(rgba(255, 255, 255, .1))) 0px 1px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(80, 80, 80, 1)), to(rgba(80, 80, 80, 1))) 0px 1px no-repeat;
+
+}
+
+.history.message.x-hover:not(.consecutive)
+{
+	padding-top: 2px;
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .0)), to(rgba(0, 0, 0, .0))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(64, 64, 64, 1)), to(rgba(64, 64, 64, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(96, 96, 96, 1)), to(rgba(96, 96, 96, 1))) 0px 0px no-repeat;
+	text-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
+	-webkit-box-shadow: 0px 2px 4px rgba(255, 255, 255, .15);
+}
+
+.history.message.x-hover + .history.message.x-hover:not(.consecutive)
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .0)), to(rgba(0, 0, 0, .0))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(80, 80, 80, 1)), to(rgba(80, 80, 80, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(96, 96, 96, 1)), to(rgba(96, 96, 96, 1))) 0px 0px no-repeat;
+}
+
+#chat .history.autoreply:first-child,
+#chat .history.event:first-child
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .2)), to(rgba(255, 255, 255, .2))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(144, 144, 144, 1)), to(rgba(144, 144, 144, 1))) 0px 0px no-repeat;
+	-webkit-background-size: 100% 1px, 100% 100%;
+}
+
+.history + .history.autoreply:not(.consecutive):not(.x-hover),
+.history + .history.event:not(.consecutive)
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(80, 80, 80, 1)), to(rgba(80, 80, 80, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .2)), to(rgba(255, 255, 255, .2))) 0px 1px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(144, 144, 144, 1)), to(rgba(144, 144, 144, 1))) 0px 1px no-repeat;
+}
+
+.history.autoreply + .history.autoreply:not(.consecutive):not(.x-hover),
+.history.event + .history.autoreply:not(.consecutive):not(.x-hover),
+.history.autoreply + .history.event:not(.consecutive),
+.history.event + .history.event:not(.consecutive)
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(112, 112, 112, 1)), to(rgba(112, 112, 112, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .2)), to(rgba(255, 255, 255, .2))) 0px 1px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(144, 144, 144, 1)), to(rgba(144, 144, 144, 1))) 0px 1px no-repeat;
+}
+
+.history.mention:not(.x-hover) + .history.autoreply:not(.consecutive):not(.x-hover),
+.history.mention:not(.x-hover) + .history.event:not(.consecutive)
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(56, 56, 56, 1)), to(rgba(56, 56, 56, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .15)), to(rgba(255, 255, 255, .15))) 0px 1px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(144, 144, 144, 1)), to(rgba(144, 144, 144, 1))) 0px 1px no-repeat;
+}
+
+.history.message:not(.consecutive) .x-color
+{
+	margin-top: -1px;
+	height: 13px;
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .2)), to(rgba(0, 0, 0, .4))) 0px 0px no-repeat;
+	-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
+}
+
+.history.hide-icons.message:not(.consecutive) .x-color
+{
+	margin-left: -2px;
+}
+
+.history.show-icons.message:not(.consecutive) .x-color
+{
+	margin-left: -11px;
+	display: none;
+}
+
+.history.message .x-wrap
+{
+	margin-left: .6em;
+	margin-top: 0px;
+	margin-bottom: 0px;
+	padding-top: 1px;
+}
+
+.history.event .x-wrap
+{
+	padding-top: 1px;
+	padding-bottom: 2px;
+}
+
+.history.message:not(.consecutive).hide-icons,
+.history.event:not(.consecutive).hide-icons
+{
+	margin-left: 0px !important;
+}
+
+.history .x-rtime
+{
+	margin-right: 0px;
+}
+
+.history.autoreply:not(.x-hover) .x-rtime,
+.history.event .x-rtime
+{
+	color: rgba(64, 64, 64, 1);
+}
+
+.history.event .x-message
+{
+	padding-right: 4px;
+}
+
+.history img.emoticon
+{
+	opacity: .5;
+}
+
+/*
+.history.x-hover + .history.x-hover
+{
+	-webkit-box-shadow: 0px 2px 2px rgba(255, 255, 255, .4) !important;
+}
+*/
+
+.history.autoreply:not(.x-hover) .x-mark,
+.history.event:not(.x-hover) .x-mark
+{
+	color: rgba(64, 64, 64, .5);
+}
+
+/* header mods */
+
+#x-header #x-wrap,
+#x-topic #x-wrap
+{
+	color: rgba(244, 244, 244, 1) !important;
+	height: inherit !important;
+	padding-left: 5px;
+	padding-right: 5px;
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .2)), to(rgba(255, 255, 255, .2))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(144, 144, 144, 1)), to(rgba(72, 72, 72, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(72, 72, 72, 1)), to(rgba(32, 32, 32, 1))) 0px 16px no-repeat !important;
+	-webkit-background-size: 100% 1px, 100% 16px, 100% 100% !important;
+	-webkit-box-shadow: 0px 4px 16px rgba(0, 0, 0, .8) !important;
+	-webkit-border-top-left-radius: 0px !important;
+	-webkit-border-bottom-left-radius: 0px !important;
+}
+
+#x-header #x-wrap
+{
+	left: 69px !important;
+	text-align: right !important;
+	font-size: 12px !important;
+	font-weight: inherit !important;
+	padding-top: 5px;
+	padding-bottom: 5px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+#x-topic #x-wrap
+{
+	left: 8px !important;
+	min-height: inherit !important;
+	text-align: left !important;
+	padding-top: .3em !important;
+	padding-bottom: .4em !important;
+}
+
+#x-topic #topicEdit
+{
+	//padding-top: 1px !important;
+	padding-left: 0px !important;
+	padding-right: 0px !important;
+}
+
+#x-header .x-icon,
+#x-header .x-iconmask
+{
+	position: fixed !important;
+	right: inherit;
+	-webkit-border-radius: 0px !important;
+}
+
+#x-header .x-icon.x-incoming
+{
+	left: 8px !important;
+	top: 8px !important;
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .2)), to(rgba(255, 255, 255, .2))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(144, 144, 144, 1)), to(rgba(72, 72, 72, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(72, 72, 72, 1)), to(rgba(32, 32, 32, 1))) 0px 16px no-repeat !important;
+	-webkit-background-size: 100% 1px, 100% 16px, 100% 100% !important;
+	-webkit-box-shadow: 0px 4px 16px rgba(0, 0, 0, .8) !important;
+	-webkit-box-shadow: 0px -1px 1px rgba(255, 255, 255, .4), 0px 4px 16px rgba(0, 0, 0, .7), 8px -8px 8px rgba(112, 112, 112, 1), -8px -8px 8px rgba(112, 112, 112, 1), -8px 16px 16px rgba(112, 112, 112, 1), 8px 16px 16px rgba(114, 114, 114, 1) !important;
+	-webkit-box-shadow: 0px 4px 16px rgba(0, 0, 0, .8) !important;
+	-webkit-border-top-left-radius: 5px !important;
+	-webkit-border-bottom-left-radius: 5px !important;
+}
+
+#x-header .x-iconmask.x-incoming
+{
+	left: 8px !important;
+	top: 8px !important;
+	-webkit-border-top-left-radius: 5px !important;
+	-webkit-border-bottom-left-radius: 5px !important;
+}
+
+#x-header .x-date,
+#x-header .x-time
+{
+	display: inline !important;
+}
+
+#x-header .x-date:after
+{
+	content: ";";
+}
+
+#x-header #x-wrap:not(.IRC) .x-color,
+#x-header .x-sender,
+#x-header .x-outgoing,
+#x-header .serviceIcon,
+#x-topic .x-serviceIcon
+{
+	display: none !important;
+}
+
+#x-wrap.IRC .x-icon.x-incoming,
+#x-wrap.IRC .x-iconmask.x-incoming,
+#x-wrap.IRC .x-color.x-incoming
+{
+	display: inherit !important;
+}
+
+.x-toggle
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(224, 224, 224, 1)), color-stop( .4, rgba(208, 208, 208, 1)), color-stop( .6, rgba(160, 160, 160, 1)), to(rgba(128, 128, 128, 1))) 0px 0px no-repeat !important;
+	-webkit-box-shadow: 0px -1px 1px rgba(255, 255, 255, .6), 0px 4px 16px rgba(0, 0, 0, .5) !important;
+	color: rgba(64, 64, 64, 1) !important;
+}
+
+.x-toggle:active
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(208, 208, 208, 1)), to(rgba(160, 160, 160, 1))) 0px 0px no-repeat !important;
+}
+
+#x-wrap.IRC .x-color.x-incoming
+{
+	position: fixed;
+	left: 8px;
+	top: 8px;
+	z-index: 101;
+	width: 56px;
+	height: 56px;
+	-webkit-border-top-left-radius: 5px !important;
+	-webkit-border-bottom-left-radius: 5px !important;
+	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .25)), to(rgba(255, 255, 255, .25)));
+}
+

resources/chat/styles/Smooth Operator/Icon-Time.style

+@charset "utf-8";
+
+body
+{
+	margin: 0px;
+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255 ,255, 1)), to(rgba(208, 208, 208, 1))) fixed repeat-x;
+	background: rgba(0, 0, 0, 0.25);
+	-webkit-background-size: auto;
+	word-wrap: break-word;
+	word-break: break-word;
+}
+
+#chat
+{
+	padding: 8px;
+}
+
+#chat .history:first-child.message
+{
+	-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, .3), 0px 0px 1px rgba(0, 0, 0, .4);
+}
+
+.first-focus:before
+{
+	position: absolute;
+	margin-top: -4px;
+	right: 5px;
+	font-size: 9px;
+	content: "\2b07";
+	content: "\25bc";
+	color: rgba(64, 64, 64, 1);
+	text-shadow: 0px 1px 1px rgba(255, 255, 255, 1);
+}
+
+.regained-focus:not(.consecutive):before
+{
+	position: absolute;
+	margin-top: -18px;
+	right: 5px;
+	font-size: 9px;
+	content: "\2b06";
+	content: "\25b2";
+	color: rgba(64, 64, 64, 1);
+	text-shadow: 0px 1px 1px rgba(255, 255, 255, 1);
+}
+
+.regained-focus:before
+{
+	position: absolute;
+	margin-top: -7px;
+	right: 5px;
+	font-size: 9px;
+	content: "\2b06";
+	content: "\25b2";
+	color: rgba(64, 64, 64, 1);
+	text-shadow: 0px 1px 1px rgba(255, 255, 255, 1);
+}
+
+.last-focus > #insert:before
+{
+	position: absolute;
+	margin-top: -6px;
+	right: 5px;
+	font-size: 9px;
+	content: "\2b06";
+	content: "\25b2";
+	color: rgba(64, 64, 64, 1);
+	text-shadow: 0px 1px 1px rgba(255, 255, 255, 1);
+}
+
+.message:not(.consecutive),
+.status:not(.consecutive),
+.event:not(.consecutive)
+{
+	margin-right: 10px;
+	min-width: 7em;
+}
+
+.message:not(.consecutive):not(.history),
+.status:not(.consecutive):not(.history),
+.event:not(.consecutive):not(.history)
+{
+	margin-top: 8px;
+	padding-top: 2px;
+	padding-bottom: 2px;
+	-webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, .4), 0px 0px 1px rgba(0, 0, 0, .4);
+	-webkit-border-radius: 5px;
+	-webkit-border-bottom-left-radius: 0px;
+}
+
+.message.mention .x-message:before
+{
+	position: absolute;
+	margin-top: -1px;
+	content: "\23af";
+	right: 4px;
+	font-size: 12px;
+	content: "\2605";
+	color: rgba(64, 64, 64, 1);
+	text-shadow: 0px 1px 1px rgba(255, 255, 255, 1);
+}
+
+.message:not(.consecutive):not(.history)
+{
+	min-height: 28px;
+}
+
+.message.consecutive:not(.history)
+{
+	margin-left: 0px;
+	padding-top: 1px;
+	padding-bottom: 0px;
+	padding-right: 0px;
+}
+
+.message:not(.autoreply):not(.consecutive)
+{
+	color: rgba(64, 64, 64, 1);
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .75)), to(rgba(255, 255, 255, .25))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(240, 240, 240, 1))) 37px 0px no-repeat;
+	-webkit-background-size: 37px 100%, 100% 100%;
+	-webkit-border-top-left-radius: 5px;
+}
+
+.message.show-icons:not(.autoreply):not(.consecutive):not(.history):not(.x-hover):not(.IRC)
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(248, 248, 248, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(240,240, 240, 1))) 0px 16px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .75)), to(rgba(255, 255, 255, .25))) 32px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .25)), to(rgba(255, 255, 255, .25))) 32px 32px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(248, 248, 248, 1))) 37px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(240, 240, 240, 1))) 37px 16px no-repeat;
+	-webkit-background-size: 32px 16px, 32px 100%, 5px 32px, 5px 100%, 100% 16px, 100% 100%;
+}
+
+.mention.message.show-icons:not(.autoreply):not(.consecutive):not(.history):not(.x-hover):not(.IRC)
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .9)), to(rgba(248, 248, 248, .9))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, .9)), to(rgba(240,240, 240, .9))) 0px 16px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .75)), to(rgba(255, 255, 255, .25))) 32px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .25)), to(rgba(255, 255, 255, .25))) 32px 32px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .9)), to(rgba(248, 248, 248, .9))) 37px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, .9)), to(rgba(240, 240, 240, .9))) 37px 16px no-repeat;
+	-webkit-background-size: 32px 16px, 32px 100%, 5px 32px, 5px 100%, 100% 16px, 100% 100%;
+}
+
+.message.autoreply:not(.history):not(.consecutive):not(.x-hover)
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(96, 96, 96, 1)), to(rgba(80, 80, 80, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(80, 80, 80, 1)), to(rgba(64, 64, 64, 1))) 0px 16px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .625)), to(rgba(255, 255, 255, .25))) 32px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .25)), to(rgba(255, 255, 255, .25))) 32px 32px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(96, 96, 96, 1)), to(rgba(80, 80, 80, 1))) 37px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(80, 80, 80, 1)), to(rgba(64, 64, 64, 1))) 37px 16px no-repeat;
+	-webkit-background-size: 32px 16px, 32px 100%, 5px 32px, 5px 100%, 100% 16px, 100% 100%;
+	-webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, .4), 0px 0px 1px rgba(0, 0, 0, .4), 0px 0px 1px rgba(0, 0, 0, 1);
+}
+
+.IRC.message:not(.mention):not(.autoreply):not(.consecutive):not(.history):not(.x-hover),
+.message.hide-icons:not(.mention):not(.autoreply):not(.consecutive):not(.history):not(.x-hover)
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .75)), to(rgba(255, 255, 255, .25))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .25)), to(rgba(255, 255, 255, .25))) 0px 32px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(248, 248, 248, 1))) 5px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(240, 240, 240, 1))) 5px 16px no-repeat;
+	-webkit-background-size: 5px 32px, 5px 100%, 100% 16px, 100% 100%;
+}
+
+.IRC.message.mention:not(.autoreply):not(.consecutive):not(.history):not(.x-hover),
+.message.hide-icons.mention:not(.autoreply):not(.consecutive):not(.history):not(.x-hover)
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .75)), to(rgba(255, 255, 255, .25))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .25)), to(rgba(255, 255, 255, .25))) 0px 32px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .9)), to(rgba(248, 248, 248, .9))) 5px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, .9)), to(rgba(240, 240, 240, .9))) 5px 16px no-repeat;
+	-webkit-background-size: 5px 32px, 5px 100%, 100% 16px, 100% 100%;
+}
+
+.IRC.message.autoreply:not(.history):not(.consecutive):not(.x-hover),
+.message.hide-icons.autoreply:not(.history):not(.consecutive):not(.x-hover)
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .625)), to(rgba(255, 255, 255, .25))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .25)), to(rgba(255, 255, 255, .25))) 0px 32px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(96, 96, 96, 1)), to(rgba(80, 80, 80, 1))) 5px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(80, 80, 80, 1)), to(rgba(64, 64, 64, 1))) 5px 16px no-repeat;
+	-webkit-background-size: 5px 32px, 5px 100%, 100% 16px, 100% 100%;
+	-webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, .4), 0px 0px 1px rgba(0, 0, 0, .4), 0px 0px 1px rgba(0, 0, 0, 1);
+}
+
+.message.show-icons.x-hover:not(.consecutive):not(.history):not(.IRC)
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(208, 208, 208, 1)), to(rgba(192, 192, 192, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(208, 208, 208, .75)), to(rgba(192, 192, 192, .75))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(208, 208, 208, 1)), to(rgba(192, 192, 192, 1))) 37px 0px no-repeat;
+	-webkit-background-size: 32px 100%, 37px 100%, 100% 100%;
+	-webkit-box-shadow: 0px 2px 4px rgba(255, 255, 255, 1), 0px -1px 1px rgba(0, 0, 0, .4);
+}
+
+.IRC.message.x-hover:not(.consecutive),
+.message.hide-icons.x-hover:not(.consecutive)
+{
+	-webkit-box-shadow: 0px 2px 4px rgba(255, 255, 255, 1), 0px -1px 1px rgba(0, 0, 0, .4);
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(192, 192, 192, .75)), to(rgba(192, 192, 192, .75))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(208, 208, 208, 1)), to(rgba(192, 192, 192, 1))) 5px 0px no-repeat;
+	-webkit-background-size: 5px 100%, 100% 100%;
+}
+
+.message.consecutive
+{
+	background: none !important;
+}
+
+.status:not(.consecutive):not(.history),
+.event:not(.consecutive):not(.history)
+{
+	color: rgba(244, 244, 244, 1);
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(96, 96, 96, 1)), to(rgba(80, 80, 80, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(80, 80, 80, 1)), to(rgba(64, 64, 64, 1))) 0px 16px no-repeat;
+	-webkit-background-size: 100% 16px, 100% 100%;
+}
+
+.status:not(.consecutive).show-icons,
+.event:not(.consecutive).show-icons
+{
+	margin-left: 32px;
+}
+
+.status.consecutive,
+.event.consecutive
+{
+	margin-top: 2px;
+}
+
+.x-color
+{
+	display: none;
+}
+
+.message img.x-icon
+{
+	width: 32px;
+	height: 32px;
+	position: absolute;
+	left: 8px;
+	z-index: 3;
+	margin-top: -2px;
+	-webkit-border-top-left-radius: 5px;
+}
+
+.message .x-iconmask
+{
+	width: 32px;
+	height: 32px;
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .625)), to(rgba(255, 255, 255, 0))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0))) 0px 16px no-repeat;
+	-webkit-background-size: 32px 16px, 32px 100%;
+	position: absolute;
+	z-index: 4;
+	margin-top: -2px;
+	-webkit-border-top-left-radius: 5px;
+}
+
+.autoreply.message:not(.x-hover) .x-iconmask
+{
+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(192, 192, 192, .625)), to(rgba(64, 64, 64, .25))) 0px 0px no-repeat;
+	-webkit-background-size: 32px 16px;
+}
+
+.x-hover.message .x-iconmask
+{
+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(208, 208, 208, .625)), to(rgba(192, 192, 192, .625))) 0px 0px no-repeat;
+	-webkit-background-size: 32px 32px;
+}
+
+.message.hide-icons img.x-icon,
+.IRC.message img.x-icon,
+.consecutive.message img.x-icon,
+.consecutive.message .x-sender,
+.history.message img.x-icon,
+.message.hide-icons .x-iconmask,
+.IRC.message .x-iconmask,
+.consecutive.message .x-iconmask,
+.history.message .x-iconmask
+{
+	display: none !important;
+}
+
+.message .x-wrap
+{
+	display: block;
+	margin-left: 37px;
+	padding-left: 3px;
+	padding-right: 5px;
+	padding-bottom: 1px;
+}
+
+.status .x-wrap,
+.event .x-wrap
+{
+	display: block;
+	margin-left: 5px;
+	padding-left: 3px;
+	padding-right: 5px;
+	padding-bottom: 1px;
+}
+
+.x-sender
+{
+	font-weight: bold;
+	display: block;
+	padding-top: 1px;
+	padding-bottom: 2px;
+}
+
+.message.hide-icons .x-wrap,
+.IRC.message .x-wrap
+{
+	margin-left: 5px;
+}
+
+.message.autoreply:not(.history) .x-sender,
+.message.autoreply:not(.history) .x-message
+{
+	color: rgba(244, 244, 244, 1);
+}
+
+.x-ltime
+{
+	display: none;
+}
+
+.x-rtime
+{
+	float: right;
+	padding-left: 10px;
+	font-size: .9em;
+	margin-top: .15em;
+	color: rgba(184, 184, 184, 1);
+}
+
+.x-mark
+{
+	position: absolute;
+	left: 39px;
+	margin-left: -.054em;
+	margin-top: -2px;
+	margin-right: -2px;
+	letter-spacing: -.2em;
+	font-size: 12px;
+}
+
+.x-mark:before
+{
+	content: "\2023";
+}
+
+.message .x-mark
+{
+	color: rgba(0, 0, 0, .8)
+}
+
+.status .x-mark,
+.event .x-mark
+{
+	color: rgba(255, 255, 255, .8)
+}
+
+.message.hide-icons .x-mark,
+.status.hide-icons .x-mark,
+.event.hide-icons .x-mark,
+.IRC .x-mark
+{
+	left: 7px;
+}
+
+.message.x-hover .x-sender,
+.message.x-hover .x-rtime,
+.message.x-hover .x-message
+{
+	color: rgba(0, 0, 0, 1) !important;
+}
+
+img.emoticon
+{
+	vertical-align: top;
+}
+
+/*.history img.emoticon
+{
+	opacity: .4;
+}*/
+
+a,
+a:link
+{
+	color: inherit;
+	text-decoration: underline;
+}
+
+a:hover
+{
+	border-bottom: 1px solid;
+}
+
+a:active
+{
+	border-bottom: 2px solid;
+}
+
+img.fullSizeImage
+{
+	width: auto;
+	height: auto;
+	max-height: 100%;
+	max-width: 100%;
+}
+
+img.scaledToFitImage
+{
+	width: auto;
+	max-height: 10px;
+}
+
+/* history */
+
+.history.message:not(.consecutive),
+.history.status:not(.consecutive),
+.history.event:not(.consecutive)
+{
+	display: block;
+	margin-top: 0px;
+	margin-left: 32px;
+	margin-bottom: 0px;
+	-webkit-border-radius: 0px;
+	-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, .3);
+}
+
+.history.status:not(.consecutive),
+.history.event:not(.consecutive)
+{
+	color: rgba(244, 244, 244, 1);
+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(112, 112, 112, 1)), to(rgba(112, 112, 112, 1))) 0px 0px no-repeat;
+}
+
+.history.status:first-child,
+.history.event:first-child
+{
+	-webkit-border-top-left-radius: 5px;
+	-webkit-border-top-right-radius: 5px;
+}
+
+.history.message:not(.consecutive):not(.x-hover)
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, .5)), to(rgba(248, 248, 248, .5))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(248, 248, 248, 1))) 5px 0px no-repeat;
+	-webkit-background-size: 5px 100%, 100% 100%;
+}
+
+.history.mention.message:not(.consecutive):not(.x-hover)
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, .5)), to(rgba(248, 248, 248, .5))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, .9)), to(rgba(248, 248, 248, .9))) 5px 0px no-repeat;
+	-webkit-background-size: 5px 100%, 100% 100%;
+}
+
+.history.message.x-hover:not(.consecutive)
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(200, 200, 200, .75)), to(rgba(200, 200, 200, .75))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(200, 200, 200, 1)), to(rgba(200, 200, 200, 1))) 5px 0px no-repeat;
+	-webkit-background-size: 5px 100%, 100% 100%;
+	-webkit-box-shadow: 0px 2px 4px rgba(255, 255, 255, 1), 0px -1px 1px rgba(0, 0, 0, .4);
+}
+
+.history.message .x-wrap
+{
+	margin-left: 5px;
+	margin-top: 0px;
+	margin-bottom: 0px;
+	padding-top: 1px;
+}
+
+.history.message .x-wrap .x-sender,
+.history.message .x-wrap .x-message
+{
+	text-shadow: 0px 1px 4px rgba(64, 64, 64, .5);
+}
+
+.history.status .x-wrap,
+.history.event .x-wrap
+{
+	padding-top: 1px;
+	padding-bottom: 2px;
+}
+
+.history.message.hide-icons .x-wrap,
+.history.IRC.message .x-wrap
+{
+	margin-left: 5px;
+}
+
+.history.message:not(.consecutive).hide-icons,
+.history.status:not(.consecutive).hide-icons,
+.history.event:not(.consecutive).hide-icons,
+.IRC:not(.consecutive)
+{
+	margin-left: 0px !important;
+}
+
+.history .x-sender
+{
+	display: inline;
+}
+
+.history .x-rtime
+{
+	margin-right: 0px;
+	text-shadow: 0px 1px 4px rgba(184, 184, 184, .5);
+}
+
+.history.status .x-rtime,
+.history.event .x-rtime
+{
+	color: rgba(216, 216, 216, 1);
+}
+
+.history.status .x-message,
+.history.event .x-message
+{
+	text-shadow: 0px 1px 4px rgba(64, 64, 64, .5);
+	padding-right: 4px;
+}
+
+.history.x-hover + .history.x-hover
+{
+	-webkit-box-shadow: 0px 2px 2px rgba(255, 255, 255, 1) !important;
+}
+
+/* header */
+
+#x-wrap,
+#x-header .x-icon,
+#x-header .x-iconmask
+{
+	-webkit-border-bottom-left-radius: 0px !important;
+}
+
+#x-wrap.IRC img.x-icon,
+#x-wrap.IRC .x-iconmask
+{
+	display: none;
+}
+
+#x-wrap.IRC .x-sender.x-incoming
+{
+	left: 8px !important;
+}
+
+#x-wrap.IRC .x-sender.x-outgoing
+{
+	right: 8px !important;
+}
+
+#x-wrap.IRC .x-color.x-incoming
+{
+	left: 0px !important;
+	-webkit-border-top-left-radius: 5px !important;
+}
+
+#x-wrap.IRC .x-color.x-outgoing
+{
+	right: 0px !important;
+	-webkit-border-top-right-radius: 5px !important;
+	-webkit-border-bottom-right-radius: 5px !important;
+}

resources/chat/styles/Smooth Operator/Time-Icon.style

+@charset "utf-8";
+
+body
+{
+	margin: 0px;
+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255 ,255, 1)), to(rgba(208, 208, 208, 1))) fixed repeat-x;
+	background: rgba(0, 0, 0, 0.25);
+	-webkit-background-size: auto;
+	word-wrap: break-word;
+	word-break: break-word;
+}
+
+#chat
+{
+	padding: 8px;
+}
+
+#chat .history:first-child.message
+{
+	-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, .3), 0px 0px 1px rgba(0, 0, 0, .4);
+}
+
+.first-focus:before
+{
+	position: absolute;
+	margin-top: -4px;
+	right: 5px;
+	font-size: 9px;
+	content: "\2b07";
+	content: "\25bc";
+	color: rgba(64, 64, 64, 1);
+	text-shadow: 0px 1px 1px rgba(255, 255, 255, 1);
+}
+
+.regained-focus:not(.consecutive):before
+{
+	position: absolute;
+	margin-top: -18px;
+	right: 5px;
+	font-size: 9px;
+	content: "\2b06";
+	content: "\25b2";
+	color: rgba(64, 64, 64, 1);
+	text-shadow: 0px 1px 1px rgba(255, 255, 255, 1);
+}
+
+.regained-focus:before
+{
+	position: absolute;
+	margin-top: -7px;
+	right: 5px;
+	font-size: 9px;
+	content: "\2b06";
+	content: "\25b2";
+	color: rgba(64, 64, 64, 1);
+	text-shadow: 0px 1px 1px rgba(255, 255, 255, 1);
+}
+
+.last-focus > #insert:before
+{
+	position: absolute;
+	margin-top: -6px;
+	right: 5px;
+	font-size: 9px;
+	content: "\2b06";
+	content: "\25b2";
+	color: rgba(64, 64, 64, 1);
+	text-shadow: 0px 1px 1px rgba(255, 255, 255, 1);
+}
+
+.message:not(.consecutive),
+.status:not(.consecutive),
+.event:not(.consecutive)
+{
+	margin-right: 10px;
+	min-width: 7em;
+}
+
+.message:not(.consecutive):not(.history),
+.status:not(.consecutive):not(.history),
+.event:not(.consecutive):not(.history)
+{
+	margin-top: 8px;
+	padding-top: 2px;
+	padding-bottom: 2px;
+	-webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, .4), 0px 0px 1px rgba(0, 0, 0, .4);
+	-webkit-border-radius: 5px;
+	-webkit-border-bottom-right-radius: 0px;
+}
+
+.message.mention .x-message:before
+{
+	position: absolute;
+	margin-top: -1px;
+	content: "\23af";
+	right: 4px;
+	font-size: 12px;
+	content: "\2605";
+	color: rgba(64, 64, 64, 1);
+	text-shadow: 0px 1px 1px rgba(255, 255, 255, 1);
+}
+
+.message:not(.consecutive):not(.history)
+{
+	min-height: 28px;
+}
+
+.message.consecutive:not(.history)
+{
+	margin-left: 0px;
+	padding-top: 1px;
+	padding-bottom: 0px;
+	padding-right: 0px;
+}
+
+.message:not(.consecutive)
+{
+	color: rgba(64, 64, 64, 1);
+}
+
+.message:not(.autoreply):not(.consecutive):not(.x-hover):not(.history)
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(248, 248, 248, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(240,240, 240, 1))) 0px 16px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .75)), to(rgba(255, 255, 255, .25))) 48px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .25)), to(rgba(255, 255, 255, .25))) 48px 32px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(248, 248, 248, 1))) 53px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(240, 240, 240, 1))) 53px 16px no-repeat;
+	-webkit-background-size: 48px 16px, 48px 100%, 5px 32px, 5px 100%, 100% 16px, 100% 100%;
+}
+
+.mention.message:not(.autoreply):not(.consecutive):not(.x-hover):not(.history)
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .9)), to(rgba(248, 248, 248, .9))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, .9)), to(rgba(240,240, 240, .9))) 0px 16px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .75)), to(rgba(255, 255, 255, .25))) 48px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .25)), to(rgba(255, 255, 255, .25))) 48px 32px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .9)), to(rgba(248, 248, 248, .9))) 53px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, .9)), to(rgba(240, 240, 240, .9))) 53px 16px no-repeat;
+	-webkit-background-size: 48px 16px, 48px 100%, 5px 32px, 5px 100%, 100% 16px, 100% 100%;
+}
+
+.message.autoreply:not(.consecutive):not(.x-hover):not(.history)
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(96, 96, 96, 1)), to(rgba(80, 80, 80, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(80, 80, 80, 1)), to(rgba(64, 64, 64, 1))) 0px 16px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .625)), to(rgba(255, 255, 255, .25))) 48px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .25)), to(rgba(255, 255, 255, .25))) 48px 32px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(96, 96, 96, 1)), to(rgba(80, 80, 80, 1))) 53px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(80, 80, 80, 1)), to(rgba(64, 64, 64, 1))) 53px 16px no-repeat;
+	-webkit-background-size: 48px 16px, 48px 100%, 5px 32px, 5px 100%, 100% 16px, 100% 100%;
+	-webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, .4), 0px 0px 1px rgba(0, 0, 0, .4), 0px 0px 1px rgba(0, 0, 0, 1);
+}
+
+.message.x-hover:not(.consecutive):not(.history)
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(208, 208, 208, 1)), to(rgba(192, 192, 192, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(208, 208, 208, .75)), to(rgba(192, 192, 192, .75))) 48px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(208, 208, 208, 1)), to(rgba(192, 192, 192, 1))) 53px 0px no-repeat;
+	-webkit-background-size: 48px 100%, 5px 100%, 100% 100%;
+	-webkit-box-shadow: 0px 2px 4px rgba(255, 255, 255, 1), 0px -1px 1px rgba(0, 0, 0, .4);
+}
+
+.message.consecutive
+{
+	background: none !important;
+}
+
+.status:not(.consecutive):not(.history),
+.event:not(.consecutive):not(.history)
+{
+	color: rgba(244, 244, 244, 1);
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(96, 96, 96, 1)), to(rgba(80, 80, 80, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(80, 80, 80, 1)), to(rgba(64, 64, 64, 1))) 0px 16px no-repeat;
+	-webkit-background-size: 100% 16px, 100% 100%;
+}
+
+.status.consecutive,
+.event.consecutive
+{
+	margin-top: 2px;
+}
+
+.x-color
+{
+	display: none;
+}
+
+.message img.x-icon
+{
+	height: 32px !important;
+	width: 32px !important;
+	float: right;
+	z-index: 3;
+	margin-top: -2px;
+	-webkit-border-top-right-radius: 5px;
+}
+
+.message .x-iconmask
+{
+	height: 32px;
+	width: 32px;
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .625)), to(rgba(255, 255, 255, 0))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0))) 0px 16px no-repeat;
+	-webkit-background-size: 32px 16px, 32px 100%;
+	position: absolute;
+	right: 18px;
+	z-index: 4;
+	margin-top: -2px;
+	-webkit-border-top-right-radius: 5px;
+}
+
+.autoreply.message:not(.x-hover) .x-iconmask
+{
+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(192, 192, 192, .625)), to(rgba(64, 64, 64, .25))) 0px 0px no-repeat;
+	-webkit-background-size: 32px 16px;
+}
+
+.x-hover.message .x-iconmask
+{
+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(208, 208, 208, .625)), to(rgba(192, 192, 192, .625))) 0px 0px no-repeat;
+	-webkit-background-size: 32px 32px;
+}
+
+.message.hide-icons img.x-icon,
+.IRC.message img.x-icon,
+.consecutive.message img.x-icon,
+.consecutive.message .x-sender,
+.history.message img.x-icon,
+.message.hide-icons .x-iconmask,
+.IRC.message .x-iconmask,
+.consecutive.message .x-iconmask,
+.history.message .x-iconmask
+{
+	display: none !important;
+}
+
+.message .x-wrap
+{
+	display: block;
+	margin-left: 48px;
+	padding-left: 8px;
+	padding-right: 10px;
+	padding-bottom: 1px;
+}
+
+.status .x-wrap,
+.event .x-wrap
+{
+	display: block;
+	margin-left: 48px;
+	padding-left: 8px;
+	padding-right: 10px;
+	padding-bottom: 1px;
+}
+
+.x-sender
+{
+	font-weight: bold;
+	display: block;
+	padding-top: 1px;
+	padding-bottom: 2px;
+}
+
+.message.autoreply:not(.history) .x-sender,
+.message.autoreply:not(.history) .x-message
+{
+	color: rgba(244, 244, 244, 1);
+}
+
+.x-rtime
+{
+	display: none;
+}
+
+.x-ltime
+{
+	position: absolute;
+	left: 12px;
+	margin-top: 1px;
+	font-size: 9px;
+	width: 4.5em;
+	text-align: right;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.message .x-ltime
+{
+	color: rgba(152, 152, 152, 1);
+}
+
+.autoreply .x-ltime,
+.status .x-ltime,
+.event .x-ltime
+{
+	color: rgba(168, 168, 168, 1);
+}
+
+.x-mark
+{
+	position: absolute;
+	left: 55px;
+	margin-left: -.054em;
+	margin-top: -2px;
+	margin-right: -2px;
+	letter-spacing: -.2em;
+	font-size: 12px;
+}
+
+.x-mark:before
+{
+	content: "\2023";
+}
+
+.message .x-mark
+{
+	color: rgba(0, 0, 0, .8)
+}
+
+.status .x-mark,
+.event .x-mark
+{
+	color: rgba(120, 120, 120, 1);
+}
+
+.message.x-hover .x-sender,
+.message.x-hover .x-ltime,
+.message.x-hover .x-message
+{
+	color: rgba(0, 0, 0, 1) !important;
+}
+
+img.emoticon
+{
+	vertical-align: top;
+}
+
+/*.history img.emoticon
+{
+	opacity: .4;
+}*/
+
+a,
+a:link
+{
+	color: inherit;
+	text-decoration: underline;
+}
+
+a:hover
+{
+	border-bottom: 1px solid;
+}
+
+a:active
+{
+	border-bottom: 2px solid;
+}
+
+img.fullSizeImage
+{
+	width: auto;
+	height: auto;
+	max-height: 100%;
+	max-width: 100%;
+}
+
+img.scaledToFitImage
+{
+	width: auto;
+	max-height: 10px;
+}
+
+/* history */
+
+.history.message:not(.consecutive),
+.history.status:not(.consecutive),
+.history.event:not(.consecutive)
+{
+	display: block;
+	margin-top: 0px;
+	margin-bottom: 0px;
+	-webkit-border-radius: 0px;
+	-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, .3);
+}
+
+.history.status:not(.consecutive),
+.history.event:not(.consecutive)
+{
+	color: rgba(244, 244, 244, 1);
+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(112, 112, 112, 1)), to(rgba(112, 112, 112, 1))) 0px 0px no-repeat;
+}
+
+.history.x-hover + .history.x-hover
+{
+	-webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 1) !important;
+}
+
+.history.status,
+.history.event
+{
+	border-left: 1px solid rgba(128, 128, 128, 1);
+	border-right: 1px solid rgba(128, 128, 128, 1);
+	margin-right: 9px;
+	margin-left: -1px;
+}
+
+.history.status:first-child,
+.history.event:first-child
+{
+	-webkit-border-top-left-radius: 5px;
+	-webkit-border-top-right-radius: 5px;
+}
+
+.history.status .x-message,
+.history.event .x-message
+{
+	text-shadow: 0px 1px 4px rgba(64, 64, 64, .5);
+}
+
+.history.message:not(.consecutive)
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(248, 248, 248, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, .5)), to(rgba(248, 248, 248, .5))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(248, 248, 248, 1))) 53px 0px no-repeat;
+	-webkit-background-size: 48px 100%, 53px 100%, 100% 100%;
+}
+
+.history.mention.message:not(.consecutive)
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, .9)), to(rgba(248, 248, 248, .9))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, .5)), to(rgba(248, 248, 248, .5))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, .9)), to(rgba(248, 248, 248, .9))) 53px 0px no-repeat;
+	-webkit-background-size: 48px 100%, 53px 100%, 100% 100%;
+}
+
+.history.message.x-hover:not(.consecutive)
+{
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(200, 200, 200, 1)), to(rgba(200, 200, 200, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(200, 200, 200, .75)), to(rgba(200, 200, 200, .75))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(200, 200, 200, 1)), to(rgba(200, 200, 200, 1))) 53px 0px no-repeat;
+	-webkit-background-size: 48px 100%, 53px 100%, 100% 100%;
+}
+
+.history.message .x-wrap
+{
+	margin-top: 0px;
+	margin-bottom: 0px;
+	padding-top: 1px;
+}
+
+.history.message .x-wrap .x-sender,
+.history.message .x-wrap .x-message
+{
+	text-shadow: 0px 1px 4px rgba(64, 64, 64, .5);
+}
+
+.history.status .x-wrap,
+.history.event .x-wrap
+{
+	padding-top: 1px;
+	padding-bottom: 2px;
+}
+
+.history .x-sender
+{
+	display: inline;
+}
+
+.history .x-ltime
+{
+	text-shadow: 0px 1px 4px rgba(184, 184, 184, .5);
+}
+
+.history.status .x-ltime,
+.history.event .x-ltime
+{
+	color: rgba(216, 216, 216, 1);
+}
+
+.history.status .x-mark,
+.history.event .x-mark
+{
+	color: rgba(152, 152, 152, 1);
+}
+
+.history.x-hover + .history.x-hover
+{
+	-webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 1) !important;
+}
+
+/* header */
+
+#x-wrap,
+#x-header .x-icon,
+#x-header .x-iconmask
+{
+	-webkit-border-bottom-right-radius: 0px !important;
+}
+
+#x-wrap.IRC img.x-icon,
+#x-wrap.IRC .x-iconmask
+{
+	display: none;
+}
+
+#x-wrap.IRC .x-sender.x-incoming
+{
+	left: 8px !important;
+}
+
+#x-wrap.IRC .x-sender.x-outgoing
+{
+	right: 8px !important;
+}
+
+#x-wrap.IRC .x-color.x-incoming
+{
+	left: 0px !important;
+	-webkit-border-top-left-radius: 5px !important;
+	-webkit-border-bottom-left-radius: 5px !important;
+}
+
+#x-wrap.IRC .x-color.x-outgoing
+{
+	right: 0px !important;
+	-webkit-border-top-right-radius: 5px !important;
+}

resources/chat/styles/Smooth Operator/css/topic.css

+@charset "utf-8";
+
+#x-topic #x-wrap
+{
+	padding-top: 6px;
+	padding-bottom: 6px;
+	position: fixed;
+	top: 8px;
+	right: 18px;
+	left: 8px;
+	z-index: 100;
+	color: rgba(64, 64, 64, 1);
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(248, 248, 248, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(240,240, 240, 1))) 0px 16px no-repeat;
+	-webkit-background-size: 100% 16px, 100% 100%;
+	-webkit-border-radius: 5px;
+	-webkit-box-shadow: 0px 4px 16px rgba(0, 0, 0, .75), 8px -8px 8px rgba(255, 255, 255, 1), -8px -8px 8px rgba(255, 255, 255, 1), -8px 16px 16px rgba(248, 248, 248, 1), 8px 16px 16px rgba(248, 248, 248, 1);
+	opacity: 1;
+	-webkit-transition: opacity .4s linear;
+	min-width: 7em;
+}
+
+
+#x-topic[title=""]:not(:hover)
+{
+	opacity: 0;
+}
+
+#x-topic #topicEdit
+{
+	padding-left: 8px;
+	padding-right: 8px;
+	display: block;
+	min-height: 1.2em;
+
+	word-wrap: break-word;
+	word-break: break-word;
+}
+
+#x-topic .x-serviceIcon
+{
+	position: relative;
+	right: 4px;
+	float: right;
+	margin-left: 10px;
+}
+
+#x-topic img.x-serviceIcon
+{
+	height: 1.6em;
+	margin-top: -.2em;
+	margin-right: -.2em;
+	margin-bottom: -.2em;
+}
+
+/* toggle */
+
+.x-toggle
+{
+	position: fixed;
+	top: 4px;
+	left: 4px;
+	width: 16px;
+	height: 16px;
+	font-size: 21px !important;
+	font-family: "Apple Symbols";
+	z-index: 999;
+	cursor: pointer;
+	opacity: 0;
+	-webkit-transition: opacity .4s linear;
+
+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(240, 240, 240, 1))) 0px 0px no-repeat;
+	-webkit-border-radius: 5px;
+	-webkit-box-shadow: 0px 4px 16px rgba(0, 0, 0, .5);
+	color: rgba(64, 64, 64, 1);
+	text-align: center;
+}
+
+.x-toggle:active
+{
+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(240, 240, 240, 1)), to(rgba(255, 255, 255, 1))) 0px 0px no-repeat;
+}
+
+body:hover .x-toggle
+{
+	opacity: .5;
+}
+
+#x-topic:hover .x-toggle
+{
+	opacity: 1;
+}
+
+#x-hide:before
+{
+	content: "\2299";
+	position: fixed;
+	top: 3px;
+	left: 4px;
+}
+
+#x-hide:hover:before
+{
+	content: "\2296";
+}
+
+#x-hide:active:before
+{
+	content: "\2299";
+}
+
+#x-show:before
+{
+	position: fixed;
+	top: 3px;
+	left: 4px;
+	content: "\2299";
+}
+
+#x-show:hover:before
+{
+	content: "\2295";
+}
+
+#x-show:active:before
+{
+	content: "\2299";
+}

resources/chat/styles/Smooth Operator/html/message.html

+<div class="{message.css_classes} {user_icons}" user="{message.sender.name}" style="background-color: {message.sender.color};">
+	<img class="x-icon" src="{message.sender.iconpath}" />
+	<span class="x-iconmask" style="-webkit-mask-box-image: {message.sender.iconpath};"></span>
+	<span class="x-color" style="background-color: {message.sender.color};" src="{message.sender.iconpath}"></span>
+	<span class="x-wrap">
+		<span class="x-sender">{message.sender.name} </span>
+		<span class="x-rtime" title="{message.date}">{message.time} </span>
+		<span class="x-ltime" title="{message.date}">{message.time} </span>
+		<span class="x-mark"></span>
+		<span class="x-message" title="{message.time}">{message.message} </span>
+	</span>
+	<span id="insert"></span>
+</div>

resources/chat/styles/Smooth Operator/html/message_continuation.html

+<div class="{message.css_classes} {user_icons}" user="{message.sender.name}" style="background-color: {message.sender.color};">
+	<img class="x-icon" src="{message.sender.iconpath}" />
+	<span class="x-iconmask" style="-webkit-mask-box-image: {message.sender.iconpath};"></span>
+	<span class="x-color" style="background-color: {message.sender.color};" src="{message.sender.iconpath}"></span>
+	<span class="x-wrap">
+		<span class="x-sender">{message.sender.name} </span>
+		<span class="x-rtime" title="{message.date}">{message.time} </span>
+		<span class="x-ltime" title="{message.date}">{message.time} </span>
+		<span class="x-mark"></span>
+		<span class="x-message" title="{message.time}">{message.message} </span>
+	</span>
+	<span id="insert"></span>
+</div>

resources/chat/styles/Smooth Operator/html/notification.html

+<div class="{message.css_classes} {user_icons}">
+	<span class="x-wrap">
+		<span class="x-rtime" title="{message.date}">{message.time} </span>
+		<span class="x-ltime" title="{message.date}">{message.time} </span>
+		<span class="x-mark"></span>
+		<span class="x-message">{message.message} </span>
+	</span>
+	<span id="insert"></span>
+</div>

resources/chat/styles/Smooth Operator/html/topic.html

+<div id="x-topic">
+	<style type="text/css">
+		@import url(../css/topic.css);
+	</style>
+
+	<div id="x-hide" class="x-toggle" onClick="hide_header();"></div>
+	<div id="x-show" class="x-toggle" onClick="show_header();" style="display: none"></div>
+	<div id="x-wrap" class="%service%">
+		<img class="x-serviceIcon" title="%service%" alt="%service%" src="%serviceIconPath%" />
+		%topic%
+	</div>
+</div>

resources/chat/styles/Smooth Operator/style.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<style version="1.0">
+    <default_variant>Icon-Time</default_variant>
+    <font_family>Tahoma, "Liberation Sans", sans-serif</font_family>
+    <font_size>11</font_size>
+</style>

resources/chat/styles/Smooth Operator/test/mockup.html

+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<title>Smooth Operator message style mockup</title>
+
+	<style type="text/css">
+		@import url("../Classic.style");
+
+		body { font: 11px Tahoma, "Liberation Sans", sans-serif; }
+	</style>
+</head>
+
+<body>
+
+<div id="chat" class="groupchat">
+
+<div class="history date_separator event show-icons">
+	<span class="x-wrap">
+		<span class="x-rtime" title="19 Apr 2004">12:45:48 </span>
+		<span class="x-ltime" title="19 Apr 2004">12:45:48 </span>
+		<span class="x-mark"></span>
+		<span class="x-message" title="12:45:48">Wednesday, June 09, 2004 </span>
+	</span>
+</div>
+
+<div class="history date_separator event show-icons">
+	<span class="x-wrap">
+		<span class="x-rtime" title="19 Apr 2004">12:45:48 </span>
+		<span class="x-ltime" title="19 Apr 2004">12:45:48 </span>
+		<span class="x-mark"></span>
+		<span class="x-message" title="12:45:48">Wednesday, June 09, 2004 </span>
+	</span>
+</div>
+
+<div class="history incoming autoreply message show-icons" user="fetchgreebledonx" style="background-color: paleturquoise;">
+	<img class="x-icon" src="mockup-incoming_icon.png" />
+	<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-incoming_icon.png);"></span>
+	<span class="x-color" style="background-color: paleturquoise"></span>
+	<span class="x-wrap">
+		<span class="x-sender" title="fetchgreebledonx">Jeff (Autoreply) </span>
+		<span class="x-rtime" title="19 Apr 2004">12:47:51 </span>
+		<span class="x-ltime" title="19 Apr 2004">12:47:51 </span>
+		<span class="x-mark"></span>
+		<span class="x-message">Away for the sake of being away. Away for the sake of being away. Away for the sake of being away. Away for the sake of being away. Away for the sake of being away. </span>
+	</span>
+	<div class="history incoming message consecutive show-icons" user="fetchgreebledonx" style="background-color: paleturquoise;">
+		<img class="x-icon" src="mockup-incoming_icon.png" />
+		<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-incoming_icon.png);"></span>
+		<span class="x-color" style="background-color: paleturquoise"></span>
+		<span class="x-wrap">
+			<span class="x-sender" title="fetchgreebledonx">Jeff (Autoreply) </span>
+			<span class="x-rtime" title="19 Apr 2004">12:47:51 </span>
+			<span class="x-ltime" title="19 Apr 2004">12:47:51 </span>
+			<span class="x-mark"></span>
+			<span class="x-message">Away for the sake of being away. Away for the sake of being away. Away for the sake of being away. Away for the sake of being away. Away for the sake of being away. </span>
+		</span>
+	</div>
+</div>
+
+
+<div class="history date_separator event show-icons">
+	<span class="x-wrap">
+		<span class="x-rtime" title="19 Apr 2004">12:45:48 </span>
+		<span class="x-ltime" title="19 Apr 2004">12:45:48 </span>
+		<span class="x-mark"></span>
+		<span class="x-message" title="12:45:48">Wednesday, June 09, 2004 </span>
+	</span>
+</div>
+
+<div class="history outgoing message show-icons" user="TekJew" style="background-color: springgreen;">
+	<img class="x-icon" src="mockup-outgoing_icon.png" />
+	<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-outgoing_icon.png);"></span>
+	<span class="x-color" style="background-color: springgreen"></span>
+	<span class="x-wrap">
+		<span class="x-sender" title="TekJew">Evan </span>
+		<span class="x-rtime" title="19 Apr 2004">12:45:48 </span>
+		<span class="x-ltime" title="19 Apr 2004">12:45:48 </span>
+		<span class="x-mark"></span>
+		<span class="x-message">So a priest, a rabbi, and a chicken walk into a bar. </span>
+	</span>
+</div>
+
+<div class="history incoming message show-icons" user="fetchgreebledonx" style="background-color: paleturquoise;">
+	<img class="x-icon" src="mockup-incoming_icon.png" />
+	<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-incoming_icon.png);"></span>
+	<span class="x-color" style="background-color: paleturquoise"></span>
+	<span class="x-wrap">
+		<span class="x-sender" title="fetchgreebledonx">Jeff </span>
+		<span class="x-rtime" title="19 Apr 2004">12:46:07 </span>
+		<span class="x-ltime" title="19 Apr 2004">12:46:07 </span>
+		<span class="x-mark"></span>
+		<span class="x-message">I'mprettysureI'veheardthisonebefore.I'mprettysureI'veheardthisonebefore.I'mprettysureI'veheardthisonebefore.I'mprettysureI'veheardthisonebefore.I'mprettysureI'veheardthisonebefore.I'mprettysureI'veheardthisonebefore.I'mprettysureI'veheardthisonebefore.I'mprettysureI'veheardthisonebefore.I'mprettysureI'veheardthisonebefore.I'mprettysureI'veheardthisonebefore. </span>
+	</span>
+	<div class="history consecutive incoming message show-icons" user="fetchgreebledonx" style="background-color: paleturquoise;">
+		<img class="x-icon" src="mockup-incoming_icon.png" />
+		<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-incoming_icon.png);"></span>
+		<span class="x-color" style="background-color: paleturquoise"></span>
+		<span class="x-wrap">
+			<span class="x-sender" title="fetchgreebledonx">Jeff </span>
+			<span class="x-rtime" title="19 Apr 2004">12:46:32 </span>
+			<span class="x-ltime" title="19 Apr 2004">12:46:32 </span>
+			<span class="x-mark"></span>
+			<span class="x-message">So what happens next? </span>
+		</span>
+	</div>
+</div>
+
+<div class="history mention incoming message show-icons" user="fetchgreebledonx" style="background-color: paleturquoise;">
+	<img class="x-icon" src="mockup-incoming_icon.png" />
+	<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-incoming_icon.png);"></span>
+	<span class="x-color" style="background-color: paleturquoise"></span>
+	<span class="x-wrap">
+		<span class="x-sender" title="fetchgreebledonx">Jeff </span>
+		<span class="x-rtime" title="19 Apr 2004">12:46:32 </span>
+		<span class="x-ltime" title="19 Apr 2004">12:46:32 </span>
+		<span class="x-mark"></span>
+		<span class="x-message">So what happens next? </span>
+	</span>
+</div>
+
+<div class="history mention incoming message show-icons" user="fetchgreebledonx" style="background-color: paleturquoise;">
+	<img class="x-icon" src="mockup-incoming_icon.png" />
+	<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-incoming_icon.png);"></span>
+	<span class="x-color" style="background-color: paleturquoise"></span>
+	<span class="x-wrap">
+		<span class="x-sender" title="fetchgreebledonx">Jeff </span>
+		<span class="x-rtime" title="19 Apr 2004">12:46:32 </span>
+		<span class="x-ltime" title="19 Apr 2004">12:46:32 </span>
+		<span class="x-mark"></span>
+		<span class="x-message">So what happens next? </span>
+	</span>
+</div>
+
+<div class="history date_separator event show-icons">
+	<span class="x-wrap">
+		<span class="x-rtime" title="19 Apr 2004">12:45:48 </span>
+		<span class="x-ltime" title="19 Apr 2004">12:45:48 </span>
+		<span class="x-mark"></span>
+		<span class="x-message" title="12:45:48">Wednesday, June 09, 2004 </span>
+	</span>
+</div>
+
+<div class="history mention incoming message show-icons" user="fetchgreebledonx" style="background-color: paleturquoise;">
+	<img class="x-icon" src="mockup-incoming_icon.png" />
+	<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-incoming_icon.png);"></span>
+	<span class="x-color" style="background-color: paleturquoise"></span>
+	<span class="x-wrap">
+		<span class="x-sender" title="fetchgreebledonx">Jeff </span>
+		<span class="x-rtime" title="19 Apr 2004">12:46:32 </span>
+		<span class="x-ltime" title="19 Apr 2004">12:46:32 </span>
+		<span class="x-mark"></span>
+		<span class="x-message">So what happens next? </span>
+	</span>
+</div>
+
+<div class="history outgoing message show-icons" user="TekJew" style="background-color: springgreen;">
+	<img class="x-icon" src="mockup-outgoing_icon.png" />
+	<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-outgoing_icon.png);"></span>
+	<span class="x-color" style="background-color: springgreen"></span>
+	<span class="x-wrap">
+		<span class="x-sender" title="TekJew">Evan </span>
+		<span class="x-rtime" title="19 Apr 2004">12:45:48 </span>
+		<span class="x-ltime" title="19 Apr 2004">12:45:48 </span>
+		<span class="x-mark"></span>
+		<span class="x-message">So a priest, a rabbi, and a chicken walk into a bar. </span>
+	</span>
+</div>
+
+<div class="history incoming message show-icons" user="fetchgreebledonx" style="background-color: paleturquoise;">
+	<img class="x-icon" src="mockup-incoming_icon.png" />
+	<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-incoming_icon.png);"></span>
+	<span class="x-color" style="background-color: paleturquoise"></span>
+	<span class="x-wrap">
+		<span class="x-sender" title="fetchgreebledonx">Jeff </span>
+		<span class="x-rtime" title="19 Apr 2004">12:46:07 </span>
+		<span class="x-ltime" title="19 Apr 2004">12:46:07 </span>
+		<span class="x-mark"></span>
+		<span class="x-message">I'm pretty sure I've heard this one before. </span>
+	</span>
+	<div class="history consecutive incoming message show-icons" user="fetchgreebledonx" style="background-color: paleturquoise;">
+		<img class="x-icon" src="mockup-incoming_icon.png" />
+		<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-incoming_icon.png);"></span>
+		<span class="x-color" style="background-color: paleturquoise"></span>
+		<span class="x-wrap">
+			<span class="x-sender" title="fetchgreebledonx">Jeff </span>
+			<span class="x-rtime" title="19 Apr 2004">12:46:32 </span>
+			<span class="x-ltime" title="19 Apr 2004">12:46:32 </span>
+			<span class="x-mark"></span>
+			<span class="x-message">So what happens next? </span>
+		</span>
+		<div class="history consecutive incoming message show-icons" user="fetchgreebledonx" style="background-color: paleturquoise;">
+			<img class="x-icon" src="mockup-incoming_icon.png" />
+			<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-incoming_icon.png);"></span>
+			<span class="x-color" style="background-color: paleturquoise"></span>
+			<span class="x-wrap">
+				<span class="x-sender" title="fetchgreebledonx">Jeff </span>
+				<span class="x-rtime" title="19 Apr 2004">12:46:32 </span>
+				<span class="x-ltime" title="19 Apr 2004">12:46:32 </span>
+				<span class="x-mark"></span>
+				<span class="x-message">So what happens next? </span>
+			</span>
+		</div>
+	</div>
+</div>
+
+<div class="history incoming message show-icons" user="fetchgreebledonx" style="background-color: paleturquoise;">
+	<img class="x-icon" src="mockup-incoming_icon.png" />
+	<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-incoming_icon.png);"></span>
+	<span class="x-color" style="background-color: paleturquoise"></span>
+	<span class="x-wrap">
+		<span class="x-sender" title="fetchgreebledonx">Jeff </span>
+		<span class="x-rtime" title="19 Apr 2004">12:46:32 </span>
+		<span class="x-ltime" title="19 Apr 2004">12:46:32 </span>
+		<span class="x-mark"></span>
+		<span class="x-message">So what happens next? </span>
+	</span>
+</div>
+
+<div class="history outgoing message show-icons" user="TekJew" style="background-color: springgreen;">
+	<img class="x-icon" src="mockup-outgoing_icon.png" />
+	<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-outgoing_icon.png);"></span>
+	<span class="x-color" style="background-color: springgreen"></span>
+	<span class="x-wrap">
+		<span class="x-sender" title="TekJew">Evan </span>
+		<span class="x-rtime" title="19 Apr 2004">12:45:48 </span>
+		<span class="x-ltime" title="19 Apr 2004">12:45:48 </span>
+		<span class="x-mark"></span>
+		<span class="x-message">So a priest, a rabbi, and a chicken walk into a bar. </span>
+	</span>
+</div>
+
+<div class="history date_separator event show-icons">
+	<span class="x-wrap">
+		<span class="x-rtime" title="19 Apr 2004">12:45:48 </span>
+		<span class="x-ltime" title="19 Apr 2004">12:45:48 </span>
+		<span class="x-mark"></span>
+		<span class="x-message" title="12:45:48">|Wednesday, June 09, 2004 </span>
+	</span>
+</div>
+
+<div class="history outgoing message show-icons" user="TekJew" style="background-color: springgreen;">
+	<img class="x-icon" src="mockup-outgoing_icon.png" />
+	<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-outgoing_icon.png);"></span>
+	<span class="x-color" style="background-color: springgreen"></span>
+	<span class="x-wrap">
+		<span class="x-sender" title="TekJew">Evan </span>
+		<span class="x-rtime" title="19 Apr 2004">12:45:48 </span>
+		<span class="x-ltime" title="19 Apr 2004">12:45:48 </span>
+		<span class="x-mark"></span>
+		<span class="x-message">So a priest, a rabbi, and a chicken walk into a bar. </span>
+	</span>
+</div>
+
+<div class="history incoming message show-icons" user="fetchgreebledonx" style="background-color: paleturquoise;">
+	<img class="x-icon" src="mockup-incoming_icon.png" />
+	<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-incoming_icon.png);"></span>
+	<span class="x-color" style="background-color: paleturquoise"></span>
+	<span class="x-wrap">
+		<span class="x-sender" title="fetchgreebledonx">|Jeff </span>
+		<span class="x-rtime" title="19 Apr 2004">12:46:07 </span>
+		<span class="x-ltime" title="19 Apr 2004">12:46:07 </span>
+		<span class="x-mark"></span>
+		<span class="x-message">I'm pretty sure I've heard this one before. </span>
+	</span>
+	<div class="history consecutive incoming message show-icons" user="fetchgreebledonx" style="background-color: paleturquoise;">
+		<img class="x-icon" src="mockup-incoming_icon.png" />
+		<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-incoming_icon.png);"></span>
+		<span class="x-color" style="background-color: paleturquoise"></span>
+		<span class="x-wrap">
+			<span class="x-sender" title="fetchgreebledonx">Jeff </span>
+			<span class="x-rtime" title="19 Apr 2004">12:46:32 </span>
+			<span class="x-ltime" title="19 Apr 2004">12:46:32 </span>
+			<span class="x-mark"></span>
+			<span class="x-message">|So what happens next? </span>
+		</span>
+	</div>
+</div>
+
+<!--
+<div class="date_separator event show-icons">
+	<span class="x-wrap">
+		<span class="x-rtime" title="19 Apr 2004">12:45:48 </span>
+		<span class="x-ltime" title="19 Apr 2004">12:45:48 </span>
+		<span class="x-mark"></span>
+		<span class="x-message" title="12:45:48">Wednesday, June 09, 2004 </span>
+	</span>
+</div>
+--!>
+
+<div class="outgoing message show-icons" user="TekJew" style="background-color: midnightblue;">
+	<img class="x-icon" src="mockup-outgoing_icon.png" />
+	<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-outgoing_icon.png);"></span>
+	<span class="x-color" style="background-color: midnightblue"></span>
+	<span class="x-wrap">
+		<span class="x-sender" title="TekJew">EvanEvanEvanEvanEvanEvanEvanEvanEvanEvanEvanEvanEvanEvanEvanEvanEvanEvanEvanEvan </span>
+		<span class="x-rtime" title="19 Apr 2004">12:46:50 </span>
+		<span class="x-ltime" title="19 Apr 2004">12:46:50 </span>
+		<span class="x-mark"></span>
+		<span class="x-message">|If I remember correctly, they explode outward at the speed of light. </span>
+	</span>
+	<div class="consecutive outgoing message show-icons" user="TekJew" style="background-color: springgreen;">
+		<img class="x-icon" src="mockup-outgoing_icon.png" />
+		<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-outgoing_icon.png);"></span>
+		<span class="x-color" style="background-color: springgreen"></span>
+		<span class="x-wrap">
+			<span class="x-sender" title="TekJew">Evan </span>
+			<span class="x-rtime" title="19 Apr 2004">12:47:00 </span>
+			<span class="x-ltime" title="19 Apr 2004">12:47:00 </span>
+			<span class="x-mark"></span>
+			<span class="x-message">But that might be if you cross the streams… </span>
+		</span>
+		<div class="consecutive outgoing message show-icons" user="TekJew" style="background-color: springgreen;">
+			<img class="x-icon" src="mockup-outgoing_icon.png" />
+			<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-outgoing_icon.png);"></span>
+			<span class="x-color" style="background-color: springgreen"></span>
+			<span class="x-wrap">
+				<span class="x-sender" title="TekJew">Evan </span>
+				<span class="x-rtime" title="19 Apr 2004">12:46:50 </span>
+				<span class="x-ltime" title="19 Apr 2004">12:46:50 </span>
+				<span class="x-mark"></span>
+				<span class="x-message">If I remember correctly, they explode outward at the speed of light. </span>
+			</span>
+		</div>
+	</div>
+</div>
+
+<div class="mention incoming message show-icons" user="fetchgreebledonx" style="background-color: red;">
+	<img class="x-icon" src="mockup-incoming_icon.png" />
+	<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-incoming_icon.png);"></span>
+	<span class="x-color" style="background-color: red"></span>
+	<span class="x-wrap">
+		<span class="x-sender" title="fetchgreebledonx">|Jeff Jeff Jeff Jeff Jeff Jeff Jeff Jeff Jeff Jeff Jeff Jeff Jeff Jeff Jeff Jeff Jeff Jeff Jeff Jeff </span>
+		<span class="x-rtime" title="19 Apr 2004">12:47:06 </span>
+		<span class="x-ltime" title="19 Apr 2004">12:47:06 </span>
+		<span class="x-mark"></span>
+		<span class="x-message">…thus negating all existence! </span>
+	</span>
+</div>
+
+<div class="outgoing message show-icons" user="TekJew" style="background-color: springgreen;">
+	<img class="x-icon" src="mockup-outgoing_icon.png" />
+	<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-outgoing_icon.png);"></span>
+	<span class="x-color" style="background-color: springgreen"></span>
+	<span class="x-wrap">
+		<span class="x-sender" title="TekJew">Evan </span>
+		<span class="x-rtime" title="19 Apr 2004">12:47:51 </span>
+		<span class="x-ltime" title="19 Apr 2004">12:47:51 </span>
+		<span class="x-mark"></span>
+		<span class="x-message">Precisely! it's a risk one takes whenever one walks into a bar, I'm afraid. Especially if one is a chicken. </span>
+	</span>
+</div>
+
+<div class="event notification show-icons">
+	<span class="x-wrap">
+		<span class="x-rtime" title="19 Apr 2004">12:47:54 </span>
+		<span class="x-ltime" title="19 Apr 2004">12:47:54 </span>
+		<span class="x-mark"></span>
+		<span class="x-message">Jeff wants your attention! </span>
+	</span>
+</div>
+
+<div class="status away first-focus show-icons">
+	<span class="x-wrap">
+		<span class="x-rtime" title="19 Apr 2004">12:47:54 </span>
+		<span class="x-ltime" title="19 Apr 2004">12:47:54 </span>
+		<span class="x-mark"></span>
+		<span class="x-message">Jeff went away </span>
+	</span>
+	<div class="consecutive status away_message show-icons">
+		<span class="x-wrap">
+			<span class="x-rtime" title="19 Apr 2004">12:47:55 </span>
+			<span class="x-ltime" title="19 Apr 2004">12:47:55 </span>
+			<span class="x-mark"></span>
+			<span class="x-message">Away Message: "Away for the sake of being away. Away for the sake of being away. Away for the sake of being away. Away for the sake of being away. " </span>
+		</span>
+	</div>
+</div>
+
+<div class="incoming autoreply message first-focus show-icons" user="fetchgreebledonx" style="background-color: paleturquoise;">
+	<img class="x-icon" src="mockup-incoming_icon.png" />
+	<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-incoming_icon.png);"></span>
+	<span class="x-color" style="background-color: paleturquoise"></span>
+	<span class="x-wrap">
+		<span class="x-sender" title="fetchgreebledonx">Jeff (Autoreply) </span>
+		<span class="x-rtime" title="19 Apr 2004">12:47:51 </span>
+		<span class="x-ltime" title="19 Apr 2004">12:47:51 </span>
+		<span class="x-mark"></span>
+		<span class="x-message">Away for the sake of being away. Away for the sake of being away. Away for the sake of being away. Away for the sake of being away. Away for the sake of being away. </span>
+	</span>
+	<div class="incoming message first-focus focus consecutive show-icons" user="fetchgreebledonx" style="background-color: paleturquoise;">
+		<img class="x-icon" src="mockup-incoming_icon.png" />
+		<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-incoming_icon.png);"></span>
+		<span class="x-color" style="background-color: paleturquoise"></span>
+		<span class="x-wrap">
+			<span class="x-sender" title="fetchgreebledonx">Jeff (Autoreply) </span>
+			<span class="x-rtime" title="19 Apr 2004">12:47:51 </span>
+			<span class="x-ltime" title="19 Apr 2004">12:47:51 </span>
+			<span class="x-mark"></span>
+			<span class="x-message">Away for the sake of being away. Away for the sake of being away. Away for the sake of being away. Away for the sake of being away. Away for the sake of being away. </span>
+		</span>
+	</div>
+</div>
+
+<div class="outgoing message focus show-icons" user="TekJew" style="background-color: red;">
+	<img class="x-icon" src="mockup-outgoing_icon.png" />
+	<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-outgoing_icon.png);"></span>
+	<span class="x-color" style="background-color: red" src="mockup-outgoing_icon.png"></span>
+	<span class="x-wrap">
+		<span class="x-sender" title="TekJew">Evan </span>
+		<span class="x-rtime" title="19 Apr 2004">12:48:02 </span>
+		<span class="x-ltime" title="19 Apr 2004">12:48:02 </span>
+		<span class="x-mark"></span>
+		<span class="x-message">Gotta run; catch ya later <a href="http://slashdot.org">;) </a></span>
+	</span>
+</div>
+
+<div class="incoming message regained-focus focus show-icons" user="fetchgreebledonx" style="background-color: paleturquoise;">
+	<img class="x-icon" src="mockup-incoming_icon.png" />
+	<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-incoming_icon.png);"></span>
+	<span class="x-color" style="background-color: paleturquoise" src="mockup-incoming_icon.png"></span>
+	<span class="x-wrap">
+		<span class="x-sender" title="fetchgreebledonx">Jeff </span>
+		<span class="x-rtime" title="19 Apr 2004">12:49:32 </span>
+		<span class="x-ltime" title="19 Apr 2004">12:49:32 </span>
+		<span class="x-mark"></span>
+		<span class="x-message">So what happens next? </span>
+	</span>
+	<div class="incoming message regained-focus focus show-icons consecutive" user="fetchgreebledonx" style="background-color: paleturquoise;">
+		<img class="x-icon" src="mockup-incoming_icon.png" />
+		<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-incoming_icon.png);"></span>
+		<span class="x-color" style="background-color: paleturquoise" src="mockup-incoming_icon.png"></span>
+		<span class="x-wrap">
+			<span class="x-sender" title="fetchgreebledonx">Jeff </span>
+			<span class="x-rtime" title="19 Apr 2004">12:50:32 </span>
+			<span class="x-ltime" title="19 Apr 2004">12:50:32 </span>
+			<span class="x-mark"></span>
+			<span class="x-message">So what happens next? </span>
+		</span>
+	</div>
+</div>
+
+<div class="incoming message focus show-icons" user="xx-fetchgreebledonx" style="background-color: paleturquoise;">
+	<img class="x-icon" src="mockup-incoming_icon.png" />
+	<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-incoming_icon.png);"></span>
+	<span class="x-color" style="background-color: paleturquoise" src="mockup-incoming_icon.png"></span>
+	<span class="x-wrap">
+		<span class="x-sender" title="fetchgreebledonx">Jeff </span>
+		<span class="x-rtime" title="19 Apr 2004">12:49:32 </span>
+		<span class="x-ltime" title="19 Apr 2004">12:49:32 </span>
+		<span class="x-mark"></span>
+		<span class="x-message">So what happens next? So what happens next? So what happens next? So what happens next? So what happens next? So what happens next? So what happens next? So what happens next? So what happens next? So what happens next? So what happens next? So what happens next? So what happens next? So what happens next? So what happens next? So what happens next? So what happens next? So what happens next? So what happens next? So what happens next? So what happens next? </span>
+	</span>
+	<div class="incoming message last-focus focus show-icons consecutive" user="xx-fetchgreebledonx" style="background-color: paleturquoise;">
+		<img class="x-icon" src="mockup-incoming_icon.png" />
+		<span class="x-iconmask" style="-webkit-mask-box-image: url(mockup-incoming_icon.png);"></span>
+		<span class="x-color" style="background-color: paleturquoise" src="mockup-incoming_icon.png"></span>
+		<span class="x-wrap">
+			<span class="x-sender" title="fetchgreebledonx">Jeff </span>
+			<span class="x-rtime" title="19 Apr 2004">12:50:32 </span>
+			<span class="x-ltime" title="19 Apr 2004">12:50:32 </span>
+			<span class="x-mark"></span>
+			<span class="x-message">So what happens next? </span>
+		</span>
+		<span id="insert"></span>
+	</div>
+</div>
+
+</div>
+
+</body>
+</html>

resources/chat/styles/Smooth Operator/test/view.py

+#!/usr/bin/python
+
+from PyQt4.QtCore import QUrl
+from PyQt4.QtGui import QApplication
+from PyQt4.QtWebKit import QWebView, QWebSettings
+
+app = QApplication([])
+view = QWebView()
+settings = view.settings()
+settings.setAttribute(QWebSettings.DeveloperExtrasEnabled, True)
+view.load(QUrl('mockup.html'))
+view.show()
+app.exec_()

resources/chat/styles/Stockholm/Blue - Green.style

+@import url("css/base.css");
+@import url("css/incoming-blue.css");
+@import url("css/outgoing-green.css");

resources/chat/styles/Stockholm/Blue - Grey.style

+@import url("css/base.css");
+@import url("css/incoming-blue.css");
+@import url("css/outgoing-grey.css");

resources/chat/styles/Stockholm/Blue - Orange.style

+@import url("css/base.css");
+@import url("css/incoming-blue.css");
+@import url("css/outgoing-orange.css");

resources/chat/styles/Stockholm/Blue - Red.style

+@import url("css/base.css");
+@import url("css/incoming-blue.css");
+@import url("css/outgoing-red.css");

resources/chat/styles/Stockholm/Green - Blue.style

+@import url("css/base.css");
+@import url("css/incoming-green.css");
+@import url("css/outgoing-blue.css");

resources/chat/styles/Stockholm/Green - Grey.style

+@import url("css/base.css");
+@import url("css/incoming-green.css");
+@import url("css/outgoing-grey.css");

resources/chat/styles/Stockholm/Green - Orange.style

+@import url("css/base.css");
+@import url("css/incoming-green.css");
+@import url("css/outgoing-orange.css");

resources/chat/styles/Stockholm/Green - Red.style

+@import url("css/base.css");
+@import url("css/incoming-green.css");
+@import url("css/outgoing-red.css");

resources/chat/styles/Stockholm/Grey - Blue.style

+@import url("css/base.css");
+@import url("css/incoming-grey.css");
+@import url("css/outgoing-blue.css");

resources/chat/styles/Stockholm/Grey - Green.style

+@import url("css/base.css");
+@import url("css/incoming-grey.css");
+@import url("css/outgoing-green.css");

resources/chat/styles/Stockholm/Grey - Orange.style

+@import url("css/base.css");
+@import url("css/incoming-grey.css");
+@import url("css/outgoing-orange.css");

resources/chat/styles/Stockholm/Grey - Red.style

+@import url("css/base.css");
+@import url("css/incoming-grey.css");
+@import url("css/outgoing-red.css");

resources/chat/styles/Stockholm/Orange - Blue.style

+@import url("css/base.css");
+@import url("css/incoming-orange.css");
+@import url("css/outgoing-blue.css");

resources/chat/styles/Stockholm/Orange - Green.style

+@import url("css/base.css");
+@import url("css/incoming-orange.css");
+@import url("css/outgoing-green.css");

resources/chat/styles/Stockholm/Orange - Grey.style

+@import url("css/base.css");
+@import url("css/incoming-orange.css");
+@import url("css/outgoing-grey.css");

resources/chat/styles/Stockholm/Orange - Red.style

+@import url("css/base.css");
+@import url("css/incoming-orange.css");
+@import url("css/outgoing-red.css");

resources/chat/styles/Stockholm/Red - Blue.style

+@import url("css/base.css");
+@import url("css/incoming-red.css");
+@import url("css/outgoing-blue.css");

resources/chat/styles/Stockholm/Red - Green.style

+@import url("css/base.css");
+@import url("css/incoming-red.css");
+@import url("css/outgoing-green.css");

resources/chat/styles/Stockholm/Red - Grey.style

+@import url("css/base.css");
+@import url("css/incoming-red.css");
+@import url("css/outgoing-grey.css");

resources/chat/styles/Stockholm/Red - Orange.style

+@import url("css/base.css");
+@import url("css/incoming-red.css");
+@import url("css/outgoing-orange.css");

resources/chat/styles/Stockholm/css/base.css

+body
+{
+	margin: 0px;
+	padding: 0px;
+	color: #141414;
+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(212, 212, 212, 1)), to(rgba(234, 234, 234, 1))) fixed repeat-x;
+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.15)), to(rgba(255, 255, 255, 0.7))) fixed repeat-x;
+	background: white;
+	background: #fcfcfc;
+	background: #c8c8c8;
+	background: #c0c0c0;
+	background: #b8b8b8;
+	background: #b0b0b0;
+	background: #a8a8a8;
+	background: #a0a0a0;
+	background: #808080;
+	background: #606060;
+	background: #404040;
+	background: #b8b8b8;
+	background: transparent;
+	background: rgba(0, 0, 0, 0.1);
+	word-wrap: break-word;
+	word-break: break-word;
+}
+
+#chat
+{
+	overflow: hidden;
+	padding-bottom: 10px;
+	padding-left: 6px;
+	padding-right: 6px;
+}
+
+.x-container,
+.x-notification_container
+{
+	position: relative;
+	opacity: .96;
+}
+
+.x-container
+{
+	margin-top: 11px !important;
+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(241, 241, 241, 1)), to(rgba(241, 241, 241, 1))) 0px top no-repeat;
+	border-left: 1px solid rgba(248, 248, 248, 1);
+	border-right: 1px solid rgba(248, 248, 248, 1);
+	border-bottom: 1px solid rgba(248, 248, 248, 1);
+	-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, .45);
+}
+
+.x-container.history.x-container > .x-header,
+.x-container.history.x-container .x-message,
+.x-container.history.x-container,
+.x-container.history.x-notification_container
+{
+	opacity: .7;
+}
+
+.x-container.history .x-buddyicon,
+.x-container.history .x-mentionicon,
+.x-container.history .x-iconoverlay
+{
+	opacity: .7;
+}
+
+.x-container:not(.mention).hide-icons
+.x-container:not(.mention).hide-icons .x-message
+{
+	margin-right: 0px !important;
+}
+
+/* ICON */
+
+.x-container.hide-icons .x-buddyicon,
+.x-container.hide-icons:not(.mention) .x-iconoverlay,
+.x-container.hide-icons:not(.mention) .x-mentionicon
+{
+	display: none;
+}
+
+.x-container .x-buddyicon
+{
+	background-color: rgba(255, 255, 255, 1) !important;
+	height: 38px;
+	width: 38px;
+	position: absolute;
+	visibility: visible;
+}
+
+.x-container.mention .x-mentionicon
+{
+	height: 38px;
+	width: 38px;
+	position: absolute;
+	visibility: visible;
+}
+
+.x-mentionicon
+{
+	visibility: hidden;
+}
+
+.x-container.mention .x-buddyicon
+{
+	display: none;
+	background-color: transparent !important;
+	background-image: none !important;
+}
+
+.x-container.mention .x-mentionicon
+{
+	-webkit-mask-box-image: url("../images/pref-mention-mask.png");
+	-webkit-background-size: auto;
+}
+
+.x-container .x-iconoverlay
+{
+	height: 38px;
+	width: 38px;
+	position: absolute;
+	-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, .45);
+}
+
+.x-container.mention .x-iconoverlay
+{
+	z-index: -1 !important;
+}
+
+/* HEADER */
+
+.x-container .x-header
+{
+	color: #FFF;
+	font-weight: bold;
+	text-shadow: rgba(0, 0, 0, .3) 0 -1px 1px;
+	margin-bottom: 0px;
+	margin-right: -2px;
+	margin-left: -2px;
+	padding-bottom: 4px;
+	padding-left: 8px;
+	-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, .3);
+}
+
+.x-container.hide-icons:not(.mention) .x-header
+{
+	margin-left: -2px;
+}
+
+.x-container .x-sender
+{
+	padding-top: 3px;
+	padding-right: 11px;
+}
+
+.x-container .x-header .x-time
+{
+	float: right;
+	margin-right: 8px;
+	margin-left: 6px;
+	margin-top: 3px;
+}
+
+/* MESSAGE */
+
+.x-container .x-message
+{
+	padding-top: 2px;
+	padding-bottom: 1px;
+	margin-left: 6px;
+	margin-right: 8px;
+	padding-right: 1px;
+	margin-bottom: -1px;
+}
+
+.x-message.consecutive
+{
+	padding-bottom: 1px;
+	padding-top: 1px;
+	border-top: 1px solid #DDDDDD;
+	margin-top: 1px;
+}
+
+.x-message .x-text
+{
+	line-height: 1.3em;
+	/*overflow: auto;*/
+	padding-bottom: 1px;
+}
+
+.x-message .x-time
+{
+	visibility: hidden;
+	font-weight: bold;
+	//position: absolute;
+	margin-top: 0px;
+	padding-left: 4px;
+	padding-top: 0px;
+	padding-bottom: 1px;
+	-webkit-border-radius: 3px;
+	-webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, .5);
+	background-color: rgba(255, 255, 255, .8);
+	color: rgba(16, 16, 16, .8);
+	font-weight: bold;
+}
+
+.message:not(.focus) .x-message.ltr .x-time,
+.message .x-message.ltr:not(.focus) .x-time
+{
+	//right: 1px;
+	padding-right: 5px;
+	float: right;
+	margin-right: -8px;
+	margin-left: 4px;
+}
+
+.message.focus .x-message.ltr .x-time,
+.message .x-message.focus.ltr .x-time
+{
+	//right: 1px;
+	padding-right: 9px;
+	float: right;
+	margin-right: -8px;
+	margin-left: 4px;
+}
+
+.message .x-message.rtl .x-time
+{
+	//left: 2px;
+	padding-left: 4px;
+	padding-right: 4px;
+	float: left;
+	//margin-right: -8px;
+	margin-left: -4px;
+}
+
+.x-message:hover .x-time
+{
+	visibility: visible;
+}
+
+a
+{
+	color: #0033CC;
+	text-decoration: underline;
+}
+
+/* NOTIFICATION */
+
+.x-notification_container
+{
+	opacity: .96;
+	margin-top: 11px;
+	margin-bottom: -2px;
+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(241, 241, 241, 1)), to(rgba(241, 241, 241, 1))) no-repeat;
+	-webkit-border-radius: 3px;
+	-webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, .9), 0px -1px 0px rgba(0, 0, 0, .2), 0px 0px 2px rgba(0, 0, 0, .2);
+	padding-top: 1px;
+	padding-bottom: 1px;
+	padding-left: 7px;
+}
+
+.x-notification_container:not(.focus)
+{
+	padding-right: 7px;
+}
+
+.x-notification_container.focus
+{
+	padding-right: 12px;
+}
+
+.x-notification_container .x-text
+{
+	color: rgba(143, 143, 143, 1);
+}
+
+.x-notification_container .x-time
+{
+	float: right;
+	font-weight: bold;
+	color: rgba(160, 160, 160, 1);
+	margin-left: 10px;
+}
+
+/* FILE HANDLER */
+
+.x-filetext
+{
+	line-height: 1.3em;
+	font-size: 1em;
+	padding: 1px 10px 1px 8px;
+	margin-left: 1px;
+	margin-right: 1px;
+}
+
+.x-fileicon
+{
+	height: 32px;
+	width: 32px;
+	vertical-align: bottom;
+	padding: 3px 5px 3px 0;
+	float: left;
+}
+
+.x-fileincoming
+{
+	padding-top: 10px;
+}
+
+.x-filename a
+{
+	text-decoration: none;
+}
+
+.x-filemessage
+{
+	padding: 7px 0 5px 0;
+	clear: both;
+}
+
+.focus > .x-message > .x-text:before,
+.focus > .x-text:before
+{
+	-webkit-box-shadow: 0px 2px 1px rgba(255, 255, 255, 1), 0px -1px 0px rgba(0, 0, 0, 1);
+	content: "\feff";
+	color: white;
+	text-shadow: 1px 1px 0px rgba(0, 0, 0, .2);
+	padding-left: 2px;
+	padding-right: 2px;
+	-webkit-border-radius: 3px;
+	position: absolute;
+	margin-top: 3px;
+	right: 3px;
+	line-height: .8em;
+}
+
+.x-notification_container.focus > .x-text:before
+{
+	background: rgba(208, 208, 208, 1);
+	background: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 85%, 1)), to(hsla(0, 0%, 75%, 1)));
+	-webkit-box-shadow: 0px 2px 1px rgba(255, 255, 255, 1), 0px -1px 0px rgba(0, 0, 0, .5);
+	right: 4px;
+	margin-top: 3px;
+}
+
+.x-container.show-icons,
+.x-container.mention
+{
+	margin-left: 40px;
+}
+
+.x-container .x-buddyicon,
+.x-container .x-iconoverlay,
+.x-container.mention .x-mentionicon
+{
+	left: -40px;
+	-webkit-border-top-left-radius: 4px;
+	-webkit-border-bottom-left-radius: 4px;
+}
+
+/* MESSAGE */
+
+.x-container .x-header,
+.x-container
+{
+	-webkit-border-top-right-radius: 4px;
+}
+
+.x-container:not(.mention).hide-icons .x-header,
+.x-container:not(.mention).hide-icons
+{
+	-webkit-border-top-left-radius: 4px;
+}
+
+.x-container
+{
+	-webkit-border-bottom-right-radius: 2px;
+}
+
+.x-container:not(.mention).hide-icons
+{
+	-webkit-border-bottom-left-radius: 2px;
+}
+
+.x-container:not(.mention) .x-iconoverlay
+{
+	background: /* top corners, top dark border, left dark gradient, left light gradient, right dark gradient, right light gradient, top light edge, bottom light edge, bodyx2 */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 63%, 1)), to(hsla(0, 0%, 63%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, right top, from(hsla(0, 0%, 58%, 1)), to(hsla(0, 0%, 48%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 48%, 1)), to(hsla(0, 0%, 73%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 90%, .3)), to(hsla(0, 0%, 100%, .7))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 48%, 1)), color-stop(.3, hsla(0, 0%, 48%, 1)), to(hsla(0, 0%, 58%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 90%, .3)), to(hsla(0, 0%, 100%, .7))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 90%, .5)), to(hsla(0, 0%, 90%, .5))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, .5)), to(hsla(0, 0%, 100%, .5))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, right top, from(hsla(0, 0%, 0%, .1)), color-stop(.15, hsla(0, 0%, 100%, 0)), color-stop(.85, hsla(0, 0%, 100%, 0)), to(hsla(0, 0%, 0%, .1))),
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 0%, .1)), color-stop(.17, hsla(0, 0%, 100%, 0)), color-stop(.52, hsla(0, 0%, 100%, 0)), to(hsla(0, 0%, 0%, .1))) !important;
+	-webkit-background-size: 2px 2px, 100% 1px, 1px 100%, 2px 100%, 1px 100%, 2px 100%, 100% 2px, 100% 1px, 100% 100%, 100% 100% !important;
+}
+
+.x-container.mention .x-iconoverlay
+{
+	background: /* top corners, top dark border, left dark gradient, left light gradient, right dark gradient, right light gradient, top light edge, bottom light edge, bodyx2 */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 63%, 1)), to(hsla(0, 0%, 63%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, right top, from(hsla(0, 0%, 58%, 1)), to(hsla(0, 0%, 48%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 48%, 1)), to(hsla(0, 0%, 73%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 90%, .3)), to(hsla(0, 0%, 100%, .7))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 48%, 1)), color-stop(.3, hsla(0, 0%, 48%, 1)), to(hsla(0, 0%, 58%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 90%, .3)), to(hsla(0, 0%, 100%, 7))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 90%, .5)), to(hsla(0, 0%, 90%, .5))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, .5)), to(hsla(0, 0%, 100%, .5))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, right top, from(hsla(0, 0%, 0%, .1)), color-stop(.15, hsla(0, 0%, 100%, 0)), color-stop(.85, hsla(0, 0%, 100%, 0)), to(hsla(0, 0%, 0%, .1))),
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 90%, 1)), color-stop(.12, hsla(0, 0%, 100%, 1)), color-stop(.62, hsla(0, 0%, 100%, 1)), to(hsla(0, 0%, 91%, 1))) !important;
+	-webkit-background-size: 2px 2px, 100% 1px, 1px 100%, 2px 100%, 1px 100%, 2px 100%, 100% 2px, 100% 1px, 100% 100%, 100% 100% !important;
+}
+

resources/chat/styles/Stockholm/css/incoming-blue.css

+.x-container.mention:not(.history) .x-mentionicon
+{
+	background: -webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 59%, 1)), color-stop(.45, hsla(215, 73%, 48%, 1)), color-stop(.5, hsla(215, 73%, 45%, 1)), to(hsla(215, 73%, 48%, 1))) !important;
+}
+
+.x-container.mention.history .x-mentionicon
+{
+	background: -webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 78%, 1)), color-stop(.45, hsla(215, 20%, 65%, 1)), color-stop(.5, hsla(215, 20%, 60%, 1)), to(hsla(215, 20%, 75%, 1))) !important;
+}
+
+.focus.incoming .x-text:before
+{
+	background: -webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 59%, 1)), color-stop(.45, hsla(215, 73%, 48%, 1)), color-stop(.5, hsla(215, 73%, 45%, 1)), to(hsla(215, 73%, 48%, 1)));
+}
+
+.x-container.incoming:not(.history) .x-header
+{
+	background: /* cornersx4, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 45%, 1)), to(hsla(215, 73%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 45%, 1)), to(hsla(215, 73%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 45%, 1)), to(hsla(215, 73%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 68%, .5)), to(hsla(215, 73%, 68%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 68%, 1)), to(hsla(215, 73%, 68%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 50%, 1)), to(hsla(215, 73%, 50%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 68%, 1)), color-stop(.5, hsla(215, 73%, 59%, 1)), to(hsla(215, 73%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 68%, 1)), color-stop(.5, hsla(215, 73%, 59%, 1)), to(hsla(215, 73%, 45%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 59%, 1)), color-stop(.45, hsla(215, 73%, 48%, 1)), color-stop(.5, hsla(215, 73%, 45%, 1)), to(hsla(215, 73%, 48%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.incoming.hide-icons:not(.mention):not(.history) .x-header
+{
+	background: /* cornersx8, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 45%, 1)), to(hsla(215, 73%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 45%, 1)), to(hsla(215, 73%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 45%, 1)), to(hsla(215, 73%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 68%, .5)), to(hsla(215, 73%, 68%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 45%, 1)), to(hsla(215, 73%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 45%, 1)), to(hsla(215, 73%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 45%, 1)), to(hsla(215, 73%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 68%, .5)), to(hsla(215, 73%, 68%, .5))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 68%, 1)), to(hsla(215, 73%, 68%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 50%, 1)), to(hsla(215, 73%, 50%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 68%, 1)), color-stop(.5, hsla(215, 73%, 59%, 1)), to(hsla(215, 73%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 68%, 1)), color-stop(.5, hsla(215, 73%, 59%, 1)), to(hsla(215, 73%, 45%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 59%, 1)), color-stop(.45, hsla(215, 73%, 48%, 1)), color-stop(.5, hsla(215, 73%, 45%, 1)), to(hsla(215, 73%, 48%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%; 
+}
+
+.x-container.incoming.history .x-header
+{
+	background: /* cornersx4, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 93%, .5)), to(hsla(215, 20%, 93%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 93%, 1)), to(hsla(215, 20%, 93%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 78%, 1)), to(hsla(215, 20%, 78%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 93%, 1)), color-stop(.5, hsla(215, 20%, 82%, 1)), to(hsla(215, 20%, 70%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 93%, 1)), color-stop(.5, hsla(215, 20%, 82%, 1)), to(hsla(215, 20%, 70%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 78%, 1)), color-stop(.45, hsla(215, 20%, 65%, 1)), color-stop(.5, hsla(215, 20%, 60%, 1)), to(hsla(215, 20%, 75%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.incoming.history.hide-icons:not(.mention) .x-header
+{
+	background: /* cornersx8, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 93%, .5)), to(hsla(215, 20%, 93%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 93%, .5)), to(hsla(215, 20%, 93%, .5))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 93%, 1)), to(hsla(215, 20%, 93%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 78%, 1)), to(hsla(215, 20%, 78%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 93%, 1)), color-stop(.5, hsla(215, 20%, 82%, 1)), to(hsla(215, 20%, 70%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 93%, 1)), color-stop(.5, hsla(215, 20%, 82%, 1)), to(hsla(215, 20%, 70%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 78%, 1)), color-stop(.45, hsla(215, 20%, 65%, 1)), color-stop(.5, hsla(215, 20%, 60%, 1)), to(hsla(215, 20%, 75%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+

resources/chat/styles/Stockholm/css/incoming-green.css

+.x-container.mention:not(.history) .x-mentionicon
+{
+	background: -webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 54%, 1)), color-stop(.45, hsla(95, 66%, 43%, 1)), color-stop(.5, hsla(95, 66%, 40%, 1)), to(hsla(95, 66%, 43%, 1)));
+}
+
+.x-container.mention.history .x-mentionicon
+{
+	background: -webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 78%, 1)), color-stop(.45, hsla(95, 15%, 65%, 1)), color-stop(.5, hsla(95, 15%, 60%, 1)), to(hsla(95, 15%, 75%, 1)));
+}
+
+.focus.incoming .x-text:before
+{
+	background: -webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 54%, 1)), color-stop(.45, hsla(95, 66%, 43%, 1)), color-stop(.5, hsla(95, 66%, 40%, 1)), to(hsla(95, 66%, 43%, 1))) left top no-repeat;
+}
+
+.x-container.incoming:not(.history) .x-header
+{
+	background: /* cornersx4, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 40%, 1)), to(hsla(95, 66%, 40%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 40%, 1)), to(hsla(95, 66%, 40%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 40%, 1)), to(hsla(95, 66%, 40%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 68%, .5)), to(hsla(95, 66%, 68%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 33%, 1)), to(hsla(95, 66%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 33%, 1)), to(hsla(95, 66%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 33%, 1)), to(hsla(95, 66%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 33%, 1)), to(hsla(95, 66%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 68%, 1)), to(hsla(95, 66%, 68%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 45%, 1)), to(hsla(95, 66%, 45%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 68%, 1)), color-stop(.5, hsla(95, 66%, 54%, 1)), to(hsla(95, 66%, 40%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 68%, 1)), color-stop(.5, hsla(95, 66%, 54%, 1)), to(hsla(95, 66%, 40%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 54%, 1)), color-stop(.45, hsla(95, 66%, 43%, 1)), color-stop(.5, hsla(95, 66%, 40%, 1)), to(hsla(95, 66%, 43%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.incoming.hide-icons:not(.mention):not(.history) .x-header
+{
+	background: /* cornersx8, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 40%, 1)), to(hsla(95, 66%, 40%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 40%, 1)), to(hsla(95, 66%, 40%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 40%, 1)), to(hsla(95, 66%, 40%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 68%, .5)), to(hsla(95, 66%, 68%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 40%, 1)), to(hsla(95, 66%, 40%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 40%, 1)), to(hsla(95, 66%, 40%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 40%, 1)), to(hsla(95, 66%, 40%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 68%, .5)), to(hsla(95, 66%, 68%, .5))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 33%, 1)), to(hsla(95, 66%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 33%, 1)), to(hsla(95, 66%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 33%, 1)), to(hsla(95, 66%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 33%, 1)), to(hsla(95, 66%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 68%, 1)), to(hsla(95, 66%, 68%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 45%, 1)), to(hsla(95, 66%, 45%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 68%, 1)), color-stop(.5, hsla(95, 66%, 54%, 1)), to(hsla(95, 66%, 40%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 68%, 1)), color-stop(.5, hsla(95, 66%, 54%, 1)), to(hsla(95, 66%, 40%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 54%, 1)), color-stop(.45, hsla(95, 66%, 43%, 1)), color-stop(.5, hsla(95, 66%, 40%, 1)), to(hsla(95, 66%, 43%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.incoming.history .x-header
+{
+	background: /* cornersx4, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 93%, .5)), to(hsla(95, 15%, 93%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 93%, 1)), to(hsla(95, 15%, 93%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 78%, 1)), to(hsla(95, 15%, 78%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 93%, 1)), color-stop(.5, hsla(95, 15%, 82%, 1)), to(hsla(95, 15%, 70%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 93%, 1)), color-stop(.5, hsla(95, 15%, 82%, 1)), to(hsla(95, 15%, 70%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 78%, 1)), color-stop(.45, hsla(95, 15%, 65%, 1)), color-stop(.5, hsla(95, 15%, 60%, 1)), to(hsla(95, 15%, 75%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.incoming.history.hide-icons:not(.mention) .x-header
+{
+	background: /* cornersx8, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 93%, .5)), to(hsla(95, 15%, 93%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 93%, .5)), to(hsla(95, 15%, 93%, .5))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 93%, 1)), to(hsla(95, 15%, 93%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 78%, 1)), to(hsla(95, 15%, 78%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 93%, 1)), color-stop(.5, hsla(95, 15%, 82%, 1)), to(hsla(95, 15%, 70%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 93%, 1)), color-stop(.5, hsla(95, 15%, 82%, 1)), to(hsla(95, 15%, 70%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 78%, 1)), color-stop(.45, hsla(95, 15%, 65%, 1)), color-stop(.5, hsla(95, 15%, 60%, 1)), to(hsla(95, 15%, 75%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+

resources/chat/styles/Stockholm/css/incoming-grey.css

+.x-container.mention:not(.history) .x-mentionicon
+{
+	background: -webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 59%, 1)), color-stop(.45, hsla(222, 0%, 50%, 1)), color-stop(.5, hsla(222, 0%, 45%, 1)), to(hsla(222, 0%, 50%, 1)));
+}
+
+.x-container.mention.history .x-mentionicon
+{
+	background: -webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 78%, 1)), color-stop(.45, hsla(222, 0%, 65%, 1)), color-stop(.5, hsla(222, 0%, 60%, 1)), to(hsla(222, 0%, 75%, 1)));
+}
+
+.focus.incoming .x-text:before
+{
+	background: -webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 59%, 1)), color-stop(.45, hsla(222, 0%, 50%, 1)), color-stop(.5, hsla(222, 0%, 45%, 1)), to(hsla(222, 0%, 50%, 1))) left top no-repeat;
+}
+
+.x-container.incoming:not(.history) .x-header
+{
+	background: /* cornersx4, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 45%, 1)), to(hsla(222, 0%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 45%, 1)), to(hsla(222, 0%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 45%, 1)), to(hsla(222, 0%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 68%, .5)), to(hsla(222, 0%, 68%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 33%, 1)), to(hsla(222, 0%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 33%, 1)), to(hsla(222, 0%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 33%, 1)), to(hsla(222, 0%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 33%, 1)), to(hsla(222, 0%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 68%, .5)), to(hsla(222, 0%, 68%, .5))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 50%, 1)), to(hsla(222, 0%, 50%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 68%, 1)), color-stop(.5, hsla(222, 0%, 59%, 1)), to(hsla(222, 0%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 68%, 1)), color-stop(.5, hsla(222, 0%, 59%, 1)), to(hsla(222, 0%, 45%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 59%, 1)), color-stop(.45, hsla(222, 0%, 50%, 1)), color-stop(.5, hsla(222, 0%, 45%, 1)), to(hsla(222, 0%, 50%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.incoming.hide-icons:not(.mention):not(.history) .x-header
+{
+	background: /* cornersx8, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 45%, 1)), to(hsla(222, 0%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 45%, 1)), to(hsla(222, 0%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 45%, 1)), to(hsla(222, 0%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 68%, .5)), to(hsla(222, 0%, 68%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 45%, 1)), to(hsla(222, 0%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 45%, 1)), to(hsla(222, 0%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 45%, 1)), to(hsla(222, 0%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 68%, .5)), to(hsla(222, 0%, 68%, .5))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 33%, 1)), to(hsla(222, 0%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 33%, 1)), to(hsla(222, 0%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 33%, 1)), to(hsla(222, 0%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 33%, 1)), to(hsla(222, 0%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 68%, 1)), to(hsla(222, 0%, 68%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 50%, 1)), to(hsla(222, 0%, 50%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 68%, 1)), color-stop(.5, hsla(222, 0%, 59%, 1)), to(hsla(222, 0%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 68%, 1)), color-stop(.5, hsla(222, 0%, 59%, 1)), to(hsla(222, 0%, 45%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 59%, 1)), color-stop(.45, hsla(222, 0%, 50%, 1)), color-stop(.5, hsla(222, 0%, 45%, 1)), to(hsla(222, 0%, 50%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.incoming.history .x-header
+{
+	background: /* cornersx4, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 93%, .5)), to(hsla(222, 0%, 93%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 93%, 1)), to(hsla(222, 0%, 93%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 78%, 1)), to(hsla(222, 0%, 78%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 93%, 1)), color-stop(.5, hsla(222, 0%, 82%, 1)), to(hsla(222, 0%, 70%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 93%, 1)), color-stop(.5, hsla(222, 0%, 82%, 1)), to(hsla(222, 0%, 70%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 78%, 1)), color-stop(.45, hsla(222, 0%, 65%, 1)), color-stop(.5, hsla(222, 0%, 60%, 1)), to(hsla(222, 0%, 75%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.incoming.history .hide-icons:not(.mention).x-header
+{
+	background: /* cornersx8, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 93%, .5)), to(hsla(222, 0%, 93%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 93%, .5)), to(hsla(222, 0%, 93%, .5))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 93%, 1)), to(hsla(222, 0%, 93%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 78%, 1)), to(hsla(222, 0%, 78%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 93%, 1)), color-stop(.5, hsla(222, 0%, 82%, 1)), to(hsla(222, 0%, 70%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 93%, 1)), color-stop(.5, hsla(222, 0%, 82%, 1)), to(hsla(222, 0%, 70%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 78%, 1)), color-stop(.45, hsla(222, 0%, 65%, 1)), color-stop(.5, hsla(222, 0%, 60%, 1)), to(hsla(222, 0%, 75%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+

resources/chat/styles/Stockholm/css/incoming-orange.css

+.x-container.mention:not(.history) .x-mentionicon
+{
+	background: -webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 59%, 1)), color-stop(.45, hsla(30, 71%, 48%, 1)), color-stop(.5, hsla(30, 71%, 45%, 1)), to(hsla(30, 71%, 48%, 1)));
+}
+
+.x-container.mention.history .x-mentionicon
+{
+	background: -webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 78%, 1)), color-stop(.45, hsla(30, 15%, 65%, 1)), color-stop(.5, hsla(30, 15%, 60%, 1)), to(hsla(30, 15%, 75%, 1)));
+}
+
+.focus.incoming .x-text:before
+{
+	background: -webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 59%, 1)), color-stop(.45, hsla(30, 71%, 48%, 1)), color-stop(.5, hsla(30, 71%, 45%, 1)), to(hsla(30, 71%, 48%, 1))) left top no-repeat;
+}
+
+.x-container.incoming:not(.history) .x-header
+{
+	background: /* cornersx4, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 45%, 1)), to(hsla(30, 71%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 45%, 1)), to(hsla(30, 71%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 45%, 1)), to(hsla(30, 71%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 68%, .5)), to(hsla(30, 71%, 68%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 33%, 1)), to(hsla(30, 71%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 33%, 1)), to(hsla(30, 71%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 33%, 1)), to(hsla(30, 71%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 33%, 1)), to(hsla(30, 71%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 68%, 1)), to(hsla(30, 71%, 68%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 50%, 1)), to(hsla(30, 71%, 50%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 68%, 1)), color-stop(.5, hsla(30, 71%, 59%, 1)), to(hsla(30, 71%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 68%, 1)), color-stop(.5, hsla(30, 71%, 59%, 1)), to(hsla(30, 71%, 45%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 59%, 1)), color-stop(.45, hsla(30, 71%, 48%, 1)), color-stop(.5, hsla(30, 71%, 45%, 1)), to(hsla(30, 71%, 48%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.incoming.hide-icons:not(.mention):not(.history) .x-header
+{
+	background: /* cornersx8, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 45%, 1)), to(hsla(30, 71%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 45%, 1)), to(hsla(30, 71%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 45%, 1)), to(hsla(30, 71%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 68%, .5)), to(hsla(30, 71%, 68%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 45%, 1)), to(hsla(30, 71%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 45%, 1)), to(hsla(30, 71%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 45%, 1)), to(hsla(30, 71%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 68%, .5)), to(hsla(30, 71%, 68%, .5))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 33%, 1)), to(hsla(30, 71%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 33%, 1)), to(hsla(30, 71%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 33%, 1)), to(hsla(30, 71%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 33%, 1)), to(hsla(30, 71%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 68%, 1)), to(hsla(30, 71%, 68%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 50%, 1)), to(hsla(30, 71%, 50%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 68%, 1)), color-stop(.5, hsla(30, 71%, 59%, 1)), to(hsla(30, 71%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 68%, 1)), color-stop(.5, hsla(30, 71%, 59%, 1)), to(hsla(30, 71%, 45%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 59%, 1)), color-stop(.45, hsla(30, 71%, 48%, 1)), color-stop(.5, hsla(30, 71%, 45%, 1)), to(hsla(30, 71%, 48%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.incoming.history .x-header
+{
+	background: /* cornersx4, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 93%, .5)), to(hsla(30, 15%, 93%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 93%, 1)), to(hsla(30, 15%, 93%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 78%, 1)), to(hsla(30, 15%, 78%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 93%, 1)), color-stop(.5, hsla(30, 15%, 82%, 1)), to(hsla(30, 15%, 70%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 93%, 1)), color-stop(.5, hsla(30, 15%, 82%, 1)), to(hsla(30, 15%, 70%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 78%, 1)), color-stop(.45, hsla(30, 15%, 65%, 1)), color-stop(.5, hsla(30, 15%, 60%, 1)), to(hsla(30, 15%, 75%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.incoming.history.hide-icons:not(.mention) .x-header
+{
+	background: /* cornersx8, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 93%, .5)), to(hsla(30, 15%, 93%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 93%, .5)), to(hsla(30, 15%, 93%, .5))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 93%, 1)), to(hsla(30, 15%, 93%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 78%, 1)), to(hsla(30, 15%, 78%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 93%, 1)), color-stop(.5, hsla(30, 15%, 82%, 1)), to(hsla(30, 15%, 70%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 93%, 1)), color-stop(.5, hsla(30, 15%, 82%, 1)), to(hsla(30, 15%, 70%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 78%, 1)), color-stop(.45, hsla(30, 15%, 65%, 1)), color-stop(.5, hsla(30, 15%, 60%, 1)), to(hsla(30, 15%, 75%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+

resources/chat/styles/Stockholm/css/incoming-red.css

+.x-container.mention:not(.history) .x-mentionicon
+{
+	background: -webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 59%, 1)), color-stop(.45, hsla(6, 78%, 48%, 1)), color-stop(.5, hsla(6, 78%, 45%, 1)), to(hsla(6, 78%, 48%, 1)));
+}
+
+.x-container.mention.history .x-mentionicon
+{
+	background: -webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 78%, 1)), color-stop(.45, hsla(6, 15%, 65%, 1)), color-stop(.5, hsla(6, 15%, 60%, 1)), to(hsla(6, 15%, 75%, 1)));
+}
+
+.focus.incoming .x-text:before
+{
+	background: -webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 59%, 1)), color-stop(.45, hsla(6, 78%, 48%, 1)), color-stop(.5, hsla(6, 78%, 45%, 1)), to(hsla(6, 78%, 48%, 1))) left top no-repeat;
+}
+
+.x-container.incoming:not(.history) .x-header
+{
+	background: /* cornersx4, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 45%, 1)), to(hsla(6, 78%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 45%, 1)), to(hsla(6, 78%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 45%, 1)), to(hsla(6, 78%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 68%, .5)), to(hsla(6, 78%, 68%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 33%, 1)), to(hsla(6, 78%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 33%, 1)), to(hsla(6, 78%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 33%, 1)), to(hsla(6, 78%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 33%, 1)), to(hsla(6, 78%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 68%, 1)), to(hsla(6, 78%, 68%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 50%, 1)), to(hsla(6, 78%, 50%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 68%, 1)), color-stop(.5, hsla(6, 78%, 59%, 1)), to(hsla(6, 78%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 68%, 1)), color-stop(.5, hsla(6, 78%, 59%, 1)), to(hsla(6, 78%, 45%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 59%, 1)), color-stop(.45, hsla(6, 78%, 48%, 1)), color-stop(.5, hsla(6, 78%, 45%, 1)), to(hsla(6, 78%, 48%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.incoming.hide-icons:not(.mention):not(.history) .x-header
+{
+	background: /* cornersx8, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 45%, 1)), to(hsla(6, 78%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 45%, 1)), to(hsla(6, 78%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 45%, 1)), to(hsla(6, 78%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 68%, .5)), to(hsla(6, 78%, 68%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 45%, 1)), to(hsla(6, 78%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 45%, 1)), to(hsla(6, 78%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 45%, 1)), to(hsla(6, 78%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 68%, .5)), to(hsla(6, 78%, 68%, .5))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 33%, 1)), to(hsla(6, 78%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 33%, 1)), to(hsla(6, 78%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 33%, 1)), to(hsla(6, 78%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 33%, 1)), to(hsla(6, 78%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 68%, 1)), to(hsla(6, 78%, 68%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 50%, 1)), to(hsla(6, 78%, 50%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 68%, 1)), color-stop(.5, hsla(6, 78%, 59%, 1)), to(hsla(6, 78%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 68%, 1)), color-stop(.5, hsla(6, 78%, 59%, 1)), to(hsla(6, 78%, 45%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 59%, 1)), color-stop(.45, hsla(6, 78%, 48%, 1)), color-stop(.5, hsla(6, 78%, 45%, 1)), to(hsla(6, 78%, 48%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.incoming.history .x-header
+{
+	background: /* cornersx4, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 93%, .5)), to(hsla(6, 15%, 93%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 93%, 1)), to(hsla(6, 15%, 93%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 78%, 1)), to(hsla(6, 15%, 78%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 93%, 1)), color-stop(.5, hsla(6, 15%, 82%, 1)), to(hsla(6, 15%, 70%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 93%, 1)), color-stop(.5, hsla(6, 15%, 82%, 1)), to(hsla(6, 15%, 70%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 78%, 1)), color-stop(.45, hsla(6, 15%, 65%, 1)), color-stop(.5, hsla(6, 15%, 60%, 1)), to(hsla(6, 15%, 75%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.incoming.history.hide-icons:not(.mention) .x-header
+{
+	background: /* cornersx8, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 93%, .5)), to(hsla(6, 15%, 93%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 93%, .5)), to(hsla(6, 15%, 93%, .5))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 93%, 1)), to(hsla(6, 15%, 93%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 78%, 1)), to(hsla(6, 15%, 78%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 93%, 1)), color-stop(.5, hsla(6, 15%, 82%, 1)), to(hsla(6, 15%, 70%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 93%, 1)), color-stop(.5, hsla(6, 15%, 82%, 1)), to(hsla(6, 15%, 70%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 78%, 1)), color-stop(.45, hsla(6, 15%, 65%, 1)), color-stop(.5, hsla(6, 15%, 60%, 1)), to(hsla(6, 15%, 75%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+

resources/chat/styles/Stockholm/css/outgoing-blue.css

+.x-container.outgoing:not(.history) .x-header
+{
+	background: /* cornersx4, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 45%, 1)), to(hsla(215, 73%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 45%, 1)), to(hsla(215, 73%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 45%, 1)), to(hsla(215, 73%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 68%, .5)), to(hsla(215, 73%, 68%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 68%, 1)), to(hsla(215, 73%, 68%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 50%, 1)), to(hsla(215, 73%, 50%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 68%, 1)), color-stop(.5, hsla(215, 73%, 59%, 1)), to(hsla(215, 73%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 68%, 1)), color-stop(.5, hsla(215, 73%, 59%, 1)), to(hsla(215, 73%, 45%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 59%, 1)), color-stop(.45, hsla(215, 73%, 48%, 1)), color-stop(.5, hsla(215, 73%, 45%, 1)), to(hsla(215, 73%, 48%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.outgoing.hide-icons:not(.mention):not(.history) .x-header
+{
+	background: /* cornersx8, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 45%, 1)), to(hsla(215, 73%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 45%, 1)), to(hsla(215, 73%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 45%, 1)), to(hsla(215, 73%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 68%, .5)), to(hsla(215, 73%, 68%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 45%, 1)), to(hsla(215, 73%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 45%, 1)), to(hsla(215, 73%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 45%, 1)), to(hsla(215, 73%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 68%, .5)), to(hsla(215, 73%, 68%, .5))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 68%, 1)), to(hsla(215, 73%, 68%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 50%, 1)), to(hsla(215, 73%, 50%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 68%, 1)), color-stop(.5, hsla(215, 73%, 59%, 1)), to(hsla(215, 73%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 68%, 1)), color-stop(.5, hsla(215, 73%, 59%, 1)), to(hsla(215, 73%, 45%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 59%, 1)), color-stop(.45, hsla(215, 73%, 48%, 1)), color-stop(.5, hsla(215, 73%, 45%, 1)), to(hsla(215, 73%, 48%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.outgoing.history .x-header
+{
+	background: /* cornersx4, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 93%, .5)), to(hsla(215, 20%, 93%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 93%, 1)), to(hsla(215, 20%, 93%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 78%, 1)), to(hsla(215, 20%, 78%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 93%, 1)), color-stop(.5, hsla(215, 20%, 82%, 1)), to(hsla(215, 20%, 70%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 93%, 1)), color-stop(.5, hsla(215, 20%, 82%, 1)), to(hsla(215, 20%, 70%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 78%, 1)), color-stop(.45, hsla(215, 20%, 65%, 1)), color-stop(.5, hsla(215, 20%, 60%, 1)), to(hsla(215, 20%, 75%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.outgoing.history.hide-icons:not(.mention) .x-header
+{
+	background: /* cornersx8, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 93%, .5)), to(hsla(215, 20%, 93%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 93%, .5)), to(hsla(215, 20%, 93%, .5))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 53%, 1)), to(hsla(215, 20%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 93%, 1)), to(hsla(215, 20%, 93%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 78%, 1)), to(hsla(215, 20%, 78%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 93%, 1)), color-stop(.5, hsla(215, 20%, 82%, 1)), to(hsla(215, 20%, 70%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 93%, 1)), color-stop(.5, hsla(215, 20%, 82%, 1)), to(hsla(215, 20%, 70%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 20%, 78%, 1)), color-stop(.45, hsla(215, 20%, 65%, 1)), color-stop(.5, hsla(215, 20%, 60%, 1)), to(hsla(215, 20%, 75%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+

resources/chat/styles/Stockholm/css/outgoing-green.css

+.x-container.outgoing:not(.history) .x-header
+{
+	background: /* cornersx4, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 40%, 1)), to(hsla(95, 66%, 40%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 40%, 1)), to(hsla(95, 66%, 40%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 40%, 1)), to(hsla(95, 66%, 40%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 68%, .5)), to(hsla(95, 66%, 68%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 33%, 1)), to(hsla(95, 66%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 33%, 1)), to(hsla(95, 66%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 33%, 1)), to(hsla(95, 66%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 33%, 1)), to(hsla(95, 66%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 68%, 1)), to(hsla(95, 66%, 68%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 45%, 1)), to(hsla(95, 66%, 45%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 68%, 1)), color-stop(.5, hsla(95, 66%, 59%, 1)), to(hsla(95, 66%, 40%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 68%, 1)), color-stop(.5, hsla(95, 66%, 59%, 1)), to(hsla(95, 66%, 40%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 59%, 1)), color-stop(.45, hsla(95, 66%, 43%, 1)), color-stop(.5, hsla(95, 66%, 40%, 1)), to(hsla(95, 66%, 43%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.outgoing.hide-icons:not(.mention):not(.history) .x-header
+{
+	background: /* cornersx8, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 40%, 1)), to(hsla(95, 66%, 40%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 40%, 1)), to(hsla(95, 66%, 40%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 40%, 1)), to(hsla(95, 66%, 40%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 68%, .5)), to(hsla(95, 66%, 68%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 40%, 1)), to(hsla(95, 66%, 40%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 40%, 1)), to(hsla(95, 66%, 40%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 40%, 1)), to(hsla(95, 66%, 40%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 68%, .5)), to(hsla(95, 66%, 68%, .5))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 33%, 1)), to(hsla(95, 66%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 33%, 1)), to(hsla(95, 66%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 33%, 1)), to(hsla(95, 66%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 33%, 1)), to(hsla(95, 66%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 68%, 1)), to(hsla(95, 66%, 68%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 45%, 1)), to(hsla(95, 66%, 45%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 68%, 1)), color-stop(.5, hsla(95, 66%, 59%, 1)), to(hsla(95, 66%, 40%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 68%, 1)), color-stop(.5, hsla(95, 66%, 59%, 1)), to(hsla(95, 66%, 40%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 59%, 1)), color-stop(.45, hsla(95, 66%, 43%, 1)), color-stop(.5, hsla(95, 66%, 40%, 1)), to(hsla(95, 66%, 43%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.outgoing.history .x-header
+{
+	background: /* cornersx4, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 93%, .5)), to(hsla(95, 15%, 93%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 93%, 1)), to(hsla(95, 15%, 93%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 78%, 1)), to(hsla(95, 15%, 78%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 93%, 1)), color-stop(.5, hsla(95, 15%, 82%, 1)), to(hsla(95, 15%, 70%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 93%, 1)), color-stop(.5, hsla(95, 15%, 82%, 1)), to(hsla(95, 15%, 70%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 78%, 1)), color-stop(.45, hsla(95, 15%, 65%, 1)), color-stop(.5, hsla(95, 15%, 60%, 1)), to(hsla(95, 15%, 75%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.outgoing.history.hide-icons:not(.mention) .x-header
+{
+	background: /* cornersx8, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 93%, .5)), to(hsla(95, 15%, 93%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 93%, .5)), to(hsla(95, 15%, 93%, .5))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 53%, 1)), to(hsla(95, 15%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 93%, 1)), to(hsla(95, 15%, 93%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 78%, 1)), to(hsla(95, 15%, 78%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 93%, 1)), color-stop(.5, hsla(95, 15%, 82%, 1)), to(hsla(95, 15%, 70%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 93%, 1)), color-stop(.5, hsla(95, 15%, 82%, 1)), to(hsla(95, 15%, 70%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 15%, 78%, 1)), color-stop(.45, hsla(95, 15%, 65%, 1)), color-stop(.5, hsla(95, 15%, 60%, 1)), to(hsla(95, 15%, 75%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+

resources/chat/styles/Stockholm/css/outgoing-grey.css

+.x-container.outgoing:not(.history) .x-header
+{
+	background: /* cornersx4, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 45%, 1)), to(hsla(222, 0%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 45%, 1)), to(hsla(222, 0%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 45%, 1)), to(hsla(222, 0%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 68%, .5)), to(hsla(222, 0%, 68%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 33%, 1)), to(hsla(222, 0%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 33%, 1)), to(hsla(222, 0%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 33%, 1)), to(hsla(222, 0%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 33%, 1)), to(hsla(222, 0%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 68%, 1)), to(hsla(222, 0%, 68%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 50%, 1)), to(hsla(222, 0%, 50%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 68%, 1)), color-stop(.5, hsla(222, 0%, 59%, 1)), to(hsla(222, 0%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 68%, 1)), color-stop(.5, hsla(222, 0%, 59%, 1)), to(hsla(222, 0%, 45%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 59%, 1)), color-stop(.45, hsla(222, 0%, 50%, 1)), color-stop(.5, hsla(222, 0%, 45%, 1)), to(hsla(222, 0%, 50%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.outgoing.hide-icons:not(.mention):not(.history) .x-header
+{
+	background: /* cornersx8, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 45%, 1)), to(hsla(222, 0%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 45%, 1)), to(hsla(222, 0%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 45%, 1)), to(hsla(222, 0%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 68%, .5)), to(hsla(222, 0%, 68%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 45%, 1)), to(hsla(222, 0%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 45%, 1)), to(hsla(222, 0%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 45%, 1)), to(hsla(222, 0%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 68%, .5)), to(hsla(222, 0%, 68%, .5))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 33%, 1)), to(hsla(222, 0%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 33%, 1)), to(hsla(222, 0%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 33%, 1)), to(hsla(222, 0%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 33%, 1)), to(hsla(222, 0%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 68%, 1)), to(hsla(222, 0%, 68%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 50%, 1)), to(hsla(222, 0%, 50%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 68%, 1)), color-stop(.5, hsla(222, 0%, 59%, 1)), to(hsla(222, 0%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 68%, 1)), color-stop(.5, hsla(222, 0%, 59%, 1)), to(hsla(222, 0%, 45%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 59%, 1)), color-stop(.45, hsla(222, 0%, 50%, 1)), color-stop(.5, hsla(222, 0%, 45%, 1)), to(hsla(222, 0%, 50%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.outgoing.history .x-header
+{
+	background: /* cornersx4, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 93%, .5)), to(hsla(222, 0%, 93%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 93%, 1)), to(hsla(222, 0%, 93%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 78%, 1)), to(hsla(222, 0%, 78%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 93%, 1)), color-stop(.5, hsla(222, 0%, 82%, 1)), to(hsla(222, 0%, 70%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 93%, 1)), color-stop(.5, hsla(222, 0%, 82%, 1)), to(hsla(222, 0%, 70%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 78%, 1)), color-stop(.45, hsla(222, 0%, 65%, 1)), color-stop(.5, hsla(222, 0%, 60%, 1)), to(hsla(222, 0%, 75%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.outgoing.history.hide-icons:not(.mention) .x-header
+{
+	background: /* cornersx8, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 93%, .5)), to(hsla(222, 0%, 93%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 93%, .5)), to(hsla(222, 0%, 93%, .5))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 53%, 1)), to(hsla(222, 0%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 93%, 1)), to(hsla(222, 0%, 93%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 78%, 1)), to(hsla(222, 0%, 78%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 93%, 1)), color-stop(.5, hsla(222, 0%, 82%, 1)), to(hsla(222, 0%, 70%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 93%, 1)), color-stop(.5, hsla(222, 0%, 82%, 1)), to(hsla(222, 0%, 70%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(222, 0%, 78%, 1)), color-stop(.45, hsla(222, 0%, 65%, 1)), color-stop(.5, hsla(222, 0%, 60%, 1)), to(hsla(222, 0%, 75%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+

resources/chat/styles/Stockholm/css/outgoing-orange.css

+.x-container.outgoing:not(.history) .x-header
+{
+	background: /* cornersx4, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 45%, 1)), to(hsla(30, 71%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 45%, 1)), to(hsla(30, 71%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 45%, 1)), to(hsla(30, 71%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 68%, .5)), to(hsla(30, 71%, 68%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 33%, 1)), to(hsla(30, 71%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 33%, 1)), to(hsla(30, 71%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 33%, 1)), to(hsla(30, 71%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 33%, 1)), to(hsla(30, 71%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 68%, 1)), to(hsla(30, 71%, 68%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 50%, 1)), to(hsla(30, 71%, 50%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 68%, 1)), color-stop(.5, hsla(30, 71%, 59%, 1)), to(hsla(30, 71%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 68%, 1)), color-stop(.5, hsla(30, 71%, 59%, 1)), to(hsla(30, 71%, 45%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 59%, 1)), color-stop(.45, hsla(30, 71%, 48%, 1)), color-stop(.5, hsla(30, 71%, 45%, 1)), to(hsla(30, 71%, 48%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.outgoing.hide-icons:not(.mention):not(.history) .x-header
+{
+	background: /* cornersx8, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 45%, 1)), to(hsla(30, 71%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 45%, 1)), to(hsla(30, 71%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 45%, 1)), to(hsla(30, 71%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 68%, .5)), to(hsla(30, 71%, 68%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 45%, 1)), to(hsla(30, 71%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 45%, 1)), to(hsla(30, 71%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 45%, 1)), to(hsla(30, 71%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 68%, .5)), to(hsla(30, 71%, 68%, .5))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 33%, 1)), to(hsla(30, 71%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 33%, 1)), to(hsla(30, 71%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 33%, 1)), to(hsla(30, 71%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 33%, 1)), to(hsla(30, 71%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 68%, 1)), to(hsla(30, 71%, 68%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 50%, 1)), to(hsla(30, 71%, 50%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 68%, 1)), color-stop(.5, hsla(30, 71%, 59%, 1)), to(hsla(30, 71%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 68%, 1)), color-stop(.5, hsla(30, 71%, 59%, 1)), to(hsla(30, 71%, 45%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 71%, 59%, 1)), color-stop(.45, hsla(30, 71%, 48%, 1)), color-stop(.5, hsla(30, 71%, 45%, 1)), to(hsla(30, 71%, 48%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.outgoing.history .x-header
+{
+	background: /* cornersx4, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 93%, .5)), to(hsla(30, 15%, 93%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 93%, 1)), to(hsla(30, 15%, 93%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 78%, 1)), to(hsla(30, 15%, 78%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 93%, 1)), color-stop(.5, hsla(30, 15%, 82%, 1)), to(hsla(30, 15%, 70%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 93%, 1)), color-stop(.5, hsla(30, 15%, 82%, 1)), to(hsla(30, 15%, 70%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 78%, 1)), color-stop(.45, hsla(30, 15%, 65%, 1)), color-stop(.5, hsla(30, 15%, 60%, 1)), to(hsla(30, 15%, 75%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.outgoing.history.hide-icons:not(.mention) .x-header
+{
+	background: /* cornersx8, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 93%, .5)), to(hsla(30, 15%, 93%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 93%, .5)), to(hsla(30, 15%, 93%, .5))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 53%, 1)), to(hsla(30, 15%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 93%, 1)), to(hsla(30, 15%, 93%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 78%, 1)), to(hsla(30, 15%, 78%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 93%, 1)), color-stop(.5, hsla(30, 15%, 82%, 1)), to(hsla(30, 15%, 70%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 93%, 1)), color-stop(.5, hsla(30, 15%, 82%, 1)), to(hsla(30, 15%, 70%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(30, 15%, 78%, 1)), color-stop(.45, hsla(30, 15%, 65%, 1)), color-stop(.5, hsla(30, 15%, 60%, 1)), to(hsla(30, 15%, 75%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+

resources/chat/styles/Stockholm/css/outgoing-red.css

+.x-container.outgoing:not(.history) .x-header
+{
+	background: /* cornersx4, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 45%, 1)), to(hsla(6, 78%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 45%, 1)), to(hsla(6, 78%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 45%, 1)), to(hsla(6, 78%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 68%, .5)), to(hsla(6, 78%, 68%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 33%, 1)), to(hsla(6, 78%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 33%, 1)), to(hsla(6, 78%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 33%, 1)), to(hsla(6, 78%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 33%, 1)), to(hsla(6, 78%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 68%, 1)), to(hsla(6, 78%, 68%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 50%, 1)), to(hsla(6, 78%, 50%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 68%, 1)), color-stop(.5, hsla(6, 78%, 59%, 1)), to(hsla(6, 78%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 68%, 1)), color-stop(.5, hsla(6, 78%, 59%, 1)), to(hsla(6, 78%, 45%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 59%, 1)), color-stop(.45, hsla(6, 78%, 48%, 1)), color-stop(.5, hsla(6, 78%, 45%, 1)), to(hsla(6, 78%, 48%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.outgoing.hide-icons:not(.mention):not(.history) .x-header
+{
+	background: /* cornersx8, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 45%, 1)), to(hsla(6, 78%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 45%, 1)), to(hsla(6, 78%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 45%, 1)), to(hsla(6, 78%, 45%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 68%, .5)), to(hsla(6, 78%, 68%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 45%, 1)), to(hsla(6, 78%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 45%, 1)), to(hsla(6, 78%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 45%, 1)), to(hsla(6, 78%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 68%, .5)), to(hsla(6, 78%, 68%, .5))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 33%, 1)), to(hsla(6, 78%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 33%, 1)), to(hsla(6, 78%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 33%, 1)), to(hsla(6, 78%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 33%, 1)), to(hsla(6, 78%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 68%, 1)), to(hsla(6, 78%, 68%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 50%, 1)), to(hsla(6, 78%, 50%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 68%, 1)), color-stop(.5, hsla(6, 78%, 59%, 1)), to(hsla(6, 78%, 45%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 68%, 1)), color-stop(.5, hsla(6, 78%, 59%, 1)), to(hsla(6, 78%, 45%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 78%, 59%, 1)), color-stop(.45, hsla(6, 78%, 48%, 1)), color-stop(.5, hsla(6, 78%, 45%, 1)), to(hsla(6, 78%, 48%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.outgoing.history .x-header
+{
+	background: /* cornersx4, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 93%, .5)), to(hsla(6, 15%, 93%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 93%, 1)), to(hsla(6, 15%, 93%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 78%, 1)), to(hsla(6, 15%, 78%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 93%, 1)), color-stop(.5, hsla(6, 15%, 82%, 1)), to(hsla(6, 15%, 70%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 93%, 1)), color-stop(.5, hsla(6, 15%, 82%, 1)), to(hsla(6, 15%, 70%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 78%, 1)), color-stop(.45, hsla(6, 15%, 65%, 1)), color-stop(.5, hsla(6, 15%, 60%, 1)), to(hsla(6, 15%, 75%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+
+.x-container.outgoing.history.hide-icons:not(.mention) .x-header
+{
+	background: /* cornersx8, top dark border, left dark border, bottom dark border, right dark border, top light edge, bottom light edge, left light gradient, right light gradient, body */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 93%, .5)), to(hsla(6, 15%, 93%, .5))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 93%, .5)), to(hsla(6, 15%, 93%, .5))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 53%, 1)), to(hsla(6, 15%, 53%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 93%, 1)), to(hsla(6, 15%, 93%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 78%, 1)), to(hsla(6, 15%, 78%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 93%, 1)), color-stop(.5, hsla(6, 15%, 82%, 1)), to(hsla(6, 15%, 70%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 93%, 1)), color-stop(.5, hsla(6, 15%, 82%, 1)), to(hsla(6, 15%, 70%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(6, 15%, 78%, 1)), color-stop(.45, hsla(6, 15%, 65%, 1)), color-stop(.5, hsla(6, 15%, 60%, 1)), to(hsla(6, 15%, 75%, 1))) left top no-repeat;
+	-webkit-background-size: 2px 2px, 1px 3px, 3px 1px, 3px 3px, 2px 2px, 1px 3px, 3px 1px, 3px 3px, 100% 1px, 1px 100%, 100% 1px, 1px 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%, 100% 100%;
+}
+

resources/chat/styles/Stockholm/css/topic.css

+#topic
+{
+	position: fixed;
+	top: 0px;
+	left: 0px;
+	right: 0px;
+	padding-top: .4em;
+	padding-bottom: .6em;
+	white-space: nowrap;
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 95%, 1)), to(hsla(0, 0%, 95%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 60%, 1)), to(hsla(0, 0%, 60%, 1))) left bottom no-repeat,
+
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 90%, 1)), to(hsla(0, 0%, 80%, 1))) left top no-repeat;
+	-webkit-background-size:
+		100% 1px,
+		100% 1px,
+
+		100% 100%;
+	z-index: 999;
+}
+
+#topic:hover
+{
+	max-height: 100%;
+	white-space: normal;
+}
+
+#topic #topicEdit
+{
+	padding-right: 6px;
+	padding-left: 6px;
+	display: block;
+	font-weight: bold;
+	color: black;
+	text-shadow: rgba(255, 255, 255, 1) 0px 1px 1px;
+	font-size: 1em;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+#topic:hover
+{
+	max-height: 100%;
+	white-space: normal;
+}
+
+#topic:hover #topicEdit
+{
+	min-height: 1em;
+}
+
+#topic #topicEdit a
+{
+	color: dark grey;
+}

resources/chat/styles/Stockholm/html/message.html

+<div class="x-container {message.css_classes} {user_icons} {message.text_direction}" background="{message.sender.iconpath}">
+	<img class="x-buddyicon" src="{message.sender.iconpath}" />
+	<div class="x-iconoverlay"></div>
+	<div class="x-mentionicon" title="Mentioned!"></div>
+	<div class="x-header {message.text_direction}">
+		<div class="x-time" title="{message.date}">{message.time}</div>
+		<div class="x-sender">{message.sender.name}</div>
+	</div>
+	<div class="x-message {message.text_direction}">
+		<div class="x-time" title="{message.date}">{message.time}</div>
+		<div class="x-text">{message.message}</div>
+	</div>
+	<div id="insert"></div>
+</div>

resources/chat/styles/Stockholm/html/message_continuation.html

+<div class="x-message {message.css_classes} {message.text_direction}">
+	<div class="x-time" title="{message.date}">{message.time}</div>
+	<div class="x-text">{message.message}</div>
+</div>
+<div id="insert"></div>

resources/chat/styles/Stockholm/html/notification.html

+<div class="x-notification_container {message.css_classes} {user_icons} {message.text_direction}">
+	<div class="x-time" title="{message.date}">{message.time}</div>
+	<div class="x-text">{message.message}</div>
+</div>
+<div id="insert"></div>

resources/chat/styles/Stockholm/html/topic.html

+<style type="text/css">
+	@import url("../css/topic.css");
+</style>
+<div id="x-header {message.text_direction}">
+	{topic}
+</div>

resources/chat/styles/Stockholm/style.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<style version="1.0">
+    <default_variant>Blue - Grey</default_variant>
+    <font_family>Tahoma, "Liberation Sans", sans-serif</font_family>
+    <font_size>11</font_size>
+</style>

resources/chat/styles/Stockholm/test/file_transfer.html

+<div class="x-container {message_classes} {user_icons}" background="{user_icon_path}">
+	<img class="x-buddyicon" src="{user_icon_path}" />
+	<div class="x-iconoverlay"></div>
+	<div class="x-mentionicon" title="Mentioned!"></div>
+	<div class="x-header">
+		<div class="x-time" title="{date}">{time}</div>
+		<div class="x-sender">{sender}</div>
+	</div>
+	<div class="x-message x-filetext">
+		<div class="x-fileicon"><img src="{file_icon_path}" onclick="{save_file_handler}" /></div>
+		<div class="x-fileincoming">Incoming file:</div>
+		<div class="x-filename" onclick="{save_file_handler}"><a href="#">{file_name}</a></div>
+		<div class="x-filemessage">{message}</div>
+		<input type="button" value="Save As..." onclick="{save_file_as_handler}"></button>
+		<input type="button" value="Cancel" onclick="{cancel_request_handler}"></button>
+	</div>
+	<div id="insert"></div>
+</div>

resources/chat/styles/Stockholm/test/mockup.html

+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+	<head>
+		<title>Stockholm</title>
+		<style type="text/css">
+
+			@import url("../Blue - Red.style");
+
+			body
+			{
+				margin: 8px;
+				font-family: Tahoma, "Liberation Sans";
+				font-size: 11px;
+				//background-image: url("/Library/Desktop\ Pictures/Plants/Leaves.jpg") !important;
+			}
+
+			.incoming .x-buddyicon
+			{
+				background: url("./buddy_icon.png") no-repeat top left;
+			}
+
+			.outgoing .x-buddyicon
+			{
+				background: url("./buddy_icon.png") no-repeat top left;
+			}
+
+		</style>
+	</head>
+<body>
+<div id="chat">
+
+<HR>
+
+INCOMING CONTEXT
+
+<HR>
+
+<div class="x-container incoming message history AIM show-icons ltr" background="buddy_noicon.png">
+	<img class="x-buddyicon">
+	<div class="x-iconoverlay"></div>
+	<div class="x-mentionicon" title="Mentioned!"></div>
+	<div class="x-header ltr">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-sender">yhn | ujm</div>
+	</div>
+	<div class="x-message ltr">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-text"><a href=http://>1</a></div>
+	</div>
+</div>
+
+<HR>
+
+<div class="x-container incoming message history AIM show-icons ltr" background="buddy_noicon.png">
+	<img class="x-buddyicon">
+	<div class="x-iconoverlay"></div>
+	<div class="x-mentionicon" title="Mentioned!"></div>
+	<div class="x-header ltr">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-sender">yhn | ujm</div>
+	</div>
+	<div class="x-message ltr">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-text"><a href=http://>1</a></div>
+	</div>
+	<div class="x-message ltr consecutive incoming message history AIM show-icons">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-text">2</div>
+	</div>
+	<div class="x-message ltr consecutive incoming message history AIM show-icons">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-text">3</div>
+	</div>
+</div>
+<HR>
+
+INCOMING CONTEXT MENTION
+
+<HR>
+
+<div class="x-container mention incoming message history AIM show-icons ltr" background="buddy_noicon.png">
+	<img class="x-buddyicon">
+	<div class="x-iconoverlay"></div>
+	<div class="x-mentionicon" title="Mentioned!"></div>
+	<div class="x-header ltr">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-sender">yhn | ujm</div>
+	</div>
+	<div class="x-message ltr">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-text"><a href=http://>1</a></div>
+	</div>
+</div>
+
+<HR>
+
+INCOMING CONTENT MENTION FOCUS
+
+<HR>
+
+<div class="x-container mention focus incoming message AIM show-icons ltr" background="buddy_noicon.png">
+	<img class="x-buddyicon">
+	<div class="x-iconoverlay"></div>
+	<div class="x-mentionicon" title="Mentioned!"></div>
+	<div class="x-header ltr">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-sender">yhn | ujm</div>
+	</div>
+	<div class="x-message ltr">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-text">Hi foo boo poo goo</div>
+	</div>
+	<div class="x-message consecutive ltr">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-text">Hi foo boo poo goo</div>
+	</div>
+	<div class="x-message consecutive ltr">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-text">Hi foo boo poo goo</div>
+	</div>
+	<div class="x-message consecutive ltr">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-text">self.foo, self.bar ,.:;</div>
+	</div>
+</div>
+
+<HR>
+
+INCOMING CONTENT
+
+<HR>
+
+<div class="x-container incoming message AIM show-icons ltr" background="buddy_noicon.png">
+	<img class="x-buddyicon">
+	<div class="x-iconoverlay"></div>
+	<div class="x-mentionicon" title="Mentioned!"></div>
+	<div class="x-header ltr">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-sender">|yhn | ujm</div>
+	</div>
+	<div class="x-message ltr">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-text">|<a href=http://>1</a></div>
+	</div>
+</div>
+
+<HR>
+
+<div class="x-container incoming message AIM show-icons ltr" background="buddy_noicon.png">
+	<img class="x-buddyicon">
+	<div class="x-iconoverlay"></div>
+	<div class="x-mentionicon" title="Mentioned!"></div>
+	<div class="x-header ltr">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-sender">yhn | ujm</div>
+	</div>
+	<div class="x-message ltr">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-text"><a href=http://>1</a></div>
+	</div>
+	<div class="x-message ltr mention consecutive incoming message focus AIM show-icons">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-text">3.141592653589793238462643383279502884197169399375105820974944592307816406286208998628034825342117067982148086513282306647093844609550582231725359408128481117450284102701938521105559644622948954930381964428810975665933446128475648233786783165271201909145648566923460348610454326648213393607260249141273724587006606315588174881520920962829254091715364367892590360011330530548820466521384146951941511609…</div>
+	</div>
+	<div class="x-message ltr mention consecutive incoming message focus AIM show-icons">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-text">3.14 1592 6535 8979 3238 4626 4338 3279 5028 8419 7169 3993 7510 5820 9749 4459 2307 8164 0628 6208 9986 2803 4825 3421 1706 7982 1480 8651 3282 3066 4709 3844 6095 5058 2231 7253 5940 8128 4811 1745 0284 1027 0193 8521 1055 5964 4622 9489 5493 0381 9644 28810975665933446128475648233786783165271201909145648566923460348610454326648213393607260249141273724587006606315588174881520920962829254091715364367892590360011330530548820466521384146951941511609…</div>
+	</div>
+	<div class="x-message ltr mention consecutive incoming message focus AIM show-icons">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-text">3</div>
+	</div>
+</div>
+
+<HR>
+
+<div class="x-container incoming message AIM show-icons rtl" background="buddy_noicon.png">
+	<img class="x-buddyicon">
+	<div class="x-iconoverlay"></div>
+	<div class="x-mentionicon" title="Mentioned!"></div>
+	<div class="x-header rtl">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-sender">1 |yhn | ujm</div>
+	</div>
+	<div class="x-message rtl">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-text"><div dir="rtl">אני&nbsp;יכול לאכול זכוכית וזה לא מזיק לי</div></div>
+	</div>
+</div>
+
+<HR>
+
+INCOMING CONTENT FOCUS
+
+<HR>
+
+<div class="x-container focus incoming message AIM show-icons ltr" background="buddy_noicon.png">
+	<img class="x-buddyicon">
+	<div class="x-iconoverlay"></div>
+	<div class="x-mentionicon" title="Mentioned!"></div>
+	<div class="x-header ltr">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-sender">yhn | ujm</div>
+	</div>
+	<div class="x-message ltr">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-text"><a href=http://>1</a></div>
+	</div>
+	<div class="x-message ltr focus consecutive incoming message AIM show-icons">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-text">2</div>
+	</div>
+	<div class="x-message ltr consecutive incoming message AIM show-icons">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-text">3</div>
+	</div>
+</div>
+
+<HR>
+
+INCOMING CONTENT MENTION
+
+<HR>
+
+<div class="x-container mention incoming message AIM show-icons ltr" background="buddy_noicon.png">
+	<img class="x-buddyicon">
+	<div class="x-iconoverlay"></div>
+	<div class="x-mentionicon" title="Mentioned!"></div>
+	<div class="x-header ltr">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-sender">yhn | ujm</div>
+	</div>
+	<div class="x-message ltr">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-text"><a href=http://>1</a></div>
+	</div>
+</div>
+
+<HR>
+
+<div class="x-container mention incoming message AIM show-icons ltr" background="buddy_noicon.png">
+	<img class="x-buddyicon">
+	<div class="x-iconoverlay"></div>
+	<div class="x-mentionicon" title="Mentioned!"></div>
+	<div class="x-header ltr">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-sender">yhn | ujm</div>
+	</div>
+	<div class="x-message ltr">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-text"><a href=http://>1</a></div>
+	</div>
+	<div class="x-message ltr consecutive incoming message AIM show-icons">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-text">2</div>
+	</div>
+	<div class="x-message ltr consecutive incoming message AIM show-icons">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-text">3</div>
+	</div>
+</div>
+
+<HR>
+
+STATUS
+
+<HR>
+
+<div class="x-notification_container date_separator event AIM show-icons">
+	<div class="x-time">12:22 PM</div>
+	<div class="x-text">Sunday, December 6, 2009</div>
+</div>
+
+<HR>
+
+STATUS FOCUS
+
+<HR>
+
+<div class="x-notification_container focus date_separator event AIM show-icons">
+	<div class="x-time">12:22 PM </div>
+	<div class="x-text">Sunday, December 6, 2009 -status_container focus date_separator event AIM show-icons-status_container focus date_separator event AIM show-icons-status_container focus date_separator event AIM show-icons-status_container focus date_separator event AIM show-icons-status_container focus date_separator event AIM show-iconsstatus_containerfocusdate_separatoreventAIMshow-iconsstatus_containerfocusdate_separatoreventAIMshow-iconsstatus_containerfocusdate_separatoreventAIMshow-iconsstatus_containerfocusdate_separatoreventAIMshow-icons-status_containerdate_separatoreventAIMshow-icons</div>
+</div>
+
+<HR>
+
+OUTGOING CONTEXT
+
+<HR>
+
+<div class="x-container outgoing message history AIM show-icons ltr" background="buddy_noicon.png">
+	<img class="x-buddyicon">
+	<div class="x-iconoverlay"></div>
+	<div class="x-mentionicon" title="Mentioned!"></div>
+	<div class="x-header ltr">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-sender">ujm | yhn -status_container focus date_separator event AIM show-icons-status_container focus date_separator event AIM show-icons-status_container focus date_separator event AIM show-icons-status_container focus date_separator event AIM show-icons-status_container focus date_separator event AIM show-icons-status_container focusdate_separatoreventAIMshow-iconsstatus_containerfocusdate_separatoreventAIMshow-iconsstatus_containerfocusdate_separatoreventAIMshow-icons-status_containerfocusdate_separatoreventAIMshow-iconsstatus_containerfocusdate_separatoreventAIMshow-iconsstatus_containerfocusdate_separatoreventAIMshow-iconsstatus_containerfocusdate_separatoreventAIMshow-icons</div>
+	</div>
+	<div class="x-message ltr">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-text"><a href=http://>1</a></div>
+	</div>
+</div>
+
+<HR>
+
+OUTGOING CONTENT
+
+<HR>
+
+<div class="x-container outgoing message AIM show-icons ltr" background="buddy_noicon.png">
+	<img class="x-buddyicon">
+	<div class="x-iconoverlay"></div>
+	<div class="x-mentionicon" title="Mentioned!"></div>
+	<div class="x-header ltr">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-sender">ujm | yhn</div>
+	</div>
+	<div class="x-message ltr">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-text"><a href=http://>1</a></div>
+	</div>
+	<div class="x-message ltr consecutive outgoing message AIM show-icons">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-text">2</div>
+	</div>
+	<div class="x-message ltr consecutive outgoing message AIM show-icons">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-text"><a href=http://>3</a></div>
+	</div>
+</div>
+
+<HR>
+
+<div class="x-container outgoing message AIM show-icons ltr" background="buddy_noicon.png">
+	<img class="x-buddyicon">
+	<div class="x-iconoverlay"></div>
+	<div class="x-mentionicon" title="Mentioned!"></div>
+	<div class="x-header ltr">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-sender">ujm | yhn</div>
+	</div>
+	<div class="x-message ltr">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-text"><a href=http://>1</a></div>
+	</div>
+</div>
+
+<div class="x-container outgoing message AIM show-icons rtl" background="buddy_noicon.png">
+	<img class="x-buddyicon">
+	<div class="x-iconoverlay"></div>
+	<div class="x-mentionicon" title="Mentioned!"></div>
+	<div class="x-header rtl">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-sender">ujm | yhn</div>
+	</div>
+	<div class="x-message rtl">
+		<div class="x-time">12:22 PM</div>
+		<div class="x-text"><div dir="rtl">אני&nbsp;יכול לאכול זכוכית וזה לא מזיק לי</div></div>
+	</div>
+</div>
+
+</div>
+</body>
+</html>

resources/chat/styles/Stockholm/test/view.py

+#!/usr/bin/python
+
+from PyQt4.QtCore import QUrl
+from PyQt4.QtGui import QApplication
+from PyQt4.QtWebKit import QWebView, QWebSettings
+
+app = QApplication([])
+view = QWebView()
+settings = view.settings()
+settings.setAttribute(QWebSettings.DeveloperExtrasEnabled, True)
+view.load(QUrl('mockup.html'))
+view.show()
+app.exec_()

resources/chat/template.html

+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <base href="{base_url}">
+
+    <style type="text/css">
+      * {{ word-wrap: break-word; text-rendering: optimizelegibility; }}
+      img.scaledToFitImage {{ height: auto; max-width: 100%; }}
+    </style>
+
+    <!-- This style is shared by all variants. !-->
+    <style id="base_style" type="text/css" media="screen,print">
+    </style>
+
+    <!-- The selected style !-->
+    <style id="main_style" type="text/css" media="screen,print">
+      @import url("{style_url}");
+    </style>
+  </head>
+  <body>
+    <div id="chat"></div>
+  </body>
+</html>

resources/chat_session.ui

+<?xml version="1.0" encoding="UTF-8"?>
+<ui version="4.0">
+ <class>chat_session</class>
+ <widget class="QWidget" name="chat_session">
+  <property name="geometry">
+   <rect>
+    <x>0</x>
+    <y>0</y>
+    <width>250</width>
+    <height>36</height>
+   </rect>
+  </property>
+  <property name="palette">
+   <palette>
+    <active>
+     <colorrole role="Window">
+      <brush brushstyle="SolidPattern">
+       <color alpha="255">
+        <red>255</red>
+        <green>255</green>
+        <blue>255</blue>
+       </color>
+      </brush>
+     </colorrole>
+     <colorrole role="Highlight">
+      <brush brushstyle="SolidPattern">
+       <color alpha="255">
+        <red>0</red>
+        <green>102</green>
+        <blue>204</blue>
+       </color>
+      </brush>
+     </colorrole>
+     <colorrole role="AlternateBase">
+      <brush brushstyle="SolidPattern">
+       <color alpha="255">
+        <red>240</red>
+        <green>244</green>
+        <blue>255</blue>
+       </color>
+      </brush>
+     </colorrole>
+    </active>
+    <inactive>
+     <colorrole role="Window">
+      <brush brushstyle="SolidPattern">
+       <color alpha="255">
+        <red>255</red>
+        <green>255</green>
+        <blue>255</blue>
+       </color>
+      </brush>
+     </colorrole>
+     <colorrole role="Highlight">
+      <brush brushstyle="SolidPattern">
+       <color alpha="255">
+        <red>0</red>
+        <green>102</green>
+        <blue>204</blue>
+       </color>
+      </brush>
+     </colorrole>
+     <colorrole role="AlternateBase">
+      <brush brushstyle="SolidPattern">
+       <color alpha="255">
+        <red>240</red>
+        <green>244</green>
+        <blue>255</blue>
+       </color>
+      </brush>
+     </colorrole>
+    </inactive>
+    <disabled>
+     <colorrole role="Window">
+      <brush brushstyle="SolidPattern">
+       <color alpha="255">
+        <red>255</red>
+        <green>255</green>
+        <blue>255</blue>
+       </color>
+      </brush>
+     </colorrole>
+     <colorrole role="Highlight">
+      <brush brushstyle="SolidPattern">
+       <color alpha="255">
+        <red>218</red>
+        <green>216</green>
+        <blue>213</blue>
+       </color>
+      </brush>
+     </colorrole>
+     <colorrole role="AlternateBase">
+      <brush brushstyle="SolidPattern">
+       <color alpha="255">
+        <red>240</red>
+        <green>244</green>
+        <blue>255</blue>
+       </color>
+      </brush>
+     </colorrole>
+    </disabled>
+   </palette>
+  </property>
+  <property name="windowTitle">
+   <string>Chat session</string>
+  </property>
+  <layout class="QHBoxLayout" name="widget_layout">
+   <property name="spacing">
+    <number>3</number>
+   </property>
+   <property name="leftMargin">
+    <number>2</number>
+   </property>
+   <property name="topMargin">
+    <number>0</number>
+   </property>
+   <property name="rightMargin">
+    <number>1</number>
+   </property>
+   <property name="bottomMargin">
+    <number>0</number>
+   </property>
+   <item>
+    <widget class="QLabel" name="icon_label">
+     <property name="minimumSize">
+      <size>
+       <width>36</width>
+       <height>36</height>
+      </size>
+     </property>
+     <property name="maximumSize">
+      <size>
+       <width>36</width>
+       <height>36</height>
+      </size>
+     </property>
+     <property name="pixmap">
+      <pixmap>icons/default-avatar.png</pixmap>
+     </property>
+     <property name="alignment">
+      <set>Qt::AlignCenter</set>
+     </property>
+    </widget>
+   </item>
+   <item>
+    <layout class="QVBoxLayout" name="name_info_layout">
+     <property name="spacing">
+      <number>0</number>
+     </property>
+     <property name="margin">
+      <number>0</number>
+     </property>
+     <item>
+      <layout class="QHBoxLayout" name="name_layout">
+       <property name="spacing">
+        <number>0</number>
+       </property>
+       <property name="margin">
+        <number>0</number>
+       </property>
+       <item>
+        <widget class="ElidedLabel" name="name_label">
+         <property name="sizePolicy">
+          <sizepolicy hsizetype="Expanding" vsizetype="Fixed">
+           <horstretch>0</horstretch>
+           <verstretch>0</verstretch>
+          </sizepolicy>
+         </property>
+         <property name="text">
+          <string>Display Name</string>
+         </property>
+        </widget>
+       </item>
+       <item>
+        <widget class="QWidget" name="state_icons" native="true">
+         <property name="minimumSize">
+          <size>
+           <width>0</width>
+           <height>14</height>
+          </size>
+         </property>
+         <property name="maximumSize">
+          <size>
+           <width>16777215</width>
+           <height>14</height>
+          </size>
+         </property>
+         <layout class="QHBoxLayout" name="state_icons_layout">
+          <property name="spacing">
+           <number>0</number>
+          </property>
+          <property name="margin">
+           <number>0</number>
+          </property>
+          <item>
+           <widget class="QLabel" name="is_composing_icon">
+            <property name="sizePolicy">
+             <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
+              <horstretch>0</horstretch>
+              <verstretch>0</verstretch>
+             </sizepolicy>
+            </property>
+            <property name="text">
+             <string/>
+            </property>
+            <property name="pixmap">
+             <pixmap>icons/composing12.svg</pixmap>
+            </property>
+            <property name="alignment">
+             <set>Qt::AlignCenter</set>
+            </property>
+           </widget>
+          </item>
+          <item>
+           <widget class="QLabel" name="hold_icon">
+            <property name="sizePolicy">
+             <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
+              <horstretch>0</horstretch>
+              <verstretch>0</verstretch>
+             </sizepolicy>
+            </property>
+            <property name="text">
+             <string/>
+            </property>
+            <property name="pixmap">
+             <pixmap>icons/paused12.svg</pixmap>
+            </property>
+            <property name="alignment">
+             <set>Qt::AlignCenter</set>
+            </property>
+           </widget>
+          </item>
+         </layout>
+        </widget>
+       </item>
+      </layout>
+     </item>
+     <item>
+      <layout class="QHBoxLayout" name="info_layout">
+       <property name="spacing">
+        <number>0</number>
+       </property>
+       <property name="margin">
+        <number>0</number>
+       </property>
+       <item>
+        <widget class="ElidedLabel" name="info_label">
+         <property name="sizePolicy">
+          <sizepolicy hsizetype="Expanding" vsizetype="Fixed">
+           <horstretch>0</horstretch>
+           <verstretch>0</verstretch>
+          </sizepolicy>
+         </property>
+         <property name="text">
+          <string>Info</string>
+         </property>
+        </widget>
+       </item>
+       <item>
+        <widget class="QWidget" name="stream_icons" native="true">
+         <property name="minimumSize">
+          <size>
+           <width>0</width>
+           <height>14</height>
+          </size>
+         </property>
+         <property name="maximumSize">
+          <size>
+           <width>16777215</width>
+           <height>14</height>
+          </size>
+         </property>
+         <layout class="QHBoxLayout" name="stream_icons_layout">
+          <property name="spacing">
+           <number>0</number>
+          </property>
+          <property name="margin">
+           <number>0</number>
+          </property>
+          <item>
+           <widget class="QLabel" name="screen_sharing_icon">
+            <property name="sizePolicy">
+             <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
+              <horstretch>0</horstretch>
+              <verstretch>0</verstretch>
+             </sizepolicy>
+            </property>
+            <property name="text">
+             <string/>
+            </property>
+            <property name="pixmap">
+             <pixmap>icons/screen12.svg</pixmap>
+            </property>
+            <property name="alignment">
+             <set>Qt::AlignCenter</set>
+            </property>
+           </widget>
+          </item>
+          <item>
+           <widget class="QLabel" name="video_icon">
+            <property name="sizePolicy">
+             <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
+              <horstretch>0</horstretch>
+              <verstretch>0</verstretch>
+             </sizepolicy>
+            </property>
+            <property name="text">
+             <string/>
+            </property>
+            <property name="pixmap">
+             <pixmap>icons/camera12.svg</pixmap>
+            </property>
+            <property name="alignment">
+             <set>Qt::AlignCenter</set>
+            </property>
+           </widget>
+          </item>
+          <item>
+           <widget class="QLabel" name="audio_icon">
+            <property name="sizePolicy">
+             <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
+              <horstretch>0</horstretch>
+              <verstretch>0</verstretch>
+             </sizepolicy>
+            </property>
+            <property name="text">
+             <string/>
+            </property>
+            <property name="pixmap">
+             <pixmap>icons/speaker12.svg</pixmap>
+            </property>
+            <property name="alignment">
+             <set>Qt::AlignCenter</set>
+            </property>
+           </widget>
+          </item>
+          <item>
+           <widget class="QLabel" name="chat_icon">
+            <property name="sizePolicy">
+             <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
+              <horstretch>0</horstretch>
+              <verstretch>0</verstretch>
+             </sizepolicy>
+            </property>
+            <property name="text">
+             <string/>
+            </property>
+            <property name="pixmap">
+             <pixmap>icons/chat12.svg</pixmap>
+            </property>
+            <property name="alignment">
+             <set>Qt::AlignCenter</set>
+            </property>
+           </widget>
+          </item>
+         </layout>
+        </widget>
+       </item>
+      </layout>
+     </item>
+    </layout>
+   </item>
+   <item>
+    <widget class="ContactState" name="state_label">
+     <property name="minimumSize">
+      <size>
+       <width>14</width>
+       <height>0</height>
+      </size>
+     </property>
+     <property name="maximumSize">
+      <size>
+       <width>14</width>
+       <height>16777215</height>
+      </size>
+     </property>
+     <property name="text">
+      <string/>
+     </property>
+     <property name="state" stdset="0">
+      <string notr="true">unknown</string>
+     </property>
+    </widget>
+   </item>
+  </layout>
+ </widget>
+ <customwidgets>
+  <customwidget>
+   <class>ElidedLabel</class>
+   <extends>QLabel</extends>
+   <header>blink.widgets.labels</header>
+  </customwidget>
+  <customwidget>
+   <class>ContactState</class>
+   <extends>QLabel</extends>
+   <header>blink.widgets.labels</header>
+  </customwidget>
+ </customwidgets>
+ <resources/>
+ <connections/>
+</ui>

resources/chat_widget.ui

+<?xml version="1.0" encoding="UTF-8"?>
+<ui version="4.0">
+ <class>chat_session</class>
+ <widget class="QWidget" name="chat_session">
+  <property name="geometry">
+   <rect>
+    <x>0</x>
+    <y>0</y>
+    <width>758</width>
+    <height>521</height>
+   </rect>
+  </property>
+  <property name="windowTitle">
+   <string>Chat session</string>
+  </property>
+  <layout class="QVBoxLayout" name="widget_layout">
+   <property name="spacing">
+    <number>3</number>
+   </property>
+   <property name="margin">
+    <number>0</number>
+   </property>
+   <item>
+    <widget class="ChatWebView" name="chat_view">
+     <property name="sizePolicy">
+      <sizepolicy hsizetype="Expanding" vsizetype="Expanding">
+       <horstretch>0</horstretch>
+       <verstretch>0</verstretch>
+      </sizepolicy>
+     </property>
+     <property name="minimumSize">
+      <size>
+       <width>300</width>
+       <height>100</height>
+      </size>
+     </property>
+     <property name="focusPolicy">
+      <enum>Qt::ClickFocus</enum>
+     </property>
+    </widget>
+   </item>
+   <item>
+    <widget class="ChatTextInput" name="chat_input">
+     <property name="sizePolicy">
+      <sizepolicy hsizetype="Expanding" vsizetype="Minimum">
+       <horstretch>0</horstretch>
+       <verstretch>0</verstretch>
+      </sizepolicy>
+     </property>
+     <property name="minimumSize">
+      <size>
+       <width>0</width>
+       <height>50</height>
+      </size>
+     </property>
+     <property name="styleSheet">
+      <string notr="true">QTextEdit {
+	margin: 4px 5px 4px 5px;
+	border: 1px solid palette(dark);
+	border-style: inset;
+	border-radius: 3px;
+}
+</string>
+     </property>
+     <property name="verticalScrollBarPolicy">
+      <enum>Qt::ScrollBarAlwaysOff</enum>
+     </property>
+     <property name="horizontalScrollBarPolicy">
+      <enum>Qt::ScrollBarAlwaysOff</enum>
+     </property>
+    </widget>
+   </item>
+  </layout>
+ </widget>
+ <customwidgets>
+  <customwidget>
+   <class>QWebView</class>
+   <extends>QWidget</extends>
+   <header>QtWebKit/QWebView</header>
+  </customwidget>
+  <customwidget>
+   <class>ChatTextInput</class>
+   <extends>QTextEdit</extends>
+   <header>blink.chatwindow</header>
+  </customwidget>
+  <customwidget>
+   <class>ChatWebView</class>
+   <extends>QWebView</extends>
+   <header>blink.chatwindow</header>
+  </customwidget>
+ </customwidgets>
+ <resources/>
+ <connections/>
+</ui>

resources/chat_window.ui

+<?xml version="1.0" encoding="UTF-8"?>
+<ui version="4.0">
+ <class>chat_window</class>
+ <widget class="QMainWindow" name="chat_window">
+  <property name="geometry">
+   <rect>
+    <x>0</x>
+    <y>0</y>
+    <width>900</width>
+    <height>550</height>
+   </rect>
+  </property>
+  <property name="minimumSize">
+   <size>
+    <width>900</width>
+    <height>550</height>
+   </size>
+  </property>
+  <property name="windowTitle">
+   <string>Blink Chat</string>
+  </property>
+  <property name="windowIcon">
+   <iconset>
+    <normaloff>icons/blink48.png</normaloff>icons/blink48.png</iconset>
+  </property>
+  <widget class="QWidget" name="centralwidget">
+   <layout class="QHBoxLayout" name="window_layout">
+    <property name="leftMargin">
+     <number>4</number>
+    </property>
+    <property name="topMargin">
+     <number>4</number>
+    </property>
+    <property name="rightMargin">
+     <number>4</number>
+    </property>
+    <property name="bottomMargin">
+     <number>2</number>
+    </property>
+    <item>
+     <widget class="QSplitter" name="splitter">
+      <property name="orientation">
+       <enum>Qt::Horizontal</enum>
+      </property>
+      <property name="handleWidth">
+       <number>7</number>
+      </property>
+      <property name="childrenCollapsible">
+       <bool>false</bool>
+      </property>
+      <widget class="QWidget" name="layoutWidget">
+       <layout class="QVBoxLayout" name="left_panel_layout">
+        <property name="spacing">
+         <number>4</number>
+        </property>
+        <property name="leftMargin">
+         <number>0</number>
+        </property>
+        <property name="topMargin">
+         <number>0</number>
+        </property>
+        <property name="rightMargin">
+         <number>0</number>
+        </property>
+        <property name="bottomMargin">
+         <number>2</number>
+        </property>
+        <item>
+         <widget class="QToolButton" name="new_messages_button">
+          <property name="sizePolicy">
+           <sizepolicy hsizetype="Expanding" vsizetype="Fixed">
+            <horstretch>0</horstretch>
+            <verstretch>0</verstretch>
+           </sizepolicy>
+          </property>
+          <property name="minimumSize">
+           <size>
+            <width>0</width>
+            <height>20</height>
+           </size>
+          </property>
+          <property name="maximumSize">
+           <size>
+            <width>16777215</width>
+            <height>20</height>
+           </size>
+          </property>
+          <property name="styleSheet">
+           <string notr="true">QToolButton {
+	margin: 0px;
+	padding: 2px;
+	border-style: outset;
+	border-width: 1px;
+	border-radius: 3px;
+	border-color: #800040;
+	background-color: #a0003a;
+	color: white;
+}
+
+QToolButton:pressed {
+	border-style: inset;
+}
+
+</string>
+          </property>
+          <property name="text">
+           <string>There are new messages</string>
+          </property>
+         </widget>
+        </item>
+        <item>
+         <widget class="QWidget" name="session_panel" native="true">
+          <property name="sizePolicy">
+           <sizepolicy hsizetype="Preferred" vsizetype="Expanding">
+            <horstretch>0</horstretch>
+            <verstretch>0</verstretch>
+           </sizepolicy>
+          </property>
+          <layout class="QVBoxLayout" name="session_panel_layout">
+           <property name="margin">
+            <number>0</number>
+           </property>
+           <item>
+            <widget class="QWidget" name="session_widget" native="true">
+             <property name="minimumSize">
+              <size>
+               <width>210</width>
+               <height>0</height>
+              </size>
+             </property>
+             <property name="palette">
+              <palette>
+               <active>
+                <colorrole role="Button">
+                 <brush brushstyle="SolidPattern">
+                  <color alpha="255">
+                   <red>255</red>
+                   <green>255</green>
+                   <blue>255</blue>
+                  </color>
+                 </brush>
+                </colorrole>
+                <colorrole role="Base">
+                 <brush brushstyle="SolidPattern">
+                  <color alpha="255">
+                   <red>255</red>
+                   <green>255</green>
+                   <blue>255</blue>
+                  </color>
+                 </brush>
+                </colorrole>
+                <colorrole role="Window">
+                 <brush brushstyle="SolidPattern">
+                  <color alpha="255">
+                   <red>255</red>
+                   <green>255</green>
+                   <blue>255</blue>
+                  </color>
+                 </brush>
+                </colorrole>
+               </active>
+               <inactive>
+                <colorrole role="Button">
+                 <brush brushstyle="SolidPattern">
+                  <color alpha="255">
+                   <red>255</red>
+                   <green>255</green>
+                   <blue>255</blue>
+                  </color>
+                 </brush>
+                </colorrole>
+                <colorrole role="Base">
+                 <brush brushstyle="SolidPattern">
+                  <color alpha="255">
+                   <red>255</red>
+                   <green>255</green>
+                   <blue>255</blue>
+                  </color>
+                 </brush>
+                </colorrole>
+                <colorrole role="Window">
+                 <brush brushstyle="SolidPattern">
+                  <color alpha="255">
+                   <red>255</red>
+                   <green>255</green>
+                   <blue>255</blue>
+                  </color>
+                 </brush>
+                </colorrole>
+               </inactive>
+               <disabled>
+                <colorrole role="Button">
+                 <brush brushstyle="SolidPattern">
+                  <color alpha="255">
+                   <red>255</red>
+                   <green>255</green>
+                   <blue>255</blue>
+                  </color>
+                 </brush>
+                </colorrole>
+                <colorrole role="Base">
+                 <brush brushstyle="SolidPattern">
+                  <color alpha="255">
+                   <red>255</red>
+                   <green>255</green>
+                   <blue>255</blue>
+                  </color>
+                 </brush>
+                </colorrole>
+                <colorrole role="Window">
+                 <brush brushstyle="SolidPattern">
+                  <color alpha="255">
+                   <red>255</red>
+                   <green>255</green>
+                   <blue>255</blue>
+                  </color>
+                 </brush>
+                </colorrole>
+               </disabled>
+              </palette>
+             </property>
+             <property name="styleSheet">
+              <string notr="true">QWidget#session_widget {
+	margin: 0px;
+	padding: 2px;
+	border: 1px solid palette(dark);
+	border-style: outset;
+	border-radius: 3px;
+	background: white;
+}
+
+QWidget#session_widget_no:hover {
+	background: rgb(240, 252, 255);
+	background: rgb(230, 248, 255);
+	background: rgb(248, 248, 248);
+}
+</string>
+             </property>
+             <layout class="QHBoxLayout" name="session_layout">
+              <property name="spacing">
+               <number>3</number>
+              </property>
+              <property name="margin">
+               <number>0</number>
+              </property>
+              <item>
+               <widget class="QLabel" name="icon_label">
+                <property name="minimumSize">
+                 <size>
+                  <width>36</width>
+                  <height>36</height>
+                 </size>
+                </property>
+                <property name="maximumSize">
+                 <size>
+                  <width>36</width>
+                  <height>36</height>
+                 </size>
+                </property>
+                <property name="pixmap">
+                 <pixmap>icons/default-avatar.png</pixmap>
+                </property>
+                <property name="alignment">
+                 <set>Qt::AlignCenter</set>
+                </property>
+               </widget>
+              </item>
+              <item>
+               <layout class="QVBoxLayout" name="name_info_layout">
+                <property name="spacing">
+                 <number>0</number>
+                </property>
+                <property name="margin">
+                 <number>0</number>
+                </property>
+                <item>
+                 <layout class="QHBoxLayout" name="name_layout">
+                  <property name="spacing">
+                   <number>0</number>
+                  </property>
+                  <property name="margin">
+                   <number>0</number>
+                  </property>
+                  <item>
+                   <widget class="ElidedLabel" name="name_label">
+                    <property name="sizePolicy">
+                     <sizepolicy hsizetype="Expanding" vsizetype="Fixed">
+                      <horstretch>0</horstretch>
+                      <verstretch>0</verstretch>
+                     </sizepolicy>
+                    </property>
+                    <property name="text">
+                     <string>Display Name</string>
+                    </property>
+                   </widget>
+                  </item>
+                  <item>
+                   <widget class="QWidget" name="state_icons" native="true">
+                    <property name="minimumSize">
+                     <size>
+                      <width>0</width>
+                      <height>14</height>
+                     </size>
+                    </property>
+                    <property name="maximumSize">
+                     <size>
+                      <width>16777215</width>
+                      <height>14</height>
+                     </size>
+                    </property>
+                    <layout class="QHBoxLayout" name="state_icons_layout">
+                     <property name="spacing">
+                      <number>0</number>
+                     </property>
+                     <property name="margin">
+                      <number>0</number>
+                     </property>
+                     <item>
+                      <widget class="QLabel" name="is_composing_icon">
+                       <property name="sizePolicy">
+                        <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
+                         <horstretch>0</horstretch>
+                         <verstretch>0</verstretch>
+                        </sizepolicy>
+                       </property>
+                       <property name="text">
+                        <string/>
+                       </property>
+                       <property name="pixmap">
+                        <pixmap>icons/composing12.svg</pixmap>
+                       </property>
+                       <property name="alignment">
+                        <set>Qt::AlignCenter</set>
+                       </property>
+                      </widget>
+                     </item>
+                     <item>
+                      <widget class="QLabel" name="hold_icon">
+                       <property name="sizePolicy">
+                        <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
+                         <horstretch>0</horstretch>
+                         <verstretch>0</verstretch>
+                        </sizepolicy>
+                       </property>
+                       <property name="text">
+                        <string/>
+                       </property>
+                       <property name="pixmap">
+                        <pixmap>icons/paused12.svg</pixmap>
+                       </property>
+                       <property name="alignment">
+                        <set>Qt::AlignCenter</set>
+                       </property>
+                      </widget>
+                     </item>
+                    </layout>
+                   </widget>
+                  </item>
+                 </layout>
+                </item>
+                <item>
+                 <layout class="QHBoxLayout" name="info_layout">
+                  <property name="spacing">
+                   <number>0</number>
+                  </property>
+                  <property name="margin">
+                   <number>0</number>
+                  </property>
+                  <item>
+                   <widget class="ElidedLabel" name="info_label">
+                    <property name="sizePolicy">
+                     <sizepolicy hsizetype="Expanding" vsizetype="Fixed">
+                      <horstretch>0</horstretch>
+                      <verstretch>0</verstretch>
+                     </sizepolicy>
+                    </property>
+                    <property name="text">
+                     <string>Info</string>
+                    </property>
+                   </widget>
+                  </item>
+                  <item>
+                   <widget class="QWidget" name="stream_icons" native="true">
+                    <property name="minimumSize">
+                     <size>
+                      <width>0</width>
+                      <height>14</height>
+                     </size>
+                    </property>
+                    <property name="maximumSize">
+                     <size>
+                      <width>16777215</width>
+                      <height>14</height>
+                     </size>
+                    </property>
+                    <layout class="QHBoxLayout" name="stream_icons_layout">
+                     <property name="spacing">
+                      <number>0</number>
+                     </property>
+                     <property name="margin">
+                      <number>0</number>
+                     </property>
+                     <item>
+                      <widget class="QLabel" name="screen_sharing_icon">
+                       <property name="sizePolicy">
+                        <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
+                         <horstretch>0</horstretch>
+                         <verstretch>0</verstretch>
+                        </sizepolicy>
+                       </property>
+                       <property name="text">
+                        <string/>
+                       </property>
+                       <property name="pixmap">
+                        <pixmap>icons/screen12.svg</pixmap>
+                       </property>
+                       <property name="alignment">
+                        <set>Qt::AlignCenter</set>
+                       </property>
+                      </widget>
+                     </item>
+                     <item>
+                      <widget class="QLabel" name="video_icon">
+                       <property name="sizePolicy">
+                        <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
+                         <horstretch>0</horstretch>
+                         <verstretch>0</verstretch>
+                        </sizepolicy>
+                       </property>
+                       <property name="text">
+                        <string/>
+                       </property>
+                       <property name="pixmap">
+                        <pixmap>icons/camera12.svg</pixmap>
+                       </property>
+                       <property name="alignment">
+                        <set>Qt::AlignCenter</set>
+                       </property>
+                      </widget>
+                     </item>
+                     <item>
+                      <widget class="QLabel" name="audio_icon">
+                       <property name="sizePolicy">
+                        <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
+                         <horstretch>0</horstretch>
+                         <verstretch>0</verstretch>
+                        </sizepolicy>
+                       </property>
+                       <property name="text">
+                        <string/>
+                       </property>
+                       <property name="pixmap">
+                        <pixmap>icons/speaker12.svg</pixmap>
+                       </property>
+                       <property name="alignment">
+                        <set>Qt::AlignCenter</set>
+                       </property>
+                      </widget>
+                     </item>
+                     <item>
+                      <widget class="QLabel" name="chat_icon">
+                       <property name="sizePolicy">
+                        <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
+                         <horstretch>0</horstretch>
+                         <verstretch>0</verstretch>
+                        </sizepolicy>
+                       </property>
+                       <property name="text">
+                        <string/>
+                       </property>
+                       <property name="pixmap">
+                        <pixmap>icons/chat12.svg</pixmap>
+                       </property>
+                       <property name="alignment">
+                        <set>Qt::AlignCenter</set>
+                       </property>
+                      </widget>
+                     </item>
+                    </layout>
+                   </widget>
+                  </item>
+                 </layout>
+                </item>
+               </layout>
+              </item>
+              <item>
+               <widget class="ContactState" name="state_label">
+                <property name="minimumSize">
+                 <size>
+                  <width>14</width>
+                  <height>0</height>
+                 </size>
+                </property>
+                <property name="maximumSize">
+                 <size>
+                  <width>14</width>
+                  <height>16777215</height>
+                 </size>
+                </property>
+                <property name="text">
+                 <string/>
+                </property>
+                <property name="state" stdset="0">
+                 <string notr="true">unknown</string>
+                </property>
+               </widget>
+              </item>
+             </layout>
+            </widget>
+           </item>
+           <item>
+            <widget class="QStackedWidget" name="info_panels">
+             <property name="currentIndex">
+              <number>0</number>
+             </property>
+             <widget class="QWidget" name="chat_panel"/>
+             <widget class="QWidget" name="conference_panel"/>
+            </widget>
+           </item>
+          </layout>
+         </widget>
+        </item>
+        <item>
+         <widget class="QWidget" name="toolbar_widget" native="true">
+          <property name="styleSheet">
+           <string notr="true">QWidget#widget1 {
+	background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #fafafa, stop:1 #bababa);
+}
+
+QToolButton {
+	/*border: 1px solid transparent;
+	border-radius: 4px;*/
+}
+
+QToolButton:hover {
+	/*border: 1px solid #808080;
+	border-radius: 4px;*/
+}
+
+</string>
+          </property>
+          <layout class="QHBoxLayout" name="toolbar_layout">
+           <property name="spacing">
+            <number>0</number>
+           </property>
+           <property name="margin">
+            <number>0</number>
+           </property>
+           <item>
+            <widget class="QToolButton" name="mute_button">
+             <property name="minimumSize">
+              <size>
+               <width>28</width>
+               <height>28</height>
+              </size>
+             </property>
+             <property name="maximumSize">
+              <size>
+               <width>28</width>
+               <height>28</height>
+              </size>
+             </property>
+             <property name="text">
+              <string/>
+             </property>
+             <property name="icon">
+              <iconset>
+               <normaloff>icons/mic-on.svg</normaloff>
+               <normalon>icons/mic-off.svg</normalon>
+               <activeon>icons/mic-off.svg</activeon>icons/mic-on.svg</iconset>
+             </property>
+             <property name="iconSize">
+              <size>
+               <width>20</width>
+               <height>20</height>
+              </size>
+             </property>
+             <property name="checkable">
+              <bool>true</bool>
+             </property>
+             <property name="autoRaise">
+              <bool>true</bool>
+             </property>
+            </widget>
+           </item>
+           <item>
+            <widget class="QToolButton" name="hold_button">
+             <property name="minimumSize">
+              <size>
+               <width>28</width>
+               <height>28</height>
+              </size>
+             </property>
+             <property name="maximumSize">
+              <size>
+               <width>28</width>
+               <height>28</height>
+              </size>
+             </property>
+             <property name="text">
+              <string/>
+             </property>
+             <property name="icon">
+              <iconset>
+               <normaloff>icons/pause.svg</normaloff>
+               <normalon>icons/paused.svg</normalon>
+               <activeon>icons/paused.svg</activeon>icons/pause.svg</iconset>
+             </property>
+             <property name="iconSize">
+              <size>
+               <width>20</width>
+               <height>20</height>
+              </size>
+             </property>
+             <property name="checkable">
+              <bool>true</bool>
+             </property>
+             <property name="autoRaise">
+              <bool>true</bool>
+             </property>
+            </widget>
+           </item>
+           <item>
+            <widget class="QToolButton" name="record_button">
+             <property name="minimumSize">
+              <size>
+               <width>28</width>
+               <height>28</height>
+              </size>
+             </property>
+             <property name="maximumSize">
+              <size>
+               <width>28</width>
+               <height>28</height>
+              </size>
+             </property>
+             <property name="text">
+              <string/>
+             </property>
+             <property name="icon">
+              <iconset>
+               <normaloff>icons/record.svg</normaloff>
+               <normalon>icons/recording.svg</normalon>
+               <activeon>icons/recording.svg</activeon>icons/record.svg</iconset>
+             </property>
+             <property name="iconSize">
+              <size>
+               <width>20</width>
+               <height>20</height>
+              </size>
+             </property>
+             <property name="checkable">
+              <bool>true</bool>
+             </property>
+             <property name="autoRaise">
+              <bool>true</bool>
+             </property>
+            </widget>
+           </item>
+           <item>
+            <spacer name="toolbar_spacer">
+             <property name="orientation">
+              <enum>Qt::Horizontal</enum>
+             </property>
+             <property name="sizeHint" stdset="0">
+              <size>
+               <width>40</width>
+               <height>20</height>
+              </size>
+             </property>
+            </spacer>
+           </item>
+           <item>
+            <widget class="ToolButton" name="control_button">
+             <property name="minimumSize">
+              <size>
+               <width>28</width>
+               <height>28</height>
+              </size>
+             </property>
+             <property name="maximumSize">
+              <size>
+               <width>28</width>
+               <height>28</height>
+              </size>
+             </property>
+             <property name="text">
+              <string/>
+             </property>
+             <property name="icon">
+              <iconset>
+               <normaloff>icons/cog.svg</normaloff>icons/cog.svg</iconset>
+             </property>
+             <property name="iconSize">
+              <size>
+               <width>20</width>
+               <height>20</height>
+              </size>
+             </property>
+             <property name="popupMode">
+              <enum>QToolButton::InstantPopup</enum>
+             </property>
+             <property name="autoRaise">
+              <bool>true</bool>
+             </property>
+            </widget>
+           </item>
+          </layout>
+         </widget>
+        </item>
+       </layout>
+      </widget>
+      <widget class="QTabWidget" name="tab_widget">
+       <property name="styleSheet">
+        <string notr="true">noQTabWidget::pane { background: palette(light); border: none; }
+noQTabWidget::tab-bar { left: 5px; background: palette(light); }
+noQTabBar { background: palette(dark); }
+noQTabBar::tab {
+	padding: 4px 2px 2px 2px;
+	background: palette(mid);
+	border: 2px solid palette(dark);
+	border-top: none;
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+}
+noQTabBar::tab:selected { background: palette(light); }
+</string>
+       </property>
+       <property name="tabPosition">
+        <enum>QTabWidget::South</enum>
+       </property>
+       <property name="currentIndex">
+        <number>0</number>
+       </property>
+       <property name="documentMode">
+        <bool>true</bool>
+       </property>
+       <property name="movable">
+        <bool>true</bool>
+       </property>
+       <widget class="QWidget" name="tab">
+        <attribute name="title">
+         <string>Page</string>
+        </attribute>
+        <layout class="QVBoxLayout" name="tab_layout">
+         <property name="spacing">
+          <number>3</number>
+         </property>
+         <property name="margin">
+          <number>0</number>
+         </property>
+         <item>
+          <widget class="ChatWebView" name="chat_view">
+           <property name="sizePolicy">
+            <sizepolicy hsizetype="Expanding" vsizetype="Expanding">
+             <horstretch>0</horstretch>
+             <verstretch>0</verstretch>
+            </sizepolicy>
+           </property>
+           <property name="minimumSize">
+            <size>
+             <width>0</width>
+             <height>64</height>
+            </size>
+           </property>
+           <property name="url">
+            <url>
+             <string>about:blank</string>
+            </url>
+           </property>
+          </widget>
+         </item>
+         <item>
+          <widget class="ChatTextInput" name="chat_input">
+           <property name="sizePolicy">
+            <sizepolicy hsizetype="Expanding" vsizetype="Minimum">
+             <horstretch>0</horstretch>
+             <verstretch>0</verstretch>
+            </sizepolicy>
+           </property>
+           <property name="minimumSize">
+            <size>
+             <width>0</width>
+             <height>50</height>
+            </size>
+           </property>
+           <property name="styleSheet">
+            <string notr="true">QTextEdit {
+	margin: 4px 5px 4px 5px;
+	border: 1px solid palette(dark);
+	border-style: inset;
+	border-radius: 3px;
+}
+</string>
+           </property>
+           <property name="verticalScrollBarPolicy">
+            <enum>Qt::ScrollBarAlwaysOff</enum>
+           </property>
+           <property name="horizontalScrollBarPolicy">
+            <enum>Qt::ScrollBarAlwaysOff</enum>
+           </property>
+          </widget>
+         </item>
+        </layout>
+       </widget>
+      </widget>
+     </widget>
+    </item>
+   </layout>
+  </widget>
+ </widget>
+ <customwidgets>
+  <customwidget>
+   <class>QWebView</class>
+   <extends>QWidget</extends>
+   <header>QtWebKit/QWebView</header>
+  </customwidget>
+  <customwidget>
+   <class>ElidedLabel</class>
+   <extends>QLabel</extends>
+   <header>blink.widgets.labels</header>
+  </customwidget>
+  <customwidget>
+   <class>ContactState</class>
+   <extends>QLabel</extends>
+   <header>blink.widgets.labels</header>
+  </customwidget>
+  <customwidget>
+   <class>ChatTextInput</class>
+   <extends>QTextEdit</extends>
+   <header>blink.chatwindow</header>
+  </customwidget>
+  <customwidget>
+   <class>ChatWebView</class>
+   <extends>QWebView</extends>
+   <header>blink.chatwindow</header>
+  </customwidget>
+  <customwidget>
+   <class>ToolButton</class>
+   <extends>QToolButton</extends>
+   <header>blink.widgets.buttons</header>
+  </customwidget>
+ </customwidgets>
+ <tabstops>
+  <tabstop>chat_input</tabstop>
+  <tabstop>control_button</tabstop>
+  <tabstop>mute_button</tabstop>
+  <tabstop>hold_button</tabstop>
+  <tabstop>record_button</tabstop>
+  <tabstop>new_messages_button</tabstop>
+  <tabstop>tab_widget</tabstop>
+  <tabstop>chat_view</tabstop>
+ </tabstops>
+ <resources/>
+ <connections/>
+</ui>

resources/conference_dialog.ui

@@ -69,12 +69,12 @@
      </item>
      <item>
       <widget class="QCheckBox" name="chat_button">
-       <property name="enabled">
-        <bool>false</bool>
-       </property>
        <property name="text">
         <string>Chat</string>
        </property>
+       <property name="checked">
+        <bool>true</bool>
+       </property>
       </widget>
      </item>
      <item>

resources/icons/camera12.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="12"
+   height="12"
+   id="svg4429"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="camera12.svg">
+  <defs
+     id="defs4431" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="71.75"
+     inkscape:cx="6"
+     inkscape:cy="6"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:grid-bbox="true"
+     inkscape:document-units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1665"
+     inkscape:window-height="1071"
+     inkscape:window-x="84"
+     inkscape:window-y="24"
+     inkscape:window-maximized="0">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4437"
+       empspacing="10"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true"
+       spacingx="0.5px"
+       spacingy="0.5px" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4434">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Camera"
+     inkscape:groupmode="layer"
+     transform="translate(0,-4)">
+    <path
+       style="fill:#333333;fill-opacity:1;stroke:#333333;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
+       d="m 10.5,6.5 c 0,2 0,5 0,7 -1,-1 -2,-2 -3,-3 l 0,2.5 -6,0 c 0,-1.333333 0,-4.6666667 0,-6 l 6,0 0,2.5 c 0,1.414214 2,-2 3,-3 z"
+       id="path4967"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccccc" />
+  </g>
+</svg>

resources/icons/chat.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16px"
+   height="16px"
+   id="svg2988"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="chat.svg">
+  <defs
+     id="defs2990" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="51.8125"
+     inkscape:cx="7.9806996"
+     inkscape:cy="6.455971"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:grid-bbox="true"
+     inkscape:document-units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1508"
+     inkscape:window-height="1039"
+     inkscape:window-x="104"
+     inkscape:window-y="20"
+     inkscape:window-maximized="0">
+    <inkscape:grid
+       type="xygrid"
+       id="grid2996"
+       empspacing="10"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true"
+       spacingx="0.5px"
+       spacingy="0.5px" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata2993">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Chat bubble"
+     inkscape:groupmode="layer"
+     style="display:inline">
+    <path
+       style="fill:#333333;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       d="M 14,6.5882931 C 14,7.5320759 13.406848,8.5048171 12.249616,8.9431914 10.557783,9.5840794 10.304318,9.7333417 9.1110382,10.32531 8.5069536,10.624987 8.1881388,10.952161 7.4366066,11.460562 6.7599963,11.91828 3.362662,13.59858 4.1314838,12.414688 4.4923817,11.858949 4.9823872,10.699689 4.7200548,9.8692848 4.5901477,9.4580689 4.0288058,9.1596229 3.7573596,9.0050006 2.6715732,8.3865117 1.9999999,7.5320759 1.9999999,6.5882931 c 0,-1.887566 2.6862916,-3.4177407 6.0000006,-3.4177407 C 11.313708,3.1705524 14,4.7007271 14,6.5882931 z"
+       id="path2998"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="sssssassss" />
+  </g>
+</svg>

resources/icons/chat12.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="12"
+   height="12"
+   id="svg4992"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="chat12.svg">
+  <defs
+     id="defs4994" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="68.916667"
+     inkscape:cx="6"
+     inkscape:cy="6"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:grid-bbox="true"
+     inkscape:document-units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1497"
+     inkscape:window-height="1037"
+     inkscape:window-x="67"
+     inkscape:window-y="13"
+     inkscape:window-maximized="0">
+    <inkscape:grid
+       type="xygrid"
+       id="grid5508"
+       empspacing="10"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true"
+       spacingx="0.5px"
+       spacingy="0.5px" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4997">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Chat bubble"
+     inkscape:groupmode="layer"
+     transform="translate(0,-4)">
+    <path
+       style="fill:#333333;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       d="m 11,8.6893667 c 0,0.202921 -0.03498,0.4010393 -0.101582,0.5923849 -0.0666,0.1913457 -0.164836,0.3759187 -0.291343,0.5517493 C 10.480568,10.009332 10.325786,10.176419 10.146079,10.332794 9.9663713,10.48917 9.7617394,10.634833 9.5355339,10.767813 9.3093284,10.900794 9.0615492,11.021091 8.7955475,11.126736 8.5295458,11.232381 8.2453215,11.323374 7.9462256,11.397743 7.2910034,11.57577 4.6244278,14.254295 4,14.249995 3.4649904,14.24631 4.6726923,11.517521 4.0537744,11.397743 3.7546785,11.323374 3.4704542,11.232381 3.2044525,11.126736 2.9384508,11.021091 2.6906716,10.900794 2.4644661,10.767813 2.2382606,10.634833 2.0336287,10.48917 1.8539215,10.332794 1.6742143,10.176419 1.5194317,10.009332 1.3929248,9.8335009 1.2664179,9.6576703 1.1681867,9.4730973 1.1015822,9.2817516 1.0349778,9.090406 1,8.8922877 1,8.6893667 1,8.4864458 1.0349778,8.2883275 1.1015822,8.0969819 1.1681867,7.9056361 1.2664179,7.7210631 1.3929248,7.5452326 1.5194317,7.3694021 1.6742143,7.2023142 1.8539215,7.0459389 2.0336287,6.8895636 2.2382606,6.7439009 2.4644661,6.6109207 2.6906716,6.4779405 2.9384508,6.3576428 3.2044525,6.2519978 3.4704542,6.1463527 3.7546785,6.0553601 4.0537744,5.9809901 4.3528702,5.90662 4.6668377,5.8488725 4.9923256,5.8097175 5.3178136,5.7705626 5.654822,5.7500001 6,5.7500001 c 0.345178,0 0.6821864,0.020563 1.0076744,0.059717 0.3254879,0.039155 0.6394554,0.096902 0.9385512,0.1712726 0.2990959,0.07437 0.5833202,0.1653626 0.8493219,0.2710077 0.2660017,0.105645 0.5137809,0.2259427 0.7399864,0.3589229 0.2262055,0.1329802 0.4308374,0.2786429 0.6105451,0.4350182 0.179707,0.1563753 0.334489,0.3234632 0.460996,0.4992937 0.126507,0.1758305 0.224738,0.3604036 0.291343,0.5517493 C 10.965022,8.2883275 11,8.4864458 11,8.6893667 z"
+       id="path5518"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="sssssscscssssssssssssssssssssss" />
+  </g>
+</svg>

resources/icons/cog.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="32px"
+   style="enable-background:new 0 0 32 32;"
+   version="1.1"
+   viewBox="0 0 32 32"
+   width="32px"
+   x="0px"
+   xml:space="preserve"
+   y="0px"
+   id="svg2985"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="cog.svg"><metadata
+     id="metadata2995"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
+     id="defs2993" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1374"
+     inkscape:window-height="886"
+     id="namedview2991"
+     showgrid="true"
+     inkscape:zoom="21.125"
+     inkscape:cx="16"
+     inkscape:cy="16"
+     inkscape:window-x="179"
+     inkscape:window-y="138"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="cog"><inkscape:grid
+       type="xygrid"
+       id="grid3150" /></sodipodi:namedview><g
+     id="Layer_1" /><g
+     id="cog"
+     inkscape:label="Cog"><path
+       d="M32,17.969v-4l-4.781-1.992c-0.133-0.375-0.273-0.738-0.445-1.094l1.93-4.805L25.875,3.25   l-4.762,1.961c-0.363-0.176-0.734-0.324-1.117-0.461L17.969,0h-4l-1.977,4.734c-0.398,0.141-0.781,0.289-1.16,0.469l-4.754-1.91   L3.25,6.121l1.938,4.711C5,11.219,4.848,11.613,4.703,12.02L0,14.031v4l4.707,1.961c0.145,0.406,0.301,0.801,0.488,1.188   l-1.902,4.742l2.828,2.828l4.723-1.945c0.379,0.18,0.766,0.324,1.164,0.461L14.031,32h4l1.98-4.758   c0.379-0.141,0.754-0.289,1.113-0.461l4.797,1.922l2.828-2.828l-1.969-4.773c0.168-0.359,0.305-0.723,0.438-1.094L32,17.969z    M15.969,22c-3.312,0-6-2.688-6-6s2.688-6,6-6s6,2.688,6,6S19.281,22,15.969,22z"
+       style="fill:#333333;fill-opacity:1"
+       id="path2989" /></g></svg>
\ No newline at end of file

resources/icons/composing12.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="12"
+   height="12"
+   id="svg4992"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="composing12.svg">
+  <defs
+     id="defs4994">
+    <linearGradient
+       id="linearGradient4490">
+      <stop
+         style="stop-color:#ac4500;stop-opacity:1;"
+         offset="0"
+         id="stop4492" />
+      <stop
+         style="stop-color:#ff6600;stop-opacity:1;"
+         offset="1"
+         id="stop4494" />
+    </linearGradient>
+    <marker
+       inkscape:stockid="Arrow1Sstart"
+       orient="auto"
+       refY="0.0"
+       refX="0.0"
+       id="Arrow1Sstart"
+       style="overflow:visible">
+      <path
+         id="path3872"
+         d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt"
+         transform="scale(0.2) translate(6,0)" />
+    </marker>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="68.916667"
+     inkscape:cx="6.0665502"
+     inkscape:cy="6"
+     inkscape:current-layer="g4482"
+     showgrid="true"
+     inkscape:grid-bbox="true"
+     inkscape:document-units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1497"
+     inkscape:window-height="1037"
+     inkscape:window-x="67"
+     inkscape:window-y="13"
+     inkscape:window-maximized="0">
+    <inkscape:grid
+       type="xygrid"
+       id="grid5508"
+       empspacing="10"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true"
+       spacingx="0.5px"
+       spacingy="0.5px" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4997">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(0,-4)"
+     inkscape:groupmode="layer"
+     inkscape:label="3 dots green"
+     id="g4482"
+     style="display:inline">
+    <path
+       sodipodi:end="10.995574"
+       sodipodi:start="4.712389"
+       transform="matrix(2.2972223,0,0,2.2972223,-4.2666666,0.766666)"
+       d="m 2.7279322,3.5840389 c 0.2404142,0 0.4353084,0.1948941 0.4353084,0.4353083 -10e-8,0.2404142 -0.1948942,0.4353083 -0.4353084,0.4353083 -0.2404141,0 -0.4353083,-0.1948942 -0.4353083,-0.4353083 0,-0.2404141 0.1948941,-0.4353083 0.4353082,-0.4353083 l 1e-7,0.4353083 z"
+       sodipodi:ry="0.43530834"
+       sodipodi:rx="0.43530834"
+       sodipodi:cy="4.0193472"
+       sodipodi:cx="2.7279322"
+       id="path4484"
+       style="fill:#55d400;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       sodipodi:type="arc" />
+    <path
+       sodipodi:end="10.995574"
+       sodipodi:start="4.712389"
+       transform="matrix(2.2972223,0,0,2.2972223,-0.26666672,0.766666)"
+       d="m 2.7279322,3.5840389 c 0.2404142,0 0.4353084,0.1948941 0.4353084,0.4353083 -10e-8,0.2404142 -0.1948942,0.4353083 -0.4353084,0.4353083 -0.2404141,0 -0.4353083,-0.1948942 -0.4353083,-0.4353083 0,-0.2404141 0.1948941,-0.4353083 0.4353082,-0.4353083 l 1e-7,0.4353083 z"
+       sodipodi:ry="0.43530834"
+       sodipodi:rx="0.43530834"
+       sodipodi:cy="4.0193472"
+       sodipodi:cx="2.7279322"
+       id="path4486"
+       style="fill:#55d400;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       sodipodi:type="arc" />
+    <path
+       sodipodi:end="10.995574"
+       sodipodi:start="4.712389"
+       transform="matrix(2.2972223,0,0,2.2972223,3.7333333,0.766666)"
+       d="m 2.7279322,3.5840389 c 0.2404142,0 0.4353084,0.1948941 0.4353084,0.4353083 -10e-8,0.2404142 -0.1948942,0.4353083 -0.4353084,0.4353083 -0.2404141,0 -0.4353083,-0.1948942 -0.4353083,-0.4353083 0,-0.2404141 0.1948941,-0.4353083 0.4353082,-0.4353083 l 1e-7,0.4353083 z"
+       sodipodi:ry="0.43530834"
+       sodipodi:rx="0.43530834"
+       sodipodi:cy="4.0193472"
+       sodipodi:cx="2.7279322"
+       id="path4488"
+       style="fill:#55d400;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       sodipodi:type="arc" />
+  </g>
+</svg>

resources/icons/mic-off.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16px"
+   height="16px"
+   id="svg2985"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="mic-off.svg"
+   inkscape:export-filename="/home/dan/bell.png"
+   inkscape:export-xdpi="135"
+   inkscape:export-ydpi="135">
+  <defs
+     id="defs2987" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="32"
+     inkscape:cx="6.9456437"
+     inkscape:cy="8.2832916"
+     inkscape:current-layer="g4254"
+     showgrid="true"
+     inkscape:grid-bbox="true"
+     inkscape:document-units="px"
+     inkscape:window-width="1430"
+     inkscape:window-height="1064"
+     inkscape:window-x="143"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     showguides="true"
+     inkscape:guide-bbox="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid3151" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata2990">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     style="display:inline"
+     inkscape:label="Microphone off"
+     id="g4254"
+     inkscape:groupmode="layer">
+    <rect
+       ry="2.3988862"
+       rx="2.3988862"
+       y="1.2687498"
+       x="5.6011138"
+       height="9.28125"
+       width="4.7977724"
+       id="rect4256"
+       style="fill:#ff0000;fill-opacity:1;fill-rule:nonzero;stroke:#960000;stroke-width:0.69999999;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+    <path
+       sodipodi:nodetypes="csc"
+       inkscape:connector-curvature="0"
+       id="path4258"
+       d="m 11.959765,7.59375 c 0.0087,3.34375 -2.1384482,4.4875 -3.9506839,4.4875 -1.8122357,0 -3.9780665,-1.14375 -3.968843,-4.4875"
+       style="fill:none;stroke:#960000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
+    <rect
+       ry="0.48333335"
+       y="14.08125"
+       x="4.375"
+       height="1"
+       width="7.25"
+       id="rect4260"
+       style="fill:#960000;fill-opacity:1;stroke:none" />
+    <rect
+       transform="matrix(0,1,-1,0,0,0)"
+       ry="0.48333335"
+       y="-8.5"
+       x="12.01875"
+       height="1"
+       width="2.59375"
+       id="rect4262"
+       style="fill:#960000;fill-opacity:1;stroke:none;display:inline" />
+    <rect
+       style="fill:#760000;fill-opacity:1;fill-rule:nonzero;stroke:none;display:inline"
+       id="rect4264"
+       width="16.601494"
+       height="0.74136543"
+       x="3.0040095"
+       y="-0.46249801"
+       ry="0.37068272"
+       transform="matrix(0.70137037,0.71279703,-0.77523925,0.63166771,0,0)" />
+  </g>
+</svg>

resources/icons/mic-on.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16px"
+   height="16px"
+   id="svg2985"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="mic-on.svg"
+   inkscape:export-filename="/home/dan/bell.png"
+   inkscape:export-xdpi="135"
+   inkscape:export-ydpi="135">
+  <defs
+     id="defs2987" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="32"
+     inkscape:cx="6.0980505"
+     inkscape:cy="8.5877976"
+     inkscape:current-layer="layer3"
+     showgrid="true"
+     inkscape:grid-bbox="true"
+     inkscape:document-units="px"
+     inkscape:window-width="1430"
+     inkscape:window-height="1064"
+     inkscape:window-x="262"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:showpageshadow="true"
+     borderlayer="false"
+     showborder="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid3253"
+       empspacing="10"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true"
+       spacingx="0.5px"
+       spacingy="0.5px" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata2990">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="Microphone on"
+     style="display:inline">
+    <rect
+       style="fill:#505050;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.69999999;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       id="rect3003"
+       width="4.3000002"
+       height="8.8000002"
+       x="5.8499999"
+       y="1.3499998"
+       rx="2.1500001"
+       ry="2.2744994" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:0.94999999;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       d="m 11.959765,7.5375 c 0.0087,3.34375 -2.1384481,4.4875 -3.9506838,4.4875 -1.8122357,0 -3.9780665,-1.14375 -3.968843,-4.4875"
+       id="path3773"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="csc" />
+    <rect
+       style="fill:#000000;fill-opacity:1;stroke:none"
+       id="rect3821"
+       width="6.5"
+       height="1"
+       x="4.75"
+       y="14"
+       ry="0.48333335" />
+    <rect
+       style="fill:#000000;fill-opacity:1;stroke:none;display:inline"
+       id="rect3821-6"
+       width="3"
+       height="1"
+       x="12"
+       y="-8.4997644"
+       ry="0.48333335"
+       transform="matrix(0,1,-1,0,0,0)" />
+    <rect
+       transform="matrix(0.70470371,0.70950171,-0.77812826,0.62810541,0,0)"
+       ry="0.37242329"
+       y="-0.76523137"
+       x="2.5873456"
+       height="0.74484658"
+       width="16.662415"
+       id="rect4052-4-2"
+       style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;display:inline" />
+  </g>
+</svg>

resources/icons/pause.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16"
+   height="16"
+   id="svg4492"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="pause.svg">
+  <script
+     xlink:href=""
+     id="script4502" />
+  <defs
+     id="defs4494" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="44.312498"
+     inkscape:cx="8"
+     inkscape:cy="8.0000073"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:window-width="1299"
+     inkscape:window-height="919"
+     inkscape:window-x="180"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     showguides="true"
+     inkscape:guide-bbox="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4500"
+       empspacing="10"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true"
+       spacingy="0.5px"
+       spacingx="0.5px" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4497">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Pause"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1036.3622)"
+     style="display:inline">
+    <rect
+       style="fill:#303030;fill-opacity:1;stroke:#000000;stroke-width:0.74999994;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:0.23529412;stroke-dasharray:none;stroke-dashoffset:0"
+       id="rect4504"
+       width="2.55"
+       height="11.25"
+       x="3.9749999"
+       y="1038.7372"
+       ry="1.3392855"
+       rx="1.275" />
+    <rect
+       style="fill:#303030;fill-opacity:1;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:0.23529412;stroke-dasharray:none;stroke-dashoffset:0"
+       id="rect4504-2"
+       width="2.5500002"
+       height="11.25"
+       x="9.4750004"
+       y="1038.7372"
+       ry="1.3392856"
+       rx="1.2750001" />
+  </g>
+</svg>

resources/icons/paused.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16"
+   height="16"
+   id="svg4492"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="paused.svg">
+  <script
+     xlink:href=""
+     id="script4502" />
+  <defs
+     id="defs4494" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="44.3125"
+     inkscape:cx="8"
+     inkscape:cy="8"
+     inkscape:document-units="px"
+     inkscape:current-layer="g5135"
+     showgrid="true"
+     inkscape:window-width="1299"
+     inkscape:window-height="919"
+     inkscape:window-x="180"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     showguides="true"
+     inkscape:guide-bbox="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4500"
+       empspacing="10"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true"
+       spacingy="0.5px"
+       spacingx="0.5px" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4497">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(0,-1036.3622)"
+     id="g5135"
+     inkscape:groupmode="layer"
+     inkscape:label="Paused"
+     style="display:inline">
+    <rect
+       rx="1.275"
+       ry="1.3392855"
+       y="1038.7372"
+       x="3.9749999"
+       height="11.25"
+       width="2.55"
+       id="rect5137"
+       style="fill:#3d7fcb;fill-opacity:1;stroke:#6ab0ff;stroke-width:0.74999994;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
+    <rect
+       rx="1.2750001"
+       ry="1.3392856"
+       y="1038.7372"
+       x="9.4750004"
+       height="11.25"
+       width="2.5500002"
+       id="rect5139"
+       style="fill:#3d7fcb;fill-opacity:1;stroke:#6ab0ff;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
+  </g>
+</svg>

resources/icons/paused12.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="12"
+   height="12"
+   id="svg7529"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="paused12.svg">
+  <defs
+     id="defs7531" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="71.75"
+     inkscape:cx="6"
+     inkscape:cy="6"
+     inkscape:current-layer="g8675"
+     showgrid="true"
+     inkscape:grid-bbox="true"
+     inkscape:document-units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1665"
+     inkscape:window-height="1071"
+     inkscape:window-x="84"
+     inkscape:window-y="22"
+     inkscape:window-maximized="0">
+    <inkscape:grid
+       type="xygrid"
+       id="grid7537"
+       empspacing="10"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true"
+       spacingx="0.5px"
+       spacingy="0.5px" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7534">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(0,-4)"
+     inkscape:groupmode="layer"
+     inkscape:label="Paused"
+     id="g8675">
+    <rect
+       style="fill:#3d7fcb;fill-opacity:1;stroke:#69afff;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;display:inline"
+       id="rect8681"
+       width="2.0000002"
+       height="9.25"
+       x="2.625"
+       y="5.375"
+       ry="1.1011904"
+       rx="1.0000001" />
+    <rect
+       style="fill:#3d7fcb;fill-opacity:1;stroke:#69afff;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;display:inline"
+       id="rect8681-6"
+       width="2.0000002"
+       height="9.25"
+       x="7.375"
+       y="5.375"
+       ry="1.1011904"
+       rx="1.0000001" />
+  </g>
+</svg>

resources/icons/record.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16"
+   height="16"
+   id="svg7357"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="record.svg">
+  <defs
+     id="defs7359" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="44.4375"
+     inkscape:cx="8"
+     inkscape:cy="8"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:window-width="1301"
+     inkscape:window-height="921"
+     inkscape:window-x="179"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0">
+    <inkscape:grid
+       type="xygrid"
+       id="grid7365"
+       empspacing="10"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true"
+       spacingy="0.5px"
+       spacingx="0.5px" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7362">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Record"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1036.3622)"
+     style="display:inline">
+    <path
+       sodipodi:type="arc"
+       style="fill:#444444;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       id="path7367"
+       sodipodi:cx="7.5"
+       sodipodi:cy="8.5"
+       sodipodi:rx="5.5"
+       sodipodi:ry="5.5"
+       d="m 13,8.5 a 5.5,5.5 0 1 1 -11,0 5.5,5.5 0 1 1 11,0 z"
+       transform="translate(0.5,1035.8622)" />
+  </g>
+</svg>

resources/icons/recording.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16"
+   height="16"
+   id="svg7357"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="recording.svg">
+  <defs
+     id="defs7359" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="44.4375"
+     inkscape:cx="8"
+     inkscape:cy="8"
+     inkscape:document-units="px"
+     inkscape:current-layer="g7896"
+     showgrid="true"
+     inkscape:window-width="1301"
+     inkscape:window-height="921"
+     inkscape:window-x="179"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0">
+    <inkscape:grid
+       type="xygrid"
+       id="grid7365"
+       empspacing="10"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true"
+       spacingy="0.5px"
+       spacingx="0.5px" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7362">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(0,-1036.3622)"
+     id="g7896"
+     inkscape:groupmode="layer"
+     inkscape:label="Recording"
+     style="display:inline">
+    <path
+       transform="translate(0.5,1035.8622)"
+       d="M 13,8.5 C 13,11.537566 10.537566,14 7.5,14 4.4624339,14 2,11.537566 2,8.5 2,5.4624339 4.4624339,3 7.5,3 10.537566,3 13,5.4624339 13,8.5 z"
+       sodipodi:ry="5.5"
+       sodipodi:rx="5.5"
+       sodipodi:cy="8.5"
+       sodipodi:cx="7.5"
+       id="path7898"
+       style="fill:#ff0000;fill-opacity:1;fill-rule:nonzero;stroke:#800000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       sodipodi:type="arc" />
+  </g>
+</svg>

resources/icons/screen12.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="12"
+   height="12"
+   id="svg6921"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="screen12.svg">
+  <defs
+     id="defs6923" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="71.916667"
+     inkscape:cx="6"
+     inkscape:cy="6"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:grid-bbox="true"
+     inkscape:document-units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1667"
+     inkscape:window-height="1073"
+     inkscape:window-x="83"
+     inkscape:window-y="22"
+     inkscape:window-maximized="0">
+    <inkscape:grid
+       type="xygrid"
+       id="grid6929"
+       empspacing="10"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true"
+       spacingx="0.5px"
+       spacingy="0.5px" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata6926">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Screen"
+     inkscape:groupmode="layer"
+     transform="translate(0,-4)">
+    <rect
+       style="fill:#545454;fill-opacity:1;stroke:#333333;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
+       id="rect7463"
+       width="9"
+       height="6"
+       x="1.5"
+       y="5.5" />
+    <rect
+       style="fill:none;stroke:#333333;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       id="rect7465"
+       width="6"
+       height="0.15824917"
+       x="3"
+       y="14.341751" />
+    <rect
+       style="fill:#333333;fill-opacity:1;stroke:#333333;stroke-width:0.81199998;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       id="rect7465-2"
+       width="3.188"
+       height="1.1880001"
+       x="-14.594"
+       y="5.4060001"
+       transform="matrix(0,-1,1,0,0,0)" />
+  </g>
+</svg>

resources/icons/speaker12.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="12"
+   height="12"
+   id="svg4429"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="speaker12.svg">
+  <defs
+     id="defs4431" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="71.75"
+     inkscape:cx="6"
+     inkscape:cy="6"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:grid-bbox="true"
+     inkscape:document-units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1665"
+     inkscape:window-height="1071"
+     inkscape:window-x="84"
+     inkscape:window-y="24"
+     inkscape:window-maximized="0">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4437"
+       empspacing="10"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true"
+       spacingx="0.5px"
+       spacingy="0.5px" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4434">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Speaker"
+     inkscape:groupmode="layer"
+     transform="translate(0,-4)">
+    <path
+       style="fill:#333333;fill-opacity:1;stroke:#333333;stroke-opacity:1;stroke-linejoin:round;stroke-linecap:round"
+       d="m 9.5,5.5 0,9 -4,-2.5 -3,0 0,-4 3,0 z"
+       id="path4967"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccc" />
+  </g>
+</svg>

resources/tls/ca.crt

+-----BEGIN CERTIFICATE-----
+MIIDkzCCAvygAwIBAgIJAKePsA1UhBFVMA0GCSqGSIb3DQEBBQUAMIGOMQswCQYD
+VQQGEwJOTDEWMBQGA1UECBMNTm9vcmQtSG9sbGFuZDEQMA4GA1UEBxMHSGFhcmxl
+bTEUMBIGA1UEChMLQUctUHJvamVjdHMxFzAVBgNVBAMTDkFHLVByb2plY3RzIENB
+MSYwJAYJKoZIhvcNAQkBFhdzdXBwb3J0QGFnLXByb2pldGNzLmNvbTAeFw0xMDAy
+MDkxNjIxMTlaFw0yMDAyMDcxNjIxMTlaMIGOMQswCQYDVQQGEwJOTDEWMBQGA1UE
+CBMNTm9vcmQtSG9sbGFuZDEQMA4GA1UEBxMHSGFhcmxlbTEUMBIGA1UEChMLQUct
+UHJvamVjdHMxFzAVBgNVBAMTDkFHLVByb2plY3RzIENBMSYwJAYJKoZIhvcNAQkB
+FhdzdXBwb3J0QGFnLXByb2pldGNzLmNvbTCBnzANBgkqhkiG9w0BAQEFAAOBjQAw
+gYkCgYEA6af7n4QMy20iNv50HfQEP4wq93ewR6imgn2zUpnasV2+7K8wymOgDEwG
+QBSr7ZHkynMZHxA46kqRvzQDxYOdf4bJ9WprPTNemrT4rZKv49JApQemBeDc1c10
+s4NptgxbK4BbDab23ymmA1r3aOKFzIdFWeV/jyZPgiTqRHKAehECAwEAAaOB9jCB
+8zAdBgNVHQ4EFgQUlBjupMu+KuMqKkOPMyBY7817rxcwgcMGA1UdIwSBuzCBuIAU
+lBjupMu+KuMqKkOPMyBY7817rxehgZSkgZEwgY4xCzAJBgNVBAYTAk5MMRYwFAYD
+VQQIEw1Ob29yZC1Ib2xsYW5kMRAwDgYDVQQHEwdIYWFybGVtMRQwEgYDVQQKEwtB
+Ry1Qcm9qZWN0czEXMBUGA1UEAxMOQUctUHJvamVjdHMgQ0ExJjAkBgkqhkiG9w0B
+CQEWF3N1cHBvcnRAYWctcHJvamV0Y3MuY29tggkAp4+wDVSEEVUwDAYDVR0TBAUw
+AwEB/zANBgkqhkiG9w0BAQUFAAOBgQAbODfHcrcbS85kSrk+F16IiekD+DIcgVMZ
+eWdnZsNWvNKiy8D0M0lddkEgMV5fGruQeRMjBHWqhTDj6hJTSiQsfgvFhmmLOuWC
++wI9SdjMi1nYAB9TNb8QE3kDEVSnDoj/JdSGrHyaiNF6BOqjSAlHcsPTE1nJUpp3
+yQsllK/14w==
+-----END CERTIFICATE-----

resources/tls/default.crt

+-----BEGIN CERTIFICATE-----
+MIIFajCCBNOgAwIBAgIBDDANBgkqhkiG9w0BAQUFADCBjjELMAkGA1UEBhMCTkwx
+FjAUBgNVBAgTDU5vb3JkLUhvbGxhbmQxEDAOBgNVBAcTB0hhYXJsZW0xFDASBgNV
+BAoTC0FHLVByb2plY3RzMRcwFQYDVQQDEw5BRy1Qcm9qZWN0cyBDQTEmMCQGCSqG
+SIb3DQEJARYXc3VwcG9ydEBhZy1wcm9qZXRjcy5jb20wHhcNMTIwMjA2MTMxNTA3
+WhcNMjAwMjA3MTMxNTA3WjB3MQswCQYDVQQGEwJOTDEWMBQGA1UECBMNTm9vcmQt
+SG9sbGFuZDEQMA4GA1UEBxMHSGFhcmxlbTEUMBIGA1UEChMLQUcgUHJvamVjdHMx
+DjAMBgNVBAsTBUJsaW5rMRgwFgYDVQQDEw9ibGluay5sb2NhbGhvc3QwggIiMA0G
+CSqGSIb3DQEBAQUAA4ICDwAwggIKAoICAQC+Q2GMXNpZ+c+ej6pj7TdzZunDALrS
+9F/JJrDAbpoYzJfXAwvDvK5Q+oJ1zFQzdljeQkpwbuFCAL0mhLXo0HcXyaSEy82u
+RA4W3/sy7qLNBdysuk6QAJOSbhz4rZnvdJVpPXwm+F2l8Hl040g6QNuxmKvo2m3/
+UnbAePWDh7ejdvb7kbEUWYqRwSB9OZz0MxZLxvwQj5Wn2QG7ziADZUjLBvcbdSeh
+zYpHCsocVQy9Fpwv2XlpYMdgOtiBtiEq2TosacC+m5jqm6i6b3N0ZlN7GoEwhdUZ
+odFuQxcrE/SXhfE/jqRIAfxDL1Y2VQQ2NrHhC762PxNFp3w2DImKgmc4P0gHTDta
+UexHMLMbPCA3CVkb/Vuz1T3Ap6nmhI7xPtuGOjo/O2gUB6pxnkPR/mvRMykMa2Tn
+Htp30mAVJ2DgsyErFgBoSREXeIUZLMqN02ut1O2loxfqWd9G0h6CJ5QYACKGq7DI
+q61abw4NgFEL6IZjTC/BnKe+grB7x6bJ8trzFhmM/H+npTfwkd2Hnh/6hAOuToyl
+MmZxeLX+aMfb6RIoZDpude8dxVE1dgBiGLGj0d+HrsWrekOLQW1IBSnXoNpTWHCg
+QogCE/nE//bw0jYh3g7QtOEQ4FgYIeB7yWh54R+0PI6hroEqTJWbYPOLFH0YYGgQ
+QYAOW+PuDktSSQIDAQABo4IBaDCCAWQwCQYDVR0TBAIwADARBglghkgBhvhCAQEE
+BAMCBsAwMAYJYIZIAYb4QgENBCMWIUFHIFByb2plY3RzIEdlbmVyYXRlZCBDZXJ0
+aWZpY2F0ZTAdBgNVHQ4EFgQUIEtONpfmH0JKrJl2itAr8/Kio00wgcMGA1UdIwSB
+uzCBuIAUlBjupMu+KuMqKkOPMyBY7817rxehgZSkgZEwgY4xCzAJBgNVBAYTAk5M
+MRYwFAYDVQQIEw1Ob29yZC1Ib2xsYW5kMRAwDgYDVQQHEwdIYWFybGVtMRQwEgYD
+VQQKEwtBRy1Qcm9qZWN0czEXMBUGA1UEAxMOQUctUHJvamVjdHMgQ0ExJjAkBgkq
+hkiG9w0BCQEWF3N1cHBvcnRAYWctcHJvamV0Y3MuY29tggkAp4+wDVSEEVUwCQYD
+VR0SBAIwADAiBgNVHREEGzAZgRdzdXBwb3J0QGFnLXByb2plY3RzLmNvbTANBgkq
+hkiG9w0BAQUFAAOBgQDIrKDiykegpapXibjBisaMhE0E/WP/hqncKEO1IgVZRMVb
+mR29R2DinrBiqKOXE0YQQRAG4QJL6n+8OMXwnkJLGGofQCDMKMO9P5CDlImDPWvD
+ooRSAjg+y15ujyS2fp63+gW3o2uH9G8OkZ3+voSiZejbpFxnqb44S9COYzgdsA==
+-----END CERTIFICATE-----
+-----BEGIN RSA PRIVATE KEY-----
+MIIJKAIBAAKCAgEAvkNhjFzaWfnPno+qY+03c2bpwwC60vRfySawwG6aGMyX1wML
+w7yuUPqCdcxUM3ZY3kJKcG7hQgC9JoS16NB3F8mkhMvNrkQOFt/7Mu6izQXcrLpO
+kACTkm4c+K2Z73SVaT18JvhdpfB5dONIOkDbsZir6Npt/1J2wHj1g4e3o3b2+5Gx
+FFmKkcEgfTmc9DMWS8b8EI+Vp9kBu84gA2VIywb3G3Unoc2KRwrKHFUMvRacL9l5
+aWDHYDrYgbYhKtk6LGnAvpuY6puoum9zdGZTexqBMIXVGaHRbkMXKxP0l4XxP46k
+SAH8Qy9WNlUENjax4Qu+tj8TRad8NgyJioJnOD9IB0w7WlHsRzCzGzwgNwlZG/1b
+s9U9wKep5oSO8T7bhjo6PztoFAeqcZ5D0f5r0TMpDGtk5x7ad9JgFSdg4LMhKxYA
+aEkRF3iFGSzKjdNrrdTtpaMX6lnfRtIegieUGAAihquwyKutWm8ODYBRC+iGY0wv
+wZynvoKwe8emyfLa8xYZjPx/p6U38JHdh54f+oQDrk6MpTJmcXi1/mjH2+kSKGQ6
+bnXvHcVRNXYAYhixo9Hfh67Fq3pDi0FtSAUp16DaU1hwoEKIAhP5xP/28NI2Id4O
+0LThEOBYGCHge8loeeEftDyOoa6BKkyVm2DzixR9GGBoEEGADlvj7g5LUkkCAwEA
+AQKCAgEAvZtquDXEiEwywuKLPKAnVYMmzGWKyTYtyska9fqC6NnjK6vman86/IpZ
+vskM1GhJcd2AT4HATEVuOtegbU5qkLMrmAd+hv9dRyCZNo2ogkcoPp5AMrPQXOoN
+RynCMWbuiv1yH2f986OtdnYWAa+nANqT3y7m1b45h+BDU3vJ30ZsJhJv9UaymERt
+ez4SEy5iNswrYNmmm6ngV2e4cYnbPDFJyvw6rb2m4tt2xTtgwYOpzOmeXAzNRDIA
+l2uIrCnlFmOhaJKplovfX0Q4O7TJ1vF384I79xpTGt4TVaPCacpavCsLvpLz8YRY
+FzcsRlbFd+97dCVxsEWTvE1MOFNyRlv8V8XyzvCQWlqMH9ZpxP4nXxspOlMcLaBb
+diMcZYkQpvUZlUFU8exlbh2BPhu9Lbd2NkCWLTloPhZ9gEwNbhDMmDsDZrsmTvWm
+H8HA/rqZNh5/sxuosy9d9fgKBAr7FRxf8CgUOK0I6KcVfZ3gMNW8c3AgPsXZFXRM
+XYvffshXOFEDpiuwLiW0bnxXxgWaLkHbPjKNny3EUy8h0okPMN+caBxuBy95YPa4
+7sJm66p2xvQy/nHhSByEgALAT9461W7OS+QCMR4hVHw1krEe6GXfOTsU970AOLCb
+o2zGOPl7umolDBx5o71eJtUNmExJ0B7yyHKuWH5uUXlwgmcYWoECggEBAOmNsNZZ
+sQSVwuok3X0EWde1bZHB6ULkJbCnJS0RZht9ANIgR71vsxEaVgXHhamD/BZUz5T9
+bOSRW9F6e9GVGsMFfkTy8h2ep3jmNmFzCy0MxYT5/Hl7E55DLlHa0nfTJSCM0F+O
+cHcygM+CqyISFG3v2Lk8kEFN1djCOXVAH5ird9NXo1zffOs95Z6j0G45roLVg0zy
+UzhN2gkFpjHMXMuL1CDtPIkogelkFFs0yLF0TIzmw+iEIGBLmu5MI3f/10Sgxqjv
+Lnc55rFjEj/TtC9MmRIzMP8D2Z8m+bVJsFjslfKjWVJUdFrzI6SwoOBhz1Fm+DjK
+/viGPUxep5QGBlECggEBANCMlXz8Utj69OKg78sOwkUNYQ8TIryAJhrEF8XiCNBd
+YWGvydDpE0Hs/bhK5UxeCo0oCMXYfr+s4TJ6ln6/CaBe7uaGs/w55TGqydmKPMBX
+y1fHuPAef9kt8Fj5Kxw8KxSHMgHYrLN85LtQpgtcT48TQwR7SxPdOMX1EncZ4TWQ
+SrDVsdM/L6dsKA4IBCQoxpLetx70TFO94MGsZRNngBuYWmHX5je77QgrHhrS8cqK
+LGFMtuoUTVjkodPi/E0/H0K+bMYnRGkYV4Pl6nlre518JIxxsMjm/SdMCAuB0kHF
+IWekYNXokWJ9Qrh7IR6gil3pTFwAUVd/xOMQN8C5dnkCggEAQD/vbvhbn0RHy7v6
+hoLk6FeL3fY3YmR7Dd7ddkl8CoHX8PZaZf3NiB3znkFmPt0FQ2tvc7BH/ZUTakxE
+tcJMC2x+cR9Yhdd4gOTr/uD0KR+DUvKmhxDZs8cNfg0xqy8V3p9+T1tTCyeEkhGD
+XKsWnavGtia4FI8CDlBYGC5cwtYg764DTfBZYCm1+m9cToZlwK5WIZvkUu/v1F2O
+e9KZkJFV+Pzqk1zmaDtU8kZSE6dHy9dL+7IlafhCld2yQDfMk5+bJywtXzU5hoEX
+qyFlR0HONliI2Q7JFmRVe47bCYuEMKzJTMHZBJAwtQS2LSQbMWyfSphljh73zAOa
+HDmQEQKCAQBZI33Rylfu/nUlWPylok1PDoTp2JgEUhH3ZtFyd0alKQSyqFxuuvDM
+QOvBleGkXp3L78ywI/UpIE+xL8ybqDQJJAqg5fqQWH6qWAGmxftpix0TC/70Q1UK
+EySkIvxWOTGAuLibKW3H2h46IiKWwIIQ+X6vr7NLbkcR9cpKtfkY1+/U3cIANQW9
+XfFQ7gQ3IGaf6CoFRQ5KzOIAZhtdy+Np6BjZsVppgB20XBmmBXvrwltty0hzjPHy
+iObSljaZHd3SvWno2GfZM9pUOjWaaGKR0bodfYq+lFyoK0tU/8xK6GN61Tu+soVR
+v5CBIb/qQ1xg/5Lv0AL0j1wsYYYzDhKhAoIBAGF4HOd9lARjrPj26SncHiIdyYEE
+a41IKMkk3qsyOGazhsHTTwBpGqUNWG/ZlDisvytzM4/nJkWxjdudXgjSeXtp7QlX
+CSqADRUYFikue3OcZj/baZ+mY5mDFIP+M3fdYFitkkVuFrtNwDhDuIbN+5lpLasM
+6gufKwISlr06UIUW1r4YACvg3AvS9IVVirCFMJwex5xoffoeuFVJWj1N9E3KDRmT
+2lo7pjgJro/z8dWvXGwhYkGU/do+lWZiP2aHhhgg6x9iN1sQ+RQ5G4iGdeJSq8ZD
+JKnzIOwcR1ENPO1ufTpn4gbGGGB78GbfiFxvS8C134+dPfDQPI0OORbegLs=
+-----END RSA PRIVATE KEY-----