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

/* HEADER */
.banner{position:absolute;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;}
.logotext{position:absolute;top:15px;left:60px;color:#eeeeee;font-size:36px;font-weight:bold;text-shadow:2px 3px black;}
.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;}

/* NAVIGATION */
.PageMenu{display:none;}
.SiteMenu{display:none;}
.NavHead,.NavHead2{top:60px;list-style-type:none;margin:0;padding:0;overflow:hidden;width:100%;font-size:90%;background-color:#0000aa;}
.NavHead li,.NavHead2 li{float:left;}
.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;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;}
.NavSub > p > a {text-align:left;margin-left:10px;text-indent:-10px;color:#ffffff;}
.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;}

/* PAGE TEXT */
.L0{display: block; font-size: 90%; font-weight: bold; line-height: 3rem; margin-top: 20px; margin-left: 20px; 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: 980px;margin: auto;padding: 80px 10px 10px 10px;position: relative;top: 0;background-color: #fff;}
.BodyText {display: table-cell;}
.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;height: 100vh;}
.Menu {padding-top: 30px;padding-right: 10px;width: 180px;line-height: 2rem;}
.Menu a {text-decoration: none;color: black;}
.copyrt1{font-style: italic; text-align: center;}
.copyrt2{font-size: 80%; font-style: normal;}
.FooterAll{font-size: 80%; text-align: center; line-height: 1rem; padding-bottom: 3rem;}
.LF {clear:both;} /*line feed*/

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

/* PAGE OR SECTION TITLE */
.TitleBar{display: table; width: 100%;}
.EnglishCell{display: table-cell; padding-right: 10px;}
.HebrewCell{display: table-cell; text-align: right; padding-left: 10px;}
.HebrewTitle{margin-bottom: -8px; text-align: right; vertical-align: top;}

.WideLeft {float: left;padding-right: 10px;}
.WideRight {float: right;padding-left: 10px;}
.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; margin:auto; float: right; padding-left: 10px;}
.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: 10px; 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;}

.HolidayList{  white-space: nowrap; margin: auto;}
.HolidayList thead, .HolidayList tbody{display:inline-block;}
.HolidayList thead{vertical-align: top;}
.HolidayList th{text-align: right;}
.HolidayList tbody{overflow: auto; width: 550px;}
.HolidayList tr{text-align: right;}
.HolidayList td{min-width: 100px;}

.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;}
.Reading dd{display: inline-block; text-indent: -10px; width: 250px; vertical-align: top;}
.Reading dt, .Reading2 dt{text-decoration: underline;}
.Reading2 dt{border-top: solid 1px black;} /* 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;}
.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{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;}
.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;}


/* ADAPTIVE */
@supports(display:flex){.MenuWrapper{display: flex;}}
@media(max-width:1025px){#DefWrap{width: calc(100% - 200px);}}
@media (max-width: 980px) {
    .SummaryLeft{/* for Amazon images to the left of the Summary block */
        clear: both;
        display: block;
        width: 100%;
        text-align: center;
   }
}

@media (max-width: 900px) {
    .MenuWrapper{display: none;} /* menu in the banner is too big -- hide it */
    .SiteMenu{display: inline-block;} /* show site menu in a tab panel */
    .HolidayList tbody{width: 250px;} /* list of holiday dates is smaller and can be scrolled */
}

@media (max-width: 775px) {
    .MenuText{display: none;} /* page is too narrow for page menu */
    .PageMenu{display: inline-block;} /* show page menu in a tab panel */

    #DefWrap{width: calc(100% - 25px);}
    .NavSub{left: 10px; width: 100%;}
    .NavSub > p > a{padding-left: 20px;}
    /* make pagemenu things white when they are in tab panel */
    .NavSub .arrow-left{border-right: solid 10px white;}
    .NavSub .arrow-right{border-left: solid 10px white;}
    .L0{color: white; padding-left: 10px;}
    .L1{color: white; padding-left: 20px;}
    .Menu{display: none; background-color: #ccccff; padding-left: 10px; width: 200px;} /* page menu on page */
}

@media (max-width: 700px) {
    .Summary{float: none; margin: auto; margin-bottom: 20px;}
    .CalGrid{display: none;}
    .CalList{display: block;}
    .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;}
    .HolidayList tbody{width: 150px;} /* list of holiday dates is smaller and can be scrolled */
}

@media (max-width: 450px) {
.EnglishCell {display: table-row;}
.HebrewCell {display: table-row;}
dd{margin-left: 10px;}
.YouTubeRight {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%;}
}