/* 
 * Small CSS framework Bica
 * This is the css style for reset, font, layout, layout module, common elements.
 * @author Hien Nguyen [Hagin] hiennghoang@gmail.com
 * Version 1.0.1 Nov 7th, 2008 
 * Update  1.0.2 Jan 01, 2010 Light compress version 
 */ 
/* Reset */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, table, tbody, tfoot, thead, tr, th, td{margin:0; padding:0; border:0; font-weight:inherit; font-style:inherit; font-size:100.01%; font-family:inherit; vertical-align:baseline}
input, textarea{margin:0; padding:0 0 0 1px; font-weight:inherit; font-style:inherit; font-size:11px; font-family:tahoma}
textarea{width:117px; padding-left:1px}
caption, th, td{font-weight:normal}
table{border-collapse:collapse; border-spacing:0}
table, td, th{vertical-align:middle; border-style:solid; border-width:1px; border-color:#a5acb2}
blockquote:before, blockquote:after, q:before, q:after{content:""}
blockquote, q{quotes:""""}
q:before, q:after{content:''}
img{border:none}
:focus, a, *{outline:0}
ul, li{list-style-type:none}

body{font-size:62.5%; font-family: Verdana}

.wrapper1000, 
.wrapper974, 
.wrapper776{margin:auto; text-align:left; width:974px}

.wrapper1000{width:1000px}
.wrapper776{width:776px}

.wrapper100{width:auto; margin:auto 10px}

#hd, #ft{clear:both}
#bd:after{content:"."; display:block; height:0; clear:both; visibility:hidden}
 
body.center{text-align:center}
body .fixed-776{width:776px}
body .fixed-974{width:974px}
body .zoom-776{width:77.6em}
body .zoom-974{width:97.4em}
body .full-100{width:100%}
.section, .standard, .classic, .layout{clear:both; width:100%}
.section, .gr{position:relative}

.layout .gr{float:left}
.a-b .b, .a-c .c, .b-c .c{float:right}
.a-b .gr .b, .b-c .gr .c, .a-c .gr .c{float:left}
.classic .a-b-c .gr, .standard .classic .a-b-c .gr, 
.classic .a-b .gr, .standard .classic .a-b .gr, 
.classic .b-c .gr, .standard .classic .b-c .gr{width:25%}

.classic .a-b-c .b, .standard .classic .a-b-c .b{width:50%}
.classic .a-b .b,  .standard .classic .a-b .b, 
.classic .b-c .b, .standard .classic .b-c .b{width:75%}
.a-b-c-d .gr, .standard .a-b-c-d .gr, .standard .layout .a-b-c-d .gr{width:25%}
.a-b-c .gr, .standard .a-b-c .gr, .standard .layout .a-b-c .gr{width:33.3%}
.a-c .gr, .standard .a-c .g, .classic .a-c .gr{width:50%}

.a-b .b, .b-c .b, .standard .a-b .b, .standard .b-c .b, .standard .layout .a-b .b, .standard .layout .b-c .b{width:67%}
.a-b .a, .b-c .a, .standard .a-b .a, .standard .b-c .c, .standard .layout .a-b .a, .standard .layout .b-c .c{width:33%}

.l{float:left}
.r{float:right}
.o{overflow:hidden}
.h{display:none}
.m0{margin:0}
.p0{padding:0}
.last{margin-right:0; padding-right:0}
.cl, .clf{clear:both}
.clf{float:left}
.clearfix:after{content:''; display:block; height:0; clear:both; visibility:hidden}

.clearfix{display:inline-block; position:relative}
/*\*/
.clearfix{display:block}
hr{border:none; border-top:1px solid #ccc; height:1px; clear:both}
a{text-decoration:none}
a:hover{text-decoration:underline}
h1, h2, h3, h4, h5, h6{font-weight:700}

h1{font-size:1.8em}
h2{font-size:1.3em}
h3{font-size:1.2em}
h4{font-size:1.1em}
h5{font-size:1em}
h6{font-size:0.9em}
ul.ul-h{clear:both}
ul.ul-h li{float:left}
ol li{list-style:decimal inside}

html{overflow:hidden}
html, body{height:100%; padding:0; margin:0; line-height:1.5}
#wrapper{position:relative; width:100%; height:100%}
#hd{position:absolute; left:0; top:45%; height:66px; width:100%}
#hd .hd{width:96%; min-width:974px; height:65px; margin:auto; display:none}
#ft{position:absolute; left:0; bottom:45%; height:28px; width:100%}
#ft .ft{width:96%; min-width:974px; height:28px; margin:auto; display:none}
#bd{width:100%; height:0px; left:0; top:25%; position:absolute; margin:0}

body{color:#999; background-color:#111}
a{color:#1eafe6; background:url(../images/dot_blue.gif) repeat-x left bottom}
a:hover{color:#fff; background-color:#1eafe6}

a, a:hover{text-decoration:none}
.loading{width:100%; text-align:center; padding-top:50px}
.bd_content{width:1024px; margin:auto}
.loading{display:none}
input, textarea{width:190px; padding:4px 3px; margin-bottom:2px}
.txt_sub{}
.txt_white{color:#fff}

.preloadImages{position:absolute; left:-9999px; top:-9999px; width:0; height:0; background:url(../images/theme-black/me_b.gif); background:url(../images/theme-black/blast_02_bg.jpg);     background:url(../images/theme-black/blast2_02_bg.jpg)}

#notwork{width:100%; padding-top:170px; text-align:center}
#notwork a{text-decoration:line-through; background:none}

#hagin-home{display:none; height:300px}
#hagin-about{display:none}
#hagin-service{display:none}
#hagin-contact{display:none; padding:15px 0}
#hagin-portfolio{display:none}
#navigator a{outline:none}
a:hover#nav-about img, 
a:hover#nav-service img, 
a:hover#nav-portfolio img, 
a:hover#nav-contact img{background-position:left bottom; outline:none}
.lavaLampWithImage{position:relative; height:30px; width:600px; padding:0 15px; margin:0; overflow:hidden; float:left; z-index:0; margin-top:18px}
.lavaLampWithImage li{float:left; height:65px; color:#6a9bb7}
.lavaLampWithImage li.back{width:9px; z-index:8; position:absolute}
.lavaLampWithImage li.back .left{margin-right:9px; height:65px}
.lavaLampWithImage li a{outline:none; text-align:center; z-index:10; float:left; height:65px; position:relative; overflow:hidden; padding:0 15px; z-index:9999}
.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited{border:none; background:none}

.logo{width:170px; height:65px; display:block; float:left}
a:hover.logo{background-color:transparent}

#changeTheme{float:right; width:170px; height:35px; padding-top:27px}
#changeTheme li{float:right; padding-right:4px; color:#666}
#changeTheme li.txt{}
#changeTheme a, #changeTheme a:hover{background:none}

#ft .ft p{float:left; line-height:28px; margin:0; padding:0}
#validate_xhtml{background:url(../images/validate_xhtml10.png) no-repeat 0 0; float:right; margin-top:7px}
#validate_css{background:url(../images/validate_css.png) no-repeat 0 0; float:right; margin-top:7px}

.hagin-contact{width:700px; margin:auto}
.hagin-contact .b a{background:none; padding-right:2px}
.contactInfo p.txt_sub{padding-bottom:8px; margin:0px 0 5px; padding-left:0px; line-height:normal}
.contactInfo{width:200px; padding-bottom:10px; font-size:1.1em; line-height:1.7}

.btn_submit{width:80px; cursor:pointer}
.hagin-contact .c{position:relative}
.hagin-contact #txtacomment{overflow:auto}
.errorName, .errorMessage, .errorEmail{position:absolute; background:none repeat scroll 0 0; color:#8A1F11; border-right:2px solid #ff3e3e; padding:3px 4px; display:none}
.errorName{right:33px; top:2px}
.errorEmail{right:33px; top:29px}
.errorMessage{right:33px; top:83px}

#overlay{position:absolute; z-index:99998; width:100%; height:100%; left:0; top:0; display:block}
#contactSend{position:absolute; font-size:36px; text-align:center; vertical-align:middle; z-index:99999; width:100%; left:0; top:40%; display:block; padding:0 0 5px}

.portfolioNav{position:absolute; left:0; top:-110px; z-index:999}
#navigation-block{position:relative; top:0px; left:0px}
#hide{position:absolute; top:30px; left:-190px}
ul#sliding-navigation{list-style:none; margin:30px 0 0 -10px; padding:0}
ul#sliding-navigation li.sliding-element a{display:block; width:118px; padding:5px 10px 6px 29px; margin:0; margin-bottom:5px}
ul#sliding-navigation li.sliding-element a{text-decoration:none}

#hagin-portfolio{width:100%}
.imageFlow{position:absolute; width:100%; height:80%; left:0%; top:10%}

.imageFlow .diapo{position:absolute; left:-1000px; cursor:pointer}
.imageFlow .bank{visibility:hidden}
.imageFlow .top{position:absolute; width:100%; height:40%}
.imageFlow .text{position:absolute; left:0px; width:100%; bottom:-5%; text-align:center; z-index:1000}
.imageFlow .title{font-size:1.3em; font-weight:bold; line-height:15px}
.imageFlow .legend{font-size:1em; line-height:14px}
.imageFlow .scrollbar{position:absolute; left:10%; bottom:10%; width:80%; height:16px; z-index:1000}
.imageFlow .track{position:absolute; left:1%; width:98%; height:16px}
.imageFlow .arrow-left{position:absolute}
.imageFlow .arrow-right{position:absolute; right:0px}
.imageFlow .bar{position:absolute; height:16px; left:25px}

.portfolioEmpty{width:100%; text-align:center; padding-top:60px; font-size:24px}
.portfolioEmpty .txt_sub{font-size:11px}

#portfolio_web_2009, 
#portfolio_web_2008, 
#portfolio_web_2007, 
#portfolio_web_2007b{display:none}

body{position:relative; height:100%; width:100%}
.color{position:absolute; z-index:24}
.news_pop{display:none}
.myblock{height:100%; width:100%; z-index:25; position:absolute; display:none; top:0; left:50%; padding:100px; text-align:center}
.mystyle1{width:500px; color:white; display:none; position:absolute; z-index:23; color:#8d8d8d}
.mystyle2{width:400px; display:none; position:absolute; z-index:23; font-size:1.3em; line-height:2}
.np{width:200px}
.menu{width:500px; color:#8d8d8d; line-height:20px; position:absolute; z-index:23}
#h{padding-bottom:10px}
.menu li, .menu ul{list-style-type:circle; list-style-position:inside}
.menu a, 
.menu a:hover{cursor:default; text-decoration:none; color:#666; background:none}
a.launchSite{background:none; font-size:2.1em; font-weight:bold; letter-spacing:8px}
a.launchSite:hover{background:none}
.launchSite_sub{letter-spacing:1px; padding-left:33px}
#launchCountDown{font-size:24px; position:absolute; right:5px; bottom:5px; display:none}

#aboutMenu_site, 
#aboutMenu_me{width:92px; height:92px; position:absolute; right:290px; bottom:35px; background:url(../images/theme-black/badges_aboutsite.jpg) no-repeat 0 0; cursor:pointer; z-index:10}
#aboutMenu_me{top:5px; right:45px}

#hagin-about{height:280px; padding-top:0px; position:relative; overflow:hidden}
.me{width:214px; height:280px; float:left; margin-left:97px; display:inline}
#about_blast{display:none; width:310px; height:97px; padding:17px 30px 0 39px; margin:15px 0 0 -37px; float:left; font-size:1.9em; font-family:Verdana; font-weight:400}
.about_cover{width:1948px; height:290px; overflow:hidden}
.about_cover #section_aboutMe, 
.about_cover #section_aboutSite{width:974px; float:left; position:relative}
.about_cover #section_aboutMe{margin-left:20px}

.skills{width:950px; line-height:16px; position:absolute; left:0; bottom:5px; text-align:center; letter-spacing:1px; z-index:99999}
.txt_1, .txt_2, .txt_3, .txt_4{padding:0 5px}
.txt_1{color:#666; font-size:1.2em}
.txt_2{font-size:1.4em}
.txt_3{color:#888; font-size:1.6em}
.txt_4{color:#999; font-size:2.2em}

.about_contact{position:absolute; top:35px; left:0; width:94px; height:75px; padding:27px 41px 23px 0; text-align:center; display:none}
.about_contact a{font-size:1.2em; color:#aaa; background:none; line-height:12px}
.about_contact a:hover{color:#fff; background:none}
.about_contact a span{font-size:13px}

.skillTip{font:400 1.1em Verdana; width:auto; padding:2px 9px}
.about_skill{text-align:right; line-height:1.5}
.about_skill li{padding:6px 0 12px}
.about_skill li.first{padding-top:35px}
.about_skill span{font-size:1.2em; font-weight:700}
.about_skill p{padding:0; margin:0}

.wing_r{position:absolute; width:304px; height:169px; top:33px; left:254px}

.jScrollPaneContainer{position:relative; overflow:hidden; z-index:1}
.jScrollPaneTrack{position:absolute; cursor:pointer; right:0; top:0; height:100%; background:#aaa}
.jScrollPaneDrag{position:absolute; background:#666; cursor:pointer; overflow:hidden}
.jScrollPaneDragTop{position:absolute; top:0; left:0; overflow:hidden}
.jScrollPaneDragBottom{position:absolute; bottom:0; left:0; overflow:hidden}
a.jScrollArrowUp{display:block; position:absolute; z-index:1; top:0; right:0; text-indent:-2000px; overflow:hidden; height:9px}
a.jScrollArrowUp:hover{}
a.jScrollArrowDown{display:block; position:absolute; z-index:1; bottom:0; right:0; text-indent:-2000px; overflow:hidden; height:9px}
a.jScrollArrowDown:hover{}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover{}

#pane2{height:200px; width:299px}
.holder{position:relative; float:right; margin:25px 20px 0 0; width:290px; height:240px; display:inline}
.holder .top{width:282px; height:55px; position:absolute; left:0; top:18px; z-index:9}
.holder .bottom{width:282px; height:55px; position:absolute; left:0; bottom:22px; z-index:9}
.holder .timeline{height:18px; text-align:right; font-weight:700; padding-right:9px}
.holder .timeline span{padding-right:79px; font-size:1.1em}
.osX .jScrollPaneTrack{}
.osX .jScrollPaneDrag{}
.osX .jScrollPaneDragTop{height:6px}
.osX .jScrollPaneDragBottom{height:7px}
.osX a.jScrollArrowUp{height:24px}
.osX a.jScrollArrowUp:hover{background-position:0 0}
.osX a.jScrollArrowDown{height:24px}
.osX a.jScrollArrowDown:hover{background-position:0 0}
* html .osX .jScrollPaneDragBottom{bottom:-1px}

#section_aboutSite .mysite_ss{float:left; margin:40px 50px 0 100px}
#section_aboutSite .info{float:left; width:450px; padding:20px 0 0 16px}
#section_aboutSite p{font-size:1.2em; padding-bottom:10px}
#section_aboutSite ul{font-size:1.1em}
#section_aboutSite ul li{list-style-type:circle; list-style-position:outside; padding-bottom:3px}
#section_aboutSite ul li img{margin-right:15px; margin-top:10px}

#hagin-service{height:230px; padding:15px 0 0 210px}
#hagin-service h2{}
#hagin-service h3{}
.opt_psd2html p{display:block}

#pane3{height:218px; width:270px; font-size:1.1em; float:left}
#pane4{height:218px; width:340px; font-size:1.1em; float:left; padding-left:2px}
.ser_dragbar{position:relative; float:left; width:270px; height:240px}
.ser_dragbar .jScrollPaneTrack{}
.ser_dragbar .jScrollPaneDrag{}
.ser_dragbar .jScrollPaneDragTop{height:9px}
.ser_dragbar .jScrollPaneDragBottom{height:9px}
* html .ser_dragbar .jScrollPaneDragBottom{bottom:-1px}
#pane3 div{padding-bottom:15px}
#pane3 div span{font-size:0.8em; font-weight:normal}
#pane3 p{padding-bottom:10px}

.ser_opt{position:relative; float:left; width:340px; height:240px}
.ser_opt .jScrollPaneTrack{}
.ser_opt .jScrollPaneDrag{}
.ser_opt .jScrollPaneDragTop{height:9px}
.ser_opt .jScrollPaneDragBottom{height:9px}
* html .ser_opt .jScrollPaneDragBottom{bottom:-1px}
.ser_opt .opt_psd2html h3{padding:3px 2px 3px 9px; margin-bottom:5px}
.ser_opt .opt_psd2html{padding-top:13px}
.ser_opt .opt_psd2html li{padding-bottom:17px}
.ser_opt .tab{padding-left:20px; display:block}
.ser_opt strong{background:url(../images/dot_gray_under.gif) repeat-x 0 bottom}

.ser_mine{width:150px; height:218px; float:left; padding:0 0 0 5px}
.ser_mine li{padding-bottom:5px}

.lastedWork{float:right; width:240px; height:300px}
.lastedWork li{text-align:center; padding:2px 0 14px; position:relative}
.lastedWork li.first{padding:8px 0 0 0}
.lastedWork a span{position:absolute; left:0; bottom:0; width:198px; height:13px; text-align:left; padding:2px 0 0 2px; display:none}
.lastedWork a{background:none; display:block; width:200px; height:60px; margin:0 0 0 15px; position:relative}
.lastedWork img{background:none; border:none}

.hagin-home{float:left; padding:20px 0 0 50px; font-size:1.2em; width:650px}
.hagin-home h1{font-family:tahoma; padding:10px 0 20px; font-size:2em; font-weight:400}
.hagin-home p{padding-bottom:10px}