/**
 * Style rules for the MessageBuffer
 */

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

/**
 * The table column formats
 */

div.Message {

  font-size: 30px;

  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 {
  
  text-shadow:grey 3px 2px 5px;

  opacity: 1;

  position: relative;
  z-index: 2;
 

  -moz-border-radius: 8px;
  border-style: solid;
  border-width: 1px;
  
  margin-left: 0px;
  margin-right: 0px;
  vertical-align: middle;
  padding: 4px 8px;

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

div.BubbleOther {
  
  background: #282828;
  text-shadow:black 3px 2px 5px;

  opacity: 1;

  position: relative;
  z-index: 2;

  -moz-border-radius: 8px;
  border-style: solid;
  border-width: 1px;
  
  margin-left: 70px;
  margin-right: 0px;
  vertical-align: middle;
  padding: 4px 8px;

  display: inline-block;
  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 {

  text-shadow:grey 3px 2px 5px;

  opacity: 1;  

  position: relative;
  z-index: 2;

  -moz-border-radius: 8px;
  border-style: solid;
  border-width: 1px;

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

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


div.BubbleOtherClicked {
  -moz-border-radius: 8px;
  border-style: solid;
  border-width: 1px;
  text-shadow: 0.1em 0.1em #000;

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

  display: inline-block;
  width: 616px;
  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: 64px;
  display: inline-block;
  vertical-align: middle;
}

.MessageAvatar {
  width: 64px;
  height:64px;
  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;
}

span.MessageTextSelf {
  text-align: left;
  vertical-align: middle;
  color: #FFFFFF;
  word-wrap: break-word;
}

span.MessageTextOther {
  text-align: left;
  vertical-align: middle;
  color:blue;
  word-wrap: break-word;
}

/**
 * the TimeStamp default rules
 */
div.MessageRight {
  float: right;
  padding-left: 16px;
  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;
}