html, body, div, span, object, img, embed, h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li, abbr, address, cite, code, dfn, em, strong, sub, sup, form, fieldset, legend, label, table, caption, thead, tfoot, tbody, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } h1, h2, h3, h4, h5, p, a, li, label, input, textarea { font-family: Arial, Helvetica, sans-serif; line-height: 1.55em; } h4 { font-size: 0.65em; text-transform: uppercase; letter-spacing: 0.05em; color: #666; } h1, h2, h3, h4, h5 { .font-weight: normal; } em { font-style: italic; } strong { font-weight: bold; } abbr { border-bottom: 1px dotted #333; } a:link { color: #FC0; } a:visited { color: #FC0; } a:link, a:visited { text-decoration: none; } a:hover { text-decoration: underline; } body { text-align: center; color: #CCC; background: #000; } #frame { text-align: left; } #frame, #top-frame, #header-frame, #content-frame, .project-frame, #index-frame, #contact-form-frame, #footer-frame { min-width: 980px; margin: 0 auto; } #top, #header, #content, .project, #contact-form, #footer { position: relative; width: 940px; margin: 0 auto; padding: 0 20px; } #top-frame { opacity: .9; filter: alpha(opacity=90); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=90)"; background: #000; } #top { height: 3.125em; } #header { height: 150px; } #content { width: 960px; padding: 40px 0 40px 20px; } #footer { padding: 20px 20px 40px 20px; } #logo { z-index: 333; float: left; margin-right: 26px; } #logo a { display: block; width: 147px; height: 50px; background: url('/img/wee-hua-dot-com-logo.png') no-repeat; text-indent: -888em; line-height: 3.125em; font-size: 1em; font-weight: bold; color: #AAA; } #logo a:hover { color: #EEE; background: url('/img/wee-hua-dot-com-logo.png') no-repeat 0 -50px; } #nav { z-index: 332; position: relative; float: left; width: 767px; height: 50px; } #nav li { float: left; display: inline; border-left: 1px solid #262626; } #nav li#contact { border-right: 1px solid #262626; } #nav li#nav-branch { border: none; } #nav li a { display: block; margin: 0 15px; padding: 0 5px; line-height: 4.167em; font-size: 0.75em; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; color: #AAA; } #nav li a:hover { text-decoration: none; color: #EEE; } .about li#about a, .portfolio li#portfolio a { margin-right: 11px; color: #EEE; } #sub-nav { z-index: 331; position: relative; float: left; } #sub-nav li { border: none; } #sub-nav li a { margin: 0 5px; padding: 0 5px; font-weight: normal; text-transform: none; letter-spacing: normal; } #sub-nav li#web a, #sub-nav li#biography a { margin-left: 0; } #sub-nav li#curation a, #sub-nav li#achievements a { margin-right: 15px; } .home li#home a, .contact li#contact a, .biography li#biography a, .achievements li#achievements a, .web li#web a, .innovation li#innovation a, .graphics li#graphics a, .photo li#photo a, .video li#video a, .curation li#curation a { padding-top: 0.417em; line-height: 3.334em; color: #EEE; border-bottom: 0.417em solid #FC0; } #header h1 { float: left; margin-right: 21px; line-height: 3.75em; font-size: 2.5em; font-weight: bold; color: #EEE; } .biography #header h1, .achievements #header h1, .web #header h1, .innovation #header h1, .graphics #header h1, .photo #header h1, .video #header h1, .curation #header h1 { margin-top: 54px; height: 53px; text-indent: -888em; } .biography #header h1 { width: 239px; background: url('/img/page-titles.png') no-repeat; } .achievements #header h1 { width: 331px; background: url('/img/page-titles.png') no-repeat -239px 0; } .web #header h1 { width: 109px; background: url('/img/page-titles.png') no-repeat -570px 0; } .innovation #header h1 { width: 243px; background: url('/img/page-titles.png') no-repeat -679px 0; } .graphics #header h1 { width: 212px; background: url('/img/page-titles.png') no-repeat -922px 0; } .photo #header h1 { width: 140px; background: url('/img/page-titles.png') no-repeat -1134px 0; } .video #header h1 { width: 136px; background: url('/img/page-titles.png') no-repeat -1274px 0; } .curation #header h1 { width: 202px; background: url('/img/page-titles.png') no-repeat -1410px 0; } .section { float: left; width: 286px; height: 29em; display: inline; margin-left: 20px; padding-left: 20px; border-left: 1px dashed #1C1C1C; } .section:first-child { margin: 0; padding: 0; border: none; } .biography .section h2 { margin-bottom: 20px; font-size: 1.25em; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; color: #EEE; } .biography .section h2.quote { margin: 0; line-height: 1.46em; font-size: 2.25em; } .biography .section p { padding-bottom: 15px; font-size: 0.75em; color: #CCC; } .biography .section img { margin-bottom: 18px; } .achievements .section h2 { margin: 15px 0 10px 0; line-height: normal; font-size: 2em; color: #333; } .achievements .section h2:first-child { margin-top: 0; } .achievements .section ul li.award { font-size: 0.75em; color: #EEE; } .achievements .section ul li.from { padding-bottom: 15px; font-size: 0.7em; color: #AAA; } .project-frame { padding: 40px 0; } .project .header { position: relative; width: 860px; height: 3.75em; margin-bottom: 1em; border-bottom: 1px solid #333; } .project .header h2, .project .header p { font-size: 0.688em; text-transform: uppercase; letter-spacing: 0.05em; color: #999; } .project .header h1 { font-size: 1.25em; font-weight: bold; color: #EEE; } .project .header p { position: absolute; right: 0; bottom: 1.363em; } .project .content { position: relative; width: 880px; } .project .content .description { float: left; width: 300px; margin: 2px 20px 0 0; } .project .content .description p { padding-bottom: 15px; font-size: 0.75em; } .project .content .media { float: left; width: 560px; margin-top: 4px; } .project .details { position: relative; width: 860px; margin-top: 20px; padding-top: 20px; border-top: 1px dashed #262626; } .project .details .meta { float: left; width: 185px; height: 10em; display: inline; margin-left: 20px; padding-left: 19px; border-left: 1px dashed #1C1C1C; } .web .project .details .meta { height: 6em; } .video .project .details .meta { height: 9em; } .project .details .meta:first-child { margin: 0; padding: 0; border: none; } .project .details .meta ul { padding-bottom: 15px; } .project .details .meta ul li { font-size: 0.75em; color: #CCC; } .project .details .meta ul li.secondary { font-size: 0.688em; color: #999; } .project .details .meta ul li.break { padding-bottom: 15px; } .project .nav { position: absolute; width: 59px; height: 100%; top: 0; right: 20px; border-left: 1px dashed #333; } .project .nav h5 { margin-bottom: 15px; font-size: 0.75em; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; text-align: right; } .project .nav ul { float: right; width: 40px; } .project .nav ul li.top a, .project .nav ul li.previous a, .project .nav ul li.next a { display: block; width: 40px; height: 40px; margin-bottom: 20px; line-height: 40px; font-size: 11px; text-align: center; text-transform: uppercase; color: #AAA; background: url('/img/project-nav-bg_sprites.gif') no-repeat; } .project .nav ul li.next a { color: #000; background: url('/img/project-nav-bg_sprites.gif') no-repeat 0 -40px; } .project .nav ul li.top a:hover, .project .nav ul li.previous a:hover { text-decoration: none; color: #EEE; } .project .nav ul li.next a:hover { text-decoration: none; background: url('/img/project-nav-bg_sprites.gif') no-repeat 0 -80px; } .slider, .scroll-pane { width: 560px; height: 304px; } .panel-frame, .panel { width: 540px; height: 304px; } .slider { position: relative; } .scroll-pane { overflow: auto; overflow-x: hidden; position: relative; clear: left; font-family: Arial, Helvetica, sans-serif; line-height: 1.55em; font-size: 0.75em; font-style: italic; text-align: center; color: #AAA; background: #111; } .panel-frame .panel { margin-top: 20px; } .panel-frame .panel:first-child { margin: 0; } .panel-nav { position: relative; width: 540px; height: 1.875em; background: #222; } .panel-nav li { float: left; display: inline; border-right: 1px solid #333; } .panel-nav a { display: block; margin: 0 15px; padding: 0 5px; line-height: 2.725em; font-size: 0.688em; color: #AAA; } .panel-nav a:hover { text-decoration: none; color: #EEE; } .panel-nav a.selected { color: #EEE; } .panel-nav a:focus { outline: 0; } #index-frame { padding: 40px 0; } #index { width: 960px; margin: 0 auto; padding-left: 20px; position: relative; } #index-nav li { float: left; display: inline; width: 220px; height: 11.5em; margin: 0 20px 20px 0; } #index-nav li a { display: block; } #index-nav li a:hover { text-decoration: none; } #index-nav li a img { margin-bottom: 5px; padding: 5px; font-family: Arial, Helvetica, sans-serif; line-height: 1.55em; font-size: 0.75em; font-style: italic; text-align: center; color: #CCC; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #333; } #index-nav li a:hover img { color: #333; background: #FC0; } #index-nav li a h3 { font-size: 0.75em; color: #AAA; } #index-nav li a:hover h3 { color: #FC0; } #index-nav li a p { font-size: 0.7em; color: #666; } #index-nav li a:hover p { color: #999; } #contact-form { padding: 40px 20px; } #info { float: left; width: 300px; } #info h1 { line-height: 1em; font-size: 2em; font-weight: bold; color: #EEE; } #info h3 { margin-top: 10px; font-size: 1.25em; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; color: #AAA; } #messaging-form { float: right; width: 620px; } #reply-to { float: left; width: 202px; margin-right: 20px; } #message { float: left; width: 398px; } label { display: block; margin: 16px 0 5px 0; font-size: 0.75em; color: #AAA; } label:first-child { margin-top: 0; } input.textfield, textarea { display: block; padding: 5px; font-size: 0.75em; color: #CCC; border: 1px solid #333; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #222; } input.textfield { width: 190px; height: 16px; } textarea { width: 386px; height: 152px; overflow: auto;  } input.textfield:focus, textarea:focus { color: #EEE; border: 1px solid #666; background: #333; } input.error, textarea.error, input.error:focus, textarea.error:focus { color: #EEE; border: 1px solid #FC0; background: #333; } label.subject, input.subject { display: none; } #submitBtn { float: right; margin-top: 15px; padding: 3px 26px; font-size: 0.75em; color: #000; border: none; border-radius: 13px; -moz-border-radius: 13px; -webkit-border-radius: 13px; background: #FC0; } #submitBtn:hover { cursor: pointer; background: #EEE; } #submitBtn:active { background: #AAA; } #validation-response { margin-bottom: 20px; } #validation-response li { font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; color: #FC0; } #footer ul { border-top: 1px solid #333; border-bottom: 1px solid #262626; } #footer ul li { float: left; display: inline; } #footer ul li.main { margin-left: 20px; padding-left: 20px; border-left: 1px solid #262626; } #footer ul li.main:first-child { padding: 0; border: 0; } #footer ul li a { margin-left: 20px; line-height: 3em; font-size: 0.75em; color: #999; } #footer ul li a:hover { text-decoration: none; color: #EEE; } #footer ul li.main a { margin: 0; text-transform: uppercase; } p.back-to-top { margin-bottom: 5px; text-align: right; } p.back-to-top a { font-size: 0.688em; color: #AAA; } p.back-to-top a:hover { text-decoration: none; color: #EEE; } p.byline { float: left; margin-top: 20px; font-size: 0.875em; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; } p.byline a { font-family: Georgia, "Times New Roman", Times, serif; color: #FC0; } p.copyright { clear: left; float: left; margin-top: 10px; font-size: 0.7em; color: #666; } a.connect { float: right; margin-top: 20px; font-size: 0.875em; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; color: #AAA; } a.connect:hover { text-decoration: none; color: #EEE; } a.connect .facebook { display: block; text-align: center; font-size: 1.25em; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-style: normal; color: #3b5998; } a.connect:hover .facebook { text-decoration: none; } .home #frame { background: url('/img/110721_happy-exploring.jpg') no-repeat center top; } .home #content-frame { height: 695px; } .home #header h1, .home #content h2, .home #content p { display: none; } .about #frame { background: url('/img/escalation.jpg') no-repeat center top; } .portfolio #frame { background: url('/img/random-boxes-zoom-burst.jpg') no-repeat center top; } .error #header-frame, .error #content-frame { background: #222; } .error #header h1 { color: #FC0; } .error #content { padding-top: 0; padding-bottom: 54px; } .error #content p { color: #EEE; } .group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .group { zoom: 1; } *:first-child+html .group { zoom: 1; }