@import url("reset.css");

html, body {
	height: 100%;
}

#topgraphic {
	background: url(../images/top.png) repeat-x;
	height: 18px;
}

#wrapper {
	position: relative;
	width: 960px;
	text-align: left;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -156px; /* the bottom margin is the negative value of the footer's height */
}

body { 
	background: url(../images/notesbg.png) no-repeat center -20px;
	color: #333;
	font: 14px/21px Helvetica,Arial,sans-serif;
}  

#header {
	background: url(../images/header.png) no-repeat;
	margin: 10px auto 0 auto;
	width: 430px;
	height: 220px;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}

a, a:visited {
	text-decoration: none;
	color: #2c54a9;
}

a:hover {
	text-decoration: underline;
	color: #417fff;
}

.clear {
	clear: both;
}

h1 {
	color: #111;
	font-size: 28px;
}

h2 {
	color: #499c97;
	font-size: 18px;
	line-height: 24px;
}

h3 {
	font-size: 16px;
	line-height: 20px;
	margin-bottom: 8px;
	color: #354962;
}



#logo img {
	width: 150px;
}

/* @group nav */

#sideNav {
	float: left;
	margin: 35px 50px 0 0;
	background: url(../images/nav-bg.jpg);
	padding: 30px 0 20px 20px;
	width: 160px;
}

#sideNav li {
	list-style: none;
	outline: none;
	text-align: right;
	padding: 3px 0;
	text-transform: uppercase;
	font-size: 12px;
}

#sideNav a { 
	display: block;
	width: 120px;
	text-decoration: none;
	color: #595959;
}

#sideNav a:hover {
	text-decoration: underline;
}

body#home a#homeTab,
body#about a#aboutTab,
body#dist a#distTab, 
body#contact a#contactTab, 
body#music a#musicTab,
body#category a#musicTab,
body#order a#orderTab,
body#aboutcd a#aboutcdTab,
body#reviews a#reviewsTab,
body#links a#linksTab {
	color: #000;
	font-weight: bold;
}

/* @end */


#content {
	width: 640px;
	float: left;
	margin-top: 20px;
	margin-bottom: 180px;
}

#content h1 {
	font-size: 20px;
	padding-bottom: 20px;
}

#content h2 {
	padding-bottom: 10px;
}

#content p {
	padding-bottom: 18px;
}

body#home #award {
	width: 500px;
	margin: 20px auto 0 auto;
}

body#home #award p {
	font-size: 18px;
	line-height: 24px;
	text-align: center;
	font-weight: bold;
	padding: 8px 0 12px 0;
}

body#home #award img {
	padding: 10px;
	background-color: #ddd;
	border: 1px solid #aaa;
}

#udmm {
	width: 384px;
	margin: 30px auto 0 auto;
}

#jwexcl {
	width: 268px;
	margin: 30px auto;
	text-align: center;
}

body#home h2 {
	text-align: center;
}

body#home h3 {
	color: #222;
	font-size: 18px;
}

.categories a, .categories a:hover {
	color: #fff;
	text-decoration: none;
}

body#home .categories li span {
	padding: 5px;
	font-weight: bold;
	text-align: center;
}

body#home .categories li#easy span {
	background-color: #eb1c24;
}

body#home .categories li#easy img {
	margin-left: 40px;
}

body#home .categories li#medium span {
	background-color: #f15b29;
}

body#home .categories li#medium img {
	margin-left: 10px;
}

body#home .categories li#solo span {
	background-color: #f9b041;
}

body#home .categories li#solo img {
	margin-left: 15px;
}

body#home .categories li#all span {
	background-color: #a0c104;
}

body#home .categories li#all img {
	margin-left: 10px;
}

body#home .categories li#jazz span {
	background-color: #03a79d;
}

body#home .categories li#jazz img {
	margin-left: 20px;
}

body#home .categories li#holiday span {
	background-color: #059ece;
}

body#home .categories li#holiday img {
	margin-left: 45px;
}

body#home .categories li {
	float: left;
	margin-right: 10px;
	border: 1px solid #eee;
	width: 200px;
	height: 270px;
}

body#home .top li {
	height: 220px;
	margin-bottom: 20px;
}

body#home .categories li img {
	margin-top: 15px;
}

body#home .categories li span {
	display: block;
	background-color: #f0f0f0;
}

#memorial-text {
	font-size: 14px!important;
	font-family: "Lucida Grande";
	font-style: italic;
	font-weight: normal;

}

#contact-info {
	position: relative;
	float: right;
	top: 60px;
	right: 30px;
	background: url(../images/contact-info.png) no-repeat;
	width: 220px;
	height: 174px;
	padding: 10px 0 0 0;
}

#contact-info li {
	text-align: center;
}

#copyright {
	margin: 0 auto 30px auto;
	text-align: center;
	font-size: 11px;
	color: #000;
}

#graphicwrap {

}

#bottomGraphic {
	background: url(../images/kids.png) repeat-x left bottom;
	height: 94px;
	width: 100%;
}

#bottomGraphic2 {
	background: url(../images/footer.png) repeat-x left bottom;
	height: 62px;
	width: 100%;
}

#bottomGraphic2 p {
	text-align: center;
	width: 960px;
	margin: 0 auto;
	font-size: 10px;
	padding-top: 15px;
	color: #555;
}

#bottomGraphic2 a {
	color: #555;
	text-decoration: none;
}

#bottomGraphic2 a:hover {
	text-decoration: underline;
}




/* @group music */

.list {
	border-left: 1px solid #ddd;
	border-top: 1px solid #ddd;
}

#products-list {
	width: 684px;
}

#category-list {
	width: 463px;
	float: left;
}

#products-list tr:first-child td,
#category-list tr:first-child td {
	font-weight: bold;
}

.product-index tr td {
	padding: 5px 10px;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

.product-index tr td.product-name {
	width: 300px;
}

.product-index tr td.product-cat {
	width: 200px;
}

.product-index tr td.product-price {
	width: 50px;
	text-align: right;
}

.product-index tr td.product-link {
	width: 50px;
	text-align: center;
}

.odd {
	background-color: #f5f5f5;
}

#item-list {
	border: 1px solid #ccc;
	padding: 10px 20px 20px 20px;
	margin-bottom: 40px;
}

#item-about {
	margin-left: 20px;
	margin-top: 10px;
	font-size: 13px;
}

#item-about li span {
	display: inline-block;
	width: 70px;
	text-align: right;
	padding-right: 10px;
	font-weight: bold;
	color: #777;
}


#action-buttons {
	margin-top: 30px;
}

#action-buttons li {
	float: left;
	border: 1px solid;
	border-bottom-color: #bbb;
	border-top-color: #ddd;
	border-left-color: #ccc;
	border-right-color: #bbb;
	margin-right: 8px;
	background-color: #f0f0f0;
	font-size: 13px;
}

#actions-buttons li:hover {
	
}

#action-buttons li a {
	display: block;
	width: 55px;
	padding: 6px 10px;
	color: #222;
	padding-left: 40px;
}

#action-buttons li a:hover {
	text-decoration: none;
	background-color: #b7efa8;
}

#a-hear {
	background: url(../images/speaker.png) 10px center no-repeat;
}

#a-see {
	background: url(../images/pdf.png) 10px center no-repeat;
}

#a-buy {
	background: url(../images/cart.png) 10px center no-repeat;
}

h3#artist {
	font-style: italic;
	margin-top: -10px;
	margin-bottom: 20px;
	font-size: 15px;
}


/* category specific images */

.cat-img {
	float: left;
	margin-left: 20px;
}

body#category h4 {
	font-size: 20px;
	line-height: 40px;
	padding-bottom: 3px;
}

body#category h2,
body#music h2 {
	margin-bottom: 20px;
	line-height: 24px;
}

body#category #easy {
	background: url(../images/categories-scaled/easy.jpg) no-repeat;
	width: 133px;
	height: 100px;
}

body#category #mediumeasy {
	background: url(../images/categories-scaled/medium.jpg) no-repeat;
	width: 150px;
	height: 300px;
}

body#category #holidayarrangements {
	background: url(../images/categories-scaled/holiday.jpg) no-repeat;
	width: 150px;;
	height: 318px;
}

body#category #jazzarrangements {
	background: url(../images/categories-scaled/jazz.jpg) no-repeat;
	width: 150px;
	height: 280px;
}

body#category #soloandensemble {
	background: url(../images/categories-scaled/solo.jpg) no-repeat;
	width: 150px;
	height: 164px;
}

body#category #choruswithbandaccompaniment {
	background: url(../images/categories-scaled/recyclingbag.jpg) no-repeat;
	width: 94px;
	height: 128px;
}

body#category #allinclusive {
	background: url(../images/categories-scaled/all.jpg) no-repeat;
	width: 150px;
	height: 212px;
}

/* @end */


/* @group review */

.review-list {
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid #ddd;
}

.review-list li.review-date {
	font-weight: bold;
}

.review-list li.review-comment {
	font-style: italic;
}

.review-list li.review-author {
	text-align: right;
}




/* @end */

/* @group about/cd */

body#aboutcd ul.pics {
	margin-top: 20px;
}

body#about ul.pics li {
	margin: 10px 10px 20px 0;
	padding: 10px;
}

body#aboutcd ul.pics li span {
	display: block;
	font-size: 11px;
	text-align: center;	
}

body#aboutcd #musicians li {
	padding-bottom: 5px;
}

body#aboutcd ul.pics li {
	margin: 0 10px 20px 0;
	padding: 10px;
}

body#aboutcd ul.pics li img {
	width: 280px;
}

body#about ul.pics li,
body#aboutcd ul.pics li {
	float: left;
	background-color: #ddd;
	border: 1px solid #aaa;
}

body#about ul.wide img {
	width: 280px;
}

body#about ul.tall img {
	height: 370px;
}

body#about ul.center {
	width: 400px;
	margin: 0 auto;
}

body#about p {
	clear: both;
}

/* @end */


/* @group how to order */
ul.distributors li {
	padding-bottom: 10px;
}

ul.distributors {
	list-style-type: none;
	clear: both;
}

ul.distributors li {
	float: left;
	margin-right: 20px;
	padding-left: 5px;
}

ul.distributors li span {
	display: block;
}

li.dist {
	width: 500px;
}

li.dist-state {
	width: 150px;
}


body#order h3 {
	font-size: 14px;
	font-weight: bold;
	margin: 10px 0 5px 0;
}

#phone-order {
	margin-bottom: 25px;
}

#jwpepper {
	margin: 20px 0 30px 0;
}

/* @end */


/* @group contact */

#contact_form li {
	color: #444;
	font-size: 12px
}

#contact_form {
	background: #eaeaea;
	padding: 10px 20px;
	width: 430px;
	border: 1px solid #43505f;
}

#contact_form li input[type=text] {
	padding: 5px;
	margin-bottom: 5px;
	width: 180px;
}

#contact_form li input[type=checkbox] {
	margin-right: 5px;
}

#contact_form textarea {
	padding: 5px;
	width: 420px;
	margin-top: 5px;
}

#contact_form legend {
	font-size: 18px;
	margin-bottom: 3px;
}

#contact_form #visitor_information label {
	display: inline-block;
	width: 100px;
}

#contact_form #contact_information label {
	display: block;
	width: 300px;
}

#contact_form ul {
	margin-top: 20px;
}

#contact_form #visitor_information {
	margin-top: 0;
}


#contact_form .warning {
	color: #f00;
}

#contact_form .req_field {
	font-size: 11px;
}

#contact_form span.warning {
	margin-left: 5px;
}


/* @end */