body {
	margin: 0px;
	background-color:#FFFFFF; 
    background: url(../images/BodyBGPattern.jpg) repeat-x 0px 0px; 
    overflow: hidden;
}

.stage-container {
	position:relative;
	 margin: auto;
	 width: 100%;
	 height: 100%;
}


#stage {
	position: relative;
	margin: auto;
	width: 1200px;
	height: 675px;
	overflow: hidden;
	background-image: url(../images/Background-Stage-Large-Pattern.jpg);
	background-size: 1200px 675px;
}

.curtains-container {
	position: absolute;
	width: 100%;
	height: 100%;
}

.stage-content {
	position: absolute;
	top:0px;
	right:0px;
	width: 1200px;
	height: 675px;
	background-size: 1200px 675px;
}

#curtain-right {
	background-image: url(../images/Curtain-Right-Large.png);
	z-index: 98;
}

#curtain-left {
	background-image: url(../images/Curtain-Left-Large.png);
	z-index: 98;
}

#sidecurtain-right {
	background-image: url(../images/SideCurtain-Right-Large.png);
	z-index:1;
}

#sidecurtain-left {
	background-image: url(../images/SideCurtain-Left-Large.png);
	z-index:1;
}

#sky-bg {
	background-image: url(../images/skyBG-large.png);
	top: -750px;
	z-index: 0;
}


#sign_on_rope {
	background-image: url(../images/sign-on-rope-large.png);
	z-index: 99;	
}

#stage-sign {
	background-image: url(../images/Stage-Sign-Large.png);
}
	

#sign-text-image {
	background-image: url(../images/About-me-large-image.png);
}


#PriorExitNext {
	background-image: url(../images/PriorExitNext-large-image.png);
/*just to test spriteness try not showing first 33%*/

background-position: 75% 0%;
}


#sample-code {
	position:absolute;
	border: 6px ridge #FFFF99;
	background-color:#FFFFFF;
	display:none;
  height: 605px;
  width:auto;  
  top: 6px;
	-moz-box-shadow:    5px 0 18px  #181818; 
	-webkit-box-shadow: 5px 0 18px  #181818;
	box-shadow:         5px 0 18px  #181818;
	z-index: 99;
}

#sample-header {
	text-align: center;
  vertical-align: middle;
  line-height: 32px;
	height: 32px;
  color: #FFFF99;
  text-shadow: 2px 2px #252525;
  font-size: 18px;
  font-family:"Arial";
	background-color: #295200;
  cursor:pointer;
}

#scrollable-area {
 position:relative;
 height:573px;
 overflow-y: auto;
 overflow-x: hidden;
}

/*No Longer being used*/
/*#sample-document {*/
	/*height: 1305px;*/
	/*width: 450px;	*/
	/*background-image: url("../images/JS-AJAX-AGING-REPORT-large.png");*/
	/*background-repeat:no-repeat;*/
  /*background-size: 450px 1305px;*/
/*}*/



/*FOR INVISIBLE CLICKABLES*/
.stagesign-click {
  position: absolute;	
  z-index: -1;
}

.stagesign-click:hover{
  cursor:pointer;
}

.signroute {
	height:38px;	
	top:60%;
}


#sign-text {
	height:128px;
	width:249px;
	top:41%;
	left:10%;
	background-image: url(../images/About-me-large-click.png);
}

#cloud {
 position:absolute;
 display: none;	
 width:360px;
 height:119px;
 top:.5%;
 left:40%;
 background-image: url(../images/Cloud-CLICK-SLICE-large.png);	
 background-size: 360px 119px;
 z-index: 98;
}


#cloud:hover {
  background-image: url(../images/Cloud-CLICK-SLICE-HOVER-large.png);
  cursor:pointer;
}


#mysql-click:hover {
 background-image: url(../images/MYSQL-TEXT-SLICE-large.png);
 cursor:pointer;
}

#sql-click:hover {
	background-image: url(../images/SQL-TEXT-SLICE-large.png);
	cursor:pointer;
}

#frameworks-click:hover {
	background-image: url(../images/FRAMEWORKS-TEXT-SLICE-large.png);
	cursor:pointer;
}


#php-click:hover {
 background-image: url(../images/PHP-TEXT-SLICE-large.png);
 cursor:pointer;
}


#html-click:hover {
 background-image: url(../images/HTML-TEXT-SLICE-large.png);
 cursor:pointer;
}

#css-click:hover {
 background-image: url(../images/CSS-TEXT-SLICE-large.png);
 cursor:pointer;
}

#js-click:hover {
 background-image: url(../images/JS-TEXT-SLICE-large.png);
 cursor:pointer;
}

#ajax-click:hover {
 background-image: url(../images/AJAX-TEXT-SLICE-large.png);
 cursor:pointer;
}

#jquery-click:hover {
 background-image: url(../images/JQUERY-TEXT-SLICE-large.png);
 cursor:pointer;
}

#less-click:hover {
 background-image: url(../images/LESS-TEXT-SLICE-large.png);
 cursor:pointer;
}

#bootstrap-click:hover {
	background-image: url(../images/BOOTSTRAP-TEXT-SLICE-large.png);
	cursor:pointer;
}


.click-trans, .click-trans-2, .click-framework {
 position:absolute;	
 transition: all .3s ease-out;
 -moz-transition: all .3s ease-out;
 -o-transition: all .3s ease-out;
 -webkit-transition: all .3s ease-out;
 transition: all .3s ease-out;
 z-index:-1;
}

.click-trans:hover, .click-trans-2:hover {
  -webkit-transform: scale(1.05);
  -moz-transform:  scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);

}

/*I DON'T WANT IT TO SCALE UP SINCE IT DOESN'T LINE UP CORRECTLY*/
/*.click-framework:hover {*/
	/*-webkit-transform: scale(1.01);*/
	/*-moz-transform:  scale(1.01);*/
	/*-ms-transform: scale(1.01);*/
	/*-o-transform: scale(1.01);*/
	/*transform: scale(1.01);*/

/*}*/


#mysql-click {
 width:125px;
 height:73px;
 top:53.25%;
 left:57.2%;
 background-image: url(../images/MYSQL-CLICK-SLICE-large.png);	
 background-size: 125px 73px;
}


#sql-click {
	width:75px;
	height:55px;
	top:43.7%;
	left:56%;
	background-image: url(../images/SQL-CLICK-SLICE-large.png);
	background-size: 75px 55px;
}

#frameworks-click {
	width:386px;
	height:30px;
	top:32.3%;
	left:40.45%;
	background-image: url(../images/FRAMEWORKS-CLICK-SLICE-large.png);
	background-size: 386px 30px;
}


#php-click {
 width:79px;
 height:43px;
 top:54.2%;
 left:44.45%;
 background-image: url(../images/PHP-CLICK-SLICE-large.png);	
 background-size: 79px 43px;
}


#html-click {
 width:86px;
 height:28px;
 top:19.2%;
 left:53%;
 background-image: url(../images/HTML-CLICK-SLICE-large.png);	
 background-size: 86px 28px;
}

#css-click {
 width:64px;
 height:28px;
 top:25.75%;
 left:48%;
 background-image: url(../images/CSS-CLICK-SLICE-large.png);	
 background-size: 64px 28px;
}

#js-click {
 width:159px;
 height:32px;
 top:33.75%;
 left:51%;
 background-image: url(../images/JS-CLICK-SLICE-large.png);	
 background-size: 159px 32px;
}

#ajax-click {
 width:79px;
 height:24px;
 top:45%;
 left:47%;
 background-image: url(../images/AJAX-CLICK-SLICE-large.png);	
 background-size: 79px 24px;
}

#jquery-click {
 width:113px;
 height:31px;
 top:48.5%;
 left:58.75%;
 background-image: url(../images/JQUERY-CLICK-SLICE-large.png);	
 background-size: 113px 31px;
}

#less-click {
 width:142px;
 height:26px;
 top:54.75%;
 left:43.15%;
 background-image: url(../images/LESS-CLICK-SLICE-large.png);
 background-size: 142px 26px;
}

#bootstrap-click {
	width:175px;
	height:36px;
	top:56.5%;
	left:56.5%;
	background-image: url(../images/BOOTSTRAP-CLICK-SLICE-large.png);
	background-size: 175px 36px;
}



#sign-prev {
	width:90px;
	/*added today*/
	height: 38px;
	left:10%;
	background-image: url(../images/prev-act-large-click.png);
	background-size: 90px 38px;
}


.spotlight {
	display:none;
	z-index:0;
}

#sign-spotlight {
	background-image: url(../images/sign-spotlight-large.png);	
}

#me-center-spotlight {
	background-image: url(../images/me-center-spotlight-large.png);	
}



#sign-prev {
	width:90px;
	height: 38px;
	left:10%;
	background-image: url(../images/prev-act-large-click.png);
	background-size: 90px 38px;
}


#sign-next {
	width:94px;
	height: 38px;
	left:22.9%;
	background-image: url(../images/next-act-large-click.png);
	background-size: 94px 38px;
}


 /*END CLICKABLES*/

#us-map {
	background-image: url(../images/US-Map-Large.png);
  top: -750px;
	z-index: 0;
}

#resume {
	position: absolute;
	left: 393px;
	top: -750px;
	z-index: 9999;
}



.fade-ins {
	display: none;
	z-index: 0;
}

#mich-map {
	background-image: url(../images/Mich-Map-Large.png);
}


#us-map-pointer {
	background-image: url(../images/Born-and-raised.png);
}

#texas-map {
	background-image: url(../images/Texas-Map-large.png);
}

.fade-middle {
	display: none;
	z-index: 2;
}
#dev-tree-full {
	background-image: url(../images/WebDevTree-frontEnd-large.png);
}

#dev-tree-bare {
	background-image: url(../images/WebDevTree-backEnd-large.png);
}

#dev-tree-plain {
	background-image: url(../images/WebDevTree-plaintree-large.png);	
}

/*Not being use right now*/
/*#dev-tree-graphics {*/
	/*background-image: url(../images/WebDevTree-Graphics-large.png);	*/
/*}*/

#candy-heart {
	/*HAVE TWO VERSIONS OF CANDY HEART - ONE IN PINK AND ONE IN GREEN*/
	/*background-image: url(../images/Candy-Heart.png);*/
	background-image: url(../images/Candy-Heart-Green.png);
}



#stuff-i-love {
	background-image: url(../images/love-heart-text-large.png);
}

#family {
	background-image: url(../images/love-family-large.png);
}

#movie-clapper {
	background-image: url(../images/love-movies-large.png);
}

/*Note:  Replacing football with golf*/
#football {
	background-image: url(../images/love-nfl-large.png);
}


#golf {
	background-image: url(../images/love-golf-large.png);
}

#music {
	background-image: url(../images/love-music-large.png);
}


#moving-van {
	background-image: url(../images/moving-van-large.png);
	/*visibility:hidden;*/
	z-index: 5;
	left:-1200px;
}


.me {
	position: absolute;
	top: 30%;
	left: 45%;
	width: 207px;
	height: 377px;
	background-size: 207px 377px;
	z-index: 4;
}

#me-start {
	background-image: url(../images/Me-Large-with-bent-drop-shadow.png);
}

#me-blink {
	background-image: url(../images/My-eyes-closed-blink.png);
	visibility:hidden;
}

.graphics {
	position: absolute;
	top: 19%;
	width: 760px;
	height: 475px;
	background-size: 760px 475px;
}

#illustrator-blink {
	left: 33.5%;
  visibility: hidden;
	background-image: url(../images/Illustrator-Work-Sample-blink-large.png);
  z-index:7;
}

#illustrator-sample {
	display:none;
	left: 33.5%;
	background-image: url(../images/Illustrator-Work-Sample-large.png);
	z-index: 5;
}

#photoshop-sample {
	right: -800px;
	background-image: url(../images/Photoshop-Work-Sample-large.png);
	z-index: 6;
} 
 

#graphics-text {
	display:none;
	position:absolute;
  top: 10px;
  left: 34%;
  width:380px;
  height:134px;
	background-image: url(../images/Graphics-Text-Sprite-large.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
}

.leaves {
	display:none;
  position: absolute;
  top: 56.75%;
  left: 34%;
  width:516px;
  height:225px;
  z-index: 5;
	background-position: 0px 0px;
	background-repeat: no-repeat;
}	

#leaves-falling {
	background-image: url(../images/Leaves-Falling-Sprite-large.png);	
}

#leaves-falling-2 {
	background-image: url(../images/Leaves-Falling-2nd-Time-Sprite-large.png);	
}


/*Not being used right now*/
/*#leaves-falling-3 {*/
	/*background-image: url(../images/Leaves-Falling-Graphics-Sprite-large.png);	*/
/*}*/


#animated-bird-sign {
  position: absolute;
  top: -475px;
  left: 34%;
  width:516px;
  height:475px;
  /* NOTE:  THIS WORKED FINE AT 8 BUT NOW WITH MY NEW CLOUD I'M HAVING ISSUES TRY THIS AT 99*/
  z-index: 99;
  /*z-index: 8;*/
	background-image: url(../images/Bird-with-Banner-Sprite-FrontEnd-large.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
}	

.cowboy {
	position: absolute;
	top: 26%;
	left: 75%;
	width: 220px;
	height: 400px;
	background-size: 220px 400px;
}

#me-cowboy {
	background-image: url(../images/Me-Large-with-bent-drop-shadow-For-Cowboy-Outfit.png);
  display: none;
}

#me-cowboy-blink {
	background-image: url(../images/Me-cowboy-blink.png);
	visibility:hidden;
}


.clear-fix {
	clear: both;
	line-height: 1px;
}