@charset "UTF-8";
/* CSS Document */

/* ////// STRUCTURAL ELEMENTS ///// */

body {
	width: 100%;
	height:101.1%;
    background:url("../images/bg_tile.jpg") repeat;
	}


h2 { font: normal normal .7em/1.5em Times, "Times New Roman", serif;
	color: #999999;
	letter-spacing:.1em;
	margin: 20px 20px 5px 20px;
}

h3 { font: normal normal .65em/1.5em Times, "Times New Roman", serif;
	color: #999;
	letter-spacing:.05em;
	margin: 0 20px 10px 20px;	
}

#info-page h3 { font: normal normal .65em/1.5em Times, "Times New Roman", serif;
	color: #999;
	letter-spacing:.05em;
	margin: 0 0 0 20px;	
}

h3 a, h3 a:hover { font-family: "Times New Roman", serif;
	color: #999;
	letter-spacing:.05em;
	text-decoration: none;
}


h4 { font: normal normal .7em/1.5em Times, "Times New Roman", serif;
	color: #999999;
	letter-spacing:.1em;
	margin: 15px 20px 0 20px;
}

h4 a { font: inherit;
	color: #666;
	letter-spacing:inherit;
	text-decoration: none;
	border-bottom: 1px dotted #666;
}

h4 a:hover { font: inherit;
	color: #9fc9cf;
	letter-spacing:inherit;
	text-decoration:none;
}

p { font: .7em/1.5em Helvetica, Arial, sans-serif;
	color: #000;
	letter-spacing:0;
	margin: 0 20px 10px 20px;
}

p a {
	font-family:Helvetica, Arial, sans-serif;
	color: #82c3db;
	text-decoration:none;
	}
	
p a:hover {
	color: #82c3db;
	text-decoration:underline;
	}
	
p a:visited {
	font-family:Helvetica, Arial, sans-serif;
	color: #448ca7;
	text-decoration:none;
	}	
		
.resume_bold { font-style:italic; color:#000}

#rap-rap {
	text-align:center;
	background: url("../images/star-left.jpg") no-repeat top left; 
	}

#rap {
	background: url("../images/star-right.jpg") no-repeat fixed top right; 
	margin-left: auto;
	margin-right: auto;
	text-align:left;
	}

#wrapper {
	width:948px;
	height:565px;
	text-align: left;
	margin: auto auto;
	}
	
#top {
	width:948px;
	height:165px;
	background: url("../images/bg_top2.png"); 
	background-repeat: no-repeat;
	background-position: 0 60px;
	position:relative;
	}

#mid {
	width:948px;
	height:352px;
	background: url("../images/bg_mid2.png"); 
	position:relative;
	overflow: hidden;
	}

#btm {
	width: 948px;
	height: 48px;
	background-image: url("../images/bg_btm.jpg");
	background-repeat: no-repeat;
	position: relative;
	overflow: hidden;
	}	
	
#main {
	width: 667px;
	height: 353px;
	min-height:353px;
	position:absolute;
	top:0;
	left:115px;
	overflow: hidden;
	}

#name {
	width: 324px;
	height:61px;
	position:absolute;
	top:90px;
	left:121px;
}
	
.col {
 width:315px;
height:100%;
float:left;}

	

/* ////// NAV ELEMENTS ///// */

#nav {
	width: 191px;
	height: 46px;
	list-style:none;
	border:0;
	padding:0;
	margin:0;
	position:absolute;
	top:102px;
	left:591px;
	}
	

#port-nav a {
    display:block;
	color:#f2e9c0;
	font-size: 1px;
    width:191px;
	height:23px;
    text-decoration:none;
    background:url("../images/nav-port.png") no-repeat;
	position:absolute;
	top:0;
	left:0;	
	}
#port-nav a:hover { 
    background-position:0 -23px;
	float: right;}
#port-nav a:active {
    background-position:0 -46px;
	float: left;}
#portfolio-page #port-nav a {
    background-position:0 -46px;}


#info-nav a {
    display:block;
	color:#f2e9c0;
	font-size: 1px;
    width:69px;
	height:23px;
    text-decoration:none;
    background:url("../images/nav-info.png") no-repeat;
	position:absolute;
	top:23px;
	left:122px;	}
#info-nav a:hover { 
    background-position:0 -23px;
	float: right;}
#info-nav a:active {
    background-position:0 -46px;
	float: right;}
#info-page #info-nav a {
    background-position:0 -46px;}	



/* ////// SUB-NAV ELEMENTS ///// */

#subnav {
	width: 645px;
	height:24px;
	position:absolute;
	top: 0;
	left: 137px;
	float:left;
	padding:0;
}

.arrows {
	position:absolute;
	top: 328px;
	left:0;
	width:666px;
	height:25px;	}


.arrowL {
	display:block;
	height: 25px;
	position:absolute;
	bottom:8px;
	left:3px;	}

.arrowR {
	display:block;
	height: 25px;
	position:absolute;
	bottom:3px;
	right:3px;	}

		
	
/* /////// PORTFOLIO IMAGE MAPS //////// */

#diamonds-id {
	width: 667px;
	height: 353px;
	margin:0;
	padding:0;
	position:relative;
	border:0;
	background: url("../images/diamonds-id.gif") no-repeat;
	}
	
#diamonds-id li {
	margin:0; padding:0;
	list-style:none;
	display:block;
	position:absolute;
	}	

#diamonds-id a {
	display:block;
	text-indent: -9999px;
	text-decoration:none;
	}
	
#diamond1 {width:134px; height:105px; left:41px; top: 147px; }
#diamond2 {width:110px; height:95px; left:149px; top: 40px; }
#diamond3 {width:121px; height:90px; left:219px; top: 230px; }
#diamond4 {width:140px; height:104px; left:318px; top: 86px; }
#diamond5 {width:134px; height:96px; left:390px; top: 190px; }
#diamond6 {width:103px; height:81px; left:493px; top: 24px; }
	
#diamond1 a {height:105px;}
#diamond2 a {height:95px;}
#diamond3 a {height:90px;}
#diamond4 a {height:104px;}
#diamond5 a {height:96px;}
#diamond6 a {height:81px;}

#diamond1 a:hover {	background: url("../images/diamonds-id.gif") -41px -499px no-repeat; }
#diamond2 a:hover {	background: url("../images/diamonds-id.gif") -149px -392px no-repeat; }
#diamond3 a:hover {	background: url("../images/diamonds-id.gif") -219px -582px no-repeat; }
#diamond4 a:hover {	background: url("../images/diamonds-id.gif") -318px -438px no-repeat; }
#diamond5 a:hover {	background: url("../images/diamonds-id.gif") -390px -542px no-repeat; }
#diamond6 a:hover {	background: url("../images/diamonds-id.gif") -493px -376px no-repeat; }


#stars {
	width: 667px;
	height: 353px;
	margin:0;
	padding:0;
	position:relative;
	border:0;
	background: url("../images/panel2.gif") no-repeat;
	}
	
#stars li {
	margin:0; padding:0;
	list-style:none;
	display:block;
	position:absolute;
	}	

#stars a {
	display:block;
	text-indent: -9999px;
	text-decoration:none;
	}
	
#star1 {width:174px; height:166px; left:77px; top: 10px; }
#star2 {width:168px; height:145px; left:251px; top: 10px; }
#star3 {width:140px; height:145px; left:419px; top: 10px; }
#star4 {width:174px; height:134px; left:77px; top: 177px; }
#star5 {width:168px; height:147px; left:252px; top: 177px; }
#star6 {width:162px; height:155px; left:419px; top: 155px; }
	
#star1 a {height:166px;}
#star2 a {height:145px;}
#star3 a {height:145px;}
#star4 a {height:134px;}
#star5 a {height:147px;}
#star6 a {height:155px;}

#star1 a:hover {background: url("../images/panel2.gif") -77px -362px no-repeat; }
#star2 a:hover {background: url("../images/panel2.gif") -251px -362px no-repeat; }
#star3 a:hover {background: url("../images/panel2.gif") -419px -362px no-repeat; }
#star4 a:hover {background: url("../images/panel2.gif") -77px -529px no-repeat; }
#star5 a:hover {background: url("../images/panel2.gif") -252px -529px no-repeat; }
#star6 a:hover {background: url("../images/panel2.gif") -419px -507px no-repeat; }


#drops {
	width: 667px;
	height: 353px;
	margin:0;
	padding:0;
	position:relative;
	border:0;
	background: url("../images/panel3.gif") no-repeat;
	}
	
#drops li {
	margin:0; padding:0;
	list-style:none;
	display:block;
	position:absolute;
	}	

#drops a {
	display:block;
	text-indent: -9999px;
	text-decoration:none;
	}
	
#drop1 {width:45px; height:45px; left:111px; top: 42px; }
#drop2 {width:33px; height:39px; left:156px; top: 88px; }
#drop3 {width:39px; height:43px; left:166px; top: 240px; }
#drop4 {width:42px; height:49px; left:286px; top: 120px; }
#drop5 {width:35px; height:44px; left:342px; top: 169px; }
#drop6 {width:36px; height:43px; left:487px; top: 60px; }
	
#drop1 a {height:45px;}
#drop2 a {height:39px;}
#drop3 a {height:43px;}
#drop4 a {height:49px;}
#drop5 a {height:44px;}
#drop6 a {height:43px;}

#drop1 a:hover {background: url("../images/panel3.gif") -111px -394px no-repeat; }
#drop2 a:hover {background: url("../images/panel3.gif") -156px -440px no-repeat; }
#drop3 a:hover {background: url("../images/panel3.gif") -166px -592px no-repeat; }
#drop4 a:hover {background: url("../images/panel3.gif") -286px -472px no-repeat; }
#drop5 a:hover {background: url("../images/panel3.gif") -342px -521px no-repeat; }
#drop6 a:hover {background: url("../images/panel3.gif") -487px -412px no-repeat; }


#crowns {
	width: 667px;
	height: 353px;
	margin:0;
	padding:0;
	position:relative;
	border:0;
	background: url("../images/panel4.gif") no-repeat;
	}
	
#crowns li {
	margin:0; padding:0;
	list-style:none;
	display:block;
	position:absolute;
	}	

#crowns a {
	display:block;
	text-indent: -9999px;
	text-decoration:none;
	}
	
#crown1 {width:174px; height:100px; left:86px; top: 197px; }
#crown2 {width:119px; height:68px; left:190px; top: 53px; }
#crown3 {width:132px; height:73px; left:328px; top: 78px; }
#crown4 {width:99px; height:54px; left:268px; top: 151px; }
#crown5 {width:85px; height:44px; left:384px; top: 219px; }
#crown6 {width:86px; height:44px; left:488px; top: 176px; }
	
#crown1 a {height:100px;}
#crown2 a {height:68px;}
#crown3 a {height:73px;}
#crown4 a {height:54px;}
#crown5 a {height:44px;}
#crown6 a {height:44px;}

#crown1 a:hover {background: url("../images/panel4.gif") -86px -549px no-repeat; }
#crown2 a:hover {background: url("../images/panel4.gif") -190px -405px no-repeat; }
#crown3 a:hover {background: url("../images/panel4.gif") -328px -430px no-repeat; }
#crown4 a:hover {background: url("../images/panel4.gif") -268px -503px no-repeat; }
#crown5 a:hover {background: url("../images/panel4.gif") -384px -571px no-repeat; }
#crown6 a:hover {background: url("../images/panel4.gif") -488px -528px no-repeat; }




/* /////// CODA SLIDER CSS //////// */
		
		noscript p, noscript ol { color: #a00; font-size: 13px; line-height: 1.4em; text-align: left }
		noscript a { color: #a00; text-decoration: underline }
		noscript ol { margin-left: 25px; }
				
		img { border: 0 }
				
		/* These 2 lines specify style applied while slider is loading */
		.csw {width: 100%; height: 460px; background: #fff; overflow: scroll}
		.csw .loading {margin: 200px 0 300px 0; text-align: center}

		.stripViewer { /* This is the viewing window */
			position: relative;
			overflow: hidden; 
			border: 0; /* this is the border. should have the same value for the links */
			margin: auto;
			width: 666px; /* Also specified in  .stripViewer .panelContainer .panel  below */
			height: 352px;
			clear: both;
			background: #fff;
		}
		
		#info-page #resume .stripViewer {
			overflow-y:auto;
		}
		
		.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
			position: relative;
			left: 0; top: 0;
			width: 100%;
			list-style-type: none;
			/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
		}
		
		.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
			float:left;
			height: 100%;
			position: relative;
			width: 666px; /* Also specified in  .stripViewer  above */
		}


		.stripNav, .stripNavL, .stripNavR { /* This is the div to hold your nav (the UL generated at run time) */
			display:none
		}