html{font-size: 100%;} 
body {
 margin:0;
 padding:0;
 color:#633;
 font-size:100.1%;
 line-height:1.2;
 font-family: "Courier New", Courier, monospace;
 background:#fff url(1pixel.gif);}
#body{
 margin:0;
 padding:0 5%;
 overflow:hidden;
 background:#ddc url(../js/body.png) bottom repeat-x;/*body.png is gradient from #ddc to white*/}


pre {overflow:hidden;}
h4{color:#888;}
dd{}
.clear{
 clear:left;}
.trigger img{
 padding:0 40px 40px 0;}
.left {
 float:left;
 clear:left;
 margin:0 2em .5em 0;}
.right {
 float:right;
 clear:right;
 margin:0 0 .5em 2em;}

a:link, a:visited {
 text-decoration:none;
 color:#a53322;}
a img {
 border:none;
 outline:none;}
a:active, a:hover {
 border-bottom:#333 dotted 0px;  
 outline:none;
 font-weight:bold;}
a.image_link {
 border-bottom:#333 dotted 0px;  
 outline:none;}
:focus { -moz-outline-style:none;}
.active a {
 font-weight:bold;
 color:#449;}
a.backtotop{
 font-size:small;}


#navi {
 font-size:90%;
 float:right;
 position:fixed;
 top:5em;
 right:0;
 width:160px;
 height:400px;
 overflow:auto;
 list-style:none;
 background:transparent url(../js/avi.png);
 padding:2em 0 0 2em;}
#navi a:hover{font-weight:bold;}
#navi li {
 height:1.7em;
 text-align:left;
 padding-left:30px;}
#navi .biography {
 margin-top:1em;}
#navi .ROOT{
 margin-bottom:1em;}

#header {
 margin-bottom:0px;}
#site-title {
 text-align:right;}
#page-title {
 font-size: 200%;
 color:#449;
 margin:0 0 1em;
 padding-top:0;
 text-align:left;
 margin-right:170px}
#footer {
 clear:both;
 margin:2em 0 2em 0;
 padding:2em 0 4em 0;
 border-bottom:#ccc dotted 5px;}

#ROOT #site-title{
 text-align:left;
 font-size:250%;}
#ROOT em {
 font-weight:bold;
 font-style:normal;}
#intro{
 float:left;
 margin-left:-15px;
 margin-bottom:0em;
 position:relative;
 top:-60px;
 text-align:right;
 background:transparent url(home/into.png) repeat-x bottom;
 height:450px;
 width:200px;
 padding:50px;
 border:#eee double 0px;}
#fpm {
 margin: 2em 0 2em 260px;
 padding:0em;
 list-style-type:none;}
#fpm a{
 display:block;
 border-bottom:none;
 background-repeat: no-repeat;
 background-position: 50px 0px;
 padding: 110px 0 30px 0;
 width:200px;
 height:20px;
 float:left;
 text-align:center;}
#fpm a:hover{font-weight:bold;}
#fpm .conceptual a{ background-image: url(home/honeyclock.gif);}
#fpm .courses a{background-image: url(home/sophia.gif);}
#fpm .environmental a{background-image: url(home/earth.gif);}
#fpm .visual a{background-image: url(home/orpheus.gif);}
#fpm .poetry a{background-image: url(home/world2.gif);}
#fpm .writings a{background-image: url(home/thewriterspassage.gif);}
#fpm .geometry a{background-image: url(home/triangle.gif);}
#fpm .icon a{background-image: url(home/buddha10.gif);}
#fpm .biography a{display:none;}
#fpm .contact a{display:none;}
#fpm .cv a{display:none;}



.intro { 
 width:30%;
 font-size:100%; 
 padding:0;
 margin:0em 180px 0 1em;
 float:right;
 text-align:right;}

#icon .intro { 
 float:none;}

.intro p {
 margin:0 0 1em;}
#poetry .intro {
 margin-top:-.5em;
 line-height:1.5;}
#visual .intro, #conceptual .intro, #writings .intro, #environmental .intro, #performance .intro {
 margin-top:2.5em;
 line-height:1.5;}
#icon .holder {
 padding:.2em 3em;}
#icon blockquote {
 margin-left:0;
 line-height:1.4;
 clear:left;
 margin:2em 0 ;}
#icon blockquote img {
 vertical-align:top;
 float:left;
 margin:0 1em .5em 0;}
#content {
/* background:#eed url(../js/h80.png) bottom repeat-x;
 border:#fff double 6px;*/
 margin: 0 160px 5em -2%;
 padding:30px 20px;
 font-size:110%; }
#content .subtitle{
 color:#777;
 font-weight:bold;
 font-size:90%;
 margin:0 0 1em;}
#content ul li{
 height:2.2em;
 list-style-type:none;}
#content ul{
 padding:0;
 margin-left:0em;
 text-align:left;}
#content ul br {
 line-height:.7;}
#content .line {
 border-top:0px #aaa dotted;
 padding:1px;}
#content a {
 border-bottom:none;
 padding:0px 1px 0;
 color: #633;}
#content a:hover {
 border-top:0px #943 solid;}
#content .box {}
#content .box img{
 padding:1em .5em;
 border:0px #888 solid;
 vertical-align:top;
 margin:0;}
#poetry #content{
 margin:1em 4em 0em 5%; 
 padding:0;}


hr {
 visibility:hidden;}
.holder{
 clear:both;
 margin:3em 160px 3em 5%;
 padding:0 20px 20px;
 border:2px solid #aaa;
 background-color:#fff;
 background:#fff url(../js/h80.png) bottom repeat-x;}
.items {
 padding:0em 10px 0em 20px;
 text-indent:-2em;
 text-align:center;}
#visual .items {padding-top:2em;}
#poetry .items li{height:1.2em;margin-bottom:.5em;list-style-type:disc;}
#poetry .items{margin-top:2em; text-align:left;text-indent:0;}
#poetry .holder {padding:2em 3em}
#poetry .prize{text-indent: -3em;padding-left:3em;}
#poetry dl{margin-left:1.5em;}
#poetry dd{padding-left:2em; position:relative;top:-1.5em;margin-bottom:-.5em; line-height:1.4;}
#biography #sketch p{text-indent:0em;}
#biography #content {margin:-2em 0 -4em;padding:1em;}
#biography .holder, #cv .holder, #contact .holder {margin-top:0; margin-left: 0em; padding:0 3em 2em; }
#cv .intro {width:200px;}
#cv .intro ul a{ color:#888;}
#cv .intro ul {  list-style-type:disc; padding-left:1em; margin:7em 0 0 0em;text-align:left;}
#cv .intro {margin-left:3em;}
#cv table td{vertical-align:top;border-bottom:1px dotted #ccc;padding:.5em .4em;}
#cv h4 {padding-top:2em;}
.items ul{
 list-style-type:none;}
a:hover.item_shell {
 border:none;
 cursor:pointer;}
.item_shell img{
 padding:1px;
 border:1px #aaa solid;
 margin:1em 1em;}
a:hover.item_shell img{
 border-color:#777;}
.collection h3{
 margin:.5em 0em .5em;
 border-bottom: #e3e3e3 dotted 0px;}
.collection{
 position:relative;
 z-index:10;}
.description{
 text-align:left;
 margin:1.5em 1em 1em .5em;
 padding-bottom:1em;
 text-indent:0em;
 line-height:1.5;}
#hidden.holder{
 visibility:hidden;
 height:1px;
 margin:0;padding:0;}
.instruction{
 display:block;
 position:relative;
 z-index:1;
 top:0em;
 right:0em;
 float:right;
 color:#888;
 font-size:90%;}
a.backtotop{
 display:block;
 margin:0em 0 .2em;
 color:#777;}
#poetry h3 small{
 font-weight:normal;
 }

/*----------------------------------------------------------------*/
/* tooltip */
.ttr { 
 display:none; 
 background:transparent url(/js/arrow.png); 
 font-size:small;
 font-weight:bold; 
 height:70px; 
 width:160px; 
 padding:25px 25px 25px;}
#conceptual .ttr, #environmental .ttr, #performance .ttr{
 background-image:url(/js/arrow_small.png);
 height:37px;}


/*----------------------------------------------------------------*/
/* the overlayed element */
.simple_overlay {
	/* must be initially hidden */
	display:none;
	/* place overlay on top of other elements */
	z-index:10000;
	/* styling */
	background-color:#000;	
	width:200px;
        height:200px;
	border:0px solid #666;}
/* close button positioned on upper right corner */
.simple_overlay .close {
	background-image:url(../js/close.png);
	position:absolute;
	right:-15px;
	top:-15px;
	cursor:pointer;
	height:35px;
	width:35px;}
/* the large image. we use a gray border around it */
#img {	border:0px double #aaa;}
/* "next image" and "prev image" links */
.next, .prev {
	/* absolute positioning relative to the overlay */
	position:absolute;
	bottom:40%;	
	border:1px solid #666;	
	cursor:pointer;
	display:none;
	padding:10px 20px;
	color:#fff;
	font-size:11px;
	/* upcoming CSS3 features */
	-moz-border-radius:5px;
	-webkit-border-radius:5px;}
.prev {	left:0;
	border-left:0;
	-moz-border-radius-topleft:0;
	-moz-border-radius-bottomleft:0;
	-webkit-border-bottom-left-radius:0;
	-webkit-border-top-left-radius:0;}
.next {	right:0;
	border-right:0;
	-moz-border-radius-topright:0;
	-moz-border-radius-bottomright:0;
	-webkit-border-bottom-right-radius:0;
	-webkit-border-top-right-radius:0;	}
.next:hover, .prev:hover {
	text-decoration:underline;
	background-color:#000;}
/* when there is no next or previous link available this class is added */
.disabled {
	visibility:hidden;}
/* the "information box" */
.info {
	position:absolute;
	top:100%;left:0;
	padding:10px 0px;
	color:#eee;
	font-size:100%;
	border-top:0px solid #666;
        text-align:center;}
.info strong {
	display:block;	}
/* progress indicator (animated gif). should be initially hidden */
.progress {
	position:absolute;
	top:45%;
	left:50%;
	display:none;}
/* everybody should know about RGBA colors. */
.next, .prev {
	background:#000 !important;
	background:rgba(0, 0, 0, .6) url(/js/h80.png) repeat-x;}


/* IMPORTANT: width has to be set to 90%, some bug in javascript that causes this value to persist in width of overlay element (height value is calculated correctly though...*/
#geometry .simple_overlay {width:90%;}
#geometry .simple_overlay img{ height:100%;}
#geometry .info { text-align:left;}
#geometry .info span { text-align:right;display:block;margin-bottom:-1em;}


.environmental_overlay, .courses_overlay {
	background:#eee url(../js/h80.png) repeat-x bottom;
	border:5px double #aaa;	
	padding:1em 4em;
	margin:5% 20%;	
	color:#444;
	display:none;}

/* Adaption for the poetry */
.poetry_overlay {
	background:#eee url(../js/h80.png) repeat-x bottom;
	border:5px double #aaa;	
	padding:1em 4em;
	margin-left:20%;	
	color:#555;
	font-weight:bold;
	display:none;}
.poetry_overlay br{
	line-height:.2;}
.environmental_overlay div.close, .poetry_overlay div.close, .courses_overlay div.close{
	position:absolute;
	height:35px;
	width:35px;
	top:-20px;
	right:-20px;
	background: transparent url(../js/close.png);}
.poetry_overlay h4 {
	color:#000;
	font-size:130%;
	margin:1em 0 1.5em -1em;}	
.poetry_overlay a.close {
	color:#888;
	margin-top:3em;
	cursor:pointer;
	display:block;
	font-weight:normal;}
.poetry_overlay a:hover.close {
	font-weight:bold;}

#courses_content ul {margin-right:160px; list-style-type: none;}
#courses_content li {text-align:center;float:left;margin:0em 1em;}
#courses_content li a {width:10em;height:14em;display:block;}
#courses_content li img {height:9em;margin-bottom:1em;}
.intro_courses {margin:-3.5em 200px 2em 12em;text-align:right;}

#site_content ul {list-style-type: none;}
#site_content li {text-align:center;float:left;margin:0em 1em;}
#site_content li a {width:10em;height:10em;display:block;}
#site_content li img {height:6em;margin-bottom:0em;}