/* Desktop */

#umass-banner {
  padding: 1.15em;
  background-color: #881c1c;
  text-align: right;
}

#umass-banner .container,
#metanav .container { max-width: 1200px; }

#umass-banner a:hover,
#umass-banner a:focus { border: none; }

a#wordmark {
	background: url(images/wordmark.svg) no-repeat;
	height: 1.5em;
	width: 12em;
	float: left;
	background-size: contain;
	font: inherit; /* counteracts font declaration in .ir class */
  margin-top: .1em
}

.lt-ie9 a#wordmark { background: url(images/wordmark.png) no-repeat; }

#umass-banner a {
	color:#fff;
}

#umass-banner .metanav-toggle {
  float: right; 
  padding: .1em 2em 0 0;
	text-decoration: none;
	color:#fff;	 	 					 																						
	display: block;
	white-space: nowrap;
	text-align: left;
	border-bottom: none;
}

#umass-banner .metanav-toggle .fa { 
  font-size: 1.3em;
  position: relative;
  top: 0.05em;
}

#umass-banner form { 
  float: right; 
  margin: 0;
}

#metanav {
  clear:both;
  display:none;
  background: linear-gradient(to bottom, #303030 50%, #444 100%) #303030;
  background-color: #303030; /* fallback for ie8 & ie9 */
  text-align:right;
  margin: 0;
  padding-right: 2em;
}

#metanav ul { padding: 0; }

#metanav li { 
  display: inline-block; 
  border-right: solid 1px black;
	margin: 0;
}

#metanav li.last { border: none; }

#metanav a {
  display: block;
  color:#fff;
  padding: .5em 1em;
  font-size: .8em;
  text-decoration: none;
}

#metanav a:hover { border-bottom: none; }

#umass-banner input[type="text"] {
	margin:0;
	padding:.25em 0 .25em .25em;
	border-radius:0;
	line-height: normal;
	box-shadow: none;
	border: none;
}

#umass-banner input[type="submit"] {
	background: #881c1c url(images/search.svg) 0 -2px no-repeat;
	height: 1.75em;
	width: 1.75em;
	background-size: contain;
	text-indent: -9999px; 
	margin: 0;
	vertical-align:middle;
	box-shadow:none;
  border: none;
  max-width: initial;
}

.lt-ie9 #umass-banner input[type="submit"] { background: #881c1c url(images/search.png) 5px 3px no-repeat; } /* fallback for ie8 */

/* Tablet Landscape and Portrait */

@media only screen and (min-width:481px) and (max-width:1024px) { 
  #metanav { padding-right: .5em; }
  #umass-banner .metanav-toggle { padding-right: .5em;}
  #umass-banner input[type="text"] {max-width: 8em;}
}



/* Smartphone Landscape */

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

/* Wider screen means we can stack both on the same line */
/* #umass-banner .metanav-toggle { 
  clear: both; 
  padding: .5em 2em 0;
} */

#metanav { 
  text-align: center; 
  margin: 0 auto;
}

#metanav { padding: 0; }

#metanav li { border: none; }
  
#umass-banner input[type="text"] {max-width:8em;}
  
}


/* Smartphone Portrait */

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

a#wordmark, 
#umass-banner .metanav-toggle,
#metanav { 
  float: none; 
  margin: 0 auto;
  text-align: center;
}

a#wordmark { margin-bottom: 1.2em; }

#metanav { padding: 0; }

#metanav li { border: none; }

  #umass-banner input[type="text"] {max-width:8em;}
  
}

/* Inherited from AT, duplicated here for universality */

.ir {
  /* Kellum Method */
  display: block !important;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  /* Additional helpers */
  border: 0; /* Remove the default border from elements like button */
  font: 0/0 a; /* Crush the text down to take up no space */
  text-shadow: none; /* Remove any text shadows */
  color: transparent; /* Hide any residual text in Safari 4 and any mobile devices that may need it */
  background-color: transparent; /* Hide the default background color on elements like button */
}

.element-invisible {
    border: 0px none;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0px;
    position: absolute !important;
    width: 1px;
}

.container {  margin: 0 auto; }

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.clearfix {
  zoom: 1;
}