/* ********************************************************************
* file: mynetradio/html/css/media.css
* Last Update: 15 Apr 2026 at 20:30 PDT
*
* css style sheet for media-database.php, video-database.php, mycastle.php
* attempts to be responsive to browser window width, not tested with phone
********************************************************************* */
/* All elements are to use border-box model per w3schools. It standardizes
 * what's included in measurements for margins, padding, borders, etc.
 * This model is used by the Firefox web development tools. */
* { box-sizing: border-box; }

/* Sans-serif font styles preferred for all elements. Easier to read.
 * Use relative font-size (vw) to allow browser to scale fonts depending
 * on the width of the browser window. Use fixed font-size (px) to keep
 * text size the same regardless of window width. Each has it's pros
 * and cons especially with problematic, narrow-display on phones!  */

/* Styling the html element gets inherited by everything unless
 * over-ridden by class, in-line or generic styles. html styles become
 * the entire site defaults.
 * Example: font-family: Arial, Helvetica, sans-serif;
 * defined only in html - inherited everywhere else unless a special
 * font needed via a class or in-line style */
html {
background-color: black;
color: white;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 16px;
margin: 0px;
padding: 0px;
}
/* body solid black background and text inherited from html */
body {
background-color: black;
margin: 0px;
padding: 10px;
}

/* sections of all pages inherit body and html defaults */
section {
padding: 0px;
}

/* header has it's own background, h1, h2 and minimal margins, padding */
header {
	background-color: black;
	background-size: cover;
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 0px;
}

/* BEGIN HEADER CLASS *********************************************** */
@media screen and (min-width: 641px) {  /* Note curly brace! */
/* h1 class="header" used for main title in <header> at top of home page
* variable width font so h1 scales with window width */
div.header {
position: relative;
}

h1.header {
font-family: Impact, Helvetica, sans-serif;
font-weight: normal;
font-size: 6vw;
color: cyan;
text-align: left;
text-shadow: -3px 0 black, 0 3px black, 3px 0 black, 0 -3px black;
padding: 0;
padding-left: 5%;
padding-top: 3%;
margin-top: 5px;
margin-bottom: 5px;
}

/* h2 class="header" used for sub-titles in <header> at top of home page
* variable width font so h1 scales with window width */
h2.header {
font-family:"Comic Sans MS";
font-weight: normal;
font-size: 3.5vw;
color: sandybrown;
text-align: left;
text-shadow: -3px 0 black, 0 3px black, 3px 0 black, 0 -3px black;
padding: 0;
margin: 0;
position: absolute;
bottom: 10px;
left: 5%;
}

/* p class="variable" used to scale text relative to surroundings  */
p.variable {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.6vw;
font-weight: normal;
color: cyan;
text-align: left;
}

/* figcaption class="variable" used to scale text along with image  */
figcaption.variable {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.6vw;
font-weight: normal;
color: cyan;
text-align: center;
}
} /* END @media screen and (min-width: 641px) {  /* Note curly brace! */
/* END HEADER CLASS *********************************************** */

/* navigation section inherits body background with
default medium size white text */
nav {
height: auto;
}

/* footer inherits body background with default
medium size centered yellow text */
footer {
color: white;
font-size: 16px;
text-align: center;
clear: both;
padding: 5px;
}


.collapse {
display: none !important;
}

/* hide a div - browser won't display it */
div.hide {
display: none !important;
}

/* display a div */
div.expand {
display: block;
}

/* div simulating a blockquote with STYLE! */
div.quote {
color: white;
margin-left: 25px;
font-style: italic;
}

.preformatted {
font-family: monospace;
white-space: pre;
}


/* h1 used for main title in <header> at top of each page */
h1 {
font-size: 3.0vw; /* scales with browser window width looks best */
color: sandybrown; /* changed from yellow, easier on eyes in darker room */
text-align: center;
margin: 0px;
padding: 0px;
}

/* h2 used primarily for sub-titles in <header> at top of each page */
h2 {
font-size: 3vw; /* also scales with browser window width */
color: dodgerblue;
text-align: left; /* use in-line for text-align: center; */
padding: 0px;
margin: 0px;
}

/* h3 left justified section titles and headings */
h3.default {
font-size: 25px;
color: lime;
text-align: left;
}

/* h3 class="underline" for underlined section titles and headings */
h3.underline {
text-decoration: underline;
}

/* h4 centered section titles and headings */
h4 {
font-size: 25px;
color: sandybrown;  /* changed from yellow, less bright jf 1/28/25 */
text-align: center;
}

/* h5 footer last update at bottom of page */
h5 {
font-size: 16px;
color: sandybrown; /* changed from yellow, less bright jf 1/28/25 */
text-align: center;
font-weight: normal;
}

/* h6 Special emphasis */
h6 {
font-size: 25px;
color: fuchsia; /* Very bright eye catching - use sparingly */
text-align: left;
}

/* p is the most commonly used text paragraph
20px, white, left-justified, normal weight */
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: normal;
color: white;
text-align: left;
}

/* ===================================================================== */
/* bullet list intro and ending text (eg not the actual
bullet list entries - they are specified by the li style */
ul {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: normal;
color: white;
text-align: left;
}

/* bullet list item
medium size, do not specify color here, let it default
to be inherited from the ul or ol style.  If a specific
list needs a different color or the bullet entries or
other style attributes, use an li class. */
li {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
text-align: left;
padding-bottom: 2px;
margin: 0px;
}

span.ajaxresponse {
margin: 0px;
padding: 0px;
color: lime;
font-size: 15px;
}

.row:after {
content: "";
clear: both;
display: block;
}

/* For large screens use 12-column grid as described by w3schools */
[class*="col-"] {
float: left;
padding: 10px;
}

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
	/* For mobile phones use one column spanning
	entire width of the display as per w3schools */
	[class*="col-"] {
	width: 100%;
	}
}

/* Center text class */
.centered { text-align: center; }

/* ================================================================ */
/* color-links class to over-ride other styles and highlight links
similiar to the old body alinks, vlinks, etc. which are deprecated.
Usage examples: <p class="color-links">  <ul class="color-links>
Link styles must be in the order shown in () to be effective */
/* (1) unvisited link */
.color-links a:link {
	background-color: black;
	color: lime;
}

/* (2) visited link */
.color-links a:visited {
	background-color: black;
	color: lime;
}
/* (3) mouse over link */
.color-links a:hover {
	background-color: lime;
	color: black;
}
/* (4) selected link */
.color-links a:active {
	background-color: black;
	color: yellow;
}

/* Navigation Menu Styles *************************************
* Following styles taken from w3schools example to produce
*horizontal menu with sliding blocks.  The number of menu items
*per row varies depending on the width of the browser window. */
ul.menu {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
}

li.menu {
float: left;
margin: 0px;
margin-right: 5px;
padding: 0px;
}

li.rightmenu {
float: right;
margin: 0px;
margin-left: 5px;
padding: 0px;
}

.menu a {
display: block;
width: auto;
height: auto;
font-size: 15px;
font-weight: bold;
text-align: center;
margin-top: 5px;
padding: 5px;
text-decoration: none;
border-style: solid;
border-width: 2px;
border-color: DodgerBlue;
border-radius: 10px;
}

.menu a:link {
background-color: black;
color: Yellow;
}

.menu a:visited {
background-color: black;
color: Yellow;
}

.menu a:hover {
background-color: blue;
color: white;
}

.menu a:active {
background-color: black;
color: fuchsia;
}
/* End of Navigation Menu Styles ================================= */


ul.menusmall {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
}

li.menusmall {
float: left;
margin: 0px;
margin-right: 2px;
padding: 0px;
}

.menusmall a {
display: block;
width: auto;
height: auto;
font-size: 13px;
font-weight: bold;
text-align: center;
margin-top: 2px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
border-style: solid;
border-width: 1px;
border-color: DodgerBlue;
border-radius: 10px;
}

.menusmall a:link {
background-color: black;
color: sandybrown;
}

.menusmall a:visited {
background-color: black;
color: sandybrown;
}

.menusmall a:hover {
background-color: blue;
color: white;
}

.menusmall a:active {
background-color: black;
color: fuchsia;
}
/* ======================================= */
a.menured {
display: block;
width: auto;
height: auto;
font-size: 15px;
font-weight: bold;
text-align: center;
margin-top: 5px;
padding: 5px;
text-decoration: none;
border-style: solid;
border-width: 2px;
border-color: red;
border-radius: 10px;
}

.menured a:link {
background-color: black;
color: red;
}

.menured a:visited {
background-color: black;
color: red;
}

.menured a:hover {
background-color: blue;
color: white;
}

.menured a:active {
background-color: black;
color: fuchsia;
}
/* End of ADMIN Red Navigation Menu Styles ================================= */



/* w3schools Responsive Image Gallery
Replaces outdated image gallery created in 2015 - much simpler and better!
Four columns of pictures on large wide displays (desktop, laptop)
Two columns on medium width displays (tablet) max-width <=1025 px
Single column on narrow width displays (phone) max-width <=640px
No thumbnail images required and no htm file per picture needed! */
.rowz {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
}

/* Responsive layout - makes a four column layout ******************** */
@media screen and (min-width: 961px) {
.column {
	flex: 25%;
	padding: 0 10px;
	}
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (min-width: 641px) {
 column {
	flex: 50%;
	padding: 0px 10px;
	}
}

/* Responsive layout - makes one long linear column for phone */
@media screen and (max-width: 640px) {
.column {
	flex: 100%;
	padding: 5px 5px;
	}
}

/* Responsive layout - all screen widths ****************************** */
.column img {
 vertical-align: middle;
 padding: 0px;
 max-width: 100%;
 }

.column figure {
display: block;
border: none;
margin-left: auto;
margin-top: 10px;
margin-right: auto;
margin-bottom: 0px;
padding: 0px;
width: 100%;
border-style: solid;
border-width: 2px;
border-color: black;
}

.column figure:hover { border-color: yellow; }

.column figcaption {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: normal;
color: lime;
background-color: black;
text-align: center;
width: 100%;
}

/* default figure caption using centered lime text */
figcaption {
background-color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
color: lime;
text-align: center;
}

figcaption.full { font-size: 20px; }

figcaption.right35, figcaption.right40,
figcaption.left35, figcaption.left40 { font-size: 16px; }

figcaption.right45, figcaption.right50,
figcaption.left45, figcaption.left50 { font-size: 20px; }

/* default figure style */
figure {
border: none;
margin-left: 10px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 10px;
padding: 0px;
}

figure.header {
margin: 0px;
padding-right: 10px;
}

figure.right20 {
float: right;
width: 20%;
}

figure.left20 {
float: left;
width: 20%;
}

figure.right25 {
float: right;
width: 25%;
}

figure.left25 {
float: left;
width: 25%;
}
figure.right30 {
float: right;
width: 30%;
}

figure.left30 {
float: left;
width: 30%;
}

figure.right35 {
float: right;
width: 35%;
}

figure.left35 {
float: left;
width: 35%;
}

figure.right40 {
float: right;
width: 40%;
}

figure.left40 {
float: left;
width: 40%;
}

figure.right45 {
float: right;
width: 45%;
}

figure.left45 {
float: left;
width: 45%;
}

/* slightly less than 50% to have two figures side-by-side */
figure.right50 {
float: right;
width: 48.8%;
}

/* slightly less than 50% to have two figures side-by-side */
figure.left50 {
float: left;
width: 48.8%;
}

/* Center image class */
.centerimg {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}

/* full size image class */
.fullsizeimg {
display: block;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
max-width: 100%;
max-height: 100%;
padding: 4px;
background-color: black;
border-style: solid;
border-width: 1px;
border-color: yellow;
}

/* Class for fullsizeview section photo current of total filled in by javascript */
span.photonum {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: normal;
color: lime;
margin-left: 10px;
margin-right: 10px;
background-color: black;
}

/* End of Responsive Image Gallery Styles */


div.table {
width: 100%;
}

li { margin-bottom: 10px; }

li.compact {
 margin-bottom: 0px;
 margin-top: 0px;
}




.left {
	float: left;
	margin-right: 10px;
}

.right {
	float: right;
	margin-left: 10px;
}

.wide25 {
	width: 25%;
}





/* *********************************************************************
 * STYLING FOR DESKTOP/LAPTOP SCREENS min-width 641 px                 *
 *********************************************************************** */
@media screen and (min-width: 641px) {
div.musicvid {
display: none;
position: fixed;
top: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
background-color: black;
}

figure.musicvid {
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
padding: 0px;
}

video.musicvid {
	display: block;
	margin: 0 auto;
	max-height: 50vh; /* 50% of viewport height */
	max-width: 50vw;  /* 50% of viewport width */
	width: auto;
	height: auto;
	object-fit: contain;
	border: 2px solid lime;
}

.musicvid.fullscreen video {
	max-width: 100vw;
	max-height: 100vh;
}


/* figure caption centered belowvideo */
figcaption.musicvid {
color: lime;
font-size: 17px;
font-weight: normal;
text-align: center;
display: block;
margin: 0px;
padding: 0px;
}

form.query-form {
	display: grid;
	grid-template-columns: max-content auto;
	gap: 7px 10px;
	margin: 1px auto;
	padding:0px;
	background-color: #111;
	border: 1px solid #444;
	color: #eee;
}


query-clear {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 10px 15px;
	max-width: 100px;
	margin: 20px auto;
	padding: 10px;
	background-color: #111;
	border: none;
	color: #eee;
}


h3.query-title {
	grid-column: 1 / -1;
	text-align: center;
	margin: 0px;
	padding: 0px;
	color: sandybrown;
	font-size: 20px;
}

.form-row {
	display: contents; /* keeps label/input aligned with grid */
}

/* Align all labels in right column */
.form-row label {
	text-align: right;
	padding-right: 5px;
	align-self: center;
}

/* Make text fields expand to fill column */
.form-row input[type="text"] {
	width: 100%;
}

/* Highlight field when mouse hovers */
.form-row input[type="text"]:hover {
	background-color: blue;
	color: white;
}

/* Wrap radio/checkbox groups in a flex container inside the 2nd grid column */
.radio-group,
.checkbox-group {
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

/* Each radio or checkbox label aligns nicely */
.radio-group label,
.checkbox-group label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}

/* Button row spans the whole form */
.form-row.buttons {
	grid-column: 2 / -1;
	display: flex;
	gap: 10px;
	justify-content: flex-start;
	align-items: center;
}

.query-message {
	margin-left: 10px;
	font-size: 0.9em;
	color: #aaa;
}

	div.media {
	display: none;
	width: 99%;
	top: 0px;
	margin: 0px;
	padding: 0px;
	background-color: black;
	border-style: none;
	}

	video.media {
	width: 90%;
	margin-left: auto; /* combined with margin-right centers video */
	margin-right: auto; /* combined with margin-left centers video */
	border-style: solid;
	border-width: 1px;
	border-color: lime;
	padding: 0px;
	}

	figcaption.media {
	color: sandybrown;
	text-align: center;
	font-size: 20px;
	}

	img.media {
		width: 100%;
		padding: 2px;
		margin-left: auto;
		margin-right:auto;
		border-style: solid;
		border-width: 2px;
		border-color: lime;
		cursor: pointer; /* 👈 This makes it look clickable */
	}

	img.media:hover {
		border-color: yellow;
		border-width: 2px;
	}

	span.media,
	a.media,
	p.media {
	font-size: 17px;
	color: white;
	padding: 5px;
	margin-bottom: 5px;
	}

	button.media,
	input[type=button].media {
	position: absolute;
	top: 10px;
	right: 20px;
	text-align: center;
	font-size: 18px;
	font-weight: normal;
	color: white;
	background-color: blue;
	width: fit-content;
	padding-left: 15px;
	padding-right: 15px;
	margin: 2px;
	border-style: solid;
	border-width: 2px;
	border-color: sandybrown;
	border-radius: 20px;
	}

.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.history-table td {
	font-size: 14px;
	padding: 4px;
	border-style: solid;
	border-width: 1px;
	border-color: sandybrown;
}

.history-table th {
	color: sandybrown;
	font-size: 16px;
}

div.search-music-form {
display: block;
width: 60%;
float: right;
margin: 0px;
margin-top:210px;
padding: 2px;
background-color: black;
}

div.search-music-video-form {
display: block;
width: 60%;
float: right;
margin: 0px;
margin-top:210px;
padding: 2px;
background-color: black;
}

div.search-photo-form {
display: block;
width: 60%;
float: right;
margin: 0px;
margin-top:210px;
padding: 2px;
background-color: black;
}

div.search-pornstar-form {
display: block;
width: 60%;
float: right;
margin: 0px;
margin-top:210px;
padding: 2px;
background-color: black;
}

div.search-xvideo-form {
display: block;
width: 60%;
float: right;
margin: 0px;
margin-top:210px;
padding: 2px;
background-color: black;
}

	div.hotkeys-songs {
		display: none;
		position: fixed;
		width: 15%;
		left: 0px;
		top: 220px;
		margin: 0px;
		background-color: black;
		border-style: solid; /* change this to none to remove borders */
		border-width: 2px;
		border-color: lime;
		color: white;
		font-size: 16px;
	}

	div.hotkeys-music-videos {
		display: none;
		position: fixed;
		width: 15%;
		left: 0px;
		top: 210px;
		margin: 0px;
		background-color: black;
		border-style: solid; /* change this to none to remove borders */
		border-width: 2px;
		border-color: lime;
		color: white;
		font-size: 16px;
	}

	div.hotkeys-photos {
		display: none;
		position: fixed;
		width: 15%;
		left: 0px;
		top: 210px;
		margin: 0px;
		background-color: black;
		border-style: solid; /* change this to none to remove borders */
		border-width: 2px;
		border-color: lime;
		color: white;
		font-size: 16px;
	}

	ul.hotkeys {
		list-style-type: none;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 15px;
		font-weight: normal;
		color: white;
		text-align: left;
		margin: 0px;
		padding: 3px;
	}

	div.instructions {
		display: none;
		position: fixed;
		width: 100%;
		left: 0px;
		top: 220px;
		margin: 0px;
		background-color: black;
		border-style: solid; /* change this to none to remove borders */
		border-width: 2px;
		border-color: lime;
		color: white;
		font-size: 16px;
	}

h3.querytable {
font-size: 22px;
text-align: center;
color: sandybrown;
padding: 0px;
margin-top: 0px;
margin-bottom: 2px;
}

table.querytable {
border-collapse: collapse; /* eliminates dual border lines */
border-style: solid; /* change to none eliminate border around table */
border-width: 1px;
border-color: dodgerblue;
width: 100%; /* table width within the container element */
table-layout: fixed; /* forces table to stay within container */
color: white; /* default text color within table */
font-size: 17px; /* default text size within table */
}

caption.querytable {
color: sandybrown;
font-size: 20px;
margin-top: 5px;
margin-bottom: 5px;
}

/* Note: margins have no effect on internal table elements */
td.querytable {
overflow-wrap: break-word; /* when text overflows wrap whole words */
vertical-align: middle; /* makes labels and input fields look aligned */
border-style: none; /* change to solid for table cell borders */
border-width: 1px;
border-color: grey;
}

tr.querytable {
border-style: none; /* change to solid for table row borders */
border-width: 1px;
border-color: dodgerblue;
}

form.querytable {
margin: 0px; /* compacts form */
padding: 0px;
}

input.querytable {
font-size: 20px;
color: white; /* looks better than black on dodgerblue background */
background-color: dodgerblue;
width: 95%;
margin: 0px;
margin-bottom: 10px;
padding: 0px;
border-style: solid;
border-width: 2px;
border-color: sandybrown;
}

input[type=text].querytable {
text-align: left;
}

select.querytable:hover, select.querytable:focus,
input[type=submit].querytable:hover, input[type=submit].querytable:focus,
input[type=button].querytable:hover input[type=button].querytable:focus
input.querytable:hover,
input.querytable:active,
input.querytable:focus {
background-color: white;
color: black; /* color must change to black on a white background */
border-style: solid; /* optional change border upon hover */
border-width: 2px;
border-color: lime;
}

select.querytable,
input[type=submit].querytable,
input[type=button].querytable {
	display: inline;
	text-align: right;
	font-size: 17px;
	font-weight: normal;
	color: white;
	background-color: dodgerblue;
	width: fit-content;
	padding-left: 10px;
	padding-right: 10px;
	margin-right: 0px;
	margin-left: 10px;
	border-style: solid;
	border-width: 2px;
	border-color: sandybrown;
	border-radius: 20px;
}

select.querytable:hover, select.querytable:focus,
input[type=submit].querytable:hover, input[type=submit].querytable:focus,
input[type=button].querytable:hover input[type=button].querytable:focus {
background-color: blue;
color: white;
}

label.querytable {
display: block;
text-align: right;
font-size: 18px;
padding-right: 5px;
color: cyan;
vertical-align: middle;
}

span.querytable { /* used to left-justify submit & clear text row */
text-align: left;
font-size: 20px;
color: cyan;
padding-left: 5px;
}

div.results {
width: 100%;
margin-top: 210px;
}

div.resultimage {
width: 30%;
float: left;
margin-top: 5px;
padding: 0px;
}

div.resultable {
width: 70%;
float: right;
margin-top: 5px;
padding: 0px;
}

table.results {
margin: 0;
padding: 0;
border-collapse: collapse;
border-style: solid;
border-width: 1px;
border-color: dodgerblue;
width: 100%; /* within the container element */
table-layout: fixed
}

caption.results {
color: sandybrown;
font-size: 20px;
text-align: center;
}

td.results {
color: beige;
text-align: center;
vertical-align: middle;
overflow-wrap: break-word;
font-size: 15px;
border-style: none;  /* change this to solid to display table cell borders */
}

td.songartist {
	font-size: 125%;
	color: cyan;
	text-align: left;
	padding-left: 5px;
	padding-top: 10px;
	vertical-align: middle;
	overflow-wrap: break-word;
}

td.resultleft {
color: beige;
text-align: left;
padding-left: 5px;
vertical-align: middle;
overflow-wrap: break-word;
font-size: 15px;
border-style: none;  /* change this to solid to display table cell borders */
}

ul.scene {
	color: beige;
	text-align: left;
	padding-left: 2px;
	font-size: 14px;
}

td.anchor {
text-align: center;
}

th.results {
color: dodgerblue;
font-size: 16px;
text-align: center;
border-style: none;
border-width: 1px;
border-color: dodgerblue;
}

tr.distinct {
	border-style: none;
}

td.distinct {
	color: white;
	text-align: left;
	padding-left: 5px;
	padding-bottom: 10px;
	vertical-align: middle;
	overflow-wrap: break-word;
	font-size: 15px;
	border-style: none;  /* change this to solid to display table cell borders */
}

a.distinct:hover,
td.distinct:hover {
	background-color: blue;
	color: yellow;
}

a.distinct {
	display: inline-block;
	font-size: 14px;
	text-align: left;
	padding-left: 4px;
}

	tr.resultsRow,
	tr.resultwide,
	tr.results {
		border-style: none; /* change this to none to remove table row borders */
		border-width: 1px;
		border-color: dodgerblue;
	}

	tr.resultsRow:hover,
	tr.results:hover { /* highlight table row when mouse hovers */
		background-color: dodgerblue;
		color: black;
	}

	a.results {
		display: inline-block;
		font-size: 15px;
		text-align: left;
		color: lime;
	}

	span.results,
	p.results {
		font-size: 17px;
	}

	img.results {
		width: 100%;
		margin: 0;
		padding: 2px;
	}

	select.results {
		font-size: 20px; /* increase from 15px */
		color: white; /* looks better than black on dodgerblue background */
		background-color: dodgerblue;
		text-align: left;
		margin: 0;
		padding: 8px;
		border-style: solid;
		border-width: 2px;
		border-color: sandybrown;
	}


	div.thumbnail {
		display: flex;
		float: left;
		max-width: 180px;
		height: 210px;
		margin-right: 5px;
		margin-bottom: 5px;
	}

	figure.thumbnail {
		margin: 0px;
		padding: 0px;
		width: 100%;
		height: 100%;
	}

	img.thumbnail {
		margin: 0px;
		padding: 0px;
		border-style: solid; /* change this to none to remove borders */
		border-width: 2px;
		border-color: dodgerblue;
		width: 100%;
		height: 90%;
	}

	img.thumbnail:hover {
		border-color: yellow;
	}

	figcaption.thumbnail {
		text-align: center;
		font-size: 14px;
		color: sandybrown;
	}


	div.video-result-row {
    display: grid;
    grid-template-columns: 30% 70%;
    column-gap: 5px;
    margin-bottom: 10px;
    align-items: start; /* aligns top edges perfectly */
    /* clear: both; */
}

div.posterhoriz {
    height: 185px;
    overflow: hidden;
}

	div.posterdivs {
		display: flex;
		float: left;
		max-width: 300px;
		min-width: 300px;
		height: 185px;
		margin-right: 5px;
		margin-bottom: 5px;
	}

div.details {
    overflow-wrap: anywhere;
}

figure.posterframe {
    margin: 0;
    height: 100%;
}

img.posterframe {
    width: 100%;
    height: 150px;
    object-fit: contain; /* keeps aspect ratio */
    display: block;
}

figcaption.posterframe {
    font-size: 0.9em;
    text-align: center;
}

	div.postervert {
		display: flex;
		float: left;
		max-width: 185px;
		height: 225px;
		margin-right: 5px;
		margin-bottom: 5px;
	}

	figure.posterframe {
		margin: 0px;
		padding: 0px;
		width: 100%;
		height: 100%;
	}

	img.posterframe {
		margin: 0px;
		padding: 0px;
		border-style: solid; /* change this to none to remove borders */
		border-width: 2px;
		border-color: dodgerblue;
		width: 100%;
		height: 90%;
	}

	img.posterframe:hover {
		border-color: yellow;
	}

	figcaption.posterframe {
		text-align: center;
		font-size: 14px;
		color: sandybrown;
	}

	div.mainmenu {
		display: block;
		position: fixed;
		width: 100%;
		left: 0px;
		top: 40px;
		margin: 0px;
		background-color: black;
		border-style: none; /* change this to none to remove borders */
		border-width: 2px;
		border-color: lime;
		color: white;
		font-size: 16px;
	}

	div.mainmenuhalf {
		display: block;
		position: fixed;
		width: 50%;
		left: 0px;
		top: 40px;
		margin: 0px;
		background-color: black;
		border-style: none; /* change this to none to remove borders */
		border-width: 2px;
		border-color: lime;
		color: white;
		font-size: 16px;
	}

	div.queue {
		display: none;
		position: fixed;
		width: 40%;
		left: 0px;
		top: 145px;
		margin: 0px;
		background-color: black;
		border-style: solid; /* change this to none to remove borders */
		border-width: 2px;
		border-color: lime;
		color: white;
		font-size: 16px;
	}

	div.queuestatus {
		margin: 0px;
		padding: 0px;
		padding-left: 2px;
		color: lime;
		font-size: 15px;
	}

	p.queue {
		color: yellow;
		text-align: center;
		font-size: 16px;
		margin: 0px;
		padding: 2px;
	}

	table.queue {
		border-collapse: collapse; /* eliminates dual border lines */
		width: 100%; /* table width within the container element */
		table-layout: auto;
	}

	div.song {
		display: none;
		position: fixed;
		top: 110px;
		right: 5px;
		width: 40%;
		margin: 0px;
		padding: 0px;
		background-color: black;
		border-style: solid;
		border-width: 2px;
		border-color: lime;
	}

	figure.song,
	figure.musicvid {
		margin: 0px;
		padding: 0px;
	}

	figcaption.song {
		color: lime;
		font-size: 15px;
		font-weight: normal;
		text-align: center;
		display: block;
		margin: 0px;
		padding: 0px;
	}

	audio.song {
		width: 100%; /* of the containing element */
		margin: 0px;
		padding: 2px;
	}

	div.songmenu {
		margin-top: 5px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 5px;
		display: table;
		padding: 2px;
		width: fit-content;
	}

	div.hidden {
		display: none;
		width: 100%;;
		margin: 0px;
		margin-top:10px; 
		background-color: black;
		border-style: none; /* change this to none to remove borders */
		border-width: 2px;
		border-color: dodgerblue;
		color: white;
		font-size: 16px;
	}

	div.radio {
		display: block;
		width: 100%;
		margin: 0px;
		padding: 0px;
		font-size: 17px;
	}

	h3.radio {
		color: sandybrown;
		margin: 0px;
		padding: 5px;
	}

	p.radio {
		font-size: 16px;
		margin: 5px;
		padding: 5px;
	}

	a.radio {
		font-size: 16px;
		color: cyan;
		margin: 5px;
		padding: 5px;
	}

	ul.radio {
		font-size: 16px;
	}

	li.radio {
		font-size: 16px;
		margin: 5px;
	}

	figure.radio {
		margin: 0px;
		padding: 0px;
	}

	img.radio {
		display: block;
		margin-top: 0px;
		margin-bottom: 0px;
		width: 100%;
		max-height: 100%;
		padding: 0px;
		background-color: black;
		border-style: solid;
		border-width: 2px;
		border-color: yellow;
	}

	figcaption.radio {
		color: lime;
		background-color: transparent;
		font-size: 15px;
		text-align: center;
		margin: 0px;
		padding: 0px;
		/* caption overlays bottom of image */
		position: relative;
		bottom: 20px;
		left: 0px;
		z-index: 1;
	}

}
/* ************************************************************************
 * END RESPONSIVE CSS DESKTOP, LAPTOP SCREEN MIN-WIDTH 641px              *
 * ************************************************************************ */





/* ************************************************************************ */
/* PHONE RESPONSIVE CSS FOR SMALL WIDTH SCREEN - SINGLE LINEAR COLUMN PHONE */
/* ************************************************************************ */
@media screen and (max-width: 640px) {

	div.search-music-form,
	div.search-music-video-form, 
	div.search-photo-form,
	div.search-pornstar-form,
	div.search-xvideo-form {
		display: block;
		width: 100%;
		margin: 0px;
		margin-top:10px;
		padding: 2px;
		background-color: black;
		border-style: solid;
		border-width: 2px;
		border-color: lime;
}

	div.posterhoriz {
		display: flex;
		float: left;
		max-width: 100%;
		height: 185px;
		margin: 0px;
		padding-right: 5px;
		margin-bottom: 5px;
	}

	div.song {
		display: none;
		position: sticky;
		top: 0px;
		right: 5px;
		width: 100%;
		margin: 0px;
		padding: 0px;
		background-color: black;
		border-style: solid;
		border-width: 2px;
		border-color: lime;
	}

	figure.song,
	figure.musicvid {
		margin: 0px;
		padding: 0px;
	}

	figcaption.song {
		color: lime;
		font-size: 16px;
		font-weight: normal;
		text-align: center;
		display: block;
		margin: 0px;
		padding: 0px;
	}

	audio.song {
		width: 100%; /* of the containing element */
		margin: 0px;
		padding: 2px;
	}

	div.videomenu,
	div.songmenu {
		margin-left: auto;
		margin-right: auto;
		display: table;
		padding: 0px;
	}

	div.musicvid {
		display: none;
		margin-top: 10px;
		margin-bottom: 10px;
		margin-right: 5px;
		width: 100%;
		padding: 0px;
		position: sticky;
		top: 0px;
		background-color: black;
		border-style: solid;
		border-width: 2px;
		border-color: lime;
	}

	video.musicvid {
		display: inline-block;
		margin: 2px;
		width: 100%; /* of the containing element */
		padding: 0px;
	}

	/* figure caption centered below video */
	figcaption.musicvid {
		color: lime;
		font-size: 17px;
		font-weight: normal;
		text-align: center;
		display: block;
		margin: 0px;
		padding: 0px;
	}

	select.results {
		font-size: 20px; /* increase from 15px */
		color: white; /* looks better than black on dodgerblue background */
		background-color: dodgerblue;
		text-align: left;
		margin: 0;
		padding: 8px;
		border-style: solid;
		border-width: 2px;
		border-color: sandybrown;
	}

	div.results {
		width: 100%;
		margin-top: 5px;
		padding: 0px;
	}

	div.resultimage {
		width: 100%;
		margin-top: 5px;
		padding: 0px;
	}

	div.resultable {
		width: 100%;
		margin-top: 5px;
		padding: 0px;
	}

	table.results {
		border-collapse: collapse; /* eliminates dual border lines */
		border-style: solid; /* change to none eliminate border around table */
		border-width: 1px; /* thin border looks nice and not intrusive */
		border-color: dodgerblue; /* easier on the eyes */
		width: 100%; /* table width within the container element */
		color: white; /* default text color within table */
		font-size: 17px; /* default text size within table */
		table-layout: auto;
	}

	caption.results {
		font-size: 20px; /* reduced from 22px */
		color: sandybrown; /* instead of lime */
		margin-top: 15px; /* instead of 25 - adds space between sermons */
		margin-bottom: 0px; /* instead of 2px */
	}

	thead.results {
		display: none;
	}

	th.results {
	color: dodgerblue;
	font-size: 16px;
	text-align: center;
	border-style: solid;
	border-width: 1px;
	border-color: blue;
	}

	tr.results {
	border-style: solid; /* change this to none to remove table row borders */
	border-width: 1px;
	border-color: dodgerblue;
	display: block;
	margin-bottom: 0px;
	}

	tr.resultwide {
	display: none;
	}

	td.results {
	display: block;
	font-size: 15px;
	text-align: right;
	padding-right: 5px;
	}

	td.results::before {
	content: attr(data-label);
	float: left;
	font-weight: normal;
	color: dodgerblue;
	padding-left: 5px;
	}

	td.results::after {
	clear: right;
	}

	td.results:last-child {
	border-bottom: 0;
	padding-bottom: 5px;
	}

	img.results {
	width: 100%;
	margin: 0;
	padding: 2px;
	}

	form.query-form {
	width: 100%;
	display: table;
	margin: 0px;
	padding: 5px;
	background-color: black;
	color: white;
}

	div.form-row {
	display: block;
}

/* Align all labels in right column */
	label.form-row {
	text-align: right;
	padding-right: 5px;
	align-self: center;
}

/* Make text fields expand to fill column */
	input.form-row[type="text"] {
	width: 100%;
}

/* Highlight field when mouse hovers */
	input.form-row[type="text"]:hover {
	background-color: blue;
	color: white;
}

	div.querytable {
	width: 100%;
	display: none;
	margin: 0px;
	padding: 2px;
	background-color: black;
	}

	h3.querytable {
	font-size: 20px;
	text-align: center;
	color: sandybrown;
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	}

	h3.query-title {
	text-align: center;
	margin: 0px;
	padding: 0px;
	color: sandybrown;
	font-size: 18px;
}

	table.querytable {
	border-collapse: collapse; /* eliminates dual border lines */
	border-style: solid; /* change to none eliminate border around table */
	border-width: 1px;
	border-color: dodgerblue;
	width: 100%; /* table width within the container element */
	table-layout: auto; /* forces table to stay within container */
	color: white; /* default text color within table */
	font-size: 17px; /* default text size within table */
	}

	caption.querytable {
	color: sandybrown;
	font-size: 18px;
	margin-top: 5px;
	margin-bottom: 5px;
	}

	thead.querytable {
	display: none;
	}

	th.querytable {
	display: none;
	}

	/* Note: margins have no effect on internal table elements */
	td.querytable {
	overflow-wrap: break-word; /* when text overflows wrap whole words */
	vertical-align: middle; /* makes labels and input fields look aligned */
	border-style: none; /* change to solid for table cell borders */
	border-width: 1px;
	border-color: grey;
	}

	tr.querytable {
		border-style: none; /* change to solid for table row borders */
		border-width: 1px;
		border-color: grey;
	}

	form.querytable {
		margin: 0px; /* compacts form */
		padding: 0px;
	}

	input.querytable {
		font-size: 17px;
		color: white; /* looks better than black on dodgerblue background */
		background-color: dodgerblue;
		width: 100%;
		margin: 0px;
		margin-bottom: 10px;
		padding-top: 0px;
		padding-bottom: 0px;
		padding-left: 5px;
		padding-right: 5px;
		border-style: solid;
		border-width: 1px;
		border-color: sandybrown;
	}

	input[type=text].querytable {
		text-align: left;
	}

	input.querytable:hover,
	input.querytable:active,
	input.querytable:focus {
		background-color: white;
		color: black; /* color must change to black on a white background */
	}

	input[type=submit].querytable,
	input[type=button].querytable {
		display: block;
		text-align: center;
		font-size: 17px;
		font-weight: normal;
		color: white;
		background-color: dodgerblue;
		width: fit-content;
		padding-left: 2px;
		padding-right: 2px;
		margin-right: auto;
		margin-left: auto;
		border-style: solid;
		border-width: 2px;
		border-color: lime;
		border-radius: 25px;
	}

	input[type=submit].querytable:hover,
	input[type=button].querytable:hover {
		background-color: blue;
		color: white;
	}

	label.querytable {
		display: block;
		text-align: right;
		font-size: 17px;
		padding-right: 3px;
		color: cyan;
		vertical-align: middle;
	}

	span.querytable { /* used to left-justify submit & clear text row */
		display: none;
		text-align: left;
		font-size: 20px;
		color: cyan;
		padding-left: 5px;
	}

	select.querytable {
		font-size: 17px;
		color: white; /* looks better than black on dodgerblue background */
		background-color: dodgerblue;
		text-align: left;
		width: 95%;
		margin: 0px;
		margin-bottom: 10px;
		padding-left: 2px;
		padding-right: 2px;
		border-style: solid;
		border-width: 1px;
		border-color: sandybrown;
	}

	select.querytable:hover {
		background-color: blue;
		color: white;
	}

	div.video-result-row {
		grid-template-columns: 1fr;
		row-gap: 6px;
	}

	div.posterhoriz {
		width: 100%;
		height: auto;
		max-height: none;
	}

	img.posterframe {
		width: 100%;
		height: auto;
		max-height: 185px;
		object-fit: contain;
	}

	div.details {
		width: 100%;
	}

	div.media {
		width: 100%;
	}

	img.media,
	audio.media,
	video.media {
		width: 100%;
		border-style: solid;
		border-width: 1px;
		border-color: lime;
	}

	figcaption.media {
		color: sandybrown;
		text-align: center;
		font-size: 17px;
	}

	span.media,
	a.media,
	p.media {
		font-size: 17px;
		color: sandybrown;
	}

}
/* ****************************************************************************
* END PHONE RESPONSIVE CSS *** screen max-width = 640 px                      *
* *************************************************************************** */


/* END OF css/media.css */