@charset "utf-8";

div, h1, h2, h3, h4, h5, h6, p, pre, span, ul, ol, li, img {
	padding: 0;
	margin: 0;
}
html, body {
	height: 100%; /* needed for vertical alignment */
	padding: 0;
	margin: 0;
}
body {
	background-image: url(../_images/backgrounds/background002.jpg);
	background-repeat: repeat;
	background-attachment: fixed;
	color: #333;
	text-align: center;
	font-family: Georgia, Arial, sans-serif;
	font-size: 100%;
}


/* generic panel styles ------------------------------------ */

a:link, a:visited {
	text-decoration: none;
	color: #0099ff;
	padding: 3px;
}
a:hover, a:active {
	color: #FFF;
	background-color: #0099ff;
	padding: 3px;
}
a:focus {
	outline: 0;
}
.panelContainer {
	height: auto;
	width: 800px;
	position: relative;
	margin: 0 auto 0 auto; /* horizontal alignment */
	padding: 30px 150px 66px 0; /* 150px padding-right offset to give cushion from side navigation */
	clear: both;
	font-size: 0.75em;
}
.index {
	padding-right: 0;
	width: 500px;	
}
.panelHeader {
	background-image: url(../_images/backgrounds/panelHeader001.png);
	background-repeat: no-repeat;
	text-align: left;
	position: relative;
	height: 70px;
	line-height: 1.75em;
}
.panelContent {
	background-color: #FFF;
	height: auto;
	line-height: 1.75em;
	text-align: left;
	padding: 0 20px 20px 20px;
	margin-top: 0;
}
.panelContent ul {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}
.panelContent li {
	display: block;
	width: 760px;
	height: auto;
	padding: 0;
	margin-bottom: 40px;
}
.js .panelContent li {
	overflow: hidden;
	cursor: pointer;
}
.js .panelContent li.active {
	cursor: default;
}
.panelContent hr {
	height: 1px;
	border: none;
	border-top: 1px dashed #333;
	margin-bottom: 5px;
	margin-top: 5px;
}
.panelContentPad {
	padding-left: 3px;
}
.panelContentMarg {
	margin-bottom: 30px;
}
.subHeader1 {
	display: block;
	height: 24px;
	padding-left: 3px;
	border: 1px solid #999;
	margin-bottom: 20px;
	background-color: #999;
	background-image: url(../_images/backgrounds/headerBg.png);
	background-repeat: repeat;
	color: #fff;
	font-weight: normal;
	font-size: 100%;
	line-height: 2em;	
}
.js .subHeader1.accordion {
	padding-left: 24px;
}
.js .subHeader1:hover {
	border: 1px solid #0099ff;
	background-color: #0099ff;
	background-image: none;
	color: #fff;
}
.js .active .subHeader1 {
	border: 1px solid #999;
	background-color: #999;
	background-image: url(../_images/backgrounds/headerBg.png);
	color: #fff;	
}
.js .active .subHeader1:hover {
	border: 1px solid #999;
	background-color: #999;	
}
.arrow {
	position: absolute;
	top: 6px;
	left: 6px;
	width: 14px;
	height: 14px;
	background-image: url(../_images/buttons/arrow.png);
	background-repeat: no-repeat;
	background-position: top left;
}
.active .arrow {
	background-position: bottom left;
}
.subHeader2 {
	font-weight: normal;
	font-size: 100%;
}
li.lastPane {
	margin-bottom: 0;
}
.thumbs {
	line-height: 0;
	font-size: 0;
}
.thumbs img {
	padding: 0;	
	border: 1px solid #c9e9ff;
	margin-top: 6px;
}
.js .thumbs img {
	margin-top: 0;
}
.js .thumbs img.activeThumb {
	border-color: #0099ff;
}
.thumbs img:hover {
	border-color: #0099ff;
}
.thumbs a {
	margin-right: 5px;
	padding: 0;
}
.thumbs a:hover, .thumbs a:active {
	background-color: transparent;
}
a.lastThumb {
	margin-right: 0;
}
.thumbBg {
	margin-top: 6px;
	background-color: #000;
	display: inline-block;
}
.valid {
	position: fixed;
	right: 80px;
	text-align: right;
}
.valid a:hover, .valid a:active {
	background-color: transparent;
}
.valid img {
	border: none;
}
.v1 {
	bottom: 92px;
}
.v2 {
	bottom: 53px;	
}


/* home page ---------- */

#mainContent {
	height: 300px;
	width: 500px;
	background-image: url(../_images/backgrounds/centerBlock001.png);
	background-repeat: no-repeat;
}


/* home page buttons -------------------------------------------- */

#mainLinks {
	position: relative;
	top: 125px;
	width: 145px;
	margin-right: auto;
	margin-left: auto;
}
#mainLinks li {
	list-style-type: none;
}
#mainLinks a {
	padding: 0 3px 0 3px;
	display: block;
	height: 24px;
	width: 145px;
	background-repeat: no-repeat;
	background-position: 3px 0px;
}
#profileMainBtn {
	background-image: url(../_images/buttons/profileMainBtn.png);
}
#portfolioMainBtn {
	background-image: url(../_images/buttons/portfolioMainBtn.png);
}
#resumeMainBtn {
	background-image: url(../_images/buttons/resumeMainBtn.png);
}
#blogMainBtn {
	background-image: url(../_images/buttons/blogMainBtn.png);
}


/* side navigation styles -------------------------------------- */

#sideNav {
	position: fixed;
	top: 30px;
	right: 20px;
	float: right;
	background-image: url(../_images/backgrounds/navBg.png);
	background-repeat: repeat;
	z-index: 1;
}
#sideNav li {
	list-style-type: none;
}
#sideNav a {
	padding: 0 /*3px 0 3px*/;
	display: block;
	height: 24px;
	width: 151px;
	background-repeat: no-repeat;
	background-position: 0 0;
}
#sideNav a.current {
	background-position: 0 -24px;
	cursor: default;
}
#sideNav a.current:hover, #sideNav a.current:active {
	background-color: transparent;
}
#homeBtn {
	background-image: url(../_images/buttons/homeNavBtn.png);
}
#profileBtn {
	background-image: url(../_images/buttons/profileNavBtn.png);
}
#portfolioBtn {
	background-image: url(../_images/buttons/portfolioNavBtn.png);
}
#resumeBtn {
	background-image: url(../_images/buttons/resumeNavBtn.png);
}
#blogBtn {
	background-image: url(../_images/buttons/blogNavBtn.png);
}


/* footer styles ----------------------------------------------- */

#footer {
	background-color: #333;
	background-repeat: repeat;
	height: 36px;
	width: 100%;
	position: fixed;
	bottom: 0px;
	z-index: 10;
}
#footer p {
	font-size: 0.75em;
	color: #FFF;
	position: relative;
	bottom: 8px;
	white-space: nowrap;
}
span.footerPadding {
	padding-right: 16px;
	padding-left: 16px;
	margin-bottom: 6px;
}
#footer img {
	vertical-align: -30%;
}
#buttonLinks a {
	height: 24px;
	width: 24px;
	display: inline-block;
	background-color: transparent;
	padding: 0px;
	margin-left: 3px;
	margin-top: 7px;
	position: relative;
	top: 7px;
}
#buttonLinks a:link, #buttonLinks a:visited {
	background-position: left top;
}
#buttonLinks a:hover, #buttonLinks a:active {
	background-position: left bottom;
}
a#twitter {
	background-image: url(../_images/buttons/twitterBtn.png);
	background-repeat: no-repeat;
}
a#linkedin {
	background-image:url(../_images/buttons/linkedinBtn.png);
	background-repeat: no-repeat;
}
a#flickr {
	background-image:url(../_images/buttons/flickrBtn.png);
	background-repeat: no-repeat;
}
a#rss {
	background-image:url(../_images/buttons/rssBtn.png);
	background-repeat: no-repeat;
}


/* profile page content height ------------ */

#profileWrapper {
	height: 870px;	/* gives height to whitespace within div.panelContent (#profileContainer height - .panelHeader height) */
}
.js #profileWrapper {
	height: 446px;	/* gives height to whitespace within div.panelContent (#profileContainer height - .panelHeader height) */
}


/* profile page accordion [kwick plug-in] -------------------- */

#profileAccordion {
	position: relative;
	float: left;
	padding: 0;
	margin: 0;
	list-style: none;
}
#profileAccordion li {
	display: block;
	overflow: hidden;
	padding: 0;
	width: 370px;
	margin-bottom: 50px;
}
.js #profileAccordion li {
	height: 148px;
	margin-bottom: 0;
	cursor: pointer;
}
.js #profileAccordion li.active {
	cursor: default;
}


/* profile page image gallery -------------------- */

div#photoGallery {
	position: relative;
	float: right;
	width: 370px;
	white-space: nowrap;
}
p#caption {
	height: 18px;
	width: 367px;
	padding-left: 3px;
	background-image: url(../_images/backgrounds/captionBg.png);
	z-index: 2;
	position: absolute;
	top: 352px;
	color: #fff;
	font-size: 0.85em;
	line-height: 1.85em;
}



/* portfolio page styles -------------------------------------- */

.webProject {
	position: relative;
	margin: 30px 0 90px 0;
}
.webProject.lastItem {
	margin-bottom: 0px;
}
.webProjectDesc {
	position: absolute;
	top: 0px;
	left: 435px;
	width: 300px;
	height: 349px;
	padding: 0 0 0 10px;
}


/* resume page styles ----------------------------------------- */

ul.resumeDesc {
	margin-bottom: 60px;

}
ul.resumeDesc.lastItem {
	margin-bottom: 0;
}
ul.resumeDesc li {
	padding: 0px 0px 0px 3px;
	margin: 0px;
}
p#contact1 {
	position: absolute;
	left: 330px;
	top: 12px;
}
p#contact2 {
	position: absolute;
	left: 587px;
	top: 12px;
}

.icon {
	vertical-align: middle;
	padding-bottom: 10px;
	padding-top: 10px;
	padding-right: 2px;
}
#resumeFooter {
	position: relative;
	top: 10px;
}