@font-face 
{
    font-family: Polaroid;
    src: url(/includes/fonts/sang.ttf);
}

@font-face 
{
    font-family: PhotoCaption;
    src: url(/includes/fonts/caveat-regular.ttf);
}

@font-face 
{
    font-family: MenuSection;
    src: url(/includes/fonts/MUMBO.ttf);
}

@font-face 
{
    font-family: MenuText;
    src: url(/includes/fonts/tt0769m.ttf);
}

@font-face 
{
    font-family: Snes;
    src: url(/includes/fonts/emulogic.ttf);
}

@font-face 
{
    font-family: SmallSnes;
    src: url(/includes/fonts/november.ttf);
}

@font-face 
{
    font-family: Cyber;
    src: url(/includes/fonts/Aller_rg.ttf);
}

@font-face 
{
    font-family: Tetris;
    src: url(/includes/fonts/Tetris.ttf);
}

@font-face 
{
    font-family: Pinball;
    src: url(/includes/fonts/pinball.ttf);
}

@font-face 
{
    font-family: TopMenu;
    src: url(/includes/fonts/Fedora.ttf);
}



html {
   min-height: 100%;   
}

body.frontpage
{
	margin:0px;
	background-color:#000022;
	color:White;
	background-image:url(/images/layout/stars.jpg);
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-size: 100vw 100vw;	
}

body.contentpage
{
	margin:0px;
	
	/* background-image:url(/images/layout/grid.png); */
}

#footer
{
	position:fixed;
	text-align:center;
	color:White;
	font-family:Tahoma, Arial, Sans-Serif;
	font-size:11px;
	width:100%;
	bottom:0;
}


.video
{ 
	margin:0px;
	position: fixed;
	top: 0;
	left: 0;
	/*min-width: 100%;
	min-height: 100%;*/
	width:100vw;
	height:100vh;
	z-index: -100;
	/*-ms-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);*/
	background-color: #000022;
	object-fit:fill;
}



.canvas
{ 
	margin:0px;
	position: fixed;
	top: 0;
	left: 0;
	/*min-width: 100%;
	min-height: 100%;*/
	width:100vw;
	height:100vh;
	z-index: -50;
	/*-ms-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);*/
	background-color: #000022;
	object-fit:fill;
}


.canvasMenu
{ 
	margin:0px;
	position: fixed;
	bottom: 0;
	left: 0;
	/*min-width: 100%;
	min-height: 100%;*/
	z-index: -50;
	/*-ms-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);*/
	background-color: #000022;
	object-fit:fill;
}


.pinballBody
{
		
}

.pinballMarquee
{
	font-family:Pinball;
	font-size: 2.66vmin;
	color: #ff6622;
	text-shadow: 0px 0px 4px #ff8040, 0px 0px 16px #ff6030;
}

div.pinballMarquee
{
	background-color:#100500;
	display:inline-block;
	padding:8px 12px;
	border:solid 3px #111;
	border-radius: 3px;
}


h1.eventHeader
{
	font-size:3vw;
	font-family:Tetris;
	-webkit-text-stroke: 1px black;
	color: #d20;
	text-shadow:
       2px 2px 0 #222,
     -1px -1px 0 #222,  
      1px -1px 0 #222,
      -1px 1px 0 #222,
       1px 1px 0 #222;
     position:absolute;
     top:25vh;
     left:0px;
	right:0px;
	margin:auto;
     z-index:64;

}

h1.eventHeader2
{
	font-family:Tahoma Sans-Serif;
	font-size:5vw;
	line-height:75%;
	color: #8c4;
	-webkit-text-stroke: 2px #888;
	opacity: 1.0;	
	position:absolute;
	left:0px;
	right:0px;
	margin:auto;
	top:20vh;
	

}



.photoHeader
{
	position:relative;
	width:100%;
	top: -3vmin;
}

.photoHeaderLogo
{
	width:50vmin; 
	height:auto; 
	position:absolute; 
	left:-4vmin;
	top: 12vh;	
}

.photoAlbumTitleBig
{
	position:absolute; 
	width:44vmin; 
	top:8vh;
	height:8.5vmin;
	right:8vw;
	padding-right:0.33vmin;
	/*font-family: Polaroid;*/
	font-family:PhotoCaption;
	font-size: 5vmin;
	/*font-weight:900;*/
	font-weight:300;
	color: Black;
	/*opacity: .330;*/
	opacity: .5;
	text-align:right;
	
    line-height:.85;
    text-shadow: 0px 0px 1px #000;
    /*letter-spacing:-.2vmin;*/
    
    
}

.photoAlbumTitleMed
{
	position:absolute; 
	width:48vmin; 
	height:8.5vmin;
	right:1vmin;
	font-family: Polaroid;
	font-size: 4vmin;
	font-weight:900;
	color: Black;
	opacity: .330;
	text-align:right;
	-webkit-filter: blur(0.1px); /* Safari 6.0 - 9.0 */
    filter: blur(0.1px);
    letter-spacing:-.2vmin;
}

.photoAlbumThumbnail 
{
	display: inline-block;
	overflow: hidden;
	width: 38.4vmin;
	height: 45vmin;
	margin:3vmin;
	background-image:url(/images/layout/photo_polaroidframe.png);
	background-size:100% 100%;
	transition: all 0.75s ease-in-out;
	-webkit-transform: rotate(5deg);
	transform: rotate(5deg);
	-webkit-filter: drop-shadow(1px 2px 2px dimgray); /* Safari */
    filter: drop-shadow(1px 2px 2px dimgray);
	
}

.photoAlbumThumbnail a
{
	text-decoration:none;
}


.photoAlbumThumbnailDesc
{
	position:relative;
	font-family:PhotoCaption;
	font-size:5.2vmin;
	width: 90%;
	line-height:75%;
	color:#40484f;
	text-shadow:	0px 0px 1px #756,
					0px 0px 4px #756;
					
					
	bottom:-1vmin;
}


.photoAlbumThumbnailPic
{
	width:90%;
	height:72%;
	background:dimgray;
	margin-top: 2vmin;
	overflow:hidden;
}

.photoAlbumThumbnailPic img
{
	object-fit:fill;
}


.photoThumbnail 
{
	display: inline-block;
	overflow: hidden;
	height: 25vmin;
	width: 25vmin;
	margin:1vmin;
	background-image:url(/images/layout/photo_polaroidframe.png);
	background-size:100% 100%;
	-webkit-filter: drop-shadow(1px 2px 2px dimgray); /* Safari */
    filter: drop-shadow(1px 2px 2px dimgray);
	
}

.photoThumbnail div
{
	display:inline-block;
	width: 90%;
	height: 90%;
	margin: 5%;	
	background-color: navy;	
	overflow:hidden;
}

.photoThumbnail div img 
{
	width:100%;
	height:100%;

  /*position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);*/
}



.menuContainer
{
	width:90%;
	position:relative;
	border-radius: 4vmin;
    border: 1vmin solid #857cc4;
    background-color: #ccbfb4;
    padding: 5vmin;
    font-family:MenuText;
    font-size: 3.33vw;
    color: #665544;
}

.menuHeaderLogo
{
	width:50vw;
	max-width:640px;
	position:relative;
	left:0px; 
	right:0px;
	
}


.menuHeader
{
    font-family:MenuSection;
    font-size: 8vw;
    color: #445566;
    
}

.menuItem
{
    font-family:MenuSection;
    font-size: 5vw;
    color: #445566;
}

.menuPricing
{
    font-family:MenuText;
    font-size: 4vw;
    color: #445566;
}

.menuNotes
{
    position:relative;
    top: -1.5vw;
    font-family:MenuText;
    font-size: 3vw;
    color:dimgray;
}


.menuSubHeader
{
	width:50vw;
	position:relative;
    font-family:MenuText;
    font-size: 4vw;
    color: #445566;    
}

.menuContent
{
	position:relative;
    top: 0vmin;
}

.miniTextNav
{
	font-family:TopMenu;
	font-size: 21px;
	color:White;
}


a.miniTextNav:link
{
	text-decoration:none;
	color: White;
}

a.miniTextNav:visited
{
	text-decoration:none;
	color: White;
}

a.miniTextNav:hover
{
	text-decoration:none;
	color: yellow;
}



#divContent
	{
		margin:0;
		margin-top: 32px;	
	}
	
	
	#imgTopLogo
	{
		/*position: fixed;
		margin:auto;
		left:0; 
		top:-2vmin; right:0;
		width: 36vw;
		height:auto;
		max-width:240px;
		z-index:150;*/
		
		position: fixed;
		margin:auto;
		left:0; 
		right:0;
		top:-2vmin; 
		height:160px;
		max-height: 25vh;
		width:auto;
		z-index:150;
	}

	.miniNav
	{
		position:fixed;
		margin:auto;
		left:0;
		right:0;
		top:5vh;
		height:10vh;
		max-height:160px;
		width:auto;
		z-index:175;	
		display:none;
	}
	
	#miniNav1
	{
		-ms-transform: translateX(-31vw);
		-moz-transform: translateX(-31vw);
		-webkit-transform: translateX(-31vw);
		transform: translateX(-31vw);
	}
	
	#miniNav2
	{
		-ms-transform: translateX(-23vw);
		-moz-transform: translateX(-23vw);
		-webkit-transform: translateX(-23vw);
		transform: translateX(-23vw);
	}
	
	#miniNav3
	{
		-ms-transform: translateX(-15vw);
		-moz-transform: translateX(-15vw);
		-webkit-transform: translateX(-15vw);
		transform: translateX(-15vw);
	}
	
	#miniNav4
	{
		-ms-transform: translateX(20vw);
		-moz-transform: translateX(20vw);
		-webkit-transform: translateX(20vw);
		transform: translateX(20vw);
	}
	
	#miniNav5
	{
		-ms-transform: translateX(30vw);
		-moz-transform: translateX(30vw);
		-webkit-transform: translateX(30vw);
		transform: translateX(30vw);
	}
	
	#miniNav6
	{
		-ms-transform: translateX(40vw);
		-moz-transform: translateX(40vw);
		-webkit-transform: translateX(40vw);
		transform: translateX(40vw);
	}
	
	#imgTopBar
	{
		position: fixed;
		margin:auto;
		left:0; top:0px;
		right:0;
		width:100%;
		height:96px;
		max-height:240px;
		z-index:145;
	}
	
	/*
	#imgTopBar
	{
		position: fixed;
		margin:auto;
		left:0; top:32px;
		right:0;
		width:100%;
		height:72px;
		max-height:240px;
		z-index:145;
	}*/
	


@media only screen and (orientation: landscape)
{
	.canvasMenu
	{
		width: 100%;
		height: auto;
	} 	
	
	/*------------------------*/

	#imgChrome
	{
		position: absolute;
		margin: auto;
		left: 0; 
		right: 0;
		top: 0;
		bottom: 0;  
		width:100vw;
		height:22.5vw;
		max-height:400px;
	}
	
	
	#imgLogo
	{
		position: absolute;
		margin: auto;
		left: 0; 
		right: 0;
		top: 0;
		bottom: 0;  
		height:22.5vw;
		max-height:400px;
		z-index:255;
	}

	
	/*------------------------*/

	#navMenu
	{
	  	position: absolute;
	    margin: auto;
	    left:37vw;
	    top:50vh;
	}
	
	#navMenu img 
	{
		position:absolute;
		margin: auto;
		left: 0; 
		right: 0;
		top: 0;
		bottom: 0; 
		width:18vw;
		max-width:320px;
		transition: all .5s ease-in-out;
		transform: rotate(-35deg) translateX(22vw) rotate(35deg);
		
	}
	
	/*------------------------*/

	#navPinball
	{
	  	position: absolute;
	    margin: auto;
	    left:37vw;
	    top:50vh;
	}

	#navPinball img 
	{
		position:absolute;
	    margin: auto;
	    left: 0; 
	    right: 0;
	    top: 0;
	    bottom: 0; 
	    width:18vw;
	    max-width:320px;
		transition: all .5s ease-in-out;
		transform: rotate(35deg) translateX(22vw) rotate(-35deg);
	}
	
	/*------------------------*/

	#navEvents
	{
	  	position: absolute;
	    margin: auto;
	    left:41vw;
	    top:50vh;
	}
	
	#navEvents img 
	{
		position:absolute;
	    margin: auto;
	    left: 0; 
	    right: 0;
	    top: 0;
	    bottom: 0; 
	    width:18vw;
	    max-width:320px;
		transition: all .5s ease-in-out;
		transform: translateX(25vw);
	}

	/*------------------------*/

	#navBoards
	{
  		position: absolute;
		margin: auto;
		left:41vw;
		top:50vh;
	}

	#navBoards img 
	{
		position:absolute;
	    margin: auto;
	    left: 0; 
	    right: 0;
	    top: 0;
	    bottom: 0; 
	    width:18vw;
	    max-width:320px;
		transition: all .5s ease-in-out;
		transform: rotate(145deg) translateX(22vw) rotate(-145deg);
		
	}	
	
	/*------------------------*/

	#navHours
	{
	  	position: absolute;
	    margin: auto;
	    left:41vw;
	    top:50vh;
	}
	
	#navHours img 
	{
		position:absolute;
	    margin: auto;
	    left: 0; 
	    right: 0;
	    top: 0;
	    bottom: 0; 
	    width:18vw;
	    max-width:320px;
		transition: all .5s ease-in-out;
		transform: rotate(180deg) translateX(27.5vw) rotate(-180deg);
	}
	
	/*------------------------*/

	#navPhotos
	{
	  	position: absolute;
	    margin: auto;
	    left:41vw;
	    top:50vh;
	}
	
	#navPhotos img 
	{
		position:absolute;
	    margin: auto;
	    left: 0; 
	    right: 0;
	    top: 0;
	    bottom: 0; 
	    width:18vw;
	    max-width:320px;
		transition: all .5s ease-in-out;
		transform: rotate(215deg) translateX(20vw) rotate(-215deg);
		
	}

}	

@media only screen and (orientation: portrait)
{
	.canvasMenu
	{
		height: 100%;
		width: auto;
	}
	
	/*------------------------*/
	
	#imgChrome
	{
		position: absolute;
		margin: none;
		left: 0; 
		right: 0;
		top: 0;
		width:100vw;
		height:25vh;
		max-height:400px;
	}
	
	/*------------------------*/

	#imgLogo
	{
		position: absolute;
		margin: auto;
		left: 0; 
		right: 0;
		top: 0;
		height:25vh;
		max-width:640px;
		z-index:255;
	}
	
		#imgTopLogo
		{
		/*position: fixed;
		margin:auto;
		left:0; 
		top:-2vmin; right:0;
		width: 36vw;
		height:auto;
		max-width:240px;
		z-index:150;*/
		
		position: fixed;
		margin:auto;
		left:0; 
		right:0;
		top:-2vmin; 
		height:25vw;
		max-height:180px;
		width:auto;
		z-index:150;
	}
	
	
	/*------------------------*/

	#navMenu
	{
	  	position:absolute;
	  	margin:auto;
	    left:3vw;
	    right:48vw;
	    top:35vh;
	}
	
	#navMenu img 
	{
		position:absolute;
		margin: auto;
		left: 0; 
		right: 0;
		top: 0;
		bottom: 0; 
		height:18vh;
		transition: all .5s ease-in-out;
	}
	
	/*------------------------*/

	#navEvents
	{
	  	position:absolute;
	  	margin:auto;
	    left:52vw;
	    right:97vw;
	    top:35vh;
	    transition: all .5s ease-in-out;
	}

	#navEvents img 
	{
		position:absolute;
	    margin: auto;
	    left: 0; 
	    right: 0;
	    top: 0;
	    bottom: 0; 
	    height:18vh;
	    transition: all .5s ease-in-out;
	}
	
	/*------------------------*/

	#navPhotos
	{
	  	position: absolute;
	    margin: auto;
	    left:3vw;
	    right:48vw;
	    top:55vh;
	    transition: all .5s ease-in-out;
	}
	
	#navPhotos img 
	{
		position:absolute;
	    margin: auto;
	    left: 0; 
	    right: 0;
	    top: 0;
	    bottom: 0; 
	    height:18vh;
	    transition: all .5s ease-in-out;
	}

	/*------------------------*/

	#navHours
	{
  		position: absolute;
		margin: auto;
		left: 52vw;
		right:97vw;
		top:55vh;
		transition: all .5s ease-in-out;
	}

	#navHours img 
	{
		position:absolute;
	    margin: auto;
	    left: 0; 
	    right: 0;
	    top: 0;
	    bottom: 0; 
	    height:18vh;	    
	    transition: all .5s ease-in-out;
	}	
	
	/*------------------------*/

	#navPinball
	{
	  	position: absolute;
	    margin: auto;
	    left:3vw;
	    right:48vw;
	    top:75vh;
	    transition: all .5s ease-in-out;
	}
	
	#navPinball img 
	{
		position:absolute;
	    margin: auto;
	    left: 0; 
	    right: 0;
	    top: 0;
	    bottom: 0; 
	    height:18vh;	    
	    transition: all .5s ease-in-out;
	}
	
	/*------------------------*/

	#navBoards
	{
	  	position: absolute;
	    margin: auto;
	    left:52vw;
	    right:97vw;
	    top:75vh;
	    transition: all .5s ease-in-out;
	}
	
	#navBoards img 
	{
		position:absolute;
	    margin: auto;
	    left: 0; 
	    right: 0;
	    top: 0;
	    bottom: 0; 
	    height:18vh;	    
	    transition: all .5s ease-in-out;
	}
	
	.pinballBody
	{
	
		background: 
			url(/images/layout/back_pinball3.png)	
			left top no-repeat,	
			url(/images/layout/back_pinball2.png) 
			left top no-repeat, 
			url(/images/layout/back_pinball.png) 
			left top no-repeat; 
		background-size: auto 100vh, auto 100vh, auto 100vh;
		background-color:black;
	}

}

	
    
#navPinballTop
{
	opacity:0;
}
	
#navPinballTop:hover
{
	opacity:1.0;
}


#navMenuTop
{
	opacity:0;
}

#navMenuTop:hover
{
	opacity:1.0;
}


#navEventsTop
{
	opacity:0;
}

#navEventsTop:hover
{
	opacity:1.0;
}

#navBoardsTop
{
	opacity:0;
}

#navBoardsTop:hover
{
	opacity:1.0;
}

#navHoursTop
{
	opacity:0;
}

#navHoursTop:hover
{
	opacity:1.0;
}

#navPhotosTop
{
	opacity:0;
}

#navPhotosTop:hover
{
	opacity:1.0;
}