@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap);
/*So, you like looking under my code, huh?
Let's look at things.*/
body {
	/*Wanted to add an image to the background. It looks OK, but not sure if it will stay. 11:31 AM 02-23-2025.
	I am thinking about allowing the Visitor chose their Background color or image.
	Might add that in later when the site is running DJs.*/
	/*background-image: url(https://demo.cffradio.com/graph/bg-footer.jpg);
    background-size: cover;*/
}







/* For Chrome, Safari, and Opera */
::-webkit-scrollbar {
  width: 12px; /* For vertical scrollbar */
  height: 12px; /* For horizontal scrollbar */
}

::-webkit-scrollbar-track {
  background: #000; /* Track background */
}

::-webkit-scrollbar-thumb {
  background: #281612; /* Thumb background */
}

::-webkit-scrollbar-thumb:hover {
  background: #281612; /* Thumb hover background */
}

/* For Firefox */
.scrollbar-example {
  scrollbar-width: thin; /* For thin scrollbar */
}

.scrollbar-example::-moz-scrollbar {
  width: 12px; /* For vertical scrollbar */
  height: 12px; /* For horizontal scrollbar */
}

.scrollbar-example::-moz-scrollbar-track {
  background-color: #000; /* Track background */
}

.scrollbar-example::-moz-scrollbar-thumb {
  background-color: #281612; /* Thumb background */
}

.scrollbar-example::-moz-scrollbar-thumb:hover {
  background-color: #281612; /* Thumb hover background */
}












#collapsibleNavbar, body, html {
	/*The original color of the background.*/
	background-color:#023
}
*, ul {
	margin:0;
	padding:0
}
#ArtistList, .Mainrow {
	width:100%
}
#top, .ArtistList, .ULLeft, .ULRight {
	list-style-type:none
}
.ULRights {
	list-style-type:none
}
#top li img, .ULLeft.theContainer, .footer-menu, .theLeft {
	float:left
}
*, footer * {
	box-sizing:border-box;
	outline:0
}
.FooterList, ul {
	list-style:none
}
.FooterList li a, .Genre, .footer-menu a, nav .nav-items li a {
	text-decoration:none
}
* {
	font-family:Montserrat, sans-serif
}
body, html {
	font-family:'Open Sans', 'sans-serif';
	color:#999
}

.Genre {
	font-family:Arial;
	color:#666
}
.ltSide, .rtSide {
	font-family:"Comic Sans MS", cursive
}
.Mainrow {
	display:flex;
	flex-wrap:wrap;
	padding:1.5% 15%
}
.Maincolumn {
	flex:16%;
	padding:2.5%;
	display:flex;
	align-items:center;
	justify-content:center
}
.ProfileImage, ul {
	display:block
}
.ThumbsImage, nav .cancel-icon, nav .menu-icon span, nav .search-icon {
	display:none
}
#EventDate, .Container, nav, nav form {
	display:flex
}
.image-container {
	margin-bottom:15px;
	width:200px;
	box-shadow:2.5px 2.5px 2.5px #000;
	-moz-box-shadow:2.5px 2.5px 2.5px #000;
	-webkit-box-shadow:2.5px 2.5px 2.5px #000;
	-khtml-box-shadow:2.5px 2.5px 2.5px #000
}
.Shadow {
	border:1.5px solid #000;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px
}
hr {
	border:1px double #480002;
	margin:25px 0
}
.AlignPhoto {
	text-align:center
}
a:active, a:active font, a:link, a:link font, a:visited, a:visited font {
	font-family:Arial;
	font-size:.9em!important;
	color:#666;
	text-decoration:none
}
.Container {
	flex-wrap:wrap
}
.BandList, .ULRight.theList, .arrow-right {
	display:inline-block
}
.Bottomcolumn, .column {
	flex:50%;
	padding:20px;
}
.Bottomcolumn {
	margin-top:auto
}
.Leftcolumn {
	padding:20px;
	background-color:#121212
}
.Center {
	border:1px solid;
	box-shadow:5px 10px #12161b;
	background-color:#0c090a;
	padding-bottom:2.5rem
}
.Setwidth {
	min-width:590px;
	width:100%!important
}
.form-3 {
	width:440px;
	margin:30px auto;
	padding:15px;
	position:relative;
	background:#1d242c;
	border:1px double #646464;
	border-radius:4px;
	color:#7e7975
}
.Image, .TinyImage {
	background-color:#242d36
}
.image {
	width: 100%;
	height: auto;
}
.Image, .Tags {
	border:1px solid;
}
.Tags{
	display:inline-block;
}
.BTitle {
	font-size:1.5em;
	color:#666;
}
.Title {
	font-size:13.5pt;
	color:#999;
}
.smTitle {
	font-size:10.5pt;
	color:#999;
}
.mdTitle {
	font-size:1.2em;
	color:#666;
}
.lgTitle {
	font-size:2em;
	color:#999;
}
.create{
	border: 1px double red;
	background-color: black;
	color: #666;
}
.AddButton{
	border: 1px double blue;
	background-color: black;
	color: #666;
}
.RemoveButton{
	border: 1px double red;
	background-color: black;
	color: #666;
}
.ltSide {
	font-size:25pt
}
.rtSide {
	font-size:15pt
}
.Image {
	padding:10px 10px 2.5rem;
	box-shadow:5px 5px #12161b
}
.Tags, .Tags:hover {
	padding:.1em;
	box-shadow:.5px .5px .2px grey;
	font-size:1em
}

.Links:hover {
	color:#0e6170;
	text-shadow:.5px .5px 1px #000
}

#LessGreater {
	border-bottom:1px double #ccc;
	margin-bottom:15px;
	width:100%
}
.TagList {
	margin:5px 0;
	display:inline-block;
}
.Tags {
	color:#828282;
}
.Tags:hover {
	color:#0e6170;
	text-shadow:.5px .5px 1px #000
}
#EventDate {
	justify-content:center;
	align-items:center
}
#top {
	width:100%;
}
#top li p {
	font:200 10px/1.5 Georgia, Times New Roman, serif
}
#top li {
	overflow:auto
}
.Span1 {
	font-family:'Comic Sans MS', cursive;
	font-size:13pt
}
.List1 {
	text-align:left;
	margin-bottom:5px
}
.arrow-right {
	width:0;
	height:0;
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
	border-left:5px solid green;
	list-style-position:inside;
	padding-left:5px
}
.ArtistList {
	border:1px double #333;
	margin:.5em;
	padding:0 5px
}
#Desc.ArtistList {
	word-wrap:break-word
}
.ULLeft, .ULRight {
	margin:0;
	padding:0;
	overflow:hidden
}
.ULRight {
	vertical-align:top;
	height:100%
}
.theLeft {
	padding-right:5px
}
.ULRight.theList {
	height:25px
}
.TinyImage {
	margin:5px;
	box-shadow:2px 2px #12161b;
	padding:2.5rem
}
.Search, .SearchMobile {
	background-color:#121212;
	color:#666
}
.Search {
	border:none
}
.SearchMobile {
	border:1px double purple;
	margin:5px;
	padding:5px
}
@media screen and (max-width:992px) {
.Maincolumn {
flex:25%
}
.ThumbsImage {
display:block
}
.ProfileImage {
display:none
}
/*.image-container {
/*width:200px
width: 10%;
}*/
.TrackHolder{
	padding-top:90px;
}
}

@media screen and (max-width:600px) {
.BTitle, .Title {
font-size:15.5pt
}
.Container, .Mainrow {
flex-direction:column
}
.Bottomcolumn, .column {
padding:20px 10px
}
#LessGreater {
border-bottom:1px double #ccc;
margin-bottom:15px;
width:100%
}
.BTitle {
color:#000
}
.Title, .smTitle {
color:#999
}
.smTitle {
font-size:10.5pt
}
a:active, a:active font, a:link, a:link font, a:visited, a:visited font {
font-family:Arial;
font-size:1em!important
}
.Tags {
padding:.1em;
font-size:1em;
color:#828282;
box-shadow:.5px .5px .2px grey
}
.ThumbsImage {
display:none
}
.ProfileImage {
display:block
}

.TrackHolder{
	padding-top:90px;
}
}
/*nav {
	background:#171c24;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	height:70px;
	padding:0 100px;
	position:sticky;
	top:0;
	z-index:50
}
nav .logo {
	color:#fff;
	font-size:30px;
	font-weight:600;
	letter-spacing:-1px
}
nav .nav-items {
	display:flex;
	flex:1;
	padding:0 0 0 40px
}
nav .nav-items li {
	list-style:none;
	padding:0 15px
}
nav .nav-items li a {
	color:#fff;
	font-size:18px;
	font-weight:500
}
nav .nav-items li a:hover {
	color:#ff3d00
}
nav form {
	height:40px;
	padding:2px;
	background:#1e232b;
	min-width:18%!important;
	border-radius:2px;
	border:1px solid rgba(155, 155, 155, .2)
}
nav form .search-data, nav form button {
	font-size:17px;
	border:none;
	color:#fff
}
nav form .search-data {
	width:100%;
	height:100%;
	padding:0 10px;
	font-weight:500;
	background:0 0
}
nav form button {
	padding:0 15px;
	background:#ff3d00;
	border-radius:2px;
	cursor:pointer
}
nav form button:hover {
	background:#e63600
}
nav .cancel-icon, nav .menu-icon, nav .search-icon {
	width:40px;
	text-align:center;
	margin:0 50px;
	font-size:18px;
	color:#fff;
	cursor:pointer;
	display:none
}*/
@media (max-width:1245px) {
nav {
/*padding:0 50px*/
}
}
@media (max-width:1140px) {
/*nav {
padding:0
}
nav .logo {
flex:2;
text-align:center
}
nav .nav-items {
position:fixed;
z-index:99;
top:70px;
width:100%;
left:-100%;
height:100%;
padding:10px 50px 0;
text-align:center;
background:#14181f;
display:inline-block;
transition:left .3s
}
nav .nav-items.active {
left:0
}
nav .nav-items li {
line-height:40px;
margin:30px 0
}
nav .nav-items li a {
font-size:20px
}
nav form {
position:absolute;
top:80px;
right:50px;
opacity:0;
pointer-events:none;
transition:top .3s, opacity .1s
}
nav form.active {
top:95px;
opacity:1;
pointer-events:auto
}
nav form:before {
position:absolute;
content:"";
top:-13px;
right:0;
width:0;
height:0;
z-index:-1;
border:10px solid transparent;
border-bottom-color:#1e232b;
margin:-20px 0 0
}
nav form:after {
position:absolute;
content:'';
height:60px;
padding:2px;
background:#1e232b;
border-radius:2px;
min-width:calc(100% + 20px);
z-index:-2;
left:50%;
top:50%;
transform:translate(-50%, -50%)
}
nav .cancel-icon.show, nav .menu-icon, nav .menu-icon span, nav .search-icon {
display:block
}
nav .menu-icon span.hide, nav .search-icon.hide {
display:none
}*/
}

#SearchBar {
	z-index:100
}

@media (max-width:350px) {
nav .cancel-icon, nav .menu-icon, nav .search-icon {
margin:0 10px;
font-size:16px
}
#SearchBar {
z-index:100
}
}
blockquote {
	font-size:1em;
	width:60%;
	margin:10px auto;
	font-family:Open Sans;
	font-style:italic;
	color:#ccc;
	padding:1em 10px 1em 50px;
	border-left:2.5px solid #78c0a8;
	line-height:1.6;
	position:relative;
	background:#121212
}
blockquote::before {
font-family:Arial;
content:"\201C";
color:#78c0a8;
font-size:4em;
position:absolute;
left:10px;
top:-10px
}
blockquote::after {
content:''
}
blockquote cite {
	display:block;
	color:#333;
	font-style:normal;
	font-weight:700;
	margin-top:1em
}

/*Footer Copyright*/
.copyright {
	padding:.3em 1em;
	background-color:#25262e
}

.copyright p {
	font-size:.9em;
	text-align:right
}
/*Footer Copyright*/
@media screen and (max-width:850px) {
.FooterRow.primary {
grid-template-columns:1fr
}
.NameTitle {
font-size:12pt
}
.Genre {
font-size:16pt
}
}