/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/roboto-v50-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/roboto-v50-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/roboto-v50-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: url('/fonts/roboto-v50-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* comic-relief-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Comic Relief';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/comic-relief-v2-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* comic-relief-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Comic Relief';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/comic-relief-v2-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Eordeoghlakat - latin */
@font-face {
    font-family: 'Eordeoghlakat';
    src: url('/fonts/Eordeoghlakat.woff2') format('woff2'),
        url('/fonts/Eordeoghlakat.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


html { overflow-y : scroll; }
body {  color: #FFF; margin: 0; padding: 0; background: #000; }
#caption { background: #000 url("/i/bluethesign-banner.jpg") 65% top no-repeat; background-size: clamp(2000px, 100%, 6000px) 250px; padding-top:50px; box-shadow: 0 5px 16px #000; text-align:center; }
#caption img { height:200px; width:auto; margin: 0 auto -13px; }
#caption hr { border:none; background-color:#CCC; height:1px; margin:0; padding:0; }
#caption h2 { font-weight:normal; font-style:italic; text-align:center; font-size:70%; margin:0; }
#wrapper { min-width:300px; font-family: roboto, arial, sans-serif; font-size:120%; font-weight:normal; line-height:2em; background: #322 url(/i/deck-bkgnd.jpg) 0 0; padding-bottom:2em; }
#content {  margin: 0 auto 0; width: 90%; max-width:1300px; min-height:1500px; padding: 2em 5% 0 5%; }
.btsfont { postion:relative; top:2px; font-family: 'Eordeoghlakat', "arial", sans-serif; font-weight:normal !important; letter-spacing: 1px; }

#menudiv { clear:both; background-color:rgba(0,0,0,0.2); border-bottom:2px solid #FFF; width:100%; }
#menu { list-style:none !important; text-align:center; padding:0; margin:0 auto;  max-width:1200px;  }
#menu li { height:2.5em; clear:right; padding:0; display:inline-block; width:22%; text-align:center; margin-right:1%; margin-left:1%;  }
#menu li a { cursor:pointer; display:block; font-size:150%; line-height:1.4em; font-weight:bold; background: #322 url(/i/deck-bkgnd.jpg) 0 0; 
color:#EEE !important; padding:0.5em 0.2em !important; text-decoration:none; border:2px solid #CCC; border-radius:15px;  overflow:hidden;  }
#menu li a:hover { color:#FFF !important; border-color:#FFF !important;  }
#menu li a.current { color:#FFF !important; border-bottom-color:#211 !important; border-bottom-left-radius:0 !important; 
border-bottom-right-radius:0 !important; padding-bottom:1.3em !important; position:relative; top:0.65em; }

a { color: #FFF; font-weight:bold; text-decoration:none;  }
a:hover { color: #EEF; }
a.box { white-space: nowrap; text-transform: uppercase; color: #FFF; font-weight:bold; text-decoration:none; border:thin solid #DDD; padding:0.1em 0.3em 0 0.3em; border-radius:5px; }
a.box:hover { color: #000 !important; background-color:#FFF !important; border:1px solid #FFF; }
a.boxButn { white-space: nowrap; text-transform: uppercase; color: #FFF; font-weight:bold; text-decoration:none; border:1px solid #DDD; padding:1em 2em; border-radius:10px; }
a.boxButn:hover { color: #000 !important; background-color:#FFF !important; border:1px solid #FFF; }
a img { text-decoration: none !important;  }
td  { font-size: 85%; line-height:1.6em; text-align:left; }
li, p  { font-size: 85%; line-height:1.4em; margin: 0 0 15px 0; padding: 0; text-align: justify; }
h1 { font-size: 120%; font-weight: bold; margin: 5px 0 15px 0; padding: 0; }
h2 { font-size: 100%; font-weight: bold; margin: 5px 0 15px 0; padding: 0; }
h3 { font-size: 90%; font-weight: bold;margin: 5px 0 15px 0; padding: 0;  }
hr { border:none; color:#FF0; height:5px;  } 
.center { text-align: center; }
.mcenter { margin: 0 auto; }
.indent1 { padding-left: 25px; }

.divbox { border-radius:20px; border:1px solid #FFF; padding:0.5em 1em 0 1em; margin: 2em 0 2em 0; background:rgba(0,0,0,0.4); }
.divbox p { text-align:left; }
.divbox h2 { text-align:center; }
.divbox img { width:100%; height:auto; }
.indent2 { padding-left: 50px; }
.clear { clear: both; }
.clear-tiny { clear: both; font-size: 80%; height: 5px; line-height: 0.5em; margin: 0; padding: 0;  }
.small 	{ font-size: 70%; margin-bottom: 5px; }
.float-left { float: left; margin-right: 15px; }
.float-right { f.schedule td {font-size:60%; }loat: right; margin-left: 15px; }
.align-right 	{textfont-size:75% !important;-align: right; }
.align-left 	{text-align: left; }

.col1 { width:57%; margin-right:3%; float:left; }
.col2 { width:39%; float:left; }
p.credits { font-size:75% !important; width:22em; float:right; overflow:hidden; }
table.credits td { font-size:75%; padding:0.1em 0.5em;}
#thecaption { font-size: 85%; font-weight:normal; padding:0.5em 0 0 0; color:#CCC; text-align:center;  }
#album-title { margin:1em auto; font-size:300%; text-align:center; }
.red-glow { text-shadow: 0 0 8px #F00, 0 0 16px #F00, 0 0 32px #F00, 0 0 64px #F00; }
.grn-glow { text-shadow: 0 0 8px #0F0, 0 0 16px #0F0, 0 0 32px #0F0, 0 0 64px #0F0; }
#songs td { padding:0.5em 1em; }
#songs { padding-bottom:0.5em; }
td.song-name { width:85%; font-size:100%; line-height:1.2em; }
td.song-name a { background-color:#000; color:#FFF; padding:1em 0.5em; display:block; font-weight:bold; text-decoration:none; border-radius:0.5em; border:2px solid #DDD; }
td.song-name a:hover { border-color: #DDD; background-color:#DDD; color:#000; }
td.song-len { width:10%; font-size:75% !important; 12%; }
td.song-len a:hover { cursor:pointer; background-color:#000 !important; color:#FFF !important; border:none  !important; }
td.song-num { width: 5% }
.lyrics { font-family: 'Comic Relief', 'arial', sans-serif; }
audio { width:100%; }
audio::-webkit-media-controls-play-button { transform: scale(2, 2); }

.schedule td {font-size:85%; }
#news-panel h1 { text-align:center; }
#newslist { list-style:none; padding:0; margin:0 auto; width:90%; max-width:600px;  }
#newslist li { margin-left:2%; width:96%; }
#faq-panel h1 { text-align:center; }
#faqlist {  list-style:none; padding:0; margin:0 auto; width:90%; max-width:600px;  }
#faqlist li { padding-left:0; margin-left:0; }
#faqlist li h2 { text-align:left; }
#faqlist li table { border: 1px solid #AAA; background-color:rgba(0,0,0,0.5); margin-left:5%; width:95%; }
#faqlist li p { margin-left:5%; width:95%; }
#coupon { float: right; width:60%; }
#unlocked { background-color:rgba(0,0,0,0.3); width:10em; text-align:center; margin:1em auto 0.5em;  font-size:80%; padding:4px 4px 2px 4px; border-radius:5px; border:2px solid #FFF; overflow:hidden; }
#unlocked p { text-align:center; margin-bottom:0; }
#unlockform { background-color:rgba(0,0,0,0.3); text-align:center; margin: 0 auto; width:60%; min-width:180px; border-radius:5px; border:2px solid #FFF; overflow:hidden; padding-bottom:4px;  }
#unlockform form { line-height:1.4em; padding:2px 4px 8px 4px; }

.album-cover { float:left; width:35%; }
.album-cover img { width:100%; height:auto; box-shadow: 0.25em 0.25em 0.5em #000; border:1px solid #555; }
.album-text p { text-align:center; font-size:80%; }
.album-text h2 { text-align:center; margin-top:1em; margin-bottom:0.5em; }
#codeform { clear:both; text-align:center; width:130px; margin:0 auto 1em; }

.album-side { clear:right; float:right; width:60%; padding:0; margin-bottom:2em; border-radius:15px; border:6px solid #FFF; background-color:rgba(0,0,0,0.5); box-shadow: 0.25em 0.25em 0.5em #000; }
.album-side h2 { font-size:150%; margin-top:-2px; padding:0.2em 0 0.3em 0; font-weight:bold; text-align:center; background-color:#AAA; color:#FFF; }
.lyrics-wide {  text-align:center !important; width:49%; margin:0 0.5%;float:left; overflow:hidden; }	
.lyrics-wide p {  text-align:center !important; font-size:100%; line-height:1.3em; }	
td.mediaplayer { padding-right: 10% !important; padding-left: 5% !important; }
.bkvoc { font-style:italic; font-size:80%;  }
p.hilite-box { clear:both; text-align:center; border:2px solid #FFF; border-radius:10px; padding:1em 2em 1em 2em; width:80%; margin:0 auto 2em; }

#lookimgs { display: grid; grid-template-columns: 18% 18% 18% 18% 18%; grid-template-rows:100vw/5; grid-gap: 2%; row-gap: 1em; }
#lookimgs a, #lookimgs a:hover { text-decoration:none !important; border:none !important; }
#lookimgs img { aspect-ratio: 4/3; height:100%; width:100%; padding:0; border-radius:10px; border:2px solid #FFF; box-shadow: 0.25em 0.25em 0.8em #000;  }

.peacemenu { list-style:none !important; text-align:center; padding:0; margin:0 auto 1em;  max-width:1200px;  }
.peacemenu li { ltd.mediaplayer { padding: 0 5%; }ine-height:2em; clear:right; margin:-0.3em 0.5% 0.5em 0.5%;  padding:0; display:inline-block; width:31%; text-align:center;   }
.peacemenu li a { cursor:pointer; display:block; font-size:130%; line-height:1.5em; font-weight:bold; background-color:rgba(0,0,0,0.3); color:#FFF;
color:#EEE !important; padding:0.5em; text-decoration:none; border:2px solid #CCC; border-radius:5px;  overflow:hidden;  }
.peacemenu li a:hover { background-color:rgba(255,255,255,0.5) !important; color:#000 !important;  }
.peacemenu li a.current { background-color:rgba(255,255,255,0.6) !important; color:#000 !important;  }


#lookmenu { list-style:none !important; text-align:center; padding:0; margin:0 auto 1em;  max-width:1200px; }
#lookmenu li { line-height:2em; clear:right; margin:-0.3em 0.5% 0.5em 0.5%;  padding:0; display:inline-block; width:31%; text-align:center;   }
#lookmenu li a { cursor:pointer; display:block; font-size:130%; line-height:1.5em; font-weight:bold; background-color:rgba(0,0,0,0.3); color:#FFF;
color:#EEE !important; padding:0.5em; text-decoration:none; border:2px solid #CCC; border-radius:5px;  overflow:hidden;  }
#lookmenu li a:hover { background-color:rgba(255,255,255,0.5) !important; color:#000 !important;  }
#lookmenu li a.current { background-color:rgba(255,255,255,0.6) !important; color:#000 !important;  }

#thePhoto { z-index:999; position:fixed; top: 0; left:0; background-color:#000; width:100vw; height:100vh; text-align:center; }
#thePhoto div { padding-top:2em; }
#thePhoto p { color:#AAA; font-size: 60%; text-align:center; margin:0; }
#thePhoto #photocaption { color:#FFF; font-size: 70%; font-style:italic; }
#thePhoto img { max-height:85vh; max-width:95vw; margin:0 auto; border-radius:15px; overflow:hidden; margin-bottom:0 !important;  }
#thePhoto img.widephoto { height:85vh; width:auto;   }
#thePhoto img.tallphoto { height:auto; width:95vw;  }


@media only screen and (max-width: 1200px) {
#wrapper { font-size:115%; }
#coupon { width:60%; }
#unlocked { width:9em; font-size:90%; }
.lyrics-wide p { font-size:115%; }	
.lyrics-wide {  width:94%; margin:0 3%; float:none; overflow:visible; }	
}

@media only screen and (max-width: 900px) {
.col1 { width:100%; margin-right:0;  float:none !important; }
.col2 { width:100%; float:none !important; }
#coupon { width:65%; margin-left:5%; }
#wrapper { font-size:110%; }
.album-cover { width:30%;  }
.album-side { width:65%;  }
.album-text { font-size:90%; }
#unlocked { width:8em; font-size:70%; }
#thecaption { font-size:80%; }
#album-title { font-s.lyrics-wide p {  text-align:center !important; font-size:80%; }	ize:200%; }
.album-side h2 { font-size:120%; }
#songs td { padding:0.6em 1em; }
#songs { font-size:90%; }
#lookmenu li a { font-size:100%; }
#lookimgs { grid-template-columns: 23% 23% 23% 23%; row-gap: 0.8em;  }
#lookimgs img { margin-bottom:1em; }
.lyrics-wide p { font-size:110%; }	
}

@media only screen and (max-width: 800px) {
#wrapper { font-size:115%; }
.schedule td { font-size:70%; }
#coupon { width:90%;  }
#lookimgs { margin-left:0; }
#codeform { clear:both; }
.album-side { float:none; width:100%;  }
#coupon { float: none; padding-t8op:1em; margin-bottom:0.5em; text-align:right; clear:both; }
#unlocked { max-width:90%; font-size:100%; }
#thecaption { font-size:70%; }
.album-cover { float:none; margin-left:5%; width:90%; padding-bottom:2em; }
.album-text {  margin-left:5%; width:90%; font-size:140%; }
#album-title { font-size:150%; }
.album-side h2 { font-size:100%; }
#songs td { padding:0.4em; }
#songs { font-size:80%; }
#lookmenu li a { font-size:100%; }
.lyrics-wide p {  font-size:140%; }	
}

@media only screen and (max-width: 600px) {

.schedule td { font-size:60%; }
#content {  width: 95%; padding: 2em 2% 0 2%; }
#menudiv { min-width:300px; height:3em !important; }
#menu li a { font-size:90%; padding-top:0.2em; padding-bottom:0.2em; border-radius:10px;   }
#menu li { margin-left: 0.2%; margin-right: 0.2%; }
#songs td.song-name { font-size:90%; line-height:0.9em;  }
.album-side { margin:2em auto; border-radius:15px; border:6px solid #FFF; width:98%; background-color:#000; }
#thecaption { font-size:60%; }
#album-title { font-size:90%; }
.album-side h2 { font-size:90%; }
#lookimgs { grid-template-columns: 31% 31% 31%; row-gap: 0.5em; }
#lookimgs img { margin-bottom:0; }
.peacemenu li a { font-size:80%; }
.lyrics-wide p {  font-size:120%; }	
}	

@media only screen and (max-width: 400px) {
#wrapper { font-size:110%; }
.schedule td { font-size:50% !important; }
#menudiv { min-width:300px; height:2.7em !important; }
#menu li a { font-size:80%; }
#songs td.song-name { font-size:75%; line-height:1em;  }
#thecaption { font-size:50%; }8
.album-cover { margin-left:3%; }
.album-text {  font-size:100%; }
.album-side h2 { font-size:80%; }
#lookmenu li a { font-size:50%; }
td.mediaplayer { padding-right: 2% !important; padding-left: 2% !important; }
audio::-webkit-media-controls-volume-slider-container { display:none; }
audio::-webkit-media-controls-time-remaining-display { display:none; }
audio::-webkit-media-controls-current-time-display { display:none; }
audio::-webkit-media-controls-timeline-container { width:400%; }
audio::-webkit-media-controls-timeline { width:400%; }
.lyrics-wide p {  font-size:100%; }	
}