First Layout Ever, I need help! >< Options

[Yohkai]

First off I'd like to thank the creator of the tutorial for all the hours of migranes and temper tantrums it saved me from. As a beginner I was definitely lost in a bit of it but I found my way through most of it. There are parts that I still don't understand and is the reason I'm here.

First of here is my layout now: "L" - Layout

Here is the code:

CODE

<img src="http://img507.imageshack.us/img507/818/llayout2qz4.png">
<div style="
overflow: auto;
width: 530px;
height: 560px;
margin-top: -580px;
margin-left: -440px;">
<style type="text/css">
table.navigation, table.footer { display: y; }
</style>
<style type="text/css">
.#rblEprops{display:none;}
#pnlEnabled table, #htmleditor, #lblTimeZone,
/* width of the comment page */
{width:400px;}
.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer
{display: none;}
</style>

<!-- begin code provided by createblog.com -->
<style type="text/css">
/*L - Layout*/
/*by Miles*/
body {
background-image:url();
background-repeat: repeat-y-x;
background-color: #3D3D3D;
scrollbar-face-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #000000;
}

#rblEprops, #pnlEnabled table, #pnlEprops table {
width: auto !important;
}

table.blogbody {
width:480px;
font-family: Arial;
font-weight: none;
font-size: 12pt;
color: #BF0000;
text-align: justify;
padding: 0px;
margin-top: 2px;
}
div.smalltext{
width: 200px;
padding: 3px;
text-align: center;
}
.caption, .blogheader {
width: 380px;
padding: 3px;
font-family: Arial;
font-size: 16pt;
text-align: left;
color: #BF0000;
background-color: none;
text-transform: none;
margin-top: 10px;
}

P, B, I, TD, TH
{font-family: Arial; color: #BF0000; font-size: 8pt; }
A:link, A:visited, A:active
{color:#0000FF; text-decoration:none; font-size:8pt;}
a:hover
{text-decoration: underline; color:#000000; font-size: 8pt; );}
b, strong, i, u, {
/* edit colors when bold italic underline */
font-family: arial;
font-size: 8pt;
color: #000000;
font-weight: bold;
text-transform: none;
</style>
<!-- end code provided by createblog.com -->

<style type="text/css">div.fetish object, div.fetish embed {width:218px;height:155px;visibility:visible;z-index:5;}div.fetish div.fetishButton {display:block;position:relative;top:-35px;z-index:6;text-align:center;}div.fetish div.fetishButton img {border-style:none;border-width:0px;}</style><div class="fetish"><center><embed src="http://www.mp3asset.com/swf/mp3/myflashfetish-mp3-player.swf"quality="high" wmode="transparent" flashvars="myid=4540159&path=2007/09/10&mycolor=0x000000&mycolor2=0xA31E1E&mycolor3=0x6D6D6D&autoplay=true&rand=0&f=3" width="218" height="155"name="myflashfetish"</style>

FYI I use Firefox and I use Photoshop for my layout. Now my questions!

1. How do I make more scroll bar windows? I tried to make another one but it just screws up the one I already have.

2. I would like to add in the modules but I would rather have them in their own little scroll window. But I do not want the links that go across the bottom and top of the page. How can I do this?

3. How can I change the color of the scroll bar and track? I can't use the code that was given since I use Firefox.