Here is the CSS (using external style sheets):
style-temp.css (Main style sheet for the site):
Expand|Select|Wrap|Line Numbers
- * {
- font-family: verdana, arial, sans-serif;
- }
- body {
- background: url('gfx/bg.jpg') repeat-x fixed;
- text-align: center;
- font-size: 73%;
- margin: 0;
- padding: 0;
- }
- a {
- color: #449;
- }
- a:hover {
- color: #246;
- }
- a:visited {
- color: #69a;
- }
- a.cvs_enter {
- text-align: center;
- display: block;
- background: #035;
- height: 23px;
- padding-top: 10px;
- color: #fff;
- border: 1px solid #69b;
- border-right: 1px solid #333;
- border-bottom: 1px solid #333;
- text-decoration: none;
- font-weight: bold;
- margin: 20px 50px;
- }
- a.cvs_enter:hover {
- background: #369;
- color: #fff;
- }
- h2 {
- margin: 25px 0;
- font-size: 15pt;
- font-weight: normal;
- color: #78b;
- }
- h2 span {
- color: #999;
- }
- h3 {
- font-size: 12pt;
- font-weight: normal;
- margin: .2em 0;
- color: #666;
- }
- h4 {
- font-size: 11pt;
- }
- sup.tm {
- font-size: .5em;
- }
- #wrap {
- width: 790px;
- margin: 0 auto 20px auto;
- text-align: left;
- background: #fff;
- }
- #menu_area {
- padding-left: 25px;
- text-align: center;
- height: 31px;
- background: url('gfx/menu_bg.jpg') no-repeat;
- overflow: hidden;
- }
- #nav, #nav ul {
- float: left;
- width: 740px;
- list-style: none;
- line-height: 1;
- background: url('gfx/menu_over_1.jpg') repeat-x;
- /*font-weight: bold;*/
- padding: 0;
- /*border: solid #434261;*/
- /*border-width: 1px 0;*/
- margin: 0 0 1em 0;
- text-align: left; /*added by me*/
- font-size: 8pt; /*added by me*/
- white-space: normal; /*added by me*/
- }
- #nav a {
- display: block;
- /*width: 10em;
- w\idth: 6em;*/
- color: #000;
- text-decoration: none;
- padding: 3px 20px 3px 20px;
- font-size: 8pt; /*added by me*/
- }
- #nav a.arrow {
- background: url(rightarrow2.gif) center right no-repeat;
- }
- #nav li {
- float: left;
- padding-top: 6px; /*padding: 0;*/
- /*width: 8em;*/
- height: 25px;
- /*margin: 0;
- display: inline;
- white-space: nowrap;*/
- }
- /* LEVEL 1 DROP DOWN - WHOLE LIST */
- #nav li ul {
- position: absolute;
- left: -999em;
- height: auto;
- width: 12.4em;
- w/idth: 11.9em;
- font-weight: normal;
- border-width: 0.25em;
- margin-top: 6px; /* margin: 0;*/
- /*display: inline;
- white-space: nowrap;*/
- }
- /* LEVEL 1 DROP DOWN - INDIVIDUAL ITEMS */
- #nav li li {
- padding-left: 1em;
- width: 13.5em;
- text-align: left;
- background: #D8D8D8;
- border-bottom: 1px solid #434261; /*added by me*/
- border-left: 1px solid #434261; /*added by me*/
- border-right: 1px solid #434261; /*added by me*/
- white-space: nowrap; /* DON'T TAKE THIS OUT! IT STOPS LINE WRAPPING ON THE SUBMENU */
- }
- #nav li ul a {
- width: 13em;
- w\idth: 9em;
- padding-left: 0px;
- }
- #nav li ul ul {
- margin: -1.75em 0 0 14em;
- }
- #nav li:hover ul ul,
- #nav li:hover ul ul ul,
- #nav li.sfhover ul ul,
- #nav li.sfhover ul ul ul {
- left: -999em;
- }
- #nav li:hover ul,
- #nav li li:hover ul,
- #nav li li li:hover ul,
- #nav li.sfhover ul,
- #nav li li.sfhover ul,
- #nav li li li.sfhover ul {
- left: auto;
- }
- #nav li:hover,
- #nav li.sfhover {
- background: #fbfbfb;
- }
- #vert_menu {
- text-align: left;
- text-indent: 1em;
- width: 185px;
- margin-left: 11px;
- _margin-left: 5px;
- background: url('gfx/vmenu_bg.jpg');
- float: left;
- }
- #vert_menu a {
- color: #fff;
- width: 185px;
- height: 25px;
- background: url('gfx/vmenu_bg.jpg') no-repeat;
- }
- #vert_menu a:hover {
- color: #ccc;
- }
- #vert_menu img {
- border: 3px solid #225;
- margin: 4px 0 0 4px;
- }
- #vert_menu p {
- text-indent: 0;
- padding: 20px 10px;
- color: #efefef;
- }
- #vert_menu_bot {
- /* margin-top: 10px;*/
- height: 50px;
- background: url('gfx/vmenu_bot.jpg') no-repeat center bottom;
- }
- #content {
- float: left;
- width: 550px;
- margin-left: 17px;
- min-height: 500px;
- _height: 500px;
- }
- #content p {
- line-height: 1.5;
- text-align: justify;
- margin: 20px 0;
- }
- .float_note {
- width: 350px;
- text-align: left;
- line-height: 1.5;
- background: #035;
- color: #fff;
- padding: 1.2em;
- float: right;
- margin: .5em 0 .8em 1.5em;
- }
- .float_note h3 {
- font-size: 10pt;
- font-weight: bold;
- color: #fff;
- }
- .setleft {
- text-align: left;
- }
- /* Lists */
- #content ul {
- list-style-type: none;
- padding: 1em 2em 1em 4em;
- }
- #content li {
- margin: 1em;
- color: #444;
- list-style-type: none;
- line-height: 1.5;
- padding-left: 14px;
- background: url('gfx/bullet.jpg') no-repeat 0 5px;
- }
- #content li ul li {
- font-size: .95em;
- background: url('gfx/subbullet.jpg') no-repeat 0 4px;
- color: #666;
- }
- #content li ol li {
- font-size: .95em;
- list-style-type: decimal;
- color: #666;
- }
- /* Tables */
- #content table {
- margin: 1.2em 0;
- font-size: .96em;
- border-bottom: 1px solid #efefef;
- width: 550px;
- }
- #content table th, #content table td {
- padding: 5px 10px;
- border-top: 1px solid #efefef;
- border-right: 1px solid #efefef;
- }
- #content table th {
- border: none;
- color: #fff;
- text-align: left;
- background: #225;
- }
- #content table.noborder {margin: 1.2em 0 0 0; font-size: 1.0em; border-bottom: 0px solid #efefef; width: 550px;}
- #content table.noborder th {border: 0px;}
- #content table.noborder td {border: 0px; vertical-align:top;}
- #content table.noborder tr {border: 0px;}
- #content table.noborder2 {margin: 0 0 0 0; font-size: 1.0em; border-bottom: 0px solid #efefef; width: 550px;}
- #content table.noborder2 th {border: 0px;}
- #content table.noborder2 td {border: 0px; vertical-align:top;}
- #content table.noborder2 tr {border: 0px;}
- #content ol.number li {
- font-size: 1.0em;
- list-style-type: decimal;
- background: #FFF;
- padding-left: 3px;
- margin-left:20px;
- }
- td.tbl_date {
- width: 150px;
- height: 40px;
- text-align: center;
- color: #555;
- border-left: 1px solid #efefef;
- background: #fafafa;
- }
- table thead th.dl_head {
- background: #024 !important;
- }
- table td.tbl_dl_label, table td.tbl_cvs_param {
- width: 280px;
- border-left: 1px solid #efefef;
- }
- table td.tbl_dl_link {
- background: #f3f5fa;
- }
- table td.tbl_cvs_param {
- width: 100px;
- }
- #footer {
- text-align: center;
- padding-top: 20px;
- height: 30px;
- background: url('gfx/footer.jpg') no-repeat bottom center;
- clear: both;
- }
- /* Forms */
- fieldset {
- border: solid 0 transparent;
- border-bottom: 1px solid #eaeaea;
- margin: 2em 0;
- padding: 0 0 1em 0;
- }
- fieldset div {
- margin: 1em 0;
- }
- label, .checkbox_float div label {
- float: left;
- width: 220px;
- height: 22px;
- line-height: 22px;
- margin-right: 12px;
- text-align: right;
- }
- input, select {
- width: 180px;
- }
- textarea {
- width: 300px;
- height: 100px;
- }
- input.submit {
- margin-left: 232px;
- }
- splash-temp.css (Style sheet for the splash page that has the error):
- #col_left, #col_right, #col_center {
- margin-top: 12px;
- width: 260px;
- float: left;
- }
- #col_left {
- margin-left: 4px;
- }
- .sect {
- margin: 0 8px 15px 8px;
- background: url('gfx/sect_bg.jpg') repeat-y;
- }
- .sect h2 {
- font-size: 11pt;
- color: #fff;
- background: url('gfx/sect_head.jpg') no-repeat;
- height: 32px;
- padding: 9px 0 0 10px;
- margin: 0;
- font-weight: normal;
- }
- .sect h2 a {
- text-decoration: none;
- color: #fff;
- }
- .sect_body {
- height: 182px;
- }
- .sect_download .sect_body {
- height: auto;
- min-height: 182px;
- position: relative;
- margin: 0px auto 0px auto;
- overflow:hidden;
- }
- .sect_download h2 {
- height: 36px;
- margin-top: -4px;
- padding-top: 13px;
- background: url('gfx/sect_dl_head.jpg') no-repeat;
- position: relative;
- /*top:0px;
- left:0px;*/
- z-index: 1;
- }
- .sect_download a.download {
- display: block;
- width: 226px;
- height: 51px;
- background: url('gfx/dl_link.jpg') no-repeat;
- margin: 0 0 2px 9px;
- overflow: hidden;
- position: relative;
- }
- .sect_download p {
- margin-bottom: 4px;
- }
- .sect_download a.download span {
- display: none;
- }
- .sect_download a.download:hover {
- background: url('gfx/dl_link_hover.jpg') no-repeat;
- }
- .sect_foot {
- height: 28px;
- background: url('gfx/sect_foot.jpg') no-repeat left bottom;
- }
- .sect_foot_dwnld {
- height: 28px;
- margin-top:3px;
- background: url('gfx/sect_foot.jpg') no-repeat left bottom;
- }
- .sect p, .sect ul {
- padding: 5px 14px;
- }
- #content .sect p {
- text-align: left;
- line-height: 1.5;
- margin: 0;
- }
- #content .sect li, #content .sect ul {
- display: block;
- list-style-type: none;
- padding: 1em;
- }
- #content .sect li {
- margin: 0;
- padding: 1px;
- color: #444;
- list-style-type: none;
- line-height: 1;
- width: 210px;
- background: none;
- }
- #content .sect li a {
- text-decoration: none;
- color: #68a;
- border: 1px solid #9bd;
- background: #ccffcc;
- display: block;
- padding: 6px 6px;
- margin: 4px 0;
- height: 1.3em;
- }
- #content .sect li a:hover {
- background: #ffffe0;
- color: #468;
- border: 1px solid #69c;
- }
- #content {
- width: 790px;
- margin-left: 1px;
- }
- #menu_area {
- padding-left: 25px;
- text-align: center;
- height: 31px;
- background: url('gfx/menu_bg_splash.jpg') no-repeat;
- overflow: hidden;
- }
[html]
<!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>
<title>Splash</title>
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" />
<!-- CSS -->
<link rel="stylesheet" href="style-temp.css" media="screen,projection" type="text/css" />
<link rel="stylesheet" href="splash-temp.css" media="screen,projection" type="text/css" />
<!-- JavaScript -->
<script src="scripts/swfobject.js" type="text/javascript"></script>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagNam e("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
</head>
<body>
<div id="wrap">
<div id="headerflash"><p style="color:white">Splash</p></div>
<div id="menu_area">
<ul id="nav">
<li><a href="?p=0" class="center">Home</a></li>
<li><a name="About Us">About Us</a>
<ul>
<li><a href="?p=1&sub=0">Who We Are</a></li>
<li><a href="?p=1&sub=1">Mission Statement</a></li>
<li><a href="?p=1&sub=2">Presentations</a></li>
<li><a href="?p=1&sub=3">Careers</a></li>
<li><a href="?p=1&sub=4">FAQ</a></li>
</ul>
</li>
<li><a name="Clients">Clients</a>
<ul>
<li><a href="?p=2&sub=0">Enterprises</a></li>
<li><a href="?p=2&sub=1">Software Vendors</a></li>
<li><a href="?p=2&sub=2">Service Providers</a></li>
</ul>
</li>
<li><a name="Products & Services">Products & Services</a>
<ul>
<li><a href="?p=3&sub=0">Products</a></li>
<li><a href="?p=3&sub=1">Services</a></li>
<li><a href="?p=3&sub=2">Connectors</a></li>
<li><a href="?p=3&sub=3">OpenII Toolkit</a></li>
<li><a href="?p=3&sub=4">Training</a></li>
<li><a href="?p=3&sub=5">Toolkit FAQ</a></li>
</ul>
</li>
<li><a href="?p=4" class="center">Demo</a></li>
<li><a name="News">News</a>
<ul>
<li><a href="?p=5&sub=0">Announcements</a></li>
<li><a href="?p=5&sub=1">Press Release</a></li>
</ul>
</li>
<li><a href="?p=6" class="center">Contact Us</a></li>
</ul>
</div>
<div id="content">
<div id="col_left">
<div class="sect">
<div class="sect_body">
<h2><a href="?p=6">News</a></h2>
<p>Content goes here!</p>
</div>
<div class="sect_foot"></div>
</div>
<div class="sect">
<div class="sect_body">
<h2><a href="?p=1">About Us</a></h2>
<p>Content goes here!</p>
</div>
<div class="sect_foot"></div>
</div>
</div>
<div id="col_center">
<div class="sect">
<div class="sect_body">
<h2><a href="?p=3">Products & Services</a></h2>
<p>Content goes here!</p>
</div>
<div class="sect_foot"></div>
</div>
<div class="sect">
<div class="sect_body">
<h2><a href="?page=employment">Employment</a></h2>
<p>Content goes here!</p>
</div>
<div class="sect_foot"> </div>
</div>
</div>
<div id="col_right">
<div class="sect sect_download">
<div class="sect_body">
<h2><a href="?page=downloads">ESB Demo</a></h2>
<a href="?" class="download"><span>Download Now</span></a>
<p>Content goes here!</p>
</div>
<div class="sect_foot"> </div>
</div>
<div class="sect">
<div class="sect_body">
<h2><a href="?page=links">Links</a></h2>
<p>Content goes here!</p>
</div>
<div class="sect_foot"> </div>
</div>
</div>
</div>
<div id="footer">
© 2007 All Rights Reserved. For more information <a href="?p=7" title="Click here to contact us.">contact us</a>.
</div>
</div>
</body>
</html>[/html]