/* Style Sheet for SD Lyrics              */
/* Emphasis on larger font and darker colors for SCREEN DISPLAY */

body, font { font-family: Arial_sd, Arial; sans-serif;}
xbody      { font-size:15pt; color:#000000; } /* eg, smaller pt size */
body       { font-size:18pt;color: #000000; } 
             /* change pt size above to enlarge/reduce font */
body {max-width: 800px; background-color: #FFFFE0;}   /* #FFC0CB */

.title,
.title-normal,
.title-upbeat,
.title-relaxed  { font-size: 120%; font-weight: bold; text-align: left;}  /* common parts for title*/

.title,
.title-normal  {border: 3px solid green;} 
.title-upbeat  {border:3px solid red;}
.title-relaxed {border:3px solid blue;}
							 
.label   { font-size: 60%; color: purple; }
.artist  { font-size: 60%; color: green; }

.lyrics	 { font: normal 120% Arial; background-color: lightPink; } 
.lyrics2 { font: normal 120% Arial; background-color: #FFFF99; }
.lyrics3 { font: normal 120% Arial; background-color: #99FF99; }
 /* change color of lyrics in figure boxes */
.float .lyrics, .right .lyrics, 
box- .lyrics, float- .lyrics {background-color:lightblue;}

 

/* Allow folded lines to indent a bit */
p {padding-left:.5em;
   text-indent:-.5em; }

/* Use to indicate that current break are also for another break */
/* Use within start <div> and end </div> */
.alsoBrk3 {border: 6px dashed limegreen;} 
.alsoBrk2 {border: 6px dashed yellow;} 


p.lyrics	{ margin-top: 2px; margin-bottom: 2px; }
p.lyrics2	{ margin-left: 24px; margin-top: 2px; margin-bottom: 2px; }
p.lyrics3	{ margin-left: 48px; margin-top: 2px; margin-bottom: 2px; }

p.choreo { margin-top: 2px; margin-bottom: 2px; }
p.choreo2{ margin-left: 24px; margin-top: 2px; margin-bottom: 2px; }
p.choreo3{ margin-left: 48px; margin-top: 2px; margin-bottom: 2px; }

p.choreo::before {content: "\25AC\0020"} /* bold slash added &#9644; */ 
p.choreo::after {content: "\0020\25AC"} /* bold slash added &#9644; */ 
p.choreo2::before {content: "\25AC\0020"} /* bold slash added &#9644; */ 
p.choreo2::after {content: "\0020\25AC"} /* bold slash added &#9644; */ 
p.choreo3::before {content: "\25AC\0020"} /* bold slash added &#9644; */ 
p.choreo3::after {content: "\0020\25AC"} /* bold slash added &#9644; */ 

.choreo  { font: medium 100% Arial_sd; color: #3333CC; }
.choreo2 { font: medium 100% Arial_sd; color: #3333CC; }
.choreo3 { font: medium 100% Arial_sd; color: #3333CC; }


.tagtext  { font-size: 120%; background-color: lightpink; }
p.tagtext { margin-top: 2px; margin-bottom: 2px; }

hdr, h4, .hdr { 
	border-top: 2px solid red;
	font-size: 90%; font-weight: bold; color: red;
	font-family: Comic Sans MS;
	margin-top:10px; margin-bottom: 2px;
	padding-top: 5px;
	}
		
/* class="note"  can be also used in <span> for inline use */
/* Can use <note->...</note-> as tags as well as classes */
note, .note { 
	display: inline-block;
	border: 3px solid blue;
	padding: 0 8px 0 12px;
	margin: 2px 8px 0px 12px;
	font-size: 90%; font-weight: bold; color: green;
	}
	
.note::before {content:"  Note: "} 
note::before {content:"  Note: "} 

/* Can be used in <span> to add extra comment */
/* perhaps where they need to SW/PR but no time to say it. */
/* ... or where you might say SW/PR instead of singing */
/* Can use <extra>...</extra> as TAGS as well as CLASSES */
 extra, .extra {
	display: inline;
	font-style: italic;
	color: red;
	font-size: 85%;
	}
	
		 
.float {
	float: right;
	width: 40%;
	background-color: lightgrey;
	border: 3px solid green;
	margin-top: 20px;
	padding: 10px;
	}



box-, box, .box  {
	display: block;
	margin: 20 40 0 40;    
	width: 90%; 
	background: lightgray;   
	padding-left: 10px;
	padding-right: 10px;
	border: 3px solid green; }

/* Remove red line above heading when in a box; 
doesn't work in SqView which may not be using the latest css hierarchy of classes */
.box >  .hdr {border-top:0px;} 
/* change color of lyrics within floating box */
.box p.lyrics { background-color: lightblue; font-size: 120%; xpadding: 10px;} 
.float p.lyrics { background-color: lightblue; font-size: 120%; xpadding: 10px;}