/* RESET */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; }
ul,ol { list-style: none; }
fieldset,img { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }

/* LAYOUT */
.clear { clear: both; }
.clearer { clear: both; display: block; margin: 0; padding: 0; height: 0; line-height: 1px; font-size: 1px; }

/* TYPE */
body { font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; color: #fff; text-align: center; }

p { margin-bottom: 18px; }
h1 { font-weight: bold; font-size: 24px; line-height: 36px; margin-bottom: 18px; }
h2 { font-weight: bold; font-size: 16px; line-height: 18px; margin-bottom: 18px; }
h3 { font-weight: bold; font-size: 1em; line-height: 18px; }
h4 { font-weight: bold; font-size: 10px; line-height: 18px; }

a { color: #fff; }

#container {
	width: 931px;
	margin: auto;
}



/* HTML site - general */

#pageWrapper {
	text-align: left;
	margin: 30px auto;
}
#headerWrapper {
	margin-bottom: 10px;
}
#roundedTopEdgesWrapper {
	position:absolute;
	width: 100%; height: 24px;
	background: url('/img/html-site/background-rounded-edges-top.png') no-repeat;
	top: 0; left: 0;
}
#bodyWrapper {
	background: url(/img/html-site/main-background.jpg) repeat-y top left;
	position: relative;
}
#footerWrapper {
	clear: left;
	background: url('/img/html-site/bottom-gradient.png') repeat-x;
	height: 58px;
	text-align: center;
}


.nav {
	color: #c1c1c1;
}
	.nav ul li {
		display: inline;
	}
		.nav ul li a {
			color: #c1c1c1;
			text-decoration: none;
			font-size: 13px;
		}
			.nav ul li a:hover {
				color: #fff;
			}

#headerWrapper .nav {
	padding-left: 31px;
}
#headerWrapper .nav ul li {
	margin-right: 90px;
}
		
#footerWrapper .nav {
	padding-top: 60px;
	font-size: 90%;
	color: #888;
}
	#footerWrapper .nav a {
		font-size: 100%;
		color: #888;
	}
		#footerWrapper .nav a:hover {
			color: #fff;
		}
#footerWrapper .nav ul li.separator {
	margin: 0 30px;
}




/* HTML site - home */
#homeWrapper #topWrapper {
	position: relative;
}
	#homeWrapper #topWrapper {
		height: 300px;
	}
	#homeWrapper #topWrapper .logo {
		position: absolute;
		top: 119px;
		left: 160px;
	}
	#homeWrapper #topWrapper .experience {
		position: absolute;
		top: 95px;
		left: 600px;
	}
	
#homeWrapper #tabsWrapper {
	padding-left: 4px;
}
	#homeWrapper #tabsWrapper div {
		width: 184px;
		height: 131px;
		overflow: hidden;
		float: left;
		margin-right: 1px;
		background: url('/img/html_website_tab_background.png') no-repeat;
	}
		#homeWrapper #tabsWrapper div h2 {
			font-size: 12px;
			padding-left: 10px;
			padding-top: 3px;
			margin: 0px;
			height: 22px;
			overflow: hidden;
		}
			#homeWrapper #tabsWrapper div a {
				float: left;
				height: 87px;
				width: 100%;
				overflow: hidden;
			}
				#homeWrapper #tabsWrapper div a img {
					float: left;
				}
				
#backWrapper {
	float: right;
	margin-right: 80px;
	margin-top: 40px;
}	
	#backWrapper a {
		text-decoration: none;
	}	
		#backWrapper a:hover {
			text-decoration: underline;
		}	
				
#videoWrapper {
	float: left;
}
				
#aboutUsWrapper {
	text-align: center;
}
	#aboutUsWrapper .image {
		padding-top: 17px;
	}

	#aboutUsWrapper #biographyWrapper {
		margin-left: 15px;
		margin-top: 5px;
		text-align: left;
	}
		#aboutUsWrapper #biographyWrapper .biography {
			width: 294px;
			overflow: hidden;
			float: left;
			margin-right: 10px;
		}
			#aboutUsWrapper #biographyWrapper .biography .top {
				height: 10px;
				width: 100%;
				background: url(/img/html_website_about_us_background_top.png) no-repeat;
			}
			#aboutUsWrapper #biographyWrapper .biography .body {
				width: 100%;
				background: url(/img/html_website_about_us_background_body.png) repeat-y;
			}
				#aboutUsWrapper #biographyWrapper .biography .body .text {
					margin: 0px 20px;
					padding: 10px 0px;
				}
			#aboutUsWrapper #biographyWrapper .biography .bottom {
				height: 10px;
				width: 100%;
				background: url(/img/html_website_about_us_background_bottom.png) no-repeat;
			}
	





#tabWrapper {
	padding-top: 30px;
	margin-left: 44px;
}
	#tabWrapper #textWrapper {
		/*margin: 10px 20px;*/
		width: 400px;
		float: left;
		margin-right: 20px;
	}
		#tabWrapper #textWrapper .text {
			
		}
			#tabWrapper #textWrapper .text h1 {
				font-size: 20px;
				margin-bottom: 10px;
			}
	#tabWrapper #projectsWrapper {
		/*margin: 10px 20px;*/
	}			


#video {
	background: #000;
	width: 380px;
	height: 230px;
	float: right;
	margin-left: 20px;
	margin-bottom: 10px;
}

#projectsWrapper {
	padding-left: 3px;
}
	table.roundRect {
		border-collapse: collapse;
	}
		table.roundRect td, table.roundRect th {
			padding: 0;
			margin: 0;
		}
		table.roundRect tr.top {
			height: 10px;
		}
			table.roundRect tr.top td.left {
				background: url(/img/html_website_about_us_background_top.png) no-repeat bottom left;
			}
			table.roundRect tr.top td.center {
				background: url(/img/html-site/tab-background-repeat.png) repeat;
			}
			table.roundRect tr.top td.right {
				background: url(/img/html_website_about_us_background_top.png) no-repeat bottom right;
			}
		table.roundRect tr.bottom {
			height: 10px;
		}
			table.roundRect tr.bottom td.left {
				background: url(/img/html_website_about_us_background_bottom.png) no-repeat top left;
			}
			table.roundRect tr.bottom td.center {
				background: url(/img/html-site/tab-background-repeat.png) repeat;
			}
			table.roundRect tr.bottom td.right {
				background: url(/img/html_website_about_us_background_bottom.png) no-repeat top right;
			}
			
		table.roundRect tr.body td  {
			padding: 0;
			margin: 0;
			padding-top: 5px;
			width: 104px;
			vertical-align: top;
			text-align: center;
			background: url(/img/html-site/tab-background-repeat.png) repeat;
		}
		table.roundRect tr.body th {
			background: url(/img/html-site/tab-background-repeat.png) repeat;
			padding-bottom: 20px;
			font-weight: bold;
		}
			table.roundRect tr.body td.left, table.roundRect tr.body td.right {
				width: 12px;
				font-size: 0;
			}
	#projectsWrapper a {
			text-decoration: none;
	}
		#projectsWrapper a span {
			font-size: 12px;
			color: #fff;
			text-decoration: none;
			font-weight: normal;
		}
		#projectsWrapper a:hover span {
			text-decoration: underline;
		}
	
	
#clipSelectorWrapper {
	text-align: center;
}		
	#clipSelectorWrapper a {
		text-decoration: none;
	}		
	#clipSelectorWrapper a:hover, #clipSelectorWrapper a.active {
		text-decoration: underline;
	}		

td#video {
	width: 380px;
	height: 230px;
	margin: 0;
	padding: 0;
	background: #000;
}

#noFlashWrapper {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 294px;
}
	#noFlashWrapper .top {
		height: 10px;
		width: 100%;
		background: url(/img/html_website_about_us_background_top.png) no-repeat;
	}
	#noFlashWrapper .body {
		width: 100%;
		background: url(/img/html_website_about_us_background_body.png) repeat-y;
	}
		#noFlashWrapper .body .content {
			width: 260px;
			margin-left: 20px;
			
		}
	#noFlashWrapper .bottom {
		height: 10px;
		width: 100%;
		background: url(/img/html_website_about_us_background_bottom.png) no-repeat;
	}
	
	#noFlashWrapper a {
		color: #fff;
	}
	#noFlashWrapper a.close {
		float: right;
		margin-right: 20px;
		text-decoration: none;
	}
		#noFlashWrapper a:hover {
			text-decoration: underline;
		}