OK. One more time. Replace what you have now with this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>New City Explorer</title>
<!--[if lte IE 8]>
<script type="text/javascript" src="javascript/html5.js"></script>
<![endif]-->
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<link href="textboxes/text-boxes-finished-files/css/boxes.css" rel="stylesheet" type="text/css">
<style type="text/css">
/**THIS IS FOR PAGE SPECIFIC STYLES, OTHERWISE PUT THESE RULES INTO AN EXTERNAL STYLE SHEET**/
/**add vertical scrollbar channel to short pages**/
html {overflow-y:scroll}
body {
margin:0;
padding:0;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 90%;
color: #000;
background-color: #FFF;
border: 1px solid #000;
}
#container {
width: 925px; /**adjust width as needed**/
margin:0 auto; /**with width, this is centered on screen**/
padding: 12px;
font-size: 16px;
overflow:hidden; /**to contain floats**/
}
#Logo {
background-image: url(Pictures/Logo_2.png);
background-repeat: no-repeat;
height: 80px;
width: 950px; /**adjust width to match your image**/
float: left;
}
#rightSidebar {
float:right;
margin-top: 188px; /**adjust as needed**/
width: 155px;
min-height: 300px;
border-left: 1px dotted silver;
}
/**clear floats after**/
#rightSidebar:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: right;
height: 0;
}
#wrapper {
width: 1100px;
margin:0 auto; /**centered**/
}
/**clear nav floats**/
nav:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
section {margin-top: 25px;}
section h1 {
margin:0;
color: #000;
font-size:30px;
text-align:center;
margin-top: 45px;
font-weight:bold;
font-family: Georgia, "Times New Roman", Times, serif;
}
#vision {
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size:14px;
margin: 5px 0px;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
font-weight:bold;
text-align: center;
overflow:hidden; /**to contain floats**/
color: #000;
border: solid 1px silver;
}
figure {
margin-top: 0;
width: 244px;
float: left;
background-color: #CCCCCC;
padding: 10px;
margin: 10px;
margin-left: 23px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;
-webkit-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;
border: 3px solid #999;
color: #000;
}
figcaption {
text-align: center;
color:#000;
width: 100%;
font-family: Verdana, Geneva, sans-serif;
font-size: 18px;
margin: 5px 0px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
padding: 1px 0 1px 0;
}
figcaption a{
display:block;
text-decoration: none;
padding: 4px;
color: #000;
font-weight: bold;
}
figcaption a:hover {
background-color: #000;
color: #FFF;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
-moz-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;
-webkit-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;
font-family: Verdana, Geneva, sans-serif;
}
footer {
padding: 10px 0;
clear: both;
color: #fff;
border: 1px dotted green; /**for demo purposes, you may delete**/
}
footer p {
color:#000;
margin:0 0 5px 0;
}
ul#bottom-nav {
list-style-type:none;
overflow:hidden;
width:90%;
margin:0 auto;
}
ul#bottom-nav li {
float:left;
padding-right:2px;
border-right:1px medium #000000;
}
ul#bottom-nav li.last {
border:none;
}
ul#bottom-nav a {
display:block;
text-decoration: none;
padding: 4px;
color: #000;
font-weight: medium
}
#phone {
font-weight:bold;
color: #000;
}
</style>
</head>
<body>
<div id="rightSidebar">
<h3>This is top of #rightSidebar</h3>
<div class="box">
<h3>Box Title</h3>
<p>This is the text for the first box</p>
</div> <!-- end class box -->
<div class="box">
<h3>second box</h3>
<p>this is the text for the second box. </p>
</div> <!-- end class box -->
<div class="box">
<h3>third box</h3>
<p>this is the text for the third box. </p>
</div> <!-- end class box -->
<div class="box">
<h3>fourth box</h3>
<p>this is the text for the fourth box. </p>
</div> <!-- end class box -->
<h3>end of #rightSidebar</h3>
</div> <!--end #rightSidebar-->
<div id="wrapper">
<div id="container">
<header><div id="Logo"></div></header>
<section><header><h1>Where will you fly to next?</h1></header></section>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">Home</a> </li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="destination.html" class="MenuBarItemSubmenu">Destinations</a><ul>
<li><a href="asia.html" class="MenuBarItemSubmenu">Asia</a><ul>
<li><a href="hongkong.html">Hong Kong</a></li>
<li><a href="kualalumpur.html">Kuala Lumpur</a></li>
<li><a href="singapore.html">Singapore</a></li></ul>
</li>
<li><a href="europe.html" class="MenuBarItemSubmenu">Europe</a><ul>
<li><a href="bordeaux.html">Bordeaux</a></li>
<li><a href="brussels.html">Brussels</a></li>
<li><a href="edinburgh.html">Edinburgh</a></li>
<li><a href="london.html">London</a></li></ul>
</li>
<li><a href="northamerica.html" class="MenuBarItemSubmenu">North America</a><ul>
<li><a href="chicago.html">Chicago</a></li>
<li><a href="montreal.html">Montreal</a></li>
<li><a href="quebeccity.html">Quebec City</a></li>
<li><a href="sanfransisco.html">San Fransisco</a></li></ul>
</li>
</ul>
</li>
<li><a href="#">Links</a></li>
<li><a href="contact.html" class="MenuBarItemSubmenu">Contact</a><ul>
<li><a href="newsletter.html">Newsletter</a></li>
<li><a href="donate.html">Donate</a></li>
<li><a href="contactus.html">contact Us</a></li></ul>
</li>
</ul> <!--end menubar-->
</div> <!--end container-->
<section id="vision">
<figure> <a href="www.newcityexplorer.com/city_break_london">
<img src="Pictures/London_main.JPG" width="244" height="188" alt="London Main" /></a>
<figcaption><a href="city_break_london.html">London</a></figcaption>
</figure>
<figure><a href="www.newcityexplorer.com/city_break_brussels">
<img src="Pictures/Brussels_main.jpg" width="244" height="188" alt="Brussels main"></a>
<figcaption><a href="city_break_brussels.html">Brussels</a></figcaption>
</figure>
<figure><a href="www.newcityexplorer.com/city_break_chicago">
<img src="Pictures/Chicago_main.jpg" width="244" height="188" alt="Chicago Main"></a>
<figcaption><a href="city_break_chicago.html">Chicago</a></figcaption>
</figure>
<figure><a href="www.newcityexplorer.com/city_break_edinburgh">
<img src="Pictures/Edinburgh_main.jpg" width="244" height="188" alt="Edinburgh"></a>
<figcaption><a href="city_break_edinburgh.html">Edinburgh</a></figcaption>
</figure>
<figure><a href="www.newcityexplorer.com/city_break_sanfransisco">
<img src="Pictures/SF_main.jpg" width="244" height="188" alt="SF Main"></a>
<figcaption><a href="city_break_sanfransisco.html">San Fransisco</a></figcaption>
</figure>
</section>
<footer>
<ul id="bottom-nav">
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="citybreak.html">City Breaks</a></li>
<li><a href="recommendedwebsites.html">Recommended Websites</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="secret.html">Secret link</a></li>
<li><a href="newsletter.html">Newsletter</a></li>
<li><a href="sitemap.html">Sitemap</a></li>
<li><a href="donate.html">Donate</a></li>
<li class="last"><a href="contactus.html">Contact Us</a></li>
</ul>
<p>© New City Explorer 2012</p>
</footer>
<!--end #wrapper--></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Nancy O.
