@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400&display=swap');

body {
	margin: 0px;
	background:#122a47;
	font-family: Roboto, Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #eeeeee;
}
@media (min-width:769px) and (max-width:900px){	
	body { font-size:13px; }
}

/*p { margin:0; }*/
a {
	color: #eeeeee;
	text-decoration: none;
	border-bottom: 1px solid #ddd;
}
a:hover {
	color:#fc0;
	text-decoration: none;
	border-bottom: 1px #fc0 solid;
}
#menu {
	background-color: #122a47;
	position:absolute; 
	top: 0px; left: 0px;
	width:144px; height:100vh;
	z-index:99;
}
#menu a{
	display:block; 
	font-size:14px;
	color:#eee;
	font-weight:500;
	letter-spacing:.03em;
	text-decoration: none;
	padding-left:13px; 
	margin-bottom:1px; 
	line-height:24px; 
	border-top: 1px solid #132b46; 
	border-bottom: 1px solid #132b46;
}
#menu a:hover, #menu a.active { 
	color: #ffffff;
	text-decoration: none;
	background-color:#143564; 
	border-top: 1px solid #111; 
	border-bottom: 1px solid #111; 
	width:131px;
}
#menu .ps_artists a { 
	font-size:13px; 
	font-weight:400;
	padding-left:18px;
	width:126px;
}

#container {
	position:absolute; 
	top: 0px; left: 144px;
	/*min-width:760px; max-width:987px; */
	height:100%;
	min-width:555px;
	max-width:788px;
	margin:0;
	background-color: #163458;
}

#pagetop, #pagehead, #content {
	background-color: #163458;
}
#pagetop {
	position: absolute;
	left:34px; top:34px;
}
#pagehead{
	float:right; text-align:right; 
	width:377px; 
	margin:81px 34px 0 auto;
	font-size:44px; font-weight:700;
	line-height:1;
	color: #122a47;
	border-bottom: 1px solid #0A1626;
	z-index:21;
}
#content {
	min-width:555px;
	max-width:788px;
	padding:144px 34px 55px 21px;
	z-index:99;
}

/* Catalog ----------- */

.title {
    width: 61.8%;
	line-height:1.3;
	padding:27px 0 21px 0;
}
.shop_button {
	width:38%; 
	position: relative;
	top:-7px;
	padding-left:20px;
}

.col_personnel {
	float:left;
	display: inline-table;
    width: 61.8%;
    vertical-align: top;
}
.cover { 
	float:left; 
	width:175px;
}
.cover img {
	width:150px; 
	border:1px solid #000000;
}
.personnel {
	display:flow-root; 
	width:fit-content; 
	padding-right:21px;
}

.col_tracks {
	float:right;
	display:inline-block; 
	width:38%; 
	border-left:1px solid #122a47;
}
.track_listing {
	padding-left:21px;
}
@media(max-width:820px){
	.col_personnel {width:50%}
	.cover {width:100%;}
	.cover span {display:none;}
	.col_tracks {width:49%}
}
.about {
	position:relative;
	border-bottom:1px solid #122a47;
	border-top:1px solid #122a47;
}
.artistsabout {
	padding-left: 21px;
}

/*.small {
	font-size: 8pt;
}*/
#listen {
	color: #ffcc00;
text-decoration:none; 
border-bottom:1px solid #fc0;
}
/* ?
#email {
	position: absolute;
	background-color:#eeeeee;
	top: 100px;
	left: 150px;
	width:400px;
	height:300px;
	border: 1px solid #cccccc;
	z-index: 1000;
	padding: 10px;
	color: #000000;
}
*/
/*#email a {
	color: #000000;
}
#email td{
	color: #000000;
}*/

/*#header, */
.header {
	font-size: 17px;
	color: #ffff66; 
	font-weight: 500;
	letter-spacing:.05em;
	opacity:.89;
}
/*#header a, */
.header a {
	text-decoration: none;
	color: #ffff66;
	font-size: 11pt;
}
/*#header a:hover, */
.header a:hover { text-decoration: none;}

.subheader, .subsub, .subsub a {
	font-size: 15px;
	font-weight: 500;
	color: #BCC864;
	padding:13px 0 8px 0;;
}
.subheader {
	border-bottom:1px solid #122a47;
}
.subsub, .subsub a {
	text-transform: lowercase;
}
.tiny {
font-size:8pt;
color:#cccccc;

}
.tiny a{
font-size:8pt;
color:#ccc;
}

/* News ----------- */

.news_album_covers { margin-top:1em; }
 a.cover_link { border:none; }
.item, .item a {
	font-size:14px;
	color: #eeeeee;
}
.item { padding:0 30px; }


.clsbutton {
font-size: 6.5pt;
color: #000000;

border: 1px solid #666666;
}

input,textarea {
border: 1px solid #666666;
}


select {
font-size: 9pt;
}
#fields td{
font-weight: bold;
border-bottom: 1px solid #122A47;
}

td.specials_link {padding:.5em 0;}
td.specials_link a, 
td.specials_link a:visited, 
td.specials_link a:hover {
  color:#FC0;
}


iframe#review {float:left;}

button.buy {
	background:#143564; 
	border-color:#ffff66;
	border-radius:4px; 
	margin:10px 0 10px 10px;  
	padding:4px 6px;
	font-size:14px; 
	color:#ffff66;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;

}
button.buy:hover {
	background: #f4d078;
	background: -webkit-linear-gradient(top,#f7dfa5,#f0c14b);
	background: linear-gradient(to bottom,#f7dfa5,#f0c14b);
	color:#143564; color:#222;
	border-color:#143564;
  box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.2);
  box-shadow: 0px 4px 6px rgba(0,0,0, 0.2);
  transform: translateY(-3px);
}

/* from https://daneden.github.io/animate.css/ */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


@-webkit-keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}
.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}