I have this scroll bar on the front page. The slider is grey and background is white. I would like to have control of the colors. I like to change them. Can this be done?
http://www.cjwebconsulting.com/newsite/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Charisma Communications</title>
<link rel="stylesheet" href="style.css" media="screen">
<style type="text/css">
#container #right-col #support h3 {
color: #596a86;
font-family: arial, sans-serif;
font-size: 18px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Charisma Communications</h1>
<h3>"...Moving People Beyond Their Limitations..."</h3>
</div><!-- end #header -->
<div id="left-col">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Presentations</a></li>
<li><a href="#">Videos/Pictures</a></li>
<li><a href="#">Plan An Event</a></li>
<li><a href="#">My Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- end #left-col -->
<div id="right-col">
<div id="preamble">
<blockquote>
<blockquote>
<h3>About </h3>
<p class="p1">
I was was born in June 1962, one of the many thousands of babies born with the birth deformities caused by a drug called Thalidomide, a medication intended to help women lessen the effects of morning sickness. I was born with short upper limbs, known in the medical community as Phocomelia (flipper like limbs).</p>
<p class="p1"> I spent much of my childhood in and out of the hospital and with these experiences helped make me the strong person that I amtoday. I have never considered myself to be different than anyone else. </p>
</blockquote>
</blockquote>
</div><!-- end #preamble -->
<br>
</div><!-- end #right-col -->
<div id="footer">
Copyright © 2013 Charisma Communications
<p>
<a href="http://www.cjwebconsulting.com/">Website Designed By CJ Web Consulting</a>
</p>
</div><!-- end #footer -->
</div><!-- end #container -->
</body>
</html>
body {
background:#fff url(fond.jpg) repeat-x;
margin:0;
padding:0;
}
#container {
width:779px;
margin:auto;
background-image:url(back.jpg);
background-repeat:no-repeat;
}
#header {
padding:80px 0 0 250px;
font-family:georgia,'times new roman',times,serif;
font-style:italic;
color:#333;
}
#left-col {
float:left;
width:239px;
padding-top:300px;
}
#left-col ul {
width:176px;
padding:0;
margin:0 0 0 66px;
list-style-type:none;
}
#left-col li {
margin-bottom:3px;
}
#left-col a,#left-col a:visited {
display:block;
padding:2px;
line-height:12px;
font-family:verdana,sans-serif;
font-size:10px;
background-color:#0b3c77;
text-decoration:none;
color:#d8d7d2;
}
#left-col a:hover,#left-col a:active {
text-decoration:underline;
color:#9aa4bf;
}
#right-col {
float:left;
width:540px;
padding-top:74px;
}
#preamble {
width:455px;
height:180px;
margin:26px 0 0 68px;
text-align:justify;
overflow:auto;
}
#preamble h3 {
margin-top:18px;
font-family:arial, sans-serif;
font-size:18px;
font-style:italic;
color:#596a86;
}
#preamble p.p1 {
margin-left: 0px;
margin-right: 0px;
margin-bottom:10px;
line-height:16px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-style:italic;
color:#000;
}
#support {
width:450px;
height:240px;
border-top:1px solid #9aa4bf;
border-bottom:1px solid #9aa4bf;
margin-left:74px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:12px;;
font-style:italic;
color:#092950;
overflow:auto;
}
#support p {
padding:10px;
margin:0 15px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
line-height:16px;
text-align:justify;
}
#footer {
clear:both;
padding:100px 0 20px;;
font-family:verdana,sans-serif;
font-size:small;
font-weight:bolder;
text-align:center;
}
#footer a {
color:#9aa4bf;
text-decoration:none;
}
#footer a:hover {
color:#999;
text-decoration:underline;
}
