@font-face{
	font-family: mottercorpusositcttcondbold;
	src: url("../fonts/mottercorpusositcttcondbold.eot"); /* EOT file for IE */
}
@font-face{
	font-family: mottercorpusositcttcondbold;
	src: url('../fonts/mottercorpusositcttcondbold.ttf');
}

html{
	width:100%;
}

body{
	margin:0;
	width:100%;
	overflow: hidden;
	padding: 0px;
	background: url("../images/page-background.png") repeat scroll center top transparent;
}

body.clear{
	background-image: none;
}

#hardware{
	background: url("../images/hardware.png") no-repeat scroll center top transparent;
    height: 511px;
    margin: 0 auto;
    position: relative;
    width: 529px;
}

#canvas{
	width:320px;
	height:424px;
	position:absolute;
	top:6px;
	margin-left:104px;
}

#next{
background:url('../images/play_game.png') no-repeat top center;
cursor: pointer;
width:177px;
height:82px;
margin-left:auto;
margin-right:14px;
margin-top:328px;
position:relative;
bottom:0;
right:0;
}

#manual{
background:url('../images/manual.png') no-repeat top center;
width:533px;
height:448px;
position:absolute;
top:16px;
}

#modal{
	height: 380px;
	margin: 0 10px;
	text-align: center;
	width: 385px;
}

#modal p{
	color: #FFFFFF;
    font-family: mottercorpusositcttcondbold;
    font-size: 18px;
    margin: 10px auto;
}

#modal a{
	border: 0 none;
    display: block;
    outline: 0 none;
    position: relative;
}

#modal a img{
	border: 0;
}

#stuntGuyLogo{
	background: url("../images/logo.png") no-repeat scroll 0 0 transparent;
    height: 60px;
    margin: 0 auto;
    width: 237px; 
}

#wantMore{
	background: url("../images/dialog_message.png") no-repeat scroll 0 0 transparent;
    height: 28px;
    margin: -50px auto 0 auto;
    width: 366px; 
}

#outNow{
	background: url("../images/dialog_message_2.png") no-repeat scroll 0 0 transparent;
    height: 33px;
    margin: 80px auto 0 auto;
    width: 125px; 
}

#buttons{
	margin-top: 160px;
	height: 60px;
}

#watchButton{
	background: url("../images/dialog_button.png") no-repeat scroll 0 0 transparent;
    height: 52px;
    width: 174px;
	float: left;
	margin-bottom: 8px;
}

#downloadButton{
	background: url("../images/dialog_download.png") no-repeat scroll 0 0 transparent;
    height: 53px;
    width: 174px;
	float: left;
	margin-bottom: 8px;
	margin-left: 8px;
	z-index: 3000;
}

#likeOnFacebook{
	background: url("../images/dialog_like_on_facebook.png") no-repeat scroll 0 0 transparent;
    height: 42px;
    width: 228px;
    margin: 0 auto;
}

#facebookLike{
    position: relative;
    top: 8px;
	left: 144px;
    width: 72px;
    clear: both;
}

#closeButton{
	background: url("../images/close_x.png") no-repeat scroll 0 0 transparent;
    height: 34px;
    width: 34px;
    position: relative;
    top: 8px;
    left: 24px;
}

#themagnificentstunts{
	width: 144px;
	margin: 10px auto 0 auto;
}

#dialogClose{
	background: url("../images/dialog_close.png") no-repeat scroll 0 0 transparent;
    height: 26px;
    width: 141px;
	margin: 8px auto 0 auto;
}

.ui-widget-overlay {
background:url('../images/modal.png') !important;
}

.ui-dialog {
	background:url('../images/dialog_bg.png') no-repeat top center;
	height: 380px !important;
	width: 385px !important;
	position: absolute;
	top: 0;
}

.ui-widget-overlay {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.ui-dialog-titlebar-close {
	float: right;
}

.ui-dialog-titlebar-close.ui-corner-all{
	text-indent: -9999px;
}

.ui-dialog-titlebar-close {
	background: url('../images/close.png') 0 0 no-repeat;
	width: 29px;
	height: 30px;
}

#add_this{
	width: 310px;
	margin: 0 auto;
	height: 29px;
}

.addthis_toolbox {
	margin: 4px auto 0 auto;
	text-align: center;
	width: 310px !important;
}

.addthis_toolbox .addthis_button_facebook_like span {
	width: 49px !important;
}

.addthis_toolbox .addthis_button_facebook_like iframe {
	width: 49px !important;
}

.addthis_toolbox .addthis_button_tweet iframe {
	width: 57px !important;
}

#landscape-error{
	display:none;
}

@media screen and (max-width: 320px){
	html {
		width: 320px !important;
	}
	
	body {
		width: 320px !important;
	}
	
	#hardware {
		width: 320px !important;
	}

	#manual{
		margin-top:-32px;
	}
	
	#next{
		background:url('../images/next_button.png') no-repeat top center;
		width: 177px;
		height: 82px;
		margin-left:123px;
		margin-top:350px;
		margin-right:auto;
		margin-bottom:auto;
	}
	
	#canvas{
		margin-left:0;
	}
	
	.ui-dialog {
		background:url('../images/dialog_bg_small.png') no-repeat 0 24px transparent;
		height: 378px !important;
		width: 289px !important;
	}
	
	.ui-dialog-titlebar{
		height: 0;
	}
	
	.ui-dialog-titlebar-close{
		display: none;
	}
	
	#modal{
		margin: 0 4px;
	}
	
	#wantMore{
		background: url("../images/dialog_message_small.png") no-repeat scroll 0 0 transparent;
		height: 25px;
		width: 273px; 
		margin: 0 auto;
	}

	#outNow{
		display: none;
	}
	
	#buttons{
		width: 276px;
		margin-top: 266px;
		height: 43px;
	}

	#watchButton{
		background: url("../images/dialog_button_small.png") no-repeat scroll 0 0 transparent;
		height: 43px;
		width: 139px;
		float: left;
		margin-bottom: 8px;
	}

	#downloadButton{
		background: url("../images/dialog_download_small.png") no-repeat scroll 0 0 transparent;
		height: 41px;
		width: 133px;
		float: left;
		margin-bottom: 8px;
		margin-left: 4px;
	}

	#likeOnFacebook{
		background: none;
		height: 40px;
		width: 133px;
	}

	#facebookLike{
		width: 72px;
		clear: both;
		left: 20px;
		top: 4px;
	}
	
	#dialogClose{
		background: url("../images/dialog_close_small.png") no-repeat scroll 0 0 transparent;
		height: 29px;
		width: 132px;
		margin-top: 8px;
	}
	
	#closeButton{
		top: 8px;
		left: 8px;
		z-index: 1000;
	}
	
	@media all and (orientation:portrait){
		#landscape-error{
			display:none;
		}
		#portrait{
			display:block;
		}
	}
}

@media only screen and (max-width: 480px){
	@media screen and (orientation:landscape){
		#landscape-error{
			display:block;
			color: #FFFFFF;
			width: 500px;
			margin: 0 auto;
		}
		#portrait{
			display:none;
		}
		#hardware{
			width: auto !important;
		}
	}
}

@media only screen and (max-width: 568px) and (max-height: 320px){
	@media screen and (orientation:landscape){
		#landscape-error{
			display:block;
			color: #FFFFFF;
			width: 500px;
			margin: 0 auto;
		}
		#portrait{
			display:none;
		}
		#hardware{
			width: auto !important;
		}
	}
}