/*
* Skeleton V1.1
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 8/17/2011
*/

/* Table of Content
==================================================
	#Sprites
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Sprites
================================================== */







/* Main class for sprite sheet */
.sprite {
    background: url(amazingAlexSprites3.png) no-repeat;
}


/* Text Images */

.spriteBuildShareText {
    width: 208px;
    height: 25px;
    background-position: -0px -251px;
}

.spriteCreateYourOwnText {
    width: 258px;
    height: 25px;
    background-position: -0px -215px;
}

.spriteFromTheCreatorsText {
    width: 352px;
    height: 54px;
    background-position: -0px -0px;
}

.spriteShareText {
    width: 119px;
    height: 24px;
    background-position: -219px -249px;
}


.spriteStayTunedImage {
    width: 84px;
    height: 25px;
    background-position: -219px -280px;
}

/* Top Sharing */

.spriteFacebookShare {
    width: 41px;
    height: 42px;
    background-position: -314px -279px;
}

.spriteGoogleShare {
    width: 41px;
    height: 41px;
    background-position: -0px -332px;
}

.spriteTwitterShare {
    width: 42px;
    height: 41px;
    background-position: -349px -227px;
}

/* Footer Social */

.spriteFooterFacebookButton {
    width: 42px;
    height: 42px;
    background-position: -348px -174px;
}

.spriteFooterTwitterButton {
   width: 42px;
    height: 42px;
    background-position: -363px -0px;
}



/* Footer */

.spriteInfoSplash {
    width: 680px;
    height: 665px;
    background-position: -0px -0px;
}

.spriteMeetAlexText {
    width: 160px;
    height: 21px;
    background-position: -255px -360px;
}

.spriteRovioLogo {
    width: 29px;
    height: 46px;
    background-position: -366px -279px;
}






/* #Site Styles
================================================== */

body {
	margin: 0;
    padding: 0;
    width: 100%;
	background: url(background.jpg) no-repeat;
}

p {
	font: 13px arial,sans-serif;
	line-height:160%;
}

b {
	font-weight:bold;
}

a {
	color: #1c639e !important;
	text-decoration: none;
	outline: 0;
}

a:hover {
	color: #1c639e !important;
	text-decoration: underline;
	outline: 0;
}

#mainArea {
	padding-top: 0px;
}




/* #Page Styles
================================================== */

#shopLinks {
	margin-bottom: 45px;
	padding-left: 190px;
}

#appStoreLink {
	position: absolute;
	width: 211px;
	height: auto;
	top: 420px;
	left: 95px;
}

#appStoreLink:hover {
	width: 221px;
	height: auto;
	top: 418px;
	left: 90px;
}

#googlePlayLink {
position: absolute;
	left: 340px;
	top: 420px;
	width: 300px;
	height: auto;
}

#googlePlayLink:hover {
	position: absolute;
	left: 332px;
	top: 418px;
	width: 315px;
}

#amazingAlexLink {
	position: absolute;
	left: 309px;
	top: 420px;
	width: 300px;
	height: auto;
}

#amazingAlexLink:hover {
	position: absolute;
	left: 301px;
	top: 418px;
	width: 315px;
}


.playButton {
	width: 139px; 
	height: 139px; 
	z-index:5;
}

.customeRow {
	margin-bottom: 50px;
}

.customeRowHalf {
	margin-bottom: 25px;
}

.spriteStayTunedImage {
    position: absolute;
}

.spriteTwitterShare {
    position: absolute;
}

.spriteFacebookShare {
}
.spriteMeetAlexText {
    position: absolute;
}

.spriteGoogleShare {
    position: absolute;
}



/*======= VIDEO AREA - START =======*/

#videoBox {
    margin-bottom: -30px;
    margin-left: -30px;
}

.playButton {
	position: relative;
}

.small {
	background: url(playButton.png) no-repeat;
	left: 365px;
	top: -270px;
	
}
.big {
	background: url(playButtonBig.png) no-repeat;
	left: 362px;
	top: -273px;
}



#videoClickBox { 
	position: absolute;
	
 	top: 530px;
	
 	left: 216px;
	width: 565px;
	height: 340px;
	background-color: #000000;
	z-index: 20;
	opacity:0.0;
	filter:alpha(opacity=0);
}

#videoClickBox:hover {
	cursor: pointer;
}

.spriteFacebookShare:hover {
    width: 43px;
    height: 44px;
    background-position: -348px -65px;
}

.spriteGoogleShare:hover {
    width: 43px;
    height: 43px;
    background-position: -348px -120px;
    position: absolute;
}

.spriteTwitterShare:hover {
    width: 44px;
    height: 43px;
    background-position: -293px -175px;
    position: absolute;
}


.spriteFooterTwitterButton:hover {
   	width: 44px;
    height: 44px;
    background-position: -293px -65px;
}

.spriteFooterFacebookButton:hover {
    width: 44px;
    height: 44px;
    background-position: -293px -120px;
}

#facebookShare {
	position: absolute;
	left: 390px;
}

#facebookShare:hover {
	position: absolute;
	
	left: 389px;
	top: 49px;
}

#twitterShare {
	position: absolute;
	left: 446px;
}

#twitterShare:hover {
	position: absolute;
	left: 445px;
	top: 49px;
}

#googleShare {
    left: 505px;
    position: absolute;
}

#googleShare:hover {
	position: absolute;
	left: 504px;
	top: 49px;
}

#shareText {
	margin-bottom: 9px;
	position: relative;
	left: 3px;
	top: -130px;
}

#shareIcons {
    left: -2px;
    padding-top: 50px;
    position: absolute;
    top: 880px;
}

#meetAlexText {
	position: relative;
	left: -15px;
	top: -84px;
}

#topAreaContainer {
	margin-bottom: -40px;
}

/*======= VIDEO AREA - END =======*/




/*======= MIDDLE AREA - START =======*/

#alexImage {
	margin-left: 50px;
}

.textArea {
	margin-top: 10px;
}

#creatorsText {
	margin-top: 60px;
}

#buildShareArea {
	margin-left: 50px;
}
#infoSplash {
	margin-left: 5px;
    z-index:-1;
}


/*======= MIDDLE AREA - END =======*/



/*======= FOOTER AREA - START =======*/

#BlackCloseImage {
	 margin-top: -100px;
   	 margin-left: -40px;
	 padding-right: 10px;
	 position: absolute;
}


.footer {
	position:absolute;
	margin-top: -15px;
	background-color:#FFFFFF;
	height: 95px;
	display:block;

	width: 100%;
	z-index:1;
	border-top-style: solid;
	border-width: 2px;
	border-color:#f4bb2d;
}

#footerTextDiv {
	margin-top: 0px;
	margin-left: 250px;
}

#footerText {
	font: 12px arial,sans-serif;
	margin-top: 20px;
	margin-left: 0px;
	margin-bottom: 0px;
}

#footerTwitter {
	position: absolute;
	left: 775px;
	top: 39px;
}

#footerTwitter:hover {
	left: 774px;
	top: 38px;
}

#footerFacebook {
	position: absolute;
	left: 730px;
	top: 38px;
}
#footerFacebook:hover {
	left: 729px;	
	top: 37px;
}

#weiboLogo {
	position: relative;
	left: 86px;
	top: 25px;
}

#weiboLogo:hover {
	width: 50px;
	height: 53px;
	left: 85px;
	top: 24px;
}

#rovioLogo {
	position: relative;
	left: 50px;
	top: 30px;
}

#footerShare {
	margin-top: 8px;
}

#fb-like {
	z-index: 100;
}

.spriteHeaderText{
	margin-left: -175px;
}


/*======= FOOTER AREA - END =======*/





	
	


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/