@charset "UTF-8";
/*
Responsive design styles

resizing the window on desktop browsers allows the media queries to be 
checked for accuracy
 
handle high pixels per inch device (ppi) which appear to have the same 
number of 'points'
 
Targeting high-ppi devices, e.g. iPhone retina, where 1px in CSS may translate
to multiple pixels onscreen (also happens in zoom: mode)
http://blog.iwalt.com/2010/06/targeting-the-iphone-4-retina-display-with-css3-media-queries.html
 
NOTE: iOS can use "max-device-width", but other browsers expect "max-width"
 
 */
 
/*special CSS background images for iPhone Retina*/
@media screen and (-webkit-min-device-pixel-ratio: 2) {
	
	/* Heading kerning pairs and ligatures */
	body {
			text-rendering: optimizeLegibility;
	}
	
	/*high-resolution images go here*/
	
}

/*
other high-resolution devices
http://menacingcloud.com/?c=highPixelDensityDisplays
http://miniapps.co.uk/blog/post/targeting-iphone-4-using-css-media-queries
to make these work, enable image resizing for these image, rather than 
creating separate images for each high-ppi devices
*/

@media screen and (min-moz-device-pixel-ratio: 1.5),
	   screen and (-o-device-pixel-ratio:3/2) 
	   screen and (min-device-pixel-ratio:1.5) {
	
	/* Heading kerning pairs and ligatures */
	body {
			text-rendering: optimizeLegibility;
	}
	
	/*high-resolution images go here*/
				
} 

/* 
media queries aimed at styles (layout) on different screens - this is 
where we enable "responsive web design 

	we test for:
	1. screen width
	2. current layout being viewed by user (portrait or landscape)
 
we don't use the orientation: style since older iPhones don't support 
it. We DO use it on the iPad, all versions of which do support it
*/

/* Large screens width=1024, height=682.667 */
@media only screen
	and (min-width : 1824px) {
	chrome {
			display:block;
		}
	#game {
			width:1024px;
			height:683px;
		}
	.logo {
			font-size:8.5em;
			}
	#reporter:after {content: "greater than 1824px desktop"; }	
}

/* Desktops and laptops width=1024, height=682.667 */
@media only screen and (min-width : 1025px) {
	
	body {
		min-width:1124px;
	}
	
	.chrome {
			display:block;
		}
		
	.main-header, .main-footer {
		height:90px;
		background-color:#CCC;
		position:relative;
	}
	
	.main-header {
		border-bottom:6px solid white;
	}
	
	.main-footer {
		border-top:6px solid white;
	}
	
	/* pulls the nav to the top right portion of screen */
	.main-header nav {
		position:absolute;
		top:0;
		right:0;
	}
	
	/* inline icon on far left */
	#site-icon {
		position:absolute;
		top:0;
		left:0;
	}
	
	/* main page title */
	.main-header h1 {
		margin-left:100px;
		padding-top:5px;
		font-family:BoogalooRegular, sans-serif;
		font-size:3.0em;
		color:#666;
		text-shadow: 1px 1px 2px rgb(255, 255,255),
				-1px -1px 2px rgb(255, 255, 255),
				1px 2px 2px rgb(0,0,0);
		
	}
	
	/* top right menu */
	.main-header nav ul li {
		font-family: BoogalooRegular, Arial, sans-serif;
		font-size:1.2em;
		display:inline-block;
		margin-top:6px;
		margin-right:15px;
	}
	
	/* Games: Action Games */
	.body-header {
		color:#FFF;
		font-family: BoogalooRegular, Arial, sans-serif;
		font-size:1.5em;
		padding:10px;
		
	}
	
	/*this center-aligns all text inside the game */
	.content {
		text-align:center;
		background-color:#333;
		padding-bottom:40px;
	}

	#game {
			margin:auto;
			width:1024px;
			height:683px;
		}
	.logo {
			font-size:8.5em;
		}
		
	#reporter:after { content:"1224px portrait"; }
}

/* styles for ipad, either orientation */
@media (min-width: 768px) and (max-width : 1024px) {
	
	.chrome {
			display:block;
		}
		
	#site-icon {
			display:none;
		}
		
	.main-header {
		height:1.2em;
		background-color:#CCC;
		position:relative;
	}
	
	.main-footer {
		display:none;
	}
	
	/* pulls the nav to the top right portion of screen */
	.main-header nav {
		position:absolute;
		top:0;
		right:0;
	}
		/* top right menu */
	.main-header nav ul li {
		font-family: BoogalooRegular, Arial, sans-serif;
		font-size:1em;
		display:inline-block;
		margin-top:6px;
		margin-right:15px;
	}
	
		.main-header h1 {
		margin-left:16px;
		padding-top:0px;
		font-family:BoogalooRegular, sans-serif;
		font-size:2em;
		color:#666;
		text-shadow: 1px 1px 2px rgb(255, 255,255),
				-1px -1px 2px rgb(255, 255, 255);
		
	}

		/* Games: Action Games */
	.body-header {
		display:none;
	}
	
	.main-footer {
		display:none;
	}
	
	
	
	#game {
			width:683px;
			height:455px;
		}
	.logo {
			font-size:6.4em;
		}
	#reporter:after { content:"iPad tablet, either orientation"; }
}

/* iPad landscape styles 1024x768 */
@media (min-width: 768px) and (max-width : 1024px) and (orientation: landscape) {

	#game {
			width:1024px;
			height:683px; 
		}
	.logo {
			font-size:6.4em;
		}

	#reporter:after { content:"iPad tablet, landscape"; }
}

/* iPad portrait styles 1024x768, 1:5:1 is 682.66 height, 1024 width */
@media (min-width: 768px) and (max-width : 1024px) and (orientation: portrait) {

	#game {
			width:768px;
			height:1000px;
		}
	.logo {
			font-size:6.4em;
	}
	#reporter:after { content:"iPad tablet, portrait"; }
}
 
/* 1.5:1 iPhone doesn't handle the orientation: style, so do it like this */
@media (min-width: 321px) and (max-width: 480px) {
	#game {
		width:480px;
		height:320px;
	}
	
	.logo {
			font-size:4em;
		}
		
	#game ul.menu li button {
		width:9em;
	
	}		
	#reporter:after {content:"landscape smart phone"; }
}
 
 /* 1.5:1 iPhone doesn't handle the orientation: style, so do it like this */
@media (max-width: 320px) {
	
	#game {
			width:320px;
			height:480px;
	}
	.logo {
		font-size:4em;
	}
	
	#game ul.menu li button {
		width:8em;
	
	}
	
	#reporter:after { content:"portrait smart phone"; }
}

@media (max-width:319px) {
	
	#game {
			width:15em;
			height:20em;
	}
	
	.logo {
		font-size:3em;
	}
	
	#reporter:after { content: "feature phone"; }
	
}