/* ======================================= */
/* ROCK RIVERS                             */
/* ======================================= */
@font-face
  {
  font-family: "Open Sans";
  font-display: swap;
  src: local( "Open Sans" ), 
    url( "/fonts/open-sans-regular.woff2" ) format( "woff2" ),
    url( "/fonts/open-sans-regular.ttf" ) format( "ttf" );
  }

@font-face
  {
  font-family: "Open Sans Condensed";
  font-display: swap;
  src: local( "Open Sans Condensed" ),
    url( "/fonts/open-sans-condensed-bold.woff2" ) format( "woff2" ),
    url( "/fonts/open-sans-condensed-bold.ttf" ) format( "ttf" );
  }

@font-face
  {
  font-family: SYMBOLS;
  font-display: swap;
  src: url( /fonts/symbols.woff ) format( "woff") ;
  }

HTML
  {
  overflow-y: scroll;
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', Corbel, Calibri, Arial, Helvetica;
  font-size: 13pt;
  color: black;
  background: #DAE3E8 url( /wallpaper.jpg ) no-repeat center center fixed;
  background-size: cover;
  }

BODY
  {
  line-height: 166%;
  min-height: 100vh;
  margin: 0 auto;
  padding: 0;
  scroll-behavior: smooth;
  }

@media screen and ( max-width: 800px )
  {
  line-height: 175%;
  }

IMG
  {
  max-width: 100%;
  }

H1, H2
  {
  line-height: normal;
  }

.smaller
  {
  font-size: smaller;
  }

.larger
  {
  font-size: larger;
  }

/* ======================================= */
/* OVERALL PAGE STRUCTURE                  */
/* ======================================= */
HEADER, MAIN, SECTION, FOOTER
  {
  display: block;
  }

DIV.header, DIV.main
  {
  box-sizing: border-box;
  max-width: 1280px;
  margin: 0 auto;
  }

/* ======================================= */
/* HEADER SECTION                          */
/* ======================================= */
HEADER
  {
  box-sizing: border-box;
  font-weight: normal;
  line-height: normal;
  color: white;
  background: rgba( 40, 50, 90, 0.33 ) ;
  }

DIV.header
  {
  box-sizing: border-box;
  min-height: 68px;
  padding: 12px 16px 0 16px;
  background: rgba( 40, 50, 90, 0.66 ) ;
  }

DIV.header H1
  {
  display: block;
  margin: 0;
  padding: 0;
  font-family: 'Open Sans Condensed', 'Open Sans', Corbel, Calibri, Arial, Helvetica;
  font-size: 24pt;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
  }

DIV.header A.icon, DIV.header A.icon:VISITED 
  {
  display: inline-block;
  float: right;
  font-family: SYMBOLS;
  font-size: 32pt;
  line-height: 28pt;
  color: rgba( 255, 255, 255, 0.8 );
  margin-left: 16px;
  }

DIV.header A.icon:ACTIVE, DIV.header A.icon:HOVER 
  {
  color: white;
  text-decoration: none;
  }

DIV.header A.home
  {
  float: left;
  margin-left: 0;
  margin-right: 16px;
  }

DIV.header A.home IMG
  {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  }

@media screen and ( max-width: 640px ), screen and ( max-height: 600px )
  {
  DIV.header
    {
    min-height: 62px;
    }

  DIV.header H1
    {
    font-size: 20pt;
    font-weight: bold;
    }

  DIV.header A.home IMG
    {
    width: 38px;
    height: 38px;
    }

  DIV.header A.icon, DIV.header A.icon:VISITED 
    {
    font-size: 28pt;
    }
  }

@media screen and ( max-width: 400px ), screen and (  max-height: 480px ) 
  {
  DIV.header
    {
    min-height: 56px;
    }

  DIV.header H1
    {
    font-size: 16pt;
    font-weight: bold;
    }

  DIV.header A.home IMG
    {
    width: 32px;
    height: 32px;
    }

  DIV.header A.icon, DIV.header A.icon:VISITED 
    {
    font-size: 19pt;
    line-height: 24pt;
    }
  }

/* ======================================= */
/* MAIN SECTION OF PAGE                    */
/* ======================================= */
DIV.main
  {
  padding: 0;
  }

A, A:VISITED
  {
  color: black;
  text-decoration: none;
  }

A:ACTIVE, A:HOVER
  {
  color: #CC0000;
  text-decoration: underline;
  }

A.loud, A.loud:VISITED
  {
  color: navy;
  text-decoration: underline;
  }

A.silent, A.silent:VISITED, A.silent:ACTIVE, A.silent:HOVER
  {
  color: inherit;
  text-decoration: none;
  }

.smaller
  {
  font-size: 11pt;
  }

@media screen and ( max-width: 640px )
  {
  H1 
    {
    font-size: 18pt;
    line-height: normal;
    font-weight: bold;
    }

  H2 
    {
    font-size: 14pt;
    line-height: normal;
    font-weight: bold;
    }
  }


/* ======================================= */
/* HOME PAGE A-Z TABS                      */
/* ======================================= */
DIV.azkeys
  {
  margin: 16px 0 24px 0;
  position: sticky;
  top: 0;
  z-index: 99;
  display: grid;
  grid-template-columns: repeat( 26, 1fr ) ;
  grid-column-gap: 0;
  }

DIV.azkeys A
  {
  display: block;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  color: black;
  background: rgba( 224, 224, 240, 1 );
  box-shadow: 0 0 4px rgba( 0, 0, 0, 0.5 ) ;
  font-family: 'Open Sans Condensed', 'Open Sans', Corbel, Calibri, Arial, Helvetica;
  font-weight: bold;
  }

DIV.azkeys A, DIV.azkeys A:VISITED
  {
  color: black;
  }

DIV.azkeys A:ACTIVE, DIV.azkeys A:HOVER
  {
  background: white;
  }

@media screen and ( max-width: 1024px )
  {
  DIV.azkeys
    {
    grid-template-columns: repeat( 13, 1fr ) ;
    }
  }

@media screen and ( max-width: 480px )
  {
  DIV.azkeys
    {
    grid-template-columns: repeat( 9, 1fr ) ;
    }
  }


/* ======================================= */
/* INDEX CARDS AND MULTI-COLUMN LAYOUTS    */
/* ======================================= */
DIV.indexcards, DIV.multicols
  {
  column-count: 2;
  column-gap: 16px;
  box-align: top;
  }

DIV.multicols
  { 
  padding: 0 4px 0 12px;
  }

DIV.multicols P:FIRST-CHILD
  {
  margin-top: 0;
  }

@media screen and ( max-width: 960px )
  {
  DIV.indexcards, DIV.multicols
    {
    column-count: 2;
    }
  }

@media screen and ( max-width: 640px )
  {
  DIV.indexcards, DIV.multicols
    {
    column-count: 1;
    }
  }


/* ======================================= */
/* INDEX CARDS LAYOUT                      */
/* ======================================= */
DIV.indexcard
  {
  display: inline-block;
  width: 100%;
  page-break-inside: avoid;
  column-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 16px;
  box-shadow: 0 4px 4px rgba( 0, 0, 0, 0.33 ) ;
  background: rgba( 255, 255, 255, 0.72 ) ;
  }

DIV.indexcard H2
  {
  margin: 0;
  padding: 16px;
  font-family: 'Open Sans Condensed', 'Open Sans', Corbel, Calibri, Arial, Helvetica;
  font-weight: normal;
  line-height: normal;
  color: white;
  background: rgba( 40, 50, 90, 0.5 ) ;
  }

DIV.indexcard DIV.content
  {
  padding: 0 16px 16px 16px;
  font-size: 12pt;
  }

/* ======================================= */
/* SEARCH FORM (INDEX PAGE)                */
/* ======================================= */
FORM.search
  {
  padding: 0 16px;
  }

DIV.searchbox
  {
  position: relative;
  }

FORM.search INPUT
  {
  font-family: arial, helvetica, sans-serif;
  font-size: 12pt;
  box-sizing: border-box;
  margin: 0;
  padding: 8px;
  border: 0;
  width: 100%;
  background: rgba( 200, 200, 255, 0.5 ) ;
  }

FORM.search BUTTON
  {
  position: absolute;
  z-index: 99;
  top: 0;
  bottom: 0;
  right: 0;
  padding: 0 16px;
  font-family: arial, helvetica, sans-serif;
  font-size: 16pt;
  color: white;
  background: rgba( 0, 0, 0, 0.5 );
  border: 0;
  }

FORM.search BUTTON:HOVER
  {
  background: rgba( 255, 0, 0, 0.5 );
  }

P.keywords A, P.keywords A:VISITED
  {
  display: inline-block;
  width: 110px;
  font-size: 11pt;
  color: navy;
  }

/* ======================================= */
/* YOUTUBE VIDEO PLAYER                    */
/* ======================================= */
SECTION.video
  {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  background: black;
  margin: 0 auto 24px auto;
  box-shadow: 4px 8px 8px rgba( 0, 0, 51, 0.33 ) ;
  }

DIV.video
  {
  position: relative;
  z-index: 1;
  max-height: calc( 96vh - 68px );
  max-width: 1280px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin: 0 auto;
  }

DIV.video IMG
  {
  display: block;
  width: 100%;
  max-width: 1280px;
  height: auto;
  opacity: 0;
  box-shadow: -4px 8px 16px rgba( 0, 0, 51, 0.33 ) ;
  }

DIV.video IFRAME
  {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: 0;
  }

DIV.legend
  {
  position: relative;
  z-index: 0;
  margin: 8px auto 0 auto;
  overflow: hidden;
  padding: 8px 16px;
  background: rgba( 255, 255, 255, 0.5 ) ;
  }

DIV.legend SPAN.trackinfo
  {
  font-weight: bold;
  float: left;
  }

DIV.legend SPAN.artistinfo
  {
  font-weight: bold;
  float: right;
  }

@media screen and ( max-width: 916px )
  {
  DIV.video, DIV.legend { width: auto; }
  }

@media screen and ( max-width: 640px )
  {
  DIV.legend SPAN.trackinfo, DIV.legend SPAN.artistinfo
    {
    display: block;
    float: none;
    }

  DIV.legend SPAN.artistinfo
    {
    font-weight: normal;
    }
  }

/* ======================================= */
/* YOUTUBE CATALOG CARDS                   */
/* ======================================= */
SECTION.youtubecards
  {
  margin: 16px 0;
  display: grid;
  grid-template-columns: repeat( 4, minmax( 0, 1fr ) ) ;
  grid-column-gap: 16px;
  grid-row-gap: 24px;
  }

DIV.youtubecard
  {
  padding: 0;
  cursor: pointer;
  background: rgba( 255, 255, 255, 0.8 ) ;
  box-shadow: 0 4px 8px rgba( 0, 0, 0, 0.5 ) ;
  }

DIV.youtubecard A.image
  {
  display: block;
  width: 100%;
  }

DIV.youtubecard A.image IMG
  {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto ;
  max-height: 100%;
  cursor: pointer;
  }

DIV.youtubecard DIV.cardinfo
  {
  height: 60px; 
  padding: 8px 12px 0 12px;
  font-size: 12pt;
  line-height: 150%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }

@media screen and ( max-width: 1292px )
  {
  SECTION.youtubecards
    {
    grid-template-columns: repeat( 3, minmax( 0, 1fr ) ) ;
    }
  }

@media screen and ( max-width: 800px )
  {
  SECTION.youtubecards
    {
    grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) ;
    }
  }

@media screen and ( max-width: 480px )
  {
  SECTION.youtubecards
    {
    display: block ;
    }

  DIV.youtubecard
    {
    margin-bottom: 16px;
    }
  }

/* ======================================= */
/* BACKLINK NAVIGATION                     */
/* ======================================= */
DIV.backlink
  {
  background: rgba( 255, 255, 255, 0.8 ) ;
  margin: 16px 0;
  padding: 16px;
  font-weight: bold;
  box-shadow: 0 4px 4px rgba( 0, 0, 0, 0.33 ) ;
  }

DIV.backlink A:HOVER, DIV.backlink SPAN:HOVER
  {
  text-decoration: underline;
  color: #CC0000;
  cursor: pointer;
  }


/* ======================================= */
/* GENERAL INFO PAGES                      */
/* ======================================= */
IMG.banner
  {
  display: block;
  width: 100%;
  height: auto;
  }

DIV.info
  {
  background: rgba( 255, 255, 255, 0.9 );
  padding: 16px;
  margin-bottom: 16px;
  }

DIV.info *
  {
  max-width: 640px;
  }

DIV.info DIV.video
  {
  margin: 0 0 16px 0;
  }

DIV.caption
  {
  font-size: smaller;
  margin: 0 0 32px 0;
  }

DIV.info A, DIV.info A:VISITED
  {
  color: navy;
  text-decoration: underline;
  }

DIV.info A:ACTIVE, DIV.info A:HOVER
  {
  color: #CC0000;
  text-decoration: underline;
  }



/* ======================================= */
/* CONTACT FORM                            */
/* ======================================= */
FORM.modern
  {
  width: 100%;
  }

SPAN.req
  {
  text-transform: uppercase;
  font-size: smaller;
  color: #CC0000;
  float: right;
  }

FORM.modern FIELDSET.privacypolicy
  {
  margin: 32px 0;
  font-size: smaller;
  line-height: 150%;
  }

FORM.modern FIELDSET.privacypolicy LEGEND
  {
  text-transform: uppercase;
  color: white;
  background: #666666;
  padding: 4px 8px;
  }

FORM.modern INPUT[type="text"], INPUT.modern, FORM.modern TEXTAREA
  {
  box-sizing: border-box;
  width: 100%;
  border: solid #335533 1px;
  padding: 8px;
  font-family: Arial, Helvetica, SansSerif ;
  font-size: 100%;
  margin-bottom: 2px;
  }

FORM.modern BUTTON, BUTTON.modern
  {
  border: 0;
  border-radius: 2px;
  padding: 8px 16px;
  font-size: 100%;
  background: linear-gradient( #666666, black, #333333 );
  color: white;
  }

FORM.modern BUTTON:HOVER, BUTTON.modern:HOVER
  {
  background: #CC0000;
  }