/*
Here's my stylesheet

No resets or frameworks here! Why bother?
*/


/* I've got to make both HTML and BODY have 100% height. Hide the overflow, so the scrollbars disappear */
html, body	{margin:0; padding:0; height:100%; width:100%; overflow:hidden; min-width:960px;}

/* It’s HELVETICA, then ARIAL (not the other way round!) */
html		{font-family:Helvetica, Arial, sans-serif; font-size:10pt;
				/* Let’s not do this today…
				-webkit-transform:rotate(180deg);*/
				}

body		{background:#00B6D1; text-shadow:0 1px 2px #000;}







p				{line-height:1.7em;}
li				{line-height:1.4em; margin: 0.5em 0 0.5em 0;}





a, a:link, a:visited	{color:#4ad7e5; font-weight:bold; text-decoration:none; padding:0px;
							-webkit-transition: border 1s linear;}
/* Don't forget the focus style */
a:hover, a:focus		{color:#a1e0e6; border-color:#fff;}
a:active				{color:#fff; padding-bottom:1px;}

p a, li a				{border-bottom:1px solid #666;}
.horizontal a			{border:none; padding:0;}


a img			{border:none;}


a.button		{border:1px solid #4ad7e5; padding:5px;
					border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px;}
a.button:hover	{}


.invisible		{display:none;}


.content code	{background:#555; padding:2px;}
.content .brackets	{opacity:0.5;}

.alignleft		{float:left;}
.alignright		{float:right;}
.clear			{clear:both;}




#wrapper	{height:100%; width:100%; overflow:hidden; zoom:1; position:relative; z-index:10;}


.page		{position:relative;
			margin:0 0 0 0; padding:0;
			width:100%; height:100%; zoom:1;}

.page_width	{position:relative; width:960px; height:100%; margin:0 auto;}
	
.content, .content_center	{padding:20px; margin:0 0 0 0;
				position:absolute; overflow:auto;
				background:url('/images/rgb/0,0,0,0.7.png'); color:#fff;}

.content_center	{width:400px; margin:0 auto;}





#footer		{position:absolute; z-index:48; bottom:0px; right:50%; width:298px;
				margin:0 -480px 0 0; padding:4px 9px 4px 4px; height:12px; line-height:12px; font-size:11px;
				background:#000; color:#fff; opacity:0.5; text-align:right;}



/* END OF COMMON STYLES */


/* Makes lists go horizontal (eg, the navigation bar) */
.horizontal		{list-style:none; text-indent:0; margin:0; padding:0;}
.horizontal li	{float:left; list-style:none; text-indent:0; margin:0; padding:0;}


#nav		{position:absolute; z-index:50; margin:0 0 0 -480px; padding:0;
				top:0px; left: 50%; width:960px; height:40px;
				background:url('/images/header_bg.png'); color:#fff;
				text-align:center; font-family:Helvetica, Arial, sans-serif;}

#nav ul		{margin:0 7px 0 7px; padding:0;
				height:40px; top:0; position:absolute;}
#nav li		{margin:0 1px 0 0; line-height:30px;}
#nav a		{display:block; padding:5px; width:90px;
				color:#fff; background:url('/images/header_link_bg_vertical.png') 0 0 no-repeat;
				text-decoration:none; font-weight:bold; font-size:15px; text-align:center;
				font-family:Helvetica, Arial, sans-serif;
				text-shadow:0px 1px 2px rgba(0,0,0,0.5);}

#nav_page	{left:211px;}
#nav_other	{left:615px;}

#nav #logo	{background:url('/images/logo.png'); width:68px; height:33px;
				position:absolute; display:block; padding:0; margin:0; left:143px; top:3px;
				text-indent:-1000em;}
body		{background:url('/labs/bgTile.gif') #222 50% 50%;}

h1			{position:absolute; top:100px; left:100px;
				font-size:29em; color:#4ad7e5; margin:0; padding:0; line-height:0.8em;
				opacity:0.1; text-shadow:0 -2px 0px #fff, 0 3px 2px #000;}
				
#wrapper	{overflow:auto;}

.page_width	{padding:60px 260px 60px 40px; width:700px;}
.page_width:hover .labs_box {opacity:0.6;}

#labs_blurb	{width:260px; top:100px; right:50%; margin:0 -470px 0 0; -webkit-transform:/*rotateY(-10deg)*/;}


.labs_box	{width:260px; height:260px; position:relative; background:url('/images/rgb/0,0,0,0.2.png'); float:left;
				margin:0 20px 20px 0;
 				-webkit-transform: /*rotateX(10deg)*/ scale(0.9) /*perspective(800)*/; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 0.4s;}

.page_width:hover .labs_box:hover	{background:url('/images/rgb/0,0,0,0.4.png'); opacity:1; text-shadow:0 4px 4px #000; padding:17px 20px 23px 20px;
											-webkit-transform: /*rotateX(0deg)*/ scale(1);}

.labs_box h2	{font-size:3em; line-height:0.9em; margin:0; padding;0;}