@charset "utf-8";
/*	* CSS Document
/*	* Copyright 2008 Liberty Studio (http://liberty2k.com/), Spenser Lee (http://resume.liberty2k.com/). */

html, body, div, span, p, table, td, th, a, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5 { margin: 0; padding: 0; border: 0; color: #aca877; font-size: 12px; font-family: Helvetica,Tahoma,Arial,sans-serif }
html { height: 100%; position: relative }
body { background: #161616 url(images/bg.jpg) repeat-y center top; height: 100%; position: relative; overflow: hidden; min-height: 520px; min-width: 1000px }
a { color: #fff; text-decoration: none; outline: none }
a:hover { color: #d6cf6c; text-decoration: underline }
a:active, a:focus { outline: none }
a.external { padding-right: 12px; background: url(images/new-window.gif) no-repeat right center }
a img { border: 0 }
#w { background: url(images/mbg.jpg) no-repeat right bottom; height: 100%; position: relative; display: table; margin: 0 auto; width: 950px; }
#h { background: url(images/mbg.jpg) no-repeat right top; height: 100%; position: relative; display: table-cell; vertical-align: middle; }
#m { height: 520px; position: relative; z-index: 100 }
#main-nav { position: absolute; top: 0; left: 0; height: 100%; width: 170px; background: url(images/slide_1.jpg) no-repeat left bottom; z-index: 1000 }
#main-nav ul { position: relative; height: 100%; width: 170px; background: url(images/slide_1.jpg) no-repeat left top }
#sub-nav { position: absolute; top: 0; left: 50px; height: 100%; width: 180px; background: url(images/slide_2.jpg) no-repeat left bottom; z-index: 2000 }
#sub-nav ul.sub-nav-h { position: relative; height: 100%; width: 180px; background: url(images/slide_2.jpg) no-repeat left top }
#main-nav ul li, #sub-nav ul li { display: block; list-style-type: none }
#main-nav ul li { position: absolute; width: 170px; left: 0 }
#main-nav a, #main-nav .marker { color: #777 }
#main-nav .marker { position: absolute; left: 0; top: 0; width: 38px; text-indent: 10px; font: 16px/24px Georgia,Times New Roman,Times,serif }
#main-nav .nav-item { position: absolute; right: 4px; top: 0 }
#main-nav .nav-item a { display: block; width: 128px; background: url(images/dot.gif) no-repeat left bottom; padding: 2px 0 8px 0; font: bold 16px/20px Verdana,Helvetica,Arial,sans-serif }
#main-nav a:hover { text-decoration: none }
#sub-nav * { color: #fff }
#sub-nav .nav-item { padding: 0 12px }
#sub-nav .nav-item dt { display: block; padding-bottom: 12px }
#sub-nav .nav-item dt span { display: block; font-weight: bold; font-family: Verdana,Helvetica,Arial,sans-serif; font-size: 16px; line-height: 20px; padding-left: 3px }
#sub-nav .nav-item dt span.marker { font-size: 50px; line-height: 50px; padding-left: 0 }
#sub-nav .nav-item dd { background: url(images/dot.gif) no-repeat 0 0; padding: 12px 0; line-height: 1.5em }
#sub-nav .nav-item dd, #sub-nav .nav-item dd * { font-family: Georgia,Times New Roman,Times,serif; font-style: italic; color: #ac934a }
#sub-nav .nav-item .sub-nav li a { font-weight: bold; text-indent: 0; display: block; background: url(images/nav-go.gif) no-repeat -9999px 0; line-height: 24px; color: #777 }
#sub-nav .nav-item .sub-nav li.current a, #sub-nav .nav-item .sub-nav li a:hover { text-decoration: none; text-indent: 12px; background-position: left center; color: #fff }
#f { position: absolute; right: 125px; bottom: 22px; z-index: 900 }
#f p { color: #777; text-align: right }

#contents, #textshadow { width: 540px; height: 350px; position: absolute; left: 240px; top: 20px; z-index: 100 }
#contents h1, #contents h2, #textshadow h1, #textshadow h2 { font-weight: bold; font-family: Georgia,Times New Roman,Times,serif; font-style: italic }
#contents .zh h1, #contents .zh h2, #textshadow h1.zht, #textshadow h2.zht { font-weight: normal; font-family: Microsoft Yahei, SimHei, SimSon, sans-serif; font-style: normal }
#contents h1, #textshadow h1 { line-height: 32px; font-size: 20px; color: #d6cf6c }
#contents h2, #textshadow h2 { padding-bottom: 3px; margin-top: 12px; font-size: 16px }
#textshadow { left: 243px; top: 23px; color: #000; z-index: 99 }
#textshadow * { color: #000 !important; border-color: #000 !important; background: transparent none !important }
#textshadow img { visibility: hidden }
.content p, #textshadow p { margin-bottom: 18px; line-height: 16px; padding-left: 1em; clear: left }
.content p.page-nav, #textshadow p.page-nav { padding-left: 0 }
.content p.validated, #textshadow p.validated { padding-left: 92px; margin-left: 1em }
.content p.validated-xhtml11 { background: url(images/valid-xhtml11.png) no-repeat left center }
.content p.validated-css { background: url(images/valid-css.png) no-repeat left center }
.content p.portf-webs span, #textshadow p.portf-webs span { padding-right: 2em }

.brower-list { height: 120px }
.brower-list li { width: 85px; float: left; text-align: center; display: block }
.brower-list li .browser { display: block; margin: 0 auto; width: 64px; height: 64px; margin-bottom: 3px; background-position: 0 0; background-repeat: no-repeat }
.brower-list li .browser-ie6 { background-image: url(images/ie6.png) }
.brower-list li .browser-ie7 { background-image: url(images/ie7.png) }
.brower-list li .browser-ff { background-image: url(images/ff.png) }
.brower-list li .browser-opera { background-image: url(images/opera.png) }
.brower-list li .browser-safari { background-image: url(images/safari.png) }
.brower-list li .browser-chrome { background-image: url(images/chrome.png) }

.feature-descriptions { padding-bottom: 12px; padding-left: 1em }
.feature-descriptions li { list-style: inside circle }
.feature-icons { height: 166px; margin-left: 2em }
.feature-icons li { float: left; width: 114px; height: 143px; padding-top: 12px; margin-left: -1em; display: block; opacity: 0.5; filter: alpha(opacity=50) }
.feature-icons li.current { padding-top: 8px; border-top: 4px solid #fff; margin-right: 2em; margin-left: 1em; opacity: 1; filter: alpha(opacity=100) }
.feature-icons li a { display: block; overflow: hidden; text-indent: -9999px; width: 114px; height: 143px; background-position: 0 0; background-repeat: no-repeat }
.feature-icons li.feature-icon-0 a { background-image: url(images/feature-1.png) }
.feature-icons li.feature-icon-1 a { background-image: url(images/feature-2.png) }
.feature-icons li.feature-icon-2 a { background-image: url(images/feature-3.png) }
.feature-icons li.feature-icon-3 a { background-image: url(images/feature-4.png) }

.plain-list { margin: 18px 0 18px 2em }
.plain-list li { list-style: outside circle }

.browse-works { height: 340px; width: 530px; margin-bottom: 18px }
.browse-works table { border-collapse: collapse; height: 340px; width: 530px }
.browse-works table * { text-align: center; vertical-align: middle; margin: 0; padding: 0 }
.inload { background: url(images/loading.gif) no-repeat center }
.browse-works table td.small-img { text-align: left; padding-left: 25px }
.browse-works table th { width: 140px }
.browse-works table th div.thumbs { height: 300px; width: 140px; overflow: hidden }
.browse-works table th div.thumbs table { height: 150px; width: 140px; border-collapse: collapse }
.browse-works table th div.thumbs table td { height: 150px; width: 140px }
.browse-works table th span { cursor: pointer; width: 140px; height: 20px; background-image: url(images/move_bg.png); background-repeat: no-repeat; display: block }
.browse-works table th span.up { background-position: 0 -20px }
.browse-works table th span.up-hover { background-position: 0 -40px }
.browse-works table th span.up-disabled { background-position: 0 0; cursor: default }
.browse-works table th span.down { background-position: 0 -80px }
.browse-works table th span.down-hover { background-position: 0 -60px }
.browse-works table th span.down-disabled { background-position: 0 -100px; cursor: default }
.browse-works table th div table { width: 140px; height: 150px }
.browse-works table th div img { margin: 12px auto; display: block }
#textshadow .browse-works { visibility: hidden }

#charbg { position: absolute; height: 100%; width: 373px; background: url(images/chars.png) no-repeat left center; top: 0; right: -48px; z-index: 500 }
#preload { left: 400px }

.loading { background: url(images/loading.gif) no-repeat 0 0; padding-left: 20px; line-height: 16px; margin: 0 auto; position: absolute; top: 250px }
.loading strong { color: #fff; font-weight: normal }
.hide-when-loading { visibility: hidden }
.mask { position: absolute; background: #000; left: 0; top: 0; z-index: 3000 }
.popup { position: absolute; background: #777; left: 0; top: 0; padding: 10px 10px 0 10px; z-index: 3050; text-align: center }
.popup img { display: block; cursor: pointer }
.popup a { display: block; text-align: center; height: 24px; line-height: 24px }
.not-shown { display: none !important }