@media screen and (max-width: 980px) {
	/* Defined max-width of main area */

	/* Scale Google maps to fit */
	div#visit div#map_canvas, div#visit div#map_canvas > div, div#visit div#map_canvas > div > img {
		width: 100% !important;
		max-height: 100%;
	}
}

@media screen and (max-width: 850px) {
	/* Adjust triptych height as width decreases*/
	footer .column {
		min-height: 170px !important;
	}
	footer .column.triptych_center img#ucp_small {
		height: 16px;
		top: 0px;
	}

}

@media screen and (max-width: 700px) {
	body {
		background: #E3E4E6 url('/images/bg_collapse.jpg') repeat-x !important;
    font-size:16px;
    line-height: 135%;
	}
	/* Navigation & Header Region
	 * (switch to 3-row navigation header)
	 -----------------------------*/
	#navspace ul#nav {
		width: 100%;
		display: block;
		height: auto;
		padding: 0 0 15px 0 !important;
	}
	#navspace ul#nav li {
		width: 33.33%;
		height: 20px !important;
		float: left;
		position: relative;
	}
	#navspace #nav li:hover ul.sub {
		display: none !important;
	}
	#navspace ul#nav li:hover, #navspace ul#nav a:hover {
		background: none !important;
		text-decoration: underline !important;
	}

	#banner img {
		max-width: 80%;
	}

	/* Center Content Region
	 * (switch to single column with selectnav)
	 -----------------------------*/
	#leftColumn, #centerColumn, #rightColumn, #doubleColumn {
		min-width: 100% !important;
		margin: 10px 0 !important;
		min-height: 10px !important;
	}

	.left, .right {
		width: 98%;
		min-width: 95% !important;
		float: left !important;
		margin: 0 !important;
		/*margin-left: -1em !important; */
	}

	.rightinset {
		border:none;
		background:none;
	}

	.rightinset .caption {
		display:none;
	}

	#doubleColumn {
	  padding: 0 2px;
	}

	/* Now we go to the selectNav.js dropdown menu */
	.js #pageNav {
		display: none;
	}
	.js .selectnav {
		display: block;
	}

	select.selectnav {
		margin: 2px !important;
		font-size: 0.8em;
		font-family: "Ubuntu", "Lucida Grande", Verdana, Arial;
	}
	b.selectnav {
		line-height: 20px !important;
		font-size: 12px !important;
		color: #193C4B;
		font-weight: normal;
		padding: 0 10px 0 10px !important;
		float: left;
	}

	nav #images {
		display: none;
	}

.ui-tabs-panel {
	padding: 0;
}
	/* Footer Region
	 -----------------------------*/
	footer .column {
		min-width: 100% !important;
		margin: 0 !important;
		min-height: 150px !important;
	}
	footer .column ul li {
		width: 28% !important;
		padding: 0 6px !important;
		overflow: hidden;
	}
	footer .column.triptych_center ul li, footer .column.triptych_right ul li {
		width: 90% !important;
	}
	footer .column.triptych_center img#ucp_small {
		height: 24px;
		top: -4px;
	}
	.footernav ul {
		clear: both;
		padding-top: 10px !important;
	}

	footer .column_extra {
		display: block !important;
		background: url("/images/logos/unilogo-200x200_shadow.png") no-repeat 400px -40px #81B2C0 !important;
		max-height: 150px;
	}
	footer .column_extra ul li {
		width: 100% !important;
		font-size: 1.2em;
	}
	footer .column_extra h2 {
		max-width: 380px !important;
	}

	/* Special handling for
	 * mail archive pages
	 -----------------------------*/
	body.pre_content {
		background: #e3e4e6 url("/images/bg_collapse_archive.jpg") repeat-x scroll 0 0 !important;
	}
	body.pre_content #wrap {
		width:980px;
		background:#FFFFFF;
	}
	body.pre_content #container {
		overflow:visible;
	}

}

@media screen and (max-width: 550px) {
	body {
		background: #E3E4E6 url('/images/bg_mobile.jpg') repeat-x !important;
	}

	/* Navigation & Header Region
	 * (switch to pulldown navigation menu)
	 -----------------------------*/
	#search-floater, .loginLinks {
		display: none !important;
	}
	.screen_collapse {
		display: inline !important;
	}

	#navspace ul#nav {
		display: none;
		position: relative;
		top: 38px;
		padding: 0 !important;
		margin: 10px 0 42px 0 !important;
	}
	#navspace ul#nav li {
		width: 50%;
		padding: 0 !important;
		margin: 0 !important;
		height: 30px !important;
	}
	#navspace ul#nav li a {
		padding: 0 0 0 12px !important;
		margin: 0 !important;
	}
	#navspace a#pull {
		display: block;
		left: 1%;
		right: 1%;
		height: 26px;
		position: absolute;
		padding: 10px 0 0 0;
	}
	#navspace a#pull:after {
		content: "";
		background: url('/images/nav-icon.png') no-repeat;
		width: 20px;
		height: 20px;
		display: inline-block;
		position: absolute;
		right: 0px;
		top: 10px;
	}
	/* Center Content Region
	 -----------------------------*/
	#fp_leftcol, #fp_rightcol {
		width: 100% !important;
		padding: 0 !important;
	}

	/* Breadcrumbs
	 -----------------------------*/
	ul#breadcrumbs {
		display: none;
	}

	/* Footer Region
	 -----------------------------*/
	footer .column.triptych_right ul li {
		width: 100% !important;
		padding: 0 !important;
	}
	footer .column_extra {
		background: url("/images/logos/unilogo-200x200_shadow.png") no-repeat 320px -40px #81B2C0 !important;
	}

	/* Special handling for
	 * mail archive pages
	 -----------------------------*/
	body.pre_content {
		background:none;
	}
  body.pre_content #navspace ul#nav {
  	border-bottom: 10px solid black;
    border-top: 10px solid black;
    margin: 0 0 32px !important;
    background:black;
    top: 37px;
  }
}

/* Safari on iPhones inflates text in an unfortunte way in landscape mode. Fix it here */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
	html {
		-webkit-text-size-adjust: 115%;
	}
}

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

	/* Revert to normal iPhone text inflation algorithm. See above.*/
	html {
		-webkit-text-size-adjust: auto;
	}

	/* Footer Region
	 -----------------------------*/
	footer .column ul.follow-icons {
		font-size: 9px !important;
	}
	footer .column ul li img {
		margin: 0 1px 0 0 !important;
	}
	footer .column.triptych_center img {
		display: none;
	}
	footer .column_extra {
		background: url("/images/logos/unilogo-200x200_shadow.png") no-repeat 220px -40px #81B2C0 !important;
	}

}