*{   
margin:0;
padding:0;
}


body 
{
    
font-family:Georgia,"Times New Roman",serif;
font-size:68.75%;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.7em;

}
body {
    background-color:#f3f4ef;
    color:#4f4e4e;

}

img{
    border:0;
    margin:0;
    padding:0;}
h1,h2{
    font-weight:normal;
    padding-bottom:10px;
    color:#676767;}
h2{
    font-size:175%;}
h1.display-none{
     text-indent:-9999px;
     font-size:0;
     height:0;
     padding:0;
     }
p.intro{
    width:755px;
    height:135px;
  
    background-image:url('../image/introtext.jpg');
    background-position:0 0;
    background-repeat:no-repeat;
    text-indent: -9999px;
    padding-bottom:7px;
    }
h3{
    font-weight:500;
    font-size:1.6em;
    line-height:1.4em;
    padding-bottom:3px;}
.dot-corner{
    position:absolute;
    left:0px;
    top:0px;
    z-index:10
    }
/*.dot-home
{
    background-image:url('../image/dotcorner.png');
    background-repeat:no-repeat;
    float:left;
    width: 522px;
    position:absolute;
    top:0;
    left:0;
    }*/
.content-home{
    width:815px;
    margin-left:105px;
    padding-top:80px;
    }
.content-home .left-col ul
{
    font-size:1.6em;
    line-height:1.4em;
    margin-top:5px;
    margin-left:20px;}
.content-home .left-col ul li
{
    padding-top:5px;
    }
.content-about  {
    
    margin-left:105px;
    
    }
.wrap-work{
    margin-left:105px;
    margin-top:80px;
    }
.wrap-work h3 a{
    background-position:10px 0;
    background-repeat:no-repeat;
    text-indent: -9999px;
    height: 60px;
    display:block
    }
.wrap-work #web-sect h3 a{
    width:116px;
    background-image:url('../image/webhead.jpg');
  
    }
 .wrap-work #game-sect h3 a
{
    width:108px;
    background-image:url('../image/gamehead.jpg');

    }
  .wrap-work #arch-sect h3 a
{
    width:100px;
    height:60px;
    background-image:url('../image/spatial-head-short.jpg');
  
    }
 .wrap-work #drawing-sect h3 a
{
    width:129px;
    background-image:url('../image/drawing-head.jpg');
  
 }
 .wrap-work #research-sect h3 a
{
    width:139px;
    background-image:url('../image/research-head.jpg');

 }
.left-col
{
    
    float:left;
    width:410px;
    padding-left:15px;
    padding-right:10px;
    }
.right-col{
    margin-left:425px;
    padding-left:15px;
    }
.subpage a
{
    color:#e777a1}
.subpage .menu
{
    z-index:400;
    }
.menu
{   width:999px;
    height:130px;clear:left;
    background-image:url('../image/menudot.jpg');
    background-repeat:no-repeat;
    background-color:#f3f4ef;
    }

.menu{
    position:fixed;
    left:0;
    bottom:0px;
    z-index:1;
    
    }
* html .menu
{
    position:absolute;}
ul li{
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;}

.menu ul{
    margin-left:105px;
   
    padding-left:10px;}
.container                           
{
    font-size:100%;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
   
    }
.horizontal
{
    clear:left;
    }
.horizontal li{ 
    display:inline;
    }
.horizontal ul li{ padding-right:8px;
    }
.horizontal ul li:last-child{
    padding-right:0px;
    }
    
img.dot-display{
    z-index:200;
    position:relative;
    
    }
.content-home .left-col p{
    font-size:1.8em;
    line-height:1.4em;
    }
.content-home .right-col p{
    padding-bottom:15px;
    font-size:130%;}


h2.post-intro{
    width:44px;
    height:18px;
    background-image:url('../image/post.jpg');
    background-position:0 0;
    background-repeat:no-repeat;
    text-indent: -9999px;
    }
    h2.work-intro{
    width:97px;
    height:34px;
    background-image:url('../image/work.jpg');
    background-position:0 0;
    background-repeat:no-repeat;
    text-indent: -9999px;
    }
    h2.about-intro{width:91px;
    height:18px;
    background-image:url('../image/about_me.jpg');
    background-position:0 0;
    background-repeat:no-repeat;
    text-indent: -9999px;
 }
div.menu ul{
   z-index:9999;
}
div.box-containner{
    font-size:1.4em;
    color:#e01765;}
    
div.box-containner ul{   
    width:199px;
    height:336px;
 
}
div.box-containner ul li   
{
    list-style-image:none;

    list-style-position:outside;
    list-style-type:none;
    padding-left:15px;
    padding-top:7px;
    }
div.menu ul li{   float:left;
    /*height:100px;*/
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    padding-left:15px;
    
    }
div.box-containner ul li:last-child{
padding-bottom:20px;}
div.horizontal ul li:first-child{padding-left:12px;}
div.menu ul li:first-child { padding-left:0px;}
div.menu ul li a#home-btn {
background-image:url(../image/logo_menu.jpg);
background-repeat:no-repeat;
background-position:100% 40%;
width:28px;
}
div.menu ul li a#home-btn:hover{
 background-image:url(../image/logo_menu_hover.jpg);
    }
div.menu ul li a#work-btn {
background-image:url(../image/menu/work_menu.jpg);
background-repeat:no-repeat;
background-position:100% 50%;
}
.subpage .menu ul li a#work-btn {
background-image:url(../image/menu/work-bold.jpg);
background-repeat:no-repeat;
background-position:100% 50%;
}
div.menu ul li a#work-btn:hover, .subpage .menu ul li a#work-btn:hover{
background-image:url(../image/menu/work_menu_hover.jpg);
}

div.menu ul li a#about-btn {
background-image:url(../image/menu/about_menu.jpg);
background-repeat:no-repeat;
background-position:100% 50%;
}
div.menu ul li a#about-btn:hover
{
background-image:url(../image/menu/about_menu_hover.jpg);
}
div.menu ul li a#blog-btn {
background-image:url(../image/menu/blog_menu.jpg);
background-repeat:no-repeat;
background-position:100% 50%;

}
div.menu ul li a#blog-btn:hover{
background-image:url(../image/menu/blog_menu_hover.jpg);
}
div.menu ul li a#contact-btn {
background-image:url(../image/menu/contact_menu.jpg);
background-repeat:no-repeat;
background-position:100% 50%;
}
div.menu ul li a#contact-btn:hover{
background-image:url(../image/menu/contact_menu_hover.jpg);
}
div.menu ul li a{
background-position:100% 100%;
background-repeat:no-repeat;
display:block;
height:50px;
overflow:hidden;
text-indent:-900px;
width:72px;
    }

.box-containner ul
{
    background-color:#ffffff;
    
    }
.box-containner img
{
    margin-bottom:15px;}
 .img-containner{
    position:relative;
    margin-top:240px; 
    padding-bottom:20px; 
   margin-left:235px;
     }
.content-about h2#about-joyobject{
    margin-left:220px;
    width:201px;
    height:27px;
    background-image:url('../image/aboutjoyobject.jpg');
    background-position:0 0;
    background-repeat:no-repeat;
    text-indent: -9999px;
    }
.content-about h2#about-joy{
    margin-left:220px;
    width:105px;
    height:25px;
    background-image:url('../image/aboutjoy.jpg');
    background-position:0 0;
    background-repeat:no-repeat;
    text-indent: -9999px;
    }
 .content-about h2#about-game{
    margin-left:10px;
    margin-bottom:10px;
    width:159px;
    height:18px;
    background-image:url('../image/about_joy_game.jpg');
    background-position:0 0;
    background-repeat:no-repeat;
    text-indent: -9999px;
    }
.content-about p{
    font-size:140%;
    line-height:135%;
    padding-right:10px;
    padding-bottom:10px;
    }
.content-work 
{
    position: relative;
    width:100%;
    margin-top:480px;
    padding-top: 15px; 
    
    }
    
.content-work .left-col{
     width:200px;
    }
/*.content-work .right-col{
    margin-left:210px;
    margin-top:0px;
    padding-top:105px;
    width:315px;}*/

.submenu-containner h3{
 padding-top: 7px;
 padding-bottom:10px;
 padding-left:5px;}  
.content-work li, .menu ul.submenu li{
    font-size:140%;
    padding-bottom:4px;
    padding-left:5px;}
.content-work li:last-child{
    padding-bottom:10px;}
.content-work li a, div.menu ul.submenu li a{
    color:#676767;
    text-decoration:none;
    }
.content-work li a:hover{
    color:#fff;
    background-color:#de1a66;
    display:block;
    }
.submenu-containner h3
{
    border:none;}    
    
 
 .row
 {
     padding-top:100px;}
    
/*------------JTip--------------*/
#JT_arrow_left{
	background-image: url(../image/dotwork.png);
	background-repeat: no-repeat;
	background-position: left top;
	position: absolute;
	z-index:301;
	left:-12px;
	height:23px;
	width:10px;
    top:-3px;
}

/*#JT_arrow_right{
	background-image: url(../JTimage/arrow_right.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	position: absolute;
	z-index:101;
	height:23px;
	width:11px;
    top:0px;
    
}*/

#JT {
	position: absolute;
	z-index:300;
	/*border: 1px solid #de1a66;*/
	background-image:url(../image/dotwork.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	height:373px;
	

	
}
#JT img
{
    float:right; 
    margin-top:190px; 
    padding-right:5px;}
#JT_copy{
	/*padding:10px 10px 10px 10px;*/
	color:#333333;
}

.JT_loader{
	background-image: url(../JTimage/loader.gif);
	background-repeat: no-repeat;
	background-position: center center;
	width:100%;
	height:12px;
}

/*#JT_close_left{
	background-color: #de1a66;
	text-align: left;
	padding-left: 8px;
	padding-bottom: 5px;
	padding-top: 2px;
	font-weight:bold;
}

#JT_close_right{
	background-color: #de1a66;
	text-align: left;
	padding-left: 8px;
	padding-bottom: 5px;
	padding-top: 2px;
	font-weight:bold;
}*/

#JT_copy p{
margin:3px 0;
}

#JT_copy img{
	/*padding: 1px;
	border: 1px solid #de1a66;*/
}

.jTip{
 /*cursor:help;*/
}



.fact-list{
  width:340px;
  float:left;
  padding-bottom:10px;
  padding-left:105px;
    }
.description{
    width:305px;
    float:left;
    padding:0 10px 10px 0px;}
.show-pic{
    margin-left:95px;
    margin-bottom:180px;
    width:805px;
    height:407px;
    background-color:#ffffff;
    padding:10px;
    border:solid 1px #e4e4e4;
   }

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
} 
.clearfix {display: inline-block;}  /* for IE/Mac */


div.menu ul.submenu li{
    clear:left;
    padding-left:5px;

  
    
    display:block;}
.menu ul.submenu li a{
     text-indent:0px;
     width:100%;
     height:100%;
     }
.menu .submenu-containner{
    position:absolute;
    top:0px;
    left:0px;
     margin-left:530px; 
     padding-left:5px;
     clear:left;
    
     width: 385px;
    }
.menu ul.submenu
{
    margin-left:0px;
    margin-top:0px;
   
    padding-bottom:0px;
    padding-left:0px;
    
    }



.img-container{
    height:100%;  
    width:100%;  
    padding:0px;  
    
    background-color:#ffffff;
    
    }
  .img-container img {  
    padding: 0;  
    border:  none;  
    
   
} 




.subpage .description
{
    font-size:120%;}
.subpage .fact-list
{
    font-style:italic;
    }
.headerspace
{
   position:relative;
   margin-bottom:50px; 
   text-indent:-9999px;
    }
 .subpagehead{
   
    position:absolute;
    /*top:10px;*/
    left:350px;}
/*.subpage h1{
   
    position:absolute;
    /*top:10px;
    left:350px;}*/
.mid-col
{
   
   float:left;
   width:205px;
   height:350px;
}    
.right-cols
{
    
    float:left;
    width:205px;
   }
.right-cols p
{
    padding-left:10px;
    padding-right:0px;
    font-size:2em;
    }
 .wrap-three-col{
     width:100%;
     clear:left;
   
}
.menu .right-col{
    margin-left:510px;}
.section-work{
    float:left;
       width:158px;
    border-right:solid 1px #ffffff;
    padding-right:10px;
    padding-left:10px;
    }
#wrap-work
{
    margin-left:95px;
    }
#web-sect
{
    border-left:solid 1px #ffffff;
 }

#research-sect{
    width:155px;
    padding-left:0px;
    }
   
#contact-part .img-containner{
    margin-left:0px;   }
.content-contact{
    margin-left:105px;
    padding-top:70px;
    width:815px;
    color:#676767;
    position:relative;
    }
.content-contact .left-col h2{
    margin-top:30px}
.content-contact .right-col h2{
    margin-top:30px}
      
.content-contact ul
{
  
    margin-top:45px;
    font-size:1.7em;
    line-height:1.5em;
    font-weight:500;  
    z-index:3000;  
    }
.content-contact ul li a{
    color:#de1a66;
    text-decoration:none;
}
.content-contact ul li a:hover{
    color:#676767;
}
.content-contact .left-col h2{
    width:285px;
    height:23px;
  
    background-image:url('../image/contacthead.jpg');
    background-position:0 0;
    background-repeat:no-repeat;
    text-indent: -9999px;
    }
.content-contact .right-col h2{
    width:310px;
    height:29px;
  
    background-image:url('../image/leavemessage.jpg');
    background-position:0 0;
    background-repeat:no-repeat;
    text-indent: -9999px;
    }
.bold
{
    color:#4f4e4e;
    }
.postcomment-label{
display:block;
text-transform:uppercase; 
letter-spacing: 1px;
color:#9b9a9a;
font-size:100%;
margin-top:15px;
}
#contactform{
 margin-top:10px;
 }
input.input_style{
height:25px;
width:310px;
border:solid 1px #aeaeac;
font-family:Georgia,"Times New Roman",serif;
color:#4f4e4e;
padding-top:3px;
padding-left:5px;
padding-bottom:0;
}
.textareastyle{
  border:solid 1px #aeaeac;  
  font-family:Georgia,"Times New Roman",serif;
  color:#676767;
  width:313px;
  }
.ast
{
    color:#de1a66;
    padding-left:3px;}
input.submitform
{
    background-color:#f184ad;
    border:solid 1px #de1a66;
    color:#de1a66;
    padding:3px 20px;
    margin-top:15px;
    font-family:Georgia,"Times New Roman",serif;
    cursor:pointer;  
}
.error
{
    color:#de1a66;}
.image-containner
{
font-family: "Segoe UI",Frutiger,Tahoma,"Helvetica","Lucida sans",Verdana,sans-serif;
 margin-bottom:10px; 
 background-color:#ffffff;
 padding:8px;
 border:solid 1px #e4e4e3;  
    }
 .image-containner h4
 {
    
     color:#de1a66;
     padding-top:4px;
     font-weight:normal;
     }
 .image-containner p
 {
     color:#878787;
     text-transform:uppercase; 
     }
 .project-containner
 {
     margin-left:95px;
     padding-top:30px ;
     padding-bottom:25px;
     border-bottom:solid 8px #c4c4c3;
    
     }
.right-pic
{
    float:left;
    width:645px;
    position:relative;
    }
.left-descript
{
    float:left;
    width:240px;
    padding-right:15px;}
.work-containner
{
    position:relative;
    /*margin-top:65px;*/
     position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
    margin-bottom:400px;
    }
.towork
{
     margin-top:10px;}
.subpage p.towork a, .subpage h1
{   
  
    padding-bottom:8px;
   
     text-indent:-999px;
     display:block;
    }  
.subpage p.towork a
{
    width:76px;
    height:22px;
    background-image:url('../image/menu/workpinksub.jpg');
    background-position:0 0;
    background-repeat:no-repeat;
   
    }
.subpage p.towork a:hover
{background-image:url('../image/menu/workgraysub.jpg');
    }
#subpage-work h1
{
    width:106px;
    height:21px;
    background-image:url('../image/webhead.jpg');
    background-position:0 0;
    background-repeat:no-repeat;
    }
#spatial-work h1
{
    width:187px;
    height:27px;
    background-image:url('../image/spatial-head.jpg');
    background-position:0 0;
    background-repeat:no-repeat;
    }
 #drawing-work h1
{
    width:119px;
    height:28px;
    background-image:url('../image/drawing-head.jpg');
    background-position:0 0;
    background-repeat:no-repeat;
    } 
 #games-work h1
{
    width:98px;
    height:21px;
    background-image:url('../image/gamehead.jpg');
    background-position:0 0;
    background-repeat:no-repeat;
    }   
.subpage h1
{
    font-size:36px;}  
.subpage h1 .tohome
{
    font-size:24px;}
.subpage h1 .topage
{
    font-size:36px;}

.work-containner h2
{
    padding-bottom:30px;
    color:#3d3d3e}
.work-containner .explain{
    padding-bottom:30px;
} 
.left-descript
{
    color:#676767;
    
    }
.left-descript p
{
    padding-bottom:20px;
   
    font-size:120%;
    
    }
.left-descript dt
{ float:left;
  font-weight:600;
  
    }
 .left-descript dd
 {
     margin-left:50%;}
 .imagecontainner img
 {
    
     z-index:0;
     }
 .imagecontainner, .videoshow
 {
      border:solid 6px #e7e6e6;}
 .videoshow
 {
     margin:0 0 30px 0;}
 #dotcorner1
 {
   position:absolute;
   top:0;
   left:0;
     }
 #dotcorner2
 {
     position:absolute;
     top:60px;
     left:0;
     }
 p.zero
 {
     height:0;
     font-size:0;
     text-indent:-9999px;}
 .comic-wrapper .small-pic
 {
     float:left;
     width:200px;
     padding:0 12px 12px 0;
  }
 .drawing-wrapper .small-pic
 {  float:left;
    padding:0 12px 12px 0;
     }
  .small-pic img
  {
      border:solid 6px #d7d6d6}
 blockquote p
 {
     font-style:italic;}
.testimonial
{
    font-style:italic;
    font-size:10px;
    float:right;}
 .testimonial a
 {
     font-size:140%;
     
     }
.pink
{
    color:#de1a66;}
.readmore a
{font-size:12px;
 font-style:italic;
 color:#de1a66;
    }
a 
{
    color:#de1a66;
    text-decoration:none;}
a:hover
{ color:#676767;
  text-decoration:underline;
    }
.content-about .front p
{
   
    font-style:normal;
    padding-bottom:0px}
.quote-open
{ margin-left:10px;
    }
.quote-close
{
margin-left:10px;
    }
.display-inline
{
    display:inline;}
.front .testimonial
{
    font-size:14px;
    }
.slidepic
{
    position:relative}

 
 .slidepic a
 {
     position: absolute; top: 170px; left: 533px; z-index: 200;
     }
dl
{
    padding:0 0 30px 0;}
p.footnote
{
    font-size:100%;}
#tweet li{
	font-size:1.6em;
	line-height:1.4em;
	clear:right;
}
#tweet li .twitterStatus{
	display:block;}
	
#tweet li .twitterTime{
    font-size:12px;
	float:right;
	margin-bottom:10px}