* {margin:0; padding:0;}

body {margin:0; padding:0; font: 1.0em verdana, arial, sans-serif;background-image: url(music_box_background_vert_1.jpg);text-align:center; }

div#container { position:relative; width:900px; margin:auto; background-color:#c0c0c0; border-top: 2px solid #ff0000; border-left: 2px solid #ff0000; border-right: 2px solid #ff0000; border-bottom: 2px solid #ff0000;text-align:left;}

 /*styles for header - text-align centers graphic */
div#header {height:130px; background-color:#362d28;  border-bottom: 2px solid #ff0000;}
/*
div#header h1 {float:left;color: #000000;} */
div#header img {margin-left: 106px;}
/* div#header p {text-align:right; color:#cc3333; margin: 0 20px 0 0; font-size:1em; font-family: verdana, arial, sans-serif;padding:15px 0 0 0;} */
/* div#header img {float:left;} */

div#leftcol { float: left; margin: 10px 0 0 5px; width:175px; padding:0; border: 2px solid #000000; text-align:center; background-color:#e9e9e9;}
div#leftcol img {border: solid 0px;}
div#leftcol a:hover {background: #c0c0c0;}
div#leftcol p {font-size: 14px;}

div#rightcol {position:absolute; top: 158px; left: 200px; width: 660px; padding: 1em 0em 1em  0em; border: 0px solid #cc3333;background-color:#c0c0c0;}
div#rightcol h3,h4,h5,h6  {text-align:center;}
div#rightcol img {border: solid 0px;margin-right: 0px;margin-left: 0px; padding-left: 10px;padding-right: 10px;}
div#rightcol p { font-size: 12px; margin-right: 0px;margin-left: 0px;}
div#rightcol a {text-decoration: underline; color: #000;}
div#rightcol a:hover {color: blue;}




/* more stuff used in right column */

.header-style {text-align:center;}
.header-second {font-size:18px;}

.clear-right {clear: right;}
.clear-left {clear: left;}
.clear-both {clear: both;}
.link-picture-float-left { background-color: #c0c0c0;float:left;}
.link-picture-float-right { background-color: #c0c0c0;float:right;}
.runin-blox {display: run-in;} /* not used */
span.bolden {font-weight: bold;}




.clearthefloats {clear:both;}

.littlecontainerleft img {float:left;}
.littlecontainerright img {float:right;}

.alignright{text-align:right;}
.alignleft {text-align:left;}

.currentpagecolor {color: #000; background-color: #e9e9e9;}

/* clearing method */
.clearfix:after {content: "."; display: block; height:0; clear: both; visibility:hidden;}

.clearfix {display: inline-block;}

* html .clearfix {height: 1%;}
.clearfix {display: block;}

/* end clearing method */

/*footer styles*/

div#footer {width:100%;  /* makes the div fill its container - usually body */
 					padding:4px 0; /* pushes the links away from top and bottom of the div */
					font-size:.9em;  /* sets the font size of all links */
					text-align:center; /* centers the ul elements in the div */
					background-color:#DEE7B6; /* sets the background color of the div */
					border-top:1px solid #960; border-bottom:2px solid #960; margin-top:1.5em;}
 div#footer ul {margin:2px 0;} /* vertical spacing between the lists */
 div#footer li {display:inline; /* the key CSS - makes the lists display horizontally */
						color:white; /* sets the color of the vertical lines */
						border-left:0px solid; /* creates the vertical line to the left of each list items */
						color:#C60; /* sets the color of the vertical lines  - links colored below */
						padding:0 5px 0 9px; /* horiz space between links and vert lines - needed diff l & r values to center */
						}
 div#footer li:first-child {border-left:0;} /* removes the left border of the first list item - IDWIMIE */
 div#footer ul li a {text-decoration:none; /* removes the underlining off the links */
 							 color:#C60; /* the color of the links */
							 }
 div#footer ul li a:hover {text-decoration:underline; color:#960} /* underlines the links when hovered */
 div#footer ul.fineprint li {color:#C60;} /* color for copyright and vert dividers on last row */

/* end footer styles*/




 div#footer ul.fineprint li a {color:#C60;} /* had to explicitly color these or they inherit white from div#footer li */
  div#footer ul.fineprint li a:hover {color:#960;} /* turns bottom row white when hovered */

/* navigation bar */


div#nav ul {margin-left: 10px; margin-top: 3px; }
div#nav ul li { 
	font-size: 10px;
	display: inline;
	margin: 0 5px 0 5px;
	}	
div#nav ul li a {color: #000; text-decoration: none; }
div#nav a:hover {color: #c30; background-color: #e9e9e9;}

/* the horizontal menu starts here second style --------------- */
div#listmenu {
	width:100%; 	/* makes the div full width */
	float:left; /*makes the div enclose the list */
	border-top:1px solid #000;	/* draws line on top edge of div */
	border-bottom:1px solid #000;	 /* draws line on bottom edge of div */
	font-size: .7em;	/* SET FONT-SIZE HERE */
	background-color:#362d28; /* colors the div */
	margin-top:0px; /* TEMPORARY-pushes the div away from the top of the browser */
	}
div#listmenu ul {margin:0 0 0 30px;/* indents ul from edge of container */
	}
div#listmenu li {
	z-index:100; /* had to add this to make the drop be on top in Safari */
	float:left;	/* causes the list to align horizontally instead of stack */
	position:relative; /* positioning context for the absolutely positioned drop-down */
	list-style-type:none;	/* removes the bullet off each list item */
	background-color:#c0c0c0; /*sets the background of the menu items */
	border-right:1px solid #000; /* creates dividing lines between the li elements */
	}
div#listmenu li:first-child {
	border-left:1px solid #000; /*the first vertical line on the menu */
	}
div#listmenu li:hover { 
	background-color:#FFF; /*sets the background of the menu items */
	}
div#listmenu a {

	display:block; /*makes rolled list items in drop down highlight link text, and wrapped lines indent correctly */
	padding:0 6px; /*creates space each side of menu item's text */
	text-decoration:none;	 /* removes the underlining of the link */
	color:#000000;	/* sets the type color */
	}
div#listmenu a:hover {
	color:#F33;
	}
/* the horizontal menu ends here */

/* THE HACK ZONE - */
/* hack for IE (all flavors) so the menu has a vertical line on the left */
* html div#listmenu ul {
	float:left; /* makes the ul wrap the li's */
	border-left:1px solid #000; /* adds the rightmost menu vertical line to the ul */
	margin-left:15px; /* IE doubles the given value above - why? */
	}
/* add a top line to drops and pops in IE browsers - can't read :first-child */
* html  div#listmenu ul li ul {
	border-top:1px solid #000;
	border-left:0px; /* stops the drop inheriting the ul border */
	}
/* end of hack zone */
/* END OF LIST-BASED MENU -----------*/