Loading, please wait...

ARTDESIGN STEP

SETTINGS

Attributes

data-plugin-ad-step="ad-step"

This attribute is required in order to applied the plugin on the desired element
<input type="text" data-plugin-ad-step="ad-step">

data-ad-step-options="Blue"

This attribute overwrites the settings of the plugin only for the concrete element
<input type="text" data-plugin-ad-step="ad-step" data-ad-step-options="Blue">

data-ad-step-input-options="Blue"

This attribute overwrites the settings of the plugin (for input) only for the concrete element
<input type="text" data-plugin-ad-step="ad-step" data-ad-step-input-options="Blue">

data-ad-step-input-structure="Top"

This attribute specifies the buttons positions
<input type="text" data-plugin-ad-step="ad-step" data-ad-step-input-structure="Top">

Public Methods

Destroy

<script type="text/javascript">
    var Step = $(".ArtDesign").ArtDesignStep();
    Step.Destroy();
</script>

Default Options

<script type="text/javascript">
    General: { // General settings of the element
        ClassPrefix: "St_" // Put ClassPrefix on the style of the element in order to prevent a conflict with other styles from external CSS file; Must be string; By default: "St_"
    },
    Global: { // Global settings of the element
        Structure: "LeftRight", // Set the position of the buttons for decrease and increase of the value in the input field; Must be string ( TopBottom, LeftRight, Top, Bottom, Left, Right) By default: "LeftRight"
        MaxWidth: "600px", // Set the MaxWidth of the element; Must be string (px, %, auto); By default: "600px"
        Width: "100%", // Set the Width; Must be string (px, %, auto); By default: "600px"
        Height: "", // Set the Height; Must be string (px, %, auto); By default: ""
        Margin: "0 10px 10px 0", // Set the Margin (top, right, bottom, left); Must be String; By default: "0 10px 10px 0"
        Float: "", // Positions element to the left or right; Must be string (left, right); By default: ""
        MouseDownHold: true, // If it is true it listen for Mouse Down Hold and set the following settings; Must be boolean; By default: true
        MouseDownHoldDelay: 500, // Set the Mouse Down Hold Delay at milliseconds; Must be integer; By default: 500
        MouseDownHoldSpeed: 20, // Set the Mouse Down Hold Speed at milliseconds; Must be integer; By default: 20
        StartValue: 0, // Set the start value; Must be integer; By default: 0
        MinValue: 0, // Set the minimum value; Must be integer; By default: 0
        MaxValue: false, // If it is true it sets the maximum value; Must be boolean; By default: false
        StepValue: 1, // Set step value; Must be integer; By default: 1
        IconPlus: "icon-up-dir", // Set the IconPlus from the ArtDesignIcons PlugIn; Must be string; By default: "icon-up-dir"
        IconMinus: "icon-down-dir", // Set the IconMinus from the ArtDesignIcons PlugIn; Must be string; By default: "icon-down-dir"
        Length: 0, // The length property returns the length of a string (number of characters); Must be integer; By default: 0
        Mark: '.', // Set a mark separator; Must be string; By default: '.'
        Thousand: ',', // Set a thousand separator; Must be string; By default: ','
        Prefix: "", // Put Prefix in order to prevent a conflict; Must be string; By default: ""
        Postfix: "" // Put Postfix in order to prevent a conflict; Must be string; By default: " $"
    },
    BrowserSupport: { // Settings for the browser support
        Chrome: 20, // Indicates the require minimum version of the Chrome browser; Must be integer; By default: 20
        Mozilla: 20, // Indicates the require minimum version of the Mozilla browser; Must be integer; By default: 20
        Opera: 20, // Indicates the require minimum version of the Opera browser; Must be integer; By default: 20
        Safari: 5, // Indicates the require minimum version of the Safari browser; Must be integer; By default: 5
        MSIE: 9, // Indicates the require minimum version of the MSIE browser; Must be integer; By default: 9
        MSEdge: 12 // Indicates the require minimum version of the MSEdge browser; Must be integer; By default: 12
    },
    Animation: { // Animation settings
        Speed: 0.4, // Speed of animation; Must be decimal; By default: 0.4
        Background: true, // If it is true this settings specifies the Background animation of the PlugIn; Must be boolean; By default: true
        Icon: true, // If it is true this settings specifies the Icon animation of the PlugIn; Must be boolean; By default: true
        Borders: true //  If it is true this settings specifies the Borders animation of the PlugIn; Must be boolean; By default: true
    },
    TopBottom: { // Settings for TopBottom
        Plus: { // Settings for Plus
            Width: "100%", // Set the Width; Must be string (px, %, auto); By default: "100%"
            Height: "25px", // Set the Height; Must be string (px, %, auto); By default: "25px"
            Background: { // Settings for Background colors; normal, hover and click
                Normal: {
                    BackgroundColor: "#FCFCFC" // Normal background color without gradient; By default: "#FCFCFC"
                },
                Hover: {
                    BackgroundColor: "#6488AA" // Hover background color without gradient; By default: "#6488AA"
                },
                Click: {
                    BackgroundColor: "#52708C" // Click background color without gradient; By default: "#52708C"
                }
            },
            Icon: { // Settings for the Icon
                FontSize: "18px", // Set the size of the font; Must be string (px, %); By default: "18px"
                LineHeight: "1.2em", // The line-height property specifies the line height of the element, negative values are not allowed; Must be integer or decimal; By default: "1.2em"
                Normal: {
                    Color: "#6488AA" // Normal background color without gradient; By default: "#6488AA"
                },
                Hover: {
                    Color: "#FCFCFC" // Hover background color without gradient; By default: "#FCFCFC"
                },
                Click: {
                    Color: "#FCFCFC" // Click background color without gradient; By default: "#FCFCFC"
                }
            },
            Border: { // Settings for the Border
                BorderStyle: "solid", // Set the style of the Border; Must be string; By default: "solid"
                BorderWidth: "1px 1px 0 1px", // Set the Width of the Border (top, right, bottom, left); Must be String; By default: "1px 1px 0 1px"
                Normal: {
                    BorderColor: "#6488AA", // Normal border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                },
                Hover: {
                    BorderColor: "#6488AA", // Hover border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                },
                Click: {
                    BorderColor: "#6488AA", // Click border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                }
            }
        },
        Minus: { // Settings for Minus
            Width: "100%", // Set the Width; Must be string (px, %, auto); By default: "100%"
            Height: "25px", // Set the Height; Must be string (px, %, auto); By default: "25px"
            Background: { // Settings for Background colors; normal, hover and click
                Normal: {
                    BackgroundColor: "#FCFCFC" // Normal background color without gradient; By default: "#FCFCFC"
                },
                Hover: {
                    BackgroundColor: "#6488AA" // Hover background color without gradient; By default: "#6488AA"
                },
                Click: {
                    BackgroundColor: "#52708C" // Click background color without gradient; By default: "#52708C"
                }
            },
            Icon: { // Settings for the Icon
                FontSize: "18px", // Set the size of the font; Must be string (px, %); By default: "18px"
                LineHeight: "1.3em", // The line-height property specifies the line height of the element, negative values are not allowed; Must be integer or decimal; By default: "1.3em"
                Normal: {
                    Color: "#6488AA" // Normal background color without gradient; By default: "#6488AA"
                },
                Hover: {
                    Color: "#FCFCFC" // Hover background color without gradient; By default: "#FCFCFC"
                },
                Click: {
                    Color: "#FCFCFC" // Click background color without gradient; By default: "#FCFCFC"
                }
            },
            Border: { // Settings for the Border
                BorderStyle: "solid", // Set the style of the Border; Must be string; By default: "solid"
                BorderWidth: "0 1px 1px 1px", // Set the Width of the Border (top, right, bottom, left); Must be String; By default: "0 1px 1px 1px"
                Normal: {
                    BorderColor: "#6488AA", // Normal border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                },
                Hover: {
                    BorderColor: "#6488AA", // Hover border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                },
                Click: {
                    BorderColor: "#6488AA", // Click border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                }
            }
        }
    },
    LeftRight: { // Settings for LeftRight
        Plus: { // Settings for Plus
            Width: "35px", // Set the Width; Must be string (px, %, auto); By default: "35px"
            Height: "35px", // Set the Height; Must be string (px, %, auto); By default: "35px"
            Background: { // Settings for Background colors; normal, hover and click
                Normal: {
                    BackgroundColor: "#FCFCFC" // Normal background color without gradient; By default: "#FCFCFC"
                },
                Hover: {
                    BackgroundColor: "#6488AA" // Hover background color without gradient; By default: "#6488AA"
                },
                Click: {
                    BackgroundColor: "#52708C" // Click background color without gradient; By default: "#52708C"
                }
            },
            Icon: { // Settings for the Icon
                FontSize: "18px", // Set the size of the font; Must be string (px, %); By default: "18px"
                LineHeight: "1.8em", // The line-height property specifies the line height of the element, negative values are not allowed; Must be integer or decimal; By default: "1.8em"
                Normal: {
                    Color: "#6488AA" // Normal background color without gradient; By default: "#6488AA"
                },
                Hover: {
                    Color: "#FCFCFC" // Hover background color without gradient; By default: "#FCFCFC"
                },
                Click: {
                    Color: "#FCFCFC" // Click background color without gradient; By default: "#FCFCFC"
                }
            },
            Border: { // Settings for the Border
                BorderStyle: "solid", // Set the style of the Border; Must be string; By default: "solid"
                BorderWidth: "1px 1px 1px 0", // Set the Width of the Border (top, right, bottom, left); Must be String; By default: "1px 1px 1px 0"
                Normal: {
                    BorderColor: "#6488AA", // Normal border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                },
                Hover: {
                    BorderColor: "#6488AA", // Hover border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                },
                Click: {
                    BorderColor: "#6488AA", // Click border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                }
            }
        },
        Minus: { // Settings for Minus
            Width: "35px", // Set the Width; Must be string (px, %, auto); By default: "35px"
            Height: "35px", // Set the Height; Must be string (px, %, auto); By default: "35px"
            Background: { // Settings for Background colors; normal, hover and click
                Normal: {
                    BackgroundColor: "#FCFCFC" // Normal background color without gradient; By default: "#FCFCFC"
                },
                Hover: {
                    BackgroundColor: "#6488AA" // Hover background color without gradient; By default: "#6488AA"
                },
                Click: {
                    BackgroundColor: "#52708C" // Click background color without gradient; By default: "#52708C"
                }
            },
            Icon: { // Settings for the Icon
                FontSize: "18px", // Set the size of the font; Must be string (px, %); By default: "18px"
                LineHeight: "1.9em", // The line-height property specifies the line height of the element, negative values are not allowed; Must be integer or decimal; By default: "1.9em"
                Normal: {
                    Color: "#6488AA" // Normal background color without gradient; By default: "#6488AA"
                },
                Hover: {
                    Color: "#FCFCFC" // Hover background color without gradient; By default: "#FCFCFC"
                },
                Click: {
                    Color: "#FCFCFC" // Click background color without gradient; By default: "#FCFCFC"
                }
            },
            Border: { // Settings for the Border
                BorderStyle: "solid", // Set the style of the Border; Must be string; By default: "solid"
                BorderWidth: "1px 0 1px 1px", // Set the Width of the Border (top, right, bottom, left); Must be String; By default: "1px 0 1px 1px"
                Normal: {
                    BorderColor: "#6488AA", // Normal border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                },
                Hover: {
                    BorderColor: "#6488AA", // Hover border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                },
                Click: {
                    BorderColor: "#6488AA", // Click border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                }
            }
        }
    },
    Top: { // Settings for Top
        BorderStyle: "solid", // Set the style of the Border; Must be string; By default: "solid"
        Plus: { // Settings for Plus
            Width: "50%", // Set the Width; Must be string (px, %, auto); By default: "50%"
            Height: "25px", // Set the Height; Must be string (px, %, auto); By default: "25px"
            Background: { // Settings for Background colors; normal, hover and click
                Normal: {
                    BackgroundColor: "#FCFCFC" // Normal background color without gradient; By default: "#FCFCFC"
                },
                Hover: {
                    BackgroundColor: "#6488AA" // Hover background color without gradient; By default: "#6488AA"
                },
                Click: {
                    BackgroundColor: "#52708C" // Click background color without gradient; By default: "#52708C"
                }
            },
            Icon: { // Settings for the Icon
                FontSize: "18px", // Set the size of the font; Must be string (px, %); By default: "18px"
                LineHeight: "1.2em", // The line-height property specifies the line height of the element, negative values are not allowed; Must be integer or decimal; By default: "1.2em"
                Normal: {
                    Color: "#6488AA" // Normal background color without gradient; By default: "#6488AA"
                },
                Hover: {
                    Color: "#FCFCFC" // Hover background color without gradient; By default: "#FCFCFC"
                },
                Click: {
                    Color: "#FCFCFC" // Click background color without gradient; By default: "#FCFCFC"
                }
            },
            Border: { // Settings for the Border
                BorderStyle: "solid", // Set the style of the Border; Must be string; By default: "solid"
                BorderWidth: "1px 1px 0 0", // Set the Width of the Border (top, right, bottom, left); Must be String; By default: "1px 1px 0 0"
                Normal: {
                    BorderColor: "#6488AA", // Normal border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                },
                Hover: {
                    BorderColor: "#6488AA", // Hover border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                },
                Click: {
                    BorderColor: "#6488AA", // Click border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                }
            }
        },
        Minus: { // Settings for Minus
            Width: "50%", // Set the Width; Must be string (px, %, auto); By default: "50%"
            Height: "25px", // Set the Height; Must be string (px, %, auto); By default: "25px"
            Background: { // Settings for Background colors; normal, hover and click
                Normal: {
                    BackgroundColor: "#FCFCFC" // Normal background color without gradient; By default: "#FCFCFC"
                },
                Hover: {
                    BackgroundColor: "#6488AA" // Hover background color without gradient; By default: "#6488AA"
                },
                Click: {
                    BackgroundColor: "#52708C" // Click background color without gradient; By default: "#52708C"
                }
            },
            Icon: { // Settings for the Icon
                FontSize: "18px", // Set the size of the font; Must be string (px, %); By default: "18px"
                LineHeight: "1.3em", // The line-height property specifies the line height of the element, negative values are not allowed; Must be integer or decimal; By default: "1.3em"
                Normal: {
                    Color: "#6488AA" // Normal background color without gradient; By default: "#6488AA"
                },
                Hover: {
                    Color: "#FCFCFC" // Hover background color without gradient; By default: "#FCFCFC"
                },
                Click: {
                    Color: "#FCFCFC" // Click background color without gradient; By default: "#FCFCFC"
                }
            },
            Border: { // Settings for the Border
                BorderStyle: "solid", // Set the style of the Border; Must be string; By default: "solid"
                BorderWidth: "1px 1px 0 1px", // Set the Width of the Border (top, right, bottom, left); Must be String; By default: "1px 1px 0 1px"
                Normal: {
                    BorderColor: "#6488AA", // Normal border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                },
                Hover: {
                    BorderColor: "#6488AA", // Hover border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                },
                Click: {
                    BorderColor: "#6488AA", // Click border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                }
            }

        }
    },
    Bottom: { // Settings for Bottom
        Plus: { // Settings for Plus
            Width: "", // Set the Width; Must be string (px, %, auto); By default: ""
            Height: "25px", // Set the Height; Must be string (px, %, auto); By default: "25px"
            Background: { // Settings for Background colors; normal, hover and click
                Normal: {
                    BackgroundColor: "#FCFCFC" // Normal background color without gradient; By default: "#FCFCFC"
                },
                Hover: {
                    BackgroundColor: "#6488AA" // Hover background color without gradient; By default: "#6488AA"
                },
                Click: {
                    BackgroundColor: "#52708C" // Click background color without gradient; By default: "#52708C"
                }
            },
            Icon: { // Settings for the Icon
                FontSize: "18px", // Set the size of the font; Must be string (px, %); By default: "18px"
                LineHeight: "1.2em", // The line-height property specifies the line height of the element, negative values are not allowed; Must be integer or decimal; By default: "1.2em"
                Normal: {
                    Color: "#6488AA" // Normal background color without gradient; By default: "#6488AA"
                },
                Hover: {
                    Color: "#FCFCFC" // Hover background color without gradient; By default: "#FCFCFC"
                },
                Click: {
                    Color: "#FCFCFC" // Click background color without gradient; By default: "#FCFCFC"
                }
            },
            Border: { // Settings for the Border
                BorderStyle: "solid", // Set the style of the Border; Must be string; By default: "solid"
                BorderWidth: "0 1px 1px 0", // Set the Width of the Border (top, right, bottom, left); Must be String; By default: "0 1px 1px 0"
                Normal: {
                    BorderColor: "#6488AA", // Normal border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                },
                Hover: {
                    BorderColor: "#6488AA", // Hover border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                },
                Click: {
                    BorderColor: "#6488AA", // Click border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                }
            }
        },
        Minus: { // Settings for Minus
            Width: "", // Set the Width; Must be string (px, %, auto); By default: ""
            Height: "25px", // Set the Height; Must be string (px, %, auto); By default: "25px"
            Background: { // Settings for Background colors; normal, hover and click
                Normal: {
                    BackgroundColor: "#FCFCFC" // Normal background color without gradient; By default: "#FCFCFC"
                },
                Hover: {
                    BackgroundColor: "#6488AA" // Hover background color without gradient; By default: "#6488AA"
                },
                Click: {
                    BackgroundColor: "#52708C" // Click background color without gradient; By default: "#52708C"
                }
            },
            Icon: { // Settings for the Icon
                FontSize: "18px", // Set the size of the font; Must be string (px, %); By default: "18px"
                LineHeight: "1.3em", // The line-height property specifies the line height of the element, negative values are not allowed; Must be integer or decimal; By default: "1.3em"
                Normal: {
                    Color: "#6488AA" // Normal background color without gradient; By default: "#6488AA"
                },
                Hover: {
                    Color: "#FCFCFC" // Hover background color without gradient; By default: "#FCFCFC"
                },
                Click: {
                    Color: "#FCFCFC" // Click background color without gradient; By default: "#FCFCFC"
                }
            },
            Border: { // Settings for the Border
                BorderStyle: "solid", // Set the style of the Border; Must be string; By default: "solid"
                BorderWidth: "0 1px 1px 1px", // Set the Width of the Border (top, right, bottom, left); Must be String; By default: "0 1px 1px 1px"
                Normal: {
                    BorderColor: "#6488AA", // Normal border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                },
                Hover: {
                    BorderColor: "#6488AA", // Hover border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                },
                Click: {
                    BorderColor: "#6488AA", // Click border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                }
            }
        }
    },
    Left: { // Settings for Left
        Plus: { // Settings for Plus
            Width: "35px", // Set the Width; Must be string (px, %, auto); By default: "35px"
            Height: "17px", // Set the Height; Must be string (px, %, auto); By default: "17px"
            Background: { // Settings for Background colors; normal, hover and click
                Normal: {
                    BackgroundColor: "#FCFCFC" // Normal background color without gradient; By default: "#FCFCFC"
                },
                Hover: {
                    BackgroundColor: "#6488AA" // Hover background color without gradient; By default: "#6488AA"
                },
                Click: {
                    BackgroundColor: "#52708C" // Click background color without gradient; By default: "#52708C"
                }
            },
            Icon: { // Settings for the Icon
                FontSize: "18px", // Set the size of the font; Must be string (px, %); By default: "18px"
                LineHeight: "0.8em", // The line-height property specifies the line height of the element, negative values are not allowed; Must be integer or decimal; By default: "0.8em"
                Normal: {
                    Color: "#6488AA" // Normal background color without gradient; By default: "#6488AA"
                },
                Hover: {
                    Color: "#FCFCFC" // Hover background color without gradient; By default: "#FCFCFC"
                },
                Click: {
                    Color: "#FCFCFC" // Click background color without gradient; By default: "#FCFCFC"
                }
            },
            Border: { // Settings for the Border
                BorderStyle: "solid", // Set the style of the Border; Must be string; By default: "solid"
                BorderWidth: "1px 0 0 1px", // Set the Width of the Border (top, right, bottom, left); Must be String; By default: "1px 0 0 1px"
                Normal: {
                    BorderColor: "#6488AA", // Normal border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                },
                Hover: {
                    BorderColor: "#6488AA", // Hover border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                },
                Click: {
                    BorderColor: "#6488AA", // Click border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                }
            }
        },
        Minus: { // Settings for Minus
            Width: "35px", // Set the Width; Must be string (px, %, auto); By default: "35px"
            Height: "18px", // Set the Height; Must be string (px, %, auto); By default: "18px"
            Background: { // Settings for Background colors; normal, hover and click
                Normal: {
                    BackgroundColor: "#FCFCFC" // Normal background color without gradient; By default: "#FCFCFC"
                },
                Hover: {
                    BackgroundColor: "#6488AA" // Hover background color without gradient; By default: "#6488AA"
                },
                Click: {
                    BackgroundColor: "#52708C" // Click background color without gradient; By default: "#52708C"
                }
            },
            Icon: { // Settings for the Icon
                FontSize: "18px", // Set the size of the font; Must be string (px, %); By default: "18px"
                LineHeight: "0.8em", // The line-height property specifies the line height of the element, negative values are not allowed; Must be integer or decimal; By default: "0.8em"
                Normal: {
                    Color: "#6488AA" // Normal background color without gradient; By default: "#6488AA"
                },
                Hover: {
                    Color: "#FCFCFC" // Hover background color without gradient; By default: "#FCFCFC"
                },
                Click: {
                    Color: "#FCFCFC" // Click background color without gradient; By default: "#FCFCFC"
                }
            },
            Border: { // Settings for the Border
                BorderStyle: "solid", // Set the style of the Border; Must be string; By default: "solid"
                BorderWidth: "1px 0 1px 1px", // Set the Width of the Border (top, right, bottom, left); Must be String; By default: "1px 0 1px 1px"
                Normal: {
                    BorderColor: "#6488AA", // Normal border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                },
                Hover: {
                    BorderColor: "#6488AA", // Hover border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                },
                Click: {
                    BorderColor: "#6488AA", // Click border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                }
            }
        }
    },
    Right: { // Settings for Right
        BorderStyle: "solid", // Set the style of the Border; Must be string; By default: "solid"
        Plus: { // Settings for Plus
            Width: "35px", // Set the Width; Must be string (px, %, auto); By default: "35px"
            Height: "17px", // Set the Height; Must be string (px, %, auto); By default: "17px"
            Background: { // Settings for Background colors; normal, hover and click
                Normal: {
                    BackgroundColor: "#FCFCFC" // Normal background color without gradient; By default: "#FCFCFC"
                },
                Hover: {
                    BackgroundColor: "#6488AA" // Hover background color without gradient; By default: "#6488AA"
                },
                Click: {
                    BackgroundColor: "#52708C" // Click background color without gradient; By default: "#52708C"
                }
            },
            Icon: { // Settings for the Icon
                FontSize: "18px", // Set the size of the font; Must be string (px, %); By default: "18px"
                LineHeight: "0.8em", // The line-height property specifies the line height of the element, negative values are not allowed; Must be integer or decimal; By default: "0.8em"
                Normal: {
                    Color: "#6488AA" // Normal background color without gradient; By default: "#6488AA"
                },
                Hover: {
                    Color: "#FCFCFC" // Hover background color without gradient; By default: "#FCFCFC"
                },
                Click: {
                    Color: "#FCFCFC" // Click background color without gradient; By default: "#FCFCFC"
                }
            },
            Border: { // Settings for the Border
                BorderStyle: "solid", // Set the style of the Border; Must be string; By default: "solid"
                BorderWidth: "1px 1px 0 0", // Set the Width of the Border (top, right, bottom, left); Must be String; By default: "1px 1px 0 0"
                Normal: {
                    BorderColor: "#6488AA", // Normal border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                },
                Hover: {
                    BorderColor: "#6488AA", // Hover border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                },
                Click: {
                    BorderColor: "#6488AA", // Click border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                }
            }
        },
        Minus: { // Settings for Minus
            Width: "35px", // Set the Width; Must be string (px, %, auto); By default: "35px"
            Height: "18px", // Set the Height; Must be string (px, %, auto); By default: "18px"
            Background: { // Settings for Background colors; normal, hover and click
                Normal: {
                    BackgroundColor: "#FCFCFC" // Normal background color without gradient; By default: "#FCFCFC"
                },
                Hover: {
                    BackgroundColor: "#6488AA" // Hover background color without gradient; By default: "#6488AA"
                },
                Click: {
                    BackgroundColor: "#52708C" // Click background color without gradient; By default: "#52708C"
                }
            },
            Icon: { // Settings for the Icon
                FontSize: "18px", // Set the size of the font; Must be string (px, %); By default: "18px"
                LineHeight: "0.8em", // The line-height property specifies the line height of the element, negative values are not allowed; Must be integer or decimal; By default: "0.8em"
                Normal: {
                    Color: "#6488AA" // Normal background color without gradient; By default: "#6488AA"
                },
                Hover: {
                    Color: "#FCFCFC" // Hover background color without gradient; By default: "#FCFCFC"
                },
                Click: {
                    Color: "#FCFCFC" // Click background color without gradient; By default: "#FCFCFC"
                }
            },
            Border: { // Settings for the Border
                BorderStyle: "solid", // Set the style of the Border; Must be string; By default: "solid"
                BorderWidth: "1px 1px 1px 0", // Set the Width of the Border (top, right, bottom, left); Must be String; By default: "1px 1px 1px 0"
                Normal: {
                    BorderColor: "#6488AA", // Normal border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                },
                Hover: {
                    BorderColor: "#6488AA", // Hover border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                },
                Click: {
                    BorderColor: "#6488AA", // Click border color without gradient; By default: "#6488AA"
                    BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
                }
            }
        }
    },
    MouseOver: function() {},
    MouseOut: function() {}
</script>