html, body {
  margin: 0;
}

body {
  background: #F0E9C9 url(images/body_bg.jpg) repeat-x;
  background-position: top left;
  width: 100%;
  height: 100%;
  text-align: center;
  font: 11px tahoma, verdana, arial, sans-serif;
  color: #1E1D18;
  line-height: 16px;
}

.clear {
  clear: both;
}

/** layout **/
#wrapper {
  background: #F0E9C9 url(images/wrapper_bg.jpg) repeat-x;
  background-position: top left;
  width: 768px;
  height: 700px;
  margin: 0 auto;
  padding: 4px;
  position: relative;
  top: 26px;
}

#container {
  width: 768px;
  height: 660px;
}

/** left **/
#left {
  background: #F0E9C9 url(images/left_bg.jpg) no-repeat;
  background-position: top left;
  width: 388px;
  height: 660px;
  float: left;
  text-align: left;
}

#left .home {
  position: relative;
  top: 20px;
  left: 25px;
}

#nav {
  margin: 178px 0 0 240px;
  text-align: left;
}

#nav ul{
  margin: 0;
  padding: 0;
}

#nav li{
  list-style-type: none;
  width: 147px;
  height: 39px;
  display: list-item;
}

#nav li .current {
  list-style-type: none;
  width: 147px;
  height: 39px;
  display: list-item;
  background: url(images/arrow_over.gif) top right no-repeat;
}

/** right **/
#right {
  background: #F0E9C9 url(images/right_bg.jpg) no-repeat;
  background-position: top left;
  width: 380px;
  height: 660px;
  float: right;
}

/** scroller **/

/* Scroll Bar Master Styling Starts Here */
/* All comments can be freely removed from the css */
/*  scrollgeneric is used for corrective styling of elements, and should not be modified or removed */

#mycustomscroll {
/* Typical fixed height and fixed width example */
  width: 341px;
  height: 578px;
  overflow: auto;
  /* IE overflow fix, position must be relative or absolute*/
  position: relative;
	/*background-color: #E7EADE;*/
	top: 60px;
  left: 15px;
  %left: -4px;
  text-align: left;
}
 
.scrollgeneric {
  line-height: 1px;
  font-size: 1px;
  position: absolute;
  top: 0;
  left: 0;
}

.vscrollerbase {
  width: 17px;
}

.vscrollerbar {
  background-image: url(images/scrollbar.png);
  width: 17px;
/* following is the bit that allows us fixed height scrollbars */
  height: 50px !important;
/* for fixed height, we force the vscrollerbar class with an !important decleration, and fleXcroll follows suit.*/
  background-image: url(images/scrollbar.png);
/* unfortunately, due to limitations of CSS, we cannot provide a color for the background when we are
using alpha images, thay have to be transparent.*/
}

* html .vscrollerbar {
/* IE6 alpha png trick */
/* IE7 is not affected by this trick, as it perfectly handles the normal png */
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='images/scrollbar.png');
  background-image: none;
}

#mycustomscroll .content {
  width: 310px;
  margin: 0;
  padding: 0;
}

#mycustomscroll .content p {
  text-indent: 15px;
}

#mycustomscroll .content a{
  color: #663333;
  text-decoration: none;
  border-bottom: 1px solid #663333;
}

#mycustomscroll .content a:hover{
  color: #663333;
  text-decoration: none;
  border: 0;
}

#mycustomscroll .content h1{
  font: 14px tahoma, verdana, arial, sans-serif;
  color: #993333;
  font-weight: bold;
  margin: 0 0 20px 0;
  padding-top: 0;
}

#mycustomscroll .content h2{
  font: 12px tahoma, verdana, arial, sans-serif;
  color: #663333;
  font-weight: bold;
  margin-top: 0;
  padding-top: 0;
}

#mycustomscroll .content ul{
  list-style-type: none;
  margin: 0;
  padding-left: 15px; 
}

#mycustomscroll .content li{
  background: url(images/li_bg.gif) center left no-repeat;
  background-position: 0 9px;
  margin: 0;
  padding-left: 15px;
  color: #663333;
  font-weight: bold;
  line-height: 20px;
}

#mycustomscroll .content .news li{
  background: url(images/li_bg.gif) center left no-repeat;
  background-position: 0 7px;
  margin: 0;
  padding-left: 15px;
  color: #663333;
  font-weight: bold;
  line-height: 20px;
}

#mycustomscroll .content img{
  display: inline;
  border: 3px solid #993333;
  margin: 10px 0 10px 15px;
}

#mycustomscroll .content .banner{
  border: 0;
  margin: 0;
}

#mycustomscroll .content .members{
  border: 3px solid #993333;
  margin: 5px 0 5px 10px;
  float: right;
}

#mycustomscroll .content .instrument {
  color: #993333;
}

#mycustomscroll .content .spacer {
  height: 1px;
  background: url(images/line_bg.gif) repeat-x;
  margin: 15px 0 15px 0;
}

#flashPlayer {
  width: 308px;
  height: 150px;
  background-color: #ffffff;
  padding: 1px 1px 0 1px;
  margin: 25px 0 20px 0;
}

/** footer **/
#footer {
  background: #F0E9C9 url(images/footer_bg.jpg) no-repeat;
  background-position: top left;
  width: 768px;
  height: 40px;
  text-align: left;
}

.copyright{
  position: relative;
  top: 6px;
  left: 250px;
  font: 10px tahoma, verdana, arial, sans-serif;
  color: #ffffff;
}

.copyright a{
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px #ffffff dotted;
}

.copyright a:hover{
  border: 0;
}