<?xml version="1.0" encoding="UTF-8"?>
<!--
****************************************************************************

     File Name:   tabGadgetStyles.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">

    <linearGradientBrush id="aolTabsGradient">
        <rotateTransform center="50% 50%" angle="-90"/>
        <gradientStops>
            <gradientStop offset="0%" color="#73a8cd"/>
            <gradientStop offset="80%" color="#bcddf7"/>
        </gradientStops>
    </linearGradientBrush>
    
    
    
    <style tag="aolTabs" id="aolTabsStyle" layer="above">
        <attribute name="axis" value="x" fill="url(#bmp.aoltabcontainer)" fillSlice="0 3 0 3" fillSize="both" padding="0 2 0 5" margin="0 0 0 0" orient="horizontal" minHeight="25"/>
        <attribute name="axis" value="y" stroke="url(#pen.aimWindow.contentSection.border)" strokeWidth="1" strokeCornerRadius="7 0 0 0" fill="url(#brush.aim.tab.well)" fillCornerRadius="7 0 0 0" fillSlice="3 0" fillSize="both"  padding="9 0 9 0" margin="0 0 0 0" orient="vertical"/>
    </style>
    

    <style 
        id="accAolTabsStyle" 
        accStyleFor="aolTabsStyle" 
        layer="above">
        
        <attribute name="axis" value="x" fill="sysColor3DFace" fillSlice="0 3 0 3" fillSize="both" padding="2 2 0 5" margin="0 0 -1 0" orient="horizontal"/>
        <attribute name="axis" value="y" strokeCornerRadius="0" fillCornerRadius="0" fill="sysColor3DFace" padding="1 0 3 0" margin="0 0 0 1" stroke="#666666" strokeWidth="1" orient="vertical"/>
    </style>

    <style tag="aolTabPanels" id="aolTabPanelsStyle" layer="above" zIndex="2" flex="1" fill="white" stroke="url(#pen.aimWindow.contentSection.border) url(#pen.aimWindow.contentSection.border) url(#pen.aimWindow.contentSection.border) none" strokeWidth="1"/>
    

    <style 
        id="accAolTabPanelsStyle"
        accStyleFor="aolTabPanelsStyle"
        layer="above" zIndex="2" 
        flex="1" fill="sysColor3DFace">
    </style>  



    <style tag="aolTab" id="aolTab" zIndex="2" padding="1 3 -1 3" margin="2 1 0 0" minWidth="50" minHeight="23"
        fill="url(#bmp.aoltab)" fillSlice="0 3 0 3" fillSize="both"
        vAlign="center" hAlign="center" hSpace="5" vSpace="5">
        <part name="icon"/>
        <part name="label" inherits="#controlText" fontBold="true" textColor="#3171A6">
            <state name="selected" textColor="#000000"/>
            <state name="hovered" textColor="#1A5586" animateExit="url(#tabDehover)"/>
            <state name="pressed" textColor="#1A5586"/>
            <state name="focused" stroke="#1A5586" strokeWidth="1" strokePattern="dotted"/>
        </part>
        <state name="hovered" layer="above" zIndex="3"  fill="url(#bmp.aoltab.hover)"/>
        <state name="pressed" layer="above" zIndex="3"   fill="url(#bmp.aoltab.click)"/>
        <state name="selected" layer="above" zIndex="4"   fill="url(#bmp.aoltab.sel)"  padding="0 3 0 3" >
            <state name="hovered" layer="above" zIndex="3"  fill="url(#bmp.aoltab.sel)"/>
        </state>
        <state name="disabled" opacity="35%"/>
   </style>

   <style id="aolTabStyle" inherits="#aolTab"/>
   

    <style 
        id="accAolTabStyle" 
        accStyleFor="aolTab"
        zIndex="2" padding="1 3 -1 3" margin="2 1 0 0" 
        minWidth="50" minHeight="23"
        fill="OSTheme(tab,toptabitem,normal)" 
        vAlign="center" hAlign="center" 
        hSpace="5" vSpace="5">
        
        <part name="icon"/>
        <part name="label" fontBold="false" inherits="#controlText" textColor="sysColorWindowText">
            <state name="focused" stroke="sysColorWindowText" strokeWidth="2" strokePattern="dotted"/>
            <attribute name="selected" value="true" fontUnderline="true" fontBold="true"/>
            <attribute name="selected" value="false" fontUnderline="false" fontBold="false"/>
        </part>
        
        <state name="hovered" layer="above" zIndex="3"  fill="OSTheme(tab,toptabitem,hot)"/>
        <state name="pressed" layer="above" zIndex="3" fill="OSTheme(tab,toptabitem,pressed)"/>
        <state name="selected" layer="above" zIndex="4" fill="OSTheme(tab,toptabitem,focused)" padding="0 3 0 3" />
        <state name="disabled" layer="above" zIndex="3" fill="OSTheme(tab,toptabitem,disabled)">
            <part name="label" inherits="#controlText" fontBold="false" fontColor="sysColorGrayText" padding="3 0 0 0" />
        </state>
    </style>

    <style tag="aolVerticalTab" id="aolVerticalTab" margin="-1 1 0 1" padding="6 0 6 3" zIndex="1"
            fill="url(#gradient.aim.tab.normal)" hSpace="5" vSpace="5" stroke="#666666 none #666666 none" strokeWidth="1">
            <state name="selected" fill="#ffffff" marginRight="0" layer="above" layered="true" zIndex="9999"/>
        <part name="icon"/>
        <part name="label" inherits="#controlText" textColor="#252525" fontBold="false">
            <state name="selected" textColor="#d13413" fontBold="true" />
            <state name="hovered" textColor="black" animateExit="none" fontBold="false">
                <state name="selected" textColor="#d13413" fontBold="true" />
            </state>
            <state name="pressed" textColor="#d13413" fontBold="false">
                <state name="selected" textColor="#d13413" fontBold="true" />
            </state>
            <state name="focused" stroke="#1A5586" strokeWidth="1" strokePattern="dotted"/>
        </part>
        <state name="hovered" fill="url(#gradient.aim.tab.hovered)" />
        <state name="selected" layer="above" fill="white" textShadowColor="#00000000"/>
        <state name="disabled" opacity="35%"/>
    </style>
    

    <style 
        id="accAolVertTabStyle" 
        accStyleFor="aolVerticalTab"
        margin="1 0 0 5" padding="4 0 4 3" zIndex="1" 
        fill="OSTheme(tab,tabitem,normal)" hSpace="5" vSpace="5">
        
        <state name="selected" fill="OSTheme(tab,tabitem,pressed)" marginLeft="3" layer="above" layered="true" zIndex="9999"/>
        <part name="icon"/>
        
        <part name="label" inherits="#controlText" fontBold="false" textColor="sysColorWindowText" margin="0" padding="4 0 2 4" flex="1" crop="right">
            <attribute name="justify" value="left" hAlign="start"/>
            <attribute name="justify" value="right" hAlign="end"/>
            <state name="focused" stroke="sysColorWindowText" strokeWidth="2" strokePattern="dotted"/>
            <attribute name="selected" value="true" fontUnderline="true" fontBold="true"/>
            <attribute name="selected" value="false" fontUnderline="false" fontBold="false"/>
        </part>
        
        <part name="cheatingWhiteLine" ornament="true" position="fixed" right="-2"  fill="white" width="5" top="0" bottom="0">
            <state name="selected" right="-2" fill="white"/>
        </part>
        
        <state name="hovered" fill="OSTheme(tab,tabitem,hot)"/>
        <state name="selected" layer="above" strokeWidth="1" fill="OSTheme(tab,tabitem,pressed)">
            <state name="hovered" fill="OSTheme(tab,tabitem,hot)" />
        </state>
    </style>

    <style tag="aolTabScroller" id="aolTabScrollerStyle" margin="0" vAlign="center">
        <attribute name="axis" value="y" orient="vertical"   />
        <attribute name="axis" value="x" orient="horizontal"/>

        <part name="mainContainer" flex="1" vAlign="center">
            <attribute name="axis" value="y" orient="vertical"  />
            <attribute name="axis" value="x" orient="horizontal"/>
        </part>

        <part name="upButton" inherits="#tabOverFlowButtonStyle">
            <part name="preLightLayer" fill="none"/>
        </part>
        <part name="downButton" inherits="#tabOverFlowButtonStyle">
            <part name="preLightLayer" fill="none"/>
        </part>

        <part name="contentArea" overflow="hidden" flex="1" minHeight="1" minWidth="1">
            <attribute name="axis" value="y" maxHeight="auto" orient="vertical"/>
            <attribute name="axis" value="x" maxWidth="auto"  orient="horizontal"/>

            <attribute name="scroll_ease">
                <attribute name="axis" value="y" animate="url(#ani.tabScroll.easeToY)" />
                <attribute name="axis" value="x" animate="url(#ani.tabScroll.easeToX)" />
            </attribute>
        </part>

        <part name="contentBox" flex="1">
            <attribute name="axis" value="y" orient="vertical"/>
            <attribute name="axis" value="x" orient="horizontal"/>
        </part>

    </style>

    <style id="tabOverFlowButtonStyle" margin="0">
        <attribute name="axisStyle" value="y" hAlign="center" vAlign="center" inherits="#graySquareButton" />
        <attribute name="axisStyle" value="x" fill="none" margin="0 2 0 2" minWidth="0" stroke="none" padding="1">
            <state name="pressed">
                <state name="hovered" padding="2 0 0 2"/>
            </state>
            <state name="disabled" opacity="30%"/>
            <state name="hovered" colorAdd="#00005566" animate="url(#controlHover)" animateExit="url(#controlDehover)"/>
        </attribute>
    </style>

    <style id="graySquareButton" inherits="aolButtonLook" minHeight="13"
           strokeCornerRadius="0"  stroke="#AFAFAF"
           fillCornerRadius="0" fill="url(#sortSelectGradient)">

        <state name="hovered" fill="url(#sortSelectGradientHovered)" colorAdd="#00000000" animate="url(#buttonHover)" animateExit="url(#buttonDehover)"/>
        <state name="pressed" padding="5 5 3 7" fill="url(#sortSelectGradientPressed)">
                <attribute name="hovered" value="false" padding="4 6 4 6" fill="url(#sortSelectGradient)" />
        </state>
    </style>
    

    <style 
        id="accGraySquareBtn" 
        accStyleFor="graySquareButton"
        inherits="accAolButtonLook" 
        minHeight="13" strokeCornerRadius="0"  
        stroke="#AFAFAF" fillCornerRadius="0">

        <state name="hovered" fill="url(#sortSelectGradientHovered)" colorAdd="#00000000"/>
        <state name="pressed" padding="5 5 3 7" fill="url(#sortSelectGradientPressed)">
            <attribute name="hovered" value="false" padding="4 6 4 6" fill="url(#sortSelectGradient)" />
        </state>
    </style>


</library>