body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #d9d9d9;
margin: 0;
padding: 0;
background: #000 url(../img/bg2.jpg) top center no-repeat;
}
a:link, a:visited, a:active {
color: #98c7d9;
text-decoration: none;
outline: none;
}
a:hover {
color: #a1d3e5;
}
ul, li, h1, h2, h3 {
margin:0;
padding:0;
text-align: left;
}
#header {
width: 966px;
margin: 65px auto 0px auto;
}
#header img {
float: left;
display: inline;
margin-left: 38px;
}
#mainmenu {
float: left;
margin-left: 38px;
}
#header ul {position: relative; top: 40px; width: 500px; height: 13px; }
#header ul li {height: 13px; position: absolute; top: 0px; background: url(../img/menu.gif) 0 0 no-repeat; display: block; list-style: none;}
#header ul a {height: 13px; display: block;}
#header ul #aboutme a, #header ul #aboutme {width: 68px;}
#header ul #interactive a, #header ul #interactive {width: 84px;}
#header ul #print a, #header ul #print {width: 124px;}
#header ul #resume a, #header ul #resume {width: 52px;}
#header ul a:hover {}
#header ul #aboutme {}
#header ul #interactive {left: 92px; background-position: -68px 0;}
#header ul #print {left: 200px; background-position: -152px 0;}
#header ul #resume {left: 348px; background-position: -276px 0;}

#header ul #aboutme a:hover {background: url(../img/menu.gif) 0px -13px no-repeat;}
#header ul #interactive a:hover {background: url(../img/menu.gif) -68px -13px no-repeat;}
#header ul #print a:hover {background: url(../img/menu.gif) -152px -13px no-repeat;}
#header ul #resume a:hover {background: url(../img/menu.gif) -276px -13px no-repeat;}

#aboutme.selected a, #aboutme.selected a:hover {background: url(../img/menu.gif) 0px -26px no-repeat !important;}
#interactive.selected a, #interactive.selected a:hover {background: url(../img/menu.gif) -68px -26px no-repeat !important;}
#print.selected a, #print.selected a:hover {background: url(../img/menu.gif) -152px -26px no-repeat !important;}
#resume.selected a, #resume.selected a:hover {background: url(../img/menu.gif) -276px -26px no-repeat !important;}

#header li span { display: none; }


#main {
width: 966px;
height: 450px;
overflow: hidden;
margin: 15px auto;
}
/* ---------- About Me Page Styles ---------- */
#welcome {
width: 966px;
height: 450px;
overflow: hidden;
margin: 15px auto;
background: transparent url(../img/welcome.png) top left no-repeat;
}
#welcomecenter {
width: 370px;
margin: 200px 0px 0px 288px;
padding: 15px 15px 5px 15px;
background: url(../img/50black.png);
}
#welcomecenter p{
margin: 0px 0px 10px 0px;
padding: 0px;
font-size: 14px;
line-height: 1.4em;
}
#welcomecenter em{
font-weight: bold;
font-style: normal;
}
#bio {
width: 654px;
height: 391px;
margin: 20px 0px 20px 20px;
padding: 5px 0px;
float: left;
display: inline;
overflow: hidden;
background: url(../img/bayarea.jpg) bottom right no-repeat;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
#biotext {
font-size: 12px;
line-height: 1.45em;
color: #ccc;
width: 215px;
height: 377px;
_height: 350px;
overflow: hidden;
margin: 20px 0px 20px 23px;
float: left;
display: inline;
padding: 15px 15px 10px 15px;
background-image: url(../img/10white.png);
}
#biotext span {
display: none;
}
#biotext img {
float: left;
margin: 5px 5px 0px 0px;
}
/* ---------- Project Page Styles ---------- */
#projdesc {
width: 215px;
height: 377px;
_height: 354px;
overflow: hidden;
margin: 20px 0px 20px 23px;
float: left;
display: inline;
padding: 15px 15px 10px 15px;
background-image: url(../img/10white.png);
}
#projdesc h1 {
color: #a5d867;
font-size: 26px;
line-height: 26px;
}
#projdesc h2 {
font-size: 13px;
font-weight: normal;
line-height: 1.4em;
}
#projdesc h2.first {
margin-top: 5px;
}
#projdesc h2 strong {
font-weight: bold;
color: #fff;
}
#projdesc p {
font-size: 12px;
line-height: 1.25em;
}
#projdesc em {
font-weight: bold;
font-style: normal;
}
#showcase {
width: 390px;
height: 392px;
_height: 386px;
margin: 20px 0px 20px 20px;
padding: 5px;
float: left;
display: inline;
background-image: url(../img/50black.png);
overflow: hidden;
}
#showcase h4 {
float: left;
margin: 0px;
padding: 0px;
color: #d9d9d9;
font-size: 10px;
text-transform: uppercase;
}

#tabset { float: right; }
#tabset ul { height: 12px; float: right; }
#tabset li { height: 12px; width: 14px; float: left; background: url(../img/btns.gif) 0 0 no-repeat; display: block; list-style: none; margin-left: 3px; font-size: 0px; line-height: 0px; }
#tabset li span { display: none; }
#tabset ul a { height: 12px; width: 14px; display: block; }
#tabset ul #btn1 {  }
#tabset ul #btn2 { background-position: -14px 0; }
#tabset ul #btn3 { background-position: -28px 0; }
#tabset ul #btn4 { background-position: -42px 0; }
#tabset ul #btn5 { background-position: -56px 0; }
#tabset ul #btn6 { background-position: -70px 0; }
#tabset ul #btn7 { background-position: -84px 0; }
#tabset ul #nextbtn { background-image: url(../img/next.gif); width: 8px; }
#tabset ul #prevbtn { background-image: url(../img/prev.gif); width: 8px; }

#tabset ul #btn1 a:hover { background: url(../img/btns.gif) 0px -12px no-repeat; }
#tabset ul #btn2 a:hover { background: url(../img/btns.gif) -14px -12px no-repeat; }
#tabset ul #btn3 a:hover { background: url(../img/btns.gif) -28px -12px no-repeat; }
#tabset ul #btn4 a:hover { background: url(../img/btns.gif) -42px -12px no-repeat; }
#tabset ul #btn5 a:hover { background: url(../img/btns.gif) -56px -12px no-repeat; }
#tabset ul #btn6 a:hover { background: url(../img/btns.gif) -70px -12px no-repeat;; }
#tabset ul #btn7 a:hover { background: url(../img/btns.gif) -84px -12px no-repeat; }

#btn1.selected a, #btn1.selected a:hover { background: url(../img/btns.gif) 0px -24px no-repeat !important; }
#btn2.selected a, #btn2.selected a:hover { background: url(../img/btns.gif) -14px -24px no-repeat !important; }
#btn3.selected a, #btn3.selected a:hover { background: url(../img/btns.gif) -28px -24px no-repeat !important; }
#btn4.selected a, #btn4.selected a:hover { background: url(../img/btns.gif) -42px -24px no-repeat !important; }
#btn5.selected a, #btn5.selected a:hover { background: url(../img/btns.gif) -56px -24px no-repeat !important; }
#btn6.selected a, #btn6.selected a:hover { background: url(../img/btns.gif) -70px -24px no-repeat !important; }
#btn7.selected a, #btn7.selected a:hover { background: url(../img/btns.gif) -84px -24px no-repeat !important; }

#projmenu {
width: 235px;
margin: 20px 0px 20px 20px;
float: left;
display: inline;
}
#projmenu ul {
list-style-type: none;
}
#projmenu li a {
width: 225px;
height: 30px;
_height: 20px;
margin-bottom: 5px;
padding: 5px;
font-size: 10px;
text-transform: uppercase;
background-image: url(../img/5white.png);
color: #d9d9d9;
display: block;
overflow: hidden;
}
#projmenu li .title {
font-size: 14px;
line-height: 16px;
text-transform: none;
font-weight: normal;
color: #87bacc;
}
#projmenu li img {
float: left;
display: inline;
margin-right: 5px;
height: 30px;
width: 80px;
border: none;
opacity: 0.65;
filter: alpha(opacity = 65);
}
#projmenu li a:hover {
background-image: url(../img/10white.png);
}
#projmenu li a:hover .title {
color: #b4e1f1;
}
#projmenu li a:hover img {
opacity: 1.0;
filter: alpha(opacity = 100);
}
#projmenu .selected a, #projmenu .selected a:hover {
background-image: url(../img/10white.png);
border-bottom: 1px solid #8d947d;
}
#projmenu .selected a .title, #projmenu .selected a:hover .title  {
color: #a5d867;
font-weight: bold;
}
#projmenu .selected a img, #projmenu .selected a:hover img {
opacity: 1.0;
filter: alpha(opacity = 100);
}
/* ---------- Resume Page Styles ---------- */
#skills {
width: 215px;
height: 378px;
_height: 354px;
overflow: hidden;
margin: 20px 0px 20px 23px;
float: left;
display: inline;
padding: 15px 15px 10px 15px;
background-image: url(../img/10white.png);
font-size: 11px;
}
#skills strong {
color: #fff;
}
#skills img {
float: left;
display: inline;
margin: 2px 5px 0px 0px;
}
#skills p {
padding: 0px;
margin: 0px 0px 7px 0px;
}
#skills p.last {
margin: 0px 0px 15px 0px;
}
#skills h1, #work1 h1, #work2 h1 {
color: #a5d867;
font-size: 18px;
line-height: 18px;
padding: 0px;
margin: 0px 0px 7px 0px;
}
#contact {
font-size: 13px;
color: #fff;
font-weight: bold;
padding: 0px;
margin: 0px 0px 15px 0px;
line-height: 1.4em;
}
#download {
font-size: 13px;
font-weight: bold;
margin: 0px;
padding: 0px;
line-height: 1.4em;
}
#work1 {
width: 318px;
height: 400px;
margin: 20px 0px 20px 20px;
padding: 15px 5px 5px 0px;
float: left;
display: inline;
font-size: 12px;
}
#work2 {
width: 298px;
height: 400px;
margin: 20px 0px 20px 20px;
padding: 15px 5px 5px 5px;
float: left;
display: inline;
font-size: 12px;
}
#work1 img {
float: left;
display: inline;
clear: both;
margin: 3px 8px 5px 0px;
}
.resthumb a {
width: 80px;
height: 30px;
float: left;
display: inline;
clear: both;
margin: 3px 8px 5px 0px;
border: 1px solid #333;
}
#work1 li {
xmargin-bottom: 5px;
clear: both;
}
#work1 h2, #work2 h2 {
color: #fff;
font-size: 13px;
line-height: 16px;
}
#work1 h3, #work2 h3 {
color: #fff;
font-size: 13px;
line-height: 16px;
}
#work1 ul, #work2 ul {
list-style-type: none;
margin: 3px 0px 15px 0px;
}
#footer {
margin: 0 auto;
padding-bottom: 20px;
width: 960px;
font-size: 10px;
font-weight: bold;
opacity: 0.2;
filter: alpha(opacity=20);
color: #fff;
text-align: right;
vertical-align: middle;
}
#footer img {
float: right;
margin-left: 10px;
}
.clear {
clear: both;
}
/* Carousel Styles */
.carousel-component { 
	position:relative;
	overflow:hidden; 
	display:none; 
}			
.carousel-component ul.carousel-list { 
	width:10000000px;
	position:relative;
	z-index:1; 
}
.carousel-component .carousel-list li { 
	float:left;
	list-style:none;
	overflow:hidden;    
}
.carousel-component .carousel-clip-region { 
	overflow:hidden;
	margin:0px auto;
	position:relative; 
}
.carousel-component { 
    padding:0px;
    margin:0px 0px 10px 0px;
    background-color: white;
	color: #ccc;
    clear:both;
}
.carousel-component ul.carousel-list { 
	margin:0px;
	padding:0px;
	line-height:0px;
	text-align:left;
    background-color: #000;
}
.carousel-component .carousel-list li { 
    text-align:left;
    margin:0px;
	padding: 0px;
    width:390px;
	height: 368px;
	overflow: hidden; 
	border: 1px solid black;
	background-color: #000;
}
.carousel-component .carousel-clip-region { 
    padding:0px;
    margin:0px;
}