/**
 * @file
 * Positioning for responsive header design.
 */

/**
 * Media Queries
 */

/* 2 pixel ratio */
@media	
only screen and (-webkit-min-device-pixel-ratio: 2),	
only screen and ( min--moz-device-pixel-ratio: 2),	
only screen and ( -o-min-device-pixel-ratio: 2/1),	
only screen and ( min-device-pixel-ratio: 2),	
only screen and ( min-resolution: 192dpi),	
only screen and ( min-resolution: 2dppx) {
	.podaac-backgroundsize #header-banner {
		background-image: url('../../images/header-banner@x2.jpg');
	}
	.podaac-backgroundsize #header-satellite {
		background-image: url('../../images/satellite@x2.png');
	}
	.podaac-backgroundsize #logo {
		float: left;
		width: 320px;
		height: 70px;
		background-image: url('../../images/logo@x2.png');
		background-repeat: no-repeat;
		-webkit-background-size: 320px 70px;
		-moz-background-size: 320px 70px;
		-o-background-size: 320px 70px;
		background-size: 320px 70px;
	}
	.podaac-backgroundsize #logo img {
		display: none;
	}
}	

/* 3 pixel ratio */
@media	
only screen and (-webkit-min-device-pixel-ratio: 3),	
only screen and ( min--moz-device-pixel-ratio: 3),	
only screen and ( -o-min-device-pixel-ratio: 3/1),	
only screen and ( min-device-pixel-ratio: 3),	
only screen and ( min-resolution: 288dpi),	
only screen and ( min-resolution: 3dppx) {
	.podaac-backgroundsize #header-banner {
		background-image: url('../../images/header-banner@x3.jpg');
	}
	.podaac-backgroundsize #header-satellite {
		background-image: url('../../images/satellite@x3.png');
	}
	.podaac-backgroundsize #logo {
		float: left;
		width: 320px;
		height: 70px;
		background-image: url('../../images/logo@x3.png');
		background-repeat: no-repeat;
		-webkit-background-size: 320px 70px;
		-moz-background-size: 320px 70px;
		-o-background-size: 320px 70px;
		background-size: 320px 70px;
	}
	.podaac-backgroundsize #logo img {
		display: none;
	}
}

.ui-autocomplete {
	max-height: 100px;
	overflow-y: auto;
	overflow-x: auto;
	font-size: 10px;
}

/**
 * Header Responsive Design
 */
@media all and (max-width: 750px) {
	#name-and-slogan {
		margin-bottom: 35px;
	}
	#block-podaac-helper-podaac-search {
		bottom: 5px;
		right: auto;
	}
	#podaac-follow-us {
		bottom: 25px;
		right: auto;
		left: 315px;
	}
}
@media all and (min-width: 450px) and (max-width: 750px) {
	#header-satellite {
		opacity: 0.66;
	}
}
@media all and (max-width: 449px) {
	#header-satellite {
		opacity: 0.33;
	}
	#logo,
	.podaac-backgroundsize #logo {
		width: 300px;
		height: 65px;
		-webkit-background-size: 300px 65px;
		-moz-background-size: 300px 65px;
		-o-background-size: 300px 65px;
		background-size: 300px 65px;
	}
	#header-satellite {
		width: 300px;
		height: 60px;
		-webkit-background-size: 300px 60px;
		-moz-background-size: 300px 60px;
		-o-background-size: 300px 60px;
		background-size: 300px 60px;
		bottom: 20px;
	}
}
@media all and (max-width: 399px) {
	#block-podaac-helper-podaac-search .form-item-type {
		width: 40%;
	}
	#block-podaac-helper-podaac-search {
		width: 100%;
	}
	#block-podaac-helper-podaac-search .form-item-search {
		width: 75%
	}
	#block-podaac-helper-podaac-search .form-item-search input {
		width: 100%;
	}
	#podaac-follow-us {
		position: relative;
		float: left;
		top: -30px;
		left: 0;
	}
	#podaac-follow-us.active #podaac-follow-us-links, 
	#podaac-follow-us:hover #podaac-follow-us-links {
		right: -30px;
	}
}