/************************
RESETS
**********************/
* {
	margin:0;
	padding:0;
	}
	
body{
	line-height:155%;
	font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:14px; 
	color:#666;
	background: #222;
	}

li {list-style:none;}

a {
	-moz-outline: none 0;
	outline: none 0;
	color:#FF9C00;
	text-decoration:none;
	}

a:hover{color:#000;}

img {border:none;}

small {color:#999;}

/************************
COMMON ELEMENTS
**********************/
.clear {clear:both;}
	
h2, h3 {
	font-size:30px; 
	color:#000;
	margin-bottom:10px;
	font-weight:normal;
       line-height:130%;
	}

h2 a, h3 a {
	color:#FF9C00;
	text-decoration:none;
	}
	
h2 a:hover, h3 a:hover {
	color:#000;
	}
	
.icon-web, .icon-sns, .icon-ci {
	width:24px;
	height:24px;
	display:block;
	text-indent:-9999px;
	float:right;
	}
	
.icon-ci {background:url(images/static/icon-ci.gif) no-repeat 0 0;}		
.icon-web {background:url(images/static/icon-web.gif) no-repeat 0 0;}	
.icon-sns {background:url(images/static/icon-sns.gif) no-repeat 0 0;}	

#intro h2 {padding:20px 0 0 120px;}
	
.work-preview-top li {
	float:left;
	margin-right:20px;
	background:url(images/static/work-thumb-bg.jpg) no-repeat 0 0;
	padding-bottom:15px;
	}

.work-preview-top li a{
	text-decoration:none;
	display:block;
	width:290px;
	height:160px;
	padding:5px 5px 5px 5px;
	margin-bottom:20px;
	font-size:12px;
	line-height:130%;
	overflow:hidden;
	}
	
.work-preview-top li a:hover {background:#CECECE;}	
	
.work-preview-top li img {
	width:290px;
	height:115px;
	}

#content-main .work-preview-top li strong, #content .work-preview-top li strong {
	display:block;
	width:266px;
	float:left;
	color:#666;
	}
	
.work-preview-top li span {
	display:block;
	width:24px;
	float:left;
	}
	
#content-main ol li {list-style-type: decimal; margin-left:20px;}
#content-main strong {color:#000;}
#content-main ul {padding:10px 0;}
#content-main ul li { display:list-item;}
#content-main p{padding-bottom:20px;}

#content-main blockquote p, #content-main blockquote ul{
  	border-left: 3px solid #F7A54A;  	
  	padding: 0 60px 0 30px;
  	margin: 0 0 20px 0;
 	color:#333;
	}

.btn-more {
	clear:both;
	text-indent:-9999px;
	display:block;
	background: url(images/static/btn-more.gif) no-repeat 0 0;
	width:99px;
	height:26px;
	}
.ja .btn-more{background-image:url(images/static/btn-more-jp.gif)}	
	
.btn-more:hover {background-position: 0 -26px;}

#btn-ja {
	position:relative;
	right:16px;
	float:right;
	width:67px;
	display:block;
	height:31px;
	background:url(images/static/btn-jp.gif) no-repeat 0 0;
	text-indent:-9999px;
	}

#btn-en {
	position:relative;
	right:16px;
	float:right;
	width:67px;
	display:block;
	height:31px;
	background:url(images/static/btn-en.gif) no-repeat 0 0;
	text-indent:-9999px;
	}
	

#btn-en:hover, #btn-ja:hover {background-position:0 -31px;}
	
/************************
GENERAL LAYOUT
**********************/
#wrap {background:#FFF url(images/static/bg.jpg) repeat-x 0 0;}
	
#content-wrap	 {
	margin:0 auto;
	width:980px;
	padding-bottom:30px;
	}
	
#header {
	height:78px;
	background:#000;
	}

#intro{height:70px;}	

#content {padding-top:40px;}
	
#sidebar {
	width:260px;
	margin-right:80px;
	float:left;
	font-size:12px;
	}	

#content-main{
	width:640px;
	float:left;
	margin-bottom:30px;
	}
	
.column-a {
	margin-right:40px;
	width:300px;
	float:left;
	color:#000;
	}
	
.column-a-center {
	margin-right:40px;
	width:300px;
	float:left;
	color:#000;
	}
	
.column-a-right {
	margin-right:0px;
	width:300px;
	float:left;
	}

#footer-wrap{
	background:#222;
	border-top:1px solid #CCCCCC;
	}
	
#footer{
	clear:both;
	margin:0 auto;
	padding:20px 0;
	width:980px;
	font-size:12px;
	}



/************************
HEADER
**********************/
#logo {
	text-indent:-9999px;
	background:url(images/static/logo.gif) no-repeat 14px 14px;
	display:block;
	width:284px;
	height:70px;
	float:left;
	}
	
#menu {
	float:right;
	margin-top:45px;
	} 
	
#menu li {float:left;}

#menu li a{
	height:21px;
	display:block;
	float:left;
	margin:0 10px 0 0;
	}

#about-us a {background:url(/images/static/btn-menu-about.gif) no-repeat 0 0; width:96px; text-indent:-9999px;}
#projects a {background:url(/images/static/btn-menu-projects.gif) no-repeat 0 0; width:87px; text-indent:-9999px;}
#blog a {background:url(/images/static/btn-menu-blog.gif) no-repeat 0 0;width:61px; text-indent:-9999px;}
#contact a {background:url(/images/static/btn-menu-contact.gif) no-repeat 0 0;width:85px; text-indent:-9999px;}
.ja #about-us a {background-image:url(/images/static/btn-menu-about-jp.gif) ;}
.ja #projects a {background:url(/images/static/btn-menu-projects-jp.gif);}
.ja #blog a {background:url(/images/static/btn-menu-blog-jp.gif) ;}
.ja #contact a {background:url(/images/static/btn-menu-contact-jp.gif);}
#menu li a:hover{ background-position: 0 -21px;}
#menu li #selected{ background-position: 0 -42px;}

#header-bottom {
	background: url(images/static/header-btm-bg.jpg) no-repeat 0 0;
	height:30px;
	}	
#menu form {display:inline;}	
#searchbox {float:left; color:#666;}
#searchbox:focus {color:#666; out-line:none;}
#searchbutton {border:none;height:19px; width:21px; margin:0 0 0 5px;float:left;}


/************************
SUB-MENU
**********************/
.sub-menu {margin-bottom:30px;}
	
.sub-menu a{
	display:block;
	color:#FF9C00;
	text-decoration:none;	
	font-weight:bold;
	padding:0 5px;
	}
	
.sub-menu a span {
	font-weight:bold;
	color:#999;
	}	
	
.sub-menu a.link-down {
	background: url(images/static/arrow.gif) no-repeat 5px center;
	padding-left:20px;
	}

.sub-menu a.link-down-hide{
	background: url(images/static/arrow-down.gif) no-repeat 5px center;
	padding-left:20px;	
	}


.sub-menu .external-link {
	background:url(images/static/icon-external.gif) no-repeat right;
	padding-right:15px;
	font-weight:normal;
	display:inline;	
	}
	
.sub-menu a:hover {
	background:#CECECE;
	color:#333;
	}	
	
.sub-menu .external-link:hover {
	background:url(images/static/icon-external.gif) no-repeat right;
	padding-right:15px;
	font-weight:normal;
	display:inline;
	}
		

.sub-menu a.link-down:hover {
	background: transparent url(images/static/arrow.gif) no-repeat 5px center;
	padding-left:20px;
	color:#000;
	}
	
.sub-menu #selected {
	background:none;
	color:#666;
	}
	
#sidebar h3 {
	font-size:18px;
	padding:0 5px;
	font-weight:normal;
	}

.sub-menu li p{
	padding:0 5px;
	}	
	
#press p, #partners p {padding:0 0 10px 20px;}
/************************
HOME
**********************/
#home #wrap{background: #FFF url(images/static/top-bg.jpg) repeat-x 0 0;}
#home #content {padding-top:28px;}

#home .column-a {width:340px;}
#home .column-a-right {width:260px;}
	
#home #intro{
	height:114px;
	background: url(images/static/intro-bg.gif) no-repeat right bottom;
	}

#home #intro h1 {
	padding:50px 0;
	background:url(images/static/ttl-top.jpg) no-repeat 0 40px;
	text-indent:-9999px;
	}
.ja#home #intro h1 {background-image:url(images/static/ttl-top-jp.jpg);}

#ttl-about-top{
	text-indent:-9999px;
	height:30px;
	background:url(images/static/ttl-about-top.jpg) no-repeat 0 0;
	margin-bottom:20px;
	}

.ja #ttl-about-top{background-image:url(images/static/ttl-about-top-jp.jpg);height:29px;}	

.ttl-services-top {margin-top:40px; text-indent:-9999px; height:17px; background:url(images/static/ttl-top-services.gif) no-repeat 0 0;}

.ja .ttl-services-top{background-image:url(images/static/ttl-services-top-jp.gif); height:29px;}	

#ttl-work-top{
	text-indent:-9999px;
	height:30px;
	background:url(images/static/ttl-work-top.jpg) no-repeat 0 0;
	margin-bottom:24px;
	}

.ja #ttl-work-top{background-image:url(images/static/ttl-work-top-jp.jpg); height:29px;}	
	
#ttl-blog-top{
	text-indent:-9999px;
	height:30px;
	background:url(images/static/ttl-blog-top.jpg) no-repeat 0 0;	
	margin-bottom:15px;
	}

.ja #ttl-blog-top{background-image:url(images/static/ttl-blog-top-jp.jpg);height:29px;}	
	
#ttl-tweets{
	display:block;
	text-indent:-9999px;
	height:17px;
	background:url(images/static/ttl-top-twitter.gif) no-repeat 0 0;	
	}
	
.ja #ttl-tweets {background-image:url(images/static/ttl-tweets-jp.gif);}		

.list-checks {
	margin:0 0 20px 0;
	}

.list-checks li {
	background:url(images/static/icon-bullet.jpg) no-repeat 0 5px;
	padding: 0 0 5px 18px;
	font-size:12px;
	}


#home .work-preview-top li {margin-right:0px;}	

#home .column-a-right p {margin-bottom:0;}
#home .column-a-right .section h3 {margin-bottom:0px; font-size:18px;}
#home .column-a-right .section {border-bottom:none;}
#home .column-a-right small {margin-bottom:10px;display:block; }

.section {
	border-bottom:1px solid #CECECE;
	margin-bottom:20px;
	padding-bottom:20px;
	}

.tweets li{
	margin-bottom:10px;
	}

.tweets li small{display:block;}

/************************
PROJECTS
**********************/

.ttl-projects {text-indent:-9999px; height:32px; background:url(images/static/ttl-projects.jpg) no-repeat 0 0;margin-top:24px;
margin-left:10px;}

.ja .ttl-projects {background-image:url(images/static/ttl-projects-jp.jpg)}

.project-image {background:url(images/static/main-project-bg.jpg) no-repeat bottom; padding-bottom:12px;}

.project-description{
	width:350px;
	margin:10px 30px 0 0;
	padding-top:5px;
	float:left;
	}

	
.project-details {
	font-size:12px;
	width:260px;
	float:left;
	margin-top:10px;
	}

.project-details dl{
	border-bottom:1px solid #CECECE;
	padding:5px 0;
	}

.project-details dt {
	font-weight:bold;
	float:left;
	width:70px;
	padding-right:10px;
	}
	
.ja .project-details dt{width:80px;}

.project-details dd{
	display:block;
	width:180px;
	float:left;
	}
	
.ja .project-details dd	{width:170px;}

.btn-view-site {
	display:block;
	text-indent:-9999px;
	background: url(images/static/btn-view-site.gif) no-repeat 0 0;
	width:99px;
	height:26px;
	margin-bottom:30px;
	}
	
.ja .btn-view-site{background-image:url(images/static/btn-view-site-jp.gif);}
	
.btn-view-site:hover {background-position: 0 -26px;}

.project-category {
	clear:both; 
	padding-top:20px;
	border-top:1px solid #ccc;
	}

.project-category 	li{
	float:left;	
	margin:0 20px 20px 0;
	text-align:center;
	}
	
.project-category 	li a {
	display:block;
	width:105px;
	text-decoration:none;
	color:#FF9C00;
	font-size:12px;
	line-height:130%;
	}
	
#content-main .project-category 	li a strong {color:#FF9C00;}
#content-main .project-category 	li a:hover strong{color:#000;}	

.project-category 	li a img {
	border:10px solid #E7E7E7;
	width:85px;
	height:85px;
	}
	
.project-category 	li a:hover  img	{
	border-color:#CECECE;
	}
	
/************************
BLOG
**********************/
.ttl-blog {text-indent:-9999px; height:30px; background:url(images/static/ttl-diary.jpg) no-repeat 0 0; margin-top:24px;}
.ja .ttl-blog {background-image:url(images/static/ttl-diary-jp.jpg);}


#blog-entry #content-main .blog-entry-snippet {margin-bottom:40px;}
#blog-entry #content-main .blog-entry-snippet p {padding-bottom:0;}
#blog-entry #content-main .blog-entry-snippet a img {
	border:10px solid #E7E7E7;
	height:85px;
	width:85px;
	float:left;
	}
	
#blog-entry #content-main .blog-entry-snippet a:hover img {border-color:#CECECE;}
#blog-entry #content-main .blog-entry-snippet .snippet-text{float:left; margin-left:15px; width:480px;}
#blog-entry #content-main .blog-entry-snippet .snippet-text h2{font-size:18px; margin-top:-5px;}


#blog-entry #content-main .entry {margin-bottom:30px;}
#blog-entry #content-main .entry small {display:block; margin-bottom:20px;}
#blog-entry #content-main {width:600px;}
#blog-entry #content-main img {border:1px solid #CCC;}

#blog-entry #content-main ol li {list-style-type: decimal; margin-left:20px;}
#blog-entry #content-main strong {color:#000;}
#blog-entry #content-main ul {padding:10px 0;}
#blog-entry #content-main ul li { display:list-item;}

#blog-entry #content-main blockquote p, #blog-entry #content-main blockquote ul{
  	border-left: 3px solid #F7A54A;  	
  	padding: 0 60px 0 30px;
  	margin: 0 0 20px 0;
 	color:#333;
	}
	
#blog-entry #sidebar h4 {
	float:left;
	width:40px;
	}
	
.sub-title{margin-bottom:10px;	}
	
#blog-entry .sub-menu{
	float:left;
	width:220px;
	}

#blog-entry .sub-menu ul {margin-bottom:15px;}
#blog-entry .sub-menu ul li {line-height:130%;}
#blog-entry .sub-menu strong{padding-left:5px;}


.btn-rss{
	display:block;
	float:right;
	height:20px;
	background:url(images/static/rss-feed.jpg) no-repeat 0 0;
	width:52px;
	text-indent:-9999px;
	}

.btn-rss:hover {background-position:0 -20px;}

.comment {
	border-top:1px solid #CCC;
	padding:10px 10px 10px 0;
	/*background:transparent url(images/static/comment-bg.gif) 0 0; alternating bg*/
	}
	
.comment-count {
	width:35px; 
	float:left;
	font-size:30px;
	color:#CCC;
	padding-top:5px;
	}
	
.comment-top {
	color:#000;
	width:550px;
	float:left;
	}
.comment-top strong {
	background:url(images/static/icon-comment.gif) no-repeat 0 0;
	padding-left:18px;
	}	
	
.comment-top strong a {color:#000;}	
.comment-top strong a:hover  {color:#FF6600;}	
.comment-top p{color:#666;}

/************************
Contact
**********************/
.ttl-contact {text-indent:-9999px; background:url(images/static/ttl-contact.jpg) no-repeat 0 0; height:27px; margin-top:24px;}
.ja .ttl-contact {background-image:url(images/static/ttl-contact-jp.jpg) ; }

/************************
About
**********************/
.ttl-about {text-indent:-9999px; background:url(images/static/ttl-about.jpg) no-repeat 0 0; height:27px; margin-top:24px;}
.ja .ttl-about {background-image:url(images/static/ttl-top-jp.jpg);}

/************************
FOOTER
**********************/
#footer {font-weight:bold;}
#footer h4{
	color:#666;
	font-size:14px;	
	margin-bottom:10px;
	}
	
#footer a {
	color:#FF9C00;
	text-decoration:none;
	}

.events li {
	color:#999;
	}

#footer .link-add {
	font-size:11px; 
	color:#999;
	background: url(images/static/icon-add.gif) no-repeat 0 0;
	padding-left:13px;
	}
	
#footer .events li span a{color:#999;}

a.external-link {
	background:url(images/static/icon-external.gif) no-repeat right;
	padding-right:15px;
	}

#footer  a:hover , #footer .events li span a:hover {color:#CCC;}

#footer .column-a-center {color:#666;}
#footer ul li {padding:5px 0; border-bottom:1px solid #333;}

.disclaimer {clear:both; text-align:center; background:#000;padding:10px;}

#footer .column-a-right li {border-bottom:1px solid #333; }

#footer .banner a {display:block; float:left; width:160px; background:none;}
#footer .banner a.banner-img {width:40px;}



/************************
CLEARS FLOATS
**********************/
.cf:after, 
#header:after,
#wrap:after,
#footer:after,
#menu:after,
#content:after,
.sub-menu li:after,
.work-preview-top li:after,
.project-details dl:after,
.comment:after,
.btn-rss:after,
.group:after
	{
	content: '';
	display: block;
    clear: both;
    height: 0;
    }