Here is the current code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Home Page</title>
<style type="text/css">
body {
background: #036;
text-align: center;
background-repeat: repeat-x;
background-color: #000;
background-image: url(images/crimsonbg.jpg);
}
html.body {
padding: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 0px;
width: 970px;
position: relative;
margin-top: 25px;
}
#wrapper {
height: 0px;
width: 970px;
text-align: left;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
}
#header {
background-color: #FFF;
width: 970px;
position: relative;
height: 61px;
float: left;
}
#logo_box {
height: 269px;
width: 366px;
position: absolute;
z-index: 500;
left: -130px;
}
.shadowinsidediv {
height: 260px;
width: 188px;
margin-left: 174px;
position: absolute;
-webkit-box-shadow: 0px 0px 10px 5px #666;
margin-top: 10px;
z-index: 100;
}
#sidebar {
height: 668px;
width: 245px;
position: absolute;
float: left;
background-repeat: no-repeat;
margin-left: 10px;
background-image: url(images/left-sidebar-for-main-page-only.png);
}
#nav_bar {
height: 46px;
width: 707px;
float: left;
padding-left: 263px;
}
#side_captions {
height: 725px;
width: 225px;
padding-left: 20px;
z-index: 100;
margin-top: 0px;
padding-top: 0px;
}
#main_visual {
height: 675px;
width: 970px;
float: left;
}
#photobox {
float: right;
height: 670px;
width: 720px;
background-image: url(images/homezakim-bunker-hill-bridge.jpg);
background-repeat: no-repeat;
}
#footer {
clear: both;
height: 350px;
width: 720px;
padding-left: 250px;
padding-top: 1px;
margin-top: 0px;
}
#browser_whitebar {
background-color: #FFF;
height: 120px;
width: auto;
}
body,td,th {
font-family: Georgia, "Times New Roman", Times, serif;
}
h5 {
font-size: 42px;
color: #FFF;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
text-align: center;
line-height: normal;
vertical-align: top;
white-space: normal;
}
h1 {
font-size: 42px;
color: #244FB3;
}
h2 {
font-size: 17px;
color: #666;
}
h3 {
font-size: 17px;
color: #000;
}
h4 {
font-size: 17px;
color: #000;
}
a {
font-size: 17px;
color: #03F;
}
a:visited {
color: #660000;
}
a:hover {
color: #FFF;
}
a:active {
color: #666;
}
.shadowinsidediv {
height: 260px;
width: 188px;
margin-top: 10px;
margin-left: 44px;
position: absolute;
-webkit-box-shadow: 0px 0px 10px 5px #666;
}
.animationhomepage {
float: left;
height: 225px;
width: 210px;
}
.indrustrylogos {
float: left;
height: 75px;
width: 180px;
margin-top: 50px;
margin-left: -5px;
}
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="scripts/jquery-1.6.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.all.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2559022: #slideshow */
#slideshow {
padding: 10px;
margin:0;
}
#slideshow img, #slideshow div {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin: 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 40px;
font-weight: normal;
color: #FFF;
padding-top: 60px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 35px;
line-height: 75%;
}
/* EndOAWidget_Instance_2559022 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2559022" binding="#slideshow" />
</oa:widgets>
-->
</script>
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo_box"><img src="images/tensor-final-logo-website.png" alt="logo_leftinclude" width="362" height="270" /></div>
<div class="shadowinsidediv"></div>
</div>
<div id="nav_bar">
<div id="nav_position">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">HOME</a> </li>
<li><a href="about.html">ABOUT US</a>
<ul>
<li><a href="founder.html">FOUNDER</a></li>
<li><a href="management.html">MANAGEMENT</a></li>
</ul>
</li>
<li><a href="capabilities.html">CAPABILITIES</a> </li>
<li><a href="portfolio.html">PORTFOLIO</a>
<ul>
<li><a href="arch.html">ARCH</a></li>
<li><a href="bascule.html">BASCULE</a></li>
<li><a href="boxgirder.html">BOX GIRDER</a></li>
<li><a href="cablestayed.html">CABLE STAYED</a></li>
<li><a href="plate-girder.html">PLATE GIRDER</a></li>
<li><a href="truss.html">TRUSS</a></li>
<li><a href="vertical-lift.html">VERTICAL LIFT</a></li>
<li><a href="suspension.html">SUSPENSION</a></li>
</ul>
</li>
<li><a href="awards.html">AWARDS</a></li>
<li><a href="contact.html">CONTACT </a></li>
<li><a href="http://blog.tensorengr.com/?m=201205">BLOG</a></li>
</ul>
</div>
</div>
<div id="main_visual">
<div id="photobox">
<script type="text/javascript">
// BeginOAWidget_Instance_2559022: #slideshow
slideshowAddCaption=false;
$(document).ready(function() {
$('#slideshow').cycle({
after: slideshowOnCycleAfter, //the function that is triggered after each transition
autostop: true, // true to end slideshow after X transitions (where X == slide count)
fx: 'fade,turnRight,',// name of transition effect
pause: false, // true to enable pause on hover
randomizeEffects: false, // valid when multiple effects are used; true to make the effect sequence random
speed: 1000, // speed of the transition (any valid fx speed value)
sync: true, // true if in/out transitions should occur simultaneously
timeout: 3000, // milliseconds between slide transitions (0 to disable auto advance)
fit: true,
height: '500px',
width: '650px' // container width (if the 'fit' option is true, the slides will be set to this width as well)
});
});
function slideshowOnCycleAfter() {
if (slideshowAddCaption==false){
$('#slideshow-caption').html(this.title);
}
}
// EndOAWidget_Instance_2559022
</script>
<div id="slideshow">
<!--All elements inside this will become slides-->
<div title="">Tensor Engineering</div>
<div title="sample title">
Tensor Engineering
<p>Building Bridges to the Future . . . </p>
</div>
</div>
</div>
<div id="sidebar">
<div id="side_captions">
<h2><br />
</h2>
<h2> </h2>
<h2> </h2>
<h2> </h2>
<h2> </h2>
<h2>Welcome to the </h2>
<h2>Tensor Engineering </h2>
<h2>Website</h2>
<img src="gif-files/Animation1.gif" width="210" height="225" alt="bridgeproject animation" />
<div class="indrustrylogos"><img src="images/organizationsymbols.png" width="180" height="55" alt="organizational symbols" /></div>
</div>
</div>
</div>
<p> </p>
<p> </p>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>