/*
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;}
h2				{color:#fff; font-size:70px; font-weight:bold; letter-spacing:-5px;
					margin:0; position:absolute;
					text-shadow:2px 2px 8px #000;}
					
h3				{color:#fff; font-size:30px; margin:0; padding:0; letter-spacing:-1px; line-height:25px;}

h4				{color:#fff; font-size:20px; margin:0; padding:0;}


/*
 * Here’s the code for all the
 * PAGES
 */

.page			{overflow:auto;}

/*	HOME			*/
h1				{display:none;}

#home_logo		{margin:0 40px 0 0;}

#home_blurb		{left:10px; height:160px; top:70px; width:580px; overflow:hidden;}

#home_links		{left:10px; right:330px; top:290px; background:url('/images/rgb/0,0,0,0.8.png'); padding:10px;}
.home_links_button	{display:block; width:110px; height:50px; padding:0; margin:0;
						text-indent:-1000em;
						background:url('/images/home_buttons.png') 0 0; margin:0 90px 0 0;}

#home_links_flickr	{background-position:-110px 0;}
#home_links_twitter	{background-position:-220px 0;}

#home_work		{position:absolute; right:10px; top:70px; width:300px;}
#home_work ul	{list-style:none; margin:0; padding:0;}
#home_work li	{list-style:none; margin:0 0 5px 0; padding:10px;
					background:url('/images/rgb/0,0,0,0.8.png'); width:280px; height:165px;}
#home_work h3	{position:absolute; top:0; left:0; padding:7px; font-size:16px; background:url('/images/rgb/0,0,0,0.7.png');}
#home_work a	{border:none;}

#home_blogposts	{left:10px; top:380px; width:260px; min-height:180px; padding-bottom:40px;}

#home_labs		{left:330px; top:380px; width:260px; min-height:200px;}
#home li .kind	{color:#999; font-size:10px;}

#home .more		{position:absolute; right:15px; bottom:15px; text-align:right; margin:10px 0 0 0; padding:0;}

/*	FOLIO			*/

#folio			{overflow:hidden;}
#folio_fixed	{position:absolute; right:55%; top:20%; z-index:10;}

#folio h2		{top:0; left:0; position:relative;}

#folio_intro	{position:relative; left:20px; color:#fff; font-weight:bold; width:300px;}
#folio_intro .big	{font-size:20px;}

#folio_content	{padding-bottom:60px;}

#folio .content	{right:20px; width:400px; top:60px; overflow:auto;}
#folio h3		{margin:40px 0 0 0;}
#folio h3.first-child	{margin:0;}
#folio .banner	{border:5px solid #fff; margin:5px -5px 5px -5px;}

/*	ABOUT			*/

#about h2		{color:#fff; position:relative;}

#about_content	{top:200px; width:400px; right:30px; background:url('/images/rgb/0,0,0,0.9.png');}


/*	CONTACT			*/

#contact h2		{position:relative;}

#contact_paper	{position:absolute; width:445px; height:634px; top:70px; left:70px;
					background:url('/images/contactPaper.png');
					color:#000; text-shadow:none;}

#contact_info	{position:absolute; left:500px; top:120px; padding:20px 20px 20px 30px;
					width:350px; margin:0; background:url('/images/rgb/0,0,0,0.9.png');}


#contact fieldset		{border:none; position:absolute; top:20px; left:15px;
							line-height:15px;}
#contact legend			{font-size:26px; font-weight:bold; margin:0; padding:0; line-height:26px; color:#000;}
#contact label			{width:100px; display:block; text-align:right;
							font-weight:bold; font-size:13px; letter-spacing:-1px;
							margin:-1px 3px 7px 0; padding:0 0 0 0;}
#contact fieldset p, #contact fieldset div {clear:both;}
#contact fieldset p *	{float:left;}

/*#contact form			{position:relative; top:0; left:0; right:0; bottom:0; height:100%;}*/

#contact input, #contact textarea {font-size:15px; background:url('/images/rgb/0,0,0,0.1.png'); border:none;
							font-family:Helvetica, Arial, sans-serif; padding:3px; line-height:20px;}

#contact input			{/*border-bottom:2px dotted #777;*/ width:200px; vertical-align:middle;}
#contact textarea		{width:260px; height:200px; overflow:auto;}

#contact_sendcopy		{text-align:right; float:none; padding:10px 40px 0 0;}
#contact_sendcopy input	{width:auto; display:inline; float:none;}
#contact_sendcopy label	{width:auto; display:inline; float:none;}
#contact_sendcopy p, #contact .note		{width:auto; display:inline; float:right; margin:0; padding:0; font-size:10px;}


input#contact_form_send		{background:url('/images/contact_form_send.png') 0 0 no-repeat; width:100px; height:50px;
								text-indent:-1000em; border:none; float:right; clear:both;
								position:relative; bottom:0; right:40px;}
#contact_form_send:hover, #contact_form_send:focus	{background-position:0 -50px;}
#contact_form_send:active							{background-position:0 -100px;}

.contact_message		{padding:10px;
							background:url('/images/rgb/255,255,255,0.2.png');}

#contact_error			{border:3px solid #ff0000;}
#contact_thanks			{border:3px solid #93cd40;}

#contact_paper .error	{color:#ff0000; float:right;}

/*.contact_message		{position:absolute; top:40px; left:40px; width:300px;}
.contact_message h3		{color:#000;}*/

#contact_superfun		{}









#background	{position:absolute; width:100%; height:100%; top:0; bottom:0; left:0; right:0;
				overflow:hidden; z-index:0;}

#background div	{position:absolute; width:100%; height:100%; top:0; bottom:0; left:0; right:0; background-position:50% 0;}


#bg_folio	{background-image:url('/images/bg2010/folio.png'); display:none;}
#bg_about	{background-image:url('/images/bg2010/about.png'); display:none;}
#bg_contact	{background-image:url('/images/bg2010/contact.png'); display:none;}
#bg_home	{background-image:url('/images/bg2010/home.png');}