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

#container {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 298px; /* Set to width of banner minus 2 for border */
	height: 73px; /* Set to height of banner minus 2 for border */
	overflow: hidden;
	border: 1px solid black;
	background-color: #ffffff;
}


/* You can include a REFERENCE.jpg element as an overlay to ensure things are aligned properly with the comp */
/*#reference {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 728px;
	height: 90px;
	background-image: url(REFERENCE.jpg);
	opacity: 0.35 !important;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";
	display: none;
}*/


/* By default, all elements will fade in and out and are absolutely positioned.  You will need to position and size elements individually.  Elements can be made the full size of the banner by applying the .fullsize class. */ 
#container > * {
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	position: absolute;
	transition: opacity 500ms;
	-webkit-transition: opacity 500ms;	
}
	
	/* Below are styles to support graphics on 5 scenes.  Add as many as necessary for your banner. */
	/* To make an element appear on a given scene simply give it that class. */
	#container.scene1 *.scene1 {
		opacity: 1;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
	}
	#container.scene2 *.scene2 {
		opacity: 1;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
	}
	#container.scene3 *.scene3 {
		opacity: 1;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
	}
	#container.scene4 *.scene4 {
		opacity: 1;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
	}
	#container.scene5 *.scene5 {
		opacity: 1;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
	}
	#container.scene6 *.scene6 {
		opacity: 1;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
	}
	#container.scene7 *.scene7 {
		opacity: 1;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
	}
	#container.scene8 *.scene8 {
		opacity: 1;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
	}
	#container.scene9 *.scene9 {
		opacity: 1;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
	}
	#container.scene10 *.scene10 {
		opacity: 1;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
	}



/* Apply this class to any element that needs to fill the banner, such as background graphics. */
.fullsize {
	width: 100%;
	height: 100%;
}


/* -----===== Customize your page elements below =====----- */
/* Style your items by selecting them like this:
	#container #yourItem

To fade your items in on the appropriate scene select it with
	#container.scene1 #yourItem
Set opacity to 1 and add a transition-delay of 250ms for best results.

If you need to support IE8 use: 
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
	NOTE: if this gives you trouble you can use:
	filter: alpha(opacity=100);
	however, that causes dark outlines to appear around transparent PNGs.  See note below.
	
	Also note that you may have to put additional opacity settings on some elements for them to properly work in IE8.
	
	Transparent PNGs that have opacity filters applied to them will need to have the following rules added to look good in IE8:
	background-color: white; //or transparent
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; // Visible scenes only


For more complicated transitions, such as appearing from off screen or scaling up from 0 set a default state with 
	#container #yourItem
and then use the appropriate CSS transition on the scene where you want it to appear.  Adjust the transition delay to have elements appear after other elements.

For builds and animations that are more complicated than CSS transitions can handle define a javascript function in your "build" for the appropriate scene and then create the animation with Javascript.
*/

/* Define the size of the overall clickTag */
#container #ClickTag-1 {
	width: 300px;
	height: 75px;
	position: absolute;
	top: 0px;
	left: 0px;
	cursor: pointer;
}


#container.scene10 #starbucks {
	transform: scale(.25) translate(-210px, -120px);
	opacity: 0;
	transition: all 1s ease-in-out;
}



/* Scroll bar styles */
::-webkit-scrollbar {
  width: 9px;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #9f9f9f;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  height: 20px;
  border: 1px solid #9f9f9f;
  background-color: #e8e8e8;
}