/* Project name, location, etc */

#projectinfo {float:left; width:30em;}
dl {color:#999999; font-size:1.4em;}
dl * {font-size:1em; font-weight:normal;}
dl a {color:#999999; text-decoration:none;}
dl a:hover {color:black; text-decoration:none;}
dl dt {color:#666666; margin-bottom:0.2em;}
dl dd {margin-bottom:0.5em;}

/* Front pictures */
div.picture {float:right; margin-left:0.5em;}
div.picture p {margin:0.2em 0 0.2em 0; font-size:0.8em; width:250px; line-height:1.2em; text-align:left;}

/* Main text */
.split2 {clear:both; position:relative; padding:4em 0 1em 0; margin-top:2em; overflow:auto;}
.split2 p, .split2 h4 {width:40em;}

/* Tweak headers */
h2 {font-size:2em; color:black; margin-bottom:0.5em; font-weight:normal; display:none}
h3 {margin:0;}
h4 {margin-top:0; margin-bottom:0 ;font-weight:bold;}

/* More images, in gallery */
.gallery {float:right; margin-left:2.5em; text-align:right;}
.gallery div {margin-top:0.5em;}

/* Drop the front pics below the project description if screen is too narrow */

@media screen and (max-width:65em) {
	div.picture {float:left; margin-left:0; margin-right:0.5em;}
	#projectinfo {float:none;}
}
/* Project listings page */

.section {position:relative; background-image:url("../projects/thumbs/header.gif"); background-repeat:repeat-y; background-position:top left;}
.section h3 {width:95px; padding:5px 100px 5px 5px; color:black; background-image:url("../projects/thumbs/header.gif"); background-repeat:repeat-y; background-position:top left; margin-bottom:5px; border-bottom:1px solid white;}
.section ul {display:none; list-style:none;}
.section:hover h3 {border-bottom:1px solid black;}
.section:hover ul {position:absolute; display:block; top:0; left:200px; text-align:left; z-index:10; padding-bottom:10px; background-color:white; border-left:1px solid black; border-bottom:1px solid black; border-top:1px solid black;}
.section ul li {display:block; float:left; margin-top:10px; margin-left:10px; text-align:left;}
.section ul li a {text-decoration:none;}
.section ul li img {}


/* Linerize the listing on a narrow screen */
@media screen and (max-width:400px) {
	.section {width:100px; height:auto;}
	.section:hover h3 {border:none;}
	.section ul {display:block;}
	.section ul li {float:none;}
	.section:hover ul {position:static; border:none;}
	.section ul li {margin-left:0;}
}

#pageend a+a {display:none;}

/* Print layout */

@media print {
	div.picture {clear:right; margin-bottom:1em;}
	.split2 {clear:left;}
	.split2 p, .split2 h4 {width:30em;}
	
	.section {width:auto; height:auto; background-image:none; position:static;}
	.section h3 {width:auto; opacity:1; background-image:none; clear:left;}
	.section ul {display:block !important; position:static; margin-left:0; z-index:1;} 
}