/**
 * Style rules for the MessageBuffer
 */

/**
 * the body defaults
 */
body {
  margin-left: 16px;
  margin-right: 16px;
}

/**
 * The table column formats
 */

div.Message {
  padding-bottom: 8px;
  clear:	  both;
  display:        block;
  padding-left: 8px;
}

div.Message:first-child {
  padding-top: 0px;
}

div.Message:last-child {
  padding-bottom: 0px;
}

div.BubbleSelf {
   -moz-border-radius: 10px;
  background-color: Black;
  color:#5E0000;
  border-style:ridge;
  border-width: 1px;
  border-right-width: thick;
  border-bottom-width: 3px;
  border-bottom-color: #5E0000;
  border-right-color: #5E0000;
  border-top-width: 0px;
  border-left-width: 0px;
  margin-left: 0px;
  margin-right: 0px;
  vertical-align: middle;
  padding: 4px 8px;

  display: inline-block;
  width: auto;
  max-width: 616px;
  min-height: 56px;
  /* overflow: hidden; this bugs mouse events. see bug #123077 */
}

div.BubbleOther {
 -moz-border-radius: 10px;
  background-color: Black;
  color:#5E0000;
  border-style:ridge;
  border-width: 1px;
  border-right-width: thick;
  border-bottom-width: 3px;
  border-bottom-color: #5E0000;
  border-right-color: #5E0000;
  border-top-width: 0px;
  border-left-width: 0px;
  margin-left: 0px;
  margin-right: 0px;
  vertical-align: middle;
  padding: 4px 8px;

  display: inline-block;
  width: auto;
  max-width: 616px;
  min-height: 56px;
  /* overflow: hidden; this bugs mouse events. see bug #123077 */
}

div.BubbleSpacer {
  padding: 0px;
  margin: 0px;
  vertical-align: middle;
  display: table-cell;
  width: 664px;
  max-width: 664px;
  height: 52px;
}

div.BubbleSelfClicked {
  -moz-border-radius: 6px ;
  border-style: ridge;
  border-width: 5px;
  border-color: #000000;

  margin-left: 0px;
  margin-right: 0px;
  vertical-align: middle;
  padding: 4px 8px;

  display: inline-block;
  width: 664px;
  min-height: 56px;
 /* overflow: hidden; this bugs mouse events. see bug #123077 */
}


div.BubbleOtherClicked {
  -moz-border-radius: 6px ;
  border-style: ridge;
  border-width: 5px;
  border-color: #000000;
  text-shadow: 0.1em 0.1em #000;
  vertical-align: middle;
  padding: 4px 8px;

  display: inline-block;
  width: 664px;
  min-height: 56px;
  /* overflow: hidden; this bugs mouse events. see bug #123077 */
}

/**
 * Others' Avatars
 *
 * This needs a "drop down" shadow, but no idea if that can be done
 *Adele: please note that this drop down shadow might be subjected to change
 *I've talked about it with Vilja who's in charge of address book layout
 *and we might change it so that it's a double border colour to indicate
 *that the avatar is clickable. drop shawdow doesn't seem to work with
 *dark backgrounds unless it's a light colour drop shadow.
 *PLEASE tell me if it's difficult to implement the drop shadow.
 * Looks like drop shadow is dropped from ui specs. And bug 139130 made me
 *remove the space for it anyway.
 */

div.Avatar {
  width: 60px;
  display: inline-block;
  vertical-align: top;
}

.MessageAvatar {
  width: 60px;
  height:60px;
  outline-style: solid;
  outline-width: 1px;
  -moz-outline-radius: 6px;
}

img.MessagePresence {
  vertical-align: middle;
  width: 16px;
  height: 16px;
}

/**
 * the Name field
 */
span.MessageNameField {
  word-wrap: break-word;
  vertical-align: middle;
}

/**
 * the Text field
 */
span.MessageText {
  text-align: left;
  vertical-align: middle;
  word-wrap: break-word;
}

/**
 * the TimeStamp default rules
 */
div.MessageRight {
  float: right;
  padding-left: 20x;
  white-space: nowrap;
  text-align: right;
  display: inline-block;
}

img.MessageBusinessCardImg {
  vertical-align: middle;
  padding-right: 4px;
}

img.MessageStatusImg {
  vertical-align: middle;
  padding-right: 8px;
}

.MessagingWidgetsSmiley {
  height: 24px;
  width: 24px;
}