/*global elements*/

*{padding:0; margin:0;}

body {
  font-family: Verdana, Geneva, Arial, helvetica, sans-serif; color:#6D3212; font-size:12px;
 background:transparent url(../Images/water.png) repeat;

  text-align:center;
 
}

h1,h2,h3,h4{font-weight:normal;}
blockquote{text-align:center;}
.clear {clear: both;}
#container {width:800px;margin: 0 auto; text-align:left; }
#header {background:url(../Images/header.png) no-repeat; text-indent:-9999px; width:800px; height:187px;}

table#scarfLayout, table#scarfLayout tr, table#scarfLayout td{padding: 0 0 0 0; margin: 0 0 0 0; border-collapse:collapse; vertical-align:top;}
table#scarfLayout {width:800px;}
td#leftTd {background:url(../Images/leftScarfEdge.png) repeat-y; width:37px;}
#middle{width:726px;background:url(../Images/bodyBg.png) repeat; }
td#rightTd {background:url(../Images/rightScarfEdge.png) repeat-y; width:37px;}
#bottomBorder {background:url(../Images/bottomScarfEdge.png) no-repeat; width:800px; height:34px;}

/*current open page indication*/
#homePage a#homeLink,#resumeShort a#resumeLink,#links a#linksLink, #fun a#funLink,  .portfolio a#portfolioLink  {background:url(../Images/topNavLinkSelected.png) no-repeat;}
#design a#designLink, #evaluation a#evaluationLink, #blog a#blogLink, #ria a#riaLink, #software a#softwareLink, #website a#websiteLink {background:url(../Images/secondNavLinkSelected.png) no-repeat;}
/*top navigation*/
#topNav {height:30px; width:100%;position:absolute; top: 157px; }
#topNav li {list-style:none;}
#topNav a {display:block; background:  url(../Images/topNavLink.png) no-repeat;width:105px; height:30px; text-decoration:none; text-indent:25px; color:#844013; font-size:14px; font-weight:bold; padding:5px;}
a#homeLink { position:absolute; left:50px; top:0 px;}
a#resumeLink { position:absolute; left:175px; top:0px;}
a#portfolioLink { position:absolute; left:296px; top:0px;}
a#linksLink { position:absolute; left:415px; top:0px;}
a#funLink { position:absolute; left:535px; top:0px;}
#topNav a:hover {background: url(../Images/topNavLinkSelected.png) no-repeat;}

/*page navigation*/
#pageNav a {display:block; background:url('../Images/pageNavIcon.png') no-repeat;text-indent :17px;}
#pageNav td {margin:0 20px 0 0;}

/*left navigation*/
#leftNav {float: left; width:120px; padding: 15px 0 0 0;}
/*#leftNav h3 {font-size:14px; font-style:italic;  font-weight:bold;  text-indent:25px; font:Verdana, Arial, Helvetica, sans-serif;}*/
#leftNav h3 {width:120px; height:25px; background:url(../Images/viewBy.png); text-indent:-9999px;}
#leftNav h4{ background:url(../Images/secondNavHeader.png) no-repeat; width:120px; height:24px;font-size:14px; font-weight:bold; text-indent:25px;}
#leftNav li {list-style:none; padding: 0 0 0 0; margin:0 0 15px 0; font-weight:bold; font-size:16px;}
#leftNav a {display:block; background:url(../Images/secondNavLink.png) no-repeat; width:120px; height:25px;text-align:center; text-decoration:none;text-indent:5px; color:#844013; font-size:11px;padding:2px;}
#leftNav a:hover{background:url(../Images/secondNavLinkSelected.png) no-repeat;}
#leftNav a#deepZoom {display: block; background-image:url('../Images/DeepZoomButton.png') ; width:120px; height: 70px;border:  :0;}
		
}
/*main content*/
#main{position: relative;}
#pageIntro {padding: 20px;}
#content {float: left; width:580px;padding: 15px 0 10px 20px;}
h2#pageName {font-size:24px; font-weight:bold; padding:0 0 10px 0; color:#627220;}
.pageSec {padding: 10px; }
.pageSec p { margin:10px;}
.pageSec h3 {background:url(../Images/pageSection.png) no-repeat; text-indent:40px; width:400px; height:30px; padding: 5px;font-size:14px; font-weight:bold; }
.secDesc ul {padding: 0 0 0 30px;}
.secDesc li {margin:5px 0 5px 0; }

/*footer*/
#footer {width:100%;height:50px;background:url(../Images/footerBg.png) no-repeat;text-align:center;}

/*quickLinkPanel*/
#quickLinkPanel {position:absolute; right:-200px; top: 20px;}

/*home page*/
img#selfPic {width: 134px; height:200px; float:left;margin: 25px 20px 25px 0px;}
img#chineseName {position:relative; bottom: -5px;}
p#selfIntro {margin: 0 0 10px 0;}
#pageIntro li {margin:5px 0 5px 20px; }
#pageIntro p { margin:10px;}

/*resume page*/
#resumeShort div#content {width:600px;}
*html #resumeShort div#content {position:relative; left: 0;}/*only for IE*/
a#txtIcon {width:22px; height:32px; display:block; background:url(../Images/txtIcon.png); float:right; margin: 0 10px;}
a#pdfIcon {width:32px; height:32px; display:block; background:url(../Images/pdfIcon.png); float:right;}
#resumeSec {font-size: 12px;}
h3#resumeName {font-size: 22px; font-stretch:expanded; font-weight:bold; font-variant:small-caps;}
hr {color:#6D3212; height:1px;}
p#address { text-align:right;}
#resumeSec h4{ font-variant:small-caps; font-weight:bold;font-size: 16px; margin:15px 0 5px 0;} 
#resumeSec h5{font-weight:bold;font-size: 13px; font-style:italic; margin: 0 0 0 0; padding 0 0 0 0;}
#resumeSec p { margin:10px;}
#resumeSec ul {margin:0px 0 0 30px; }
#resumeSec li {margin:5px 0 5px 0; }
#resumeSec table,tr {width: 100%; margin: 0 ; padding: 0;}

/*software page*/

/*links page*/
#delBadge {margin: 0 0 0 20px;}
 
 /*video demo for MS UXA*/
 #demoVideo {position: relative; left:50px; top: 20px; float:left;}
 #demoDesc {float:left; width: 230px; margin: 50px 0 0 70px; }
 #demoDesc p {margin:10px;}