
/* ============================LESSON============================ */

/* ----------GLOBAL FOR LESSONS and PRACTICE---------- */

#Lessons table.LessonInner {		/* was LessonText */
	width: 600px;
	margin-top: 50px;
	}
#Lessons td.LessonLeft div {
	padding: 20px 36px 0 16px;
	}
div.SpeakerBlock {
	float: left;
	padding-right: 10px;
	padding-top: 6px;
	}
#Lessons td.LessonRight div {
	padding: 20px 16px 0 36px;
	}
td.PractText {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	padding-top: 1px;
	}
span.Emph1 {
	font-weight: bold;
	font-style: italic;
	font-size: 1.1em;
	color: #295b8b;
	}
span.EmphWord {
	font-weight: bold;
	font-style: italic;
	color: #295b8b;
	}
.pFirst, .pMid, .pLast {
	font-size: 1.4em;
	text-align: justify;
	}
.pFirst {
	margin-bottom: .9em;
	}
.pMid {
	margin: .9em 0;
	}
.pLast {
	margin-top: .9em;
	}
#Lessons td.LessonRight {
	}
#Lessons td.LessonHeight img {
	margin-bottom: 300px;
	}
.LargeLinks a {					/* pages 9, 11, 15 */
	font-size: 100%;
	text-decoration: underline;
	}
.LargeLinks a:link    { color: #00f; }
.LargeLinks a:visited { color: #800080; }
.LargeLinks a:hover   { color: #f00; }
.LargeLinks a:active  { color: #f00; }


/* ----------FOR INDEX---------- */

.ParaABC {padding: 2px 7px 2px 0;}		/* for 33pt */
.ParaABC {padding: 0px 7px 0px 0;}		/* for 30pt */
#IndexLesson {
	margin-top: 20px;
	}
.starthere {					/* controls images on left and right */
	margin-right: 28px;
	margin-left: 30px;		/* controls outside margins of top graphics, and therefore the GraphicColLeft/Right widths */
	}
.lmc	{
	margin-top: 15px;
	margin-right: 10px;
	}
.l1, .l2, .l3 {
	margin-right: 50px;
	margin-top: 100px;
	}
.l1	{margin-top: 150px;}
.l2	{margin-right: 65px;}
.l3	{margin-right: 30px;}
.IndexLessonText {width: 378px;}
.IndexLessonText .pFirst {margin-bottom: 0;}


/* ----------FOR LESSONS: 9. CONSONANTS, 11. Vowels, 15. Common Words---------- */

.ConsLinks, .VowelLinks {
	text-align: center;
	color: #000;
	}
.ConsLinks, .VowelLinks { font-size: 2.5em; }
.ConsLinks p, .VowelLinks { margin: 12px 0; }
.ConsLinks a, .VowelLinks a { padding: 0 6px; }
.ConsLinks a, .VowelLinks a, .ComWrdLinks a { text-decoration: underline; }

.ConsLinks a:link,    .VowelLinks a:link,     .ComWrdLinks a:link    {color: #00f;}
.ConsLinks a:visited, .VowelLinks a:visited,  .ComWrdLinks a:visited {color: #800080;}
.ConsLinks a:hover,   .VowelLinks a:hover,    .ComWrdLinks a:hover   {color: #f00;}
.ConsLinks a:active,  .VowelLinks a:active,   .ComWrdLinks a:active  {color: #f00;}

/* ----------FOR LESSONS: 13. MORE VOWEL RULES---------- */		/* this page has List of links */

#RulesTableWrapper {
	margin-top: 60px;
	margin-left: auto;
	margin-right: auto;
	}
#RulesTableWrapper .PrevCol img {
	padding: 10px 20px 0 0;
	}
#RulesTableWrapper .NextCol img {
	padding: 10px 0 0 20px;
	}
#RulesTableWrapper .Middle img {
	padding-top: 20px;
	}
#VowelRules td.LessonSampleHead div {
	text-align: center;
	font-size: 1.3em;
	width: 3.1em;
	margin-bottom: 10px;
	}
#VowelRules td.LessonSampleHead div span {
	font-size: .625em;
	text-decoration: underline;
	}
#VowelRules .VowelTRSpacer {
	height: 10px;
	}
#VowelRules .VowelTR {				/* background for each of the 7 rows */
	background-color: #eef3e8;
	}
#VowelRules .LNTopBorder,			/* border around each of the 7 rows */
#VowelRules .LNBotBorder,
#VowelRules .LNLeftBorder,
#VowelRules .LNRightBorder {background-color: #c5d5af;}

#VowelRules td.LessonSpkr div {		/* !!! Override globals */
	font-size: 1.3em;			/* to give em spec for margin-right proper size context */
	text-align: left;
	margin-right: .4em;
	}
#VowelRules td.LessonNumber div {
	background-color: #6EB708;
	font-size: 26px;
	color: #fff;
	font-weight: normal;
	text-align: center;
	padding: .13em .3em .13em .3em;
	border: 1px solid #4f8306;
	margin: .2em;
	}
#VowelRules td.LessonLink div {
	font-size: 18px;
	width: 12em;
	text-align: left;
	margin-right: 15px;
	}
#VowelRules td.LessonLink a:link    {text-decoration: none; color: #666;}
#VowelRules td.LessonLink a:visited {text-decoration: none; color: #666;}
#VowelRules td.LessonLink a:hover   {text-decoration: underline; color: #666;}
#VowelRules td.LessonLink a:active  {text-decoration: underline; color: #666;}

#VowelRules td.LessonSample div {
	text-align: center;
	font-size: 20px;
	width: 3.1em;
	}
#VowelRules td.LessonSample div span {
	color: #ff0000;
	}
#VowelRules td.LessonSample div span.ConsColor {
	color: #0000ff;
	}
#VowelRules td.LessonSpcRight img {
	font-size: 1.3em;
	padding: 0 0 0 .2em;
	display: none;
	}
#VowelRules td.LessonSpcRight a:link {display: none;}
#VowelRules td.LessonSpcRight a:hover {display: none;}
#VowelRules td.LessonSpcRight a:visited {display: inline;}
#VowelRules td.LessonSpcRight a:active {display: none;}

#VowelRules td.LessonArrow {
	background-color: #fef8eb;
	border-left: 1px solid #ffd0d0;
	}
#VowelRules td.LessonArrow div {
	padding: 0 10px;
	}

/* ----------FOR VOWELS R1-7---------- */

#Vowels-R1-7 table.LessonText {
	width: 500px;
	}
#Vowels-R1-7 td.LessonSpkr {
	}
#Vowels-R1-7 td.LessonSpkr img,
#Vowels-R1-7 td.LessonRight img {
	margin-right: 10px;
	margin-top: 5px;
	}
#Vowels-R1-7 td.LessonMain {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	text-align: justify;
	background-color: #FFF8E0;
	padding: 6px 12px;
	border: 1px solid #FFF0B8;
	}
#Vowels-R1-7 td.LessonRight {
	}
.SubLesson {
	width: 450px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	text-align: justify;
	background-color: #ffffcc;
	padding: 8px 16px;
	border: 1px solid #ddd;
	}
.SubLesson div {
	float: left;
	display: inline;
	padding: .2em .4em .3em 0;
	}

/* ============================PRACTICE (15)============================ */

/* ----------GLOBALS---------- */

.PractInstr {
	width: 500px;
	font-size: 1.4em;
	margin-top: 30px;
	text-align: justify;
	}
.PractSpkr div {
	width: 50px;
	text-align: right;
	padding-right: 8px;
	}
.PractRight div {
	width: 50px;
	}
table.PractMain {				/* container for all practice words */
	margin-top: 40px;
	margin-bottom: 40px;
	background-color: #fffff0;
	border: 1px solid #ccc;
	}
td.PractWords div {			/* containers for each word */
	margin: 16px 30px;
	}
div.WordBox {				/* list of words */
	text-align: center;
	margin-top: 30px;
	margin-right: 25px;
	padding: 3px 6px;
	background-color: #fffff0;
	border: 1px solid #ccc;
	}
div.ListHeader {
	font-size: .75em;
	text-align: center;
	border-bottom: 1px solid #000;
	margin-bottom: 8px;
	}
td.WordList div p {
	font-size: .9em;
	text-align: left;
	margin: 4px 0;
	}
td.RightWidth div {
	width: 35px;
	}



/* ----------PRACTICE LETTERS---------- */

td.LetterList div p {
	font-size: .9em;
	text-align: center;
	margin: 4px 0;
	}
div.ListHeader {
	margin-bottom: 2px;
	}
div.LetterBox {				/* list of letters */
	margin-top: 30px;
	margin-right: 25px;
	padding: 3px 2px;
	background-color: #fffff0;
	border: 1px solid #ccc;
	}
table.ListOfLetters td {
	padding: 0 5px;
	}

/* ============================PICS============================ */

#ExercInstruc {
	font-size: .8em;
	width: 500px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 25px;
	margin-bottom: 10px;
	}

td.Leadin {					/* REMEMBER: cellpadding is 10px!!!! */
	font-size: 2px;
	line-height: 2px;
	border-bottom: 1px solid #ccc;
	}
td.Pic {
	text-align: right;
	padding-top: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #ccc;
	}
td.Pad {
	font-size: 2px;
	padding-top: 160px;
	border-bottom: 1px solid #ccc;
	}
td.Word {
	text-align: left;
	font-size: 200%;
	border-bottom: 1px solid #ccc;
	}
tr.TopPic td.Pic,
tr.TopPic td.Pad,
tr.TopPic td.Word {
	border-top: 1px solid #ccc;
	}
table.PicTable1 tr.TopPic td.Pic,
table.PicTable1 tr.TopPic td.Pad,
table.PicTable1 tr.TopPic td.Word,
table.PicTable2 tr.TopPic td.Pic,
table.PicTable2 tr.TopPic td.Pad,
table.PicTable2 tr.TopPic td.Word {
	border-top: 0;
	}
table.PicTable2 {
	margin-top: 30px;
	}

/* ----------FOR VOWELS---------- */


/* ============================SUBTITLE============================ */	/* for picture groups */

td.SubTitleSpkr div,
td.SubTitleRight img {
	margin-right: 10px;
	}
td.SubTitleMain {
	font-size: 1.7em;
	font-weight: normal;
	color: #ff0000;
	background-color: #ffffee;
	text-align: center;
	padding-top: 3px;
	padding-bottom: 3px;
	border-top: 2px solid #ffdc75;
	border-bottom: 2px solid #ffdc75;
	}

/* ----------FOR VOWELS BME---------- */

#Vowels-BME td.SubTitleMain {
	width: 350px;
	}

/* ============================DESCRIPTION============================ */

#Description {
	font-family: georgia, 'times new roman', times, serif;
	width: 580px;
	font-size: .9em;
	text-align: left;
	margin-right: auto;
	margin-left: auto;
	margin-top: 24px;
	background-color: #64acfe;
	}
#Description td {
	background-color: #f8f3bd;
	padding: 12px 18px;
	border: 1px solid #958a00;
	}
#Description strong {
	font-weight: bold;
	font-style: italic;
	}
#Description h1 {
	font-weight: bold;
	font-style: italic;
	display: inline;
	}



/* ============================INDEX / LINKS============================ */

#Index table.LessonTextIndex {
	width: 351px;			/* width needs to go here rather than in td because %s are used in speaker, number and link tds */
	margin-top: 40px;
	}
.LinkSubhead1, .LinkSubhead2, .LinkSubhead3, .LinkSubhead4, .LinkSubhead5 {			/* container for "LSHTable" table */
	background-repeat: no-repeat;
	height: 30px;						/* minimum height of Subheading */
	}
/*
.LinkSubhead1 { background-color: #F0F4FA; border: 3px solid #0750B8; }
.LinkSubhead2 { background-color: #F8F2F8; border: 3px solid #CC66CC; }
.LinkSubhead3 { background-color: #fef8eb; border: 3px solid #FF2626; }
.LinkSubhead4 { background-color: #F5F9F0; border: 3px solid #528708; }
.LinkSubhead5 { background-color: #F9F6E1; border: 3px solid #FDA001; }
*/
.LinkSubhead1 { background-color: #0750B8; border: 1px solid #00046C; }
.LinkSubhead2 { background-color: #CC66CC; border: 1px solid #9B359B; }
.LinkSubhead3 { background-color: #FF2626; border: 1px solid #FF0000; }
.LinkSubhead4 { background-color: #5EA700; border: 1px solid #367F00; }
.LinkSubhead5 { background-color: #FDA001; border: 1px solid #CD7000; }

#Index .LSHSpeaker div {			/* container for Flash speaker */
	text-align: left;
	margin-left: 3px;
	margin-bottom: 0px;			/* offset 2px to improve vertical centering of speaker */
	background-color: #fef8eb;
	padding-bottom: 2px;
	padding-right: 1px;
	}
.LSHTitle1, .LSHTitle2, .LSHTitle3, .LSHTitle4, .LSHTitle5 {
	font-size: 1.2em;
	font-weight: bold;
	font-style: italic;
	color: #0750B8;
	}
/*
.LSHTitle1 { color: #0750B8; }
.LSHTitle2 { color: #CC66CC; }
.LSHTitle3 { color: #FF2626; }
.LSHTitle4 { color: #6EB708; }
.LSHTitle5 { color: #FDA001; }
*/
.LSHTitle1 { color: #F0F4FA; }
.LSHTitle2 { color: #F8F2F8; }
.LSHTitle3 { color: #fef8eb; }
.LSHTitle4 { color: #F5F9F0; }
.LSHTitle5 { color: #FFFFF6; }

#Index td.LSHLeft img {
	margin-right: 3px;
	}
.SHSpaceAbove img {
	padding-top: 16px;
	}
.SHSpaceBelow img {
	padding-bottom: 4px;
	}
#Index td.LessonSpkr {
	width: 5%;
	}
#Index td.LessonSpkr div {
	margin-left: 30px;
	margin-right: .4em;
	margin-top: 1px;
	}
#Index td.LessonNumber {
	width: 5%;
	}
#Index td.LessonNumber div {
	color: #fff;
	font-size: 1.4em;
	text-align: center;
	}
#Index td.LessonLink {
	width: 90%;
	height: 32px;
	}
#Index td.LessonLink div {
	font-size: 18px;
	text-align: left;
	margin: 0 0 0 .7em;

	}
#Index td.LessonLink a:link    {text-decoration: none;}
#Index td.LessonLink a:visited {text-decoration: none;}
#Index td.LessonLink a:hover   {text-decoration: underline; color: #00f;}
#Index td.LessonLink a:active  {text-decoration: underline;}

.LsnLink1 a:link, .LsnLink1 a:visited,
.LsnLink2 a:link, .LsnLink2 a:visited,
.LsnLink3 a:link, .LsnLink3 a:visited,
.LsnLink4 a:link, .LsnLink4 a:visited {color: #0750B8;}
.LsnLink5 a:link, .LsnLink5 a:visited,
.LsnLink6 a:link, .LsnLink6 a:visited,
.LsnLink7 a:link, .LsnLink7 a:visited {color: #CC66CC;}
.LsnLink8 a:link, .LsnLink8 a:visited,
.LsnLink9 a:link, .LsnLink9 a:visited {color: #63A3FE;}
.LsnLink10 a:link, .LsnLink10 a:visited,
.LsnLink11 a:link, .LsnLink11 a:visited,
.LsnLink13 a:link, .LsnLink12 a:visited,
.LsnLink13 a:link, .LsnLink13 a:visited {color: #FF2626;}
.LsnLink14 a:link, .LsnLink14 a:visited {color: #6EB708;}
.LsnLink15 a:link, .LsnLink15 a:visited {color: #FDA001;}

#Index td.LessonRight div {
	padding: 0 0 0 0;
	margin-right: 20px;
	}
#Index td.LessonRight a:link {display: none;}
#Index td.LessonRight a:hover {display: none;}
#Index td.LessonRight a:visited {display: inline;}
#Index td.LessonRight a:active {display: none;}

#Index td.LessonRightx div {
	padding: 3px 0;				/* Min vertical spacing between arrows if "LessonNumber" spacing becomes too small */
	margin-right: 20px;
	}

.LsnNum1 div, .LsnNum2 div, .LsnNum3 div, .LsnNum4 div, .LsnNum5 div, .LsnNum6 div, .LsnNum7 div, .LsnNum8 div, .LsnNum9 div, .LsnNum10 div, .LsnNum11 div, .LsnNum12 div, .LsnNum13 div, .LsnNum14 div, .LsnNum15 div {
	color: #fff;
	font-size: 19px;
	font-weight: normal;
	text-align: center;
	width: 32px;
	}
.LsnNum10 div, .LsnNum11 div, .LsnNum12 div, .LsnNum13 div, .LsnNum14 div, .LsnNum15 div {
	width: 31px;
	margin-right: 1px;
	}
.LsnNum1, .LsnNum2, .LsnNum3, .LsnNum4 { background: url( "../g/index_dkblue.gif" ) no-repeat center; }
.LsnNum5, .LsnNum6, .LsnNum7 { background: url( "../g/index_purple.gif" ) no-repeat center; }
.LsnNum8, .LsnNum9 { background: url( "../g/index_ltblue.gif" ) no-repeat center; }
.LsnNum10, .LsnNum11, .LsnNum12, .LsnNum13 { background: url( "../g/index_red.gif" ) no-repeat center; }
.LsnNum14 { background: url( "../g/index_green.gif" ) no-repeat center; }
.LsnNum15 { background: url( "../g/index_orange.gif" ) no-repeat center; }

.LsnNum a {
	text-decoration: none;
	}

.LsnNum a:link    {color: #fff;}
.LsnNum a:visited {color: #fff;}
.LsnNum a:hover   {color: #fff; text-decoration: underline;}
.LsnNum a:active  {color: #fff;}


/* ------------------------------------------------------- */

#paragraphwrapper {
/*	margin: 30px 150px 0 150px;	*/      /* using margins instead of width created bizarre border size and position in ie */
	width: 400px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 40px;
	}
#speaker {
	float: left;
	width: 50px;
	text-align: right;
	}
#speaker img {
	position: relative;
	top: 6px;
	padding-right: 10px;
	}
#paragraphwrapper p {
	float: right;
	width: 350px;
	text-align: left;
	font-family: "Geneva", "Arial", "Helvetica", sans-serif;
	font-size: 1em;
	color: black;
	margin-top: 10px;
	}
.highlightword {
	font-weight: bold;
	color: black;
	}
.highlightletter-b {
	font-size: 1.2em;
	font-weight: bold;
	color: #000;
	}
.highlightletter-s {
	font-weight: bold;
	color: #000;
	}
.quote {
	font-weight: normal;
	color: #000;
	}

