/**
 * @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;
}

#podaac-search-form--2 {
	display: none;
}
#block-podaac-helper-podaac-search {
	display: block;
}
/**
 * Header Responsive Design
 */

@media all and (min-width: 1300px) {
	#podaac-search-form--2 {
		display: block;
	}
	#block-podaac-helper-podaac-search {
		display: none;
	}
}
@media all and (max-width: 950px) {
	#name-and-slogan {
		margin-right: -250px;
	}
	#podaac-search-form--2,
	#block-podaac-helper-podaac-search {
		bottom: 5px;
		right: auto;
	}
	#podaac-follow-us {
		bottom: 25px;
		right: auto;
		left: 315px;
	}
}
@media all and (max-width: 575px) {
	#podaac-follow-us {
		/*bottom: 98px;*/
		bottom: 66px;
	}
}
@media all and (max-width: 399px) {
	#podaac-search-form--2,
	#block-podaac-helper-podaac-search {
		bottom: 0px;
	}
	#podaac-follow-us {
		bottom: 34px;
	}
}
@media all and (max-width: 950px) {
	#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: 68px;
		opacity: 0.33;
		margin-right: -15px;
	}
}
@media all and (max-width: 767px) {
	#header-satellite {
		width: 150px;
		height: 30px;
		-webkit-background-size: 150px 30px;
		-moz-background-size: 150px 30px;
		-o-background-size: 150px 30px;
		background-size: 150px 30px;
		bottom: 90px;
		opacity: 0.33;
		margin-right: -15px;
	}
}
@media all and (max-width: 575px) {
	#header-satellite {
		bottom: 126px;
	}
}
@media all and (max-width: 449px) {
	#header-satellite {
		opacity: 0.33;
	}
	#logo,
	.podaac-backgroundsize #logo {
		width: 300px;
		height: 74px;
		-webkit-background-size: 300px 70px;
		-moz-background-size: 300px 70px;
		-o-background-size: 300px 70px;
		background-size: 300px 70px;
	}
}
@media all and (max-width: 399px) {
	#header-satellite {
		/*bottom:16px;
		margin-right: -10px;*/
	}
}
@media all and (max-width: 399px) {
	#podaac-search-form--2 .form-item-type,
	#block-podaac-helper-podaac-search .form-item-type {
		width: 40%;
	}
	#podaac-search-form--2,
	#block-podaac-helper-podaac-search {
		width: 100%;
	}
	#podaac-search-form--2 .form-item-search,
	#block-podaac-helper-podaac-search .form-item-search {
		width: 75%
	}
	#podaac-search-form--2 .form-item-search input,
	#block-podaac-helper-podaac-search .form-item-search input {
		width: 100%;
	}
	#podaac-follow-us {
		position: relative;
		/*float: left;*/
		/*top: -30px;*/
		/*left: 0;*/
		margin-top: 10px;
	}
	#podaac-follow-us.active #podaac-follow-us-links,
	#podaac-follow-us:hover #podaac-follow-us-links {
		right: -30px;
	}
}


#JPL-banner,
#name-and-slogan {
	transition: all 0.3s ease-in-out;
}
#JPL-banner {
	transform: scale(0.85);
	transform-origin: left;
	margin-top: -30px;
	padding-left: 0px;
}
#name-and-slogan {
	transform: scale(1.1);
	transform-origin: left;
	margin-top: -10px;
	margin-left: -50px;
}
.logged-in #name-and-slogan { margin-top: -10px; }
@media all and (max-width: 1100px) {
	#JPL-banner {
		/*transform: scale(0.85);*/ transform: scale(0.7);
		transform-origin: left;
		/*margin-top: -32px;*/ margin-top: -30px;
		padding-left: 0px;
	}
	#name-and-slogan {
		/*transform: scale(0.75);*/ transform: scale(0.9);
		/* margin-left: -74px;*/
		transform-origin: left;
		/*margin-top: -25px; margin-top: -20px;*/  margin-top: -12px;
		/*margin-left: -50px;*/ margin-left: -90px;
	}
}

  /*
  @media all and (max-width: 1024px) {
	#header {
	  padding-bottom: 25px;
	}
	#name-and-slogan {
	  display: block;
	  margin-left: 0px;
	  border-left: 0px solid #fff;
	  padding-left: 5px;
	   margin-top: -5px;
	  margin-bottom: 20px;
	}
  }
  */

/*@media all and (max-width: 767px) {*/
@media all and (max-width: 950px) {
	#JPL-banner {
		/*transform: scale(0.75);*/ transform: scale(0.7);
	}
	#name-and-slogan {
		/*transform: scale(0.65);*/ transform: scale(0.85);
		/*margin-left: -80px;*/ margin-left: -90px;
	}
/*#JPL-NASA-link {
		width: 60px;
		height: 50px;
		background-position: -91px 0px;

	}*/
}
@media all and (max-width: 449px) {
	#JPL-banner {
		transform: scale(0.6);
	}
	#JPL-NASA-link {
		top: 10px;
		left: 10px;
		width: 60px;
		height: 66px;
		background-size: 146px 60px;
		background-position: -92px 0px;
	}
}

/*@media all and (max-width: 750px) {*/
@media all and (max-width: 950px) {
	#podaac-follow-us {
	  left: auto !important;
	  right: 10px !important;
	}
}
/*@media all and (max-width: 399px) {*/
@media all and (max-width: 575px) {
	#podaac-follow-us {
	  /*left: 5px !important;
	  right: auto !important;*/
	  right: 5px !important;
	  left: auto !important;
	}
}

/*@media all and (max-width: 767px) {*/
	@media all and (max-width: 950px) {

	#podaac-search-form--2 .form-item-search input,
	#block-podaac-helper-podaac-search .form-item-search input {
		width:295px;
	}
	#podaac-search-form--2 .form-item-search,
	#block-podaac-helper-podaac-search .form-item-search {
		width:295px;
	}
	#podaac-search-form--2,
	#block-podaac-helper-podaac-search {
		width: 370px;
	}

  }


/*@media all and (max-width: 449px) {*/
@media all and (max-width: 575px) {
	#header {
	  /*padding-bottom: 25px;*/
	}
	#name-and-slogan {
	  display: block;
	  margin-left: 0px;
	  border-left: 0px solid #fff;
	  padding-left: 5px;
	 margin-top: -15px; padding-bottom:15px;
	  margin-bottom: 5px;
	}
	#podaac-follow-us {
		margin-top: -30px; 
	}
}
@media all and (max-width: 375px) {
	#header {
	  padding-bottom: 25px;
	}
}

#podaac-search-form--2 .form-item-search input,
#podaac-search-form--2 .form-item-search,
#podaac-search-form--2,
#block-podaac-helper-podaac-search .form-item-search input,
#block-podaac-helper-podaac-search .form-item-search,
#block-podaac-helper-podaac-search {
	transition: all 0.5s ease-in-out;
}
/*@media all and (max-width: 767px) {*/

/*
#block-podaac-helper-podaac-search .form-item-search input {
	width:315px;
}
#block-podaac-helper-podaac-search .form-item-search {
	width:315px;
}
#block-podaac-helper-podaac-search {
	width: 390px;
}
*/
#podaac-search-form--2 .form-item-search input,
#block-podaac-helper-podaac-search .form-item-search input {
	width:100%;
}
#podaac-search-form--2 .form-item-search,
#block-podaac-helper-podaac-search .form-item-search {
	width: Calc(100% - 83px);
}
/*#podaac-search-form--2,*/
.menu-search-form,
#block-podaac-helper-podaac-search {
	width: 30%; max-width: 400px;
	margin-right:5%;
}

/*
@media all and (max-width: 950px) {
	#block-podaac-helper-podaac-search .form-item-search input {
		width:295px;
	}
	#block-podaac-helper-podaac-search .form-item-search {
		width:295px;
	}
	#block-podaac-helper-podaac-search {
		width: 370px;
	}
  }
*/
@media all and (max-width: 950px) {
	#podaac-search-form--2 .form-item-search input,
	#block-podaac-helper-podaac-search .form-item-search input {
		width:100%;
	}
	#podaac-search-form--2 .form-item-search,
	#block-podaac-helper-podaac-search .form-item-search {
		width: Calc(100% - 83px);
	}
	#podaac-search-form--2,
	#block-podaac-helper-podaac-search {
		width:80%; max-width: 100%;
		margin-right:0%;
	}
}

@media all and (max-width: 575px) {
	#podaac-search-form--2,
	#block-podaac-helper-podaac-search {
		width:100%;
	}
}

@media all and (max-width: 478px) {
/*
	#block-podaac-helper-podaac-search .form-item-search input {
		width:245px;
	}
	#block-podaac-helper-podaac-search .form-item-search {
		width:245px;
	}
	#block-podaac-helper-podaac-search {
		width: 320px;
	}
*/
}

@media all and (max-width: 430px) {
/*
	#block-podaac-helper-podaac-search .form-item-search input {
		width:200px;
	}
	#block-podaac-helper-podaac-search .form-item-search {
		width:200px;
	}
	#block-podaac-helper-podaac-search {
		width: 295px;
	}
*/
	/*#podaac-follow-us {
		left: 3px !important;
		right: auto !important;
	}*/

}

#header .messages {
	margin-top:0px;
	position: relative;
	z-index:10;
}