body{
	margin:0;
	font:  11px/1.6 'Lucida Grande', Arial, Verdana, Sans-Serif; 
/*	font: 12px/1.5 Georgia, Garamond, Times, "Times New Roman", serif;*/
}

a{
	color:#003399;

}
a:hover{
	color:#CC0000;
}
a:visited{
	color:#660033;
}
a:visited:hover{
	color:#CC0000;
}

/* IE PNG FIX*/
a#tsp_title, a#tsp_title:hover { behavior: url(/images/pngfix/iepngfix.htc) }



/* BACKGROUND*/
.bg0{
background:#000000 url(../images/bgs/bgs-flow-bubble.jpg) center top no-repeat fixed;}
.bg1{
background:#000000 url(../images/bgs/bgs-flow-bubble-2.jpg) center top no-repeat fixed;}
.bg2{
background:#000000 url(../images/bgs/bgs-records-accordion.jpg) center top no-repeat fixed;}
.bg3{
background:#000000 url(../images/bgs/bgs-night-light.jpg) center top no-repeat fixed;}
.bg4{
background:#000000 url(../images/bgs/bgs-bubbles-2.jpg) center top no-repeat fixed;}
.bg5{
background:#000000 url(../images/bgs/bgs-bubbles.jpg) center top no-repeat fixed;}
.bg6{
background:#000000 url(../images/bgs/monument_valley_bg9.jpg) center top no-repeat fixed;}
.bg7{
background:#000000 url(../images/bgs/monument_valley_bg0.jpg) center top no-repeat fixed;}

a.unselected{
	color:#33CC99;
}

div#imagePreloaders span{
display:block;
width:0px;
height:0px;
text-indent:-5000px;}



div#imagePreloaders span.bg0{
background:#000000 url(../images/bgs/bgs-flow-bubble.jpg) center top no-repeat fixed;}
div#imagePreloaders span.bg1{
background:#000000 url(../images/bgs/bgs-flow-bubble-2.jpg) center top no-repeat fixed;}
div#imagePreloaders span.bg2{
background:#000000 url(../images/bgs/bgs-records-accordion.jpg) center top no-repeat fixed;}
div#imagePreloaders span.bg3{
background:#000000 url(../images/bgs/bgs-night-light.jpg) center top no-repeat fixed;}
div#imagePreloaders span.bg4{
background:#000000 url(../images/bgs/bgs-bubbles-2.jpg) center top no-repeat fixed;}
div#imagePreloaders span.bg5{
background:#000000 url(../images/bgs/bgs-bubbles.jpg) center top no-repeat fixed;}
div#imagePreloaders span.bg6{
background:#000000 url(../images/bgs/monument_valley_bg9.jpg) center top no-repeat fixed;}
div#imagePreloaders span.bg7{
background:#000000 url(../images/bgs/monument_valley_bg0.jpg) center top no-repeat fixed;}



/* Layout CSS */
#container{
	width:940px;
	margin:0 auto;}

#header{
	position:relative;
	height:230px;}

#main-col{
	display: inline-block;
	width:910px;
	position:relative;
	background:#FFFFFF;
	padding:30px 00px 10px 30px;}

#contents-panel{
	clear:both;}

#footer{
	margin:30px 0;
	color:#FFFFFF;
	text-align:center;}
	
	#footer a{
	color:#FFFFFF;}

	#footer a:hover{
	color:#CC0000;}


/* General Elements*/
.clearfix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
hr.clearfix{
	clear:both;
	color: #FFFFFF;
	background: #FFFFFF;
	height:1px;
	border:0px;}

/*Tomo Saito Projects Title*/
#tsp_title{
	position:absolute;
	top:170px;
	left:0px;
	width:400px;
	height:60px;
	background:url(../images/tsp_title.png) left top no-repeat;}
	
	#tsp_title:hover{
	background:url(../images/tsp_title.png) left -60px no-repeat;}
	
	#tsp_title strong{
	display:none;}

/* Background Switcher*/
#bgswitcher{
	font-size:10px;
	position:absolute;
	top:200px;
	right:0px;
	line-height:1em;
	color:#AAA;
	background:#222;
	padding:6px 4px 6px 4px;}
	
	#bgswitcher a{
		padding:1px 3px 0px 3px;
		color:#666;
		background:#BBB;
		border:1px solid #FFF;
		text-decoration:none;}
	#bgswitcher a:hover, #bgswitcher a.selected{
		border:1px solid #BBB;
		background:#FFF;
		color:#111;}


/*Walk on the Wild Side*/
#wotws{
	position:absolute;
	top:210px;
	right:0px;
	width:113px;
	height:15px;
	background:url(../images/wotws.png) left top no-repeat;}
	
	#wotws:hover{
	background:url(../images/wotws.png) left -15px no-repeat;}
	
	#wotws strong{
	display:none;}


/*category-selector*/
#category-selector{
	margin:0;
	height:10px;
	padding:0;}
	
	
	#category-selector li{
	float:left;
	display:block;
	margin:0 5px 0 0px;
	padding:0 0 0 0px;
	list-style:none;}
	
#category-selector li.colon{
	background:url(../images/category-selector-colon.png) left 0px no-repeat;
	width:10px;
	height:15px;}
#category-selector li.thrash{
	background:url(../images/category-selector-thrash.png) left 0px no-repeat;
	width:10px;
	height:15px;}
	
	#category-selector li.arrow{
	float:right;
	background:url(../images/category-selector-arrow.png) left 0px no-repeat;
	margin:0 30px 0 5px;
	padding:0 0 0 12px;}
	
	#category-selector a{
	display:block;
	height:23px;
	margin:0;
	padding:0;}


	#category-selector a#all{
	width:38px;
	background:url(../images/category-selector.png) 0px -28px no-repeat;}
	#category-selector a#design{
	width:71px;
	background:url(../images/category-selector.png) -44px -28px no-repeat;}
	#category-selector a#art{
	width:40px;
	background:url(../images/category-selector.png) -121px -28px no-repeat;}
	#category-selector a#crafts{
	width:76px;
	background:url(../images/category-selector.png) -166px -28px no-repeat;}
	#category-selector a#film{
	width:46px;
	background:url(../images/category-selector.png) -249px -28px no-repeat;}
	#category-selector a#photography{
	width:146px;
	background:url(../images/category-selector.png) -302px -28px no-repeat;}
	#category-selector a#about{
	width:67px;
	background:url(../images/category-selector.png) -452px -28px no-repeat;}

	#category-selector a#all.selected{
	background:url(../images/category-selector.png) 0px -1px no-repeat;}
	#category-selector a#design.selected{
	background:url(../images/category-selector.png) -44px -1px no-repeat;}
	#category-selector a#art.selected{
	background:url(../images/category-selector.png) -121px -1px no-repeat;}
	#category-selector a#crafts.selected{
	background:url(../images/category-selector.png) -166px -1px no-repeat;}
	#category-selector a#film.selected{
	background:url(../images/category-selector.png) -249px -1px no-repeat;}
	#category-selector a#photography.selected{
	background:url(../images/category-selector.png) -302px -1px no-repeat;}
	#category-selector a#about.selected{
	background:url(../images/category-selector.png) -452px -1px no-repeat;}

	#category-selector a#all:hover{
	background:url(../images/category-selector.png) 0px -55px no-repeat;}
	#category-selector a#design:hover{
	background:url(../images/category-selector.png) -44px -55px no-repeat;}
	#category-selector a#art:hover{
	background:url(../images/category-selector.png) -121px -55px no-repeat;}
	#category-selector a#crafts:hover{
	background:url(../images/category-selector.png) -166px -55px no-repeat;}
	#category-selector a#film:hover{
	background:url(../images/category-selector.png) -249px -55px no-repeat;}
	#category-selector a#photography:hover{
	background:url(../images/category-selector.png) -302px -55px no-repeat;}
	#category-selector a#about:hover{
	background:url(../images/category-selector.png) -452px -55px no-repeat;}




	#category-selector a.selected{
	text-decoration:underline;}

	#category-selector a strong{
	display:none;}





/* Language Switcher*/
#langSwitcher{
/*	position:absolute;
	top:12px;
	right:20px; */
	float:right;
	margin:0 40px 0 0;}
	
	#langSwitcher a{
	text-decoration:none;
	color:#999999;}
	
	#langSwitcher a.selected{
	text-decoration:underline;
	color:#000000;}
	
	#langSwitcher a:hover{
	text-decoration:underline;
	color:#CC0000;}


/* Project Index*/
ul#project-index{
	margin:40px 0 0 0px;
	padding:0;}
	
	ul#project-index:after{
	clear:both;}
	
	ul#project-index li{
	float:left;
	list-style:none;
	margin:0 30px 60px 0;
	padding:0;
	width:150px;
	height:150px;
	background:#FFFFFF;
	border:1px solid #CCCCCC;
	background:url(../images/pjt-index-disabled.png) left top;}

	ul#project-index li a{
	display:block;
	width:150px;
	height:150px;}
	
	

	ul#project-index li a#pjt03{
	background:url(../images/pjt-index-03drawing.jpg) left -300px no-repeat;}
	ul#project-index li.selected a#pjt03{
	background:url(../images/pjt-index-03drawing.jpg) left -150px no-repeat;}
	ul#project-index li.selected a#pjt03:hover{
	background:url(../images/pjt-index-03drawing.jpg) left 0px no-repeat;}

	ul#project-index li a#pjt04{
	background:url(../images/pjt-index-04sfZooVisualization.jpg) left -300px no-repeat;}
	ul#project-index li.selected a#pjt04{
	background:url(../images/pjt-index-04sfZooVisualization.jpg) left -150px no-repeat;}
	ul#project-index li.selected a#pjt04:hover{
	background:url(../images/pjt-index-04sfZooVisualization.jpg) left 0px no-repeat;}

	ul#project-index li a#pjt05{
	background:url(../images/pjt-index-05sfZoo.jpg) left -300px no-repeat;}
	ul#project-index li.selected a#pjt05{
	background:url(../images/pjt-index-05sfZoo.jpg) left -150px no-repeat;}
	ul#project-index li.selected a#pjt05:hover{
	background:url(../images/pjt-index-05sfZoo.jpg) left 0px no-repeat;}

	ul#project-index li a#pjt06{
	background:url(../images/pjt-index-06oaxifornia.jpg) left -300px no-repeat;}
	ul#project-index li.selected a#pjt06{
	background:url(../images/pjt-index-06oaxifornia.jpg) left -150px no-repeat;}
	ul#project-index li.selected a#pjt06:hover{
	background:url(../images/pjt-index-06oaxifornia.jpg) left 0px no-repeat;}

	ul#project-index li a#pjt07{
	background:url(../images/pjt-index-07accordionBoy.jpg) left -300px no-repeat;}
	ul#project-index li.selected a#pjt07{
	background:url(../images/pjt-index-07accordionBoy.jpg) left -150px no-repeat;}
	ul#project-index li.selected a#pjt07:hover{
	background:url(../images/pjt-index-07accordionBoy.jpg) left 0px no-repeat;}

	ul#project-index li a#pjt08{
	background:url(../images/pjt-index-08backToOaxaca.jpg) left -300px no-repeat;}
	ul#project-index li.selected a#pjt08{
	background:url(../images/pjt-index-08backToOaxaca.jpg) left -150px no-repeat;}
	ul#project-index li.selected a#pjt08:hover{
	background:url(../images/pjt-index-08backToOaxaca.jpg) left 0px no-repeat;}

	ul#project-index li a#pjt09{
	background:url(../images/pjt-index-09soyokaze.jpg) left -300px no-repeat;}
	ul#project-index li.selected a#pjt09{
	background:url(../images/pjt-index-09soyokaze.jpg) left -150px no-repeat;}
	ul#project-index li.selected a#pjt09:hover{
	background:url(../images/pjt-index-09soyokaze.jpg) left 0px no-repeat;}

	ul#project-index li a#pjt10{
	background:url(../images/pjt-index-10waterWorks.jpg) left -300px no-repeat;}
	ul#project-index li.selected a#pjt10{
	background:url(../images/pjt-index-10waterWorks.jpg) left -150px no-repeat;}
	ul#project-index li.selected a#pjt10:hover{
	background:url(../images/pjt-index-10waterWorks.jpg) left 0px no-repeat;}

	ul#project-index li a#pjt11{
	background:url(../images/pjt-index-11lotusChair.jpg) left -300px no-repeat;}
	ul#project-index li.selected a#pjt11{
	background:url(../images/pjt-index-11lotusChair.jpg) left -150px no-repeat;}
	ul#project-index li.selected a#pjt11:hover{
	background:url(../images/pjt-index-11lotusChair.jpg) left 0px no-repeat;}

	ul#project-index li a#pjt12{
	background:url(../images/pjt-index-12touchybumpy.jpg) left -300px no-repeat;}
	ul#project-index li.selected a#pjt12{
	background:url(../images/pjt-index-12touchybumpy.jpg) left -150px no-repeat;}
	ul#project-index li.selected a#pjt12:hover{
	background:url(../images/pjt-index-12touchybumpy.jpg) left 0px no-repeat;}

	ul#project-index li a#pjt13{
	background:url(../images/pjt-index-13roomOnTheSky.jpg) left -300px no-repeat;}
	ul#project-index li.selected a#pjt13{
	background:url(../images/pjt-index-13roomOnTheSky.jpg) left -150px no-repeat;}
	ul#project-index li.selected a#pjt13:hover{
	background:url(../images/pjt-index-13roomOnTheSky.jpg) left 0px no-repeat;}

	ul#project-index li a#pjt14{
	background:url(../images/pjt-index-14InteractivePainting.jpg) left -300px no-repeat;}
	ul#project-index li.selected a#pjt14{
	background:url(../images/pjt-index-14InteractivePainting.jpg) left -150px no-repeat;}
	ul#project-index li.selected a#pjt14:hover{
	background:url(../images/pjt-index-14InteractivePainting.jpg) left 0px no-repeat;}

	ul#project-index li a#pjt15{
	background:url(../images/pjt-index-15MOCFA.jpg) left -300px no-repeat;}
	ul#project-index li.selected a#pjt15{
	background:url(../images/pjt-index-15MOCFA.jpg) left -150px no-repeat;}
	ul#project-index li.selected a#pjt15:hover{
	background:url(../images/pjt-index-15MOCFA.jpg) left 0px no-repeat;}

	ul#project-index li a#pjt16{
	background:url(../images/pjt-index-16InteractionDesign.jpg) left -300px no-repeat;}
	ul#project-index li.selected a#pjt16{
	background:url(../images/pjt-index-16InteractionDesign.jpg) left -150px no-repeat;}
	ul#project-index li.selected a#pjt16:hover{
	background:url(../images/pjt-index-16InteractionDesign.jpg) left 0px no-repeat;}


	ul#project-index li a#pjt17{
	background:url(../images/pjt-index-17motionGraphics.jpg) left -300px no-repeat;}
	ul#project-index li.selected a#pjt17{
	background:url(../images/pjt-index-17motionGraphics.jpg) left -150px no-repeat;}
	ul#project-index li.selected a#pjt17:hover{
	background:url(../images/pjt-index-17motionGraphics.jpg) left 0px no-repeat;}




	ul#project-index li a strong{
	display:none;}





/* Project Details*/
#project-details{
	position:relative;
	margin:40px 30px 5px 0px;
	padding:0px 20px 20px 0px;
	border:1px solid #BBBBBB;}

#project-details a.close{
	float:right;
	position:absolute;
	top:0px;
	right:0px;
	width:60px;
	height:60px;
	background:url(../images/close.gif) left top no-repeat;}
	
	#project-details a.close:hover{
	background:url(../images/close.gif) left -60px no-repeat;}
	
	#project-details a.close strong{
	display:none;}

#subContents{
	position:relative;
	float:left;
	width:270px;
	top:20px;
	left:35px;
	margin:0;}

h1{
	display: block;
	text-align:left;
	color:#FFFFFF;
	background:#000000;
	width:280px;
	margin:0px 0 20px 0;
	padding:30px 20px 8px 35px;
	font-size:20px;
	line-height:0.9em;}


#subContents .workInfo{
	font: 12px/1.5 Georgia, Garamond, Times, "Times New Roman", serif;
	color:#666666;
	margin:0 0 15px 0px;}



#project-thumb{
	margin:0 0 0px 0;
	padding:0px 0 0 0;}
	
	#project-thumb li{
	float:left;
	list-style:none;
	margin:0 3px 0 0;
	padding:0;}
	
	#project-thumb img{
	margin:0 0px 0px 0;
	border:1px solid #FFF;
	filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;}

	#project-thumb img.selected, #project-thumb a:hover img{
	border:1px solid #666;
	filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0;}

a.more-pictures{
	float:left;
	width:80px;
	margin:7px 0 0 20px;
	padding:0 0 0 10px;
	background:url(../images/more-pictures.png) left 3px no-repeat;
	font-size:10px;}

#project-description{
	clear:both;
	margin:20px 0 0 0;}

#project-image-frame{
	margin:43px 0 0px 340px;
	width:500px;
	height:520px;
	text-align:center;}
	#project-image-frame.free-size{
	height:auto;}
	#project-image-frame.long{
	height:640px;}
	
#project-image-frame #works{
	margin:0 0 20px 0;}



/* ABOUT PAGE */
#about-contents{
	margin:30px 50px;}
	
	#about-contents h3{
	margin:30px 0 0px 0;
	font-size:14px;}
	#about-contents p{
	margin:10px 0;}