#navigationP, #contentP, .section {
	padding:0;
	margin:0;
	list-style:none;
}

/* The Window  */
/* best to not have any borders or the math goes wonky */

#contentP {
	margin:65px 0 0 0;
	overflow:hidden;
	width:582px;
	height:505px;
	background-color:#FFF;
	position:absolute;
	z-index:20;
}
	#contentP h2 {
	}
	#contentP a {
	}

#navigationP {
	width:582px;
	height:505px;
}

		#navigationP ul {
			margin:0;
			list-style:none;
		}
		
		#navigationP li ul {
		width:570px;
		}
		
		#navigationP li ul li {
		width:82px;
		height:82px;
		float:left;
		margin:0 6px 6px 0;
		display:block;
		position:relative;
		}

/* The Image RO with Fade in Safari */
 		#navigationP li ul li span a {
		text-decoration:none;
		}
		div.fade_holder {
		position:relative;
		cursor:pointer;
		}
		div.fade_holder img.fade {
		  opacity: 1;
		  -webkit-transition: opacity 1s linear;
		}
		
		div.fade_holder img.fade:hover {
		  opacity: 0;
		}


/* The container holding the rows with items */
.section {
	width:3900px;
	position:relative;
	/* z-index:40; */
}

/* The Projects - aka the items being held in the rows */
	.section .sub {
		position:relative;
		z-index:50;
		float:left;
		width:582px;
		height:505px;
	}
	/* The Projects - elements */
		.section .sub h2 {
		font:bold normal 10px/1.4em Helvetica, Arial, sans-serif;
		color:#0084AB;
		text-transform:uppercase;
		margin:0 0 8px 0;
		}
		.section .sub p {
		font:normal normal 10px/1.2em Helvetica, Arial, sans-serif;
		color:#999999;
		width:527px; /* forces wrap to same size as image */
		}
		.section .next, .section .prev, .section .grid {
			position:absolute;
			bottom:5px;
			font:normal normal 10px/1.4em Helvetica, Arial, sans-serif;
			color:#0084AB;
			text-decoration:none;
		}
		.section .next:hover, .section .prev:hover, section. .grid:hover {
			color:#666;
			text-decoration:underline;
		}
		.section .next {
			right:55px;
		}
		.section .prev {
			right:102px;
		}
		.section .grid {
			left:0px;
		}

			.port_controls a.next {
			color: #0084AB;
			}
				.port_controls a.next:hover {
				color:#A0CFE3;
				}
			.port_controls a.prev {
			color: #0084AB;
			}
				.port_controls a.prev:hover {
				color:#A0CFE3;
				}
			.port_controls a.grid {
			color: #0084AB;
			}
				.port_controls a.grid:hover {
				color:#A0CFE3;
				}

.projthumbs {
  	width:527px;
	margin:0;
	position:relative;
}

.projthumbs ul {
 margin:4px 0 0 0;
 height:20px;
 float:right;
}

.projthumbs li {
	float:left;
}

	.projthumbs li a {
	  display:block;
	  height:15px;
	  width:15px;
	  background-color:#999;
	  margin:0 0 0 4px;
	  position:relative;
	  cursor:pointer;
	}
	.projthumbs li a:hover {
	  background-color:#999;
	  position:relative;
	}
	.projthumbs li a.selected {
	  display:block;
	  height:15px;
	  width:15px;
	  background-color:#0084AB;
	}

.projthumbs span {
  display:block;
  margin:0;
  padding:0;
  width:527px;
  height:363px;
}
.projthumbs span img {
  display:block;
}