/*
	XPORT.TOP
	
	This work is licensed under the Creative Commons Attribution 4.0 International License.
	To view a copy of this license, visit http://creativecommons.org/licenses/by-nd/4.0/ or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA.
	
	Name: 		Pais play
	Date: 		Jan 1 2024
	Author:		@vir2alexport
	License:	https://creativecommons.org/licenses/by-nd/4.0/legalcode
*/
HTML, BODY{
	margin:0;
	padding:0;
	
}

BODY{
	
}

HEADER{
	background:gold;
}

A{
	color:#000;
	text-decoration:none;
	cursor:default;
}
A:hover{
	color:blue;
	text-decoration:none;
	cursor:pointer;
}
.circle {
	width: 50px;
	height: 50px;
	border: 2px solid gold;
	border-radius: 50%;
	overflow: hidden;
}
.circle:hover{
	border: 2px solid #fff;
}
/*____________________________________________________________________________*/
NAV{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	align-items: stretch;
	align-content: stretch;
}
	NAV > DIV{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		align-content: stretch;
	}
	NAV > UL{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: stretch;
		align-content: stretch;
	}
		#frame-login IMG{
			margin:2px 0 -2px 0;
		}
		#frame-login DIV.g_id_signin{
			width:40px;
			height:40px;
		}
/*____________________________________________________________________________*/
.menu{
	list-style:none;
	margin:0;
	padding:0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	/**/
	opacity: 0.9;
	-khtml-opacity:.90;
	-moz-opacity:.90;
	-ms-filter:”alpha(opacity=90)”;
	filter: alpha(opacity=90);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.9);
	zoom: 1;
	font-size:150%;
	font-weight:bold;
	cursor:default;
}
	.menu > LI{
		margin:0;
		padding:20px 20px 20px 20px;
		-webkit-transition-duration: .5s;
		   -moz-transition-duration: .5s;
			 -o-transition-duration: .5s;
				transition-duration: .5s;
	}
	.menu > LI:hover{
		background:#ff0000;
	}
	
	.menu LI UL{
		position:absolute;
		list-style:none;
		margin:20px 0 0 -20px;
		padding:0;
		background:gold;
		font-size:70%;
		font-weight:normal;
		visibility:hidden;
		opacity: 0;
		-khtml-opacity:0;
		-moz-opacity:0;
		-ms-filter:”alpha(opacity=0)”;
		filter: alpha(opacity=0);
		filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
		zoom: 1;
		-webkit-transition-duration: .8s;
		   -moz-transition-duration: .8s;
			 -o-transition-duration: .8s;
				transition-duration: .8s;
	}
	.menu LI:hover UL{
		visibility:visible;
		opacity: 1;
		-khtml-opacity:1;
		-moz-opacity:1;
		-ms-filter:”alpha(opacity=100)”;
		filter: alpha(opacity=100);
		filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1);
		zoom: 1;
	}
		.menu > LI > UL > LI{
			margin:0;
			padding:4px 10px 4px 10px;
		-webkit-transition-duration: .3s;
		   -moz-transition-duration: .3s;
			 -o-transition-duration: .3s;
				transition-duration: .3s;
		}
		.menu > LI > UL > A > LI{
			margin:0;
			padding:4px 10px 4px 10px;
		}
		.menu > LI > UL > LI:hover{
			background:#ffff00;
		}
/*____________________________________________________________________________*/
.user-menu{
	list-style:none;
	margin:0;
	padding:0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	/**/
	opacity: 0.9;
	-khtml-opacity:.90;
	-moz-opacity:.90;
	-ms-filter:”alpha(opacity=90)”;
	filter: alpha(opacity=90);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.9);
	zoom: 1;
	
	font-size:150%;
	font-weight:bold;
	cursor:default;
}
	.user-menu > LI{
		margin:0;
		-webkit-transition-duration: .5s;
		   -moz-transition-duration: .5s;
			 -o-transition-duration: .5s;
				transition-duration: .5s;
	}
	.user-menu LI UL{
		position:absolute;
		list-style:none;
		margin:3px 0 0 0;
		padding:0;
		background:gold;
		font-size:70%;
		font-weight:normal;
		visibility:hidden;
		opacity: 0;
		-khtml-opacity:0;
		-moz-opacity:0;
		-ms-filter:”alpha(opacity=0)”;
		filter: alpha(opacity=0);
		filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
		zoom: 1;
		-webkit-transition-duration: .8s;
		   -moz-transition-duration: .8s;
			 -o-transition-duration: .8s;
				transition-duration: .8s;
	}
	.user-menu LI:hover UL{
		visibility:visible;
		opacity: 1;
		-khtml-opacity:1;
		-moz-opacity:1;
		-ms-filter:”alpha(opacity=100)”;
		filter: alpha(opacity=100);
		filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1);
		zoom: 1;
	}
		.user-menu > LI > UL > LI{
			margin:0;
			padding:4px 10px 4px 10px;
		-webkit-transition-duration: .3s;
		   -moz-transition-duration: .3s;
			 -o-transition-duration: .3s;
				transition-duration: .3s;
		}
		.user-menu > LI > UL > A > LI{
			margin:0;
			padding:4px 10px 4px 10px;
		}
		.user-menu > LI > UL > LI:hover{
			background:#ffff00;
		}
/*____________________________________________________________________________*/
.frm-shade{
	position:absolute;
	top:0;
	left:0;
	margin:0;
	padding:0;
	z-index:100;
	width:100%;
	height:100%;
	background:#000;
	-webkit-transition-duration: 0.6s;
	   -moz-transition-duration: 0.6s;
		 -o-transition-duration: 0.6s;
			transition-duration: 0.6s;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	  -moz-opacity: 0.7;
	-khtml-opacity: 0.7;
		   opacity: 0.7;
}
.frm-login {
	position:absolute;
	top:0;
	left:0;
	margin:0;
	padding:0;
	z-index:100;
	width:100%;
	height:100%;
	
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	
	z-index:101;
}
	.tabs{
		margin:5px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		align-content: center;
		
		position: relative;
		background: #ccc;
	}
	.tabs::before, .tabs::after {
		content: "";
		display: table;
	}
	.tabs::after {
		clear: both;
	}
	.tab-switch{
		display: none;
	}
	.tab-label{
		position: relative;
		display: block;
		line-height: 2.75em;
		height: 3em;
		padding: 0 1.618em;
		background: #bbb;
		border-right: 0.125rem solid #ccc;
		color: #999;
		font-weight:bold;
		cursor: pointer;
		top: 0;
		transition: all 0.25s;
	}
	.tab-label:hover {
		top: -0.25rem;
		color:gold;
		transition: top 0.25s;
	}
	.tab-content{
		position: absolute;
		left: 0;
		opacity: 0;
		padding: 5px;
		background: #ccc;
		transition: all 0.35s;
		border-bottom: 0.25rem solid brown;
	}
	.tab-switch:checked + .tab-label {
		background: #ccc;
		color: brown;
		border-bottom: 0;
		border-right: 0.125rem solid #ccc;
		transition: all 0.35s;
		z-index: 1;
		top: -0.0625rem;
	}
	.tab-switch:checked + LABEL + .tab-content {
		z-index: 2;
		opacity: 1;
		transition: all 0.35s;
	}
		.tab-content TEXTAREA{
			resize:none;
		}
/*____________________________________________________________________________*/



/*____________________________________________________________________________*/
.vir2alexport{
	width:155px;
    height:100px;
	background:url("/images/vir2alexport.webp") no-repeat;
}
.enhanced-tradingview-screenshot{
	width:200px;
    height:284px;
	background:url("/images/enhanced-tradingview.webp") no-repeat;
}
.nostr-screenshot{
	width:200px;
    height:85px;
	background:url("/images/nostr-relays.webp") no-repeat;
}
.zpng-screenshot{
	width:200px;
    height:65px;
	background:url("/images/zpng.webp") no-repeat;
}
.facemarks-screenshot{
	width:200px;
    height:183px;
	background:url("/images/facemarks-screenshot-1.webp") no-repeat;
}
.sequential-screenshot{
	width:200px;
    height:146px;
	background:url("/images/enhanced-arithmetic-mean.webp") no-repeat;
}
.synballo-screenshot{
	width:200px;
    height:313px;
	background:url("/images/synballo-screenshot-1.webp") no-repeat;
}
.tickerbell-screenshot{
	width:200px;
    height:125px;
	background:url("/images/tickerbell-screenshot-1.webp") no-repeat;
}
.logo-github {
    width:37px;
    height:37px;
	padding:0 9px 0 9px;
    background:url("/images/github.png") no-repeat center;
}
.logo-twitter {
    width:56px;
    height:37px;
    background:url("/images/twitter.png") no-repeat;
}
.logo-youtube {
    width:56px;
    height:37px;
    background:url("/images/youtube.png") no-repeat;
}
/*____________________________________________________________________________*/