<?xml version="1.0" encoding="UTF-8"?>
<!--
****************************************************************************

     File Name:   editorGadgetStyles.box

****************************************************************************
   C O P Y R I G H T   A N D   C O N F I D E N T I A L I T Y   N O T I C E
****************************************************************************

//      Copyright (c) 2006 AOL LLC.  All rights reserved.
//      This software contains valuable confidential and proprietary
//      information of AOL LLC. and is subject to applicable
//      licensing agreements.  Unauthorized reproduction, transmission or
//      distribution of this file and its contents is a violation of
//      applicable laws.
//
//            A O L   C O N F I D E N T I A L

****************************************************************************
-->


<?boxely version="1.0"?>

<?import href="box://aimToolkit/theme/coreStyles.box"?>

<library xmlns="http://www.aol.com/boxely/resource.xsd"
 accStyles="box://aimToolkit/theme/accEditorGadgetStyles.box">
    

    <bitmap id="png.aolEditTools.background" src="box://aimToolkit/theme/images/popupback.png"/>
    <bitmap id="png.editorDropDown.fontsmiley" src="box://aimToolkit/theme/images/fontsmiley.png"/>


    <linearGradientBrush id="fontbarGradient">
        <rotateTransform center="50% 50%" angle="-90"/>
        <gradientStops>
            <gradientStop offset="0%" color="#FFFFFF"/>
            <gradientStop offset="100%" color="#D0D4DB"/>
        </gradientStops>
    </linearGradientBrush>

    <linearGradientBrush id="fontbarGradientInverted">
        <rotateTransform center="50% 50%" angle="-90"/>
        <gradientStops>
            <gradientStop offset="0%" color="#BDC2CA"/>
            <gradientStop offset="100%" color="#FFFFFF"/>
        </gradientStops>
    </linearGradientBrush>

    <linearGradientBrush id="fontbarGradientHovered">
        <rotateTransform center="50% 50%" angle="-90"/>
        <gradientStops>
            <gradientStop offset="0%" color="#FFFFFF"/>
            <gradientStop offset="20%" color="#CBE0FB"/>
            <gradientStop offset="50%" color="#B1D3ED"/>
            <gradientStop offset="100%" color="#FFFFFF"/>
        </gradientStops>
    </linearGradientBrush>

    <linearGradientBrush id="fontbarGradientHoveredInverted">
        <rotateTransform center="50% 50%" angle="-90"/>
        <gradientStops>
            <gradientStop offset="0%" color="#D5D9E0"/>
            <gradientStop offset="100%" color="#FFFFFF"/>
        </gradientStops>
    </linearGradientBrush>
        
    <linearGradientBrush id="aolTextToolbarButton">
        <rotateTransform center="50% 50%" angle="-90"/>
        <gradientStops>
            <gradientStop offset="0%" color="#FFFFFF"/>
            <gradientStop offset="100%" color="#D1D1D1"/>
        </gradientStops>
    </linearGradientBrush>

    <linearGradientBrush id="aolTextToolbarButtonDark">
        <rotateTransform center="50% 50%" angle="-90"/>
        <gradientStops>
            <gradientStop offset="0%" color="#666666"/>
            <gradientStop offset="100%" color="#444444"/>
        </gradientStops>
    </linearGradientBrush>

    <linearGradientBrush id="aolTextToolbarButtonHovered">
        <rotateTransform center="50% 50%" angle="-90"/>
        <gradientStops>
            <gradientStop offset="0%" color="#FFFFFF"/>
            <gradientStop offset="100%" color="#ACACAC"/>
        </gradientStops>
    </linearGradientBrush>

    <linearGradientBrush id="aolTextToolbarButtonDisabled">
        <rotateTransform center="50% 50%" angle="-90"/>
        <gradientStops>
            <gradientStop offset="0%" color="#FAFAFA"/>
            <gradientStop offset="100%" color="#DDDDDD"/>
        </gradientStops>
    </linearGradientBrush>

    <linearGradientBrush id="aolTextToolbarButtonPressed">
        <rotateTransform center="50% 50%" angle="-90"/>
        <gradientStops>
            <gradientStop offset="0%" color="#195A8C"/>
            <gradientStop offset="15%" color="#267EB7"/>
            <gradientStop offset="85%" color="#66B9E3"/>
            <gradientStop offset="100%" color="#7EC7E8"/>
        </gradientStops>
    </linearGradientBrush>


    <linearGradientBrush id="aolButtonAndDropMenuGradient">
        <rotateTransform center="50% 50%" angle="-90"/>
        <gradientStops>
            <gradientStop offset="0%" color="#FFFFFF"/>
            <gradientStop offset="50%" color="#F0F0F0"/>
            <gradientStop offset="100%" color="#D8D8D8"/>
        </gradientStops>
    </linearGradientBrush>

    <style tag="editor" id="editorStyle">
        <attribute name="desiredHeight" animate="url(#ani.shortTimerLoop)"/>
    </style>

    <style tag="aolToolbarButtonLookDrop" id="aolToolbarButtonLookDropStyle"
        margin="0" padding="0" orient="vertical" hAlign="center" vAlign="center">
        <part id="dropmark" name="dropmark"
            margin="0"
            icon="url(#bmp.whitedropmark)">
        </part>
        <part id="menuBoxLabel" padding="4 0 0 0"/>
        <state name="hovered" fill="url(#gradientAOL)"/>
        <state name="pressed" inherits="#aolThemeToolbarSelectedItem" />
        <state name="toggled" inherits="#aolThemeToolbarSelectedItem" />
    </style>

    <style tag="aolFontFamilyMenuBox" id="aolFontFamilyMenuBoxStyle" inherits="#aolThemeTextToolbarControl,#control" orient="vertical" margin="0" padding="0">
        <part name="container" vAlign="center" margin="0" padding="0"/>
        <part name="menuBoxLabel" inherits="#controlText" hAlign="center" flex="1" maxWidth="95"/>
        <part name="dropdown" margin="0 4" width="7" height="22" fill="#003366" mask="url(#mask.smalldropmark)"/>
    </style>

    <style tag="aolTextToolbarButtonWithDropmark" id="aolTextToolbarButtonWithDropmarkStyle" inherits="#aolThemeTextToolbarControl,#control" orient="vertical" margin="0" padding="0">
        <part name="container" vAlign="center" margin="0" padding="0"/>
        <part id="image" padding="0 1 0 3"/>
        <part name="dropdown" margin="0 4" width="7" height="22" fill="#003366" mask="url(#mask.smalldropmark)"/>
    </style>

    <style tag="aolToolbarFontMenuBox" id="aolToolbarFontMenuBoxStyle" inherits="#aolThemeTextToolbarControl,#control" orient="vertical" margin="0" padding="0">
        <part name="container" vAlign="center" margin="0" padding="0"/>
        <part name="menuBoxLabel" flex="1" inherits="#controlText" hAlign="center" width="20"/>
        <part name="dropdown" margin="0 4" width="7" height="22" fill="#003366" mask="url(#mask.smalldropmark)"/>
    </style>

    <style tag="aolToolbarSeparator" id="aolToolbarSeparatorStyle" inherits="#aolThemeBasicLine" stroke="none">
        <attribute name="sepOrient" value="vertical" inherits="#aolThemeVerticalSeparator"/>
        <attribute name="sepOrient" value="horizontal" inherits="#aolThemeHorizontalSeparator"/>
    </style>


    <style id="aolThemeTextToolbarControl" tag="aolTextToolbarButton" vAlign="center" hAlign="center" margin="0" padding="0">
        <state name="disabled" fill="url(#aolTextToolbarButtonDisabled)"/>
        <state name="pressed" fill="url(#fontbarGradientInverted)"/>
        <attribute name="toggled" value="true">
            <state name="hovered" fill="url(#fontbarGradientHoveredInverted)"/>
        </attribute>
        <attribute name="toggled" value="false">
            <state name="hovered" fill="url(#fontbarGradientHovered)"/>
        </attribute>
    </style>

    <style id="aolThemeTextToolbarPushButton" tag="aolTextToolbarPushButton" inherits="#aolThemeTextToolbarControl,#control">
        <state name="toggled" fill="url(#fontbarGradientInverted)"/>
    </style>

    <style tag="aolTextToolbarButton" id="aolTextToolbarButtonStyle" inherits="#aolThemeTextToolbarControl" minWidth="6" maxWidth="22">
    </style>

    <style tag="aolTextToolbarPushButton" id="aolTextToolbarPushButtonStyle" inherits="#aolThemeTextToolbarControl" minWidth="22" maxWidth="22">
    </style>

    <style tag="aolFontToolbar" id="aolFontToolbarStyle" flex="1" padding="0" margin="0" fill="url(#fontbarGradient)" stroke="none">
        <part name="insideSeparators" padding="0"/>
        <part name="container" height="22" maxHeight="22" vAlign="stretch" flex="1" padding="0" margin="0" maxWidth="auto" overflow="hidden"/>
        <part name="topSeparator" margin="1 0 0 0" padding="0" fill="#E2E2E2" stroke="none"/>
        <part name="btnHideFontTools" margin="3 10 0 0"/>
        <part name="bottomSeparator" margin="0 0 1 0" padding="0" fill="none" stroke="none" />
        <part name="groupCustomTextColor" fill="url(#grayWhiteGradient)"/>
        <part name="groupCustomBackgroundColor" fill="url(#grayWhiteGradient)"/>
        <part name="groupCustomWindowColor" fill="url(#grayWhiteGradient)"/>
    </style>

    <style tag="aolEditTools" id="aolEditToolsStyle" orient="vertical" padding="0">
        <part name="btnHideEditTools" layer="stack" position="fixed" zIndex="3" top="1" right="4"/>
        <part name="smileys"/>
        <part name="smileysFrame" fill="url(#grayWhiteGradient)"/>
        <part name="horizontalRule1" flex="1" margin="0 2"/>
        <part name="horizontalRule2" flex="1" margin="0 2"/>
        <part name="spacer1" height="22"/>
        <part name="spacer2" height="22"/>
        <part name="fontButtons" fill="url(#grayWhiteGradient)"/>
        <part name="otherButtons" fill="url(#grayWhiteGradient)"/>
    </style>

    <style tag="aolEditorDropDown" id="aolEditorDropDownStyle" flex="1" margin="3 0 0 0" fill="white" stroke="#868686" strokeWidth="1" fillSlice="1 1 1 1">
        <part name="container" vAlign="end" fill="white" margin="3 0 1 2" padding="3 0 3 3"/>
        <part name="image" vAlign="middle" fill="url(#png.editorDropDown.fontsmiley)" width="20" height="13"/>
    </style>
    
    <style tag="aolEditorDropDownPopup" id="aolEditorDropDownPopupStyle" position="fixed" layer="stack"
            vAlign="middle"
            orient="vertical" zIndex="2000"
            margin="0" padding="0"
            maxWidth="auto" maxHeight="auto" minHeight="75">
        <part name="container" vAlign="middle"
            fill="black" fillCornerRadius="2"
            padding="1" margin="0"
            minWidth="150" hAlign="stretch"/>
    </style>

    <style tag="aolColorSelectBox" id="aolColorSelectBoxStyle" width="30" height="30" margin="3" inherits="#aolThemeBasicStrokeWithRadius" />

    <style id="aolColorSelectBoxSmall" width="20" height="20" margin="2" inherits="#aolThemeBasicStrokeWithRadius" />

    <style tag="aolTextToolbarSpacer" id="aolTextToolbarSpacerStyle" fill="url(#bmp.text.toolbarbutton.separator)" fillRepeat="y" width="8"/>

    <style id="aolTextButtonAndDrop" tag="aolTextColorButton" inherits="#aolThemeTextToolbarControl,#control"
        orient="horizontal" padding="0 3" margin="0">
        <part id="textSample" margin="0 0 3 0"/>
        <part id="divider" fill="none" margin="0 2 0 2" width="1">
            <state name="hovered" fill="url(#bmp.text.toolbarbutton.dropSeparatorHovered)"/>
        </part>
        <part name="dropdown" margin="0 4" width="7" height="22" fill="#003366" mask="url(#mask.smalldropmark)"/>
        <part id="colorSampleLayered" layer="above" position="fixed" zIndex="3">
            <attribute name="solidFill" value="true" left="2" right="2" bottom="6" top="6"/>
            <attribute name="solidFill" value="false" left="3" right="2" bottom="4" height="3"/>
        </part>
    </style>

    <style tag="aolSmileyButtonMenu" id="aolSmileyButtonMenuStyle" inherits="#aolThemeTextToolbarControl,#control" orient="vertical" margin="0" padding="0">
        <part name="container" vAlign="center" margin="0" padding="0"/>
        <part id="image" padding="0 1 0 3"/>
        <part name="dropdown" margin="0 4" width="7" height="22" fill="#003366" mask="url(#mask.smalldropmark)"/>
    </style>

    <style tag="aolFontColorSelector" id="aolFontColorSelectorStyle" inherits="#aolThemeTextToolbarControl,#control"
        orient="horizontal">
        <part name="colorBox" layer="below" position="fixed" right="0" left="0" top="0" bottom="0"/>
        <state name="focused" fill="url(#aolTextToolbarButtonPressed)" stroke="#195C8E" strokeWidth="1" padding="3 2 1 2" />
    </style>
    <style tag="aolComboDropMark" id="aolComboDropMarkStyle" inherits="#dropmark" vAlign="center" hAlign="center">
        <part id="dropmark" name="dropmark">
            <attribute name="dropIcon" value="small" icon="url(#bmp.smallDropmark)" margin="0 2"/>
            <attribute name="dropIcon" value="normal" icon="url(#bmp.aoldropmark)" margin="0 4"/>
        </part>
    </style>

    <style tag="aolButtonAndDropMenu"
        id="aolButtonAndDropMenuStyle"
        orient="vertical"
        hAlign="center"
        vAlign="center"
        overflow="none">
        <part name="container" vAlign="stretch" margin="0 2" padding="0" inherits="#aolThemeToolbarHoveredItem">
            <attribute name="buttonGreyFill" value="true" fill="url(#aolButtonAndDropMenuGradient)"/>
        </part>
        <part name="dropFraming" padding="0" margin="0" flex="1" hAlign="stretch" vAlign="stretch"/>
        <part name="separatorSpacingBox" margin="0" padding="0" flex="1" hAlign="center"/>
        <part name="separator" margin="2 1" padding="0" inherits="#aolThemeBasicStroke">
        </part>
        <part name="button" padding="1" margin="0" stroke="none">
            <state name="pressed" padding="2 0 0 2" margin="0" inherits="#aolThemeSelectedItem"/>
        </part>
        <part name="dropMenu" padding="0" margin="1 1 1 0" flex="1">
        </part>
        <part name="labelFraming" flex="1" hAlign="center"/>

        <state name="disabled" opacity="50%" colorSaturation="100%" animate="url(#controlDisable)" animateExit="url(#controlEnable)"/>

        <part name="buttonPreLightLayer" opacity="0" focusMode="ignore" position="fixed" top="0" bottom="0" left="0" right="0" fill="url(#bmp.aolButton.blue.focushalo)" fillSlice="2" fillSize="both">
            <state name="focused" opacity="100" animate="url(#buttonFocusFadeIn)" animateExit="url(#buttonFocusFadeOut)">
                <attribute name="defaultButton" value="true" fill="url(#bmp.aolButton.green.focushalo)"/>
            </state>
        </part>
        <attribute name="showHover" value="true"
            colorAdd="#00002233"
            animate="url(#controlHover)"
            animateExit="url(#controlDehover)"/>
    </style>    
    
    <style tag="aolControlContainingPopup" id="aolControlContainingPopupStyle" position="fixed" layer="stack"
           orient="vertical" zIndex="2000" padding="1" fill="white"
           margin="0" stroke="black" strokeWidth="1" maxWidth="auto" maxHeight="auto"/>

    
</library>