Cannot change CSS to put bullet icon on right of menu item

I am trying to add some CSS to my theme, so that when I use the DHTML Menu, the bullet icon which expands/collapses the menu item is shown right aligned on the menu block, instead of on the left. Also, I have found that the clickable region on the menu item where the bullet is found, seems to be variable width, depending on the depth of the menu item in the menu tree - I am not sure why. I am not a CSS expert, so I thought maybe that somebody who is familiar with this 4.x-dev version of DHTML menu, and also more familiar with CSS can help me fix the problem ?

I have attached a jpeg which shows an example of what the menu looks like with my CSS changes. The boxed area on right is shown so that it is clear where the clickable area is for each menu item. If I remove this border the menu works same way, but it is not so easy to show for purposes of this issue without the border. The objective is to have the + and - icons underneath the dot (.) icon on the leaf nodes. Also, the width of the clickable region on the menu items where + or - icon is shown should be same instead of changing width. The border around this region shows that the region seems to be too wide and this means there is less room for menu text.

I have also attached a zip containing the CSS which I am using.

I hope somebody can help me with this. I would be very grateful if somebody could take a look at the CSS and the example and see if they have any ideas for me to try.