/*
    ****************************************************************
    CORE BUTTON STYLES

    - Cumulitive styles designed to be used in combination
    *****************************************************************
    *
    *   GENERAL ICONS BUTTONS:
    *       [ iconButton + 'iconPosition' + 'buttonType' + 'specificInstanceStyle' ]
    *       
    *       e.g. [ iconButton iconLeft smallArrow homePageNewCars ]
    *            [ iconButton iconRight '' ]
    *            [ iconButton iconCenterLeft '' ]
    *
    *
    *
    *   EXCEPTIONS that must be used in a specific way:
    *       smallArrow : [ iconButton iconLeft smallArrow ]
    *   
    *
    *
    *   NOTE: 
    *       :   If need to tune in specific padding settings do so in the 'buttonType' declaration 
    *           NOT in the 'iconPosition' declarations as these provide default settings only
    *   
    *       :   font-sizes MUST be px defined as get inheritance errors when %based [in certain situations inherit from natural parent and NOT document default ('body') as desired] 
    */
        
        /*
         *********************
         * CORE ICON BUTTON STYLES
         *********************
         */
        
        a.iconButton,
        #mainBodyContent a.iconButton
        {
            font-size           : 10px;
            background-repeat   : no-repeat;
            
            padding-top         : 1px;
            padding-right       : 10px;
            padding-bottom      : 0px;
            padding-left        : 10px;
            
            text-decoration     : none;
            /*
            line-height         : 13px;
            */        
            }
        
            
        a.iconButton:link,
        a.iconButton:visited,
        #mainBodyContent a.iconButton:link,
        #mainBodyContent a.iconButton:visited
        {
            color   : #000000;
            }
        
        a.iconButton:hover,
        #mainBodyContent a.iconButton:hover
        {
            color   : #666666;
            }
        
            /*
                top left
                top center
                top right
                center left
                center center
                center right
                bottom left
                bottom center
                bottom right
            */
            
            a.iconLeft,
            #mainBodyContent a.iconLeft
            {
                background-position : top left;
                padding-left        : 12px;
                }
                
            a.iconRight,
            #mainBodyContent a.iconRight
            {
                background-position : top right;
                padding-right       : 12px;
                }
        
            
            a.iconCenterLeft,
            #mainBodyContent a.iconCenterLeft
            {
                background-position : center left;
                padding-left        : 12px;
                }
                
            
            a.iconCenterRight,
            #mainBodyContent a.iconCenterRight
            {
                background-position : center right;
                padding-right       : 12px;
                }
            
            a.iconBottomLeft,
            #mainBodyContent a.iconBottomLeft
            {
                background-position : bottom left;
                padding-left        : 12px;
                padding-bottom      : 10px;
                }
                
            
            a.iconBottomRight,
            #mainBodyContent a.iconBottomRight
            {
                background-position : bottom right;
                padding-right       : 12px;
                padding-bottom      : 10px;
                }
            
            
            
            /*
             *********************
             * BASIC ARROWS
             *********************
             *
             * See 'ie6.css' for ie specific overrides where image is replaced with a non-dropShadow image
             */
            a.basicArrowWhite,
            a.basicArrowWhite2Grey,
            #mainBodyContent a.basicArrowWhite,
            #mainBodyContent a.basicArrowWhite2Grey
            {
                position         : relative;
                float            : left;
                background-image : url('/assets/web/images/buttonIcons/buttonIcon_arrow_white.png');
                }
                
            a.basicArrowBlack,
            a.basicArrowBlack2Grey,
            #mainBodyContent a.basicArrowBlack,
            #mainBodyContent a.basicArrowBlack2Grey
            {
                position         : relative;
                float            : left;
                background-image : url('/assets/web/images/buttonIcons/buttonIcon_arrow_black.png');
                }
                
            a.basicArrowWhiteRight,
            a.basicArrowWhite2GreyRight,
            #mainBodyContent a.basicArrowWhiteRight,
            #mainBodyContent a.basicArrowWhite2GreyRight
            {
                position         : relative;
                float            : left;
                background-image : url('/assets/web/images/buttonIcons/buttonIcon_arrow_white.png');
                }
                
            a.basicArrowBlackRight,
            a.basicArrowBlack2GreyRight,
            #mainBodyContent a.basicArrowBlackRight,
            #mainBodyContent a.basicArrowBlack2GreyRight
            {
                position         : relative;
                float            : left;
                background-image : url('/assets/web/images/buttonIcons/buttonIcon_arrow_black.png');
                }
            
            
            /*
            *********************
            * HOVER STATES
            *********************
            */
                    
            a.basicArrowWhite:hover,
            a.basicArrowWhiteRight:hover,
            #mainBodyContent a.basicArrowWhite:hover,
            #mainBodyContent a.basicArrowWhiteRight:hover
            {
                background-image : url('/assets/web/images/buttonIcons/buttonIcon_arrow_black.png');
                }
                
            a.basicArrowBlack:hover,
            a.basicArrowBlackRight:hover,
            #mainBodyContent a.basicArrowBlack:hover,
            #mainBodyContent a.basicArrowBlackRight:hover
            {
                /*
                background-image : url('/assets/web/images/buttonIcons/buttonIcon_arrow_white.png');
                */
                }
            
            a.basicArrowWhite2Grey:hover
            a.basicArrowWhite2GreyRight:hover,
            a.basicArrowBlack2Grey:hover,
            a.basicArrowBlack2GreyRight:hover,
            #mainBodyContent a.basicArrowWhite2Grey:hover,
            #mainBodyContent a.basicArrowWhite2GreyRight:hover,
            #mainBodyContent a.basicArrowBlack2Grey:hover,
            #mainBodyContent a.basicArrowBlack2GreyRight:hover
            {
                background-image : url('/assets/web/images/buttonIcons/buttonIcon_arrow_grey.png');
                }
            
            
            /*
             *********************
             * SMALL ARROW (Lozenge)
             *********************
             *
             * This button should only be used in conjunction with 'iconLeft' otherwise icon image will NOT align in IE 6 [the filter removes all ability to position a background element]
             */
            a.smallArrow,
            #mainBodyContent a.smallArrow
            {
                position         : relative;
                float            : left;
                
                background-image : url('/assets/web/images/buttonIcons/buttonIcon_smallArrow_up.png');
                
                font-size        : 10px;
                font-weight      : bold;
                
                padding-top      : 5px;
                padding-right    : 0px;
                padding-bottom   : 5px;
                padding-left     : 25px;
                }
             
        
            a.smallArrow:hover,
            #mainBodyContent a.smallArrow:hover
            {
                background-image : url('/assets/web/images/buttonIcons/buttonIcon_smallArrow_over.png');
                }
        
        
            /*
             *********************
             * DISABLED(All)
             *********************
             *
             * Disabled buttons, are semi transparent with the pointer cursor removed.
             */
            a.smallArrow.disabled,
            #mainBodyContent div.dropShadowOuter div.dropShadowInner a.smallArrow.disabled
            {
                background-image : url('/assets/web/images/buttonIcons/buttonIcon_smallArrow_disabled.png');
                color : #D3D3D3;
                cursor : default;
                }
            
            a.smallArrow.disabled:hover,
            #mainBodyContent div.dropShadowOuter div.dropShadowInner a.smallArrow.disabled:hover
            {
                background-image : url('/assets/web/images/buttonIcons/buttonIcon_smallArrow_disabled.png');
                color : #D3D3D3;
                }
            
                 
        /*   
            crop    : Clips the image to fit the dimensions of the object. 
            image   : Default. Enlarges or reduces the border of the object to fit the dimensions of the image. 
            scale   : 
        */