@import url(clearstyle.css);
@import url(color.css);
@import url(type.css); 

/* center the website in the browser window */
html {
	text-align:center; 
	}




body {
	padding-left:150px ;
	width: 90%;
	max-width:800px;
	margin:0 auto;
	text-align: left; 
	}
	
div#branding {
	height: 100px;
	z-index:100;
	margin-left: -150px;
	}

div#branding > h1  {
	margin-left:-999px; 
	z-index:99
	}

h2.ptitle  {
	position: relative;
	background-color: transparent ;
	margin-left:-999px;
	padding-top: 100px;
	}
	
div#nav {
	margin:-155px;
	width:150px;
	padding-right:10px;
	padding-top:120px;
	position:absolute;
	z-index:101;
	top: 160px;
/*	line-height:1.5em;*/
}
p.note {
	width:150px;
	margin-left: 5px;
	padding-right:10px;
	position:absolute;
	top: 500px;
}

div#nav li {
	height: 42px;
	min-height: 42px;
	vertical-align: middle;
	line-height: 35px;	
	min-width:150px;
	position: relative;
	
}
div#nav li a {
	display: block;
	height: 42px;
	border-width: 0;
	margin: 0;	
	vertical-align: bottom;
	line-height: 35px;	
	min-width:150px;
	min-height: 42px;
}

div#nav li > a[href]:hover {
	display: block;
	height: 42px;
	vertical-align: bottom;
	z-index:999;
	min-height: 42px;
	/*top: -30px; 
	height: 42px;
	
	line-height: 35px;*/
	min-width:150px;
	border-width: 0;
	
	}
/* portfolio_layout.css (c) 2009 Sheridan Multimedia 

6x6 grid display with the grid squares carried into the header.
Each thumbnail is 100x100 px with a 10 px gutter between columns and rows
Calculations for the columns:
		A = 0 px
		B = 110 px
		C = 220 px
		D = 330 px
		E = 440 px
		F = 550 px

Calulatons for the rows:
		1 = 110 px
		2 = 220 px
		3 = 330 px
		
		All thumbnails have z-index < 30
		All large graphic boxes have z-indes > 100
*/ 		

div#portfolio_content {
position:absolute;
top: 120px;

min-height: 675px;
min-width: 675px;

}

	
/* set up the gradient boxes */
li#r0a  { position:absolute;
	top: 0; left: 10px;
	min-width:100px;
	max-width:100px;
	min-height:100px;
	border: 1px solid #999999;
	margin: 5px;		
background-color:#000000;
}


li#r0b { min-width:100px;
	max-width:100px;
	min-height:100px;
	border: 1px solid #999999;
	position:absolute;
	margin: 5px;
	position:absolute;
top: 0; left: 120px;
background-color: #333333;
}

li#r0c  { position:absolute;
min-width:100px;
	max-width:100px;
	min-height:100px;
	border: 1px solid #999999;
	position:absolute;
	margin: 5px;
top: 0; left: 230px;
background-color: #999999;
}

li#r0d  { position:absolute;
min-width:100px;
	max-width:100px;
	min-height:100px;
	border: 1px solid #999999;
	position:absolute;
	margin: 5px;
top: 0; left: 340px;
background-color: #CCCCCC;
}

li#r0e{ 
position:absolute;
min-width:100px;
	max-width:100px;
	min-height:100px;
	border: 1px solid #999999;
	position:absolute;
	margin: 5px;
top: 0; left: 450px;
background-color: #e6e6e6;
}

li#r0f { position:absolute;
min-width:100px;
	max-width:100px;
	min-height:100px;
	border: 1px solid #999999;
	position:absolute;
	margin: 5px;
top: 0; left: 560px;
background-color:#ffffff;
z-index: 6;
}

h3 {
	min-height: 108px; 
	margin: 25px;
	z-index:1000;
	position:absolute;
	top: 0px; left: 257px;
}

a {
	position: absolute;
	min-width:100px;
	max-width:100px;
	min-height:100px;
	border: 1px solid #999999;
	margin: 5px;
	text-decoration:none;
	}
#r1a a { top: 110px; left: 10px; }
#r1b a { top: 110px; left: 120px; }
#r1c a { top: 110px; left: 230px; }
#r1d a { top: 110px; left: 340px; }
#r1e a { top: 110px; left: 450px; }
#r1f a { top: 110px; left: 560px; }

#r2a a { top: 220px; left: 10px; }
#r2b a { top: 220px; left: 120px; }
#r2c a { top: 220px; left: 230px; }
#r2d a { top: 220px; left: 340px; }
#r2e a { top: 220px; left: 450px; }
#r2f a { top: 220px; left: 560px; }

#r3a a { top: 330px; left: 10px; }
#r3b a { top: 330px; left: 120px; }
#r3c a { top: 330px; left: 230px; }
#r3d a { top: 330px; left: 340px; }
#r3e a { top: 330px; left: 450px; }
#r3f a { top: 330px; left: 560px; }

#r4a a { top: 440px; left: 10px; }
#r4b a { top: 440px; left: 120px; }
#r4c a { top: 440px; left: 230px; }
#r4d a { top: 440px; left: 340px; }
#r4e a { top: 440px; left: 450px; }
#r4f a { top: 440px; left: 560px; }

#r5a a { top: 550px; left: 10px; }
#r5b a { top: 550px; left: 120px; }
#r5c a { top: 550px; left: 230px; }
#r5d a { top: 550px; left: 340px; }
#r5e a { top: 550px; left: 450px; }
#r5f a { top: 550px; left: 560px; }






.content_footer {
	position:absolute; 
	clear:both;
	padding-top: 3em;
	padding-bottom: 3em;
	margin-top: 3em;
	margin-left: 75px;
	bottom:0%;
	height: 1.5em;
	text-align:center;
	min-width:150px;
	top: 720px;
}