body{ background:#FFF url(../images/bg.png) top center repeat-x; border-top:5px solid #8C8C8C; color:#8C8C8C; font-size:12px;}
.annouce{ margin-top:40px; font-size:333px; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; color:#FFF; text-align:center; text-shadow:1px 1px 5px #000;}
#logo{ width:83px; height:120px; background:url(../images/logo.png) center center no-repeat; text-indent:-9999px; margin:15px 0px 10px 10px;}
.tree{ width:365px; height:485px; background:url(../images/tree.png) center center no-repeat; text-indent:-9999px; margin-top:40px;}
#mainmenu{ position:fixed; bottom:0; margin:3px 0; text-align:center; z-index:12;}
#mainmenu .menu_link{ margin:0 10px; font-size:24px; font-weight:bold; display:inline-block;}
.menu_link a{ height:25px; text-decoration:none; text-indent:-9999px; display:block;}
#mainmenu .home a{ width:65px; background:url(../images/mainmenu.png) -530px 0px no-repeat;}
#mainmenu .about a{ width:66px; background:url(../images/mainmenu.png) 0px 0px no-repeat;}
#mainmenu .promote a{ width:96px; background:url(../images/mainmenu.png) -310px 0px no-repeat;}
#mainmenu .webdesign a{ width:123px; background:url(../images/mainmenu.png) -407px 0px no-repeat;}
#mainmenu .portfolio a{ width:98px; background:url(../images/mainmenu.png) -68px 0px no-repeat;}
#mainmenu .client a{ width:62px; background:url(../images/mainmenu.png) -166px 0px no-repeat;}
#mainmenu .contact a{ width:83px; background:url(../images/mainmenu.png) -228px 0px no-repeat;}
/* hover */
#mainmenu .home a:hover, #mainmenu .home a.current{ background-position:-530px -25px !important;}
#mainmenu .about a:hover, #mainmenu .about a.current{ background-position:0px -25px !important;}
#mainmenu .promote a:hover, #mainmenu .promote a.current{ background-position:-310px -25px !important;}
#mainmenu .webdesign a:hover, #mainmenu .webdesign a.current{ background-position:-407px -25px !important;}
#mainmenu .portfolio a:hover, #mainmenu .portfolio a.current{ background-position:-68px -25px !important;}
#mainmenu .client a:hover, #mainmenu .client a.current{ background-position:-166px -25px !important;}
#mainmenu .contact a:hover, #mainmenu .contact a.current{ background-position:-228px -25px !important;}

#header{ position:absolute; top:0; width:100%; margin-top:5px;}
.switch{ width:20px; height:20px; text-indent:-9999px; background:url(../images/switch.png) center center no-repeat; position:absolute; top:150px; left:-20px;}

.home_text_box{ margin-top:150px;}
.home_text{ text-indent:-9999px; width:580px; position:absolute;}
.home_text.eng{ background:url(../images/home_text.png) top left no-repeat; height:115px;}
.home_text.thai{ background:url(../images/home_text_thai.png) top left no-repeat; height:280px;}
.profession{ height:90px; background:url(../images/whatwedo.png) top left no-repeat; text-indent:-9999px; top:0; position:relative; margin-top:-10px;}

#testimonial{ margin-top:40px;}
.head{ width:280px; height:28px; background: url(../images/testimonial.png) top left no-repeat; text-indent:-9999px;}
#testimonial .testimonial_text{ color:#666666; font-size:11px; padding:0 35px; margin:5px 0px 0px -35px; text-align:justify; background:url(../images/quote.png) 0px 0px no-repeat; min-height:50px;}
.testimonial_who, .testimonial_job{ color:#4210D2; font-style:italic; font-weight:bold; font-size:11px;}

.rss, .facebook, .twitter{ width:32px; height:32px; text-indent:-9999px; display:block; float:left; margin:0 5px;}
.rss{ background:url(../images/rss.png) center center no-repeat;}
.facebook{ background:url(../images/facebook.png) center center no-repeat;}
.twitter{ background:url(../images/twitter.png) center center no-repeat;}
#social{ right:0; top:0; margin: 10px 5px 5px; position:absolute;}

.center_page, .page{ position:relative;}
/*.page{ margin-top:130px;}*/
.page{ margin-top:7%; margin-bottom:30px;}

.about_content{ text-align:justify;}
.whoweare{ width:222px; height:125px; background:url(../images/whoweare.png) center center no-repeat; margin:0 20px 10px 0; float:left; text-indent:-9999px;}

#logo_big{ height:214px; background:url(../images/logo_big.png) center center no-repeat; margin-top:60px;}
#logo_big a{ height:280px; width:160px; display:block; background:url(../images/logo_big_shade.png) center bottom no-repeat; text-indent:-9999px;}


/* contact */
.contact_info{ height:300px; background:url(../images/contact_board.png) center top no-repeat; margin:-130px 0 0 5px; padding:155px 5px 5px 5px;}
.contact_info .text_box{ text-align:justify; color:#805F2F; font-size:12px; text-shadow:1px 1px 0px #fff; margin:3px 10px 0 13px;}
.contact_form input[type="text"], .contact_form textarea{ border:none; background:#DBE3F6; width:240px !important; color:#6E90DB; float:right;}
.contact_form div{ margin:10px 0;}
.inline_hilight{ color:#6E90DB; font-size:12px; font-weight:bold; width:80px; padding-right:10px; text-align:right; display:block; float:left;}
.submit_button{ background:#6E90DB; color:#FFF; border:0; margin-left:100px;}
.contact_thankyou{ height:80px; background:url(../images/contact_thankyou.png) left top no-repeat; text-indent:-9999px;}
.button_group{ margin-top:15px !important;}
.contact_info a{ color:#630; font-weight:bold; text-decoration:none; border-bottom:1px dotted #630;}

/* client, portfolio */
#client, #portfolio, .home_box, .contact_right, .about_content{ background:url(../images/right_shade.png) center bottom no-repeat; padding-bottom:20px;}
.about_content{ margin-top:20px; padding-bottom:40px !important;}
.show_box{ height:400px; overflow:hidden; position:relative;}
#portfolio .show_box{ width:540px;}
.slide{ position:relative; margin:0 auto;}
#portfolio .slide{ width:520px;}
.client_logo{ text-align:center; margin-bottom:5px;}
.client_description{ text-align:justify; font-size:11px;}
.client_row{ margin-bottom:20px; height:180px;}

.portfolio_box{ height:400px;}
.port_img{ width:520px; height:300px; background:#FFF; border:1px solid #f5f5f5; -moz-box-shadow: 0px 0px 10px #F0F0F0; -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.1); box-shadow: 0px 0px 8px rgba(0,0,0,0.1);}
.port_img.first{ margin-top:10px;}
.port_img img{ width:500px; height:280px; border:0; margin:10px;}
.port_link{ text-align:center; font-weight:bold; margin:5px 0 5px 0;}
.lame_url{ padding-right:18px; margin-right:10px; background:url(../images/port_dot.png) center right no-repeat; }
.lame_url a{ text-decoration:none; color:#DB6E73;}
.gotowebsite a{ color:#666666; text-decoration:none;}
.port_description{ text-align:justify; line-height:14px; font-size:11px;}
.port_tag{ color:#4210D2; font-style:italic; font-weight:bold; font-size:11px; text-align:right;}
.latest_work{ width:125px; height:125px; top:-9px; left:-9px; background:url(../images/latest_work.png) top left no-repeat; position:absolute; z-index:2;}
.port_gallery{ display:none;}

.nav{}
.nav_top, .nav_bottom{ width:80px; height:40px; text-indent:-9999px; position:absolute; width:100%;}
/*.nav_top{ background:url(../images/nav_top.png) center center no-repeat; top:-40px;}
.nav_bottom{ background:url(../images/nav_bottom.png) center center no-repeat; bottom:-40px;}*/
.nav_top{ background:url(../images/nav_top.png) center center no-repeat; top:-50px;}
.nav_bottom{ background:url(../images/nav_bottom.png) center center no-repeat; bottom:-50px;}

.bg_page{ position:relative;}
.bg_object{ height:76px; top:282px; width:960px; position:absolute; right:0; z-index:-1;}
.about.bg_object{ background:url(../images/bg_about.png) right bottom no-repeat;}
.contact.bg_object{ background:url(../images/bg_contact.png) right bottom no-repeat;}
.portfolio.bg_object{ height:96px !important; background:url(../images/bg_portfolio.png) right bottom no-repeat;}
.client.bg_object{ background:url(../images/bg_client.png) right bottom no-repeat;}
.promote.bg_object{ background:url(../images/bg_adwords.png) right bottom no-repeat;}

.bold_title{ font-weight:bold; color:#A45356; font-size:14px;}
.commond_text{ margin-bottom:10px;}

/*adwords*/
#promote{}
#promote #mac{ width:650px; height:390px; background:url(../images/mac_bg.png) center center no-repeat; margin-left:-30px; margin-top:-30px;}
#promote #mac.air{ background:url(../images/mac_air_bg.png) center center no-repeat !important;}
#promote_content{ width:417px; height:261px; position:absolute; top:12px; left:85px; z-index:5;}
#promote_menu{ text-align:center; margin:0 auto 10px; width:510px; z-index:10; position:relative;}
#promote_object{ position:absolute; width:730px; height:500px; top:0; overflow:hidden;}
#object_promote_chest{ width:235px; height:215px; background:url(../images/object_adwords_chest.png) center center no-repeat; position:absolute; left:0; bottom:80px;}
#object_promote_lego{ width:220px; height:227px; background:url(../images/object_adwords_lego.png) center center no-repeat; position:absolute; left:0; bottom:80px;}
#object_promote_number1{ width:200px; height:370px; background:url(../images/object_adwords_number1.png) center center no-repeat; position:absolute; right:100px; bottom:50px;}
#object_promote_horn{ width:250px; height:300px; background:url(../images/object_adwords_horn.png) center center no-repeat; position:absolute; right:20px; bottom:80px;}
#object_promote_bonzai{ width:255px; height:360px; background:url(../images/object_adwords_bonzai.png) center center no-repeat; position:absolute; left:-5px; bottom:120px;}
#object_promote_gold{ width:230px; height:260px; background:url(../images/object_adwords_gold.png) center center no-repeat; position:absolute; right:0; bottom:50px;}
.object_slide{ height:100%; position:absolute; z-index:2;}
.object_slide2{ z-index:1;}
.object_slide3{ z-index:0;}
.object_page{ float:left; width:730px; position:relative; height:100%;}

.promote_menu_link{ margin:0 10px; height:25px; text-indent:-9999px; display:block; float:left;}
#a_page2{ width:93px; background:url(../images/adwords_link.png) 0px -25px no-repeat;}
#a_page3{ width:92px; background:url(../images/adwords_link.png) -93px -25px no-repeat;}
#a_page1{ width:138px; background:url(../images/adwords_link.png) -185px -25px no-repeat;}
#a_page4{ width:99px; background:url(../images/adwords_link.png) -420px -25px no-repeat;}

#a_page2:hover, #a_page2.active{ background:url(../images/adwords_link.png) 0px 0px no-repeat;}
#a_page3:hover, #a_page3.active{ background:url(../images/adwords_link.png) -93px 0px no-repeat;}
#a_page1:hover, #a_page1.active{ background:url(../images/adwords_link.png) -185px 0px no-repeat;}
#a_page4:hover, #a_page4.active{ background:url(../images/adwords_link.png) -420px 0px no-repeat;}
.menu_link.dot{ width:8px; height:25px; margin:0 10px; background:url(../images/gray_dot.png) center right no-repeat;}

#promote_content .content{ padding:10px; position:absolute; width:397px;}
#promote_content .content ul{ list-style:none; padding-left:0;}
#promote_content .content li{ font-size:16px; width:360px;}
#promote_content .content1 li, #promote_content .content2 li{ margin:0 10px 0 auto; background:url(../images/violet_dot.png) left 10px no-repeat; padding-left:20px;}
#promote_content .content3 li, #promote_content .content4 li{ margin:0 auto 0 10px; background:url(../images/violet_dot.png) right center no-repeat; padding-right:20px; text-align:right;}

.promote_header{ height:38px; text-indent:-9999px; margin-bottom:5px;}
.promote_header.benefits{ width:136px; background:url(../images/adwords_header.png) 0px 0px no-repeat;}
.promote_header.why{ width:136px; background:url(../images/adwords_header.png) -136px 0px no-repeat; margin-left:auto;}
.promote_header.services{ width:203px; background:url(../images/adwords_header.png) -272px 0px no-repeat;}
.promote_header.prices{ width:102px; background:url(../images/adwords_header.png) -475px 0px no-repeat; margin-left:auto;}
.promote .slide_image{ text-align:right; margin:-5px -10px;}
.zoom{ display:block; position:absolute; width:163px; height:42px; text-indent:-9999px; background:url(../images/adwords_zoom.png) left top no-repeat; top:50px; right:-164px;}

#header #logo{ float:left;}
#header #social_button{ float:left; margin:15px;}
#header #like, #header #tweet, #header #googleplusone{ margin-bottom:7px;}

#logo_big #like, #logo_big #tweet, #logo_big #googleplusone{ margin: 5px 5px 7px 5px;}

#logo_big #like{ margin: -50px 5px 0 5px;}
.contact_object{ width:275px; height:435px; background:url(../images/ink_bottle.png) top left no-repeat; position:absolute; right:-40px; top:10px;}
#promote_content .orange{ color:#CE6AE6; font-weight:bold; font-size:18px !important; padding:0; margin:0 auto;}

.hide_portfolio, .hide_about, .hide_contact{ height:20px; position:absolute; display:block; z-index:10;}
.hide_portfolio{ width:80px; left:380px; top:70px;}
.hide_about{ width:85px; left:130px; top:92px;}
.hide_contact{ width:80px; left:270px; top:92px;}