@charset "utf-8";
/* CSS Document */
<!--
	body {
		background-image: url(images/static_bw6.jpg);
		background-repeat: repeat;
		font-family: "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif;
		font-size: 13px; /* base font size; basis for the "em" font sizes used from here on -- was 9pt */
		color: #FFFFFF;
		/*background:#66CCAA;  /* just for testing */
	}

	a:link, a:visited, a:active {
		color: #FFFFFF;
	}
	
	a:hover {
		color: #FF0000;
	}
	
	.hidden {
		display: none;
	}
	
	/* Four elements make up this page:   								*/
	/* 		-container  - contains all the other divs (below).  As such, all the elements in the container take on the properties of the container; which is why I can't reduce the container's opacity & acheive the desired effect (explained below). 	*/
	/*		-leftPic										 										*/
	/*		-navBlock	 - middle block									 				*/
	/*		-and contentBlock - right block								 					*/
	/* In order to make their backgrounds transparent, (but not their content,) I've layered each of the content divs above, over the following shaded background divs: */
	/* 		contentBlockBack, and navBlockBack 		*/
	
	#container { 
		position: absolute; 
		left: 10px; 
		top: 47%; margin-top: -125px; /* puts the top of the div 47% of the way down the page  */
									  /* (i.e., just north of center); & then subtracts half the */
									  /* height of the div (as defined in .opaqueBackground)   */
									  /* in order to (almost) center the /center/ of the div   */
		width: 827px; 
		height: 259px;
		border:solid 1px #000000;  
	}
	
	#leftPic {   /* picture width is 170px */
		display: inline;
		position: absolute; left: 0px; top: 0px;
	}
	
	#navBlockBack, #contentBlockBack { /* sets the properties for the "background" divs.  (The content is actually displayed in separate divs, placed over these opacity-adjusted divs, so the opacity of the content isn't reduced) */
		background-color: #000000;
		filter:alpha(opacity=50);   /* Internet Explorer            */
		-moz-opacity: 0.50;           /* Mozilla 1.6 and below        */
		opacity: 0.50;               /* newer Moz and CSS-3 Standard */
	}

	#navBlockBack, #navBlock { /* placement of the subNav divs */
		display: inline;
		position: absolute; left: 170px; top: 0px;
	}
	
	#navBlock {
		font-size: 0.9em;
		vertical-align: top;
		padding: 16px 6px 6px 6px;  /* padding values are: top, right, bottom, left */
		border-right: solid 1px #000000; 
		width: 153px; /* desired width minus the padding width, minus the border width.  */
		height: 236px; /* same formula as above */
		/* Keep in mind that the "width" property sets the content width.  The width of the containing box, according to the W3 box model, is defined as the content width, */
		/* plus the width of the left & right padding (around the content), plust the width of the L & R border, pus the width of the L & R margin (around the border).  */
		/* See http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions for a more-complete explanation.  */
	}
	
	#navBlockBack {
			width: 165px; 
			height: 259px;
	}
	
	#navBlock a {
		text-decoration: none;
	}

	#navBlock ul {
		list-style: none;
		margin-left: 0px; /* IE & Opera create lists with indentation aligned with the left margin... */
		padding-left: 0px; /* ...while Firefox creates lists with indentation aligned with the left padding */
										/* (see http://www.alistapart.com/articles/taminglists/   for more details */
		margin-top: 0px;  /* I'm assuming the above is true for the top alignment as well */
		padding-top: 0px; /* With the ul's left & top alignment set to zero (cross-browser), I can align my ul using the subNav div's padding values */
		line-height: 1.75em;
	}
	
	#navBlock li {
		padding-left: 0.75em;
		text-indent: -0.75em; /* The negative-indent, combined with the padding-left defined above, gives the effect of having the second (etc) line of the li "indented".  (It "pads" the entire list item, and then negative-indents the item...but the indent only effects the beginning of the line of text; not the lines after the wrap */
	}

	#navBlock .backLink  a {
		position: absolute;
		bottom: 6px;
		right: 7px;
	}	
	
	
	#contentBlock, #contentBlockBack { 
		display: inline;
		position: absolute; left: 336px; top: 0px;
	}
	
	#contentBlock {
		padding: 17px 14px 6px 12px;  /* padding values are: top, right, bottom, left */
		width: 465px; 
		height: 236px;
		overflow: auto;
		overflow-x: visible;  /* for Internet Explorer */	
	}

	#contentBlockBack {
		width: 491px; 
		height: 259px;
	}

	#contentBlock ul {
		list-style: none;
		margin-left: 0px; /* IE & Opera create lists with indentation aligned with the left margin... */
		padding-left: 0px; /* ...while Firefox creates lists with indentation aligned with the left padding */
										/* (see http://www.alistapart.com/articles/taminglists/   for more details */
		margin-top: 0px;  /* I'm assuming the above is true for the top alignment as well */
		padding-top: 0px;
	}
	
	#contentBlock li { /* Each content item  */
		margin-bottom: 12px;  /* space below each content item */
	}	

	.chronology  li li { /* for lists within chronology content items  :::  for some reason, when I (more correctly) tried, ".chronology li ul", to define the display of unordered lists within .chronology content items, the style for these elements was defined by #contentBlock ul instead (???) */  
		list-style: square;
		margin-top: 4px;
		margin-left: 30px;
		margin-right: 30px; 
		font-size: 0.85em;
		color: #cccccc;
	}
	
	.portfolio_writing li li { /* for unordered lists within portfolio_writing content items */
		list-style: none;
		margin-top: 4px;
		font-size: 0.85em;
		color: #cccccc;
	}
	
	.portfolio_writing li b {
		font-size: 1.1em; /* remember:  The em's point-of-reference is the font-size of its parent block.  In the portfolio_writing page, the titles I've bolded are within lists; and those lists already define the font-size as 0.85em of their parent block - the page body. */ 
		color: #ffffff;
		font-weight: normal;
	}

	#contentBlock h1 {
		display: none;
	}
	
	#contentBlock h2 {  /* item title (right-justified) */
		width: 100%;
		text-align: right;
		padding-bottom: 1px;
		border-bottom: 1px #FFFFFF solid;
		font-size: 1em;
		font-weight: 500;
		line-height: 1.2;  /* space between lines w/i a paragraph.  (1.2 = 1.2 times the normal for the given font size) */
		margin-bottom: 2px; /* the height of the "break" between the bottom of the heading, & the top of the next block element */
		margin-top: 0px;
	
	}
	
	#contentBlock .webDesign h3 {
		font-size: 0.9em;
		font-weight: normal;
		margin-top: 0px;
		margin-bottom: 4px; 
	}
	
	#contentBlock h3 { /* item relative title (eg, Job Title, Publication title,...) */
		font-size: 0.9em;
		font-weight: normal;
		margin-top: 0px;
		margin-bottom: 0px; 
	}
	
	#contentBlock h4 { /* item relative subtitle */
		font-size: 0.9em;
		font-weight: normal;
		color: #cccccc;
		margin-top: 0;
		margin-bottom: 0; 
	}
	
	#contentBlock p { /* description */
		font-size: 0.85em;
		font-weight: normal;
		color: #cccccc;
		line-height: 1.3; /* space between lines w/i a paragraph */
		margin-top: 0px; /* space above a paragraph */
		margin-bottom: 6px; /* space below a paragraph */
	}
	
	#contentBlock .webDesign p {
		font-size: 0.85em;
		font-weight: normal;
		color: #cccccc;
		line-height: 1.3; /* space between lines w/i a paragraph */
		margin-bottom: 8px; /* space below a paragraph */
	}
	
	#contentBlock b {
		color: #ffffff;
		font-weight: normal;
	}

	.chronology .date {
		display: block;
		font-size: 0.85em;
		font-weight: normal;
		color: #cccccc;
		margin-top: 0;
		margin-bottom: 8px; 
	}
	
	.portfolio_writing .pdf { /* placement of the span containing the right-hand column links ( [pdf], [jpg], etc) */
		position: absolute;
		right:  13px;
	}
	
	.portfolio_writing .alt_link { /* spaces the second (& third...) links to the left of the first link in the right-hand column.  The span w/ this class is inside the span w/ the class ".pdf" above */
		margin-right: 4px;
	}
	
	.portfolio_writing .pdf a:link, .pdf a:visited, .pdf a:active, .alt_link a:link, .alt_link a:visited, .alt_link a:active {
		color: #FF0000;
		text-decoration: none;
	}
	
	.portfolio_writing .pdf a:hover, .alt_link a:hover {
		text-decoration: none;
		color: #ffffff;
	}


	#contentBlock p a:link, #contentBlock p a:visited, #contentBlock p a:active {
	
	}
	
	#contentBlock p a:hover {
	
	}
	
	
	.PopBoxImageSmall {
		border: solid 1px #cccccc;
		cursor: url("images/magplus.cur"), pointer;
		float: right;
		margin-top: 4px;
		margin-left: 10px;
		margin-bottom: 2px;
	}
	
	.PopBoxImageLarge {
		border: solid 1px #999999;
		cursor: url("images/magminus.cur"), pointer;
	}
	
	.PopBoxImageShrink {
		cursor: url("images/magminus.cur"), pointer;
	}
	
	.PopBoxImageLink {
		cursor: pointer;
	}
	
	.PopBoxImageMove {
		border: none 0px #ffffff;
		cursor: pointer;
	}
		
	
-->