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

/* ==========================================

Contents:
	
	1. general setting
	2. #home, #other, #wrapper
	3. Nav
	4. banner
	5. #contents, #main
	6. Latest Project
	7. About
	8. Portfolio
	9. Contact
	10. Twitter
	11. #footer


============================================= */



/*******************************************/

/*           1. General Setting            */

/*******************************************/

*{
	margin: 0;
	padding: 0;
	}

h1, h2, h3, h4, h5{
	font-size: 100%;
	}

body{
	font: 14px Verdana, Arial, Helvetica, sans-serif;
	color: #888888;
	background: #333333;
	margin: 0 auto;
	text-align: center;
	}
	
img{
	border: none;
	}
	
.clear{
	clear: both;
	}
	
.dotline {
	background:transparent url(/images/dot.gif) repeat-x scroll center center;
	padding:1em 0;
	}
	
a{
	color: #7bd7ec;
	text-decoration: none;
	outline: none; /* to remove lines around images for IE */
	}
	
	a:hover{
		color: #1199bb;
		}
		
		
		
		
		

/*******************************************/

/*            2. Round Box                */

/*******************************************/		

/**** blue box ****/

.bluebox  { background-color: none; }
.bluebox1 { margin: 0 5px;height:1px;overflow: hidden; background-color:#7bd7ec; }
.bluebox2 { margin: 0 3px;height:1px;overflow: hidden; background-color:#7bd7ec; }
.bluebox3 { margin: 0 2px;height:1px;overflow: hidden; background-color:#7bd7ec; }
.bluebox4 { margin: 0 1px;height:2px;overflow: hidden; background-color:#7bd7ec; }
.bluebox5 {
	background-color:#7bd7ec;
	font:180% Georgia, "Times New Roman", Times, serif;
	text-align:center;
	}
	.bluebox5 a{ color: #ffffff; }
	.bluebox5 a:hover{ color: #1199bb; }
	
	
	
	
/**** grey box ****/

.greybox  { background-color: none; }
.greybox1 { margin: 0 5px;height:1px;overflow: hidden; background-color:#999999; }
.greybox2 { margin: 0 3px;height:1px;overflow: hidden; background-color:#999999; }
.greybox3 { margin: 0 2px;height:1px;overflow: hidden; background-color:#999999; }
.greybox4 { margin: 0 1px;height:2px;overflow: hidden; background-color:#999999; }
.greybox5 {
	background-color:#999999;
	font:120% Georgia, "Times New Roman", Times, serif;
	text-align:center;
	color: #ffffff;
	}

	
	
	
/**** light grey box ****/

.lightgreybox  { background-color: none; }
.lightgreybox1 { margin: 0 5px;height:1px;overflow: hidden; background-color:#cccccc; }
.lightgreybox2 { margin: 0 3px;height:1px;overflow: hidden; background-color:#cccccc; }
.lightgreybox3 { margin: 0 2px;height:1px;overflow: hidden; background-color:#cccccc; }
.lightgreybox4 { margin: 0 1px;height:2px;overflow: hidden; background-color:#cccccc; }
.lightgreybox5 {
	background-color:#cccccc;
/*	font:120% Georgia, "Times New Roman", Times, serif;*/
	text-align:center;
	}
	.lightgreybox5 a{ color: #ffffff; }
	.lightgreybox5 a:hover{ color: #666666; }


		
		


/*******************************************/

/*       2. #home, #other, #wrapper        */

/*******************************************/

#home{
	background: #ffffff url(/images/bg_home.jpg) repeat-x top left;
	padding-bottom: 40px;
	}
	
#other{
	background: #ffffff url(/images/bg_other.jpg) repeat-x top left;
	padding-bottom: 40px;
	}

#wrapper{
	margin:0 auto;	
	width: 950px;	
	text-align: left;	
	}
	
	
	
	
	
	
/********************************/

/*           3. Nav             */

/*******************************/

#other #header{
	margin-bottom: 70px;
	}

#header h1{
	float: left;
	margin-top:10px;
	}

#header ul{
	list-style: none;
	display: inline;
	float: left;
	margin: 20px 0 0 315px;
	_margin-left:300px; /* for IE6 */
	}
	
	#header ul li{
		float: left;
		font: 160% Georgia, "Times New Roman", Times, serif;
		margin-left: 25px;
		}
	
		#header ul li span{
			font-size: 80%;
			}
		
		#header ul li a{
			color: #ffffff;
			text-decoration: none;
			}
			
			#header ul li a:hover{
				color: #7bd7ec;
				}







/***********************************/

/*           4. banner            */

/***********************************/

#banner{
	background: url(/images/banner.png) no-repeat 140px top;
	margin-top:25px;
	padding-top:230px;
	}






/*************************************/

/*         5. #contents, #main       */

/*************************************/

#contents{
	margin-top: 35px;
	}

#contents h2{
	font: 350% Georgia, "Times New Roman", Times, serif;
	color: #7bd7ec;
	margin-bottom: 20px;
	}

#contents .about_desc ul{
	list-style: square inside;
	margin: 15px 0;
	padding-left:15px;
	}

#contents .about_desc p{margin-bottom:10px;}
	
#main{
	float: left;
	width: 650px;
	}
	
		
		


/*************************************/

/*        6. Latest Project          */

/*************************************/

.latest_thumb{
	float: left;
	width: 280px;
	}
	
	.latest_thumb img{
		border:7px solid #cccccc;
		}
	
	.latest_thumb img:hover{
		border:7px solid #7bd7ec;
		}
		
	.latest_url{
		margin-top: 15px;
		}
		
		

/**** Project Description ****/
	
.desc{
	float: left;
	width: 350px;
	margin-left: 20px;
	}
	
	.desc h3, #portfolio h3{
		font: 210% Georgia, "Times New Roman", Times, serif;
		padding-bottom:10px;
		border-bottom: 0.13em dotted #dddddd;
		margin-bottom:15px;
		}
		
	.cat{
		width: 80px;
		float: left;
		}
		
	.desc .date{
		float: left;
		font: 160% Georgia, "Times New Roman", Times, serif;
		margin-left: 20px;
		margin-bottom: 15px;
		}
		
	#portfolio .date{
		float: left;
		font: 145% Georgia, "Times New Roman", Times, serif;
		margin-left: 15px;
		margin-bottom: 15px;
		margin-top: 5px !important;
		}
		
	.desc p, #portfolio p{
		line-height: 20px;
		}
		
	.client{
		border-top: 0.25em dotted #dddddd;
		padding-top: 15px;
		}
		
	.desc ul{
		list-style: url(/images/check.gif);
		font-size: 120%;
		line-height: 25px;
		border-top: 0.2em dotted #dddddd;
		padding:15px 0 0 30px;
		}

        #portfolio ul{
		list-style: url(/images/check.gif);
		font-size: 120%;
		line-height: 25px;
		border-top: 0.2em dotted #dddddd;
		margin-top:15px;
		padding:15px 0 0 30px;
		}
	





/*************************************/

/*            7. About               */

/*************************************/

.about{
	background: url(/images/bg_about.jpg) no-repeat 150px top;
	margin-top: 60px;
	min-height:749px;
	_height:749px; /**** for IE6 ****/
	}
	
	.left{
		float: left;
		}
		
	.right{
		float: left;
		margin-left: 285px;
		}
		
		.about ul{
			background: url(/images/box_bg.gif) repeat-y;
			width: 330px;
			list-style: none;
			margin-bottom: 130px;
			}
			
			.about .box_top{
				background:url(/images/box_top.gif) no-repeat;
				height: 17px;
				}
				
			.about .box_bottom{
				background:url(/images/box_bottom.gif) no-repeat;
				height: 17px;
				clear:both;
				}
			
			.about h3{
				font: 210% Georgia, "Times New Roman", Times, serif;
				margin-bottom:10px;
				padding:6px 0 6px 25px;
				}
				
			.English, .Japanese{
				display:inline;
				float:left;
				height:31px;
				margin-left: 25px;
				padding:6px 0 6px 45px;
				width:70px;
				}
				
			.Photoshop,.Illustrator,.Dreamweaver,.Fireworks,.Flash,.XHTML,.CSS,.Javascript,.PHP,.MySQL,.jQuery,.Wordpress,.Magento{
				border-bottom: dotted .22em #dddddd;
				height: 30px;
				margin: 10px 0 0 25px;
				padding:6px 0 6px 45px;
				width:240px;
				}
				
			
	/**** List set ****/
	
			.English{
				background: url(/images/icon_english.jpg) no-repeat;
				}
				
			.Japanese{
				background: url(/images/icon_japanese.jpg) no-repeat;
				}
				
			.Photoshop{
				background:url(/images/icon_photoshop.jpg) no-repeat;
				}
				
			.Illustrator{
				background:url(/images/icon_illustrator.jpg) no-repeat;
				}
				
			.Dreamweaver{
				background:url(/images/icon_dreamweaver.jpg) no-repeat;
				}
				
			.Fireworks{
				background:url(/images/icon_fireworks.jpg) no-repeat;
				}
				
			.Flash{
				background:url(/images/icon_flash.jpg) no-repeat;
				}
				
			.XHTML{
				background:url(/images/icon_xhtml.jpg) no-repeat;
				}
				
			.CSS{
				background:url(/images/icon_css.jpg) no-repeat;
				}
				
			.Javascript{
				background:url(/images/icon_javascript.jpg) no-repeat;
				}
				
			.PHP{
				background:url(/images/icon_php.jpg) no-repeat;
				}
				
			.MySQL{
				background:url(/images/icon_mysql.jpg) no-repeat;
				}
				
			.jQuery{
				background:url(/images/icon_jquery.jpg) no-repeat;
				}
				
			.Wordpress{
				background:url(/images/icon_wordpress.jpg) no-repeat;
				}
				
			.Magento{
				background:url(/images/icon_magento.jpg) no-repeat;
				}
				
			




/*************************************/

/*         8. Portfolio              */

/*************************************/

.lightbox img{
		border:7px solid #cccccc;
		}
	
	.lightbox img:hover{
		border:7px solid #7bd7ec;
		}
		
.lightbox_sub a{
	color: #ffffff;
	font-size: 150%;
	text-align: center;
	background: #cccccc;
	padding: 5px 10px;
	}
	
	.lightbox_sub a:hover{
		background: #7bd7ec;
		}

#portfolio{
	float: left;
	width: 270px;
	margin-left: 30px;
	}
	
	.all_projects{
		width: 110px;
		margin:20px 19px 30px 0;
		float: left;
		}
		
		.all_projects .lightgreybox5 {
			background:#CCCCCC url(/images/arrow_down.gif) no-repeat scroll 95px 5px;
			}
		
	
	.nextprev{
		float: left;
		margin-top: 16px;
		}
	
	.nextprev p{
		float: left;
		line-height: 0 !important;
		margin: 15px 5px 0;
		font-size:85%;
		}
	
/**** next projext ****/
	
	.nextprev .next_projects {
		float: left;
		width: 32px;
		height: 32px;
		cursor: pointer;
		background: transparent url(/images/next-horizontal.png) no-repeat 0 0;
		}

		.nextprev .next_projects:hover {
			background-position: -32px 0;
			}

		.nextprev .next_projects:active {
			background-position: -64px 0;
			}


/**** prev project ****/

	.nextprev .prev_projects {
		float: left;
		width: 32px;
		height: 32px;
		cursor: pointer;
		background: transparent url(/images/prev-horizontal.png) no-repeat 0 0;
		}

		.nextprev .prev_projects:hover {
			background-position: -32px 0;
			}
		
		.nextprev .prev_projects:active {
			background-position: -64px 0;
			}	
	

/**** launch button ****/

	.launch{
		margin-top: 40px;
		}
		
		
/**** all projects ****/

#all{
	margin-bottom: 20px;
	}
	
	#all h2{
		font: 350% Georgia, "Times New Roman", Times, serif;
		color: #7bd7ec;
		border-top: 0.07em dotted #dddddd;
		margin-top: 100px;
		padding: 20px 0 10px;
		}
		
	#all img{
		border:5px solid #cccccc;
		margin: 5px;
		}
	
	#all img:hover{
		border:5px solid #7bd7ec;
		}






/*************************************/

/*          9. contact               */

/*************************************/

.contact{
	background: url(/images/bg_form.jpg);
	margin-top: 30px;
	padding: 30px 0 30px 60px;
	color: #434343;
	}
		
	.row{
		margin: 15px 0;
		}
		
	.contact form label{
		font-size: 120%;
		}
		
	.contact form input.textbox {
		background:transparent url(/images/form1.png) no-repeat;
		font: 110% Verdana, Arial, Helvetica, sans-serif;
		border:0 none;
		color:#FFFFFF;
		height:25px;
		padding:8px;
		width: 510px;
		margin-top:3px;
		}
		
	.contact form textarea {
		background:transparent url(/images/form2.png) no-repeat;
		border:0 none;
		color:#FFFFFF;
		font: 110% Verdana, Arial, Helvetica, sans-serif;
		height:170px;
		padding:8px;
		width: 510px;
		margin-top:3px;
		overflow: auto;
		}
		
	.btn{
		width: 130px;
		margin: 20px 0;
		}
		
		.btn .btn_label{
			border:0 none;
			color:#FFFFFF;
			background:none;
			font: 100% Georgia, "Times New Roman", Times, serif;
			cursor: pointer;
			}





/*************************************/

/*          10. Twitter              */

/*************************************/

#twitter_div{
	float: left;
	width: 270px;
	margin-left: 30px;
	}
	
#twitter_update_list{
	list-style: none;
	background: url(/images/twitter_bg.gif) repeat-y;
	padding: 5px 20px;
	}
	
	#twitter_update_list li{
		border-bottom: dotted .22em #dddddd;
		margin-top: 10px;
		padding-bottom:10px;
		}
		
		#twitter_update_list li a{
			color: #cccccc;
			}
			
		#twitter_update_list li a:hover{
			color: #888888;
			}
			
		#twitter_update_list li span a{
			color: #7bd7ec;
			text-decoration: none;
			}
			
		#twitter_update_list li span a:hover{
			color: #1199bb;
			}
			
	
.twitter_top{
	background: url(/images/twitter_top.gif) no-repeat;
	height: 16px;
	text-indent: -3000em;
	}
	
.twitter_bottom{
	background: url(/images/twitter_bottom.gif) no-repeat;
	height: 154px;
	}
	
	.twitter_bottom p{
		font-family:Georgia,"Times New Roman",Times,serif;
		font-size:180%;
		line-height:25px;
		padding:90px 0 0;
		text-align:center;
		width:100px;
		}
		
		.twitter_bottom a{
			color: #ffffff;
			}
			
		.twitter_bottom a:hover{
			color: #1199bb;
			}
	




/****************************************/

/*           11. #footer                 */

/****************************************/

#footer{
	background: url(/images/bg_footer.gif) repeat-x top left;
	height: 60px;
	padding-top: 60px;
	}
	
#footer_wrapper{
	margin:0 auto;	
	width: 560px;	
	text-align: left;
	background: url(/images/logo_black.png) no-repeat top left;
	height: 48px;
	}
	
	
/**** Sitemap ****/

	.f_contents{
		margin-left:50px;
		width: 300px;
		float: left;
		}
		
		.f_contents ul{
			list-style: none;
			display: inline;
			margin-left: 50px
			}
			
			.f_contents ul li{
				float: left;
				font: 90% Arial, Helvetica, sans-serif;
				margin: 5px 0 3px 10px;
				}
			
				.f_contents ul li span{
					font-size: 85%;
					}
				
				.f_contents ul li a{
					color: #999999;
					text-decoration: none;
					}
					
					.f_contents ul li a:hover{
						color: #ffffff;
						}
						
		.f_contents p{
			font-size: 85%;
			clear: both;
			margin-left: 10px;
			}
			
			
/**** Social icons ****/

	ul.social{
		float: left;
		list-style: none;
		height: 42px;
		margin-left: 50px;
		position:relative;
		}
		
		ul.social a{
			display: block;
			text-indent: -9000em;
			position: absolute;
			outline: none;
			}
			
			ul.social a:hover{
				background-position: left bottom;
				}
			
		ul.social li{
			float: left;
			}
			
		ul.social .facebook{
			width: 42px;
			height: 42px;
			background:url(/images/facebook.png) no-repeat;
			}
			
		ul.social .stumbleupon{
			width: 42px;
			height: 42px;
			background:url(/images/stumbleupon.png) no-repeat;
			left: 47px;
			}
			
		ul.social .twitter{
			width: 42px;
			height: 42px;
			background:url(/images/twitter.png) no-repeat;
			left: 94px;
			}