/*
BASE (MOBILE) SIZE
This are the mobile styles. It's what people see on their phones. If
you set a great foundation, you won't need to add too many styles in
the other stylesheets. Remember, keep it light: Speed is Important.
*/

@import "main.css";



/*
TABLET & SMALLER LAPTOPS
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (max-width: 1024px) {

	.desktop {
		display: none;
		visibility: hidden;
	}
	.ipad {
		display: block;
		visibility: visible;
	}
	
	#band {
		height: 215px;
		margin-top: -107px;
	}
	
	#card {
		width: 518px;
		height: 274px;
		margin-left: -319px;
		margin-top: -172px;
	}
	
	#card p {
		padding: 24px 0px 0px 92px;
		font-size: 17px;
	}
	
	#map {
		width: 760px;
		height: 380px;
		margin-left: -390px;
		margin-top: -200px;
	}
	
	#map a {
		font-size: 14px;
		padding: 12px 22px;
	}
	
	#down, #up, #center-up, #center-down {
		background: url("../img/buttons-ipad.png") 0px 0px;
		width: 70px;
		height: 70px;
	}
	
	#center-down {
		background-position: -70px 0px;
		margin-left: -35px;
		margin-bottom: -35px;
	}
	
	#down {
		position: absolute;
		bottom: 11%;
		left: 50%;
		margin-left: -37px;
		margin-top: -37px;
		background-position: -70px 0px;
	}
	
	#up {
		margin-left: -35px;
		margin-bottom: -35px;
	}
	
	#center-up {
		margin-left: -35px;
		margin-bottom: -35px;
		top: 8%;
	}
	
	#band-overlay img {
		margin: 60px auto;
	}
	
}

@media only screen and (max-width: 480px) {

	.desktop {
		display: none;
		visibility: hidden;
	}
	.ipad {
		display: none;
		visibility: hidden;
	}
	.iphone {
		display: block;
		visibility: visible;
	}
	
	#band {
		height: 90px;
		margin-top: -45px;
	}
	
	#card {
		width: 300px;
		height: 120px;
		margin-left: -185px;
		margin-top: -100px;
		padding: 20px 30px;
	}
		
	#card p {
		padding: 6px 0px 0px 61px;
		font-size: 9px;
		font-weight: normal;
		letter-spacing: 0.08em;
	}	
	
	#map {
		width: 384px;
		height: 130px;
		margin-left: -202px;
		margin-top: -91px;
		padding: 10px;
		top: 65%;
	}
	
	#map a {
		font-size: 8px;
		padding: 8px 10px;
		bottom: -36px;
		letter-spacing: 0.14em;
	}
	
	#down, #up, #center-up, #center-down {
		background: url("../img/buttons-iphone.png") 0px 0px;
		width: 40px;
		height: 40px;
	}

	#center-down {
		background-position: -40px 0px;
		margin-left: -20px;
		margin-bottom: -20px;
		bottom: 14%;
	}
	
	#down {
		position: absolute;
		bottom: 8%;
		left: 50%;
		margin-left: -20px;
		margin-top: -20px;
		background-position: -40px 0px;
	}
	
	#up {
		margin-left: -20px;
		margin-bottom: -20px;
		top: 8%;
	}
	
	#center-up {
		margin-left: -20px;
		margin-bottom: -20px;	
	}
	
	#band-overlay img {
		margin: 25px auto;
	}
	
}

/*
RETINA (2x RESOLUTION DEVICES)
This applies to the retina iPhone (4s) and iPad (2,3) along with
other displays with a 2x resolution. You can also create a media
query for retina AND a certain size if you want. Go Nuts.
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5) {

	   	#down, #up, #center-up, #center-down {
			background: url("../img/buttons-2x.png") 0px 0px;
			background-size: 150px 75px;
		}
		#down {
			background-position: -75px 0px;
		}
		#center-down {
			background-position: -75px 0px;	
		}
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1024px),
       only screen and (min--moz-device-pixel-ratio: 1.5) and (max-width: 1024px),
       only screen and (min-device-pixel-ratio: 1.5) and (max-width: 1024px) {
	    
	   	#down, #up, #center-up, #center-down {
			background: url("../img/buttons-2x.png") 0px 0px;
			background-size: 140px 70px;
		}
		#down {
			background-position: -70px 0px;
		}
		#center-down {
			background-position: -70px 0px;	
		}
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 480px),
       only screen and (min--moz-device-pixel-ratio: 1.5) and (max-width: 480px),
       only screen and (min-device-pixel-ratio: 1.5) and (max-width: 480px) {

	    #down, #up, #center-up, #center-down {
			background: url("../img/buttons-2x.png") 0px 0px;
			background-size: 80px 40px;
		}
		#down {
			background-position: -40px 0px;
		}
		#center-down {
			background-position: -40px 0px;	
		}
}