html,body{
	margin:0;
	padding:0;
	font-family:Verdana,Helvetica,Arial,Sans;
	font-size:95%;
	background-color:#fdf9f7;
	background-color:#fffbf6;
}
a{
	color:white;
	color:#002b57;
}
a:hover{
/*	color:#002b57;*/
	color:white;
}

/* 
 *
 * colors 
 *
*/
#name-box{
	background-color:#607687;
	background-color:#7e92a6;
	background-color:#7f9cb9;
	background-color:#81a1c2;
	background-color:#8baac7;
/*	background-color:#31567d;*/
	color:black;
/*	color:white;*/
	border:2px solid #6b7c8c;
  padding:0;
  padding-top:12px;
}
#name-box p {
  padding: 0 12px;
}
#name-box a{
	color:#002b57;
}
#name-box a:hover{
	color:white;
}
#picture-box{
	background-color:#d37049;
}
#footnote-box{
	background-color:black;
	color:white;
	border:2px solid gray;
	border-top:2px solid white;
	border-right:2px solid white;
}
#footnote-box a:hover{
	color:#99b8d7;
}
#footnote-box a{
	color:#99b8d7;
	color:#ffa380;
}

#projects-box{
	background-color:#f48360;
	background-color:#f28f6a;
	background-color:#ffa380;
	border:2px solid #b56343;
}



/*
*
* dimensions 
*
*/
p{
	margin-top:0;
}
.box{
	width:50%;
	height:50%;
	position:absolute;
}

.content{
	position:absolute;
	z-index:20;
	margin:2px;
	padding:12px;
}
.tl{
	right:50%;	bottom:53%;
	height:80px;
}
.tr{
	left:50%; bottom:53%;
}
.bl, #bl .content{
	right:50%;	top:47%;
}
.br, #br .content{
	left:50%; top:47%;
}


#name-box{
/*	overflow:hidden;*/
	width:22.25em;
	height:14.4em;
	min-height:165px;
}
/* for opera */
#name-box .top-half{
	z-index:5;
	position:absolute;
}
#picture-box{
	height:150px;
	width:150px;

	bottom:53%;	
	left:50%;
	
	background:white url(images/philcrosby.jpg) no-repeat bottom left	;
	padding:0;
	border:2px solid white;
/*	background-color:white;*/
}
#contactme{
	position:absolute;
	left:155px;
  top:58px;
}

#footnote-box{
	width:14.8em;
	min-height:9.0em;
}
#projects-box{
	width:24.7em;
	min-height:18.1em;
}


/* possible to do this with one element (using padding-bottom) in non-IE, but this way is easier for IE6 */
#backdrop-container{
	position:absolute;
	right:0;
/*	left:0;*/
	top:0;
	width:62%;
	height:47%;
/*	background-color:blue;*/
}
#backdrop-image{
	position:absolute;
	bottom:-75px;
	height:200px;
	width:100%;
	background: transparent url(images/bg2.jpg) repeat-x 180px bottom;
}


/*
 * content elements
 */
#email{
	display:block;
	height:16px;
	width:90px;
	background:transparent url(images/all.gif) no-repeat 0 -48px;
}
#email:hover{
	background:transparent url(images/all.gif) no-repeat 0 -97px;
}
h2{
	font-size:100%;
	margin:0;
	margin-bottom:5px;
	background-repeat:no-repeat;
	text-indent:-1000px;
}
#h-projects{
	background: transparent url(images/all.gif) no-repeat left -26px;
	height:22px;
}
#h-name{
	background: transparent url(images/all.gif) no-repeat left 0px;
	height:25px;
	margin-left:5.9em;
	width:145px;
}
#ooyala-logo {
  border:0;
}
#white-bar {
  border-top:2px solid #B8D0E4;
  border-bottom:2px solid #B8D0E4;

  margin-top:-10px;
  margin-bottom:5px;
  padding-top:1px;

  background-color:#C3DDF2;
  text-align:center;
}
#jjot-box{
	position:absolute;
	bottom:0;	
	left:0;
	z-index:4;
	background-color:#99b8d7;
	height:69px;
	width:100%;
}

.project{
	position:relative;
	margin-right:50px;
	min-height:53px;
	margin-bottom:5px;
}
.project p{
	/* indent*/
	margin-left:8px;	
	margin-bottom:0;
}
div.project-icon{
	position:absolute;
	top:-5px;
	top:3px;

	right:-78px;	
	border:1px solid #532a1b;
	border:1px solid #406283;
	border:2px solid #b56343;
}
div.project-icon a{
	width:70px;
	height:50px;
	display:block;
}
div.project-icon:hover{
	top:1px;
	right:-80px;
	border:3px solid #b56343;
}
div.project-icon:hover a{
	border:1px solid #ffc3ab;
}
/* doesn't look quite right when using a lighter color */
div.project-icon:hover #installpad{
	border:1px solid gray;
}
#jjot{
	background: transparent url(images/all.gif) no-repeat -50px -142px;
}
#breadcrumbs{
	background: transparent url(images/all.gif) no-repeat left -275px;
}
#installpad{
	background: transparent url(images/all.gif) no-repeat left -374px;
}
#ninjawords{
	background: transparent url(images/all.gif) no-repeat left -324px;
}
/* not used */
#inkforword{
	background-color:#cccccc;
	background-image:url(images/inkforword.png);
}
h3{
	margin:0;
	font-weight:normal;
	font-size:100%;
	margin-bottom:4px;
	color:#333333;
}
h3 a{
	letter-spacing:1px;
	letter-spacing:0.01em;
	font-size:120%;
}

h3 a.smaller {
  margin-left:14px;
  font-size:80%;
}
p.extra-project-links {
  margin-left:1em;
  padding:0;
  margin-bottom:4px;
}