@charset 'utf-8';

.menubar		{
	position:	absolute;
	top:		0;
	left:		0;
	clear:		both;
	width:		var(--menubar-width);
	height:		var(--menubar-height);
	float:		left;
	border:		var(--mb-border-width) solid maroon;
	border-radius:	var(--menubar-bradius);
}
.menubar-accent		{
	background:	linear-gradient(180deg, rgba(128,   0,   0,  .5),
                                                rgba(128,   0,   0, 0.3),
                                                rgba(255, 255, 255, 0.4));
}
div[class^="mb-cell"]		{
	position:	absolute;
	text-align:	center;
	margin-top:	1.5vw;
}
div[class^="mb-cell"]   a		{
	vertical-align: middle; 
	font-size:	4vw;
	text-decoration:none;
	transition:	opacity 0.3s ease-in-out;
}
.mb-cell-1	{
	top:	0;
	left:	1vw;
}
.mb-cell-2	{
	top:	0;
	right:	1vw;
}
.mb-cell-3	{
	top:	0;
	right:	16vw;
}
.mb-cell-4	{
	top:	0;
	right:	27vw;
}
/*  Turns off all the other buttons when
    you select one. Pretty neat trick.
*/
.menubar:hover  a:not(:hover) {
	opacity:	0.35;
}