Changing Display of Characteristics

How can I change the display of the variants on the product page? Like the background of the field box spacing between the field boxes, etc.

You should be able to do all that with CSS... If you have more precise questions with a link to the page so that we can look at it with firebug, we could answer more precisely.

If you go to the page daydreamercreative.cloudaccess.net/tees/...egory_pathway-0.html
you'll see how the size, style, and color variants are stacked on top of one another and how the background is gray. That is what I would like to alter.

So, for the spacing, you need to edit the front end CSS of HikaShop via the interface in the tab display of the configuration and add the code:
.hikashop_product_characteristics_table select{
margin : 5px;
}

For the grey background, that's because of your template. You need to edit the file daydreamercreative.cloudaccess.net/templ...irit_39/css/main.css and remove the line:
background: url("../images/black-08.png") repeat scroll left top transparent !important;

from the code:
.inputbox {
-moz-border-bottom-colors: none !important;
-moz-border-image: none !important;
-moz-border-left-colors: none !important;
-moz-border-right-colors: none !important;
-moz-border-top-colors: none !important;
background: url("../images/black-08.png") repeat scroll left top transparent !important;
border-color: #BBBBBB #DDDDDD #DDDDDD #BBBBBB !important;
border-radius: 4px 4px 4px 4px;
border-style: solid !important;
border-width: 1px !important;
margin: 0;
}