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

body {margin: 0px; background: url(../images/siteBG.jpg) repeat-x top left #353020; font-family: Helvetica, Arial, sans-serif; font-size: 14px;}
img {border: none;}
a {cursor: hand; cursor: pointer; border: none;}
a:focus {outline: none;}

.on {visibility: visible;}
.off {visibility: hidden;}

#main {width: 940px; height: 820px; margin: 0px auto; background: url(../images/MainBG.jpg) no-repeat top left transparent; position: relative;}
#main #intro {margin: 18px 32px 0 0; float: right;}
#main h1#myWork {width: 500px; height: 76px; margin: -50px 0 0 83px; background: transparent url(../images/PortfolioH1.png) no-repeat top left; text-indent: -10000px; float: left;}
#main #resumeBttn {width: 182px; height: 46px; margin: -15px 94px 0 0; text-indent: -10000px; background-image: url(../images/ResumeBttn.png); background-position: 0 0; float: right; outline: none; cursor: pointer; cursor: hand;}
#main #resumeBttn:hover {background-position: 0 -46px;}
#main #projectBox {position: absolute; top: 175px; left: 44px;}

#nextProj {width: 102px; height: 57px; padding-left: 6px; background: url(../images/NextProj.png) no-repeat; position: absolute; top: 25px; left: 74px;}
#nextProj.middle {background-position: 0px -57px;}
#nextProj.right {background-position: 0px 0px;}
#nextProj.left {background-position: 0px -114px;}
#nextProj a {width: 44px; height: 43px; display: inline-block;}

#zoomProj {width: 62px; height: 72px; background: url(../images/Zoom.png) no-repeat; position: absolute; top: 221px; left: 94px;}
#zoomProj.offButton {background-position: 0px 0px;}
#zoomProj.onButton {background-position: -64px 0px;}
#zoomProj a {width: 62px; height: 72px; display: inline-block;}

#launch {width: 112px; height: 34px; position: absolute; top: 117px; left: 69px;}
#launch.nolink {background: url(../images/Launch.png) no-repeat;}
#launch a {width: 112px; height: 34px; background-image: url(../images/Launch.png); background-position: 0 -34px; background-repeat: no-repeat; display: block;}
#launch a:active {background-position: 0 -68px;}

#loading {width: 24px; height: 24px; margin: 140px; padding: 3px; background-color: #000; opacity: .6; filter:alpha(opacity=60); position: absolute; top: 0px; left: 0px; z-index: 10; -moz-border-radius: 5px; -webkit-border-radius: 5px; overflow: visible;}
#loading img {opacity: 1; filter:alpha(opacity=100);}
#project {width: 310px; height: 310px; position: absolute; top: 13px; left: 231px; z-index: 1;}
#project img {position: absolute;}
#loading img {position: relative;}
.normalPos {width: 260px; height: 260px; top: 25px; left: 25px; z-index: 6;}
.leftPos {width: 0px; height: 260px; top: 25px; left: 25px; z-index: 6;}
.leftHalfPos {width: 155px; height: 260px; top: 25px; left: 0px; z-index: 6;}
.rightPos {width: 0px; height: 260px; top: 25px; left: 280px; z-index: 6;}
.rightHalfPos {width: 155px; height: 260px; top: 25px; left: 155px; z-index: 6;}
.upPos {width: 260px; height: 0px; top: 25px; left: 25px; z-index: 6;}
.downPos {width: 260px; height: 0px; top: 280px; left: 25px; z-index: 6;}
.newPos {width: 0px; height: 0px; top: 25px; left: 25px; z-index: 6;}

#shadow1, #shadow2 {position: absolute; background-color: #000; z-index: 10;}
.shadowL {width: 0px; height: 260px; top: 10px; left: 10px; opacity: .6; filter:alpha(opacity=60);}
.shadowR {width: 0px; height: 260px; top: 10px; left: 270px; opacity: .3; filter:alpha(opacity=30);}
.shadowO {width: 260px; height: 260px; top: 10px; left: 10px; opacity: 0; filter:alpha(opacity=0);}
.shadowU {width: 260px; height: 0px; top: 10px; left: 10px; opacity: 0; filter:alpha(opacity=0);}
.shadowD {width: 260px; height: 0px; top: 270px; left: 10px; opacity: .6; filter:alpha(opacity=60);}

#toggleView {width: 56px; height: 98px; background: url(../images/MoreViews.png) no-repeat; position: absolute; top: 33px; left: 560px;}
#toggleView.middle {background-position: -56px 0px;}
#toggleView.up {background-position: -112px 0px;}
#toggleView.down {background-position: 0px 0px;}
#toggleView a {width: 35px; height: 42px; margin-left: 15px; display: inline-block;}

#moreViews {width: 23px; height: 136px; position: absolute; top: 170px; left: 582px;}
#moreViews ul {margin: 0; padding: 0; list-style: none;}
#moreViews li.lit {background: url(../images/BulbLit.png) no-repeat;}
#moreViews li.unlit {background: url(../images/BulbUnlit.png) no-repeat;}
#moreViews ul li a, #moreViews li {width: 23px; height: 22px; display: block;}

#projDetails {width: 167px; height: 500px; color: #383834; position: absolute; top: 7px; left: 634px;}
#projDetails h2 {width: 148px; height: 36px; margin: 0 0 3px; padding: 6px 10px; background: url(../images/ProjNameBG.png) no-repeat; font: bold 14px/18px "Tarzana Wide OT", Helvetica, Arial, sans-serif;}
#projDetails ul {margin: 0; padding: 0; list-style: none;}
#projDetails li {width: 130px; height: 25px; margin: 0 0 3px; padding: 5px 6px 5px 32px; font: 12px/12px "Baskerville MT", "Baskerville", Georgia, serif; display: block;}
#projDetails li.y {background: url(../images/PortListItemBG.png) 0px 0px no-repeat;}
#projDetails li.n {background: url(../images/PortListItemBG.png) 0px -35px no-repeat; color: #a8a899;}

#contactBox {width: 290px; height: 282px; padding: 12px 32px; font-family: "Baskerville MT", "Baskerville", Georgia, serif; background: url(../images/contactBG.png) no-repeat; position: absolute; top: 496px; left: 72px;}
#contactBox h2 {margin: 0 0 6px 0; background: url(../images/ContactH2.png) no-repeat; text-indent: -1000px;}
#contactBox p {margin: 0 0 2px 12px; color: #584c1a; font-size: 20px; line-height: 24px;}
.contactType {font-weight: bold; font-style: italic;}
#contactBox a {color: #584c1a;}
#contactBox .textfield {width: 260px; margin: 0 0 4px 12px; padding: 6px 9px; font-family: Helvetica, Arial, sans-serif; font-size: 16px; color: #b1a882; background: url(../images/InputFieldBG.png) no-repeat; border: none;}
textarea {width: 260px; height: 67px; margin: 0 0 0 12px; padding: 5px 9px; font-family: Helvetica, Arial, sans-serif; font-size: 16px; color: #b1a882; background: url(../images/TextAreaBG.png); border: none;}
#contactBox .data {color: #584c1a;}
#contactBox .error {color: #b32121;}
#contactBox #Submit {width: 102px; height: 43px; margin: -2px 0 0 180px; text-indent: -10000px; border: none; background-color: transparent; background-image: url(../images/SendBtn.png); background-position: 0 0; outline: none; cursor: pointer; cursor: hand;}
#contactBox #Submit:hover {background-position: 0 -43px;}
#contactForm p {font-size: 16px; line-height: 20px;}

#appsAndLangs 			{width: 435px; position: absolute; top: 542px; left: 427px;}
#appsAndLangs h2 		{margin: 0 0 10px 0; height: 60px; background: url(../images/AppsLangsH2.png) no-repeat; text-indent: -10000px;}
#appsAndLangs ul 		{margin: 0; padding: 19px 18px 9px; list-style: none; float: left;}
#appsAndLangs li 		{margin: 0 4px; height: 40px; background-image: url(../images/AppLangsIcons.png); background-repeat: no-repeat; text-indent: -10000px; display: block; float: left;}
#apps 					{background: url(../images/AppsBG.png);}
#langs					{margin: 10px 0 0; background: url(../images/LangsBG.png);}

#apps #ps		{width: 40px; background-position: 0 0;}
#apps #ai		{width: 40px; background-position: -40px 0;}
#apps #id		{width: 40px; background-position: -80px 0;}
#apps #dw		{width: 40px; background-position: -120px 0;}
#apps #fl		{width: 40px; background-position: -160px 0;}
#apps #vs		{width: 54px; background-position: -200px 0;}
#apps #sql		{width: 40px; background-position: -254px 0;}
#apps #fw		{width: 40px; background-position: -294px 0;}

#langs #xhtml	{width: 68px; background-position: 0 -40px;}
#langs #css		{width: 48px; background-position: -68px -40px;}
#langs #php		{width: 48px; background-position: -116px -40px;}
#langs #js		{width: 40px; background-position: -164px -40px;}
#langs #sql		{width: 48px; background-position: -204px -40px;}
#langs #asp		{width: 48px; background-position: -252px -40px;}
#langs #as		{width: 40px; background-position: -300px -40px;}


.uncovered {display: block; visibility: visible;}
#resume {width: 800px; margin: 0 auto; font-family: "Baskerville MT", "Baskerville", Georgia, serif; font-size: 13px; line-height: 19px; background: url(../images/ResumeTopBG.png) no-repeat;}
#download {width: 164px; height: 35px; margin-top: -44px; background-image: url(../images/DownloadPDF.png); background-repeat: no-repeat; text-indent: -10000px; float: right;}
#download:hover	{background-position: 0 -35px;}
#resume #text {width: 720px; padding: 40px 40px 50px; background: url(../images/ResumeBottomBG.png) no-repeat bottom center #f6f3e6;}
#resume h2 {width: 800px; height: 68px; margin: 0px; background: url(../images/ResumeH2.png) no-repeat; text-indent: -1000px;}
#resume h3 {margin: 24px 0 8px; font-family: "Tarzana Wide OT", Helvetica, Arial, sans-serif; font-size: 24px; font-style: italic; font-weight: normal; color: #768100;}
#resume h3:first-child {margin-top: 0}
#resume h4 {margin: 16px 0 2px; font: bold 13px/16px "Tarzana Wide OT", Helvetica, Arial, sans-serif; color: #333;}
#resume h5 {margin: 0 0 4px; font: italic 13px/16px "Baskerville MT", "Baskerville", Georgia, serif; color: #6b6653;}
#resume p {margin: 0 0 6px;}
#resume ul {margin: 0 0 6px 10px; padding-left: 10px; list-style: outside;}
#textbottom {width: 800px; height: 42px; margin-bottom: 40px; background: url(../images/ResumeBottomBG.png) no-repeat;}

#tooltip		{width: 138px; height: 68px; padding-top: 8px; text-align: center; color: #fff; font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-style: italic; display: none; background-image: url(../images/tooltipBG.png); background-repeat: no-repeat;}
.tt1			{background-position: 0 0;}
.tt2			{background-position: 0 -75px;}
.tt3			{background-position: 0 -150px;}
.tt4			{background-position: 0 -225px;}