/* 

vCard - CSS File

*/

*{margin:0 ; padding: 0}
html, body{
    height:100%;
    width:100%;
}
body{}

#idtable{
    display:table;
    height:100%;
    width:100%;
}
#idtd{
    display:table-cell;
    width:100%;
    height:100%;
    text-align:center;
    vertical-align:middle;
}

body {
    font-family:Arial, Tahoma, Verdana;
    font-size:12px;
    margin:0;

    padding:0;
    color:#000000;
    line-height:16px;

    background-repeat:repeat;
    background-color:#ffffff
}
* {
    margin:0;
    padding:0;
}
*:focus {
    outline:none; /* removes ugly dotted border but may make template more unsuable, up to you
					 if you want to keep it! */
}
.clr{clear:both}
form{margin:0; padding:0;}
hr {
    border: 0;
    color: #dedede;
    background-color: #dedede;
    height: 1px;
    margin:10px 0px 6px 0px;
    padding:0px;
}
/* heading */
h1, h2, h3, h4, h5 {margin-bottom:15px; font-weight:normal;}
h1 {font-size:24px; line-height:26px;}
h2 {font-size:20px; line-height:22px;}
h3 {font-size:18px; line-height:20px;}
h4 {font-size:12px; line-height:14px;}
h5 {font-size:12px; line-height:14px; margin:3px 0px; padding:0px;letter-spacing:1px;}

/* links */
a {color:#444444;text-decoration:underline;}
a:hover{color:#878686;}
a img{border:none; padding-bottom:20px}
.imgleft{float:left; padding-right:10px;}
.imgright{float:right; padding-left:10px;}
/* lists, blockquotes and paragraphs */
p, ul, ol, blockquote {

    margin-bottom:12px;
}




ul, ol {
    margin:10px 0 35px 40px;
}
li ol,
li ul
{
    font-size:1.0em;
    list-style:square;
    margin-bottom:0;
    margin-top:0;
}
li ol {list-style:decimal;}
blockquote {
    margin:25px 0 25px 0px;
    padding:10px 20px 10px 20px;
    background-color:#cccccc;
    border:solid 1px ;
}
a { text-decoration:none }
/* code */
code {
    font-family:Verdana, Arial;
    letter-spacing:1px;
    margin:25px 0 25px 0px;
    display:block;
    font-size:0.9em;
    border-left:4px solid #000;
    padding:15px 10px;
}
/*** END OF GLOBAL  ***/

/*** CONTAINER ***/
#container{width:auto; margin:auto; position:relative; padding-bottom: 20px;vertical-align: middle}
#glowbottom{width:1000px ; margin:0 auto; height:59px; z-index:50;  padding-bottom:50px; padding-top:50px; padding-left:0px;}
#pane1 {text-align: justify; height: 600px; width: 1000px;}
#pane2 {overflow: visible; padding-left: 0px; position: absolute; top: 0px; text-align: justify; height: 80px; width: 120px; padding-right: 0px;}
#fullcontent{padding-left:160px; padding-right:160px; padding-top:5px}
#fullcontent_sub{}
.navi{height:20px; z-index:1;  margin-top:0px; padding-right: 50px; float:left; text-align:left;}
.gall{margin:0 auto; height:59px; z-index:1;  margin-top:0px; margin-left: -100px; float:left;}
#logo1{min-height:30px;margin-left:890px}
#logo2 {min-height:20px;margin-right:-27px;color:#737373;width:330px;float:right;font-size:11px;padding-top:0px}
#logo3 {min-height:30px;margin-left:960px;padding-top:15px}
.testimonial1{color: #737373; font-style:italic;padding-bottom:20px}
.testimonial2{color: #737373; font-style:italic;float:right;margin-top:-30px}


#logo2 a{color: #737373; }
#logo2 a:hover{color: #000;}
.navi a:hover{color: #000;}
.navi a{color: #737373; padding-right: 20px;display: block; margin-bottom:0px}
.details{color: #737373; padding-bottom:0px}
.detail{color: #737373; padding-right:20px; }
#act{color: #000;}
#content{width:1000px; margin:0 auto; position:relative; z-index:2;padding-right:0px;}
#bg-content-repeat1{min-height:600px;}
#bg-content-repeat2{background-image:url(../images/bg.jpg); background-repeat:no-repeat;min-height:600px;}
#bg-content-top{height:26px;}
#bg-content-bottom{ height:5px;padding-top:0px;}
#main{padding:0px 80px;}
/*** END CONTAINER ***/
.peo{height: 180px; width: 840px; padding-top: 10px; overflow: hidden;padding-bottom:2px;}
.peo_left{width:120px; float: left; clear:right}
.peo_right{padding-left:160px; margin-top:-5px; margin-right: 160px;}

.peo1{width: 840px; padding-top: 10px; overflow: hidden;}
.peo_left1{width:120px; float: left; clear:right}
.peo_right1{padding-left:160px; margin-top:-5px; position:absolute; padding-right: 160px;}

.peo2{width: 840px; padding-top: 10px; overflow: hidden; padding-bottom:20px;padding-right: 160px;}
.peo_left2{float: left; width:380px; padding-right:0px;}
.peo_right2{}



.peo3{width: 680px; padding-top: 10px; overflow: hidden; padding-bottom:20px; padding-bottom:20px;}
.peo_left3{float: left; width:80px; padding-right:30px;}
.peo_right3 a{line-height:14px;}


.peo4{width: 840px; padding-top: 10px; overflow: hidden; padding-bottom:20px; padding-bottom:20px;}
.peo_left4{float: left; width:250px; padding-right:30px;line-height:14px;}
.peo_right4{}
INPUT {color:#fff;background:#969696;}

textarea {
    resize: none;
    background:#969696;
    color:#fff;
}
/*** TOP ***/
#top{width:502px}
#logo{width:260px; float:left;}
/* navigation */
#navtop{width:242px; float:left;}
#navtop ul{margin:0px; list-style-type:none; padding:10px 0px 0px 0px; float:right}
#navtop ul li{margin:0px 4px; list-style-type:none; padding:0px 0px 0px 0px; float:left} 
#navtop ul li a{height:27px; width:28px; display:block; float:left}
#navtop ul li.nav1 a{background-image:url(../images/nav-home-active.jpg); background-repeat:no-repeat;}
#navtop ul li.nav1 a.activeSlide{background-image:url(../images/nav-home.jpg); background-repeat:no-repeat;}
#navtop ul li.nav2 a{background-image:url(../images/nav-about.jpg); background-repeat:no-repeat;}
#navtop ul li.nav2 a.activeSlide{background-image:url(../images/nav-about-active.jpg); background-repeat:no-repeat;}
#navtop ul li.nav3 a{background-image:url(../images/nav-work.jpg); background-repeat:no-repeat;}
#navtop ul li.nav3 a.activeSlide{background-image:url(../images/nav-work-active.jpg); background-repeat:no-repeat;}
#navtop ul li.nav4 a{background-image:url(../images/nav-social.jpg); background-repeat:no-repeat;}
#navtop ul li.nav4 a.activeSlide{background-image:url(../images/nav-social-active.jpg); background-repeat:no-repeat;}
#navtop ul li.nav5 a{background-image:url(../images/nav-contact.jpg); background-repeat:no-repeat;}
#navtop ul li.nav5 a.activeSlide{background-image:url(../images/nav-contact-active.jpg); background-repeat:no-repeat;}
#nav a:focus { outline: none; }

.navigation {margin-right:0px; }
.thumb {float:left; display:inline; padding:0px 5px 0px 5px; font-size:12px; color: #737373}
.thumb a{color: #737373}
.thumb a:hover{color: #000;}
/*** END TOP ***/

/*** PAGE CONTENT ***/
#maincontent{width:502px; padding:0px 0px 40px 0px; height:310px; overflow:hidden}
.page{padding:35px 0px 0px 0px; background-color:#fff}

/* homepage */



/* about */
ul.l1{margin:20px 0px 20px 10px; padding:0px; list-style-type:none;}
ul.l1 li{background-image:url(../images/list.gif); background-position:0px 4px; background-repeat:no-repeat; padding:0px 0px 0px 22px}

/* work */
#work{height:150px; width:502px;}
ul.work{margin:0px 0px 0px 0px;padding:0px; list-style-type:none;}
ul.work li{list-style-type:none; float:left; display:inline; padding:5px 11px 5px 11px;}
#work-nav #next{width:36px;cursor:pointer; float:left}
#work-nav #prev{width:36px; cursor:pointer; float:left}
#work-nav{padding-left:10px; margin-top:30px;}

/* social */
ul.social{margin:20px 0px 0px 0px; padding:0px; list-style-type:none;}
ul.social li{list-style-type:none; float:left; display:inline; margin:0px 5px 12px 5px; background-image:url(../images/box.gif); background-repeat:no-repeat; width:223px; height:39px; padding:6px 8px}
ul.social li a, ul.social li a:visited{text-decoration:none;}
span.t1{font-size:18px;}

/* contact */

#left-content{ float:left; width:291px; }
#right-content{ float:right; width:200px; padding-top:13px;}
form{margin:0; padding:0;}
fieldset{border:0px;}
#contact_form{margin:0 auto; }
label{margin:3px 0px;}
label.sp { width:3px;}
span.error{color:red;text-align:left;}
#message{ margin-left:0px;}
#message h2	{}
#message p{margin:6px 0px; }
input.text-input{width: 220px; margin:3px 0px 6px 0px; padding:3px 2px; border:solid 1px #e4e4e4; vertical-align:middle}
textarea.text-input{ margin:0px 8px 4px 0px; padding: 3px 2px; border:solid 1px #e4e4e4; vertical-align:top; width:220px; font-family:Arial, Verdana, tahoma; font-size:12px;}
#contact_form input:focus, #contact_form textarea:focus {border:solid 1px #e4e4e4; }
textarea.text-input{width: 220px; margin:0px}
span.error{color:red;text-align:left;}
input.button{background-color:#cccccc; color:#000 !important; padding:5px 10px 8px 10px; width:100px; height: 30px; display:block; margin-top:10px; border:0px;cursor:pointer;}
/*** END PAGE CONTENT ***/

.format_form{padding-right:20px;}
#format{margin-top:25px;}


/**********************BEGIN haphan modificaton*********************/
#xgallery{width: 1000px; height: 600px;overflow: hidden; position: relative}
.navi li{list-style: none; display: block; float:left;}
.navi a{padding-right: 10px;}

#xgallery div{position: relative;top:0;width: 100%;}

.clickable {cursor: pointer;}
#logo3 a{display:block;width: 32px; height: 32px; overflow: hidden}
a.active{color:#000 !important}
/**********************END haphan modificaton***********************/