:root { --textsize: 30	px; }
.textnorm, .textnorma, .textital { font-size: var(--textsize); }
.normala, .normb { font-size: var(--textsize); }
.ltblue, .dkbluea, td.ltblue { font-size: var(--textsize); }
.entry, .entry1, .entrycmt, .note { font-size: var(--textsize); }
.normwhite, p.normwhite, td.normwhite { font-size: var(--textsize); }
}
#showPort { display: block; }
@media(min-aspect-ratio:1/1) {#showPort { display: none; }
}
#showLand { display: none; }
@media(min-aspect-ratio:1/1){#showLand { display: block; }
}

#txt1, #txt3 { display: none; }
#txt2 { display: block; }

.txtSmlNorm, .txtSmlBld { font-size: 20px; }
.txtMedNorm, .txtMedBld { font-size: 30px; }
.txtLgNorm, .txtLgBld { font-size: 40px; }

.txtSmlNorm, .txtMedNorm, .txtLgNorm { color: #c0c0c0; font-weight: normal; } 
.txtSmlBld, .txtMedBld,  .txtLgBld { color: #000000; font-weight: bold; }

@media(min-aspect-ratio: 1/1) { .txtSmlNorm, .txtSmlBld { font-size: 20px; }}
@media(min-aspect-ratio: 1/1) { .txtMedNorm, .txtMedBld { font-size: 30px; }}
@media(min-aspect-ratio: 1/1) { .txtLgNorm, .txtLgBld { font-size: 40px; }}

.textSizebtn { position: fixed; right: 0%; top: 8px; height: 120px; }
.textSizebtn a:link, .textSizebtn a:visited { text-decoration: none; color:#0000ff;
}

#btn100, #btn101, #btn102, #btn103, #btn104, #btn105, #btn106, #btn107, #btn108, #btn109, 
#btn110, #btn111, #btn112, #btn113, #btn114, #btn115, #btn116, #btn117, #btn118, #btn119,
#btn120, #btn121, #btn122, #btn123, #btn124, #btn125, #btn126, #btn127, #btn128, #btn129,
#btn200, #btn201, #btn202, #btn203, #btn204, #btn205, #btn206, #btn207, #btn208, #btn209, 
#btn210, #btn211, #btn212, #btn213, #btn214, #btn215, #btn216, #btn217, #btn218, #btn219,
#btn220, #btn221, #btn222, #btn223, #btn224, #btn225, #btn226, #btn227, #btn228, #btn229,
#btn300, #btn301, #btn302, #btn303, #btn304, #btn305, #btn306, #btn307, #btn308, #btn309, 
#btn310, #btn311, #btn312, #btn313, #btn314, #btn315, #btn316, #btn317, #btn318, #btn319,
#btn320, #btn321, #btn322, #btn323, #btn324, #btn325, #btn326, #btn327, #btn328, #btn329,
#btn400, #btn401, #btn402, #btn403, #btn404, #btn405, #btn406, #btn407, #btn408, #btn409, 
#btn410, #btn411, #btn412, #btn413, #btn414, #btn415, #btn416, #btn417, #btn418, #btn419,
#btn420, #btn421, #btn422, #btn423, #btn424, #btn425, #btn426, #btn427, #btn428, #btn429, 
#btn430, #btn431, #btn432, #btn433, #btn434, #btn435, #btn436, #btn437, #btn438, #btn439,
#btn500, #btn501, #btn502, #btn503, #btn504, #btn505, #btn506, #btn507, #btn508, #btn509, 
#btn510, #btn511, #btn512, #btn513, #btn514, #btn515, #btn516, #btn517, #btn518, #btn519,
#btn520, #btn521, #btn522, #btn523, #btn524, #btn525, #btn526, #btn527, #btn528, #btn529 {
width: 100%; height: 100%; font-size: 20px; text-align: left; font-weight: bold; color: blue; background-color: #eeeea0; padding: 10px; cursor: pointer; text-decoration: underline; line-height: 1;
}
#btn100:hover, #btn101:hover, #btn102:hover, #btn103:hover, #btn104:hover, #btn105:hover, #btn106:hover, #btn107:hover, #btn108:hover, #btn109:hover, 
#btn110:hover, #btn111:hover, #btn112:hover, #btn113:hover, #btn114:hover, #btn115:hover, #btn116:hover, #btn117:hover, #btn118:hover, #btn119:hover,
#btn120:hover, #btn121:hover, #btn122:hover, #btn123:hover, #btn124:hover, #btn125:hover, #btn126:hover, #btn127:hover, #btn128:hover, #btn129:hover,
#btn200:hover, #btn201:hover, #btn202:hover, #btn203:hover, #btn204:hover, #btn205:hover, #btn206:hover, #btn207:hover, #btn208:hover, #btn209:hover, 
#btn210:hover, #btn211:hover, #btn212:hover, #btn213:hover, #btn214:hover, #btn215:hover, #btn216:hover, #btn217:hover, #btn218:hover, #btn219:hover,
#btn220:hover, #btn221:hover, #btn222:hover, #btn223:hover, #btn224:hover, #btn225:hover, #btn226:hover, #btn227:hover, #btn228:hover, #btn229:hover,
#btn300:hover, #btn301:hover, #btn302:hover, #btn303:hover, #btn304:hover, #btn305:hover, #btn306:hover, #btn307:hover, #btn308:hover, #btn309:hover, 
#btn310:hover, #btn311:hover, #btn312:hover, #btn313:hover, #btn314:hover, #btn315:hover, #btn316:hover, #btn317:hover, #btn318:hover, #btn319:hover,
#btn320:hover, #btn321:hover, #btn322:hover, #btn323:hover, #btn324:hover, #btn325:hover, #btn326:hover, #btn327:hover, #btn328:hover, #btn329:hover,
#btn400:hover, #btn401:hover, #btn402:hover, #btn403:hover, #btn404:hover, #btn405:hover, #btn406:hover, #btn407:hover, #btn408:hover, #btn409:hover, 
#btn410:hover, #btn411:hover, #btn412:hover, #btn413:hover, #btn414:hover, #btn415:hover, #btn416:hover, #btn417:hover, #btn418:hover, #btn419:hover,
#btn420:hover, #btn421:hover, #btn422:hover, #btn423:hover, #btn424:hover, #btn425:hover, #btn426:hover, #btn427:hover, #btn428:hover, #btn429:hover, 
#btn430:hover, #btn431:hover, #btn432:hover, #btn433:hover, #btn434:hover, #btn435:hover, #btn436:hover, #btn437:hover, #btn438:hover, #btn439:hover,
#btn500:hover, #btn501:hover, #btn502:hover, #btn503:hover, #btn504:hover, #btn505:hover, #btn506:hover, #btn507:hover, #btn508:hover, #btn509:hover, 
#btn510:hover, #btn511:hover, #btn512:hover, #btn513:hover, #btn514:hover, #btn515:hover, #btn516:hover, #btn517:hover, #btn518:hover, #btn519:hover,
#btn520:hover, #btn521:hover, #btn522:hover, #btn523:hover, #btn524:hover, #btn525:hover, #btn526:hover, #btn527:hover, #btn528:hover, #btn529:hover { background-color: #ffaaaa; color: white; cursor: arrow;
}
#show:hover { color: white; background-color: #8080a0; width: 90%; height: 100%; display: inline;
}
#link1, #link2, #link3, #link4, #link5, #link6, #linkhome { position: fixed; display: block; margin: 0; padding: 0; border: solid black 2px; background-color: white; z-index: 9999;
}
#link1 { top: 0px; left: calc( 50vw - 270px ); 
}
@media(min-aspect-ratio: 1/1) { #link1 { top: 0px; left: calc( 50vw - 480px ); }
}
#link2 { top: 0px; left: calc( 50vw - 180px ); 
}
@media(min-aspect-ratio: 1/1) { #link2 { top: 71px; left: calc( 50vw - 480px ); }
}
#link3 { top: 0px; left: calc( 50vw - 90px ); 
}
@media(min-aspect-ratio: 1/1) { #link3 { top: 142px; left: calc( 50vw - 480px ); }
}
#link4 { top: 0px; left: calc( 50vw - 0px); 
}
@media(min-aspect-ratio: 1/1) { #link4 { top: 213px; left: calc( 50vw - 480px ); }
}
#link5 { top: 0px; left: calc( 50vw + 90px ); 
}
@media(min-aspect-ratio: 1/1) { #link5 { top: 284px; left: calc( 50vw - 480px ); }
}
#link6 { top: 0px; left: calc( 50vw + 180px ); 
}
@media(min-aspect-ratio: 1/1) { #link6 { top: 355px; left: calc( 50vw - 480px ); }
}
#linkhome { top: 0px; left: 2%; 
}
@media(min-aspect-ratio: 1/1) { #link6 { top: 355px; left: calc( 50vw - 480px ); }
}
#linknorm, #linkwide { position: relative; display: inline-block; margin: 5; padding: 0; border: solid black 2px; background-color: white; width: 88px; height: 68px; z-index; 10;
}
#linkwide { width: 168px; height: 38px;
}
.vis2 { display: inline-block; padding: 10px; height: 96%; background-color: green; color: white; width: 96%; font-size: 3.0vw; 
}
@media(min-aspect-ratio: 1/1) { .vis2 {display: none; }
}
.vis1 { display: none; }
@media(min-aspect-ratio: 1/1) { .vis1 { display: inline-block; padding: 10px; height: 96%; width: 96%; background-color: green; color: white; font-size: 3.0vh; }
}
.vis1a {
 display: none; 
}
@media(min-aspect-ratio: 1/1) { .vis1a { display: inline-block;}
}
 .blueMed, .blueSmall, .blueSmalla, .blueWide, .blueShow, .blueShowa, .blueHome  { cursor: pointer; background-color: #404080; color: white; font-size: 16px; font-weight: bold; 
 }
 .blueMed { font-size: 20px; border: 2px solid black; padding: 6px; margin: 5px; display: inline-block; width: 80px; height: 80px;
 }
 .blueSmall { font-size: 16px; border: 2px solid black; padding: 0px; margin: 4px; display: inline-block; width: 80px; height: 60px;  
 }
.blueSmalla { font-size: 16px; border: 2px solid black; padding: 0px; margin: 4px; display: inline-block; width: 160px; height: 30px; 
}
.blueSmall:hover, .blueSmalla:hover, .blueMed:hover, .blueWide:hover, .blueShow:hover { background-color: #808080;
 } 
 .blueWide { font-size: 16px; border: 2px solid black; padding: 0px; margin: 2px; display: inline-block; width: 500px; height: 40px;  
 }
 .blueShow, .blueShowa, .blueHome { font-size: 16px; border: 2px solid black; border-top: 6px solid #404080; padding: 0px; margin: 4; margin-top: 0; display: inline-block; width: 226px; height: 32px;  
 }
 .blueShowa { width: 180px;
}
 .blueHome { width: 130px; height: 60px;
}
#extlink, #showlink, #showlinka { position: relative; display: inline-block; margin: 2px; padding: 0; border: solid black 2px; background-color: white; width: 504px; height: 44px; z-index; 10;
}
#showlink, #showlinka { width: 234; height: 34px; margin-top: 0; padding: 6; padding-top: 0; border: solid black 2px; border-top: 0px; background-color: white;
}
#showlinka { width: 188; height: 34px;
}
.extlink:hover, .showlink:hover { background-color: #808080;
}
a:link { color: blue; padding: 0px;
}
span.yellow { display: block; width: 110px; height: 60px; margin: 5px 5px 5px 5px; border: 0px solid black; background-color: yellow}
}
span.norm { display: inline-block; width: 100px; height: 40px; padding: 10px; background-color: white; 
}
#lyricsred, #lyricsgreen, #lyricslink, #lyricsredsml { display: inline-block; padding: 5px; background-color: white; display: vertical-align: text-top; 
}
#lyricsred { color: red; font-size: 20px; font-weight: bold;
}
#lyricsredsml { color: red; font-size: 16px;
}
#lyricsgreen { color: green; font-size: 18px; 
}
#largestbold { font-size: 26px; font-weight: bold; text-align: center; padding: 20px;
}
@media(min-aspect-ratio: 1/1) { #largestbold { font-size: 26px; }
}
.largebold { font-size: 24px; font-weight: bold; text-align: center; 
}
@media(min-aspect-ratio: 1/1) { .largebold { font-size: 24px; }
}
.medbold, .medboldgreen { font-size: 20px; font-weight: bold; text-align: center; padding: 4px;
}
@media(min-aspect-ratio: 1/1) { .medbold, medboldgreen { font-size: 20px; }
}
.medboldgreen { color: green; font-size: 20px;
}
.smallbold { font-size: 16px; font-weight: bold; text-align: center; padding: 4px; color: green;
}
@media(min-aspect-ratio: 1/1) { .smallbold { font-size: 16px; }
}
/* unvisited link 

a { color: red; text-decoration: underline;
}
*/
/* visited link
a:visited {	
  color: green;
}
 */
/* unvisited link 

a:link { text-decoration-line: underline; 
  color: red;
}
*/ mouse over link
.btnsong { color: white; text-decoration-line: underline;  
}
 */
/* selected link 
a:active { color: blue;
}
*/

#lyrics { color: pink; 
}
.rule { width: 100%; height: 10px; border-width: 0; background-color: #80ffff;"
}
@media(min-aspect-ratio: 1/1) { .rule { height:70px; }
}
a.lyrics:link { text-decoration: underline; color:green;
}
a.lyrics:visited { color:orange;
}
a.lyrics:hover { color: white; background-color: blue; text-decoration: underline;
}
table { border 1 solid black; 
}
.scrWid { width: 1400px;
}
@media (max-aspect-ratio: 1/1) .scrWid { width: 700px; }
]
#centre { left: 100px;
}
.blank, .blanka, .blankb { border: none; height: 40px; width: 100%; background-color: white; display: inline-block; position: relative; margin: 0px; z-index: -100;
}
.blanka { position: fixed; top: 0px; height: 70px; width: calc( 50vw - 278px ); z-index: 200;
}
.blankb { position: fixed; top: 0px; height: 70px; left: calc( 50vw + 272px ); width: calc( 50vw - 278px ); z-index: 200; background-color: white;
}
@media (min-aspect-ratio: 1/1) { .blank, .blanka, .blankb { height: 0px; }
}
.header3 { font-size: 30px; font-weight: bold;
}
.header2 { font-size: 24px; font-weight: bold;
}
.header1 { font-size: 20px; font-weight: bold;
}
.textnorm, .textnorma, .textnormred, .textnormgreen { font-weight: normal; text-indent: 10px; 
}
.textnorma { line-height: 1.25;
}
.textital { font-weight: normal; font-style: italic; text-indent: 10px;
}
#italic { font-weight: bold; font-style: italic; font-size: 20px;
}
.textSizebtna { position: fixed; cursor: pointer; right: 50px; top: 0px; height: 40px; width: 80px;}
.textSizebtna a:link, .textSizebtna a:visited { text-decoration: none; color:#0000ff;}
.textSizebtna { background-color: white; font-weight: normal; color: black;
border-left: solid black 2px; border-right: solid black 2px; border-bottom: solid black 2px;  padding: 0px;
}
h1 { padding-top: 40px;
}
@media (min-aspect-ratio: 1/1) { h1 { padding-top: 0px; }
}