/*
 By: Chris Dawson
 Date: Oct. 2007
 Contact me at cdawson@jamplay.com if you enjoy this, but please respect our copyright. JamPlay, LLC 2007.
*/


		/* CHORD, INDIVIDUAL PAGE LAYOUTS */
		#chorded blockquote {display:block; float:left; line-height:15px; padding:0; margin:20px 0; height:255px; background:#fcfcfc; border:1px solid #ccc;}
		#chorded blockquote h3 {padding:0; margin:0; line-height:22px; font-size:12px; text-align:center; border-bottom:1px solid #ccc;  background:#f9f9f9;}
		#chorded blockquote em {display:block; clear:both; width:185px; margin:0 auto; text-align:center;}
		#chorded blockquote .newchord {padding:6px 0 0 20px !important; background:none; }
		#chorded a.add-chord {display:block; clear:both; width:166px; padding:1px 2px; border:1px solid #fff;}
		#chorded a:hover.add-chord {border:1px solid #999; background:#f9f9f9;}
		#chorded select, #chorded input, #chorded em {display:block; float:left; margin-right:4px;}
		#chorded em {padding:7px 3px 0 0;}
		#chorded select {margin-top:5px;}
		#chorded input {width:166px; border:none; height:26px;}


        /* MY CHORD SHEET LISTING */

		/* CHORD DISPLAY VIEW */
		#chord-references {display:block; padding:0; width:725px; line-height:15px;}
		#chord-references h2 {height:21px; font-size:12px; padding:0; margin:0 0 3px 0; background:#f9f9f9; border:1px solid #ccc; }

		.newchord {width:200px; float:left; padding:20px 18px; margin:0; text-align:center; position:relative; border:1px solid #fff; background:url(https://www-ecs.jamplay.com/client/shell/images/chords/css-dot-chords.gif) bottom left repeat-x; }
		.newchord h2 {height:21px; background:#f9f9f9; border:1px solid #ccc;  margin-bottom:3px;}
		.newchord a {border:none; text-decoration:none; color:#333}
		.newchord a:hover {text-decoration:underline;}
		.newchord a img {border:none;}
		.middle {background:url(https://www-ecs.jamplay.com/client/shell/images/chords/css-grid-chords.gif) bottom left no-repeat; padding:20px;}
		.newchordHover {background-color:#ededed !important; border:1px solid #000;}
		.newchordHover h2 {background:none !important; border:1px solid #ededed !important;}

			/* BOTTOM NOTES */
			.newchord ul {list-style:none; width:178px; clear:both; margin:0 0 5px 0; padding:0 0 0 20px; height:20px;}
			.newchord li {float:left; margin:0 7px 0 0; padding:0;}
			.newchord li {width:20px; border:1px solid #ccc; background:#f9f9f9; text-align:center; color:#000;}
			.open-note {border:1px solid #fff !important; background-image:none !important; background-color:fff !important;}

			/* FRET NUMBERS */
			.newchord p {float:left; width:18px; height:155px; margin:0; padding:13px 0 0 0;}
			.newchord p span {display:block; margin:0 0 15px 0; width:16px; height:16px; text-align:center; border:1px solid #ccc; background:#f9f9f9; color:#000;}

			/* TOP O and X */
			.status {height:15px !important; font-size:10px; margin:0  !important;}
			.status li {border-color:#fff; background:none;}

			/* ADDING TO MY CHORDS */
			.newchord form {display:block; padding:2px 0 0 0; margin:0; clear:both;}
			.newchord select {width:145px; margin-top:8px; }
			.newchord input {display:block; padding:0; clear:both; width:166px; height:27px; margin:5px auto 0 auto; border:none; }


				/* FINGER POSITION */
				.thischord {float:left; height:180px; width:175px; position:relative; z-index:1;}
				.thischord img {position:relative; display:block; float:left;  z-index:4;}
				.grid {position:absolute; z-index:2 !important; top:5px; left:14px;}
				.s6f1, .s5f1, .s4f1, .s3f1, .s2f1, .s1f1 {top:11px;}
				.s6f2, .s5f2, .s4f2, .s3f2, .s2f2, .s1f2 {top:44px;}
				.s6f3, .s5f3, .s4f3, .s3f3, .s2f3, .s1f3 {top:77px;}
				.s6f4, .s5f4, .s4f4, .s3f4, .s2f4, .s1f4 {top:110px;}
				.s6f5, .s5f5, .s4f5, .s3f5, .s2f5, .s1f5 {top:143px;}
				.s6f6, .s5f6, .s4f6, .s3f6, .s2f6, .s1f6 {top:172px;}
				.open {top:0px; left:0px; padding-bottom:140px; width:29px;}

				/* BARRE CHORDS, HOVER THE BRACKET */
				.barre {position:absolute;  z-index:3;}
				.barre img {}

				.fret1 {top:-14px;}     .start6 {left:12px;}
				.fret2 {top:19px;}      .start5 {left:41px;}
				.fret3 {top:52px;}      .start4 {left:70px;}
				.fret4 {top:86px;}      .start3 {left:100px;}
				.fret5 {top:118px;}     .start2 {left:130px;}

		.status .hack, .hack {margin-right:0px !important;}


		/* TAB DISPLAY VIEW */
		.tablature {width:200px; padding:9px 0 0 0; margin:0; text-align:center; position:relative;}
		.tablature p {float:left; width:13px; margin:0; padding:8px 0 0 35px;}
		.tablature p span {display:block; margin:0 0 13px 0; height:16px; width:13px; text-align:center; color:#000;}
		.thistablature {float:left; height:166px; width:25px; position:relative; z-index:1;}
		.thistablature img {position:relative; display:block;  z-index:4;}
		.tablaturegrid {position:absolute; z-index:2 !important; top:5px; left:0px;}

			.tab1, .tab2, .tab3, .tab4, .tab5, .tab6 {left:5px;}

				.tab1 {top:6px;}
				.tab2 {top:10px;}
				.tab3 {top:14px;}
				.tab4 {top:18px;}
				.tab5 {top:22px;}
				.tab6 {top:26px;}
				.open {top:0px; left:0px; padding-bottom:140px; width:29px;}