* {box-sizing: border-box;}

html,body {font-family: Arial; padding: 0px; background-image: url("/background.jpg"); margin:0px;}

/*  Top header  */
h1.header {font-size: 4em;}
h2.header {font-size: 3em;}
h3.header {font-size: 2em;}
p.header {font-size: 1.4em; color: #554dac;}
p.rightcolumn {font-size: 1em; color: white;}
a.header:link {color: white; box-shadow: inset 0 0 0 0 white; text-decoration: none; margin: 0 -.25rem; padding: 0 .75rem; transition: color .6s ease-in-out, box-shadow .3s ease-in-out;}
a.header:visited {color: white; box-shadow: inset 0 0 0 0 white; text-decoration: none; margin: 0 -.25rem; padding: 0 .75rem; transition: color .6s ease-in-out, box-shadow .3s ease-in-out;}
a.header:hover {color: #554dac; text-decoration: none; box-shadow: inset 100px 0 0 0 black;}
a.header:active {color: #554dac; text-decoration: none; box-shadow: inset 100px 0 0 0 black;}


/* # # # # # # # # # # # #   FONTS   # # # # # # # # # # # # */

.font.small {font-size: 1em; font-family: "Alumni Sans", sans-serif; font-weight: 200; font-style: normal; line-height: .8em;}
.font.small.purple {font-size: 1em; color: #554dac; font-family: "Alumni Sans", sans-serif; font-weight: 200; font-style: normal; line-height: .8em;}
.font.small.darkgrey {font-size: 1em; color: rgb(84, 84, 84); font-family: "Alumni Sans", sans-serif; font-weight: 200; font-style: normal; line-height: .8em;}
.font.small.whitesmoke {font-size: 1em; color: whitesmoke; font-family: "Alumni Sans", sans-serif; font-weight: 200; font-style: normal; line-height: .8em;}

.font.medium {font-size: 1.25em; font-family: "Alumni Sans", sans-serif; font-weight: 200; font-style: normal; line-height: .85em;}
.font.medium.purple {font-size: 1.25em; color: rgb(85, 77, 172); font-family: "Alumni Sans", sans-serif; font-weight: 200; font-style: normal; line-height: .85em;}
.font.medium.darkgrey {font-size: 1.25em; color: rgb(84, 84, 84); font-family: "Alumni Sans", sans-serif; font-weight: 200; font-style: normal; line-height: .85em;}
.font.medium.whitesmoke {font-size: 1.25em; color: whitesmoke; font-family: "Alumni Sans", sans-serif; font-weight: 200; font-style: normal; line-height: .85em;}

.font.large {font-size: 1.5em; font-family: "Alumni Sans", sans-serif; font-weight: 200; font-style: normal; line-height: .9em;}
.font.large.purple {font-size: 1.5em; color: rgb(85, 77, 172); font-family: "Alumni Sans", sans-serif; font-weight: 200; font-style: normal; line-height: .9em;}
.font.large.darkgrey {font-size: 1.5em; color: rgb(84, 84, 84); font-family: "Alumni Sans", sans-serif; font-weight: 200; font-style: normal; line-height: .9em;}
.font.large.whitesmoke {font-size: 1.5em; color: whitesmoke; font-family: "Alumni Sans", sans-serif; font-weight: 200; font-style: normal; line-height: .9em;}

h1.font.large {font-size: 4em; font-family: "Rock Salt", cursive;}
h1.font.large.purple {font-size: 4em; color: rgb(85, 77, 172); font-family: "Orbitron", sans-serif; font-family: "Rock Salt", cursive;}
h1.font.large.darkgrey {font-size: 4em; color: rgb(43, 43, 43); font-family: "Orbitron", sans-serif; font-family: "Rock Salt", cursive;}
h1.font.large.whitesmoke {font-size: 4em; color: whitesmoke; font-family: "Orbitron", sans-serif; font-family: "Rock Salt", cursive;}

h1.font.medium {font-size: 2em; font-family: "Orbitron", sans-serif; font-family: "Rock Salt", cursive;}
h1.font.medium.purple {font-size: 2em; color: rgb(85, 77, 172); font-family: "Orbitron", sans-serif; font-family: "Rock Salt", cursive;}
h1.font.medium.darkgrey {font-size: 2em; color: rgb(43, 43, 43); font-family: "Orbitron", sans-serif; font-family: "Rock Salt", cursive;}
h1.font.medium.whitesmoke {font-size: 2em; color: whitesmoke; font-family: "Orbitron", sans-serif; font-family: "Rock Salt", cursive;}

h1.font.small {font-size: 1em; font-family: "Orbitron", sans-serif; font-family: "Rock Salt", cursive; line-height: .8em;}
h1.font.small.purple {font-size: 1em; color: rgb(85, 77, 172); font-family: "Orbitron", sans-serif; font-family: "Rock Salt", cursive; line-height: .8em;}
h1.font.small.darkgrey {font-size: 1em; color: rgb(43, 43, 43); font-family: "Orbitron", sans-serif; font-family: "Rock Salt", cursive; line-height: .8em;}
h1.font.small.whitesmoke {font-size: 1em; color: whitesmoke; font-family: "Orbitron", sans-serif; font-family: "Rock Salt", cursive; line-height: .8em;}

h1.font.xsmall {font-size: .75em; font-family: "Orbitron", sans-serif; font-family: "Rock Salt", cursive; line-height: .8em; font-weight: 200;}
h1.font.xsmall.purple {font-size: .75em; color: rgb(85, 77, 172); font-family: "Orbitron", sans-serif; font-family: "Rock Salt", cursive; line-height: .8em; font-weight: 200;}
h1.font.xsmall.darkgrey {font-size: .75em; color: rgb(43, 43, 43); font-family: "Orbitron", sans-serif; font-family: "Rock Salt", cursive; line-height: .8em; font-weight: 200;}
h1.font.xsmall.whitesmoke {font-size: .75em; color: whitesmoke; font-family: "Orbitron", sans-serif; font-family: "Rock Salt", cursive; line-height: .8em; font-weight: 200;}

p.font.small.whitesmoke {font-size: 1em; display: inline; color: whitesmoke; font-family: "Alumni Sans", sans-serif; font-weight: 400; font-style: normal; line-height: .85em;}
p.font.smallbold.whitesmoke {font-size: 1.25em; display: inline; color: whitesmoke; font-family: "Alumni Sans", sans-serif; font-weight: 600; font-style: normal; line-height: .85em;}

.rock-salt-regular {
  font-family: "Rock Salt", cursive;
  font-weight: 400;
  font-style: normal;
}

.nothing-you could do-regular {
  font-family: "Alumni Sans", sans-serif; font-weight: 200; font-style: normal;
}

.alumni-sans {
  font-family: "Alumni Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

/* # # # # # # # # # # # #   Images   # # # # # # # # # # # # */

img {width: 100%; height: 100%;}
script {width: 100%; height: 100%;}

img.imgBlogThumb {aspect-ratio: 16 / 9; max-width: 320px; max-height: 180px;}
img.imgBlogThumb:hover {box-shadow: 0 0 20px 3px #554dac;}

img.imgRightColumn {height: 200px; width: 200px; max-width: 100%; height: auto;}


/* # # # # # # # # # # # #   Tables  # # # # # # # # # # # # */

.divBody {display: block; height: auto; width:100%;}

.divHeaderBanner {display: inline-block; height: 15%; width: 100%; text-align: center; padding: 0px;}
.divHeader {display: inline-block; height: 10%; width: 100%; text-align: center; padding: 0px;}
.divHeaderMenu {display: inline-block; height: 5%; width: 100%; text-align: center; padding: 0px; margin-bottom: 30px;}

.divTableColumnLeft {float: left; width: 80%; text-align: center;}
.divTableColumnRight {float: right; width: 20%;}

.divBlogRow {display: inline-block; max-height: 240px; width:100%; margin-top: 20px; margin-bottom: 20px; padding-left: 100px; padding-right: 100px;}
.divBlogThumb {float: left; height: 240px; width:30%; padding-left: 20px; padding-right: 10px; text-align: right}
.divBlogDesc {float: right; height: 240px; width:70%; padding-left: 10px; padding-right: 20px; text-align: left}
.divBlogTitle {display: inline-block; width:90%; padding-left: 5px; padding-right: 5px; text-align: left}
.divBlogSummary {display: inline-block; width:90%; padding-left: 5px; padding-right: 5px; text-align: left}


.divBlogPostMain {display: inline-block; height: auto; width:100%; margin-top: 50px; margin-bottom: 10px; text-align: center;}
.divBlogPostBody {float: left; height: auto; width:100%; padding-left: 30px; padding-right: 30px; text-align: center;}
.divBlogPostTitle {display: inline-block; width:80%; padding-left: 10px; padding-right: 10px; text-align: center;}

.divRightBlock {display: block; height: 200px; width:100%; text-align: center; padding: 10px;}

.divFooter {display: inline-block; height: 5%; width:100%; padding: 0px; text-align: center;}
.divFooterLeft {display: inline; width:15%; padding: 0px; text-align: left;}
.divFooterCenter {display: inline; width:70%; padding: 0px; text-align: center;}
.divFooterRight {display: inline; width:15%; padding: 0px; text-align: right;}

.divSongRequests {float: left; width: 85%; text-align: center;}


/* # # # # # # # # # # # #  Collapsable Table for Song List  # # # # # # # # # # # # */


 /* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #000;
  cursor: pointer;
  padding: 6px;
  width: 85%;
  border: none;
  text-align: left;
  outline: none;
  font-size: .8em;
  transition: 0.4s;
  color: whitesmoke;
  font-family: "Orbitron", sans-serif;
  font-family: "Rock Salt", cursive; 
  line-height: .8em;
  font-weight: 200;
}

.active, .accordion:hover {
  background-color: #554dac;
}

.panelrow {
  padding: 0 0px;
  max-height: 0;
  overflow: hidden;
  width: 85%;
  transition: max-height 0.2s ease-out;
  text-align: left;
  display: inline-block;
  column-count: 3;
}

.panelcolumn {
  padding: 0 0px;
  padding-top: 14px;
  padding-bottom: 14px;
  height: 100%;
  overflow: hidden;
  width: 100%;
  transition: max-height 0.2s ease-out;
  text-align: left;
  display: block;
}