/*
 * BEGIN FLOCK GPL
 *
 * Copyright Flock Inc. 2005-2009
 * http://flock.com
 *
 * This file may be used under the terms of the
 * GNU General Public License Version 2 or later (the "GPL"),
 * http://www.gnu.org/licenses/gpl.html
 *
 * Software distributed under the License is distributed on an "AS IS" basis,
 * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
 * for the specific language governing rights and limitations under the
 * License.
 *
 * END FLOCK GPL
 */

media[type=image] { 
    -moz-binding: url("chrome://flock/content/photo/photo.xml#photo"); 
    border: solid 1px white;
    cursor: pointer;
    border: 1px solid  #CCCCCC;
    background-color: transparent;
    background-image: none;
    margin: 2px;
    max-width: 75px;
    max-height: 75px;
}

#photo-drawer-size {
  list-style-image: url("chrome://flock/skin/photo/mediaBarMatrix.png");
  -moz-image-region: rect(0px 50px 24px 0px);
}

#photo-drawer-size:hover {
  -moz-image-region: rect(50px 50px 74px 0px);
}

#photo-drawer-size:active,
#photo-drawer-size:hover:active {
  -moz-image-region: rect(100px 50px 124px 0px);
}

/* BC: Checked means 'big' */
#photo-drawer-size[checked="true"] {
  -moz-image-region: rect(0px 100px 24px 50px);
  /*BC: There is a background-image added when checked */
  background-image: none;
  /*BC: There is a background color on the mac */
  background-color: transparent;
}

#photo-drawer-size[checked="true"]:hover {
  -moz-image-region: rect(50px 100px 74px 50px);
}

#photo-drawer-size[checked="true"]:active,
#photo-drawer-size[checked="true"]:hover:active {
  -moz-image-region: rect(100px 100px 124px 50px);
}

#photo-drawer-size[disabled="true"] {
  -moz-image-region: rect(200px 50px 224px 0px);
}

#mediabar[advControls="off"] #photo-mode-button,
#mediabar[advControls="off"] #photo-drawer-size,
#mediabar[advControls="off"] #adv-controls-spacer {
  display: none;
}

#mediabar[mode="consume"] #photo-mode-button {
  list-style-image: url("chrome://flock/skin/photo/mediaBarMatrix.png");
  -moz-image-region: rect(0px 200px 24px 150px);
}

#mediabar[mode="consume"] #photo-mode-button:hover {
  -moz-image-region: rect(50px 200px 74px 150px);
}

#mediabar[mode="consume"] #photo-mode-button:active,
#mediabar[mode="consume"] #photo-mode-button:hover:active {
  -moz-image-region: rect(100px 200px 124px 150px);
}

/* BC: Gotcha, make sure you redefine the list-style-image for a mode change */
#mediabar[mode="interact"] #photo-mode-button {
  list-style-image: url("chrome://flock/skin/photo/mediaBarMatrix.png");
  -moz-image-region: rect(0px 150px 24px 100px);
  background-image: none;
}

#mediabar[mode="interact"] #photo-mode-button:hover {
  -moz-image-region: rect(50px 150px 74px 100px);
}

#mediabar[mode="interact"] #photo-mode-button:active,
#mediabar[mode="interact"] #photo-mode-button:hover:active {
  -moz-image-region: rect(100px 150px 124px 100px);
}

#photo-mode-button[disabled="true"] {
  -moz-image-region: rect(200px 50px 224px 0px);
}



#mediabar-slideybox {
  height: 115px;
}


#mediabar[photoSizeLarge] .photoImage {
    max-width: 150px;
    max-height: 150px;	
}

#mediabar #mediabar-slideybox vbox[anonid="mainscrollboxall"]{
  -moz-box-pack: center;
}

#mediabar[mode="consume"] #mediabar-slideybox vbox[anonid="mainscrollboxall"]{
  padding-bottom: 0px;
}

#mediabar[mode="interact"] #mediabar-slideybox vbox[anonid="mainscrollboxall"]{
  padding-bottom: 4px;
}

#mediabar[mode="consume"][photoSizeLarge] vbox[anonid="mainscrollboxall"]{
  padding-bottom: 26px;
}

#mediabar[mode="interact"][photoSizeLarge] vbox[anonid="mainscrollboxall"]{
  padding-bottom: 16px;
}

.media-drawer-tab-extras {
  display: none;
}

.drawer-tab[selected="true"] .media-drawer-tab-extras {
  display: -moz-box;
}

#mediabar-close {
  margin: 2px 0 0 2px !important;
  -moz-appearance: none;
  padding: 0 !important;
  list-style-image: url("chrome://flock/skin/common/closeHelpMatrix.png");
  border: 0;
  -moz-image-region: rect(0px 16px 16px 0px);
}

#mediabar-close:hover {
  -moz-image-region: rect(18px 16px 34px 0px);
}

#mediabar-close:hover:active {
  -moz-image-region: rect(36px 16px 52px 0px);
}

#mediabar-location[location="top"] {
  margin: 0 5px 0 0 !important;
  -moz-appearance: none;
  padding: 0 !important;
  list-style-image: url("chrome://flock/skin/photo/mediabarbottom.png");
  border: 0;

}

#mediabar-location[location="bottom"] {
  margin: 0 5px 0 0 !important;
  -moz-appearance: none;
  padding: 0 !important;
  list-style-image: url("chrome://flock/skin/photo/mediabartop.png");
  border: 0;
  
}


#mediabar[hasUnseenMedia="true"] #favChannelMenu {
  font-weight: bold
}

/* #mediabar #allNewMedia, */
#mediabar #clearAllNewMedia {
  display: none;
}

/*
#mediabar[hasUnseenMedia="true"] #allNewMedia
{
  display: -moz-box;
}
*/

#mediabar[newMediaPreview="true"] #clearAllNewMedia {
  display: -moz-box;
}

/*
#mediabar[newMediaPreview="true"] #allNewMedia
{
  display: none !important;
}
*/

/*************************
 * toolbarbutton styles
 *************************/
 
.drawer-extras toolbarbutton {
  margin: 0px 1px 0px 1px;
  padding: 0px;
  border: 0px;
  -moz-appearance: none !important;
}
.drawer-extras toolbarbutton:active, 
.drawer-extras toolbarbutton:hover:active {
  margin: 0px 1px 0px 1px;
  padding: 0px !important;
  border: 0px;
}

#photo-drawer-size {
  -moz-appearance: none;
  padding: 0px !important;
  border: 0px !important;
}

#mediabar-stream-back {
  list-style-image: url("chrome://flock/skin/photo/mediaBarMatrix.png");
  -moz-image-region: rect(0px 624px 24px 600px);
  -moz-appearance: none;
  border: none;
  padding: 0px;
}
#mediabar-stream-back:hover {
  -moz-image-region: rect(50px 624px 74px 600px);
}
#mediabar-stream-back:active,
#mediabar-stream-back:hover:active {
  -moz-image-region: rect(100px 624px 124px 600px);
}
#mediabar-stream-back[disabled="true"],
#mediabar-stream-back[disabled="true"]:active {
  list-style-image: url("chrome://flock/skin/photo/mediaBarMatrix.png");
  -moz-image-region: rect(150px 624px 174px 600px);
}


#mediabar-stream-forward {
  list-style-image: url("chrome://flock/skin/photo/mediaBarMatrix.png");
  -moz-image-region: rect(0px 674px 24px 650px);
  -moz-appearance: none;
  border: none;
  padding: 0px;
}
#mediabar-stream-forward:hover {
  list-style-image: url("chrome://flock/skin/photo/mediaBarMatrix.png");
  -moz-image-region: rect(50px 674px 74px 650px);
}
#mediabar-stream-forward:active,
#mediabar-stream-forward:hover:active {
  list-style-image: url("chrome://flock/skin/photo/mediaBarMatrix.png");
  -moz-image-region: rect(100px 674px 124px 650px);
}
#mediabar-stream-forward[disabled="true"],
#mediabar-stream-forward[disabled="true"]:active {
  list-style-image: url("chrome://flock/skin/photo/mediaBarMatrix.png");
  -moz-image-region: rect(150px 674px 174px 650px);
}

#mediabar-refresh {
  list-style-image: url("chrome://flock/skin/photo/mediaBarMatrix.png");
  -moz-image-region: rect(0px 574px 24px 550px);
  -moz-appearance: none;
  border: none;
  padding: 0px;
}
#mediabar-refresh:hover {
  list-style-image: url("chrome://flock/skin/photo/mediaBarMatrix.png");
  -moz-image-region: rect(50px 574px 74px 550px);
}
#mediabar-refresh:active,
#mediabar-refresh:hover:active {
  list-style-image: url("chrome://flock/skin/photo/mediaBarMatrix.png");
  -moz-image-region: rect(100px 574px 124px 550px);
}
#mediabar-refresh[disabled="true"] {
  list-style-image: url("chrome://flock/skin/photo/mediaBarMatrix.png");
  -moz-image-region: rect(150px 574px 174px 550px);
}


#mediabar-watch {
  list-style-image: url("chrome://flock/skin/photo/mediaBarStarMatrix.png");
  -moz-image-region: rect(0px 25px 25px 0px);
  -moz-appearance: none;
  border: none;
  padding: 0px;
  margin: 0px 7px 0px 2px;
}
#mediabar-watch:hover {
  -moz-image-region: rect(0px 25px 25px 0px);
}
#mediabar-watch:active,
#mediabar-watch:hover:active {
  -moz-image-region: rect(50px 25px 75px 0px);
}
#mediabar-watch[disabled="true"] {
  -moz-image-region: rect(200px 25px 225px 0px);
}
#mediabar-watch[disabled="true"]:active {
  -moz-image-region: rect(200px 25px 225px 0px);
}
#mediabar-watch[checked="true"] {
  background: none !important;
  padding: 0px !important;
  -moz-image-region: rect(100px 25px 125px 0px);
}
#mediabar-watch[checked="true"]:hover {
  -moz-image-region: rect(100px 25px 125px 0px);
}
#mediabar-watch[checked="true"]:active,
#mediabar-watch[checked="true"]:hover:active {
  -moz-image-region: rect(150px 25px 175px 0px);
}

#mediabar-album {
    list-style-image: none;
    /* -moz-image-region: rect(0px 16px 16px 0px); */
    -moz-appearance: none;
    border: none;
    padding: 0 !important;
	-moz-box-align: center;
	-moz-box-pack: center;
}

#mediabar-album .toolbarbutton-text {
  padding-left: 4px !important;
  color: white;
}

#mediabar-nowviewing-label {
  margin-left: 4px;
}

#mediabar-viewing-label {
  margin-left: 0px;
  font-weight: bold;
}

#current-stream-icon {
  width: 16px;
  height: 16px;
}

#mediabar-search-container {
  background-image: url("chrome://flock/skin/photo/mediabar-search-end.png");
  background-repeat: no-repeat;
  background-position: top left;
  width: 182px;
  -moz-box-pack: start;
  -moz-box-align: center;
  height: 24px;
  padding-left: 13px; /* BC: This will allow the search end to show */
  padding-right: 7px; /* BC: This is to pad the favicon */
}
  #mediabar-search-button {
    background-image: url("chrome://flock/skin/photo/mediabar-search-bg.png");
    background-repeat: repeat-x;
    height: 24px;
    -moz-appearance: none;
    border: 0px;
    margin-left: -2px;
    margin: 0px;
  }
    
    #mediabar-search-container #mediabar-search-textbox{
      background-image: url("chrome://flock/skin/photo/mediabar-search-bg.png");
      background-repeat: repeat-x;
      background-color: transparent;
      border: 0px !important;
      margin: 0px;
      padding: 6px 0px 0px 5px;
      font-size: 10px;
      -moz-appearance: none;
    }
    #mediabar-search-go-button {
      background-image: url("chrome://flock/skin/photo/mediabar-search-button.png");
      background-repeat: no-repeat;
      width: 32px;
      border: 0px !important;
      margin: 0px;
      -moz-appearance: none;
    }  
      #mediabar-search-go-button > label{
        color: #FFFFFF;
        font-weight: bold;
      }
    #mediabar-search-go-button:hover {
      background-image: url("chrome://flock/skin/photo/mediabar-search-button-hover.png");
      background-repeat: no-repeat;
      border: 0px !important;
      margin: 0px;
      -moz-appearance: none;
    }  

    #mediabar-search-go-button:active,
    #mediabar-search-go-button:hover:active {
      background-image: url("chrome://flock/skin/photo/mediabar-search-button-active.png");
      background-repeat: no-repeat;
      border: 0px !important;
      margin: 0px;
      -moz-appearance: none;
    }  

/* BC: still used? */
#mediabar-search-container textbox{
  background-image: url("chrome://flock/skin/photo/mediabar-search-bg.png");
  background-repeat: repeat-x;
  border: 0px !important;
  margin: 1px 0px 0px 3px;
  padding: 0px;
  -moz-appearance: none;
}

/* BC: still used? */
#mediabar-search-textbox[empty="true"] {
  color: graytext;
}

#mediabar-album-label {
  -moz-box-pack: center;
  font-weight: bold;
  color: #FFFFFF;
}

#mediabar-channels.channel-change-button {
  margin-right: 15px;
}

#mediabar-album,
.channel-change-button,
#clearAllNewMedia {
  border: 0;
  -moz-appearance: none;
  padding: 0;
  -moz-box-align: stretch;
  margin: 0px 4px 0px 0px;
}

.channel-change-button .toolbarbutton-menu-dropmarker,
#clearAllNewMedia .toolbarbutton-menu-dropmarker {
  padding: 0 !important;
}

#mediabar-album .toolbarbutton-icon,
.channel-change-button .toolbarbutton-icon,
#clearAllNewMedia .clear-all-left-edge {
  list-style-image: url("chrome://flock/skin/photo/flockButtonL.png");
  margin: 0;
  padding: 0;
}

#mediabar-album:hover .toolbarbutton-icon,
.channel-change-button:hover .toolbarbutton-icon,
#clearAllNewMedia:hover .clear-all-left-edge {
  list-style-image: url("chrome://flock/skin/photo/flockButtonLHover.png");
}

#mediabar-album:active .toolbarbutton-icon,
.channel-change-button:active .toolbarbutton-icon,
#clearAllNewMedia:active .clear-all-left-edge  {
  list-style-image: url("chrome://flock/skin/photo/flockButtonLActive.png");
}

#mediabar-album .toolbarbutton-text,
.channel-change-button .toolbarbutton-text { 
  background: url("chrome://flock/skin/photo/flockButtonC.png") repeat-x;
  margin: 0;
  padding: 6px 0px 0px 5px !important;
  font-weight: bold;
  color: #FFFFFF;
}

#clearAllNewMedia .clear-all-text-label  { 
  background: url("chrome://flock/skin/photo/flockButtonC.png") repeat-x;
  margin: 0;
  padding: 6px 0px 6px 0px !important;
  font-weight: bold;
}

#mediabar-album:hover .toolbarbutton-text,
.channel-change-button:hover .toolbarbutton-text,
#clearAllNewMedia:hover .clear-all-text-label  {
  background: url("chrome://flock/skin/photo/flockButtonCHover.png") repeat-x;
}

#mediabar-album:active .toolbarbutton-text,
.channel-change-button:active .toolbarbutton-text,
#clearAllNewMedia:active .clear-all-text-label  {
  color: #ffffff;
  background: url("chrome://flock/skin/photo/flockButtonCActive.png") repeat-x;
}

#mediabar-album .dropmarker-icon,
.channel-change-button .dropmarker-icon,
#clearAllNewMedia .clear-all-right-edge {
  list-style-image: url("chrome://flock/skin/photo/flockButtonRArrow.png");
}

#clearAllNewMedia .clear-all-right-edge {
  -moz-image-region: rect(0px 18px 24px 14px);
}

#mediabar-album:hover .dropmarker-icon,
.channel-change-button:hover .dropmarker-icon,
#clearAllNewMedia:hover .clear-all-right-edge {
  list-style-image: url("chrome://flock/skin/photo/flockButtonRArrowHover.png");
}

#mediabar-album:active .dropmarker-icon,
.channel-change-button:active .dropmarker-icon,
#clearAllNewMedia:active .clear-all-right-edge {
  list-style-image: url("chrome://flock/skin/photo/flockButtonRArrowActive.png");
}
/* BC: mediabar-album button with no drop marker (disabled=true) */
#mediabar-album[disabled="true"] > .toolbarbutton-icon,
#mediabar-album[disabled="true"]:hover > .toolbarbutton-icon,
#mediabar-album[disabled="true"]:active > .toolbarbutton-icon
{
  list-style-image: url("chrome://flock/skin/photo/flockButtonL.png") !important;
}
#mediabar-album[disabled="true"]  > .toolbarbutton-text,
#mediabar-album[disabled="true"]:hover  > .toolbarbutton-text,
#mediabar-album[disabled="true"]:active  > .toolbarbutton-text
{
  background-image: url("chrome://flock/skin/photo/flockButtonC.png") !important;
}
#mediabar-album .toolbarbutton-menu-dropmarker[disabled="true"] > .dropmarker-icon,
#mediabar-album:hover .toolbarbutton-menu-dropmarker[disabled="true"] > .dropmarker-icon,
#mediabar-album:active .toolbarbutton-menu-dropmarker[disabled="true"] > .dropmarker-icon
{
  list-style-image: url("chrome://flock/skin/photo/flockButtonR.png");
}


#mediabar-tooltip {
  border: 1px solid #888;
  font-size: 11px;
  background: #fff;
}

#mediabar-tooltip vbox[anonid="ttInfoContainer"] {
  max-width: 250px;
}

#mediabar-tooltip .user {
  font-style: italic;
}


.snowman-container[empty="true"] {
  display: none;
}

.snowman-container {
  display: -moz-box;
}

  #snowman {
    background-image: url("chrome://flock/skin/photo/ppl-disc-bg.png");
    background-repeat: repeat-x;
    background-color: #AFAFAF;
    margin-top: 1px;
    border: 1px;
    border-left: 0px;
    -moz-border-top-colors: #191919;
    -moz-border-bottom-colors: #5A5A5A;
    -moz-border-right-colors: #1f1f1f;
  }
    #snowman > image {
        border: 1px solid;
        -moz-border-top-colors: #595959;
        -moz-border-left-colors: #595959;
        -moz-border-bottom-colors: #E7E6E6;
        -moz-border-right-colors: #E7E6E6;
    }

/*******************************
 * Consume / Interact mode
 ********************************/

#consume-mode-button, #interact-mode-button {
 background-color: pink;
}

#mediabar[mode="consume"] #consume-mode-button {
  color: red;
}

#mediabar[mode="consume"] #interact-mode-button {
  color: black;
}

#mediabar[mode="interact"] #interact-mode-button {
  color: red;
}

#mediabar[mode="interact"] #consume-mode-button {
  color: black;
}


/*******************************
 * The following comes from drawers.css,
 ********************************/

.flock-button .toolbarbutton-menu-dropmarker {
    display: none;
}

.drawer-extras {
 /* border-bottom: 1px solid #898989; */
  -moz-box-align: center;
  -moz-box-pack: start;
  padding: 0px;
  background: url(chrome://flock/skin/photo/mediabar-toolbar-background.png);
}

.drawer-extras-container {
  overflow: hidden;
}

.drawer-left-end {
  list-style-image: url(chrome://flock/skin/photo/mediabar-toolbar-left-end.png);
  border: 0px;
  margin: 0px;
  padding: 0px;
}

.drawer-right-end {
  list-style-image: url(chrome://flock/skin/photo/mediabar-toolbar-right-end.png);
  border: 0px;
  margin: 0px;
  padding: 0px;
}

.drawers-panel[selected] {
  background-color: #000; 
  color: #fff; 
}

#mediaAccountsMenu {
  list-style-image: url("chrome://flock/skin/photo/accounts-menu-icon.png");
}
