body {
	margin: 10px 10px 500px 10px;
	padding: 0px;
	font-family: Comic Sans MS;
	font-size: 21pt;
	font-weight: Normal;
	line-height: 140%;
	background: #FFFFE0;
	color: #000000;
}

header {
	text-align: center;
	margin: auto;
}

ul {
	list-style-type: none;
}

/* added for contra 6/25/26 */
p {
	margin:  10px 5px;
//	max-width: 675px;
}

.credits {
	margin-bottom: 20px;
	text-align: center;
}

.title {
	font-size: 24pt;
	font-weight: Bold;
	color: #000000;
}

.artist,
.label,
.bpm,
.pitch,
.patter {
	font-size: 10pt;
	font-weight: Normal;
	color: #0000FF;
}

.hdr {
	color: #FF0000;
	margin: 25px 0px 10px 0px;
	text-transform: uppercase;
}

.pre,
.open,
.middle,
.close,
.break,
.figure,
.tag,
.sq4,
.walkthru {
	margin-top: 50px;
}

.figure {
	counter-reset: icounter;
}

.pre::before,
.open::before,
.middle::before,
.close::before,
.break::before,
.figure::before,
.tag::before,
.sq4::before,
.walkthru::before {
	display: block;
	color: red;
}

.pre::before {
	content: "Intro ";
}

.open::before {
	content: "Opening ";
}

.middle::before {
	content: "Middle ";
}

.close::before {
	content: "Closing ";
}

.break::before {
	content: "Break ";
}

.tag::before {
	content: "Tag ";
}

.walkthru::before {
	content: "Walk-Through ";
}

.early::before {
	content: "Early";
}

.later::before {
	content: "Later";
}

.figure.heads1::before {
	content: "Figure Heads 1";
}

.figure.heads2::before {
	content: "Figure Heads 2";
}

.figure.heads3::before {
	content: "Figure Heads 3";
}

.figure.heads4::before {
	content: "Figure Heads 4";
}

.figure.heads5::before {
	content: "Figure Heads 5";
}

.figure.heads6::before {
	content: "Figure Heads 6";
}

.figure.heads7::before {
	content: "Figure Heads 7";
}

.figure.sides1::before {
	content: "Figure Sides 1";
}

.figure.sides2::before {
	content: "Figure Sides 2";
}

.figure.sides3::before {
	content: "Figure Sides 3";
}

.figure.sides4::before {
	content: "Figure Sides 4";
}

.figure.sides5::before {
	content: "Figure Sides 5";
}

.figure.sides6::before {
	content: "Figure Sides 6";
}

.figure.sides7::before {
	content: "Figure Sides 7";
}

.figure::before {
	content: counter(icounter);
	counter-increment: icounter;
}

.figure.cp::before {
	content: "Figure Chicken Plucker";
}

.figure.zb::before {
	content: "Figure Zero Box";
}

.figure.ir::before {
	content: "Figure Invert Rotate";
}

.figure.plcb::before {
	content: "Figure PL Conversion";
}

.figure.cbpl::before {
	content: "Figure CB Conversion";
}

.sq4.z1::before {
	content: "Square Thru 4 Equiv 1";
}

.sq4.z2::before {
	content: "Square Thru 4 Equiv 2";
}

.sq4.z3::before {
	content: "Square Thru 4 Equiv 3";
}

.sq4.z4::before {
	content: "Square Thru 4 Equiv 4";
}

.sq4.z5::before {
	content: "Square Thru 4 Equiv 5";
}

.sq4.z6::before {
	content: "Square Thru 4 Equiv 6";
}

.sq4.z7::before {
	content: "Square Thru 4 Equiv 7";
}

.sq4.z8::before {
	content: "Square Thru 4 Equiv 8";
}

.sq4.z9::before {
	content: "Square Thru 4 Equiv 9";
}

.sq4.z10::before {
	content: "Square Thru 4 Equiv 10";
}

.walkthru::before {
	content: "Walk-Through ";
}

.text-keep,
.text,
.remove {
	color: #1C7075;
	margin-right: 8px;
}

.text-keep,
.text,
.remove::before {
	content: " (";
	white-space: pre-line;
}

.text-keep,
.text,
.remove::after {
	content: ") ";
	white-space: pre-line;
}

.remove {
	font-size: 65%;
}

.head,
.heads,
.headsc,
.side,
.sides,
.sidesc,
.leaders,
.trailers,
.boys,
.men,
.gent,
.gents,
.girl,
.girls,
.lady,
.ladies,
.partner,
.corner,
.neighbor,
.couples,
.home,
.ends,
.center,
.centers,
.left,
.right {
	margin: 0px 0px;
	text-transform: capitalize;
	padding: 0px 0px;
	color: red;
}

.head::after,
.heads::after,
.headsc::after,
.side::after,
.sides::after,
.sidesc::after,
.leaders::after,
.trailers::after,
.boys::after,
.men::after,
.gent::after,
.gents::after,
.girl::after,
.girls::after,
.lady::after,
.ladies::after,
.partner::after,
.corner::after,
.neighbor::after,
.couples::after,
.home::after,
.ends::after,
.center::after,
.centers::after,
.left::after,
.right::after {
	content: " ";
	background-color: white;
}
.lsp {
	margin-left: 10px !important;
	min-width: 50px;
}

.lsp::before {
}

.rsp {
	margin-right: 10px !important ;
	min-width: 50px;
}

.rsp::after {
}

.head,
.heads,
.leaders {
	background-color: lightblue;
}

.side,
.sides,
.trailers {
	background-color: lightgreen;
}
.headsc,
.sidesc {
	background-color: #dac6e6;
	color: grey;
}

.boys,
.men,
.gent,
.gents {
	background-color: #ccffff;
}

.girl,
.girls,
.lady,
.ladies {
	background-color: #ffe6ff;
}

.partner {
	background-color: #ccffcc;
}

.corner,
.neighbor,
.couples {
	background-color: #ffdab3;
}

.home {
	background-color: #ffff99;
}

.ends {
	background-color: #ffbb88;
}

.center,
.centers {
	background-color: #99ff99;
}

.left {
	background-color: #00eaff;
}

.right {
	background-color: #7fff00;
}

.new {
	background-color: deeppink;
	color:  white;
}

.left,
.right {
	font-weight: bold;
}

.head::before {
	content: "Head";
}

.heads::before {
	content: "Heads";
}

.headsc::before {
	content: "(";
}

.headsc::after {
	content: ")";
}

.leaders::before {
	content: "leaders";
}

.side::before {
	content: "Side";
}

.sides::before {
	content: "Sides";
}

.sidesc::before {
	content: "(";
}

.trailers::before {
	content: "Trailers";
}

.boys::before {
	content: "Boys";
}

.men::before {
	content: "Men";
}

.gent::before {
	content: "Gent";
}

.gents::before {
	content: "Gents";
}

.girl::before {
	content: "Girl";
}

.girls::before {
	content: "Girls";
}

.lady::before {
	content: "Lady";
}

.ladies::before {
	content: "Ladies";
}

.partner::before {
	content: "Partner";
}

.corner::before {
	content: "Corner";
}

.neighbor::before {
	content: "Neighbor";
}

.couples::before {
	content: "Couples";
}

.home::before {
	content: "Home";
}

.ends::before {
	content: "Ends";
}

.center::before {
	content: "Center";
}

.centers::before {
	content: "Centers";
}

.left::before {
	content: "Left";
}

.right::before {
	content: "Right";
}

.cross::before {
	content: "Cross";
	font-weight: bold;
}

.new::before,
.label::before,
.bpm::before,
.pitch::before {
	content: "(";
}

.new::after,
.label::after,
.bpm::after,
.pitch::after {
	content: ")";
}


.teach {
	background-color: beige;
	margin: 5px 20px 5px 90px;
	padding: 5px 20px;
}

.teach::before {
	content: "Teach ";
}

.teach::before,
.teach::after {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 0 0;
    padding: 0;
    content: "";
}

.callname {
	font-weight: bold;
	color: darkblue;
	margin-right: 10px;
}

.definition {
	color: orangered;
}

.dancestyle {
	color: chocolate;
}

/* lyrid is dim lyrics */
.lyric,
.lyrid,
.lyrics {
	color: #000000;
	background-color: #FFC0CB;
	display: inline;
	margin-left: 0px;
}

.lyric::after {
	content: "\A";
	white-space: pre-line;
}

.beat0::before {
	content: "";
}

.beat1::before {
	content: "1";
}

.beat2::before {
	content: "12";
}

.beat3::before {
	content: "123";
}

.beat4::before {
	content: "1234";
}

.beat5::before {
	content: "12345";
}

.beat6::before {
	content: "123456";
}

.beat7::before {
	content: "1234567";
}

.beat8::before {
	content: "12345678";
}

.beat9::before {
	content: "1_8.1";
}

.beat00::before {
	content: "";
}

.beat01::before {
	content: "1";
}

.beat02::before {
	content: "1 2";
}

.beat03::before {
	content: "123";
}

.beat04::before {
	content: "1234";
}

.beat05::before {
	content: "12345";
}

.beat06::before {
	content: "123456";
}

.beat07::before {
	content: "1234567";
}

.beat08::before {
	content: "12345678";
}

.beat09::before {
	content: "1_8.1";
}

.beat10::before {
	content: "1_8.12";
}

.beat11::before {
	content: "1_8.123";
}

.beat12::before {
	content: "1_8.1..4";
}

.beat13::before {
	content: "1_8.1...5";
}

.beat14::before {
	content: "1_8.1....6";
}

.beat15::before {
	content: "1_8.1.....7";
}

.beat16::before {
	content: "1_8.1......8";
}

.beat28::before {
	content: "123_8.1..4";
}

.beat91::before {
	content: "1";
}

.beat92::before {
	content: "2";
}

.beat93::before {
	content: "3";
}

.beat94::before {
	content: "4";
}

.beat95::before {
	content: "5";
}

.beat96::before {
	content: "6";
}

.beat97::before {
	content: "7";
}

.beat98::before {
	content: "8";
}

.beat34::before {
	content: "34";
}

.beat56::before {
	content: "56";
}

.beat78::before {
	content: "78";
}

.beat36::before {
	content: "3456";
}

.beat66::before {
	content: "6";
}

.beatmid,
.prebt,
.beatb,
.beats,
.beatz,
.beat0,
.beat1,
.beat2,
.beat3,
.beat4,
.beat5,
.beat6,
.beat7,
.beat8,
.beat9,
.beat00,
.beat01,
.beat02,
.beat03,
.beat04,
.beat05,
.beat06,
.beat07,
.beat08,
.beat09,
.beat10,
.beat11,
.beat12,
.beat13,
.beat14,
.beat15,
.beat16,
.beat28,
.beat34,
.beat56,
.beat78,
.beat36,
.beat66,
.beat90,
.beat91,
.beat92,
.beat93,
.beat94,
.beat95,
.beat96,
.beat97,
.beat98 {
	display: inline-flex;
	justify-content: space-between;
	font-family: "Courier New";
	font-size: 12pt;
	padding: 0px 2px 0px 2px;
	background-color: #f8e4e4;
	color: #1c54c0;
}

.beatb,
.beats,
.beatz,
.sects {
	width: 65px;
	justify-content: right;
	margin: 0px 4px 0px 2px;
}

.beat0,
.beat1,
.beat2,
.beat3,
.beat4,
.beat5,
.beat6,
.beat7,
.beat8,
.beat9,
.beat00,
.beat01,
.beat02,
.beat03,
.beat04,
.beat05,
.beat06,
.beat07,
.beat08,
.beat09,
.beat10,
.beat11,
.beat12,
.beat13,
.beat14,
.beat15,
.beat16,
.beat28,
.beat34,
.beat56,
.beat78,
.beat36,
.beat66,
.beat90,
.beat91,
.beat92,
.beat93,
.beat94,
.beat95,
.beat96,
.beat97,
.beat98 {
	width: 125px;
	justify-content: right;
}
	
.prebt,
.beatmid,
.beatb,
.beats,
.beatz {
	font-size: 20pt;
}

.beat0,
.beat00 {
	margin: 0px -2px 0px 0px;
}

.beatz {
    background-color: #d0d0d0;
}



.prebt {
	color: green;
	font-size: 65%;
}

.beatb {
	font-weight: bold;
}

.lcall,
.rcall {
	background: #FFFFE0;
	color: #000000;
}

.lcall {
	padding-right: 10px;
}

.rcall {
	padding-left: 10px;
}

.sects::after,
.hints::after,
.first::after,
.calls::after,
.callx::after,
.homes::after {
	content: "\A";
	white-space: pre-line;
}

.sects,
.hints,
.first,
.calls,
.callx,
.homes {
	display: inline;
}

.calls,
.lyric {
	margin-left: 10px;
}

.callx {
	color: purple;
	opacity: .3;
}

.lyrid {
	opacity: .3;
}

.sects {
	color: orange;
}

.hint,
.hints {
	color: #e394ff;
}

.first {
	background-color: yellow;
}

.homes {
	background-color: lightgreen;	
}

.p01::before {
	content: "Patter 1";
}

.p02::before {
	content: "Patter 2";
}

.p03::before {
	content: "Patter 3";
}

.p04::before {
	content: "Patter 4";
}

.p05::before {
	content: "Patter 5";
}
.cname {
	font-weight: bold;
	color: darkblue;
	margin-right: 10px;
}

.text-delete {
	display: none;
	color: #FFC0CB
}

.text {
	display: none;
	color: #FFC0CB
}

.text,
.text-keep {
	display: inline;
}

.now,
.wait {
	font-size: 75%;
	background-color: red;
	color: white;
}

.wait::before {
	content: "WAIT  ";
}

.now::after,
.wait::after {
	content: " ";
	background-color: white;
}


.now {
	font-size: 75%;
	background-color: red;
	color: white;
}

.now::before {
	content: "GO";
}

.now::after {
	content: " ";
	background-color: white;
}

.timer {
	display: inline-block;
	font-size: 16px;
	color: forestgreen;
	width: 40px;
}

.timer {
}

.hide {
	display: none;
}

@media only screen and (max-width: 420px) {
	.beat0,
	.beat1,
	.beat2,
	.beat3,
	.beat4,
	.beat5,
	.beat6,
	.beat7,
	.beat8,
	.beat9,
	.beat00,
	.beat01,
	.beat02,
	.beat03,
	.beat04,
	.beat05,
	.beat06,
	.beat07,
	.beat08,
	.beat09,
	.beat10,
	.beat11,
	.beat12,
	.beat13,
	.beat14,
	.beat15,
	.beat16,
	.beat34,
	.beat56,
	.beat78,
	.beat36,
	.beat66,
	.beat90,
	.beat91,
	.beat92,
	.beat93,
	.beat94,
	.beat95,
	.beat96,
	.beat97,
	.beat98,
	.beat34,
	.beat56,
	.beat78,
	.beat36 {
		padding: 0px 10px 0px 10px;
	}
}
