@charset "utf-8";
/* CSS Document */

#wrapper_aboutus{
	padding-top:10px;
	background-image:url(../images/aboutus_bg.jpg);
	background-position:bottom;
	background-repeat:no-repeat;
	height:500px;
	background-color:#FFFFFF;
}
#wrapper_aboutus #content{
	color:#FFFFFF;
	margin:130px 50px 0px 360px;
	text-align:justify;
	font-size:11px;
	line-height:17px;
	cursor:default;
}
#wrapper_aboutus #content p{
	margin-bottom:1.5em;
}
#wrapper_aboutus #content a img{
	border:0px;
	cursor:pointer;
}
#wrapper_aboutus #content a:hover img{
	border:0px;
	cursor:pointer;
}
#index_tutorial{
	margin-left:202px;
}

#index_tutorial h1{
	background-color:#000000;
	color:#FFFFFF;
	font-family:"Courier New", Courier, monospace;
	padding:2px 4px;
	font-size:16px;
	font-weight:normal;
}
#index_tutorial_box{
	margin-bottom:10px;
	height:90px;
}
#index_tutorial_box img{
	height:85px;
	width:85px;
	margin-right:15px;
	float:left;
}
#index_tutorial_box h2{
	color:#F47932;
	font-size:12px;
	font-weight:bold;
	margin:0px;
	padding:0px;
	margin-bottom:3px;
}
#index_tutorial_box p{
	color:#666666;
	margin:4px 0px 0px 0px;
	font-size:11px;
	line-height:16px;
	text-align:justify;
}
#index_latest_work{
	margin-left:202px;
	padding-bottom:20px;
}
#index_latest_work h1{
	background-color:#000000;
	color:#FFFFFF;
	font-family:"Courier New", Courier, monospace;
	padding:2px 4px;
	font-size:16px;
	font-weight:normal;
	margin-bottom:5px;
}
#index_latest_work img{
	width:60px;
	height:60px;
	margin:1px;
}

/*--------------------------------------------------------------*/
#wrapper_graphic{
	padding-top:10px;
	padding-bottom:10px;
	background-position:bottom;
	background-repeat:no-repeat;
	background-color:#FFFFFF;
}

#wrapper_graphic #content{
	padding-left:6px;
	padding-right:6px;
}

#wrapper_graphic #content img{
	display:block;
}
#wrapper_graphic #content a{
	display:block;
	width:274px;
	border:1px solid #DDD;
	height:150px;
	margin:5px;
	margin-bottom:10px;
	float:left;
	background-color:#FFF;
	text-align:center;
	color:#999;
	font-weight:bold;
	font-family:"Courier New", Courier, monospace;
}
#wrapper_graphic #content a:hover{
	border:1px solid #999;
	color:#000;
}
#wrapper_graphic #content a img{
	width:264px;
	margin-top:5px;
	margin-bottom:10px;
	height:110px;
	border:0px;
	display:block;
	margin-left:5px;
	margin-right:5px;
}

/*--------------------------------------------------------------*/
#wrapper_photo{
	padding-top:10px;
	padding-bottom:10px;
	background-position:bottom;
	background-repeat:no-repeat;
	background-color:#FFFFFF;
}

#wrapper_photo #content{
	padding-left:6px;
	padding-right:6px;
}

#wrapper_photo #content a{
	display:block;
	width:274px;
	border:1px solid #DDD;
	height:120px;
	margin:5px;
	margin-bottom:10px;
	float:left;
	background-color:#FFF;
	text-align:center;
	color:#999;
	font-weight:bold;
	font-family:"Courier New", Courier, monospace;
}
#wrapper_photo #content a:hover{
	border:1px solid #999;
	color:#000;
}
#wrapper_photo #content a img{
	width:264px;
	margin-top:5px;
	margin-bottom:10px;
	height:110px;
	border:0px;
}
/*--------------------------------------------------------------*/
#wrapper_web{
	padding-top:10px;
	padding-bottom:10px;
	background-position:bottom;
	background-repeat:no-repeat;
	background-color:#FFFFFF;
}

#wrapper_web #content{
	padding-left:10px;
	padding-right:10px;
}
#wrapper_web #content #left_photo{
	float:left;
	width:600px;
	background-color:#FFF;
	height:400px;
	border-bottom:1px solid #000;
}
#wrapper_web #content #left_photo iframe{
	width:600px;
	overflow:hidden;
	height:400px;
	border:0px solid #FFF;
}
#wrapper_web #content #right_list{
	float:right;
	width:249px;
	background-color:#EEE;
	height:400px;
	overflow:auto;
	border-bottom:1px solid #000;
	border-left:1px solid #FFF;
}
#wrapper_web #content #right_list a{
	display:block;
	line-height:15px;
	width:230px;
	border-bottom:1px solid #FFF;
	color:#333;
	background-color:#EEE;
	padding: 2px 0px;
}
#wrapper_web #content #right_list a span{
	margin:0px 7px;
	display:block;
	height:33px;
}
#wrapper_web #content #right_list a:hover{
	background-color:#333;
	background-image:url(../images/web-design-link-bg.png);
	background-repeat:repeat-x;
	color:#FFF;
}

/*--------------------------------------------------------------*/
#wrapper_media{
	padding-top:10px;
	padding-bottom:0px;
	background-position:bottom;
	background-repeat:no-repeat;
	background-color:#FFFFFF;
}

#wrapper_media #content{
	background-color:#999999;
	width:870px;
	height:420px;
}

/*--------------------------------------------------------------*/
#wrapper_interactive{
	padding-top:10px;
	padding-bottom:0px;
	background-position:bottom;
	background-repeat:no-repeat;
	background-color:#FFFFFF;
}

#wrapper_interactive #content{
	padding:5px 5px;
}
#wrapper_interactive #content ul{
	margin:0px;
	padding:0px;
}
#wrapper_interactive #content ul li{
	list-style:none;
	margin:5px;
	padding:0px;
	height:160px;
	width:418px;
	border:1px solid #CCC;
	float:left;
}
#wrapper_interactive #content ul li img{
	margin:5px;
	height:150px;
	width:150px;
	float:left;
}
#wrapper_interactive #content ul li span{
	margin:5px 5px 5px 0px;
	float:left;
	width:253px;
	cursor:default;
	display:block;
}
#wrapper_interactive #content ul li span h3{
	margin-top:0px;
	margin-bottom:3px;
	padding:1px 2px;
	background-color:#000000;
	color:#FFF;
	font-size:12px;
}
#wrapper_interactive #content ul li span a{
	display:block;
	padding:1px 0px;
	text-align:right;
}
#wrapper_interactive #content ul li span div{
	height:110px;
}

/*--------------------------------------------------------------*/
#wrapper_writing{
	padding-top:10px;
	padding-bottom:0px;
	background-position:bottom;
	background-repeat:no-repeat;
	background-color:#FFFFFF;
}

#wrapper_writing #content{
	padding:0px 10px;
}
#wrapper_writing #content div#list{
	display:block;
	padding-bottom:250px;
	background-image:url(../images/writing.png);
	background-position:bottom right;
	background-repeat:no-repeat;
}
#wrapper_writing #content div#list a{
	display:block;
	padding:3px 10px;
	border-bottom:1px solid #CCC;
	height:15px;
}
#wrapper_writing #content div#list a div#title{
	display:block;
	width:600px;
	float:left;
	cursor:pointer;
}
#wrapper_writing #content div#list a div#type{
	display:block;
	width:150px;
	float:left;
	cursor:pointer;
}
#wrapper_writing #content div#list a div#date{
	display:block;
	width:80px;
	float:left;
	cursor:pointer;
}
#wrapper_writing #content div#list a:hover{
	background-color:#F47932;
	color:#FFF;
}

#wrapper_writing #content #content_text{
	margin:15px 15px 0px 15px;
	padding-bottom:50px;
	font-size:16px;
	line-height:1.5em;
}

/*--------------------------------------------------------------*/
#wrapper_download{
	padding-top:10px;
	padding-bottom:0px;
	background-position:bottom;
	background-repeat:no-repeat;
	background-color:#FFFFFF;
}

#wrapper_download #content{
	padding:5px 5px;
}
#wrapper_download #content ul{
	margin:0px;
	padding:0px;
}
#wrapper_download #content ul li{
	list-style:none;
	margin:5px;
	padding:0px;
	height:160px;
	width:418px;
	border:1px solid #CCC;
	float:left;
}
#wrapper_download #content ul li img{
	margin:5px;
	height:150px;
	width:150px;
	float:left;
}
#wrapper_download #content ul li span{
	margin:5px 5px 5px 0px;
	float:left;
	width:253px;
	cursor:default;
	display:block;
}
#wrapper_download #content ul li span h3{
	margin-top:0px;
	margin-bottom:3px;
	padding:1px 2px;
	background-color:#000000;
	font-size:12px;
	color:#FFF;
}
#wrapper_download #content ul li span a{
	display:block;
	padding:1px 0px;
	text-align:right;
}
#wrapper_download #content ul li span div{
	height:110px;
}

/*--------------------------------------------------------------*/
#wrapper_tutorial{
	padding-top:10px;
	padding-bottom:0px;
	background-position:bottom;
	background-repeat:no-repeat;
	background-color:#FFFFFF;
}

#wrapper_tutorial #content{
	padding:0px 5px;
	padding-bottom:50px;
}
#wrapper_tutorial #top_list{
	clear:both;
	width:810px;
	margin-left:auto;
	margin-right:auto;
	margin-top:60px;
	margin-bottom:60px;
}
#wrapper_tutorial #top_list a{
	display:block;
	height:40px;
	line-height:40px;
	width:260px;
	float:left;
	background-color:#666;
	color:#FFF;
	font-size:24px;
	margin:5px;
	text-align:center;
}
#wrapper_tutorial #top_list a#photoshop{
	background-image:url(../images/btn-bg-over.png);
}
#wrapper_tutorial #top_list a#photoshop:hover{
	background-image:url(../images/btn-bg-photoshop.png);
}
#wrapper_tutorial #top_list a#illustrator{
	background-image:url(../images/btn-bg-over.png);
}
#wrapper_tutorial #top_list a#illustrator:hover{
	background-image:url(../images/btn-bg-illustrator.png);
}
#wrapper_tutorial #top_list a#flash{
	background-image:url(../images/btn-bg-over.png);
}
#wrapper_tutorial #top_list a#flash:hover{
	background-image:url(../images/btn-bg-flash.png);
}
#wrapper_tutorial #top_list a#web_design{
	background-image:url(../images/btn-bg-over.png);
}
#wrapper_tutorial #top_list a#web_design:hover{
	background-image:url(../images/btn-bg-web-design.png);
}
#wrapper_tutorial #top_list a#window{
	background-image:url(../images/btn-bg-over.png);
}
#wrapper_tutorial #top_list a#window:hover{
	background-image:url(../images/btn-bg-window.png);
}

#wrapper_tutorial #content h3{
	color:#F47932;
	border-bottom:1px solid #F47932;
	margin-top:15px;
	margin-left:5px;
	margin-right:5px;
	margin-bottom:0px;
	clear:both;
	
}
#wrapper_tutorial #content div#list{
	display:block;
	padding-bottom:15px;
}
#wrapper_tutorial #content div#list a{
	display:block;
	width:418px;
	border:1px solid #CCC;
	height:98px;
	float:left;
	margin:5px;
	color:#666;
}
#wrapper_tutorial #content div#list a:hover{
	border:1px solid #666;
	color:#F47932;
}
#wrapper_tutorial #content div#list a img{
	float:left;
	margin:5px 0px 0px 5px;
}
#wrapper_tutorial #content div#list a span{
	float:left;
	display:block;
	width:295px;
	margin:5px 5px 5px 10px;
}
#wrapper_tutorial #content div#list a span strong{
	display:block;
	margin-bottom:5px;
}

#wrapper_tutorial #content #content_text{
	margin:15px 15px 0px 15px;
	padding-bottom:50px;
	font-size:16px;
	line-height:1.5em;
}

/*--------------------------------------------------------------*/
#wrapper_tutorial_details{
	padding-top:10px;
	padding-bottom:0px;
	background-position:bottom;
	background-repeat:no-repeat;
	background-color:#FFFFFF;
}

#wrapper_tutorial_details #content{
	padding:20px 30px;
	line-height:1.7em;
	font-size:16px;
}
#wrapper_tutorial_details h3{
	font-size:18px;
	clear:both;
	display:block;
	padding-top:2em;
	margin-bottom:0.5em;
}
#wrapper_tutorial_details img.photo_board, #wrapper_tutorial_details img.photo_board_left, #wrapper_tutorial_details img.photo_board_right{
	border:1px solid #999;
	padding:5px;
	margin-bottom:10px;
}
#wrapper_tutorial_details img.photo_board_left{
	float:left;
	margin-right:25px;
}
#wrapper_tutorial_details img.photo_board_right{
	float:right;
	margin-left:25px;
}
#wrapper_tutorial_details div.quo{
	width:80%;
	border:1px solid #999;
	background-color:#DDD;
	color:#333;
	font-size:12px;
	margin-left:auto;
	margin-right:auto;
	padding:10px;
	margin-top:10px;
	margin-bottom:10px;
	line-height:1.1em;
}

/*--------------------------------------------------------------*/
#wrapper_contactme{
	padding-top:0px;
	padding-bottom:0px;
	background-position:bottom;
	background-repeat:no-repeat;
	background-color:#FFFFFF;
}

#wrapper_contactme #content{
	padding-left:0px;
	padding-right:0px;
	height:350px;
	background-image:url(../images/contact-me.png);
	background-position:bottom right;
	background-repeat:no-repeat;
}
#wrapper_contactme #content #info_box{
	margin-top:30px;
	margin-left:30px;
	width:280px;
	border-top:1px dashed #999;
}
#wrapper_contactme #content #info_box #box_row{
	clear:both;
	padding-top:2px;
	padding-bottom:2px;
	border-bottom:1px dashed #999;
}
#wrapper_contactme #content #info_box #box_row #left_title{
	float:left;
	width:70px;
}
#wrapper_contactme #content #info_box #box_row #right_content{
	float:left;
	width:160px;
}

#wrapper_contactme #content #mail_box{
	margin-top:30px;
	margin-left:30px;
	width:350px;
	border-top:1px dashed #999;
}
#wrapper_contactme #content #mail_box #box_row{
	clear:both;
	padding-top:2px;
	padding-bottom:2px;
	border-bottom:1px dashed #999;
}
#wrapper_contactme #content #mail_box #top_title{
	font-size:11px;
	padding:2px 0px;
	font-weight:bold;
	clear:both;
	border-bottom:1px dashed #999;
}
#wrapper_contactme #content #mail_box #box_row #left_title{
	float:left;
	width:100px;
}
#wrapper_contactme #content #mail_box #box_row #right_content{
	float:left;
	width:180px;
}
.mail_form_field, .mail_form_field_multi{
	width:245px;
	border:1px solid #CCC;
	font-size:12px;
}
.mail_form_field_multi{
	height:100px;
}
.mail_form_btn{
	width:60px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	cursor:pointer;
}

#bottom_adsense_banner{
	text-align:center;
	clear:both;
	padding-top:5px;
	padding-bottom:10px;
}