html, body{ margin: 0; padding: 0; height: 100%; }
html>body #container { height: auto; }
body{
	background:#f5f2e1;
	text-align:center;
}
/* typography */
h1 {
	margin: 0; padding: 5px 0;
}
h3{
	margin: 0; padding: 5px 0;
	line-height: 1.2em;
}
a:link{ color: #568094; text-decoration: none; }
a:visited{ color: #568094; text-decoration: none; }
a:hover{ color: #f60; text-decoration: none; }

#proj_title h3{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #568094;
}
#proj_desc table td, #proj_desc p{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #568094;
	line-height: 1.4em;
}
#pidx_content {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color: #568094;
}
#ss, #photo_content, #profile_text p {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color: #568094;
}
#profile_text p, #profile_text table {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	line-height: 1.3em;
	color: #57471f;
}
#profile_text td.title {
	font-weight: bold;
	color: #f60;
}
#profile_text td {
	width: 190px;
	vertical-align: top;
}
#profile_text ul {margin: 3px 0px 15px 15px; padding: 0;}
#profile_text li {padding-bottom: 5px; list-style-image:url(i/bullet_profile.gif)}
#resume_menu {
	position: absolute;
	right: 0; top: 2px;
	margin: 0; padding: 0;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #878265;
}
/* Resume Typography */
#resume_text h1, #resume_text h2, #resume_text h3, #resume_text p, #resume_text small {
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
#resume_text h1 {
	font-size: 24px;
	color: #57471f;
}
#resume_text h2 {
	font-size: 14px;
	color: #f60;
	font-weight: normal;
}
#resume_text h3 {
	font-size: 15px;
	padding-left: 20px;
	padding-bottom: 5px;
	line-height: 0.5em;
	font-weight: normal;
	color: #57471f;
}
#resume_text p, #resume_text ul {
	font-size: 11px;
	line-height: 1.3em;
	padding: 0 0 10px 20px;
	color: #57471f;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
#resume_text small {
	font-size: 10px;
	padding-left: 20px;
	color: #57471f;
}
#resume_text small#head {
	padding-left: 0;
	font-size: 9px;
}
#resume_contact{
	position: absolute;
	right: 0; top: 0;
	text-align: left;
	line-height: 12.5px;
}
#resume_title{
	display: block;
	position: absolute;
	left: 0; top: 0;
	margin: 0; padding: 0;
	width: 165px; height: 28px;
}
#resume_head {
	display: block;
	position: relative;
	height: 35px; 
}
#resume_text ul {
	margin-left: 17px; padding-left: 17px;
	list-style-image:url(i/bullet.gif); 
}
#resume_text li { padding-bottom: 8px;}
/* elements */
hr {
	border: none;
	height: 1px;
	color: #878265; background-color: #878265;
	margin: 0 0 5px;
}
a#enlargeimg span {display:none;}
table { border-collapse: collapse;}

/* pidx */
#pidx_content{
	margin: 0; padding: 20px 15px 120px;
	width: 690px; height: 288px;
}
#pidx_content table td{
	padding:0 5px 20px;
	vertical-align: top;
}
#pidx_content a img{
	border: solid 1px;
}
#pidx_content a:link img, #pidx_content a:visited img{
	*border: solid 1px #568094;
}
#pidx_content a:link:hover img, #menu a:visited:hover img{
	border: solid 1px #f60;
}

/* screenshot */
#ss a img{ border: solid 1px #ccdde5;}
#ss .ss_img a img{ border: 0;}
#ss table, #photo_content table, #pidx_content table {
	margin-left: auto;
	margin-right: auto;
}
#ss table td, #photo_content table td{ text-align: right;}
#ss { text-align: center;}

/* nav */
#nav a span { display: none;}
#nav ul {
	display: inline;
	list-style: none;
	margin: 0; padding: 0;
}
#nav ul li{
	list-style: none;
	margin: 0 0 0 15px; padding: 0;
	float: left;
}
#nav a.nav_a {
	display: block;
	height: 21px;
	margin: 0; padding: 0;
	background-repeat: no-repeat;
	background-position: 0 0;
}
#nav a#portfolio {background-image: url(i/nav_portfolio.gif); width: 67px;}
#nav a#resume {background-image: url(i/nav_resume.gif); width: 48px;}
#nav a#photo {background-image: url(i/nav_photo.gif); width: 90px;}
#nav a#profile {background-image: url(i/nav_profile.gif); width: 49px;}
#nav a#contact {background-image: url(i/nav_contact.gif); width: 57px;}

#nav a.nav_a:link:hover, #nav a.nav_a:visited:hover {background-position: 0 -21px;}
.cat_portfolio #nav a#portfolio, .cat_portfolio #nav a#portfolio:link:hover, .cat_portfolio #nav a#portfolio:visited:hover,
.cat_resume #nav a#resume, .cat_resume #nav a#resume:link:hover, .cat_resume #nav a#resume:visited:hover,
.cat_photo #nav a#photo, .cat_photo #nav a#photo:link:hover, .cat_photo #nav a#photo:visited:hover,
.cat_profile #nav a#profile, .cat_profile #nav a#profile:link:hover, .cat_profile #nav a#profile:visited:hover,
.cat_contact #nav a#contact, .cat_contact #nav a#contact:link:hover, .cat_contact #nav a#contact:visited:hover{
	background-position: 0 -42px;
}

/* slide numbers */
#proj_nav{
	position: relative;
	margin: 0; padding: 0 0 0 10px;
	height: 22px;
	background: #ccdde5;
}
.slide_nav a span { display: none;}
.slide_nav ul { 
	position: relative;
	display: inline;
	margin: 0; padding: 0;
}
.slide_nav ul li {
	list-style: none;
	margin-left: 1px;margin-top: 1px; padding: 0;
	float: left;
}
.slide_nav a.slide_a {
	display: block;
	height: 20px; width: 20px;
	margin: 0; padding: 0;
	background-repeat: no-repeat;
	background-position: 0 0;
}
.slide_nav a.slide_a:link:hover, .slide_nav a.slide_a:visited:hover {
	background-position: 0 -20px;
}
.slide_nav li.on a , #slide_nav li.on a:link:hover, .slide_nav li.on a:visited:hover {
	background-position: 0 -40px;
}
.slide_nav a#s1 {background-image: url(i/slide1.gif);}
.slide_nav a#s2 {background-image: url(i/slide2.gif);}
.slide_nav a#s3 {background-image: url(i/slide3.gif);}
.slide_nav a#s4 {background-image: url(i/slide4.gif);}
.slide_nav a#s5 {background-image: url(i/slide5.gif);}
.slide_nav a#s6 {background-image: url(i/slide6.gif);}
.slide_nav a#s7 {background-image: url(i/slide7.gif);}

#proj_nav #pop {
		float: left;
}
#slide_title {
	display: block;
	width: 43px; height: 20px;
	margin-top: 1px; padding: 0;
	float: left;
	background: url(i/slide_title.gif) no-repeat 0 0;
}
/* pop-ups */
#pop_container {
	position: relative;
	width: 100%;
	text-align: center;
	margin: 0 auto;
    voice-family: "\"}\"";
    voice-family: inherit;
	background: #fff;
}
#pop_top {
	position: relative;
	display: block;
	text-align: left;
	width: 100%; height: 32px;
	margin-bottom: 10px;
	background: #ccdde5;
	border-bottom: 1px solid #568094;
}
.pop_title {
	position: absolute;
	display: block;
	left: 0; top: 0;
	margin: 0; padding: 7px 10px;
	height: 22px;
	float:left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #568094;
}
#pop_top #proj_nav {
	position: absolute;
	margin: 0; padding: 5px 10px;
	height: 22px;
	top: 0; right: 0;
	background: #ccdde5;
}
body.popup { background:#fff;}
/* photo top */
#photo_top {
	position: relative;
	display: block;
	text-align: left;
	width: 720px; height: 32px;
	background: #ccdde5;
}
#photo_title {
	position: absolute;
	display: block;
	left: 0; top: 0;
	margin: 0; padding: 9px 10px;
	height: 22px;
	float:left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #568094;
}
#photo_top #proj_nav {
	position: absolute;
	margin: 0; padding: 5px 10px;
	height: 22px; width: 190px;
	top: 0; right: 0;
	background: #ccdde5;
}
#divider {
	background-image: url(i/divider_horiz.gif);
	background-repeat: repeat-x;
	position: relative;
	display: block;
	height: 4px; width: 719px;
	background-position: 0 0;
	top: 32px; left: 1px;
}
/* splash page */
#splash_content {
	display: block;
	position: relative;
	width: 700px; height: 440px;
	margin: 10px 10px 0 10px; padding: 10px 0 0 0;
	background-image: url(i/splash_bg.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
}
#splash_photos {
	display: block;
	position: relative;
	width: 700px; height: 62px;
	left: 0; top: 117px;
	margin: 0; padding: 0;
	background-image: url(i/splash_photos.jpg);
	background-repeat: no-repeat;
	background-position: 0 0;
}
#splash_btn {
	display: block;
	position: absolute;
	left: 533px; top: 253px;
}
#splash_btn a {
	display: block;
	position: absolute;
	width: 145px; height: 30px;
	background-image: url(i/splash_btn.gif);
	background-position: 0 0;
	background-repeat: no-repeat;
}
#splash_btn a span { display: none; }
#splash_btn a:link:hover, #splash_btn a:visited:hover {
	background-position: 0 -30px;
}
/* menu */
#nav_proj_head {
	display: block;
	clear: right;
	width: 50px; height: 5px;
	left: 212px; top: 0;
	position: absolute;
	background: #ccc;
	background: url(i/nav_project.gif) no-repeat 0 0;
}
#nav_photoset_head {
	display: block;
	clear: right;
	width: 57px; height: 5px;
	left: 263px; top: 0;
	position: absolute;
	background: #ccc;
	background: url(i/nav_photosets.gif) no-repeat 0 0;
}
#menu{
	position: absolute;
	right: 0; top: 0;
	margin: 0; padding: 0;
}
#menu a.menu_a span {display: none;}
#menu a.menu_a{
	display: block;
	width: 50px; height: 30px;
	margin: 0; padding: 0;
	background-repeat: no-repeat;
	background-position: 0 0;
	border: solid 1px #ccdde5;
}
#menu ul {
	position: relative;
	display: inline;
	margin: 0; padding: 0;
	left: -385px; top: 0;
}
#menu ul li {
	list-style: none;
	margin-left: 5px; padding: 0;
	float: left;
}
#menu ul li.on a, #menu ul li.on a:link:hover, #menu ul li.on a:visited:hover {
	border: solid 2px #f60;
	background-position: 0 -30px;
}
#menu a.menu_a:link:hover, #menu a.menu_a:visited:hover {
	border: solid 1px #57471f;
	background-position: 0 -30px;
}
#menu a#wallop {background-image: url(i/thm_wallop.jpg);}
#menu a#fwc02 {background-image: url(i/thm_fwc02.jpg);}
#menu a#fwwc03 {background-image: url(i/thm_fwwc03.jpg);}
#menu a#ge {background-image: url(i/thm_ge.jpg);}
#menu a#oscars {background-image: url(i/thm_oscars.jpg);}
#menu a#ysports {background-image: url(i/thm_ysports.jpg);}
#menu a#ns_my {background-image: url(i/thm_ns_my.jpg);}
#menu a#cozy {background-image: url(i/thm_cozy.jpg);}

#menu a#hk {background-image: url(i/thm_hk.jpg);}
#menu a#china {background-image: url(i/thm_china.jpg);}
#menu a#london {background-image: url(i/thm_london.jpg);}
#menu a#espita {background-image: url(i/thm_espita.jpg);}
#menu a#nature {background-image: url(i/thm_nature.jpg);}
#menu a#people {background-image: url(i/thm_people.jpg);}
#menu a#ronaldo {background-image: url(i/thm_ronaldo.jpg);}

/* positioning */
#container {
	position: relative;
	width: 720px;
	text-align: left;
	margin: 0 auto;
    voice-family: "\"}\"";
    voice-family: inherit;
}
#top {
	position: relative;
	width: 720px; height: 28px;
	left: 0;top: 0;
	border-bottom: 1px solid #c7c095;
}
#splash_top {
	position: relative;
	width: 720px; height: 28px;
	left: 0;top: 0;
}
#logo a {
	position: absolute;
	display: block;
	left: 0; top: 11px;
	margin: 0; padding: 0;
	width: 137px; height: 10px;
	background: url(i/logo.gif) no-repeat 0 0;
}
#logo a span {display: none;}
#nav {
	position: absolute;
	right: 0; top: 0;
	margin: 0; padding: 0;
	height: 30px;
}
#mid {
	position: relative;
	width: 720px; height: 40px;
	margin: 5px 0 0; padding: 0;
}
#content {
	position: relative;
	display: block;
	border-top: #ccdde5 1px solid;
	width: 730px;
	background-image: url(i/bg_2col.gif);
	background-repeat: repeat-y;
	background-position: 0 0;
}
#content_1col, #content_profile {
	position: relative;
	display: block;
	border-top: #ccdde5 1px solid;
	width: 730px;
	background-image: url(i/bg_1col.gif);
	background-repeat: repeat-y;
	background-position: 0 0;
}
#content_profile{background-image: url(i/bg_profile.gif);}
#content_1col {background-image: url(i/bg_1col.gif);}
#babypic {
	position: absolute;
	margin: 10px 10px; padding: 0;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	color: #568094;
}
#babypic img {border:1px solid #D5E4EB;}
#profile_text {
	display: block;
	position: relative;
	left: 150px; top: 0;
	margin: 0; padding: 0 10px 10px 10px;
	width: 540px;
}
#resume_text {
	display: block;
	position: relative;
	margin: 0; padding: 40px 50px 40px 40px;
}
#lcol{
	display: block;
	position: absolute;
	left: 0; top: 0;
	margin: 0; padding: 0;
	width: 200px; height: 100%;
	float: left;
}
#proj_title{
	position: relative;
	margin: 0 0 0 1px; padding: 0;
}

#proj_desc{
	position: relative;
	margin: 0; padding: 10px;
}
#photo_content {
	position: relative;
	width: 720px;
	margin: 0; padding: 13px 0px;
	text-align: center;
	display: block;
}
#rcol{
	position: relative;
	width: 480px;
	margin: 0; padding: 20px;
	top: 0; left: 200px;
	text-align: center;
}
#contact_bg {
	position: relative;
	width: 700px; height: 440px;
	margin: 0; padding: 10px;
	top: 10px; left: 10px;
	background: url(i/contact_bg.jpg) no-repeat 0 0;
}
#infobox {
	position: relative;
	display: block;
	width: 280px; height: 30px;
	margin: 0; padding: 10px;
	top: 333px; left: 380px;
	background: #fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #57471f;
}
/* drop shadows */
#shadow_corner {
	position: absolute;
	background: url(i/shadow_corner.gif) no-repeat;
	width: 10px; height: 10px;
	top: -1px; right: -1px;
}
#shadow_bot0 {
	position: absolute;
	background: url(i/shadow_bot.gif) no-repeat;
	width: 730px; height: 11px;
	bottom: -10px;
	right: -10px; !important
	right: -11px;
}
#shadow_bot {
	position: relative;
	background: url(i/shadow_bot.gif) no-repeat;
	width: 730px; height: 11px;
}

/* type image replacement */
h1.hgfx span{ display: none;}
h1.hgfx {
	width: 195px; height: 20px;
	background-repeat: no-repeat; 
	background-position: top left;
}
h1#portfolio { background-image: url(i/h_portfolio.gif);}
h1#resume { background-image: url(i/h_resume.gif);}
h1#photo { background-image: url(i/h_photo.gif);}
h1#profile { background-image: url(i/h_profile.gif);}
h1#contact { background-image: url(i/h_contact.gif);}

h3.h_proj span { display: none;}
h3.h_proj {
	width: 200px; height: 57px;
	background-repeat: no-repeat;
	background-position: top left;
}
h3#fwc02 { background-image:url(i/h_fwc02.gif);}
h3#fwwc03 { background-image:url(i/h_fwwc03.gif);}
h3#ge { background-image:url(i/h_ge.gif);}
h3#oscars { background-image:url(i/h_oscars.gif);}
h3#ysports { background-image:url(i/h_ysports.gif);}
h3#ns { background-image:url(i/h_ns.gif);}
h3#my { background-image:url(i/h_my.gif);}
h3#cozy { background-image:url(i/h_cozy.gif);}
h3#ns_my { background-image:url(i/h_ns_my.gif);}
h3#wallop { background-image:url(i/h_wallop.gif);}

h1#ds span, h2#overview span, h2#experience span, h2#education span, h2#skills span {display: none;}
h1#ds {
	background-image: url(i/res_ds.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
	width: 220px; height: 35px;
}
h2#overview {
	background-image: url(i/res_overview.gif);
	background-repeat: no-repeat;
	background-position: top left;
	width: 71px; height: 11px;
}
h2#experience {
	background-image: url(i/res_experience.gif);
	background-repeat: no-repeat;
	background-position: top left;
	width: 80px; height: 11px;
}
h2#education {
	background-image: url(i/res_education.gif);
	background-repeat: no-repeat;
	background-position: top left;
	width: 73px; height: 11px;
}
h2#skills {
	background-image: url(i/res_skills.gif);
	background-repeat: no-repeat;
	background-position: top left;
	width: 45px; height: 11px;
}
h3.h_set {
	width: 230px; height: 14px;
	background-repeat: no-repeat;
	background-position: top left;
}
h3.h_set span {display:none;}
h3#t_hk {background-image:url(i/h_hk.gif);}
h3#t_china {background-image:url(i/h_china.gif);}
h3#t_london {background-image:url(i/h_london.gif);}
h3#t_espita {background-image:url(i/h_espita.gif);}
h3#t_nature {background-image:url(i/h_nature.gif);}
h3#t_people {background-image:url(i/h_people.gif);}
h3#t_ronaldo {background-image:url(i/h_ronaldo.gif); width: 295px;}
h3#t_project {background-image:url(i/h_project.gif); width: 295px;}
h3#t_photoset {background-image:url(i/h_photoset.gif); width: 295px;}

/*  presentation */
#preso_menu {
	position: absolute;
	right: 0px;
	width: 40px;
	height: 20px;
	border: 1px solid;
}

#preso_menu ul {
	padding: 0; margin: 0; list-style: none;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

#preso_menu li {
	float: left;
	position: relative;
	width: 50px;
}
#preso_menu li ul {
	display: none;
	position: absolute;
	top: 1em;
	left: 0;
}