#media-magic {
    -moz-appearance: none;
    top: 200px;
    left: 200px;
    /* NOTE: height is hard-coded to 20px in flockMediaStream.js. */
    height: 20px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-bottom: 2px solid #cccccc;
}
  #media-magic > stack {
    width: 100%;
    -moz-box-align: stretch;
  }

#flockmagic-image {
    margin: 0 10px 0 0;
    list-style-image: url("chrome://flock/skin/services/common/mediamagic-icon.png");
}

/* BC: Placeholders incase we want to use buttons in the future */
#media-magic-background-container {
  background-image: url("chrome://flock/skin/services/common/mediabar-bg-mid.png");
  background-repeat: repeat-x;
  background-color: #000000;
  padding: 0;
  margin: 0;
  border: 0;
  width: 100%;
  -moz-box-align: start;
}
.pm-icon-bg-start {
  list-style-image: url("chrome://flock/skin/services/common/mediabar-bg-start.png");
}
.pm-bg-end {
  list-style-image: url("chrome://flock/skin/services/common/mediabar-bg-end.png");
}
#media-magic-outer-container {
  background-color: transparent;
  padding: 0;
  margin: 0;
  border: 0;
  width: 100%;
  -moz-box-align: center;
}

  #media-magic-inner-container {
    background-color: transparent;
    background-repeat: repeat-x;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    -moz-box-align: center;
  }

    #media-magic-inner-container > toolbarbutton,
    #media-magic-inner-container > toolbarbutton:hover {
      -moz-appearance: none;
      background: transparent url("chrome://flock/skin/services/common/flock-icon.png") top left no-repeat;
      border: none;
      padding: 0 0 5px 16px;
      margin: 0 5px 0 0;
      font-weight: bold;
      font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
      color: #DDDCDC;
      font-size: 11px;
      overflow: hidden;
      cursor: pointer;
    }
    #media-magic-inner-container > toolbarbutton:hover {
      color: #ffffff !important;
    }
    #media-magic-inner-container > toolbarbutton > label {
      font-weight: bold;
    }
    #flockmagic-view-button {
      width: 105px;
    }
    #flockmagic-view-button:hover {
      color: #FFFFFF;
    }
    #flockmagic-blog-button {
      width: 60px;
    }
    #flockmagic-mail-button {
      width: 70px;
    }


#flockmagic-close-button {
  margin-right: 5px;
  list-style-image: url(chrome://global/skin/icons/closetab.png);
  -moz-image-region: rect(0px 16px 16px 0px);
}
#flockmagic-close-button:hover {
  -moz-image-region: rect(0px 32px 16px 16px);
}
#flockmagic-close-button:hover:active {
  -moz-image-region: rect(0px 48px 16px 32px);
}