@import url('//webapps-cdn.esri.com/CDN/components/responsive/css/centurion-grid.css');

/* -------------------------------------------------------
 * 
 *	Esri General Responsive Stylesheet
 *	
 *	Created: November 12, 2013
 *	Author: Justin Hough
 *
 *	Based on Centurion Framework v.3.1
 *	
 -------------------------------------------------------- */

/*  Global Remove for IMG from Google Ad Services */
img[src*="http://www.googleadservices.com"],
img[src*="http://googleads"] {
  display: none;
}

/*  SECTION BANNER  */
#sectionTopper,
#sectionTopper #topperText,
#sectionTopper_left,
#sectionTopper_left #topperText,
#prodTopper {
  min-height: 109px;
}
#sectionTopper_left #topperText #topper_v_align {
  top: 35px;
}
#topperText h1 {
  font-size: 28px;
}


/*  SECONDARY NAVIGATION  */
#topSubnav {
	margin-left: 10px;
	left: 10px;
} 
#topSubnav a {
	/* background: rgba(0,0,0,0.2); */
	background: url('http://www.esri.com/~/media/Images/Content/events/graphics/1px-trans-20-blk.png');
	font-size: 13px;
	height: auto;
	margin-right: 5px;
	padding: 8px 12px;
}
#topSubnav a.on,
#topSubnav a.active,
#topSubnav a:hover {
  background: #FFF;
  color: #333;
}
#topSubnav a:hover {
	background: url('http://www.esri.com/~/media/Images/Content/events/graphics/1px-trans-50-blk.png');
	/* background: rgba(0,0,0,.5); */
	color: #FFF;
}
#topSubnav a.on:hover,
#topSubnav a.active:hover {
	background: #FFF;
	color: #333;
}

/*  TERTIARY NAVIGATION  */
#terSubnav {
  background: #ffffff;
  background: -moz-linear-gradient(top,  #ffffff 0%, #eeeeee 47%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#eeeeee));
  background: -webkit-linear-gradient(top,  #ffffff 0%,#eeeeee 47%);
  background: -o-linear-gradient(top,  #ffffff 0%,#eeeeee 47%);
  background: -ms-linear-gradient(top,  #ffffff 0%,#eeeeee 47%);
  background: linear-gradient(to bottom,  #ffffff 0%,#eeeeee 47%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
  border-bottom: 1px solid #CCC;
  min-height: 35px;
}
#terSubnav .container_12 {
 margin-top: 0;
}
#terSubnav a {
  color: #555;
  display: inline-block;
  font-size: 13px;
  margin-right: 15px;
  padding: 10px 5px 7px 0;
  text-decoration: none;
  text-shadow: none;
}
#terSubnav a.on {
  font-weight: normal;
  font-style: normal;
  line-height: normal;
  font-variant: normal;
  font-family: 'Avenir LT W04_85 Heavy1475548', Arial, Helvetica, sans-serif;
}
#terSubnav a:hover {
  text-decoration: underline;
}


/* Show / Hide for Elements */
.hide-desktop,
#global-search,
#global-menu,
#responsive-menu,
#responsive-menu ul,
#events-search {
  display: none;
}

#products-menu,
#products-menu ul,
#events-menu {
	display: none;
}
.hide-mobile {
  display: block;
}
#responsive-menu ul span {
  padding: 0;
}

#products-menu ul span,
#events-menu ul span {
  padding: 0;
}

/* Responsive Images */
.grid_8 img {
	height: auto;
	width: 100%;
}


/* ======================================================
    GRID MEDIA QUERIES
========================================================= */

/* Tablet Fluid Grid Layout - 92% */
@media only screen and (min-width: 761px) and (max-width: 920px) {
  .container_12 {
    width: 98% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important; 
  }
  .container_12 [class*="grid_"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline;
    float: left;
    margin-left: 1%;
    margin-right: 1%;
    position: relative;
  }
  .container_12 .alpha {
    margin-left: 0;
  }
  .container_12 .omega {
    margin-right: 0;
  }
  .container_12 .grid_1 {
    width: 6.33333% !important;
  }
  .container_12 .grid_2 {
    width: 14.66667% !important;
  }
  .container_12 .grid_3 {
    width: 23% !important;
  }
  .container_12 .grid_4 {
    width: 31.33333% !important;
  }
  .container_12 .grid_5 {
    width: 39.66667% !important;
  }
  .container_12 .grid_6 {
    width: 48% !important;
  }
  .container_12 .grid_7 {
    width: 56.33333% !important;
  }
  .container_12 .grid_8 {
    width: 64.66667% !important;
  }
  .container_12 .grid_9 {
    width: 73% !important;
  }
  .container_12 .grid_10 {
    width: 81.33333% !important;
  }
  .container_12 .grid_11 {
    width: 89.66667% !important;
  }
  .container_12 .grid_12 {
    width: 98% !important;
  }
  .container_12 .pull_1 {
    left: -8.33333% !important;
  }
  .container_12 .pull_2 {
    left: -16.66667% !important;
  }
  .container_12 .pull_3 {
    left: -25% !important;
  }
  .container_12 .pull_4 {
    left: -33.33333% !important;
  }
  .container_12 .pull_5 {
    left: -41.66667% !important;
  }
  .container_12 .pull_6 {
    left: -50% !important;
  }
  .container_12 .pull_7 {
    left: -58.33333% !important;
  }
  .container_12 .pull_8 {
    left: -66.66667% !important;
  }
  .container_12 .pull_9 {
    left: -75% !important;
  }
  .container_12 .pull_10 {
    left: -83.33333% !important;
  }
  .container_12 .pull_11 {
    left: -91.66667% !important;
  }
  .container_12 .pull_12 {
    left: -100% !important;
  }
  .container_12 .push_1 {
    left: 8.33333% !important;
  }
  .container_12 .push_2 {
    left: 16.66667% !important;
  }
  .container_12 .push_3 {
    left: 25% !important;
  }
  .container_12 .push_4 {
    left: 33.33333% !important;
  }
  .container_12 .push_5 {
    left: 41.66667% !important;
  }
  .container_12 .push_6 {
    left: 50% !important;
  }
  .container_12 .push_7 {
    left: 58.33333% !important;
  }
  .container_12 .push_8 {
    left: 66.66667% !important;
  }
  .container_12 .push_9 {
    left: 75% !important;
  }
  .container_12 .push_10 {
    left: 83.33333% !important;
  }
  .container_12 .push_11 {
    left: 91.66667% !important;
  }
  .container_12 .push_12 {
    left: 100% !important;
  }
  
	/* Grid FIX for Tablet Spacing */
  .container_12 .grid_8,
  .container_12 .grid_12 {
  	margin-left: 0 !important;
  }
  .container_12 .grid_3,
  .container_12 .grid_4 {
  	margin-right: 0 !important;	
  }
	
  html {
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
  }
	
}
/* Mobile Grid Layout - 320px and 480px */
@media screen and (min-width: 200px) and (max-width: 760px) {

  .container_12 {
    margin-left: 1% !important;
    margin-right: 1% !important;
    margin-top: 0 !important;
    padding-left: 0 !important;
    padding-top: 10px;
    min-width: 320px;
    width: 98% !important;
  }
  .container_12 [class*="grid_"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline;
    float: left;
    margin-left: 1%;
    margin-right: 1%;
    width: 98% !important;
  }
  .container_12 .centerGrid {
    display: block;
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
  .container_12 .alpha {
    margin-left: 0;
  }
  .container_12 .omega {
    margin-right: 0;
  }
  .container_12 [class*="pull_"],
  .container_12 [class*="push_"] {
    left: 0 !important;
  }

	/* Show / Hide for Elements */
  .hide-desktop {
    display: block !important;
  }
  .hide-mobile {
    display: none !important;
  }
  html {
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
	}
  
}


/* ======================================================
    GLOBAL HEADER AND NAVIGATION
========================================================= */

/*  TABLET - 920 to 761 */
@media only screen and (min-width: 761px) and (max-width: 920px) {

	#headerbg,
	#header,	
	#topperText,
	#sectionTopper, 
	#sectionTopper_general, 
	#sectionTopper_sub, 
	#homeTopper, 
	#sectionTopper_left, 
	#indTopper, 
	#prodTopper, 
	#breadTopper {
		min-width: 100% !important;
		width: 100% !important;
	}
	
	/* Esri.com Banner */
	#homelink {
		margin: 15px 0 10px -10px;
	}
	#utilityNav { 
		margin-right: 10px;
	}
	
	/* Global Navigation */
	#navbar {
		margin: 0;
	}
	#navbar li a {
		padding: 8px 17px 10px 17px !important;
	}
	
	/* Secondary Navigation */
	#sectionTopper_left #topperText #topper_v_align,
	#sectionTopper_general #topperText #topper_v_align,
	/* #sectionTopper_left #topSubnav, */
	#parentLink {
		position: relative;
		float: left;
	}
	#sectionTopper_general #topperText #topper_v_align,
	#sectionTopper_general #topperText #topper_v_align,
	#sectionTopper_left #topperText #topper_v_align {
		margin-left: 0 !important;
		top: 18px !important;
		width: 100% !important;
	}
	
	#sectionTopper_left #topperText #topper_v_align {
    top: 10px !important;
    left: 17px !important;
  }
	
	#topSubnav {
		margin-top: -5px;
		margin-left: 0;
	}
	#topper_v_align h2.topnav,
	#topperText h2,
	#topperText h1 {
		margin-left: 10px;
		top: 15px;
	}
	#topSubnav a {
		height: auto;
		margin-right: 5px;
		padding: 8px 12px;
	}
	/* #topSubnav a.on,  */
	#topSubnav a:hover {
		background-image: none;
		background: rgba(0,0,0,.5);
		color: #FFF;
	}
	
	#parentLink {
		left: 10px !important;
		position: absolute;
	}
	
	.footerBG1, .footerBG2 {
		padding-left: 0 !important;
		width: 100% !important;
	}
		#fatFooterHead {
			margin: 0 !important;
			width: 100% !important;
		}
			#fatFooterHead .asocial {
				padding-left: 10px;
			}
			#fatFooterHead .socialLinks {
				padding-right: 20px;
			}
		.fatFooterBody {
			width: 100% !important;
		}
			.fatFooter .fatFooterBody .fatFooterList {
				width: 18.86% !important;
			}

}

/* MOBILE - 760 to 320  */
@media screen and (min-width: 200px) and (max-width: 760px) {

	/*  HIDE ON MOBILE  */
	#navbar,
	#topSubnav,
	#terSubnav {
		display: none;
	}
	
	#utilityNav {
		color: transparent !important;
		margin: 0 !important;
		width: 94% !important;
		position: absolute !important;
		top: 60px !important;
		z-index:10 !important;
	}
	#utilityNav a,
	#utilityNav #searchHolder {
		display: none;
	}
	#searchHolder {
		margin-top: -20px !important;
	}
	
	
	#headerbg,
	#header,	
	#topperText,
	#sectionTopper, 
	#sectionTopper_general, 
	#sectionTopper_sub, 
	#homeTopper, 
	#sectionTopper_left, 
	#indTopper, 
	#prodTopper, 
	#breadTopper,
	#sectionTopper_left #topperText,
	#sectionTopper_left #topperText #topper_v_align {
		min-width: 100% !important;
		width: 100% !important;
	}
	#sectionTopper_general #topperText #topper_v_align {
  	margin-left: 0 !important;
  	min-width: 100% !important;
  	width: 100% !important;
	}
	#topperText,
	#sectionTopper_left,
	#sectionTopper_left #topperText {
		margin-bottom: 0;
		min-width: 100%;
		width: 100%;
	}
	#header {
		background: #FFF;
		height: auto !important;
		min-height: 65px;
		position: relative;
	}
	#header.mobile-search-active {
		height: auto;
		min-height: 110px;
	}
	#homelink {
		background-size: 220px;
		background-repeat: no-repeat;
		height: 38px !important;
		width: 85px !important;
	}
	
	/* Esri Global Navigation and Search */
	#global-search {
		background: url('menu-icons.png') 6px 20px no-repeat;
		cursor: pointer;
		display: inline-block;
		height: 63px;
		width: 44px;
		position: absolute;
		top: 0;
		right: 55px;
		z-index:1000;
	}
  #header.mobile-search-active #global-search {
    background: url('menu-icons.png') 6px -23px no-repeat;
    background-color: #007AC2;
  }
  #header.mobile-search-active #utilityNav {
    background: #007AC2;
    height: 50px;
    padding: 0 3px;
    width: 100%  !important;
  }
	
	#global-menu {
		cursor: pointer;
		display: block;
		font-size: 16px;
		font-weight: bold;
		/* padding: 25px 0 20px 0; */
		padding: 25px 22px 18px;
		top: 0;
		right: 0;
		position: absolute;
		z-index:1000;
		text-indent: -9999px;
	}
	#global-menu .icon {
		background: url('menu-icons.png') -36px -4px no-repeat;
		display: inline-block;
		height: 32px;
		width: 32px;
		position: absolute;
		top: 22px;
		right: 3px;
	}
	#global-menu.minus {
		background: #007AC2;
		color: #FFF;
	}
	#global-menu.minus .icon {
		background: url('menu-icons.png') -36px -45px no-repeat;
	}
	#navbar {
		background: #007AC2 !important;
		margin-left: 0 !important;
		display: none;
		/* position: absolute; */
		top: 100%;
		z-index: 10050;
		width: 100% !important;
	}
	#navbar li {
		border-bottom: 1px solid #3395ce;
		float: none !important;
	}
	
	#navbar li a.on,
	#navbar li a:hover {
		background: #005B94;
	}
	
	/* Global Esri Search */
	#searchHolder form,
	#searchHolder .form {
		margin-top: 0 !important;
	}
	#searchHolder input,
	#searchHolder .init_css {
    background-color: #FFF !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    height: 20px !important;
    margin: 0 2%;
    position: relative;
    top: 12px;
    width: 96% !important;
    z-index: 10;
		
	}
	#searchHolder .init_css:focus {
		width: 100%;
	}
	#searchHolder .sa {
		background: url('menu-icons.png') -7px -3px no-repeat;
		position: absolute;
		top: 15px;
		right: 15px;
	}
	
	/* Secondary Navigation */
	#topper_v_align h2.topnav {
		width: 250px;
	}
	#sectionTopper_left #topperText #topper_v_align,
	#sectionTopper_left #topSubnav/*,
	 #parentLink */ {
		position: relative;
		float:left;
	}
	#sectionTopper_left #topperText #topper_v_align {
  	left: 0 !important;
		margin-left: 0 !important;
		top: 10px;
	}
	#topper_v_align h2.topnav {
		margin-left: 10px;
		top: 22px;
	}
	#sectionTopper_general #topper_v_align h2.topnav {
  	margin-left: 0;
  	top: 2px;
	}
	#parentLink {
		left: 10px !important;
	}
	
	
	
	 /*  General Responsive Menu - NEW 11.12.13  */
  #responsive-menu {
		background: #F2F2F2;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		-webkit-box-shadow: 1px 1px 1px #ccc;
		-moz-box-shadow: 1px 1px 1px #ccc;
		box-shadow: 1px 1px 1px #ccc;
		bottom: -10px;
		height: 100%;
		margin: 0 2%;
		position: relative;
		width: 96%;
	}
	#responsive-menu {
  	margin-bottom: 20px;
	}
	#responsive-menu span {
		cursor: pointer;
		display: block;
		font-weight: bold;
		padding: 8px 10px;
	}
	#responsiveMobileMenu {
		display: none;
		width: 100%;
		margin: 0;
		padding: 0;
		background: #F2F2F2;
		-webkit-border-radius: 0 0 4px 4px;
		-moz-border-radius: 0 0 4px 4px;
		border-radius: 0 0 4px 4px;
		-webkit-box-shadow: 1px 1px 1px #ccc;
		-moz-box-shadow: 1px 1px 1px #ccc;
		box-shadow: 1px 1px 1px #ccc;
		position: absolute;
		z-index: 100;
	}
	#responsiveMobileMenu ul {
		margin: 0;
	}
	#responsiveMobileMenu li {
		background: none;
		border-bottom: 1px solid #E9E9E9;
		margin: 0;
		padding: 0;
	}
	#responsiveMobileMenu a,
	#products-menu a,
	#events-menu a {
		color:  #444;
		display: block;
		float: none;
		font-size: 14px;
		height: auto;
		margin: -1px 0 0 0;
		padding: 10px 0 !important;
		text-decoration: none;
		text-indent: 12px;
		width: 100% !important;
	}
	#responsive-menu li:last-child a {
		-webkit-border-radius: 0 0 4px 4px;
		-moz-border-radius: 0 0 4px 4px;
		border-radius: 0 0 4px 4px;
	}
	#responsive-menu a.on,
	#responsive-menu a:hover {
		background: #007AC2;
		color: #FFF;
	}

  /*  General Responsive Menu - Sub Navigation - NEW 11.12.13  */
	#responsiveMobileMenu li.expandable {
		position: relative;
	}
	#responsiveMobileMenu li.expandable ul {
		background: #FFF;
		border: none;
		border-top: 1px solid #DEDEDE;
		/* display: none; */
		margin-bottom: -5px;
		position: relative;
		top: 0;
		left: 0;
	}
	#responsiveMobileMenu li.expandable ul li, {
		text-indent: 10px;
	}
	#responsiveMobileMenu li.expandable a {
    width: 90% !important;
  }
  #responsiveMobileMenu li.expandable li a {
    width: 100% !important;
  }
	#responsiveMobileMenu li.expandable .plusSign {
		/* border: 1px solid green; */
		background: url('menu-icons.png') -92px 2px no-repeat;
		cursor: pointer;
		display: block;
		height: 20px;
		padding: 8px 10px;
		position: absolute;
		right: 0;
		top: 0;
		width: 20px;
	}
	#responsiveMobileMenu li.expandable .plusSign.active {
		background: url('menu-icons.png') -125px 2px no-repeat;
	}
	
	

	
	/* MOBILE MENU - Dropdown */
	#products-menu,
	#events-menu {
		background: #F2F2F2;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		-webkit-box-shadow: 1px 1px 1px #ccc;
		-moz-box-shadow: 1px 1px 1px #ccc;
		box-shadow: 1px 1px 1px #ccc;
		bottom: -10px;
		height: 100%;
		margin: 0 2%;
		position: relative;
		width: 96%;
	}
	#products-menu {
  	margin-bottom: 20px;
	}
	#products-menu span,
	#events-menu span {
		cursor: pointer;
		display: block;
		font-weight: bold;
		padding: 8px 10px;
	}
	#productsMobileMenu,
	#eventsMobileMenu {
		display: none;
		width: 100%;
		margin: 0;
		padding: 0;
		
		background: #F2F2F2;
		-webkit-border-radius: 0 0 4px 4px;
		-moz-border-radius: 0 0 4px 4px;
		border-radius: 0 0 4px 4px;
		-webkit-box-shadow: 1px 1px 1px #ccc;
		-moz-box-shadow: 1px 1px 1px #ccc;
		box-shadow: 1px 1px 1px #ccc;
		position: absolute;
		z-index: 100;
	}
	#productsMobileMenu ul,
	#eventsMobileMenu ul {
		margin: 0;
	}
	#productsMobileMenu li,
	#eventsMobileMenu li {
		background: none;
		border-bottom: 1px solid #E9E9E9;
		margin: 0;
		padding: 0;
	}
	#products-menu a,
	#events-menu a {
		color:  #444;
		display: block;
		float: none;
		font-size: 14px;
		height: auto;
		margin: -1px 0 0 0;
		padding: 10px 0 !important;
		text-decoration: none;
		text-indent: 12px;
		width: 100% !important;
	}
	#products-menu li:last-child a,
	#events-menu li:last-child a {
		-webkit-border-radius: 0 0 4px 4px;
		-moz-border-radius: 0 0 4px 4px;
		border-radius: 0 0 4px 4px;
	}
	#products-menu a.on,
	#products-menu a:hover,
	#events-menu a.on,
	#events-menu a:hover {
		background: #007AC2;
		color: #FFF;
	}

	/* MOBILE MENU - Sub Navigation */
	#productsMobileMenu li.expandable,
	#eventsMobileMenu li.expandable {
		position: relative;
	}
	#productsMobileMenu li.expandable ul,
	#eventsMobileMenu li.expandable ul {
		background: #FFF;
		border: none;
		border-top: 1px solid #DEDEDE;
		/* display: none; */
		margin-bottom: -5px;
		position: relative;
		top: 0;
		left: 0;
	}
	#productsMobileMenu li.expandable ul li,
	#eventsMobileMenu li.expandable ul li {
		text-indent: 10px;
	}
	#productsMobileMenu li.expandable a,
  #eventsMobileMenu li.expandable a {
    width: 90% !important;
  }
  #productsMobileMenu li.expandable li a,
  #eventsMobileMenu li.expandable li a {
    width: 100% !important;
  }
	
	#productsMobileMenu li.expandable .plusSign,
	#eventsMobileMenu li.expandable .plusSign {
		/* border: 1px solid green; */
		background: url('menu-icons.png') -92px 2px no-repeat;
		cursor: pointer;
		display: block;
		height: 20px;
		padding: 8px 10px;
		position: absolute;
		right: 0;
		top: 0;
		width: 20px;
	}
	#productsMobileMenu li.expandable .plusSign.active,
	#eventsMobileMenu li.expandable .plusSign.active {
		background: url('menu-icons.png') -125px 2px no-repeat;
	}
	
	/* Dropdown Arrow */
	.arrow {
		background: url('menu-icons.png') 0 -70px no-repeat;
		position: absolute;
		top: 0;
		right: 0;
		padding: 2px !important;
		height: 32px;
		width: 32px;
	}
	.arrow-down {
		border-radius: 4px 4px 0 0 !important;
	}
	.arrow-down li a:first-child {
		border-top: 1px solid #DEDEDE;
	}
	.arrow-down .arrow {
		background: url('menu-icons.png') -32px -70px no-repeat;
	}
	
	/* FOOTER */
	.footerBG1, .footerBG2 {
		display: none;
	}
}

/* Not Responsive - Images */
.not-responsive,
.notResp,
.non-responsive,
.nonResp {
  height: auto;
  width: auto !important;
}