/*

Screen Stylesheet for jQuery Realistic Hover Effect
Created by Adrian Pelletier
http://www.adrianpelletier.com

*/


/* =Imports
============================================================================== */

	@import url("http://www.alkalimedia.com/wp-content/themes/gear/resets.css");


/* =Base Structure
============================================================================== */
	
	body {
		font: 12px/1.5 Georgia, Palatino, "Palatino Linotype", serif;
		background: #eaf5ff;
		color: #555;
		}

	#content {
		width: 800px;
		margin: 100px auto;
		}
		
	h1 {
		font-size: 50px;
		color: #7f2d2d;
		text-align: center;
		}
		
	p {
		text-align: center;
		}

/* =Navigation
============================================================================== */

	/* =Reflection Nav
	-------------------------------------------------------------------------- */
		

			
	/* =Shadow Nav
	-------------------------------------------------------------------------- */
	
			
		#nav-shadow li {
			margin-right: 13px;
			width: 300px;
			height: 180px;
			position: relative;
			float: left;
			}
			
		#nav-shadow a, #nav-shadow a:visited, #nav-shadow a, #nav-shadow a:hover {
			margin: 0 auto;
			width: 244px;
			height: 165px;
			text-indent: -9999px;
			overflow: hidden;
			background: url(http://www.alkalimedia.com/wp-content/themes/gear/images/callouts.png) no-repeat;
			display: block;
			position: relative;
			z-index: 2;
			}
			
		/* Button Callouts */
		
		#nav-shadow li.button-color-1 a {
			background-position: -2px -2px;
			}
			
		#nav-shadow li.button-color-2 a {
			background-position: -255px -2px;
			}
			
		#nav-shadow li.button-color-3 a {
			background-position: -505px -2px;
			}
			
			
		/* Button Shadow */
		
		#nav-shadow li img.shadow {
			margin; 0 auto;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 1;
			float: center;
			}