/*
  'Colourful-Enclosed' style for KMess.
  Copyright (C) 2006, Diederik van der Boor
  Copyright (c) 2005, Jess Hall

  Design based on 'Colourful enclosed' by Jess Hall
  http://www.kde-look.org/content/show.php?content=19968

  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, dt, dd
{
  margin:  0;
  padding: 0;
}



/**
 * Border effect.
 */
dl
{
  border: 1px solid grey;
  margin: 0 0 12px 0; /* margin bottom is 12px */
  background-color: #fff; /* for dark color schemes */
}



/*
 * message title colors.
 */

dt
{
  padding:  0 2px; /* left padding, right padding */
}

.incoming dt
{
  color:            #00008B;
  font-weight:      bold;
  background-color: #d8e0ff;
}

.outgoing dt
{
  color:            teal;
  font-weight:      bold;
  background-color: #c8ffd8;
}

.offlineIncoming dt
{
  color:            #6B10C6;
  font-weight:      bold;
  background-color: #EBE5FF;
}



/*
 * name in message title.
 */
dt span.name
{
  margin-right: 100px; /* avoid overlapping the time */
}

dt.rtl span.name
{
  margin-right: 0;
  margin-left:  100px;
}



/*
 * time in message title.
 */
dt span.time
{
  float:       right;
  display:     inline; /* typically for MSIE bugs */
  margin-left: 10px;
}

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



/*
 * message body.
 * add some spacing, color and the bottom line.
 */
dd
{
  padding: 0 15px; /* left and right 15px */
}



/*
 * other messages;
 * - application message (e.g. invitation)
 * - notification message (e.g. file transfer complete)
 * - system message (e.g. error, invitation not supported)
 */
div.application,
div.notification,
div.presence,
div.system
{
  margin: 10px 0 10px; /* top and bottom margin */
}

div.application
{
  color: blue;
}

div.presence
{
  color: gray;
}

div.notification
{
  color: purple;
}

div.system
{
  color:         red;
  padding:       3px 0;
  border-top:    1px solid red;
  border-bottom: 1px solid 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
{
  margin: 3em 2em 2em 2em;
  padding: 0.5em;
  border: 1px solid grey;
  color: purple;
  text-align: center;
}


/*
 * Style overrides for chat history messages
 */
.history {
  margin-bottom: 3em;
}
.history * {
  color: #444;
  background-color: transparent;
  border: 0;
}
