<h4>Aero Blue and Black Button Menus:</h4>

<div class="aerobuttonmenu">

<div class="rightsection">
<a href="#"><img src="http://i31.tinypic.com/33mpnon.png" border="0" alt="search" /></a>
</div>

<a href="http://www.dynamicdrive.com" class="aero"><span>Home</span></a> 
<a href="http://www.dynamicdrive.com/style/" class="aero"><span>CSS Examples</span></a> 
<a href="http://www.dynamicdrive.com/forums/" class="aero"><span>Forums</span></a> 
<a href="http://tools.dynamicdrive.com" class="aero"><span>Webmaster Tools</span></a> 
<a href="http://www.javascriptkit.com" class="aero"><span>JavaScript</span></a> 
<a href="http://www.cssdrive.com" class="aero"><span>Gallery</span></a>
</div>

<br />

<div class="aerobuttonmenu black">

<div class="rightsection">
<a href="#"><img src="http://i31.tinypic.com/33mpnon.png" border="0" alt="search" /></a>
</div>

<a href="http://www.dynamicdrive.com" class="aero"><span>Home</span></a> 
<a href="http://www.dynamicdrive.com/style/" class="aero"><span>CSS Examples</span></a> 
<a href="http://www.dynamicdrive.com/forums/" class="aero"><span>Forums</span></a> 
<a href="http://tools.dynamicdrive.com" class="aero"><span>Webmaster Tools</span></a> 
<a href="http://www.javascriptkit.com" class="aero"><span>JavaScript</span></a> 
<a href="http://www.cssdrive.com" class="aero"><span>Gallery</span></a>
</div>
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Fixed Layout #2.2- (Fixed-Fixed)</title>
<style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-right: 200px; /*Set right margin to RightColumnWidth*/
}

#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left margin to -(RightColumnWidth) */
background: #FDE95E;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>

</head><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/javascript" src="webtoolkit.cursor.js">

/***********************************************
* Custom Cusor Script II (CrossHair Mouse Cursor)- By Justas at Webtoolkit.info
* Script featured on DynamicDrive.com
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>CSS Fixed Layout #2.2- (Fixed-Fixed)</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fixed</em></b> <script type="text/javascript">filltext(45)</script></div>
</div>
</div>

<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>200px</em></b> <script type="text/javascript">filltext(15)</script></div>

</div>

<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>

</div>
</body>
</html>
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.formbutton{
cursor:pointer;
border:outset 1px #ccc;
background:#999;
color:#666;
font-weight:bold;
padding: 1px 2px;
background:url(media/formbg.gif) repeat-x left top;
}

</style>
<script type="text/javascript">
/*<![CDATA[*/

/***********************************************
* Encrypt Email script- Please keep notice intact
* Tool URL: http://www.dynamicdrive.com/emailriddler/
* **********************************************/
<!-- Encrypted version of: strodriguez3 [at] ***.*** //-->

var emailriddlerarray=[115,116,114,111,100,114,105,103,117,101,122,51,64,97,111,108,46,99,111,109]
var encryptedemail_id38='' //variable to contain encrypted email 
for (var i=0; i<emailriddlerarray.length; i++)
 encryptedemail_id38+=String.fromCharCode(emailriddlerarray[i])

document.write('<a href="mailto:'+encryptedemail_id38+'">Contact Me!</a>')

/*]]>*/
</script><style>
#quakenotice_ie{
font:normal 14px Arial;
position:absolute;
width:300px;
height:55px;
border:2px solid black;
background-color:lightyellow;
visibility:hidden;
}
</style>