@charset "utf-8";
/* CSS Document */
/*------------------------------
		 General 
--------------------------------*/
html,body{
margin: 0px;
padding: 0px;
font:14px Tahoma;
color:#616D6D;
background: #D8E0E0;
background-image:url(../images/bg.jpg);
}
div,p,td{
font:14px Tahoma;
color:#616D6D;
margin:0px;
}
.box{
font-size:12px;
color:#616D6D;
}
img {
border: 0px;
}
a img {
border: 0px;
}
a:hover img{
border: 0px;
}
a:visited img {
border:0px;
}
a {
	font-weight: normal;
	color: #4d4d4d;
	text-decoration:underline;
}
a:hover {
	font-weight: normal;
	color: #4d4d4d;
	text-decoration:none;
}
h1{
font:14px Tahoma;
font-weight:normal;
padding:0;
margin:0;
}

/*------------------------------
		 Layout
--------------------------------*/
#main_content {
	position: absolute;
	width: 708px;
	top: 30%;
	left: 54%;
	margin-left:-410px;

}
#enter span, {
	display: none;	
}
#enter {
	display: block;
	position: absolute;
	left: 410px;
	top: 106px;
	
	width: 292px;
	height: 104px;
	background-image:url(../images/watana-design.gif);
	background-repeat:no-repeat;
}
#enter:hover {
	background-image:url(../images/watana-design_a.gif);
	background-repeat:no-repeat;
}

#contact a {
	color: #595b5b;
}

#header{
height:121px;
width:880px;
}

#maincontent{
width:880px;
}

#introduction {
position:relative;
margin:0px auto 0px auto;
width:880px;
padding-left:10px;
padding-right:10px;
}
#logo{
width:130px;
height:106px;
margin-top:15px;
float:left;
}
#social{
clear:inherit;
margin-top:15px;
margin-bottom:23px;
float:right;
width:148px;
height:18px;
}
#facebook{
display: block;
position: absolute;
width:19px;
height:18px;
background-image:url(../images/icon_f.gif);
}
#facebook:hover{
background-image:url(../images/icon_f_a.gif);
}
#twitter{
display: block;
position: absolute;
margin-left:27px;
width:18px;
height:18px;
background-image:url(../images/icon_t.gif);
}
#twitter:hover{
background-image:url(../images/icon_t_a.gif);
}
#exteen{
display: block;
position: absolute;
margin-left:53px;
width:19px;
height:18px;
background-image:url(../images/icon_e.jpg);
}
#exteen:hover{
background-image:url(../images/icon_e_a.jpg);
}
#blogspot{
display: block;
position: absolute;
margin-left:79px;
width:18px;
height:18px;
background-image:url(../images/icon_b.gif);
}
#blogspot:hover{
background-image:url(../images/icon_b_a.gif);
}
#blog{
display: block;
position: absolute;
margin-left:104px;
width:43px;
height:18px;
background-image:url(../images/blog.gif);
}
#blog:hover{
background-image:url(../images/blog_a.gif);
}
#menu{
clear:right;
float:right;
width:352px;
height:33px;
}
#menu_introduction{
display: block;
position: absolute;
width:84px;
height:33px;
background-image:url(../images/introduction_a.gif);
}
#menuintroduction{
display: block;
position: absolute;
width:84px;
height:33px;
background-image:url(../images/introduction.gif);
}
#menuintroduction:hover{
background-image:url(../images/introduction_a.gif);
}
#menu_about{
display: block;
position: absolute;
margin-left:118px;
width:47px;
height:33px;
background-image:url(../images/about_a.gif);
}
#menuabout{
display: block;
position: absolute;
margin-left:118px;
width:47px;
height:33px;
background-image:url(../images/about.gif);
}
#menuabout:hover{
background-image:url(../images/about_a.gif);
}
#menu_portfolio{
display: block;
position: absolute;
margin-left:199px;
width:61px;
height:33px;
background-image:url(../images/portfolio_a.gif);
}
#menuportfolio{
display: block;
position: absolute;
margin-left:199px;
width:61px;
height:33px;
background-image:url(../images/portfolio.gif);
}
#menuportfolio:hover{
background-image:url(../images/portfolio_a.gif);
}
#menu_contact{
display: block;
position: absolute;
margin-left:293px;
width:59px;
height:33px;
background-image:url(../images/contact_a.gif);
}
#menucontact{
display: block;
position: absolute;
margin-left:293px;
width:59px;
height:33px;
background-image:url(../images/contact.gif);
}
#menucontact:hover{
background-image:url(../images/contact_a.gif);
}
#h1_intro{
clear:left;
float:left;
margin-top:23px;
width:413px;
height:168px;
}
#box {
clear:right;
float:right;
margin-top:40px;
width:420px;
background-image:url(../images/bg_s.gif);
padding:10px;
}
#textbox {
clear:right;
float:right;
width:420px;
padding:10px;
}
#box_c{
margin-top:20px;
clear:left;
float:left;
width:398px;
margin-left:15px;
}
#h1_watanaimg{
clear:left;
float:left;
margin-top:23px;
width:299px;
height:270px;
background-image:url(../images/watana_design.jpg);
}
#h1_about{
margin-top:30px;
margin-right:326px;
width:237px;
height:52px;
background-image:url(../images/h1_about.gif);
float:right;
clear:right;
}
#detail_about{
margin-top:10px;
float:right;
clear:right;
width:547px;
height:187px;
background-image:url(../images/detail_about.gif);
}
#h1_education{
clear:left;
float:left;
margin-top:20px;
width:190px;
height:23px;
background-image:url(../images/h1_education.gif);
}
#h1_work{
clear:left;
float:left;
margin-top:20px;
width:160px;
height:24px;
background-image:url(../images/h1_working.gif);
}
#h1_skill{
clear:left;
float:left;
margin-top:20px;
width:130px;
height:18px;
background-image:url(../images/h1_skill.gif);
}
#h1_job{
clear:left;
float:left;
margin-top:20px;
width:96px;
height:21px;
background-image:url(../images/h1_job.gif)
}
#text{
clear:left;
float:left;
width:880px;
margin-top:10px;
}
#text ul{
margin:0px;
margin-left:20px;
padding:0px;
}
#h1_portfolio{
clear:left;
float:left;
margin-top:23px;
width:304px;
height:54px;
background-image:url(../images/h1_portfolio.gif);
}
#menuad{
clear:left;
float:left;
display: block;
margin-top:16px;
margin-left:30px;
width:150px;
height:23px;
background-image:url(../images/menu_ad_a.gif);
}
#menu_ad{
clear:left;
float:left;
display: block;
margin-top:16px;
margin-left:30px;
width:150px;
height:23px;
background-image:url(../images/menu_ad.gif);
}
#menu_ad:hover {
	background-image:url(../images/menu_ad_a.gif);
}
#menubanner{
clear:left;
float:left;
display: block;
margin-top:3px;
margin-left:30px;
width:119px;
height:23px;
background-image:url(../images/menu_banner_a.gif);
}
#menu_banner{
clear:left;
float:left;
display: block;
margin-top:3px;
margin-left:30px;
width:119px;
height:23px;
background-image:url(../images/menu_banner.gif);
}
#menu_banner:hover {
	background-image:url(../images/menu_banner_a.gif);
}
#menuweb{
clear:left;
float:left;
display: block;
margin-top:3px;
margin-left:30px;
width:101px;
height:23px;
background-image:url(../images/menu_web_a.gif);
}
#menu_web{
clear:left;
float:left;
display: block;
margin-top:3px;
margin-left:30px;
width:101px;
height:23px;
background-image:url(../images/menu_web.gif);
}
#menu_web:hover {
	background-image:url(../images/menu_web_a.gif);
}
#menulogo{
clear:left;
float:left;
display: block;
margin-top:3px;
margin-left:30px;
width:105px;
height:23px;
background-image:url(../images/menu_logo_a.gif);
}
#menu_logo{
clear:left;
float:left;
display: block;
margin-top:3px;
margin-left:30px;
width:105px;
height:23px;
background-image:url(../images/menu_logo.gif);
}
#menu_logo:hover {
	background-image:url(../images/menu_logo_a.gif);
}
#menupaint{
clear:left;
float:left;
display: block;
margin-top:3px;
margin-left:30px;
width:68px;
height:23px;
background-image:url(../images/menu_paint_a.gif);
}
#menu_paint{
clear:left;
float:left;
display: block;
margin-top:3px;
margin-left:30px;
width:68px;
height:23px;
background-image:url(../images/menu_paint.gif);
}
#menu_paint:hover {
	background-image:url(../images/menu_paint_a.gif);
}
#box_port {
clear:right;
float:right;
margin-top:30px;
width:548px;
}
#alpha {
display: block;
margin:3px;
float:left;
width:100px;
height:100px;
}
#alpha:hover img {
filter: alpha(opacity=65);
   -moz-opacity:.65;
   opacity:.65;
   }
#box_contact {
clear:right;
float:right;
margin-top:120px;
width:548px;
}
#h1_contact{
clear:left;
float:left;
margin-top:23px;
width:293px;
height:52px;
background-image:url(../images/h1_contact.gif);
}
#send{
font-size:16px;
width:418px;
float:left;
padding:3px;
padding-left:130px;
font-weight:bold;
vertical-align:middle;
}
#name{
padding:2px;
float:left;
font-size:12px;
width:118px;
text-align:right;
vertical-align:middle;
}
#textfield{
padding:2px;
font-size:10px;
float:left;
margin-left:10px;
width:410px;
text-align:left;
vertical-align:middle;
}
#textfield_multi{
padding:2px;
font-size:10px;
float:left;
margin-left:10px;
width:410px;
text-align:left;
vertical-align:text-top;
}
#submit{
padding:2px;
margin-left:130px;
float:left;
font-size:12px;
width:410px;
text-align:left;
vertical-align:middle;
}
#main_contact{
clear:left;
float:left;
display: block;
margin-top:35px;
margin-left:30px;
width:245px;
}
#main_contact dd{
margin:0px;
padding:0px;
}
#line{
clear:right;
float:right;
width:880px;
height:1px;
margin-top:20px;
margin-bottom:15px;
background-image:url(../images/line.gif);
}
#under{
width:880px;
}
#footer {
font-size:11px;
position:inherit;
clear:left;
float:left;
padding-bottom:15px;
margin-left:10px;
}
#adsense{
position:inherit;
clear:right;
float:right;
width:50px;
height:36px;
margin-right:10px;
}
.h1{
position:absolute;
top:-1000px
}