/* ILoveMyFeet.Net web.css */

:root {
/*	--pageclr:	DarkBlue;
	--pagebg:	#c0e8f6;*/
	--pageclr:	#00318e;
	--pagebg:	#c8c8e0;
	--textclr:	#00318e;
	--textbg:	#c8c8e0;
	--headerclr:	var(--pagebg);
	--headerbg:	var(--pageclr);
	--logobg:	CornflowerBlue;
	--textclr:	#c0e8f6;;
	--textbg:	black;
	--menuclr:	var(--headerbg);
	--menubg:	var(--headerclr);
	--menuhilite:	var(--headerbg);
/*	--menuhiliteclr:	var(--menubg);*/
	--menuhiliteclr:	var(--headerclr);
:	white;
}

@font-face {
	font-family:	"4 Star Face Font";
	src: url(fonts/4StarFace.ttf);
}
.FourStar {
	font-family:	"4 Star Face Font";
}

@font-face {
	font-family:	Smokin;
	src: url(fonts/SmokingTequila-nvZY.ttf);
}


body {
	margin:	0;
	padding:	0;
/*	background-image:	url('images/Splash.jpg');
	background-position: center center;
	background-size: contain;*/
	background-color:	black;
	color:	var(--pageclr);
	line-height:	1;
	font-family:	"SourceCodePro", "Lucida Console", "Courier New", Courier, sans-serif;
/*	font-size:	16px;*/
	font-size:	1.25vw;
	position:	relative;
}

div {
	font-size:	1em;
}

div.splash {
	width:	100vw;
	height:	100vh;
	background-image:	url('images/Splash.jpg');
	background-position: center center;
	background-size: contain;
}

div.body {
	background-color:	black;
}

div.picframe {
	border-radius: 1em;
	background-color: var(--pagebg);
	text-align:	center;
	padding:	0;
	margin:	1em;
	display: inline-block;
	opacity:	1;
	font-size: .5em;
	font-weight:	bold;
}

img.gallery {
	max-height:	12em;
	border-radius:	1em;
	margin:	.5em;
}

a	{
	text-decoration:	none;
/*	margin:	10px;*/
}

a.plaintext	{
	text-decoration:	underline;
	color:	var(--pageclr);
/*	margin:	10px;*/
}

a.photo {
	text-decoration:	none;
}
a.photo:hover {
	scale:	125%;
}
a.caption {
	text-decoration:	underline;
	color:	var(--textclr);
}
a.caption:hover {
	color:	var(--textbg);
	background-color:	var(--textclr);
}

a.teaser {
	background-color:	var(--pagebg);
	color:	var(--pageclr);
}
a.teaser:hover {
	background-color:	var(--pagebg);
	color:	white;
}

td.banner-text {
	vertical-align:	top;
	padding-top:		0px;
/*	font-size:			20px;*/
	text-align:			center;
}

td.option-text {
	padding-left: 20px;
	padding-right: 20px;
/*	font-size:	18px;*/
	text-align:	center;
	vertical-align:	middle;
}

td.option-banner {
	text-align:	center;
/*	font-size:	20px;*/
}

td.icon-left {
	vertical-align:	middle;
	text-align:			right;
}
td.icon-right {
	vertical-align:	middle;
	text-align:			left;
}

td.copyright {
	text-align:			center;
/*	font-size:			14px;*/
}

td.plaintext {
	padding-left: 20px;
	padding-right: 20px;
/*	font-size:	16px;*/
	text-align:	justify;
}

td.hook {
	padding-left: 20px;
	padding-right: 20px;
/*	font-size:	16px;*/
	text-align:	left;
}


p {
	margin-top:	0;
	margin-bottom:	0.5em;
/*	text-indent:	0.3em;*/
}

.icon {
	margin-top: 8px;
}

.logo {
	background-color:	var(--logobg);
	background-image:	url("Logo.png");
	background-position:	center;
	background-size: 270px 111px;
	background-repeat: no-repeat;
	border-color:	var(--headerbg);
	border-style:	solid;
	border-radius:	10px;
	opacity:	0.7;
}

.header {
	background-color:	var(--headerbg);
	opacity: 0.7;
	border-style:	solid;
	border-color:	var(--logobg);
	border-radius:	10px;
	text-align:	center;
	vertical-align:	middle;
	color:	var(--headerclr);
	font-size:	56px;
	font-weight:	bold;
	font-style:	italic;
}

.title {
	display:	table-cell;
	margin-top:	15px;
	border-radius:	10px;
	border-style:	solid;
	border-width:	2px;
	background-color:	var(--textbg);
	opacity:	0.7;
	padding:	7px;
	font-size:	32px;
	font-weight:	bold;
}

.textbox {
	padding:	15px;
	padding-bottom: calc(15px - 0.5em);
	background-color:	var(--textbg);
	opacity:	0.7;
	color:	var(--textclr);
	text-align:	justify;
	border-radius:	10px;
	border-style:	solid;
}

.bottomlink {
	margin-bottom:	1.5em;
	float:	right;
	font-size:	inherit;
	font-style:	italic;
}

.backlink {
	display:	inline;
	float:	left;
}

.picframe {
	border-style:	solid;
	border-width:	1px;
	border-radius:	10px;
	padding:	10px;
	padding-bottom:	3px;
	margin-bottom:	5px;
	background-color:	var(--textbg);
	opacity:	0.7;
}

.picframes {
	border-style:	solid;
	border-width:	2px;
	border-radius:	10px;
	width:	400px;
	padding:	0;
	padding-bottom:	3px;
	margin-bottom:	5px;
	background-color:	white;
/*	opacity:	0.7;*/
}

.pic {
	margin-bottom:	2px;
	border-radius:	10px;"
}

.popup	{
	position:	absolute;
	padding:	5px;
	color:	navy;
/*	background-color:	none;*/
	border-style:	solid;
	border-width:	3px;
/*	font-size: 1em;*/
	font-weight:	bold;
	opacity:	0;
}

.popup:hover	{
	opacity:	1;
}

.popup-content	{
	position:	absolute;
	left:	5px;
	bottom:	110%;
	padding:	5px;
	color:	#acd9ed;
	background-color:	var(--menubg);
	border-style:	solid;
	border-width:	3px;
/*	font-size: 1em;;*/
	font-weight:	bold;
	display: none;
}

.popup-content:hover	{
	display: none;
}

.popup:hover .popup-content	{
	display:	block;
}

.menu {
	overflow:	hidden;
	color:	menuclr;
	background-color:	var(--menubg);
/*	font-family:	Times;*/
	font-size:	1em;
	font-weight:	bold;
}

.menu a {
	color:	var(--menuclr);
	float:	left;
	font-size: inherit;
	text-align: center;
	padding-left:	5px;
	padding-right:	5px;
	text-decoration: none;
	padding-top: 4px;
	padding-bottom: 2px;
}

.dropdown {
	float:	left;
	overflow:	hidden;
	color:	var(--menuclr);
}

.dropdown .dropbtn {
/*	font-family:	Times;*/
	font-size:	inherit;
	font-weight:	bold;
	border:	none;
	outline:	none;
	color:	var(--menuclr);
/*	padding-left:	5px;
	adding-right:	5px;*/
	background-color:	inherit;
	padding-top: 4px;
	padding-bottom: 2px;
}

.dropdown .textbtn {
	font-size:	inherit;
	font-weight:	bold;
	border:	none;
	outline:	none;
	color:	var(--menuclr);
	background-color:	inherit;
	padding-top: 4px;
	padding-bottom: 2px;
}

.menu a:hover, .dropdown:hover .dropbtn {
	background-color:	var(--menuhilite);
   color:	var(--menuhiliteclr);
}

.dropdown-content {
    display: none;
    position: absolute;
/*    bottom:	26px;*/
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index:	1;
}

.dropdown-content a {
	float: none;
/*	color:	#acd9ed;*/
	color:	var(--menuclr);
	background-color: var(--menubg);
/*	font-size:	1em;*/
	font-weight:	bold;
/*	padding: 7px;*/
	padding-left:	5px;
	padding-right:	5px;
	padding-top: 4px;
	padding-bottom: 2px;
	text-decoration: none;
	display: block;
	text-align: left;
}

.dropdown-content a:hover {
	background-color: var(--menuhilite);
   color:	var(--menuhiliteclr);
}

.dropdown:hover .dropdown-content {
/*	right:	right;*/
	display:	block;
}