/*
 * Copyright 2006-2007 by Massimiliano Mirra
 * 
 * This file is part of SamePlace.
 * 
 * SamePlace 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 3 of the License, or (at your
 * option) any later version.
 * 
 * SamePlace 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, see <http://www.gnu.org/licenses/>.
 * 
 * The interactive user interfaces in modified source and object code
 * versions of this program must display Appropriate Legal Notices, as
 * required under Section 5 of the GNU General Public License version 3.
 *
 * In accordance with Section 7(b) of the GNU General Public License
 * version 3, modified versions must display the "Powered by SamePlace"
 * logo to users in a legible manner and the GPLv3 text must be made
 * available to them.
 * 
 * Author: Massimiliano Mirra, <bard [at] hyperstruct [dot] net>
 *  
 */


/* CONTROLS - GENERAL */

#controls .control {
    opacity: 0.45;
    -moz-box-align: center;
    -moz-box-pack: center;
    min-width: 24px;
    border: none;
    background: #c4c4c4;
    -moz-border-radius: 10px;
    margin: 7px;
}

#controls .control:hover,
#controls .control.active {
    opacity: 0.90;
}

#controls .control.dock {
    height: 48px;
}

#controls .dock-tools {
    -moz-box-align: center;
    overflow: hidden;
}

#controls .dock-tools textbox {
    -moz-appearance: none;
    border: 1px solid lightgrey;
    font-size: smaller;
}


/* ARROWS */

#controls .scroll-arrow {
    height: 96px;
    display: none;
    width: 52px;
    max-width: 52px;
}

#controls .scroll-arrow[speed="0"] image { height: 21px; }
#controls .scroll-arrow[speed="1"] image { height: 24px; }
#controls .scroll-arrow[speed="2"] image { height: 27px; }
#controls .scroll-arrow[speed="3"] image { height: 30px; }
#controls .scroll-arrow[speed="4"] image { height: 33px; }
#controls .scroll-arrow[speed="5"] image { height: 36px; }
#controls .scroll-arrow[speed="6"] image { height: 39px; }
#controls .scroll-arrow[speed="7"] image { height: 42px; }
#controls .scroll-arrow[speed="8"] image { height: 45px; }

#controls .scroll-arrow-up {
    background: url("arrow-up-bg.png");
    list-style-image: url('arrow-up.png');
}

#controls .scroll-arrow-down {
    background: url("arrow-down-bg.png");
    list-style-image: url('arrow-down.png');
    opacity: 0.9;
}


/* INLINE TOOLTIP */

#controls .inline-tooltip {
    -moz-box-pack: center;
    -moz-box-align: end;
    font-size: 10px;
    margin-bottom: -26px;
}

#controls .inline-tooltip > label {
    background: #c4c4c4;
    padding: 8px 10px 2px 10px;
    -moz-border-radius: 0 0 14px 14px;
    color: black;
}


/* DOCK */

#controls .dock {
    -moz-border-radius: 10px;
}

#controls .dock .icon {
    padding: 8px 4px;
    opacity: 0.5; /* XXX buggy on gecko 1.8 */
}

#controls .dock:hover .icon {
    opacity: 1.0;
}

#controls .dock .icon:hover {
    padding: 0;
    height: 32px;
    width: 32px;
}

#controls .dock .icon.people        { list-style-image: url("people16x16.png"); }
#controls .dock .icon.people:hover  { list-style-image: url("people32x32.png"); }
#controls .dock .icon.filter        { list-style-image: url("filter16x16.png"); }
#controls .dock .icon.filter:hover  { list-style-image: url("filter32x32.png"); }
#controls .dock .icon.sort          { list-style-image: url("sort16x16.png");   }
#controls .dock .icon.sort:hover    { list-style-image: url("sort32x32.png");   }
#controls .dock .icon.tools         { list-style-image: url("tools16x16.png");  }
#controls .dock .icon.tools:hover   { list-style-image: url("tools32x32.png");  }
#controls .dock .icon.help          { list-style-image: url("help16x16.png");   }
#controls .dock .icon.help:hover    { list-style-image: url("help32x32.png");   }


/* #controls .doc .icon.status is taken care by .presence-indicator */

#controls .dock .icon.presence-indicator:hover {
    list-style-image: url("status32x128.png");
    -moz-image-region: rect(96px 32px 128px 0px);
}

#controls .dock .icon.presence-indicator:hover[availability="unavailable"] {
    -moz-image-region: rect(96px 32px 128px 0px);
}

#controls .dock .icon.presence-indicator:hover[availability="available"] {
    -moz-image-region: rect(32px 32px 64px 0px);
}

#controls .dock .icon.presence-indicator:hover[availability="available"][show="dnd"] {
    -moz-image-region: rect(0px 32px 32px 0px);
}

#controls .dock .icon.presence-indicator:hover[availability="available"][show="away"],
#controls .dock .icon.presence-indicator:hover[availability="available"][show="xa"] {
    -moz-image-region: rect(64px 32px 96px 0px);
}



/* OFFLINE NOTICE */

#view.compact #controls .control.offline-notice {
    display: none;
}

#controls .control.offline-notice {
    opacity: 0.99;
    color: #eee; 
    background: #999;
    padding: 5px;
    margin: 15px;
    -moz-box-align: stretch;
}

#controls .control.offline-notice .notice {
    font-size: 22px;
    text-align: center;
    color: white;
}

#controls .control.offline-notice .action {
    font-size: 18px;
    text-align: center;
    color: white;
}

#controls .control.offline-notice .action:hover {
    color: black;
}

#controls .control.offline-notice .logo {
    -moz-box-pack: center;
    margin-top: -96px;
    list-style-image: url("chrome://sameplace/skin/logo96x96.png");
}


/* REACTION TO SCROLL */

#controls.more-up .scroll-arrow-up,
#controls.more-down .scroll-arrow-down {
    display: -moz-box;
}

#controls:not(.more-up) .control.dock,
#controls:not(.more-up) .control.dock .icon {
    opacity: 0.9;
}


/* REACTION TO RESIZE */

#view:not(.compact) #controls .scroll-arrow-up {
    margin-right: 0;
    -moz-border-radius-topright: 0;
}

#view.compact .control.dock .icon:not(.presence-indicator), 
#view.compact .inline-tooltip {
    display: none;
}

#view.compact .control.dock {
    width: 52px
}

#view.compact #controls.more-up .control.dock {
    margin-bottom: 0;
}


/* PRESENCE INDICATOR */

/* used in many places - should be factored out */

.presence-indicator {
    list-style-image: url("status16x64.png");
    -moz-image-region: rect(48px 16px 64px 0px);
}

.presence-indicator[availability="unavailable"] {
    -moz-image-region: rect(48px 16px 64px 0px);
}

.presence-indicator[availability="available"] {
    -moz-image-region: rect(16px 16px 32px 0px);
}

.presence-indicator[availability="available"][show="dnd"] {
    -moz-image-region: rect(0px 16px 16px 0px);
}

.presence-indicator[availability="available"][show="away"],
.presence-indicator[availability="available"][show="xa"] {
    -moz-image-region: rect(32px 16px 48px 0px);
}



