/* 2022 additions */
.NoBreak{white-space:nowrap;}
.hDef {
	direction: rtl; 
	font-family: 'Noto Serif Hebrew',arial; font-size: 1.5em; font-weight: bold; 
	float:right;
}
.TableScroll {display:block;position:relative;overflow:auto;text-align:right; border-collapse:collapse;
	max-height:calc(100vh - 50px);white-space:nowrap;
}
.TableScroll th { position:sticky;left:0;background-color:white;padding:.25rem 2rem .25rem 0;z-index:2;}
.TableScroll td { padding:.25rem 1rem;}
.TableScroll .TopRow { position:sticky;top:0;background-color:white;padding:.25rem;z-index:1;}
.TableScroll .Corner { position:sticky;top:0;left:0;font-family:'Roboto',sans-serif;font-size:1rem;background-color:white;z-index: 3;}

hr{clear:both;}
#Related hr, #Related2023 hr {display:inline-block;float:left;position:relative;top:2px;margin-right:10px;
	width:150px;height:7px;
	background-color:gold;border-radius: 10px;
	}
#Related .TopContainer { width: 100%;margin: auto;padding: 10px;clear:both;}
#Related .container { width: 100%;margin: auto;padding: 10px;clear: both;border-top: 1px dotted #999999;}
#Related .L {display:inline-block;float:left;margin-right:20px;width:100px;}
#Related a, #Related2023 a {text-decoration:none;cursor:pointer;}
#Related a:link, #Related2023 a:link {color:black;}
#Related a:visited, #Related2023 a:visited {color:black;}

#Related2023 .TopContainer, #Related2023 .container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center; 
	gap: 0px; 
	justify-content: flex-start;
}
#Related2023 .container {
	border-top: 1px dotted #999999;
	padding-top: 10px;
	margin-bottom: 20px; 
}
#Related2023 .L, #Related2023 .R  {
	padding:5px;
	color:black;
	align-items:center;
}
#Related2023 .L { width:125px; text-align:center; margin-top: 5px;}
#Related2023 .R { max-width:600px;margin-top:-10px;}

.NextHoliday {display:inline-flex;position:relative;left:25px;width:0px;height:0px;
	border-top:25px solid transparent;border-bottom:25px solid transparent;border-left:50px solid blue;}
.LastHoliday {display:inline-flex;position:relative;left:15px;width:0px;height:0px;
	border-top:25px solid transparent;border-bottom:25px solid transparent;border-right:50px solid blue;}
.hTxt {float: right; clear: both; text-align: right; margin-top: 20px;font-family:'Noto Serif Hebrew',arial;font-size:24px;font-weight:bold;direction:rtl;letter-spacing:.05em;}
.hInline {font-family:'Noto Serif Hebrew',arial;font-size:1.2rem;font-weight:bold;letter-spacing:.05em;}
.Highlight{background-color:yellow;}
.HebrewText {font-family:'Noto Serif Hebrew',arial;font-size:125%;direction:rtl;letter-spacing:.05em;}

.ReadingSync {width: 80%; margin-left: auto; margin-right: auto; font-size:80%;line-height:1.25rem;}
.ReadingSync td { background-color: yellow; border: solid 3px gray; border-style: groove; padding: 5px; font-style: italic;}
.DateBlock{color:white;line-height:1rem;font-size:80%;text-align:center;
	margin:auto;vertical-align:top;padding-top:3px;
	width:calc(100vw - 525px);height:3em;overflow:auto;}
.DateBlock div {display:inline-block;vertical-align:top;max-width:75%;}
.DateBlock a {color:#00FFFF;}
.DateBlock a:visited {color:#00FFFF;}
.CalBlock {background-color:red;
	border:solid 1px black;border-spacing:0px;}
.DateBlockMonth {color:#ffffff;padding:1px 5px;font-size:60%;min-width:25px;}
.DateBlockDay {background-color:#FFFFFF;color:#0000FF;text-align:center;
	font-weight:bold;font-family:arial;font-size:120%;}
.DateBlockText {line-height:1rem;font-size:75%;height:100%;}
.DateBlockText table {height:100%;background-color:#0044CC;}
.DateBlockText td {vertical-align: middle;}

#Contents {clear:both;float:right;text-align:right;
	max-height:calc(100vh - 150px); margin-bottom:10px;}
#Contents > nav > div { padding:10px;background-color:#ddeeff;border:1pt solid #00AAFF;
	border-radius:10px;padding-top:0px;max-width:150px; }
#Contents > nav > div > p { line-height:1rem; margin-bottom:1.75rem; }
.TopicContainer{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch; 
	gap: 20px; 
	justify-content: space-between;
margin-bottom: 20px; 
}
.topical{flex-grow: 1;
	flex-basis: 40%;
	text-align:center;
	vertical-align:middle;
	padding:5px;
       	border:solid 2px #0000DD;
	border-radius:10px;
	box-shadow:1px 2px #000088;
       	font-size:80%;
	line-height:1.25rem;
	color:black;
}
.topical > a:link {color:black;}
.topical > a:visited {color:black;}
.topical:visited {color:black;}
.topical > img { max-width: 225px; }
.topicalHead { display:block;margin:5px 0px;font-size: 150%; font-weight: bold;}
.hamburger {font-size:150%;margin-left:11px;}
.ContentsBox {float:right;position: relative;z-index:2;top:0;background-color: red;color:white;border: solid 1px #00AAFF;line-height: 1rem;display:none;}
.ShowContents {display:none;}

#Nav0{ display:none; }

/* TAGS */
body{font-family:'Roboto',sans-serif;line-height:1.75rem;font-size:1rem;background-color:#cceeff;margin:0px;}
a{text-decoration:none;cursor:pointer;}
a:visited{color:blue;}
img{max-width:100%;height:auto;}

/* HEADER */
.banner{position:relative;top:0;left:0;height:87px;width:100%;z-index:2;background-color:#0044cc;}
.logostar{padding-left:10px;padding-top:2px;float:left;height:54px;width:46px;z-index:5;}
.logotext{position:absolute;top:15px;left:60px;color:#eeeeee;font-size:36px;font-weight:bold;text-shadow:2px 3px black;z-index:5;}
.bannerSearch{position:absolute;right:10px;top:10px;}
.bodySearch{text-align:center;}
.searchBox{font-size:1.25rem;font-family:arial narrow;background-color:#ccddff;border:none;max-width:calc(100vw - 110px);}
.searchButton{position:relative;top:5px;height:25px;width:25px;margin-left:-5px;
	background-image: url("srch.png");border:transparent;}


/* NAVIGATION */
.PageMenu{display:none;}
.SiteMenu{display:none;}
.NavHead li:hover { background-color: #000088; }
.NavHead li:hover .arrow-up { display:block; }
.NavHead li:hover .NavSub { display:block;}
.NavHoverLI { background-color: #0000CC; }

.NavHead,.NavHead2{top:60px;list-style-type:none;margin:0;padding:0;overflow:hidden;width:100%;font-size:90%;background-color:#0044cc;}
.NavHead li,.NavHead2 li{float:left;overflow:auto;}
.NavHead li a,.NavHead2 li a{display:block;text-align:center;padding-left:16px;padding-right:16px;color:white;text-decoration:none;}
.NavSub{display:none;max-height:calc(100vh - 150px); position:absolute;background-color:#000088;min-width:200px;z-index:1;top:86px;max-width:300px;margin-left:5px;text-align:left;border-radius:10px;overflow:auto;}
.NavSub > p > a {text-align:left;margin-left:10px;text-indent:-10px;color:#ffffff;
	line-height:1rem; margin-bottom:1.75rem;}
.NavSub > div > a {text-align:left;margin-left:10px;text-indent:-10px;color:#ffffff;}
.BackLink{font-size:90%;padding-right:10px;display:inline-block;}
.NextLink{ font-size:90%;padding-left:10px;display:inline-block;}
.arrow-up{width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:5px solid white;margin-left:30px;margin-top:-3px;display:none;}
.arrow-left{width:0;max-height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:10px solid black;display:inline-flex;padding-left:0px;}
.arrow-right{width:0;max-height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:10px solid black;display:inline-flex;padding-left:0px;}
#MobileSub3{left:100px;background-color:#0000CC;z-index:5;display:block;}

/* PAGE TEXT */
.Related {text-align:left;margin-bottom:-1rem;display:block; font-size:90%; font-weight:bold; margin-top:20px; margin-left:10px; text-indent:-10px;}
.L0{text-align:left;margin-bottom:-1rem;display:block; font-size: 90%; font-weight: bold; margin-top: 20px; margin-left: 10px; text-indent: -10px; }
.L1{display: block; font-size: 90%; margin-left: 20px; text-indent: -10px;}
.L2{display: block; font-size: 75%; margin-left: 40px; text-indent: -10px;}
.PageText {max-width: 800px; margin: auto;padding: 20px 20px 20px 20px;position: relative;top: 0;background-color: #fff;}
.BodyText {}
.ParshahText {max-width: 800px;margin: auto;padding: 10px;position: relative;top: 0;background-color: #fff;}
.Summary {margin-left: 20px;margin-bottom: 20px;padding-left: 0px;padding-right: 5px;
	font-size: 90%;border: outset #0066CC;
	line-height: 1.25rem;max-width: 450px;min-width: 300px;float: right;}
.Level{font-style: italic; font-weight: bold; color: #CC0000; clear: both;}
.MenuText {display: table-cell;width: 180px;}
.Menu {padding-top:30px;padding-right:10px; margin-left:10px; width:180px;line-height:2rem;max-height:calc(100vh - 150px); overflow:auto;}
.Menu a {text-decoration: none;color: black;}
.copyrt1{font-style: italic; text-align: center;line-height:2rem;}
.copyrt2{font-size: 80%; font-style: normal;}
.FooterAll{font-size: 80%; text-align: center; line-height: 1rem; padding-bottom: 3rem;clear:both;}
.LF {clear:both;} /*line feed*/

/* CALENDAR 2022 */
.CalTable{width:100%;min-width:600px;max-width:1200px;margin:auto;border-collapse:collapse;table-layout:fixed;background-color:white;}
.CalTable td {border:solid black 1px;vertical-align:top; line-height:1.25rem;font-size:90%}
.CalTable th{font-size:150%;}
.CalMonth{font-size:100%;text-align:left;}

/* DEFINITIONS */
#DefWrap {display: none;position: absolute;top: 500px;width: calc(100vw - 200px);max-width: 800px;}
#DefFrame {display: none;border: solid 2px blue;position:absolute;width: 100%;height: 150px;overflow: auto;}
.CloseBox {float:right;position: relative;z-index:2;top:0;background-color: red;color: white;border: solid 1px #00AAFF;line-height: 1rem;}

/* PAGE OR SECTION TITLE */
.TitleBar{display:flex; flex-direction: row; justify-content: space-between; gap: 20px;}
.EnglishCell{}
.HebrewCell{}
.HebrewTitle{margin-bottom: -8px; text-align: right; vertical-align: top; }
.TitleBar > .HebrewCell {direction:rtl;font-family:'Noto Serif Hebrew',arial;font-size:36px;font-weight:bold;line-height: 3rem;letter-spacing:.05em;}
/* Sept 2022 revision for better Hebrew headings */
.TitleBar2022 { display: flex; flex-flow: row wrap; gap: 10px; }
.TitleBar2022 > * { flex: 1 1 auto; }
.h1Hebrew2022 { 
	direction: rtl; 
	font-family: 'Noto Serif Hebrew',arial; font-size: 2.25em; font-weight: bold; 
	padding-top: .6em;
	line-height: 1.2em;
}
.h2Hebrew2022 { 
	direction: rtl; 
	font-family: 'Noto Serif Hebrew',arial; font-size: 1.8em; font-weight: bold; 
	padding-top: .6em; 
	line-height: 1.25;
}
.h3Hebrew2022 { 
	direction: rtl; 
	font-family: 'Noto Serif Hebrew',arial; font-size: 1.5em; font-weight: bold; 
	padding-top: .6em; 
	line-height: 1.25;
}
.h1English2022, .h2English2022, .h3English2022 { 
	direction: rtl; 
	font-family: 'Roboto',sans-serif; font-size: 1rem; font-weight: bold;
	padding-top: 1em;
	line-height: normal; 
}
.translate { width:24px; height: 24px; }
.h1English2022 > div, .h2English2022 > div, .h3English2022 > div 
	{display:inline-block; padding-left: 10px;}
.h1Hebrew2022 > div, .h2Hebrew2022 > div, .h3Hebrew2022 > div
	{display:inline-block; padding-left: 10px;}

.WideLeft {float: left;padding-right: 10px;text-align:center;}
.WideRight {float: right;padding-left: 10px;text-align:center;}
.VeryWideLeft {float: left;padding-right: 10px;text-align:center; }
.VeryWideRight {float: right;padding-left: 10px;text-align:center;}
.WideCenter {margin: auto;left: 0;text-align: center;max-width: 80vw;height: auto;}
.YouTube {float: left; margin: 1rem; width: 225px;}
.YouTubeRight {float: right;padding-left: 10px;width: 240px;height: 180px;}

.YouTubeFrame { overflow:hidden;max-width: 240px; max-height: 180px; position:relative; }
.YouTubeFrame span {position:absolute; width:100%; top:0; bottom:0; left:45%; margin:auto; height:1.5em; font:48px/1.5 sans-serif; color:white; text-shadow:0 0 0.5em black;}
	
.LI1{list-style: none;}
.LI2{list-style: none; margin-left: -20px;}

.HebrewLyrics{min-width: 250px; float: left; padding: 10px 2px 10px 2px;}
.EnglishLyrics{min-width: 275px; float: left; padding: 10px 2px 10px 2px;}

blockquote{line-height: 1.25rem;}
.Quote{font-size: 85%; font-style: italic;}

.Grid1{border: solid 2px black; border-collapse: collapse; padding: 3px; margin: auto; margin-bottom: 20px;}
.Grid1 th{border: solid 1px black; border-bottom: solid 2px black; padding: 5px; vertical-align: top;}
.Grid1 td{border: solid 1px black; padding: 5px; vertical-align: top;}

table.Grid3{border-collapse: collapse; margin: auto;}
table.Grid3 th{padding: 5px; vertical-align: top;}
table.Grid3 td{border: solid 1px black; padding: 5px; vertical-align: top;}
 
.Caption{font-weight: bold; font-size: 90%; margin: 0px 10px 10px 10px; line-height:1rem; text-align: center;}

.TOCText{display: block;}
.TOCText a{display: block; padding-left: 20px; color: black;  text-indent: -20px; line-height: 2rem;}
.TOCText a:hover{color: blue;}

.HebrewText{vertical-align: middle;} /* for Hebrew text graphics in the middle of text */

.nuDate{white-space:nowrap; position: relative; top: 50px;}

.ReadingHead{font-variant: small-caps; font-weight: bold; 
	background-color:#EEEEEE; border-bottom:solid black 2px; position:sticky; top:0; }
.Reading dd{display: inline-block; text-indent: -10px; width: 200px; vertical-align: top;}
.Reading dt, .Reading2 dt{text-decoration: underline;}
.Reading2 dt{border-top: solid 1px #AAAAAA;} /* special readings need this because they bounce around */
.Reading2 dd{display: inline-block; text-indent: -10px; width: 200px; vertical-align: top;}

.Notes{font-size: 80%;}
.PrayerDiv{display: block; margin: auto; width: 100%; max-width: 600px;}
.PrayerE{float: left; padding-top: 10px; margin-left: 10px; }
.PrayerH{float: right; clear: both; text-align: right; margin-top: 20px; font-family:'Noto Serif Hebrew',arial;font-size:24px;font-weight:bold;direction:rtl;}
.PrayerHeading{font-weight:bold;font-size:80%;font-variant:small-caps;padding-top:20px;margin-bottom:-10px;}

.CalInfo{max-width: 350px; margin: auto;}
.CalInfo .CalWide{width: auto;}
.CalInfo dt{display: block; padding-top: 10px; border-top: solid 1px black;}
.CalInfo span, .CalInfo dd{display: inline-block; width: 100px; vertical-align: top;}
.CalInfo .CalH .CalE {text-align: right;}

table.Calendar{border: 2px solid black; width: 100%; border-collapse: collapse; border-spacing: 0; padding: 2px;}
table.Calendar th{border: 1px solid black; vertical-align: top; width: 14%; border-collapse: collapse; border-spacing: 0; padding: 2px;}
table.Calendar td{border: 1px solid black; vertical-align: top; border-collapse: collapse; border-spacing: 0; padding: 2px;}
table.Calendar div{font-size: 80%;}

.LinkList li{line-height: 3rem;}

.CalGrid{width: 100%; border-collapse: collapse; border-spacing: 0; padding: 2px;}
.CalGrid th{border: 1px solid black; vertical-align: top; width: 14%; border-collapse: collapse; border-spacing: 0; padding: 2px;}
.CalGrid td{border: 1px solid black; vertical-align: top; border-collapse: collapse; border-spacing: 0; padding: 2px; line-height:1.25rem;}
.CalGrid div{font-size: 80%;}
.CalList{display: none;}

.Pronounce{margin:auto;}
.Pronounce table{vertical-align:top;max-width:300px;float:left;border-left:solid 1px black;border-right:solid 1px black;}
.Pronounce th{vertical-align:top;}

/* TEMPORARY UNTIL I CLEAN THIS UP */
.Prayer{border-width: 1px; border-style: solid; border-spacing: 2px; text-align: center; margin: auto; padding: 2px; border-color: #888888 #FFEECC #FFEECC #FFEECC;}

    .SummaryLeft{/* for Amazon images to the left of the Summary block */
        clear: both;
        display: inline-block;
        text-align: center;
   }

/* ADAPTIVE */
@supports(display:flex){.MenuWrapper{display: flex;flex-direction:row;}}
@media(max-width:1025px){#DefWrap{width: calc(100% - 200px);}}

@media (max-width: 800px) {
.MenuWrapper{flex-direction:column;position:absolute;top:88px;width:100vw;height:100vh;
	text-align:left;background-color:yellow;z-index:5;}
.NavHead{background-color:transparent;display:none;}
.NavHead li {float:none;width:100px;background-color:#0044cc;}
.NavHead li a {text-align:left;}
.NavSub {position:absolute; left:90px;top:0px;}
    .SiteMenu{display: inline-block;} /* show site menu in a tab panel */
    .NavSub .arrow-left{border-right: solid 10px white;}
    .NavSub .arrow-right{border-left: solid 10px white;}
    .HolidayList tbody{width: 250px;} /* list of holiday dates is smaller and can be scrolled */
.DateBlock{position:absolute;right:0px;padding-right:10px;top:35px;text-align:right;width:250px;}
.DateBlockText{max-width:calc(100vw - 125px);overflow:hidden;}
}

@media (max-width: 775px) {
	.PageMenu{display: inline-block;} /* show page menu in a tab panel */
	.ShowContents {display:inline;}
	.ContentsBox {display:block;}
	#Contents {display:none;}
	#Contents {position:absolute;top:0px;left:50px;z-index:3;text-align: left; }
	#Contents > nav > div {box-shadow:2px 5px 10px blue;}
	#Contents > nav > div > p > .L0 {display:none;}
	#Contents > nav > div > p > .L1 {padding-left:0px;text-align: left; }
	.Menu{background-color: #ccccff; padding-left: 10px; width: 200px;} /* page menu on page */

	#DefWrap{width: calc(100% - 25px);}
	/* make pagemenu things white when they are in tab panel */
	.L0{color: white; padding-left: 10px;}
	.L1{color: white; padding-left: 20px;}
    .SummaryLeft{/* for Amazon images to the left of the Summary block */
        clear: both;
        display: block;
        width: 100%;
        text-align: center;
   }
}

@media (max-width: 700px) {
    .Summary{float: none; margin: auto; margin-bottom: 20px;}
    .CalGrid{display: none;}
    .nuDate{position: relative; transform-origin: 0 0; transform: rotate(90deg); max-width: 2rem;}
    .nuDate a{position: relative; left: 0; top: -40px;}
}

@media (max-width: 500px) {
    .logotext{display: none;}
    .WideLeft, .WideRight{max-width: 75vw; height: auto;}
    .VeryWideLeft, .VeryWideRight{float: none; display: block; margin: auto; text-align:center;}
    .HolidayList tbody{width: 150px;} /* list of holiday dates is smaller and can be scrolled */
  #Related hr { width:calc(100vw - 250px); }
}

@media (max-width: 450px) {
.DateBlockText{font-size:70%;}
.EnglishCell {display: table-row;}
.HebrewCell {display: table-row;}
dd{margin-left: 10px;}
.YouTubeLeft {display: block; float: none; max-width: 75vw; height: auto; margin: auto;}
.YouTubeFrame {display: block; float: none; max-width: 75vw; height: auto; margin: auto;}
}

@media (max-width: 350px) {
    .Summary{max-width: 75vw; min-width: 75vw;}
    .WideLeft, .WideRight{float: none; display: block; margin: auto;}
    .EnglishLyrics, .HebrewLyrics{float: none; display: block; margin: auto; max-width: 100%; min-width: 100%;}
}