@charset "UTF-8";

/* CSS Document */
body{
	margin : 0;
}

#container{
	/*Outter most container that could be considered the "Stage"*/
	position : absolute;

	overflow : hidden;
	height   : 250px;
	width    : 300px;

	cursor   : pointer;
}

#content{
	/*Foreground Container for Content*/
	position : absolute;

	height   : 100%;
	width    : 100%;
	margin   : 1px;
}

#Border{
	position : absolute;
	top      : -1px;
	left     : -1px;

	height   : 248px;
	width    : 298px;

	border   : solid #000000 1px;
}

#Frame1, #Frame2, #Frame3, #Frame4{
	position : absolute;

	height   : 100%;
	width    : 100%;

	opacity  : 0;
}

/*Utilities*/
.Absolute-Center {
	/*Centers this element within a div*/
	position  : absolute;
	top       : 50%;
	left      : 50%;

	-ms-transform: translate(-50%, -50%); /* IE 9 */
    -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
	transform : translate(-50%, -50%);
}


/*CTA Elements*/

#CTA {
    position: absolute;
    left: 52px;
    top: 223px;
    cursor: pointer;
	visibility: hidden;
}

#CTA_OFF {
    position: absolute;
    width: 196px;
    height: 27px;
    background-image: url(../images/CTA_OFF.png);
    background-repeat: no-repeat;
}

#CTA_ON {
    width: 196px;
    height: 27px;
    background-image: url(../images/CTA_ON.png);
    background-repeat: no-repeat;
}
/*Non-Copy Elements*/
#BG{
	position          : absolute;
	top               : 0px;
	left              : 0px;

	width             : 300px;
	height            : 250px;

	background-image  : url(../images/BG.jpg);
	background-repeat : no-repeat;
}

#BG-Colour{
	position          : absolute;
	top               : 0px;
	left              : 0px;

	height            : 100%;
	width             : 100%;

	background-color  : #ffffff;
	background-repeat : no-repeat;
}


#OrangeBG{
	position          : absolute;
	top               : 0px;
	left              : 0px;

	width            : 300px;
	height           : 250px;

	background-image  : url(../images/Orange-BG.jpg);
	background-repeat : no-repeat;
}


#Brand_Logo{
	position          : absolute;
	top               : 10px;
	left              : 9px;

	width             : 112px;
	height            : 15px;

	background-image  : url(../images/Brand_Logo.png);
	background-repeat : no-repeat;
}

#Jelly {
	position          : absolute;
	top               : 132px;
	left              : 0px;

	width            : 300px;
	height           : 121px;

	background-image  : url(../images/Jelly.png);
	background-repeat : no-repeat;
}

#fire {
	position          : absolute;
	top               : -40px;
	left              : 80px;

	width             : 128px;
	height            : 128px;

	background-image  : url(../images/Fire.gif);
	background-repeat : no-repeat;
}


#Copy1,
#Copy2,
#Copy3,
#Copy4 {
    position: absolute;
	width:100%
}


#Copy1 {
    top: 0px;
    right: 0px;
}

#Copy2 {
    top: 0px;
    right: 0px;
}

#Copy3 {
    top: 0px;
    right: 0px;
}

#Copy4 {
    top: 0px;
    right: 0px;
}

#Copy1 > div,
#Copy2 > div,
#Copy3 > div,
#Copy4 > div {
    /*position: relative;*/
    background-repeat: no-repeat;
    /*Artificial Line height*/
    /*Centers Images for their respective lines*/
    display: table;
    margin: 0 auto;
}

#Copy1_1 {
	position: absolute;
	left: 31px;
    top: 47px;
    width: 237px;
    height: 63px;
    background-image: url(../images/Copy1_1.png);
}

#Copy2_1 {
	position: absolute;
	left: 64px;
    top: 40px;
    width: 172px;
    height: 74px;
    background-image: url(../images/Copy2_1.png);
}

#Copy3_1 {
	position: absolute;
	left: 50px;
    top: 45px;
    width: 199px;
    height: 60px;
    background-image: url(../images/Copy3_1.png);
}

#Copy4_1 {
	position: absolute;
	left: 139px;
    top: 14px;
    width: 151px;
    height: 8px;
    background-image: url(../images/Copy4_1.png);
}