Chevron as sub-arrow?

Using SmartMenus, how can I use a chevron for the sub-arrow instead of the + character or an image?

HTML

<script src="http://unitedwaytoronto.com/prototype/js/jquery.smartmenus.js"></script>
<div class="pagecontainer">
    <!--Small menu - See: http://www.smartmenus.org/docs/-->
    <div class="smallnav">
        <ul class="main-menu sm sm-simple">
            <li class="menuItem1 first parent selected"><a>Menu item 1</a>

                <ul class="nccUlMenuSub1">
                    <li class="menuItem1 first parent selected"><a>Sub item 1.1</a>

                        <ul class="nccUlMenuSub2">
                            <li class="menuItem1 first"><a>Subitem 1.1.1</a>
                            </li>
                            <li class="menuItem2 selected last"><a class="selected" href="#">Subitem 1.1.2</a>
                            </li>
                        </ul>
                    </li>
                    <li class="menuItem2 last"><a>Subitem 1.2</a>
                    </li>
                </ul>
            </li>
            <li class="menuItem2 last parent"><a>Menu item 2</a>

                <ul class="nccUlMenuSub1">
                    <li class="menuItem1 first last"><a>Subitem 2.1</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <!--End small nav-->
    <div id="content">
        <div id="contentbuckets" class="row clearfix">content goes here</div>
    </div>
    <!--End Content-->
</div>
<!--End pagecontainer-->
<script src="js/jquery.smartmenus.js"></script>
<script>
    $(function() {
        $('.main-menu').smartmenus();
    });
</script>

CSS

/*Core SmartMenu CSS (do not edit this)*/
 .sm, .sm ul, .sm li {
    display:block;
    list-style:none;
    padding:0;
    margin:0;
    line-height:normal;
    direction:ltr;
}
ul.sm li {
    position:relative;
}
ul.sm a {
    position:relative;
    display:block;
}
ul.sm a.disabled {
    cursor:default;
}
ul.sm ul {
    position:absolute;
    top:-999999px;
    left:-800px;
    width:100px;
}
ul.sm li {
    float:left;
}
ul.sm-rtl {
    direction:rtl;
}
ul.sm-rtl li {
    float:right;
}
ul.sm ul li, ul.sm-vertical li {
    float:none;
}
ul.sm a {
    white-space:nowrap;
}
ul.sm ul a, ul.sm-vertical a {
    white-space:normal;
}
* html ul.sm-vertical li {
    float:left;
    width:100%;
}
* html ul.sm-vertical ul li {
    float:none;
    width:auto;
}
*:first-child+html ul.sm-vertical>li {
    float:left;
    width:100%;
}
ul.sm ul.sm-nowrap>li>a {
    white-space:nowrap;
}
ul.sm:after {
    content:"\00a0";
    display:block;
    height:0;
    font:0/0 serif;
    clear:both;
    visibility:hidden;
    overflow:hidden;
}
* html ul.sm {
    height:1px;
}
*:first-child+html ul.sm {
    min-height:1px;
}
ul.sm li *, ul.sm li *:before, ul.sm li *:after {
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
}
ul.sm {
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}
/*SmartMenu CSS that you can customize*/

/* Menu box
===================*/
 .sm-simple, .sm-simple ul {
    border:0;
    background:#fff;
}
/* Menu items
===================*/
 .sm-simple a {
    padding:0.4rem 0.8rem;
    color:#000;
    font-size:1rem;
    line-height:1.5rem;
    text-decoration:none;
}
.sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active, .sm-simple a.highlighted {
    background:#eee;
    color:#000;
}
.sm-simple a.has-submenu {
    padding-right:2rem;
}
.sm-simple ul a.has-submenu {
    padding-right:1rem;
}
.sm-simple > li > a {
    text-transform: uppercase;
}
.sm-simple > li > a:hover, .sm-simple > li > a:focus, .sm-simple >...