jQuery(document).ready(function() {
    var contactForm = jQuery('#contact-form-content').find('form');
    
    // Apply hover styling to the custom "<select>" element
    contactForm.find('select.styled').live('mouseenter mouseleave', function(evt) {
        var customSelect = jQuery(this).siblings('span.select');
        if (evt.type == 'mouseenter') {
            customSelect.addClass('hovered');
        }
        else {
            customSelect.removeClass('hovered');
        }
    });
    
    // Handle clicks on the parts of the fake <select> not overlayed by the real <select>
    contactForm.find('span.select').live('click', function(evt) {
        jQuery(this).siblings('select.styled').select();
    });
    
});