got it! slowly figuring it out but this style sheet code needs to be added to additional.css to get the layout working correctly. There may be more that needs to be added but at least this is a start.
PHP Code:
<!-- footer style sheet coding to define the columns etc and layout -->
/*footer*/
#body_footer {
background: #f2f2f2 url(images/tf_ideal/blue/misc/tdg_bg.png) repeat-x top;
border-top: 1px solid #dddddd;
border-bottom: 1px solid #f8f8f8;
padding: 10px 0px;
text-shadow: 0 0 0 transparent, 0px 1px 0px #ffffff;
}
#contenttypeid .textbox, textarea, select {
border: 1px solid #dddddd;
}
.footer_select {
margin: 7px 10px 0px 0px;
}
.footer_copyright {
text-align: right;
margin-top: 0px;
}
#footer_time .time {
color: #cccccc;
}
.footer_time {
padding: 20px 0px 10px 0px;
}
.footer {
text-align: left;
float: left;
margin-top: 0px;
padding: 0px;
}
.footer_links {
margin: 0px;
}
.footer_links li {
margin-right: 7px;
margin-left: 0px;
padding: 0px;
}
#foot .footer_links li {
padding: 0px;
}
#foot {
background: #004061 url(images/tf_ideal/blue/misc/b_bg.jpg) repeat-x top center;
border-top: 1px solid #3f3f3f;
line-height: 19px;
text-shadow: 0 0 0 transparent, 0 1px 0 #000000;
}
#foot li {
padding-bottom: 5px;
}
#foot_top {
color: #aaaaaa;
padding: 25px 0px 20px 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
#foot_top a {
color: #ffffff;
}
#foot_top a:hover {
color: #aaaaaa;
}
#foot_bottom {
font-size: 12px;
padding: 0px 0px 0px 0px;
background: #222222;
color: #aaaaaa;
text-align: center;
border-top: 1px solid #3f3f3f;
}
#foot_bottom a {
color: #ffffff;
}
#foot_bottom a:hover {
color: #aaaaaa;
}
#foot_bottom_inner {
padding: 15px 0px;
}
.footer_morecopyright {
color: #888888;
font-size: 12px;
text-align: left;
float: right;
margin-top: 0px;
padding-bottom: 0px;
}
.footer_column_inner {
padding: 0px 15px;
}
#footer_column_1 {
float: left;
width: 20%;
text-align: left;
}
#footer_column_2 {
float: left;
width: 20%;
text-align: left;
}
#footer_column_3 {
float: left;
width: 35%;
text-align: left;
}
#footer_column_4 {
float: right;
width: 25%;
text-align: left;
}
.footer_column_header {
padding-bottom: 8px;
text-align: left;
font-family: Helvetica, Geneva;
text-transform: uppercase;
font-size: 14px;
color: #bde5ff;
}
#social_icons_footer {
clear: both;
text-align: left;
padding-bottom: 15px;
}
#social_icons_footer img {
margin-top: 4px;
margin-right: 4px;
opacity: 0.6;
}
#social_icons_footer img:hover {
-webkit-transition: all 0.25s ease-in-out 0s;
-moz-transition: all 0.25s ease-in-out 0s;
-o-transition: all 0.25s ease-in-out 0s;
transition: all 0.25s ease-in-out 0s;
opacity: 1;
}
.searchbutton {
margin: 1px 0px 0px 2px;
-webkit-transition: all 0.15s ease-in-out 0s;
-moz-transition: all 0.15s ease-in-out 0s;
-o-transition: all 0.15s ease-in-out 0s;
transition: all 0.15s ease-in-out 0s;
box-shadow: 0 0 5px #004061;
}
.searchbutton:hover {
box-shadow: 0 0 6px #9dbbff;
}
.footer_search .textbox,
.footer_search textarea,
.footer_search select {
background: #ffffff url(images/tf_ideal/blue/misc/textbox_bg.png) repeat-x bottom;
color: #222222;
border: 1px solid #004061;
text-shadow: 0 0 0 transparent, 0 1px 0 #ffffff;
}
.footer_search .textbox:focus {
box-shadow: 0 0 5px #9dbbff;
border: 1px solid #555555;
}
.footer_search .textbox {
width: 165px;
height: 15px;
float: left;
}
#footer_advanced_search {
margin: 5px 0px 20px 0px;
font-size: 10px;
text-align: left;
}
#footer_advanced_search a {
color: #aaaaaa;
}
#footer_advanced_search a:hover {
color: #ffffff;
}
<!-- end of style for the footer -->