* {
	padding: 0;
	margin: 0;
}

a img {
	border: 0;
}

a { text-decoration: underline; 
	color: #6B9BD7;
}

a:hover {
	color: #3267A2;
	}

.imgCenter {
	margin: 5px auto;
}
	
.imgLeft {
	float: left;
	margin: 5px;
}

.imgRight {
	float: right;
	margin: 5px;
}

h1, .firstWord {
	font-weight: bold;
	color: #90B7E8;
	font-size: 24px;
	text-decoration: none;
	display: inline;
	/* margin-right: 5px; padding between title and text. */
	/* margin-bottom: 5px; padding between this and two columns */
	/* border-bottom: 1px dashed #90B7E8; */
	}
	
h2 {
	font-weight: bold;
	color: #075F9F;
	font-size: 18px;
	}

p.first {
	display: inline;
	margin-top: 0px;
	}
	
p {
	margin-top: 10px;
}

body {
	background: #FFF url("bg.gif") repeat-x top center;
	text-align: center;
}

body, p, td {
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-size: 12px;
	color: #000;
}

ul {
	list-style-type: square;
	color: #4E73AC;
	margin-left: 15px;
	margin-top: 5px;
	margin-bottom: 5px;
	}
	
li {
	padding-top: 5px;
	}

/* PNG fix. */

img, #clouds { behavior: url("style/iepngfix.htc"); }
	
/* DIV with cloud (lettering. */
#clouds {	
		background: url("clouds.png") top left no-repeat; 
		border: 0px solid black;
		width: 1000px;
		height: 191px;
		position: absolute;
		top: 0;
		left: 0;
		}

/* Wrapper DIV for contents */
#wrapper {
	position: relative;
	width: 1000px;
	margin: 0 auto;
	text-align: center;
	border: 0px solid black;
	padding-top: 265px;
}

/* Logo image */
#logo {
	position: absolute;
	top: 10px;
	left: 15px;
}

/* Contents of the page */
#contents {
	padding: 10px;
	padding-left: 15px;
	width: 80%;
	margin: 0 auto;
	text-align: left;
	border: 0px solid #c0c0c0;
	margin-bottom: 15px;
}

/* Bottom of the page. */

#copy {
	clear: both;
	padding-top: 20px;
	border-top: 0px dashed #90B7E8;
	margin: 0 auto;
	text-align: center;
}
#copy, #copy p {
	font-size: 11px;
	color: #90B7E8;
}



/* Left column. */
#left {
	float: left;
	width: 60%;
	border: 0px;
	padding: 10px;
	text-align: left;
	line-height: 20px;
}

/* Right column. */

#right {
	float: right;
	width: 33%;
	border: 0px;
	padding: 10px;
	text-align: left;
}	

/* Top: navigation */

#navigation {
	position: absolute;
	border: 0px solid black;
	top: 0;
	left: 0;
}

#navigation ul {
	list-style: none;
}

#navigation ul li {
	position: absolute;
}

/* Clickable areas inside the LI. */

#artwork img, #resume img, #travel img, #teaching img, #coding img, #about img { width: 110px; height: 55px; z-index: 5; }
#logoLink, #artwork a, #resume a, #travel a, #teaching a, #coding a, #about a { cursor: help; z-index: 15; }

/* Hide the text; it's for non-CSS only. */

.toggleAble a span { display: none; }

/* Position the clickable areas. */

#artwork { left: 103px; top: 126px; }
#resume { left: 239px; top: 57px; }
#travel { left: 356px; top: 117px; }
#teaching { left: 545px; top: 56px; }
#coding { left: 650px; top: 118px; }
#about { left: 753px; top: 40px; }

/* Colorful images. */

.retract {
	display: none;
	width: 50px; /* default */
	height: 50px;
	position: absolute;
	border: 0px solid black;
}

#p_sun { left: 23px; top: 77px; width: 101px; height: 96px; background-image: url("p_sun.gif"); background-repeat: no-repeat; }
#p_kite { left: 191px; top: 70px; width: 117px; height: 174px; background-image: url("p_kite.gif"); background-repeat: no-repeat; }
#p_balloon { left: 400px; top: 35px; width: 80px; height: 102px; background-image: url("p_balloon.gif"); background-repeat: no-repeat; }
#p_paper { left: 511px; top: 111px; width: 140px; height: 84px; background-image: url("p_plane.gif"); background-repeat: no-repeat; }
#p_leaf { left: 668px; top: 51px; width: 55px; height: 55px; background-image: url("p_leaf.gif"); background-repeat: no-repeat;}
#p_bird { left: 728px; top: 92px; width: 222px; height: 74px; background-image: url("p_bird.gif"); background-repeat: no-repeat;}

/* DIV for the text description on rollover. */

div#link_description {
	border: 0px solid black;
	color: #FFF;
	position: absolute;
	left: 305px;
	top: 15px; 
	width: 315px;
	text-align: center;
	font-size: 11px;
	display: none; /* to start */
}

/* Icons on the "artwork" page. */
a img.art-icon {
	width: 75px;
	height: 75px;
	margin: 1px;
	border: 1px solid #808080;
	display: inline;
	float: left;
	}
	
a:hover img.art-icon {
	border-color: #9ABCED;
	}
	
/* Info sources */

.res-info {
	display: none;
	}
	
/* Styles for the submit comment box. */
	
.submit_comment {
	padding: 5px;
	background-color: #9ABCED;
	font-weight: bold;
	text-align: center;
	width: 80%;
	display: block;
	margin: 5px auto;
	color: #FFF;
	text-decoration: none;
	}
	
a.submit_comment:hover {
	background-color: #D6E4F8;
	color: #000;
	}
	
#comment_text {
	width: 80%; 
	height: 100px; 
	padding: 5px;
	margin: 5px auto;
	display: block;
	}
	
/* Project source files. */

.projects-box {
	display: none;
	}
	
#resume-load-parent, #coding-load-parent {
	width: 80%;
	height: 5px;
	margin: 10px auto;
	padding: 10px;
	border-width: 0px 0 0 4px;
	border-style: solid;
	border-color: #075F9F;
	display: none; /* to start */
	overflow: auto;
	}
	
/* Boxed links on the right side. */

ul.tabbed {
	list-style-type: none;
	}
	
ul.tabbed li a {
	background-color: #075F9F;
	display: block;
	width: 100%;
	padding: 3px;
	text-align: center;
	color: #D2E7EE;
	margin: 0px;
	border: 1px solid #00345C;
	font-size: 11px;
	text-decoration: none;
	}
	
ul.tabbed li a:hover {
	background-color: #0B81D3;
	color: #FFF;
}

ul li .descrip-dark {
	margin-left: 8px;
	text-decoration: none !important;
	font-size: 10px;
	}
	
/* Contact info table on resume. */
table#contact-info td {
	vertical-align: top;
	padding: 3px;
	}
	
#recitation-files a {
	font-weight: bold;
}

#recitation-files a span {
	font-weight: normal;
	font-size: 10px;
	text-decoration: none;
}

#recitation-files a.wkst {
	font-size: 10px;
	text-decoration: none;
	font-weight: normal;
}