/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
Typography
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
@import url("typography.css"); 


/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
Global: Layout and colors
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
/* 
Global whitespace reset 
*/
body	*	{
	margin: 0;
	padding: 0;
	}
html	{
	color: #000;
	background-color: #fff;
	}

body	{
	color: #000;
	background-color: #fff;
	}

html,	body	{
	margin: 0; 
	padding: 0;
	}

#everything-container	{
	color: inherit;
	background-color: #fff;
	padding-bottom: 2ex;
	width: 54em;
	margin: 0 auto; 
	}

a,	a:visited	{
	background-color: inherit;
	color: #036;
	}

a:hover	{
	background-color: inherit;
	color: #f30;
	}
	
.page-title	{
	}

	.page-title	h1	{
		/*Careful: Measurements depend on element font size*/
		background-color: inherit;
		color: #999;
		padding-top: 1ex;
		padding-left: .2em; 
		}

		.page-title	h1	a,	.page-title	h1	a:visited {
			text-decoration: none;
			background-color: inherit;
			color: #999; 
			}

			.page-title	h1	a:hover {
				background-color: inherit;
				color: #f30; 
				}

.intro	{
	margin-top: 2ex;
	display: block;
	}	

	.intro	p	{
		padding-left: .5em;
		padding-right: .5em;
		}

	.intro	ul	{
		padding-left: 2.5em;
		}

	.promotion {
		margin-left: 45em;
		}
	.promotion	a	{
		font-size: .9em;
		}

ul#footer	{
	font-size: .9em;
	list-style-type: none;
	border-top: 1px solid #999;
	display: block;
	margin-top: 6ex;
	padding-left: .5em;
	clear: both; 
	}

	#footer li	{
		background-color: inherit;
		color: #999;
		display: inline;
		padding-right: 1em;
		}

		#footer	li	a	{
			background-color: inherit;
			color: #999;
			}

			#footer	li	a:hover	{
				background-color: inherit;
				color: #f30;
				}

		#footer li.w3c	{
			float: right;
			padding-right: .5em;
			}
				
				
/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
Content: Layout
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
.topic	{
	padding-top: .5ex;
	margin-top: 5ex; 
	border-top: 2px solid #9cc; 
	display: block;
	clear: both;
	}

	.topic	h2	{
		/*Careful: Measurements depend on element font size*/
		float: left; 
		padding-top: .3ex;
		padding-bottom: .5ex;
		padding-left: .32em; 
		clear: left;
		width: 12.8em; 
		/*Hack: Tantek's voice-family hack, hides all below from IE*/
		voice-family: "\"}\"";
		voice-family: inherit;
		width: 12.4em; 
		}

/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
Content: Info Group and Body Group
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
h3	{
	padding-right: .5em;
	padding-left: .5em;
	}

.info-group,	.body-group	{
	padding-top: .5ex;
	padding-bottom: .5ex;
	display: block;
	}

.info-group	{
	float: left; 
	clear: left; 
	width: 18em; 
	}

	.info-group	h3	{
		padding-right: .5em;
		padding-left: .5em;
		/*Hide label on most pages, show on some pages*/
		display: none; 
		}

	.info-group p	{
		padding-left: .5em;
		padding-right: .5em;
		}

.body-group	{	
	}

	.body-group	h3	{
		padding-right: .5em;
		padding-left: .5em;
		margin-left: 18em; 
		/*Hide label on most pages, show on some pages*/
		display: none; 
		}
	
	#section-example	.body-group	h3,	#section-contact	.body-group	h3,	#section-profile	.body-group	h3, #section-home	.body-group	h3	{
		/*Hide label on most pages, show on some pages*/
		display: block; 
		}
	
	.body-group	ul	{
		margin-left: 18em; 
		padding-left: .5em;
		padding-right: .5em;
		clear: none;
		}

	.body-group	p, .body-group ul	{
		}

	.body-group	p	{
		margin-left: 18em; 
		padding-left: .5em;
		padding-right: .5em;
		margin-bottom: 1ex; 
		clear: none;
		}

	.body-group	ul	{
		padding-left: 1.7em;
		margin-bottom: 1ex;
		}

/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
Content: Gallery
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
#gallery	.thumbs	{
/* Hide thumbs until the script shows them */
	display: none;
	}

#gallery	h3	{
	display: none;
	}

#gallery	noscript	p	{
	padding-left: .5em;
	padding-right: .5em;
	}

#section-experience .thumbs a,	#section-portfolio .thumbs a {
	width: 17em; 
	height: 7ex; 
	}

ul.thumbs	{
	margin-left: .5em; 
	margin-right: .5em;
	padding-left:0;
	list-style-type: none;
	}
	
	.thumbs a {
		margin-bottom: 1ex; 
		border: 1px solid #9cc; 	
		width: 8em; 
		height: 4ex; 
		display: block;
		}

	.thumbs a:hover {
		border-color: #036; 	
		}

ul#example-group {
	margin-left:18em; 
	list-style-type: none;
	}

	#example-group p {
		padding-left: .5em;
		padding-right: .5em;
		}

	#example-group li {
		display:none;
		}

	#example-group	img	{
		margin-left: .5em;
		border: 1px solid #ccc;
		}
	#example-group	object	{
		margin-left: .5em;		
		}

.caption	{
	color: #999;
	background-color: inherit;
	padding-left: .5em;
	margin-bottom: 3ex; 
	}

#example-group li#example0 {
/* Initialize first example */
	display: block; 
	}

/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
Banner
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
#banner	{
	background-color: inherit;
	color: inherit;
	position: relative;
	margin-bottom: 7ex;
	width: 18em;
	}

	#banner	h1	{
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: .05em;
		font-size: 1em;
		border-bottom: 1ex solid #09c;
		clear: none;
		}
	
		#banner	h1	a	{
			background-color: inherit;
			color: #006;
			text-decoration: none;
			padding-top: 2ex;
			padding-right: .5em;
			padding-bottom: 1ex;
			padding-left: .5em;
			height: 3ex; 
			display: block;
			}

		#banner	h1	a:hover	{
			background-color: #f30;
			color: #fff;
			}

/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
Navigation
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
#nav-container {
	position: absolute;
	top: 0;
	margin-left: 18em; 
	}
	
	ul#navlist {
		list-style-type: none;
		font-size: 1em;
		}
	
	ul#navlist li {
		border-bottom: 1ex solid #036;
		margin-bottom: 7ex;
		float: left;
		width: 9em;
		}
	
		ul#navlist li a {
			text-decoration: none;
			font-weight: bold;
			background-color: inherit;
			color: #999; 
			padding-top: 2ex;
			padding-right: .5em;
			padding-bottom: 1ex;
			padding-left: .5em;
			height: 3ex;
			display: block; 
			}
			
		ul#navlist li a:hover {
			color: #fff;
			background-color: #f30;
			}
			

/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
Hacks
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
/* 
Fix IE float problem
Article: IE Three Pixel Text-Jog 
URL: www.positioniseverything.net/explorer/threepxtest.html
Notes: 
1. Because of my layout, this touches up a float problem in IE, but does not solve it. 
2. h3 should be included here, but including it causes the first h3 to lose its left margin. What's going on?
3. IE5.x pushes ul too far right, which is uglier than the original float problem. I will use the escape hack to show to only IE-win, then use the voice-family hack to hide it from IE5.x. 
4. This hack needs to be at the bottom of the style sheet because it was causing rendering problems in IE5. What's going on?  
*/
/* Show to IE-win only. Hide from IE5-mac. \*/
.body-group	ul,	.body-group	p,		.body-group	p	a	{
	voice-family: "\"}\"";
	voice-family: inherit;	
	height: 1%;
	}
/* End show to IE-win only */