/*************************************************
	SMALLEST @ MEDIA / Small tablet to smartphone
	base width: < 700px
**************************************************/
@media only screen and (max-width: 700px) {
	#title p.heading-translation { padding-left: 0; }
	#title ul#breadcrumbs { margin-left: 0; }
	#content .grid4, #content .grid3, #content .grid2, #content .grid1 { width: 100%; }
	#content .grid4 .grid_third {
		width: 100%;
		margin-right: 0;
		float: none;
		overflow: hidden;
	}
	#wrapper { width: 100%;	}
	/* Bookmark menu link */
	#menu-link {
		width: 52px;
		height: 58px;
		display: block;
		z-index: 100;
		left: 4%;
		margin-left: 0%;
		position: absolute;
		background-image: url(/_assets/_gfx/menu-button.png);
		background-repeat: no-repeat;
		padding: 0.4em 0;
		text-indent: -9999px;
	}
	#close_mobile_nav {
		background-image: url(/_assets/_gfx/close-mobile.png);
		background-repeat: no-repeat;
		background-position: right -10px;
		width: 52px;
		height: 52px;
		position: absolute;
		right: 5%;
		display: block;
		text-indent: -9999px;
		-webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
	}
	#close_mobile_nav:active { opacity: 0; }
	div#nav_holder {
		width: 75%;
		max-width: 300px;
		position: absolute;
		top: 0;
		left: -45em;
    -webkit-transition: all 0.4s ease-out;
		transition: all 0.4s ease-out;
	}
	div#nav_holder.active { left: 0; }
	div#nav_wrapper { width: 100%; }
	nav#global_nav {
		width: 100%;
		background: #15376b;
		background: -ms-linear-gradient(top, #14366a 0%,#0e274c 64%);
		background: -webkit-linear-gradient(top, #14366a 0%,#0e274c 64%);
    background: linear-gradient(to bottom, #14366a 0%,#0e274c 64%);
	}
	#global_nav_sub { border-bottom: none; }
	div#uni_logo.expanded { background: none; }
	#global_nav_sub ul:first-of-type { width: 100% !important; }
	#uni_logo.expanded #global_nav_sub { background: none; }
	div#uni_logo {
		width: 100%;
		border-left: 2px solid #14366a;
		border-right: 2px solid #14366a;
	}
	div#uni_logo img { padding-bottom: 0px;	}
	/* Spacing of naviation list elements */
	#global_nav_sub ul li a, #global_nav_sub_home ul li a {
		padding: 14px 0;
		background: none;
	}
	#global_nav_sub ul.secondary_global_nav li a { padding: 14px 0;	}
	#global_nav_sub.javascript ul li a, #global_nav_sub_home.javascript ul li a {
		background-position: 90% 12px;
		-webkit-transition: all 0.2s ease-out;
		transition: all 0.2s ease-out;
	}
	#global_nav_sub.javascript ul li a:hover, #global_nav_sub_home.javascript ul li a:hover {
		background-position: 90% 12px;
	}
	#global_nav_sub.javascript ul li:first-child a, #global_nav_sub_home.javascript ul li:first-child a {
		background-position: 90% 12px;
	}
	#global_nav_sub.javascript ul li:first-child a:hover, #global_nav_sub_home.javascript ul li:first-child a:hover { background-position: 90% 12px; }
    body.frontpage #uni_logo #global_nav_sub ul.secondary_global_nav li a { background: none; }
	header#global_intro { margin: 21px 0; }
	header#global_intro h1 { font-size: 24px; }
	div.global_nav_main ul {
		font-size: 15px;
		margin-top: 21px;
		margin-bottom: 21px;
	}
	div.global_nav_main ul li { background: none; margin-bottom: 18px; }
  div.global_nav_main a { background: none; }
	div.global_nav_footer {
		width: 100%;
		height: 76px;
		padding: 48px 0px 0;
		position: absolute;
		bottom: -120px;
		left: 0%;
		z-index: 5;
		background-image: url(/_assets/_gfx/bookmark-flyout-mobile-tail.png); background-size: contain; background-position: 0 0; background-repeat: no-repeat;
	}
	#topnav { margin-top: 0px; }
	.topnavinner {
		width: 97%;
		margin: 0 0 0 0px;
		padding: 0 0% 0 80px;
    box-sizing: border-box;
	}
	/* Search box styles */
	#globalsearch {
		float: none;
		width: auto;
		padding-top: 3px;
		margin-left: 0px;
	}
	#globalsearch form input.searchinput {
		height: 24px;
		width: 80%;
	}
	#globalsearch form fieldset { height: 24px; padding-right: 7px; }
	#globalsearch form button {
		height: 24px;
		width: 10%;
		border: none;
		background-position: 0px -56px;
		float: right;
	}
  .svg #globalsearch form button {
    background: url("/_assets/_gfx/search-icon-mobile.svg") no-repeat right center;
    background-size: 17px;
  }
  .svg #globalsearch form button:hover { background-color: #fceebd; }
	.svg #globalsearch form button:active { background-size: 15px; }
	.svg #globalsearch form button:active { background-position: -17px -25px; background: url("/_assets/_gfx/search-icon-mobile.svg") no-repeat right center; }
	#globalsearch form button:active { background-position: -17px -25px; }
		input[placeholder] {
		color: #444444;
		font-style: italic;
	}
	#globalsearch form fieldset {
		height: 22px;
	}
	#globalsearch form input.searchinput {
		background: none;
		border-radius: 16px;
		font-style: normal;
		height: 22px;
		padding: 3px 10px !important;
	}
	 .svg #globalsearch form button {
    background-size: 14px;
  }
	.titleinner {
		width: 90%;
		padding: 14px 0 0 0px;
	}
	#title h1 {
		position: relative;
		padding: 28px 0 14px 0;
		font-size: 28px;
	}
	#title img { display: none;	}
	#contentwrapper {
		width: 95.5%;
		margin: 0 4% 14px 4%;
		padding: 0;
	}
	#content {
		width: 95%;
		padding: 12px 0px 46px 0px;
	}
	#content img,
	#content p img,
	#content p img[align="right"] {
		max-width: 50%;
		height: auto;
		float: right;
		margin-left: 8px;
	}
	#content h2 {
		font-size: 1.6em;
		line-height: 1.3;
		padding-bottom: 4px;
	}
	#content h3 {
		font-size: 1.3em;
		line-height: 1.4;
	}
	#content p.caption_186, #content p.caption186, #content p.caption_232, #content p.caption232 { width: 100%; }
	#content p.caption_186 img, #content p.caption186 img, #content p.caption_232 img, #content p.caption232 img { margin: 0px 0px 7px 0px; }
	#content p.fullwidthimage img { max-width: 98%;	}
	#content blockquote.pulledquote {
		float: none;
		width: 157px;
		margin: 0px 0px 14px 0px;
	}
	#content p.topofpage { margin-bottom: 21px; }
	#content article.event .insideevent { width: 100%; }
	#content table {
		display: block;
		overflow-x: auto;
		border: 1px solid #e4e4e4;
	}
	th { font-size: 11px; }
	#content table tr:last-child { border-bottom: none; }
	/* Form styles */
	#content form {
		width: 97%;
		margin: 0;
		padding: 0;
	}
	#content form fieldset {
		margin: 0 0 14px -8px;
		padding: 0 0 14px 3%;
		width: 100%;
	}
	#content form fieldset fieldset.leftright div.right { width: 100%; }
	#content form fieldset.leftright fieldset .help { display: none; }
	#content input { width: 75%; }
	#content form fieldset input[type=text] { max-width: 100%; }
	#content form fieldset textarea { width: 75%; }
	#content form fieldset legend,
	#content form fieldset fieldset legend { width: 77%; }
  #content form fieldset label {
  	width: 99%;
  	margin: 7px 0px 0px 0;
  }
	#content form .help {
    left: auto;
	position: relative;
	top: 2px;
	float: right;
	right: 9px;
  }
  #content form div.help:hover div { left: -82px; }
  #content form fieldset select {
  	width: 79%;
  	padding-top: 4px;
	}
	#content form select.month {
  	width: 19%;
  	margin: 0px;
	}
  #content form select.day {
  	width: 19%;
  	margin: 0px 0px 0px 4px;
	}
	#content form fieldset button { margin-top: 14px; }
	#content input[type="checkbox"] {
  	width: 20px;
  	min-height: 20px;
  }
	#content .atoz a {
  	border: 1px solid #e4e4e4;
  	padding: 3px 5px;
  	background: #ffffff;
  	display: inline-block;
  	border-radius: 4px;
  	text-align: center;
  	margin-bottom: 14px;
  	margin-right: 14px;
	}
  /* Tile styles */
	#content .tile-box-shadow-thumbnail-description img,
	#content .tile-box-shadow-thumbnail-no-description img { float: none; }
  /* Pagination */
  #content .atoz.pagination a.previous { margin-right: 14px; }
	/* Google Maps fix for tile display */
	#content .gm-style img { max-width: 100%; }
	body.OTAGO006306 #content .atoz a {
		width: auto;
    	height: auto;
    	padding: 6px 10px 6px 10px;
    	border: 1px solid #e4e4e4;
    	margin-right: 7px;
	}
	#right p.disclaimer {
   		width: 97%;
    	position: static;
    	left: auto;
    	top: auto;
	}
	#right p.disclaimer:last-child { margin-top: 14px; }
    /* Grid styles */
	#content .grid5 { width: 100%; }
  #content .grid4 { width: 100%; }
  #content .grid2 {
  	width: 100%;
  	margin-right: 0;
  	float: none;
	}
	/* Video player */
	#content .videocontentdiv {
  	width: 100%;
  	float: left;
  	margin: 0px 0px 14px 0px;
  	min-height: 130px;
	}
	/* Google search styles */
  #content #google form fieldset { padding-right: 0px; }
	#google ul.ui-tabs-nav {
		margin: 0 0 0 0 !important;
		padding-left: 22px !important;
		width: 99%;
	}
	#google .ui-tabs-panel { margin: 0; }
  .ui-tabs { padding: 0; }
  #google .ui-tabs .ui-tabs-panel { padding: 1em 0; }
  .ui-tabs .ui-tabs-panel { padding: 1em 0em 1em 1.4em !important; }
	#google ul.ui-tabs-nav li {
		margin-bottom: 0px !important;
		margin-right: 3px !important;
		font-size: 10px;
	}
	.ui-tabs .ui-tabs-nav li a {
  	padding: 1em 3% !important;
		font-size: 10px;
  }
  #google .ui-tabs .ui-tabs-nav li a {
  	padding: 1em 3% !important;
		font-size: 10px;
  }
  #content #google input { width: 75%; }
	#content #google button { max-width: 186px;	}
	#content form fieldset input[type="text"] { max-width: auto; }
	#content #google button,
	#content #google input[type="submit"],
	#content #google input[type="button"] { width: 75% !important; }
  #google .ui-tabs-panel { margin: 0px 0px 0px -15px !important; }
  #google blockquote.g {
  	word-wrap:break-word;
  	padding-right: 3%;
	}
	#google blockquote.g div { margin-left: 5% !important; }
	/* A-to-z first number */
	#google .i {
		border: 1px solid #555555 !important;
  	padding: 6px 0px 0 0;
  	background: rgb(65, 110, 191);
  	display: inline-block;
  	border-radius: 16px;
  	width: 22px;
  	height: 20px;
  	text-align: center;
  	margin-bottom: 14px;
  	margin-right: 19px;
  	padding: 2px 0 0 0 !important;
  	color: #ffffff;
	}
	/* A-to-z last button */
	#google .b a {
		background: none;
		display: none;
	}
	#content #google .atoz a {
		padding: 2px 0px 0px 0px;
		width: 22px;
		height: 22px;
		margin-right: 20px;
		font-weight: normal;
	}
	#content #google form button.submit { float: none; }
  #content .podcast { padding: 3%; }
	#content .podcast h3 {
		width: 94.5%;
		margin-right: 0;
		margin-left: 19px;
		margin-bottom: 14px;
	}
	#content .podcast h3:before { background-position: 0px center; }
	#content .podcast img {
		width: 100%;
		max-width: 100%;
		padding: 0;
		margin: 0 0 21px 0;
		height: auto;
	}
	#content .podcast .video { margin-right: 10%; }
	#content .podcast p.smalltag { width: 94.5%; }
  /* Right hand styles */
	#right {
		width: 96%;
		padding: 0 0 0 0;
		border-top: 1px solid #e4e4e4;
	}
	#right ul { border-bottom: none; }
	#right p { border-bottom: none; }
	#right .rightwidget {
		padding-right: 0;
		min-height: auto;
		padding: 14px 0px 0px 0px;
		width: 100%;
		border-bottom: 1px solid #e4e4e4;
		border-top: none;
	}
	#right .rightcontentwysiwyg { overflow: visible; }
	#right .rightcontentwysiwyg div {
    	width: 100%;
    	float: none;
    	display: inline-block;
    	margin: 0px 0px 7px 0px;
    	background: none;
    }
  #right .askotago h2, #right .downloads h2, #right .itunesu h2, #right .onlineapps h2, #right .publication h2, #right .quicklinks h2, #right .registration h2, #right .relatedinfo h2, #right .search h2, #right .summerschool h2, #right .toolkit h2, #right .video h2, #right .shoppingcart h2, #right .features h2, #right .odtnews h2, #right .accommodation h2, #right .otagochoice h2, #right div.weather h2 {	background: none; }
  #right .askotago:hover h2, #right .downloads:hover h2, #right .itunesu:hover h2, #right .onlineapps:hover h2, #right .publication:hover h2, #right .quicklinks:hover h2, #right .registration:hover h2, #right .relatedinfo:hover h2, #right .search:hover h2, #right .summerschool:hover h2, #right .toolkit:hover h2, #right .video:hover h2, #right .shoppingcart:hover h2, #right .features:hover h2, #right .odtnews:hover h2, #right .accommodation:hover h2, #right .otagochoice:hover h2, #right div.weather:hover h2 { background: none; }
	#right .relatedinfo { width: 45%; }
	#right fieldset, #right .relatedinfo, #right .relatedinfo_inside, #right .search,
	#right .askotago, #right .registration, #right .odtnews, #right .otagochoice, #right #pagemetadata {
		width: 100%;
		margin-right: 0;
	}
	#right div.forecast h2 { padding: 0.5em 1em 0.5em 0em; }
	#right button.search, #right input[type="submit"], #right input[type="button"], #right button { width: 50%;	}
	#right .news, #right .events { width: 100%;	}
	#right .events article { background: none; }
	#right .features article {
    	float: none;
    	width: 100%;
    	margin-right: 0px;
	}
	#right img {
		width: auto;
		max-width: 100%;
	}
	#features { width: 96%;	}
	#features .news {
	    width: 100%;
	    float: none;
	    margin-right: 0;
	}
	#features .news article { width: 100%; }
	.news article .articletext {
    	width: 100%;
    	float: none;
	}
	.news article img {
    	float: none;
    	margin-right: 0;
    	width: auto;
	}
	.events article { background: none; }
	#right form { width: 97%; }
  #right label, #right input, #right textarea {
    	width: 75%;
    	height: 21px;
    	margin-top: 14px;
			margin-bottom: 14px;
  }
  #right select {
    	width: 79%;
    	margin-bottom: 7px;
	}
  #right input[type="submit"], #right input[type="button"], #right button {
  	margin-top: 7px;
		margin-bottom: 14px;
		font-family: Georgia, "Times New Roman", Times, serif;
		padding: 3px 0;
		font-size: 14px;
  }
  #right #pagemetadata {
  	width: 96%;
  	float: none;
  	clear: both;
	}
	#right #slides .otagoprofile div { width: 100% !important; }
  #slides .otagoprofile p {
		width: 100%;
		float: none;
	}
	#slides .otagoprofile p:nth-of-type(2n) { margin-left: 0px;	}
	#slides .otagoprofile div { width: 100%; }

	/*--------
	Footer
	--------*/

	div#footer_bg {	width: 100%; }
	footer.wrapper, div.footer_wrapper {
		width: 100%;
		padding: 4% 0px 2% 0%;
		margin: 0;
		font-size: 11px;
		background-size: 50%;
	}
	nav.global_footer {
		width: 90%;
		padding-left: 4%;
	}
	nav.global_footer ul:nth-child(1) {	margin-bottom: 19px; }
	section.footer_address {
		width: 96%;
		margin-right: 0px;
		margin-top: 14px;
		margin-bottom: 21px;
		padding-left: 4%;
	}
	section.footer_address p { margin-bottom: 10px;	}
	section.footer_address a {
		border-bottom: none;
		text-decoration: none;
	}
	section.footer_top { padding: 0; }
	section.footer_top p { font-size: 11px;	}
	ul.footer_contact, ul.footer_contact li, ul.footer_social_lang li {
		float: left;
		font-size: 11px;
		padding-left: 4%;
	}
	ul.footer_contact li span, ul.footer_social_lang li span { font-size: 11px;	}
	ul.footer_contact li { padding-right: 4%; }
	ul.footer_contact li:nth-child(-n+2) { border-right: 1px solid rgb(88, 124, 180); }
	ul.footer_social_lang {
		float: left;
		padding-left: 4%;
	}
	/* Removes Accessibility link from blue strip */
	/*.footer_social_lang li:first-child { display: none;	}*/
  /* Translate */
	ul.footer_contact,
	ul.footer_contact li,
	ul.footer_social_lang li,
	ul.footer_contact li span,
	ul.footer_social_lang li span,
	section.footer_top p { font-size: 13px; }
	#footer_translate { padding-top: 0; padding-bottom: 0; padding-left: 24px; background-size: 14px;	}
	ul.footer_social_lang li span { font-size: 13px; }
	div.footer_slide { bottom: 0px;	}
	div.share_page {
  	right: auto;
  	left: 2%;
	}
	section.footer_top ul li {
		padding: 0px 6px 0px 4px;
		margin-bottom: 7px;
	}
	img#back_to_top { display: none; }
	nav.global_footer ul { width: 100%;	}
	nav.global_footer ul li:first-child {
		width: auto;
		font-size: 13px;
		display: inline-block;
	}
	nav.global_footer ul {
		width: 45%;
		float: left;
		clear: none;
		margin-right: 2%;
	}
	nav.global_footer ul:nth-of-type(4n+4) { margin-right: 2%; }
	nav.global_footer ul li {
		float: none;
		width: auto;
		display: none;
		word-break: break-word;
		-webkit-hyphens: auto;
  	-moz-hyphens: auto;
    hyphens: auto;
    padding: 0px 0px 3px 0px;
    line-height: 16px;
	}
	nav.global_footer ul#social_media { width: 100%; }
	nav.global_footer ul#social_media li { display: block; }
	nav.global_footer ul li:first-child,
	nav.global_footer ul li.first-child-title { background: none; }
	nav.global_footer .clearFix { display: inline-block; }
	footer ul { font-size: 12px; }
	section.footer_bottom ul { margin-bottom: 14px;	}
	section.footer_bottom ul li {
		padding: 0px 1.5%;
		border-right: 1px solid #cccccc;
		margin: 3px 0%;
		display: inline-block;
	}
	section.footer_top ul li { background: none; }
	/* Removes top of page link from blue footer strip */
	#footer_top { display: none; }
	/* Positions social icons at the bottom of the page */
	#social_media li {
		float: left;
		width: 30%;
	}
	#social_media li:first-child { width: 100%;	}
	/* Space between the social links and the white strip */
	nav.global_footer ul:last-child { margin-bottom: 14px; }
	/* White strip at the bottom */
	section.footer_bottom {
		padding-top: 14px;
		border-top: 1px solid #e4e4e4;
	}
  /* Footer awards section */
  .matariki-logo {
		margin-left: 4%;
		margin-right: 4%;
		width: 44%;
	}
	.matariki-logo a {
		width: 145px;
		height: 60px;
		float: none;
		border-right: none;
	}
	.qsstars-logo { height: auto; }
	.qsstars-logo a {
    width: 110px;
		height: 60px;
		float: none;
		border-right: none;
  }
	/* Emergency banner styles */
	#emergency {
    width: 100%;
    z-index: 99;
  }
  #emergency_left {
  	margin-right: 0px;
  	float: none;
  }
	#emergency #emergency_inner,
	#emergency.critical #emergency_inner {
    width: 100%;
    padding: 0px 0px;
  }
  #emergency #emergency_left,
  #emergency.critical #emergency_left {
    width: 70%;
    padding-left: 80px;
    padding-top: 2px;
    line-height: 1.0;
  }
  #emergency #emergency_left a,
  #emergency.critical #emergency_left a {
    font-size: 11px;
    font-weight: normal;
  }
}

@media only screen and (max-width: 420px) {
	/* Tile styles */
	.tile-box-shadow,
	.tile-box-shadow-description,
	.tile-box-shadow-thumbnail-description,
	.tile-box-shadow-thumbnail-no-description {
		width: 100%;
		margin-right: 0;
	}
	#content .g-recaptcha + button.submit {
  	width: 100% !important;
  	float: none;
		clear: left;
		text-align: center;
 	}
}

/*  Retina media queries for the graphics on small devices  */

@media
only screen and (max-width: 700px) and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (max-width: 700px) and (min-device-pixel-ratio: 1.5) {
	#menu-link {
		width: 52px;
		height: 58px;
		background-image: url(/_assets/_gfx/menu-button@2x.png);
		background-size: 52px 74px;
	}
	a#menu-link.close {
		background-size: 25px auto;
		background-position: 0 7px;
	}
	#globalsearch form button {
        background: url("/_assets/_gfx/search-icon-mobile.svg") no-repeat scroll 0px 4px transparent;
        background-size: 17px;
    }
    .no-svg #globalsearch form button {
        background: url("/_assets/_gfx/search-icon-mobile.png") no-repeat scroll 0px 4px transparent;
        background-size: 17px;
    }
}