/*
  'Efficient' style for KMess.
  Copyright (C) 2006, Diederik van der Boor
  Copyright (c) 2005, Cies Breijs

  Design based on 'Efficient' by Cies Breijs
  http://www.kde-look.org/content/show.php?content=26318

  This program 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 2
  of the License, or (at your option) any later version.

  This program 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 this program; if not, write to the Free Software
  Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA
*/



/*
 * the incoming and outgoing messages are implemented as definition-list (<dl>).
 * each message type has a different background/border color.
 *
 * the header is added to the <dt> tag, the message body to the <dd> tag.
 * this is easy to format with css, and easy to read without css markup.
 */


/*
 * reset some default margins
 */
dl
{
  margin: 0 0 2px 0; /* set margin bottom */
}

dt, dd
{
  margin:   0;
  padding:  0;
}



/*
 * message colors.
 */
.incoming dl
{
  background-color: #F7F3F3;
}

.outgoing dl
{
  background-color: #F4F4FB;
}

.offlineIncoming dl
{
  background-color: #FFFBFB;
}



/*
 * message title colors
 */
.incoming dt
{
  color:       #A82F2F;
  font-weight: bold;
}

.outgoing dt
{
  color:       #16569E;
  font-weight: bold;
}

.offlineIncoming dt
{
  color:       #C83838;
  font-weight: bold;
}




/*
 * column effect
 */
.incoming dt,
.outgoing dt,
.offlineIncoming dt
{
  float:      left;
  min-width:  7em;

  /* to enforce a fixed width:
  width:       7em;
  white-space: nowrap;
  overflow:    hidden;
  */
}

.rtl .incoming dt,
.rtl .outgoing dt,
.rtl .offlineIncoming dt
{
  /* reverse for right-to-left */
  float: right;
}

.incoming dd,
.outgoing dd,
.offlineIncoming dd
{
  /* for alignment of lines under the float
     using padding instead of margin to the messagegroup border also appears below the name */
  padding-left: 7em;
}

.rtl .incoming dd,
.rtl .outgoing dd,
.rtl .offlineIncoming dd
{
  padding-left:  0;
  padding-right: 7em;
}

dl
{
  position: relative;
  /* new messages should appear below the float */
  clear: both;
}


div.application,
div.notification,
div.presence,
div.system
{
  margin-left: 7em;
}



/*
 * name in message title.
 */
dt span.name
{
  display:    block;
  text-align: right;

  padding-left:  3px;
  padding-right: 3px;
}



/*
 * time in message title and other messages.
 */
span.time
{
  float:       right;
  display:     inline; /* typically for MSIE bugs */
  color:       #AAAAAA;
  font-size:   6pt;

  /* some margins to fix most ugly stuff when resizing */
  margin-left:   5px;
  margin-bottom: 1ex;
}

.rtl span.time
{
  float:        left;
  margin-left:  0;
  margin-right: 5px;
}


/*
 * grouped messages splitter effect
 */
.messagegroup dd.first-child,
.messagegroup dd.middle-child
{
  border-bottom: 2px dotted white;
}



/*
 * other messages;
 * - application message (e.g. invitation)
 * - notification message (e.g. file transfer complete)
 * - system message (e.g. error, invitation not supported)
 */
div.application
{
  color: blue;
}

div.presence
{
  color: gray;
}

div.notification
{
  color: purple;
}

div.system
{
  color: red;
}

span.filename {
  color: blue;
}

span.failedFilename,
div.notification .filename {
  color: red;
}



/**
 * Draw a border arround emoticon placeholders.
 */
img.customEmoticonPlaceholder
{
  border: 1px dotted #ccc;
}



/*
 * fix alignment of emoticons
 */
img.standardEmoticon,
img.customEmoticon,
img.customEmoticonPlaceholder
{
  vertical-align: top;
}



/*
 * Separator for the various chats within HTML files
 */
div.conversation
{
  padding: 0;
  margin-left: 6em;
  margin-top: 3em;
  margin-bottom: 1.5em;
  font-size: larger;
  color: purple;
}
