var hideJoinLink = false;
 var leftArrow = 'http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/leftarrow.gif';
 var rightArrow = 'http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/rightarrow.gif';
 var joinTitle = 'Come to the Dark Side';

<style type="text/css">
.tooltip, .preview, .screenshot { cursor:pointer; }
#tooltip, #tooltip2, #preview, #screenshot { color:#dddddd; background:#222222; border: 1px solid #333333; padding:5px; display:none; opacity: 0.9; filter: alpha(opacity=90); text-align:left; border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; }
.BannerArea { padding-bottom: 0 }
</style>

<div id="username" style="display:none;"></div>
<script type="text/javascript">
$(document).ready(function(){
 var hideJoinLink = false;
 var leftArrow = 'http://i144.photobucket.com/albums/r175/basteta/Rangers/horde_small.jpg';
 var rightArrow = 'http://i144.photobucket.com/albums/r175/basteta/Rangers/horde_small.jpg';
 var joinTitle = 'Welcome to the Horde';
// don't change anything below
 var newtitle = prefix + $('#username').text() + suffix;
 $('#username').closest('div.ContentBox').find('.ContentBoxTitle,.ContentBoxTitleNoBackground').text(newtitle);

 // Don't change anything below
 // ***************************
 var tm = $('.WfTopmenu');
 var sm = $('.gpWidget-sitenav a[href*=FillApp]');
 if (hideJoinLink) {
  tm.find('.welcomeBullet').parent().after('').hide();
  sm.parent().hide();
 } else if (tm.length) {
  tm.find(".welcomeBullet:eq(0)").html('');
  tm.find(".welcomeBullet:eq(1)").html('');
  tm.find("b:contains('Join')").html(joinTitle);
 } else {
  sm.find("b:contains('Join')").html(joinTitle);
  sm.prev('img').attr('src',leftArrow);
  sm.next('img').attr('src',rightArrow);
 }
})
</script>

• Well, first off, don't use Wordpad (it's a rich text editor and not really compatible with working with raw code). Use Notepad or just paste the code directly into the site editor.
• You are missing the modified tooltip script, add this into your footer HTML
  
   <script src="http://www.axiomfiles.com/Files/258012/tooltip.js" type="text/javascript"></script>
  
  
• The script you are using to replace the content box title (or welcome widget title, I'm guessing) will not work in the page footer. It is designed to be added INSIDE of a Free Form Text/HTML or Welcome widget. And I'm not sure why you have it twice in the footer.
• I'm not sure where the script I posted above when to, so you may have to make sure the editor is in Raw/Script mode (link in the upper right corner of the editor) before pasting/saving the content.
• You Recruitment widget works perfectly after I added the tooltip script.

• Full Custom CSS:
  • Set BannerArea padding and added a BannerArea table definition
  • Added Tooltip CSS here. Set a width to 250px and increased the padding to 8px
  • Increased Shout box widget height to 200px
• Footer Area, now contains
  
  • Tooltip script
  • Welcome message icon script
• Custom Javascript/jQuery
  • Moved hide edit button script here
  • Added script to remove space under the banner (can't get to it with CSS easily)
  • Added script to move shout box input to the top
• Home Page Recruitment Box
  • Changed colorBackground to true
  • added useClassColors and set it to false
  • Removed space between the "deathknight" definition... no spaces allowed!
  • Added missing brackets/parentheis
• Home Page Code Box
  • Adjusted shout box image script to limit max image height to 40px
  • Adding missing brackets/parenthesis
  • Added code to hide the code box