/*********************  
	DARO Mod Mobile - Fix (responsive) flaws found in otago_mobile-navigation.css
	NOTE: This is a quick and nasty fix. But it is better than having it broken.
*********************/

@media only screen and (max-width: 1177px) {
	#wrapper { width: 1160px; }
}

@media only screen and (max-width: 1024px) {
	#wrapper { width: 100%; }
}

@media only screen and (max-width: 945px) {
	#wrapper { width: 928px; }
}

@media only screen and (max-width: 768px) {
	#wrapper { width: 768px; }
	.grid4 .grid_threequarters { width: 100% !important; }
}

@media only screen and (max-width: 700px) {
	#wrapper { width: 100%; }
}

/*********************  
	./DARO Mod Mobile 
*********************/

/*   Move Page Metadata column out of the way   */
#right {
background-image: none;
clear: both;
margin: -250px 0 0 0;
padding: 0;
}

/*   Maximise image width so it scales correctly on both desktop and mobile view   */
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

/*   Why not?   */
#title h1.notopimage {
  max-width: 100%;
}

/*   It makes sense to have a two third grid no?   */
#content .grid4 .grid_twothird { 
	width: 571px; 
	margin-right: 46px; 
	float: left; 
}

#content .grid4 .grid_third-pic-border {
	border-top: 1px solid #E6E2D5;
	border-bottom: 1px solid #E6E2D5;
	background: none repeat scroll 0% 0% #F6F5F0;
	margin-bottom: 10px;
}

#content .grid2-border,
#content .gridthird-border {
	border-top: 1px solid #E6E2D5;
	border-bottom: 1px solid #E6E2D5;
	background: none repeat scroll 0% 0% #F6F5F0;
	margin-bottom: 42px;
}

#content .grid2 #grid2-content,
#content .grid_third #gridthird-content {
	padding: 14px;
	min-height: 203px;
}

#fundraising-background {
	display: inline-block; 
	border-top: 1px solid #e6e2d5; 
	border-bottom: 1px solid #e6e2d5; 
	background: none repeat scroll 0% 0% #f6f5f0;
}

@media only screen and (max-width: 1025px) {
	#content .grid4 .grid_twothird { width: 100%; margin-right: 0; }
	#content .grid4 #staff-photos { margin-bottom: 50px; }
}

@media only screen and (max-width:1024px) and (min-width: 769px) {
	#content .grid2 { width: 100%; }
}

@media only screen and (max-width: 768px) {
	#right { margin: 0px; }
}

@media only screen and (max-width: 700px) {
	#content .grid4 .grid_third-pic-border { width: 309px; }
	#content img { max-width: 100%; float: left; margin-left: 0; }
}

.picture-link {
	border-bottom: 0 !important;
}

.email-reverse:before {
	content: attr(data-website) "\0040" attr(data-user);
  	unicode-bidi: bidi-override;
  	direction: rtl;
}

/* CUSTOM CSS FOR THE ALUMNI MAP */
#map {
	width: 100%;
	height: 500px;
	border: 1px solid #dddddd;
}

.minimap { 
	width: 100%;
	min-width: 420px;
	height: 400px;
	border: 1px solid #dddddd;
}

.leaflet-popup-content-wrapper {
	border-radius: 2px;
}

.leaflet-container a.leaflet-popup-close-button,
.leaflet-container .leaflet-control-attribution a {
	padding: 0;
	border-bottom: 0 !important;
}

.leaflet-popup-content h4 {
	font-family: Georgia, "Times New Roman",Times,serif;
	font-size: 18px;
	line-height: 1.35;
	margin-bottom: 7px;
}

.goleft .leaflet-popup-content-wrapper {
	margin-left: -200px;
}

.goright .leaflet-popup-content-wrapper {
	margin-left: 200px;
}

.nomarker-pointer .leaflet-popup-tip-container {
	display: none;
}

.leaflet-container .leaflet-control-attribution {
	background: rgba(0,0,0,0.1)
}

.leaflet-container { 	
	cursor: auto; 	 	
}


/* MOBILE CSS FOR THE ALUMNI MAP */

@media only screen and (min-width: 1024px) {
	.nomap { display: none; }
}

@media only screen and (max-width: 1024px) {
	.nomap { display: inline; }
	#map { display: none; }
}

@media only screen and (max-width: 700px) {
	.leaflet-popup-content-wrapper { min-height: 150px; }
	#austmap .leaflet-popup-content-wrapper { min-height: 200px; }
}


/* ./MOBILE CSS FOR THE ALUMNI MAP */
/* ./CUSTOM CSS FOR THE ALUMNI MAP */