/* ---- font ------------------------------------------------------- */
@font-face {
	font-family: 'stanberryregular';
	src: url('../font/stanberry-webfont.woff2') format('woff2'),
		 url('../font/stanberry-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/* ---- body ------------------------------------------------------- */
body		{ 	background-color: #fbfbff;
			font-family: 'stanberryregular', sans-serif;
			font-weight:normal;
			font-style:normal;
			color: black;
			margin: 0px;
			padding-top: 	20px;
			padding-bottom: 20px;
			padding-right: 	60px;
			padding-left: 	60px;
			overflow-x: hidden; /* hide the horizontal scrollbar */
			overflow-y: auto;
			}
body::-webkit-scrollbar {
			width: 20px;
			background-image: #fbfbff;
}
body::-webkit-scrollbar-button {
			display: hidden;
			height: 10px;
}
body::-webkit-scrollbar-track {
			background-color: #8e97da;
			-webkit-box-shadow: inset 0 0 15px rgba(0,0,0,0.5); 
			border-radius: 15px;
}
body::-webkit-scrollbar-thumb {
			-webkit-box-shadow: inset 0 0 60px rgba(220,220,255,1); 
			border-radius: 15px;
			border: 1px solid transparent;
}

body.TopWindow	{	padding: 0px;
					overflow: hidden; /* hide the scrollbars because we want to scroll inside the main iframe only */
				}
body.main	{	background-size: 1080px 60px;
				background-image: radial-gradient(ellipse at top, #f1f1ff, transparent 90%, transparent 100%);
				background-repeat: no-repeat;
				background-attachment: fixed;
				background-position: top center;
				max-width: 1080px;
				margin: auto;
				}

iframe.main {	border:none;
				overflow:hidden; /* hide the scrollbars of the iframe, it will be the hosted body that will display the scrollbars */
				position:absolute; /* need to use an absolute position for the frame to take the whole height */
				z-index: -1; /* place the iframe under, so that the main menu can be drawn above it. z-index only works for positionned element such as position:absolute */
				top:64px;
				left:0;
				right:0;
				bottom:0;
				width:100%;
			}

/* ---- links ------------------------------------------------------ */
a:link		{ color: black; background-color: #faf38b }
a:visited	{ color: black; background-color: #D2D8AB }
a:hover   	{ color: black; background-color: #fefb21 }
a:active	{ color: #2e24f3 }

a.Menu 			{ color: #000032; 
				  background-color: transparent;
				  border: 0;
				  margin-right: 30px;
				  text-decoration:none;
				  font-variant: small-caps;
				  font-size: 18pt;
				}
a.Menu:link		{ }
a.Menu:visited	{ }
a.Menu:hover	{ border-bottom: 4px solid #00003C; background-image: linear-gradient(0deg, #f0ee81, transparent); }
a.Menu:active	{ border-bottom: 4px solid #00003C; color: #2e24f3 }
a.MenuSelected	{ border-bottom: 4px solid #00003C; }

a.SubMenu	{	color: #000032; 
				background-color: transparent;
				border: 0;
				margin-right: 30px;
				margin-top: 10px;
				margin-bottom: 10px;
				text-decoration:none;
				font-variant: small-caps;
				font-size: 18pt;
			}
a.SubMenu:link		{ }
a.SubMenu:visited	{ }
a.SubMenu:hover		{ background-image: linear-gradient(90deg, #f0ee81, transparent); }
a.SubMenu:active	{ color: #2e24f3 }


a.image:link	{ background-color: transparent; }
a.image:visited	{ background-color: transparent; }
a.image:hover   	{ background-color: transparent; }
a.image:active	{ background-color: transparent; }

span.link			{ color: black; background-color: #faf38b; }
span.link:hover   	{ background-color: #fefb21; }

div.link			{ color: black; background-color: #faf38b; }
div.link:hover   	{ background-color: #fefb21; }

/* ---- special images -------------------------------------------- */
img.logo		{ margin:0px;
			  padding: 0px, 0px, 0px, 0px;
			  vertical-align: middle;
			  height: 64px; }

/* ---- Headers --------------------------------------------------- */
h1			{ color: #000032;
			 font-size: 160%; }
h2			{ color: #000032;
			  font-size: 140%; }
h3			{ color: #000032;
			  font-size: 120%; }
h4			{ color: #000032;
			  font-size: 100%; 
			  font-style: italic }

/* ---- Paragraph ------------------------------------------------- */
p			{ text-indent: 1.5em; }
p:first-letter 	{ font-size: 150%; }
p.legalNotice { text-indent: 0;
				font-size: 0.6em; }

/* ---- Special div ----------------------------------------------- */
div.menuBar {	margin-top: 24px;
			}

div.menuBar > div.subMenuLevel1	{
					visibility: hidden;
					position:absolute; /* absolute position because we don't want the lenght of the sub menu impacting the width of the table column used for the menu */
					border-top: 4px solid #00003C;
					border-left: 4px solid #00003C;
					padding-left: 10px;
					padding-top: 10px;
					padding-bottom: 10px;
					background-image: linear-gradient(90deg, #adaddb, transparent);
					transform-origin: top left;
					transform: scale(0);
					transition: visibility 0s, transform 500ms;
				}

div.menuBar:hover > div.subMenuLevel1 {
					visibility: visible;
					transform: scale(1);
				}

/* ---- table  ----------------------------------------------- */
table.menuBar { border: 0;
			margin-left:auto; /* to center the table. But DO NOT SPECIFY width. */
			margin-right:auto; /* to center the table. But DO NOT SPECIFY width. */
			margin-top: 0;
			margin-bottom: 0;
			padding:0;
			height:64px;
			}
td.menuBar	{ vertical-align: top;
			  margin: 0;
			  padding: 0;
			}
td.game		{ width: 300px;
			 vertical-align: top;
			}
td.controls { min-width: 170px;
			vertical-align: top;
			padding-left: 20px;
			padding-right: 20px;
			}