/**
 *  This file is part of devMX TS3 Webviewer Lite.
 *  Copyright (C) 2012  Maximilian Narr
 *
 *  devMX Webviewer Lite is free software: you can redistribute it and/or modify
 *  it under the terms of the GNU General Public License as published by
 *  the Free Software Foundation, either version 3 of the License, or
 *  (at your option) any later version.
 *
 *  TeamSpeak3 Webviewer is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
 *
 *  You should have received a copy of the GNU General Public License
 *  along with devMX TS3 Webviewer Lite.  If not, see <http://www.gnu.org/licenses/>.
 */

/* imports~ */
@import url('https://fonts.googleapis.com/css?family=Titillium+Web:300,400');

.devmx-webviewer
{
    font-family: 'Titillium Web', sans-serif; /* Updated font-family */
    font-size: 14px;
    white-space: nowrap;
    width: 100%;
    line-height: 1;
}

.devmx-webviewer a,
.devmx-webviewer * a
{
    cursor: pointer;
    text-decoration: inherit;
    color: #e5e7eb;
}

/* Servername */
.devmx-webviewer .servername,
.devmx-webviewer * .servername
{
    margin-left: 3px;
}

/* General */
.devmx-webviewer .channel,
.devmx-webviewer * .channel,
.devmx-webviewer .client,
.devmx-webviewer *.client
{
    margin-left: 16px;
    margin-top: 1px;
    color: #e5e7eb;
}

.devmx-webviewer span.label,
.devmx-webviewer * span.label
{
    margin-left: 3px;
}

/* General image */
.devmx-webviewer .ts-image,
.devmx-webviewer * .ts-image
{
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
}

/* Left aligned image */
.devmx-webviewer .image-left,
.devmx-webviewer * .image-left
{
    float: left;
}

/* Right aligned image */
.devmx-webviewer .image-right,
.devmx-webviewer * .image-right
{
    float: right;
    margin-left: 3px;
}

/* Channels */
/* normal channel */
.devmx-webviewer .channel-normal,
.devmx-webviewer * .channel-normal
{
    background-image: url("../i/channel-normal.png");
}

/* Full channel */
.devmx-webviewer .channel-full,
.devmx-webviewer * .channel-full
{
    background-image: url("../i/channel-full.png");
}

/* Channel with password (channel Icon) */
.devmx-webviewer .channel-password,
.devmx-webviewer * .channel-password
{
    background-image: url("../i/channel-password.png");
}

/* Channel with password (Lock icon) */
.devmx-webviewer .channel-password-right,
.devmx-webviewer * .channel-password-right
{
    background-image: url("../i/channel-password-right.png"); 
}

/* Channel with 48khz codec */
.devmx-webviewer .channel-48khz,
.devmx-webviewer * .channel-48khz
{
    background-image: url("../i/channel-48khz.png");
}

/* Server image */
.devmx-webviewer .server-image,
.devmx-webviewer * .server-image
{
    background-image: url("../i/server.png");
}

/* Clients */
/* normal client */
.devmx-webviewer .client-normal,
.devmx-webviewer * .client-normal
{
    background-image: url("../i/client-normal.png");
}

/* talking client */
.devmx-webviewer .client-talking,
.devmx-webviewer * .client-talking
{
    background-image: url("../i/client-talking.png");
}

/* channelcommander */
.devmx-webviewer .client-channel-commander,
.devmx-webviewer * .client-channel-commander
{
    background-image: url("../i/client-channel-commander.png");
}

/* talking channelcommander */
.devmx-webviewer .client-channel-commander-talking,
.devmx-webviewer * .client-channel-commander-talking
{
    background-image: url("../i/client-channel-commander-talking.png");
}

/* mic muted client */
.devmx-webviewer .client-input-muted,
.devmx-webviewer * .client-input-muted
{
    background-image: url("../i/input-muted.png");
}

/* speaker muted client */
.devmx-webviewer .client-output-muted,
.devmx-webviewer * .client-output-muted
{
    background-image: url("../i/output-muted.png");
}

/* hardware mic muted client */
.devmx-webviewer .client-input-muted-hardware,
.devmx-webviewer * .client-input-muted-hardware
{
    background-image: url("../i/hardware-input-muted.png");
}

/* hardware speaker muted client */
.devmx-webviewer .client-output-muted-hardware,
.devmx-webviewer * .client-output-muted-hardware
{
    background-image: url("../i/hardware-output-muted.png");
}

/* away client */
.devmx-webviewer .client-away,
.devmx-webviewer * .client-away
{
    background-image: url("../i/client-away.png");
}

/* Client with priority speaker */
.devmx-webviewer .client-priority-speaker,
.devmx-webviewer * .client-priority-speaker
{
    background-image: url("../i/client-priority-speaker.png");
}

/* Client with granted talkpower */
.devmx-webviewer * .client-talkpower-granted,
.devmx-webviewer * .client-talkpower-granted
{
    background-image: url("../i/client-talkpower-granted.png");
}

.devmx-webviewer .client-query,
.devmx-webviewer * .client-query
{
    background-image: url("../i/client-query.png");
}

/* Spacer */
/* General */
.devmx-webviewer p.spacer,
.devmx-webviewer * p.spacer
{
    margin: 0px;
}

/* right spacer */
.devmx-webviewer .spacer-right,
.devmx-webviewer * .spacer-right
{
    text-align: right;
}

/* left spacer */
.devmx-webviewer .spacer-left,
.devmx-webviewer * .spacer-left
{
    text-align: left;
}

/* center spacer */
.devmx-webviewer .spacer-center,
.devmx-webviewer * .spacer-center
{
    text-align: center;
}

/* ___ */
.devmx-webviewer .spacer-line,
.devmx-webviewer * .spacer-line
{
    background: url(../i/linie.png) repeat-x;
}

/* --- */
.devmx-webviewer .spacer-dash,
.devmx-webviewer * .spacer-dash
{
    background: url(../i/bs.png) repeat-x;
}

/* -.- */
.devmx-webviewer .spacer-line-point,
.devmx-webviewer * .spacer-line-point
{
    background: url(../i/bspunkt.png) repeat-x;
}

/* -.. */
.devmx-webviewer .spacer-line-double-point,
.devmx-webviewer * .spacer-line-double-point
{
    background: url(../i/bsdpunkt.png) repeat-x;
}

/* ... */
.devmx-webviewer .spacer-point,
.devmx-webviewer * .spacer-point
{
    background: url(../i/punkt.png) repeat-x;
}

/* repeat spacer */
.devmx-webviewer .spacer-overflow,
.devmx-webviewer * .spacer-overflow
{
    width: inherit;
    overflow: hidden;
}