/* Common CSS to all */
@media screen{
	*{padding: 0; margin: 0;}
	
	body{padding:0; margin:0; border:0; background:grey; box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box;}
  	.screen{position:absolute; width:900px; height:570px; background:white; overflow:hidden; left:0; right:0; top:0; bottom:0; margin:auto; background-image:url(../img/screenBG.png);background-repeat:no-repeat; z-index: -1;}
  	
.header{position:absolute; top:0; left:60px; width:870px; height:135px;}

	
.footer{position:absolute; top:540px; left:0; width:100%; line-height: 55px;height:55px;}

	
.main{position:absolute; top:50px; left:30px; width:840px; height:512px; z-index: 1;}
		
	  

/* Desktop, iframe of (800~960) within big browser (>1024) */
@media screen and (min-device-width:1025px) and (min-width:800px) and (max-width:960px) 
{
	div.screen{zoom:83%;}    
	!important .introImg {position: relative; top:-15px; left:-15px; z-index:1}

}

/* Desktop, iframe of (960~1024) within big browser (>1024) */
@media screen and (min-device-width:1025px) and (min-width: 961px) and (max-width: 1024px) 
{
	div.screen{ width:900px; height:650px;}
    !important .introImg {position: relative; top:-15px; left:-15px; z-index:1}
}

/* Desktop, "full screen" within big browser (>1024) */
@media screen and (min-device-width:1025px) and (min-width: 1025px) 
{
	div.screen{ }
    !important .introImg {position: relative; top:-15px; left:-15px; z-index:1}
}

/* Portrait mode for common tablets by exact aspect ratio*/
@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)/*ipad portrait*/
{
	div.screen{ width:768px; height:946px; }
	!important .introImg {position: relative; top:-15px; left:-15px; z-index:1}
}

/* Landscape mode for common tablets by exact aspect ratio*/
@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)/*ipad */
{
	div.screen{ width:1024px; height:690px; /* iPad browser header takes up 78 pixels*/}
	!important .introImg {position: relative; top:-15px; left:-15px; z-index:1}
}

/* Portrait mode for common tablets by exact aspect ratio*/
@media screen and (min-device-width: 1025px) and (orientation:portrait)/*Xoom and Nook */
{
	div.screen{ width:768px; height:946px; }
	!important .introImg {position: relative; top:-15px; left:-15px; z-index:1}  
}