/* lib: phpbom/standard.css: */


/****************************************************************************\
 *
 * 2019-09-12 jj5 - HTML grid support
 *
\****************************************************************************/

/* 2019-09-11 jj5 - SEE: HTML form tables: https://jsfiddle.net/ZRQPP/ */

.table {
	display: table;
	border-collapse: separate;
	border-spacing: 2px;
}

.thead {
	display: table-header-group;
	color: white;
	font-weight: bold;
	background-color: grey;
}

.tbody {
	display: table-row-group;
}

.tr {
	display:table-row;
}

.td {
	display:table-cell;
	/*border:1px solid black;*/
	padding:1px;
}

/****************************************************************************\
 *
 * 2019-09-13 jj5 - standard capitalisation...
 *
\****************************************************************************/

.null, .true, .false {
  text-transform: uppercase;
}

/****************************************************************************\
 *
 * 2019-09-11 jj5 - Standard colours
 *
\****************************************************************************/

.error {
  color: red;
}

/****************************************************************************\
 *
 * 2019-09-11 jj5 - Standard spacing
 *
\****************************************************************************/

div.error {
  margin-bottom: 12px;
}

/****************************************************************************\
 *
 * 2019-09-11 jj5 - Standard alignment
 *
\****************************************************************************/

.center {
  text-align: center;
}

.right {
  text-align: right;
}

/*
// 2019-11-12 jj5 - this is for aligning labels and checkboxes...
// 2019-11-12 jj5 - SEE: StackOverflow Vertical align checkbox label?:
// https://stackoverflow.com/a/15231067
*/
label.checkbox-label input[type=checkbox]{
    position: relative;
    vertical-align: middle;
    bottom: 1px;
}

/****************************************************************************\
 *
 * 2019-09-11 jj5 - Popup menus
 *
\****************************************************************************/

.popup {
  /*
  color: blue;
  text-decoration: underline;
  */
  cursor: pointer;
  display: inline-block;
}

.popup div {
  display: none;
  position: absolute;
  background-color: white;
  cursor: default;
  border: 1px solid black;
  padding: 0px 8px;
  /*
  border-radius: 10px;
  */
}

.popup div ul {
  list-style: none;
  padding-left: 6px;
}

.popup div ul li {
  margin-bottom: 4px;
}

.popup:hover div {
  display: block;
}

/****************************************************************************\
 *
 * 2019-09-11 jj5 - Empty cell formatting
 *
\****************************************************************************/

th.empty {
  border-left: none !important;
  border-top: none !important;
  background-color: white !important;
}

/****************************************************************************\
 *
 * 2019-09-11 jj5 - Nice HTML tables
 *
\****************************************************************************/

/* 2018-05-01 jj5 - SEE: adapted from:
   http://cssmenumaker.com/blog/stylish-css-tables-tutorial */

.nice-table td {
  vertical-align: middle !important;
}

.sortable thead th:not([colspan]),
.sortable tfoot th:not([colspan]) {
  cursor: pointer;
}

/* 2019-01-22 jj5 - if there's an empty cell top left in the table header
 * then omit its top/left borders... */
.nice-table thead td:first-child:empty {
  border-left: 0px;
  border-top: 0px;
  background: #FAFAFA;
}

table.nice-table {
  /*
  display: inline-block;
  */
  color: #333;
  border-collapse:collapse;
  border-spacing: 0;
  cursor: default;
  /* 2018-02-18 jj5 - DONE: set the table background to white to fix a
     brief transparency when animating on mouse hover... */
  background-color: #fff;
  /* 2018-11-12 jj5 - DONE: remove table border, we use cell borders instead */
  border: none;
}

.nice-table td, .nice-table th {
  border: 1px solid black;
  transition: all 0.1s;  /* simple transition for hover effect */
  padding: 4px;
  vertical-align: top;
}

.nice-table th {
  background: #D4D4D4;
  font-weight: bold;
}

.nice-table td {
  background: #FAFAFA;
  vertical-align: top;
}

/* cells in even rows (2,4,6...) are one color */
.nice-table tr:nth-child(even) td { background: #e4e4e4; }

/* cells in odd rows (1,3,5...) are another (excludes header cells)  */
.nice-table tr:nth-child(odd) td { background: #FEFEFE; }

.nice-table tr:hover td { background-color: transparent; }

.nice-table tr:hover { background-color: #ffff99; }

.nice-table tbody th {
  text-align: right;
}


/* lib: style.css: */

/*************************

Style by: Aleksei Vanamois

*************************/

/* Site Structure */

#main {
	position: absolute;
	width: 500px;
	margin: 0px 0px 0px -250px;
	center: 0px;
	overflow: fixed;
	left: 50%;
	padding-bottom: 50px;
	}
#menu {
	/*height: 20px;*/
	/*background: url("images/fanbox_menu.gif") no-repeat center top;*/
	margin-bottom: 5px;
	display: block;
	font-size: 16px;
	font-weight: bold;
	padding: 5px 10px 5px 10px;
	}
#menu a:link {
	font-weight: bold;
	color: #FFFFFF;
	}
#menu a:visited {
	font-weight: bold;
	color: #FFFFFF;
	}
#menu a:hover {
	font-weight: bold;
	color: #221F20;
	text-decoration: none;
	}

  #menu span {
    color: white;
  }

#main_compact {
	position: absolute;
	width: 350px;
	margin: -292px 0px 0px -175px;
	top: 300px;
	center: 0px;
	overflow: fixed;
	left: 50%;
	}
#content {
  /*
	border-left: #00C0F3 solid 1px;
	border-right: #00C0F3 solid 1px;
  */
	border: #00C0F3 solid 1px;
  border-radius: 14px;
	padding: 14px;

  /*
  min-height: 800px;
  */

	}

#featured_content {

  min-height: 600px;

}

#title, .title {
	border-bottom:#00C0F3 solid 1px;
  /*
	margin-right: 8px;*/
	margin-bottom: 10px;
	}
#body {
	width: 100%;
	}
#album {
	width: 200px;
	}
#login, #error {
  /*
	border-left: #00C0F3 solid 1px;
	border-right: #00C0F3 solid 1px;
	padding: 10px 20px 10px 20px;
  */
	border: #00C0F3 solid 1px;
  border-radius: 14px;
	padding: 14px;
	}
#logo {
	height: 168px;
  margin: auto;
  width: 100%;
  background-position: center !important;
  margin-bottom: 1em;
	/*background: url("images/livemail_logo.gif") no-repeat left top;*/
	}

#new-logo {
  width: 100%;
  text-align: center;
  margin: 0px;
  padding: 0px;
}

.footer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	text-decoration: none;
	color: #FFF;
	letter-spacing: normal;
	font-weight: normal;
	font-style: normal;
	text-align: right;
	padding-top: 5px;
	margin-bottom: 10px;
	width: 100%;
	position: absolute;
	overflow: fixed;
	}
.footer_left {
	padding-left: 10px;
	float: left;
	}
.footer_right {
  /* 2021-03-13 jj5 - NEW: */
	padding-right: 1rem;
  /* 2021-03-13 jj5 - OLD:
	padding-right: 10px;
  */
	float: right;
	}
#albums_art {
	width: 60px;
	height: 60px;
	}
#albums {
	padding-bottom: 10px;
	}
#albums_label {
	width: 370px;
	}
.album_cover {
  /*
	width: 150px;
	height: 150px;
  */
	}
.albums_img {
	border: #00C0F3 solid 1px;
	}
.metaAlbumthumb {
	float: left;
  width: 25%;
	}
.metaAlbumthumb img {
  width: 94%;
}
.metaAlbuminfo {
	float: right;
	/*width: 83%;*/
	width: 74%;
	}
#flash {
	margin-bottom: 10px;
	margin-right: 8px;
	padding-bottom: 10px;
	border-bottom: #00C0F3 solid 1px;
	}
#meta, .meta {
	margin-bottom: 10px;
	padding-bottom: 10px;
	margin-right: 8px;
	border-bottom: #00C0F3 solid 1px;
	}
#metalist {
	margin-bottom: 10px;
	padding-bottom: 10px;
	margin-right: 8px;
	border-bottom: none;
	}

#promo {
	margin-bottom: 10px;
	margin-right: 8px;
	padding-bottom: 10px;
	border-bottom: #00C0F3 solid 1px;
	}
#sign {
	margin-bottom: 10px;
	margin-right: 8px;
	padding-bottom: 10px;
	}
.promo {
	margin-bottom: 10px;
	margin-right: 8px;
	padding-bottom: 10px;
	border-bottom: #00C0F3 solid 1px;
	}
.track_list, .video_list {
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: #00C0F3 solid 1px;
	/*margin-right: 8px;*/
	}
.track_list_no_border, .video_list_no_border {
	margin-bottom: 10px;
	padding-bottom: 10px;
	margin-right: 8px;
	}
div.meta {
	overflow: hidden;
	width: 100%;
	}
div.metaText {
	width: 60%;
	float: left;
	}
div.metaCover {
	width: 40%;
	float: right;
	}

div.metaFormtext {
	float: left;
	width: 25%;
	}
div.metaForm {
	float: left;
	width: 74%;
	}
div.metaContact {
	float: left;
	width: 50%;
	}
div.subleft {
	margin-bottom: 3px;
	}
div.subright {
	margin-bottom: 8px;
	}

  .error {
    color: red;
  }
  .success {
    color: lightgreen;
  }


/* 2019-09-27 jj5 - stuff John added... */

.record {
  border: 1px solid #555;
  border-radius: 4px;
  padding: 10px 0px 10px 10px;
  margin-bottom: 4px;
}

.field .label, .field .value, .field .checkbox {
  margin-bottom: 6px;
}

.field .value input, .field .value textarea {
  width: 88%;
  margin-bottom: 6px;
}

div.error {
  margin-top: -6px;
}

div.submit {
  margin-top: 18px;
}

iframe.bandcamp-track {
  padding: 0px;
  margin: 0px;
  border: none;
  width: 100%;
  height: 42px;
  /*height: 56px;*/
  background: transparent;
}

iframe.youtube-video {
  padding: 0px;
  margin: 0px;
  border: none;
  width: 100%;
  /*height: 315px;*/
  height: 400px;
  background: transparent;
}

button.toggle-lyrics {
  width: 100px;
}
div.lyrics-control, div.lyrics {
  margin-bottom: 8px;
}

/* 2019-09-27 jj5 - this vertically aligns checkboxes and their label... */
/* 2019-09-27 jj5 - SEE: stackoverflow: https://stackoverflow.com/a/15231067 */
.checkbox input[type=checkbox] {
  position: relative;
  vertical-align: middle;
  bottom: 1px;
}

table.xdebug-error {

  color: #000;

}

@media all and ( max-width: 580px ) {

  body {
    width: auto;
    /*overflow: hidden;*/
  }

  #main {
    position: static;
    margin: 0px;
    top: 0px;
    center: 0px;
    left: 0px;
    padding-bottom: 50px;
    width: auto;
  }

  #content {
    border: none;
    padding: 0px;
  }

}



.field {
  clear: both;
}

table.report {
  border-collapse: collapse;
}
table.report th, table.report td {
  border: 1px solid #00C0F3;
  padding: 4px;
}
table.report td {
  vertical-align: top;
}

input[type=radio], input[type=checkbox] {
  width: 37px !important;
}

select {
  margin-bottom: 8px;
}













/* 2021-03-15 jj5 - carousel */

.carouselbox {
  width: 94%;
  /*height: 500px;*/
  position: relative;
  margin: 1em;
  /*
  border: 1px solid #ccc;
  box-shadow: 2px 2px 10px #ccc;
  */
  overflow: hidden;
}
.carousel {
  margin: 0;
  padding: 0;

  /* 2021-07-10 jj5 - OLD:
  height: 600px;
  */
  /*
  min-height: 90%;
  */

}
.carousel li {
  font-size: 16px;
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
  text-align: center;
}
.hide-for-load {
  display: none;
}
.carousel li span {
  position: absolute;
  bottom: 20px;
  right: 20px;
  padding: 1rem;
  border: 2px solid white;
  border-radius: 10px;
  background-color: #000;
  opacity: 0.7;
  color: white;
}
.carousel li div {
  position: absolute;
  bottom: -52px;
  width: 80%;
  height: 36px;
  margin-left: 24px;


  padding: 1rem;
  border: 2px solid white;
  border-radius: 10px;
  background-color: #000;
  opacity: 0.8;
  color: white;
}
.carousel img {
  width: 100%;
  border-radius: 5px;
}

.active {
  /*height: 130px;*/
}
.active li {
  position: absolute;
  top: 100px;
}
.active li.current {
  top: 30px;
}

.active .buttons {
  padding: 0px 0;
  /*
  background: #eee;
  */
  text-align: center;
  z-index: 10;
  position: relative;
}
button.prev {
  float: left;
}
button.next {
  float: right;
}
.carouselbox button {
  border: none;
  display: none;
  padding: 12px;
}
.active button {
  display: block;
}
.offscreen {
  position: absolute;
  left: -2000px;
}

.active li {
  position: absolute;
  top: 130px;

  pointer-events: none;
  opacity: 0;
  transform: scale(0);
  transition: 1s;
}
.active li.current {
  top: 30px;

  pointer-events: auto;
  opacity: 1;
  transform: scale(1);
  transition: 1s;
}

button {
  cursor: pointer;
  margin: 8px 0px;
}

.toggle-lyrics {
  margin-top: 1rem;
}


.links {
  margin-bottom: 1rem;
}

a {
  text-decoration: underline !important;
}

button.playlist {
  background: transparent;
  margin: 0px;
  padding: 0px;
  font-size: 1.4rem !important;
}

button {
  width: auto;
}

h1, h2, h3, h4, h5, h6 {
  text-align: center;
}






/************************************************************************************************\

 2023-11-12 jj5 - style for hamburger menu

\************************************************************************************************/



.navbar {
    /*background-color: #333;*/
    padding: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-toggle {
    cursor: pointer;
    display: none;
}

.menu-toggle span {
    background-color: #fff;
    height: 3px;
    width: 25px;
    margin: 5px 0;
    display: block;
}

.menu {
    display: flex;
}

.menu a {
    color: #fff;
    text-decoration: none;
    padding: 10px;
    margin: 0 10px;
}

@media only screen and (max-width: 768px) {
    .menu {
        display: none;
        flex-direction: column;
        width: 100%;
        text-align: center;
    }

    .menu-toggle {
        display: block;
    }

    .menu-toggle.active + .menu {
        display: flex;
    }
}




/************************************************************************************************\

 2023-11-14 jj5 - style for search results and home page

\************************************************************************************************/


.match {

  border: 1px solid #221F20;
  border-radius: 14px;
  margin-bottom: 1rem;
  vertical-align: top;
  white-space: normal;
  width: 100%;
  overflow: hidden;

}

.match .img {

  width: 18%;
  vertical-align: top;
  margin: 1rem;
  display: inline-block;
  float: left;
  box-sizing: border-box;

}

.match .txt {

  width: 68%;
  vertical-align: top;
  margin: 1rem;
  display: inline-block;
  white-space: normal;

}

.match div {

  display: inline-block;

}

.match img {

  width: 100%;
  display: inline-block;

}


/* lib: style_presentation.css: */

/*************************

Style by: Aleksei Vanamois

*************************/

/* Text Styles */

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	text-decoration: none;
	color: #FFF;
	letter-spacing: normal;
	font-weight: normal;
	font-style: normal;
	text-align: left;
	background-color:#000;
  /* 2023-05-12 jj5 - OLD:
	background-color:#221F20;
  */
	}
a 		  {color: #FFFFFF; text-decoration: none;}
a:link    {color: #00C0F3;}
a:visited {color: #00C0F3;}
a:hover   {color: #E93E0C; text-decoration: underline;}

p           {padding: 0px;}

/* 2019-09-22 jj5 - I've removed this... I don't know what Alexi was
   thinking! */
/*
p a:link    {color: #FFF;}
p a:visited {color: #FFF;}
p a:hover   {color: #00CCFF;}
*/

b  {font-weight: bold;}

ul {
	padding: 0px 0px 0px 25px;
	list-style-type: square;
	}
hr  {
	margin: 10px 0px 10px 0px;
	border-top: 1px solid #00C0F3;
	border-bottom: 0px;
	border-left: 0px;
	border-right: 0px;
	height: auto !important;
	height: 1px;
	}
input, input[type=password] {
	font: 10pt Arial, Helvetica, sans-serif;
	color: #FFF;
	background: #221F20 !important;
	border: 1px solid #00C0F3;
	padding: 5px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	}
input:hover, input:focus, input[type=password]:hover, input[type=password]:focus {
	font: 10pt Arial, Helvetica, sans-serif;
	color: #FFF;
	background: #221F20 !important;
	border: 1px solid #E93E0C;
  /*
	padding: 5px;
  */
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	}
#login .login {
  /*
	width: 180px;
  */
	}
textarea {
	font: 10pt Arial, Helvetica, sans-serif;
	color: #FFF;
	background: #221F20;
	border: 1px solid #00C0F3;
	padding: 5px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	width: 90%;
	}
textarea:hover, textarea:focus  {
	font: 10pt Arial, Helvetica, sans-serif;
	color: #FFF;
	background: #221F20;
	border: 1px solid #E93E0C;
  /*
	padding: 5px;
  */
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	width: 90%;
	}
select {
	font: 10pt Arial, Helvetica, sans-serif;
	color: #FFF;
	background: #221F20;
	border: 1px solid #00C0F3;
	padding: 5px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	width: 300px;
	}
select:hover, select:focus  {
	font: 10pt Arial, Helvetica, sans-serif;
	color: #FFF;
	background: #221F20;
	border: 1px solid #E93E0C;
  /*
	padding: 5px;
  */
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	}
form {
	padding: 0px 0px 10px 0px;
	}

h1 {color: #00C0F3; font-size: 24pt; font-weight: bold; margin: 0px 0px 5px 0px;}
h2 {color: #00C0F3; font-size: 16pt; font-weight: bold; margin: 0px 0px 10px 0px;}
h3 {color: #00C0F3; font-size: 12pt; font-weight: bold; margin: 0px 0px 10px 0px;}
h4 {color: #FFFFFF; font-size: 12pt; font-weight: bold; margin: 0px 0px 10px 0px;}

h4 a 		 {color: #FFFFFF; text-decoration: none;}
h4 a:link    {color: #00C0F3;}
h4 a:visited {color: #00C0F3;}
h4 a:hover   {color: #E93E0C; text-decoration: underline;}

/* Form Styles */

.login {
	font: 10pt Arial, Helvetica, sans-serif;
	color: #FFF;
	background: #221F20;
	border: 1px solid #00C0F3;
	padding: 5px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	}
button {
	font-size: 9pt;
	font-weight: bold;
	color: #FFF;
	border: 0;
	background-color: #00C0F3;
	padding: 5px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	}
button:hover, button:focus {
	font-size: 9pt;
	font-weight: bold;
	color: #FFF;
	border: 0;
	background-color: #E93E0C;
  /*
	padding: 5px;
  */
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	}
.cancel {
	font-size: 9pt;
	font-weight: bold;
	color: #FFF;
	border: 0;
	background-color: #00C0F3;
	padding: 5px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	}
.cancel:hover, .cancel:focus {
	font-size: 9pt;
	font-weight: bold;
	color: #FFF;
	border: 0;
	background-color: #E93E0C;
  /*
	padding: 5px;
  */
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	}
.tracks {
	font-size: 9pt;
	font-weight: bold;
	color: #FFF;
	border: 0;
	background-color: #00C0F3;
	padding: 5px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	}
.tracks:hover, .tracks:focus {
	font-size: 9pt;
	font-weight: bold;
	color: #FFF;
	border: 0;
	background-color: #E93E0C;
  /*
	padding: 5px;
  */
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	}
.flash {
	padding-bottom: 10px;
	}
.note {
	color: #00C0F3;
	font-weight: bold;
	margin-bottom: 5px;
	}
.form {
	margin-bottom: 15px;
	}
.formText {
	margin-bottom: 19px;
	margin-top: 3px;
	color: #00C0F3;
	font-weight: bold;
	}
.red {
	color: #E93E0C;
	}
#textbox {
	width: 210px;
	}
.publish {
	border: none;
	}


input {
  background-color: #221F20 !important;
}


/* lib: table.css: */

.nice-table td { vertical-align: middle !important; }

.sortable thead th:not([colspan]) { cursor: pointer; }

.nice-table thead td:first-child:empty {
  border-left: 0px;
  border-top: 0px;
  background: #FAFAFA;
}

table.nice-table {
  display: inline-block;
  color: #333;
  border-collapse:collapse;
  border-spacing: 0;
  cursor: default;
  background-color: #fff;
  border: none;
}

.nice-table td, .nice-table th {
  border: 1px solid black;
  transition: all 0.1s;
  padding: 4px;
  vertical-align: top;
}

.nice-table th { background: #D4D4D4; font-weight: bold; }

.nice-table td { background: #FAFAFA; vertical-align: top; }

.nice-table tr:nth-child(even) td { background: #e4e4e4; }

.nice-table tr:nth-child(odd) td { background: #FEFEFE; }

.nice-table tr:hover td { background-color: transparent; }

.nice-table tr:hover { background-color: #9200F6; }

.nice-table tr:hover a, .nice-table tr:hover td { color: white; }




#menu {
  background-image: linear-gradient(#00BEF1, #005369);
  border-radius: 5px;
}