@charset "utf-8";
/* CSS Document */
/* Written by: Derek McDonald for DISKERY.COM */

<style type="text/css">
/* Base Diskery Landscape: Universal HTML command changes ------------------------------ */
a			{ background: transparent; }  /* Remove IE 10 Gray background */
a:link 	  	{ color: blue;		text-decoration-line: none; }
a:visited 	{ color: purple;	text-decoration-line: none; }
a:active  	{ color: none;		text-decoration-line: none; outline: 0; }
a:hover     { outline: 0; }

h1 			{ color: #FF0000;	text-align: Center;	font-size: 2em; margin: 0.67em 0; }
h2			{ color: #000000;	text-align: Center; }
h3			{ color: #000000;	text-align: Center; }
img			{ max-width: 100%;  height: auto; border: 0; }   /* Remove border when inside `a` element in IE 8/9/10 - and set width for all */
hr.dotted	{ border: 1px dashed brown;  width: 75%;  }
hr.banner	{ border: 1px solid #996633; width: 100%; }
hr.ads		{ border: 1px solid blue;    width: 100%; }

pre      { overflow: auto; }  /* Contain overflow in all browsers */
textarea { overflow: auto; }
dfn 	 { font-style: italic; }

code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

html { height: 100%; }
body {
	width:				100%;
	height:				100%;
	background-color:	#000000;
	color:				#FFFFFF;
	margin:				0;					/* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding:			0;

	/* -webkit-overflow-scrolling: touch; */
	
	font-family:		"Roboto", "Helvetica", "Arial", "Tahoma", "Verdana", sans-serif;  /* Set default fonts - can be modified for each individual section but if all else fails, use this */
	font-style:			normal;
	text-align:			Left;
	font-size: 			100%;
}

/* Prevent `sub` and `sup` affecting `line-height` in all browsers */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup { top: -0.5em; }
sub { bottom: -0.25em; }

label { display:none; }

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button, input, optgroup, select, textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/* Address `overflow` set to `hidden` in IE 8/9/10/11 */
button { overflow: visible; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button, select { text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/* Re-set default cursor for disabled elements */
button[disabled],
html input[disabled] {
  cursor: default;
}

/* Remove inner padding and border in Firefox 4+ */
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input { line-height: normal; }

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

@-ms-viewport { width: device-width; } 


/* Change Bullet to arrow when in FAQ */
#FAQMenu ul { list-style: none; } /* Remove default bullets */

#FAQMenu li::before {
    content: "\2794"; /* Unicode bullet symbol */
    color: black;  /* Bullet color */
	
	/* Optional tweaks */
    font-weight: bold;
    padding-right: 10px;
}


/* Default Positioning Classes --------------------------------- */
.center { margin: 0 auto; text-align: center;}
.right  { text-align: right; }
.left   { text-align: left;  }
.centerTable { margin: 0 auto; }
.discogAwardPic { display: inline-block; }
.void {} /* left as place filler */


/* Elemental Text Colors --------------------------------------- */
.colorGreen  { color: green; }
.colorBlue   { color: blue;  }
.colorRed    { color: red;   }
.colorBlack  { color: black; }
.colorWhite  { color: white; }
.colorYellow { color: yellow;}

.grayout     { color: #808080; }


/* -------- ToolTips ------------------------------------------ */
.tooltip {
  position: 	 relative;
  display: 		 inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: 	hidden;
  width: 		120px;
  background-color: black;
  color: 		#fff;
  text-align: 	center;
  border-radius: 6px;
  padding: 		5px 0;
  position: 	absolute;
  z-index: 		1;
  top: 			150%;
  left: 		50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: 		"";
  position: 	absolute;
  bottom: 		100%;
  left: 		50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext { visibility: visible; }


/* Universal Classes ----------------------------------- */
/* Default for Laptops and Desktops */
.allContent { 
	/* Details on innards of HTML page */
	background:				#000000;
	margin:					auto;				/* the auto margins (in conjunction with a width) center the page */
	text-align:				center;				/* this overrides the text-align: center on the body element. */
	color:					#000000;
	
	-webkit-touch-callout:	none;
	-webkit-user-select:	none;  
	-moz-user-select:		none;    
	-ms-user-select:		none;      
	user-select:			none;
} 

.allSidebar {
	/* Sidebar container */
	table-layout:		fixed;
	vertical-align:		Top;
	background:			#EBEBEB;
	border-spacing:		0.063em;			/* 1 pixel */
	border-collapse:	separate;
	padding:			0.063em;			/* 1 pixel */
}
/* #scrollSidebar { height: 800px; overflow-y: scroll; scrollbar-width: thin; } */ /* future update */

#titlePic { max-height: 60%; }


/* Main Table Content ---------------------------------- */
.mainTable {
	/* Diskery container table - container table effectively becomes the new <body> */
    margin: 			0.5% 0.5% 0.5% 0.5%;  	/* margin: top right bottom left - some browsers do not render the bottom */
	height: 			99%;				  	/* (top-bottom) Must have this no more than 99% - a bug - leave a little room so there is no shift screen or content cover with scrollers margin totals reside within this */
	width:				99%;				  	/* <<< Must have this no more than 99% - a bug - leave a little room so there is no shift screen or content cover with scrollers margin totals reside within this */
	position:			absolute;
	background-color:	#000000;
	border:				0.3125em #CCC outset; 	/* 5 pixels wide */		
	border-spacing:		0.188em;				/* 3 pixels */
	border-collapse:	separate;
	padding:			0.125em;				/* 2 pixels */
}

.mainTableTDTH {
	border:				0.063em #CCC inset; 	/* 1 pixel wide */
	padding:			0.188em;				/* 3 pixels */
	/* padding:         0.3125em;               /* 5 pixesl */
	/* padding:			0.625em;				/* 10 pixels */
	height:				3%;
}


.mainTableBackground {
	/* Article content section */	
	border:				0em #EBEBEB none;	/* 0 pixels wide(0em) - (border: size, color, style;) */
	height:				94%;
	padding:			0.188em;			/* 3 pixels */
	vertical-align:		Top;
    text-align: 		left;
	background:			url('/pics/marble_white.jpg') repeat #000 center fixed;
}

.awardsPic    { height: 40px; width: 40px; }
.forceWDBreak { word-spacing: 99999999999999px; } /* A stupid high white psace between words will force a break no matter screen size */

p.introduction::first-letter {
  float:			left;
  font-weight:		bold;
  font-family: 		Times New Roman;
  color: 			#000000;
  font-size: 		55px;
  line-height: 		35px;
  padding-top: 		0px;
  padding-bottom: 	3px;
  padding-right: 	3px;
  padding-left: 	3px;
  margin-right: 	3px;
  margin-bottom: 	-3px;
}

.articleNav {
	display:			block;
	text-align:			center; /* Center it */
}

.searchField  { background: #fff; padding: 6px 32px 6px 3px; height: 25px; }		/* padding: top, right, bottom, left */
.searchIcon   { background: url('/pics/icons/magnifying_glass-small.png') no-repeat #fff right; background-size:auto; }
.searchOption { background: #f9f9f9; }


.tblNew {
	background-color: #F2F2F2;
	width: 70%;
	border: 1px solid black;
	padding: 5px 5px 5px 5px;
}

.tblNewClear {
  border: 3px;
  width: 35%;
}

.tblNewClear td { text-align: left; }
.tblNewClear td, th { border: 3px; }

#header { 
	background:			url('/pics/binary.gif') repeat #000 center fixed;
	text-align:			center;
	color:				#FFFF66;
	font-style:			italic;
	font-weight:		bold;
}

#footer {
	color:				#FFFF66;
	font-weight:		bold;
	text-align:			Center;
}

#Summary {
	font-family:		"Times New Roman", Times, serif;
	font-style:			italic;
	text-align:			Center;
}

#articleDesc {
	font-family:		Helvetica, Arial, Tahoma, Verdana, sans-serif;  /* Set default fonts */
	font-style:			normal;
	text-align:			Left;
}

#ArtistDashboard span 	{ color: #000000; }

#frontControl	      	{ text-align: center; }

.sidebarHome 					{ cursor: pointer; color: purple; }
.javaControlledIcon img:hover 	{ cursor: zoom-in; }
.SocialIcons 			        { width: 15%; vertical-align: middle; }
.powerLogos						{ width: 20%; }


/* Load Spinner ---------------------------------------- */
/* Old spinner
.spin-container {
  border:			 16px solid #f3f3f3;
  border-radius: 	 50%;
  border-top: 		 16px solid blue;
  border-bottom: 	 16px solid blue;
  width: 			 120px;
  height: 			 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: 		 spin 2s linear infinite;
  
  left: 			 50%;
  margin: 			 0 auto;
  overflow: 		 visible;
  position: 		 fixed;
  top: 				 50%;
  z-index: 			 9999;
}

@-webkit-keyframes spin {
  0%	{ -webkit-transform: rotate(0deg);   }
  100% 	{ -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0%	{ transform: rotate(0deg);   }
  100%	{ transform: rotate(360deg); }
}
*/


.spin-container {
  text-align: 			center;
  margin-top: 			100px;

  margin: 				0 auto;
  overflow: 			visible;
  position: 			fixed;
  left: 				40%;
  top: 					40%;
  z-index: 				9999;
}
.spin {
  border: 				3px solid #f5776e; /* #0D4B9F; */
  width: 				200px;
  height: 				200px;
  margin: 				0 auto;
  border-radius: 		50%;
  border-left-color: 	transparent;
  border-right-color: 	transparent;
  animation: 			rotate 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;
}
#spinner {
	/* Must be left blank for spinner to work */
}
#spinner2 {
  border: 				3px solid #ed2415;  /* #E0EDFF; */
  width: 				220px;
  height: 				220px;
  position: 			relative;
  top: 					-216px;
  border-left-color: 	transparent;
  border-right-color: 	transparent;
  animation: 			rotate2 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;
}
#spinner3 {
  border: 				3px solid #420b07;  /* #005CDC; */
  width: 				240px;
  height: 				240px;
  position: 			relative;
  top: 					-452px;
  border-left-color: 	transparent;
  border-right-color: 	transparent;
  animation: 			rotate 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;
}
#spinner4 {
  border: 				3px solid #f5e9e9;   /* #94B6E5; */
  width: 				260px;
  height: 				260px;
  position: 			relative;
  top: 					-708px;
  border-left-color: 	transparent;
  border-right-color: 	transparent;
  animation: 			rotate2 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;
}
@keyframes rotate {
  0% 	{ transform: rotateZ(-360deg); }
  100% 	{ transform: rotateZ(0deg);    }
}
@keyframes rotate2 {
  0%	{ transform: rotateZ(360deg); }
  100%	{ transform: rotateZ(0deg);   }
}

#spinner_text {
  color:				#581845; /*#922724;*/
  /* background-color: 	white; */
  animation: 			blinker 1s linear infinite;
  font-family:			Arial;
  font-size:			25px;
  position:				relative;
  top:					-857px;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}
/* ----------------------------------------------------- */


/* Images Content -------------------------------------- */
#bandLogo, #searchLogo, #secondPic img { 
	display:			block;
    margin-left:		auto;
    margin-right:		auto;
}
#secondPic p {
	margin-left:		auto;
    margin-right:		auto;
	text-align:			justify;
    text-justify:		inter-word;
}

#mediaMobile 		{ width: 0.25%; }

#searchLogo			{ width: 100%; }
#help-search-button { vertical-align: middle; }

.picThumb {
	cursor: pointer;
	width: 50%;
	padding: 5px 5px 5px 5px;
}


/* Sidebar Table Content ------------------------------- */
.sidebarDiv { text-align: left; }

/* Controls display of icons on side panels */
#SidebarDiv_Pt1 img, #SidebarDiv_Pt2 img, #SidebarDiv_Pt3 img, #sidebarHelp1 img { 
	border:				0;
	padding:			0;
	margin:				0;
}

#SidebarDiv_Pt1 img, #sidebarHelp1 img 	{ vertical-align: middle; }
#SidebarDiv_Pt1 a, #sidebarGenres1 a, #sidebarHelp1 a { cursor: pointer; }

#NationFlag, #NationFlagMobile { 
	display:			block;
	margin-left:		auto;
	margin-right:		auto;
}


/* Dashboard, Albums and Discog Table Content ----------------------------- */
.dashboardTable, .albumsTable, .discogTable {
	/* width:				65%;  /* UNSET to alow table to 'float' with text. */
	/* max-width:			90%; */
	border-collapse:	collapse;
	background-color:	none;
	border:				0.4375em #b3b3b3 outset;/* 7 pixels wide */
	padding:			0.0625em;			/* 1 pixels */
	overflow: 			auto;
	max-width:			99%;
	table-layout:		auto;
	background:			url('/pics/marble_blue.jpg') repeat #000 center fixed;
	word-wrap:			normal;
	margin:				0 auto;
	page-break-inside:  avoid;
}
.discogTable tr:hover {background-color: #ddd;}
.discogTable td, .discogTable th, .discogTable tr { 
    border:				0.1875em #CCC inset;	/* 3 pixels wide */
	padding:			0.3125em;				/* 5 pixels */
	text-align:			left;
}
.discogTable th  { background-color: black; }  /* 3 pixels wide */
.discogTable #D3 { background-color: black; color: #D3D3D3; text-align: left;   }
.discogTable #A0 { background-color: black; color: #A0A0A0; text-align: center; }

.dashboardTable, .albumsTable { display: inline-block; }
.dashboardTable td, .albumsTable td {
	color:				#000000;
	border:				0.1875em #CCC inset;	/* 3 pixels wide */
	padding:			0.3125em;				/* 5 pixels */
	text-align:			Left;
	overflow: 			auto;
}

.dashboardtable { page-break-inside: avoid;  }

.certifications {
	background-color:	none;
	border: 			none;
	vertical-align:		Top;
	overflow: 			auto;
	max-width:			99%;
	table-layout:		auto;
	word-wrap:			normal;
	margin:				0 auto;
	page-break-inside:  avoid;
}

.certifications td, .certifications tr, .certifications th { text-align: center; border-style: hidden; }



/* See Also Table -------------------------------------- */
.seeAlsoTable {
 	background-color:	none;
	vertical-align:		Top;	
	text-align:			left;
	word-wrap:			break-word;	
	border:				0em none none;	/* 0 pixels */
	border-spacing:		0.3125em;		/* 5 pixels */
	border-collapse:	separate;
	display:			inline-block;
	page-break-inside:  avoid;
}
.seeAlsoTable td { padding-right: 5px; }

#SeeAlsoTable table, #SeeAlsoTable tr, #SeeAlsoTable th, #SeeAlsoTable td   { border-style: hidden; }


/* Search Listings Table, error table, and ErrorHandler --------------- */
.searchListTable, .helpTableCLS, .errorTable {	
	background-color:	none;
	text-align: 		left;
	word-wrap: 			break-word;
	border-spacing:		0.188em;		/* 3 pixels */
	border-collapse:	collapse;
	padding:			5px;
	table-layout:		fixed;
	width:				90%;
	border:				0em none none;	/* 0 pixels wide */
	margin:				0 auto;
}
.searchListTable th, .helpTableCLS th, .errorTable th { 
	background-color: 	black;
	border: 			0 solid #000;
	padding: 			0;
	color: 				white;
}
/* .searchListTable tr:nth-child(even){background-color: #f2f2f2;} */
.searchListTable tr:hover {background-color: #ddd;}
.searchListTable td, .helpTableCLS td { padding: 0; }

.flash_info		{ color: blue;   }
.flash_success	{ color: green;  }
.flash_alert	{ color: red;    }
.flash_warn		{ color: orange; }


/* Picture Overlays ----------------------------------------- */
#pictureOverlay {
	/* Define Menu overlay parameters */
	/* See mobileMenuOverlay for alternate way */
	display:			none;
    position:			fixed;    
    width:				100%;
    height:				100%;
    top:				0;
    left:				0;
	bottom:				0;
	right:				0;
	background-color:	rgb(255,255,255);			/* Solid White fallback color for older systems */
	/* background-color:	rgba(235, 235, 235, 0.9);	/* Opaque White background */
	background-color:	rgba(170, 170, 170, 0.9);	/* Opaque Gray background - closer to 0 the darker it is */
    z-index:			1;
    cursor:				zoom-out;
	overflow:			hidden;
}

#pictureOverlay img {
	/* Define parameters for the picture image */
	max-height:			95%;
	max-width:			95%;
	position:			fixed;
    top:				50%;
    left:				50%;
    transform:			translate(-50%, -50%);		/* Center on middle of picture */
}

#pictureOverlayText {
	/* Define overlay text and box parameters */
	position:			absolute;
	border:				1px solid yellow;
	background:			#000000;
	color:				#D3D3D3;
	padding:			0.5px;
    box-shadow:			3px 3px 0px gray;
	margin-top:		    96%;					/* Position 97% of the way down the screen */
	bottom:				3px;					/* Allow 3 pixels from bottom */
	text-align:			center;					/* Center text/links */	
	width:				70%;					/* Make box 70% wide of screen */
	left:				15%;					/* Push in from left 15% of screen to center box (15% remaining is automatically on right) */
}


/* Mobile Menu Overlays ------------------------------------- */
#mobileMenuOverlay {
	/* Define Menu overlay parameters */
	/* Add: display: none; if you want image to appear without scrolling */
	position:			fixed;						/* Stay in place */
	height:				0;							/* Reverse these two if you want overlay to explode left to right. Set both to 100% to appear without scrolling. */
	width:				100%;
	background-color:	rgb(255,255,255);			/* Solid White fallback color for older systems */
	/* background-color:	rgba(235, 235, 235, 0.9);	/* Opaque White background */
	background-color:	rgba(170, 170, 170, 0.9);	/* Opaque Gray background - closer to 0 the darker it is */
	z-index:			1;							/* Sit on top */
	left:				0;
	top:				0;
	overflow:			scroll;
	cursor:				pointer;
	transition:			0.5s;						/* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

.mobileMenuText {
	/* Define mobile menu text parameters */
	position:			relative;
	margin-top:			30px;		/* 30px top margin to avoid conflict with the close button on smaller screens */
	top:				0;			/* Place on absolute top plus margin size */
	width:				100%;		/* 100% width */
	text-align:			center;		/* Centered text/links */	
}

.mobileMenuText img {
  /* Fix size of picture so all are the same (for vertical stacking) */
  width:				45px;
  height:				45px;
  vertical-align:		middle;		/* Make text appear aligned with pictures vertical middle */
}

.overlayMenuTable {
	/* Defne overlay menu container (table) parameters */
	/* If text scrolls or pics squeeze then widen width */
	width:				50%;
	margin:				auto;  /* Forces centering */
	border:				0;
}
.overlayMenuTable td { text-align: left; }  /* Set default - override with local text-align within <TD> */

.mobileNav {
  /* Mobile Nav Menu paramters. Mobile Nav appears on the top of screen when screen is a small mobile */
  overflow:				hidden;
  background-color:		#333;
  width:				100%;
}
.mobileNav img { vertical-align: middle; }
.mobileNav #hamburger {
  right:				0;
  top:					0;
  float:				right;
  width:				30px;
  height:				30px;
  cursor:				pointer;
}

#SidebarAd 	  { width: 95% !important; height: auto; }
#PageBottomAd { width: 90% !important; height: auto; }

#NationFlagMobile img { 
    display:      		block;
    margin-left:  		auto;
    margin-right: 		auto;
	width:				15%;
}

#backButtonJava, #prevButtonJava, .mobileNav a {
  float:				left;
  display:				block;
  color:				#f2f2f2;
  text-align:			center;
  padding:				5px 5px;
  font-size:			16px;
  cursor:				pointer;
}

#displayMore 	{ display: none; }
#seeMoreSwitch  { cursor: pointer; color: blue; }

.c-buttons {
	margin:				0 auto;	/* Auto center */
    text-align:			center;
	max-width:			20%;	/* Adjusted as needed on smaller screen sizes */
}

.c-buttons-front {
	margin:				0 auto;	/* Auto center */
	text-align:			center;
	max-width:			15%;	/* Adjusted as needed on smaller screen sizes */
}

.c-buttons-list {
	margin:				0 auto;	/* Auto center */
	text-align:			center;
	max-width:			15%;	/* Adjusted as needed on smaller screen sizes */
}

.c-buttons-discog {
	margin:				0 auto;	/* Auto center */
	text-align:			center;
	max-width:			15%;	/* Adjusted as needed on smaller screen sizes */
}


/* Modifications - add/change these commands based on receivers screen size ------------ */

@media screen and (min-width: 800px) {
	/* Change back to 800 but need to adjust buttons */ 
  .HR_Mobile				 { display: none; }	/* Note: also displays/shuts off certain menu options as well a HR */
  .mobileButton, .mobileButt { display: none; } /* mobileButt only identifies this button in RESULTS.PHP & SEARCH.HTML while mobileButton is used in rest because of conflict with c-buttons class. */

  #bigVideoPic  		{ display: none; } /* Must be OFF for all screens higher than 800px */
  #myMobileNav 			{ display: none; }
  #bandPicMobile		{ display: none; }
  #mobileMenuOverlay	{ display: none; }
  #NationFlagMobile		{ display: none; }
  #Small_Menu 			{ display: none; }
  #SocialMediaMobile	{ display: none; } 
  #searchPageNavImageMobile { display: none; }
}

/*--- Universal Large Screen Defaults  - Every resolution higher than this --- */



/* --- Large screens & TVs --- */
@media only screen and (min-width: 1824px) { 
	.sidebarTable		 { font-size: 90%;  }
	.mainTableBackground { width: 82%;      } /* .mainTableBackground width must be defined and other table elements will self-calculate. Font covers anything not specifically covered else if added (font-size: 110%;) */
	.searchListTable	 { font-size: 110%; }
	.searchField  		 { width: 40%; 	    }

	.dashboardTableTDTH img { width: 30%; height: auto; }
	p.introduction:first-letter { 
	    font-size:		320%;
		line-height:	1em; /* For IE */
		padding-right:	0.15em;		
	}
	
	.spin-container {
        left: 	35%;
        top:	40%;
    }

	#SidebarDiv_Pt1 img { width: 15%;		}
	#SidebarDiv_Pt2 img { width: 50%;		}
	#SidebarDiv_Pt3	img	{ width: 35%;		}
	#sidebarHelp1 img	{ width: 15%;		}
	#eBay1				{ width: 45%;       }
	#frontControl img 	{ width: 19%;    	}
	#bandLogo			{ max-width: 70%;   } 
	#bandPic			{ width: 95%; 		}
	#endLenPad 			{ width: 10%;		}
	#helpBigScreen 		{ max-width: 15%;   }   /* Should be the same as .c-buttons-discog - differenc is - not displayed on mobiles */
	#spacead			{ font-size: 120%; 	}
	#help-search-button { width: 6%;		}
	#secondIMG, #secondPic p { width: 30%;	}
	#searchPageNavImageBigScreen { width: 15%; }
	#articleDesc, #Summary { font-size: 110%;  }  /* Summary and main article text */
}

/* --- Computers and laptops --- */
@media only screen and (max-width: 1824px) {
	.sidebarTable		 { font-size: 90%;  }
	.mainTableBackground { width: 80%;      } /* .mainTableBackground width must be defined and other table elements will self-calculate. Font covers anything not specifically covered else if added (font-size: 110%; ) */
	.searchListTable 	 { font-size: 100%; }
	.searchField  		 { width: 40%; 	    }
	.tblNewClear         { width: 60%;      }
	.c-buttons-discog    { max-width: 20%;  }

	.dashboardTableTDTH img { width: 30%; height: auto; }
	p.introduction:first-letter { 
	    font-size:		320%;
		line-height:	1em; /* For IE */
		padding-right:	0.15em;
	}
	
	.spin-container {
        left: 	30%;
        top:	40%;
    }

	#SidebarDiv_Pt1 img { width: 15%;		}
	#SidebarDiv_Pt2 img { width: 60%;		}
	#SidebarDiv_Pt3	img	{ width: 40%;		}
	#sidebarHelp1 img	{ width: 15%;		}
	#eBay1				{ width: 50%;		}
	#bandLogo			{ max-width: 60%;   } 
	#bandPic			{ width: 95%; 		}
	#frontControl img 	{ width: 12%;		}
	#endLenPad 			{ width: 15%;		}
	#helpBigScreen   	{ max-width: 20%;   }    /* Should be the same as .c-buttons-discog - differenc is - not displayed on mobiles */
	#spacead			{ font-size: 50%;	}
	#help-search-button { width: 7%;		}
	#secondIMG, #secondPic p { width: 40%;	}
	#searchPageNavImageBigScreen { width: 20%; }
	#articleDesc, #Summary { font-size: 110%;  }  /* Summary and main article text */
}

@media only screen and (max-width: 1200px) {
	.sidebarTable		 { font-size: 90%;   }
	.mainTableBackground { width: 75%;       } /* .mainTableBackground width must be defined and other table elements will self-calculate. Font covers anything not specifically covered else if added (font-size: 110%;) */
	.searchListTable	 { font-size: 100%;  }
	.c-buttons           { max-width: 30%;   }
	.c-buttons-front 	 { max-width: 30%;   }
	.c-buttons-list		 { max-width: 20%;   }
	.searchField  		 { width: 50%; 	     }
	.picThumb			 { width: 75%;       }
	.tblNewClear         { width: 60%;       }
	.c-buttons-discog    { max-width: 30%;   }

	.dashboardTableTDTH img { width: 40%; height: auto; }
	p.introduction:first-letter { 
	    font-size:		300%;
		line-height:	1em; /* For IE */
		padding-right:	0.15em;
	}
	
	.spin-container {
        left: 			25%;
        top: 			40%;
    }

	#SidebarDiv_Pt1 img { width: 19%;	   }
	#SidebarDiv_Pt2 img { width: 60%;  	   }
	#SidebarDiv_Pt3	img	{ width: 40%; 	   }
	#sidebarHelp1 img	{ width: 19%;      }
	#bandLogo			{ max-width: 80%;  } 
	#bandPic			{ width: 95%; 	   }
	#eBay1				{ width: 55%;	   }
	#frontControl img 	{ width: 15%;      }
	#endLenPad 			{ width: 25%;      }
	#helpBigScreen		{ max-width: 30%;  }  /* Should be the same as .c-buttons-discog - differenc is - not displayed on mobiles */
	#help-search-button { width: 10%;      }
	#secondIMG, #secondPic p { width: 40%; }
	#searchPageNavImageBigScreen { width: 25%; }
	#articleDesc, #Summary { font-size: 110%;  }  /* Summary and main article text */
}


/*--- Small Screens (Tablets and phones) ------ */
@media only screen and (max-width: 800px) {
  /* Change back to 800 but need to adjust buttons */ 
  .mainTable 			{ margin: 0.5% 0.5% 0.5% 0.5%; width: 99%; height: 99%; } /* margin: top right bottom left */
  .allSidebar			{ display:	 none;	}
  .mainTableBackground  { width:	 100%;  } /* .mainTableBackground width must be defined and other table elements will self-calculate. Font covers anything not specifically covered else if added (font-size: 80%;) */
  .searchListTable 		{ font-size: 70%; 	}
  .searchField  		{ width:	 60%;	}
  .seeAlsoTable			{ margin-left: 30%; font-size: 100%; }
  .c-buttons, .c-buttons-front { max-width: 30%;   }
  .c-buttons-list 		{ max-width: 30%; }
  .mobileButton			{ max-width: 30%; }
  .picThumb				{ width: 95%;     }
  .tblNewClear          { width: 70%;     }
  .c-buttons-discog     { max-width: 30%; }
  .SocialIcons 			{ width: 10%; 	  }

  p.introduction::first-letter {
    float:			left;
    font-weight:	bold;
    font-family: 	Times New Roman;
    color: 			#000000;
    font-size: 		55px;
    line-height: 	35px;
    padding-top: 	5px;
    padding-bottom: 3px;
    padding-right: 	3px;
    padding-left: 	3px;
    margin-right: 	3px;
    margin-bottom: 	-3px;
  }
  
  .spin-container {
    left:			20%;
    top: 			30%;
  }
  
  #eBay1    			{ display: none;  }
  #helpBigScreen		{ display: none;  }  /* Only used here - only found in the ALBUMS & DISCOGRAPHY applications */
  #musicNote			{ display: none;  }  /* Only used here - only found in the ALBUMS & DISCOGRAPHY applications */
  #bandPicMobile		{ display: block; margin: 0 auto; text-align: center; max-width: 70%; }
  #bandPicMobile img	{ max-width: 80%; overflow: clip; }
  #mobileMenuLogo		{ display: block; margin-left: auto; margin-right: auto; height: 200px; width: 200px; }
  #bandLogo			    { max-width: 70%;  }  
  #mobileVideoPic 		{ display: none;   }
  #bigVideoPic 		    { width: 25%;      }
  #frontControl img 	{ width: 35%;      }
  #helpTable table, #helpTable tr, #helpTable th, #helpTable td 			  { display: block; }
  #genreTable table, #genreTable tr, #genreTable th, #genreTable td 		  { display: block; }
  #SeeAlsoTable table, #SeeAlsoTable tr, #SeeAlsoTable th, #SeeAlsoTable td   { display: block; }
  #endLenPad 			{ width: 25%;	   }
  #help-search-button   { width: 20%;	   }
  #secondIMG, #secondPic p { width: 70%;   }
  #Large_Menu			{ display: none;   }
  #searchPageNavImageMobile 	{ width: 45%;    }
  #searchPageNavImageBigScreen  { display: none; }
  #articleDesc, #Summary { font-size: 90%; }  /* Summary and main article text */
  #newsTable table, #newsTable tr, #newsTable th, #newsTable td	  { display: block; }
  #newsItems { word-break: break-word; word-wrap: break-word; }
  #scrollDescription { height: 550px; overflow-y: scroll; scrollbar-width: thin; } /* Left for possible future expansion */
}

@media only screen and (max-width: 600px) { 
  .mainTable 			{ margin: 0.5% 0.5% 0.5% 0.5%; width: 99%; height: 99%; } /* margin: top right bottom left */
  .allSidebar			{ display:	 none;	}
  .mainTableBackground  { width:	 100%;  } /* .mainTableBackground width must be defined and other table elements will self-calculate. Font covers anything not specifically covered else if added (font-size: 80%;) */
  .searchListTable 		{ font-size: 80%; 	}
  .searchField  		{ width: 	 80%; 	}
  .seeAlsoTable			{ margin-left: 30%; font-size: 100%; }
  .c-buttons, .c-buttons-front { max-width: 40%; }
  .c-buttons-list 		{ max-width: 40%; }
  .mobileButton			{ max-width: 40%; }
  .tblNewClear          { width: 80%;     }
  .c-buttons-discog     { max-width: 40%; }
   
  .certifications td, .certifications tr, .certifications th { display: block; }
  
  .discogAwardPic {
   height:	30px;  /* .05% */
   width:	30px;
  } 
  
  .discogTable { border: 0.290em #CCC inset; } 	/* 3 pixels wide */
  .discogTable td, .discogTable th, .discogTable tr { padding: 0.190em; }	/* 5 pixels */
  .discogTable td, .discogTable tr { overflow: auto; border: 1px solid black; }
  .discogTable .discTblBig { display: none; }
  td.colMerge   { display: block; border-style: hidden; }
  th.DMHeaderSmall   { color: white;   }
  th.DMHeaderSmallA0 { color: #A0A0A0; }

  .spin-container {
   left: 	25%;
   top:		30%;
  }

  p.introduction::first-letter {
    float:			left;
    font-weight:	bold;
    font-family: 	Times New Roman;
    color: 			#000000;
    font-size: 		55px;
    line-height: 	35px;
    padding-top: 	5px;
    padding-bottom: 3px;
    padding-right: 	3px;
    padding-left: 	3px;
    margin-right: 	3px;
    margin-bottom: 	-3px;
  }

  #eBay1    			{ display: none;  }
  #helpBigScreen		{ display: none;  }  /* Only used here - only found in the ALBUMS & DISCOGRAPHY applications */
  #musicNote			{ display: none;  }  /* Only used here - only found in the ALBUMS & DISCOGRAPHY applications */
  #bandPicMobile		{ display: block; margin: 0 auto; text-align: center; max-width: 70%; }
  #bandPicMobile img	{ max-width: 100%; overflow: clip; }
  #mobileMenuLogo		{ display: block; margin-left: auto; margin-right: auto; height: 200px; width: 200px; }
  #bandLogo			    { max-width: 70%;  }  
  #mobileVideoPic 		{ display: none;   }
  #bigVideoPic  		{ width: 30%;      }
  #frontControl img 	{ width: 35%;      }
  #helpTable table, #helpTable tr, #helpTable th, #helpTable td 			  { display: block; }
  #genreTable table, #genreTable tr, #genreTable th, #genreTable td 		  { display: block; }
  #SeeAlsoTable table, #SeeAlsoTable tr, #SeeAlsoTable th, #SeeAlsoTable td   { display: block; }
  #endLenPad 			{ width: 25%;	   }
  #help-search-button   { width: 15%;	   }
  #secondIMG, #secondPic p { width: 70%;   }
  #Large_Menu			{ display: none;   }
  #searchPageNavImageMobile 	{ width: 45%;    }
  #searchPageNavImageBigScreen  { display: none; }
  #articleDesc, #Summary { font-size: 100%; }  /* Summary and main article text */
  #newsTable table, #newsTable tr, #newsTable th, #newsTable td	  { display: block; }
  #newsItems { word-break: break-word; word-wrap: break-word; }
  #scrollDescription { height: 550px; overflow-y: scroll; scrollbar-width: thin; } /* Left for possible future expansion */
}

/* Adjustments to Discog table for very small screens - Normally matches '@media only screen and (max-width: ) above' */
@media screen and (min-width: 600px) {
 .discogAwardPic {
   height:			40px;
   width:			40px;
 } 
 .discogTable { display: inline-block; }
 .discogTable .discTblMobile { display: none; }
 th.DMHeaderBig   { color: white;   }
 th.DMHeaderBigA0 { color: #A0A0A0; }
 
 .spin-container {
   left: 	30%;
   top:		40%;
 }
}

@media only screen and (max-width: 400px) {
  .c-buttons, .c-buttons-front { max-width: 45%; }
  .c-buttons-list 		{ max-width: 45%; }
  .mobileButton			{ max-width: 45%; }
  .c-buttons-discog     { max-width: 45%; }
  
  .spin-container {
   left: 	20%;
   top:		30%;
  }
}

@media print {
   body {
      color: #000;
      background: #fff;
   }
   
   @page { size: 5.5in 8.5in; }
}

@media (prefers-reduced-motion:reduce){
	:root{
        scroll-behavior:smooth;
		animation: none;
    }
}

/* Additional code notes found in Diskery_CSS_Notes.css */
</style>