/* Start of right hand side banner */
.right_strip {position: absolute; top:0%; width: 9vw; height: 98vh; left: 90vw; padding:1px 15px; border: 2px none white; background:orange; text-align:center;}
.sm_logo {position: absolute; top: 4%; margin-left:-1px; width: 80%; height: auto; border: 1px none black;} 

/* used in Mdg_districts_2.html */
.res_btn {position: absolute; top: 16%; left: 2%; width: 60%; height: auto; border: 1px none white; }	
.btn_res {background-color: green; border: 5px solid green;	 border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; font-size: 1.28vw; cursor: pointer;}  
.map_btn {position: absolute; top: 21%;	left: 2%; width:80%; height: auto; border: 1px none white;}	
.btn_map {background-color: green; border: 5px solid green;	border-radius: 20px;  color: white;  padding: 0px 9px; font-size: 18px; font-size: 1.28vw; cursor: pointer;} 
.btn_res:hover, .btn_map:hover {background-color: red; border: 5px solid red;}
 
 /* used in Mdg_dist_map.html */
 .btn_exit {position: absolute; top: 16%; left: 2%; width: 60%; height: auto; border: 1px none white;}
.exit_btn {background-color: green; border: 5px solid green;	 border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; font-size: 1.28vw; cursor: pointer;}  
.bnt_bck  {position: absolute; top: 21%; left: 2%; width: 80%; height: auto; border: 1px none white;}
.bck_btn  {background-color: green; border: 5px solid green;	border-radius: 20px;  color: white;  padding: 0px 9px; font-size: 18px; font-size: 1.28vw; cursor: pointer;} 
.exit_btn:hover, .bck_btn:hover {background-color: red; border: 5px solid red;} 

/* End of right hand side banner */
.watermark {position:fixed; top: 3%;left: 3%;width: 10%;height:10%;}

/* Exit button   */
.offde_btn {display:block; position: fixed; top: 8%; left: 70%; width: auto; height:auto; text-align:center; border: 1px none black; z-index: 15;}	
.btn_offde {display:block; background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 10px 10px; font-size: 14pt; font-weight:bold; cursor: pointer;}
.btn_offde:hover {background-color: red; border: 5px solid red;}
	
#Bail_box {position: absolute; width: 40%; height: auto; margin-top: 7%; margin-left: 30%; padding:1px 15px; border: 1px none black; background:white; text-align:center; animation: fadein 6s; -moz-animation: fadein 6s; /* Firefox */ -webkit-animation: fadein 6s; /* Safari and Chrome */ -o-animation: fadein 6s; /* Opera */ }

#smll_box {position: absolute; width: 60%; height: auto; margin-top: 11%; margin-left: 16%; padding:1px 15px; border: 1px solid black; background:white; text-align:center;}

#point_box {position: relative; width: 930px; height: auto; margin-top: 0%; margin-left: 35%; padding:0px 0px; border: 1px none black; background:white; text-align:left;}

h1 {font-size:20pt; font-size:1.33vmax; font-family:"Calibri","sans-serif"; font-weight:bold; padding:0;}
h2	{font-size:18pt;font-size:1.1vmax; font-family:"Calibri","sans-serif"; font-weight:bold; padding:0;	text-align:center;}
h3	{font-size:14pt; font-size: 0.90vmax; font-family:"Calibri","sans-serif"; font-weight:bold;	padding:0;}
ul {list-style-type: none; margin: 0; padding: 0; width: 150%; background-color: #f1f1f1; height: auto; overflow: auto;}

li a {display: block; color: #000; padding: 6px 6px; text-decoration: none;}

li a.active {background-color: #4CAF50; color: white;}

li a:hover:not(.active) {background-color: #555; color: white;}

p.normal {font-size:14pt; font-size: 0.95vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:justify;	line-height:1.5; padding: 1px 5px;}
p.italics {font-size:14pt; font-size: 0.95vmax;	font-style:italic; font-family:"Calibri","sans-serif";	font-weight:normal;	text-align:left; padding: 2px 5px;}
p.sub-heading {font-size:14pt; font-size: 0.95vmax; font-style:italic; font-family:"Calibri","sans-serif"; font-weight:normal; line-height:0.1; text-align:left; }
p.centa {font-size:14pt; font-size: 0.95vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:1.5; }
p.centa_1 {font-size:14pt; font-size: 0.95vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:1.0; }
p.back  {font-size:14pt; font-size: 0.95vmax; font-family:"Calibri","sans-serif"; font-weight:bold; text-align:center; line-height:1.5; }
p.loc {font-size:12pt; font-size:0.78vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:justify; }	
p.main {font-size:12pt; font-size:0.91vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:justify; }
p.points {font-size:14pt; font-size: 0.95vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:left; line-height:0.2; padding: 2px 2px; }
p.museum_points {font-size:12pt; font-size: 0.91vmax; font-family:"Calibri","sans-serif"; font-weight:normal; line-height:0.6; padding: 2px 2px;}
p.spacer {font-size:6pt; font-size:0.4vmax;	 font-family:"Calibri","sans-serif"; font-weight:normal; text-align:justify; line-height:0.2; }
p.bbg {font-size:14pt; font-size:4.6vh; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:justify; line-height:1.5; }
p.head1_bbg {font-size:18pt; font-size:6.0vh; font-weight:bold;	padding:0;}
p.small {font-size:10pt; font-size:0.76vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:justify; line-height:0.8;}	

.col_1 {width:120%; border: 2px none blue;  height:10%;}
.col_2 {width:20%; border: 2px none blue; }
@keyframes fadein {
    from {opacity:0;}
    to {opacity:1;}
}
@-moz-keyframes fadein { /* Firefox */
    from {opacity:0;}
    to {opacity:1;}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {opacity:0;}
    to {opacity:1;}
}
@-o-keyframes fadein { /* Opera */
    from {opacity:0;}
    to {opacity: 1;}
}
#rcorners1 {position:fixed; top:95%; left:45%;  width:4%;   height:8%;   background:#3CB371;text-align:center; padding: 0; border-radius: 8%;}
#dummyDIV {position:absolute; top: 1400px; left:0%;	width:1%; height:1300px; background: none; display:block; overflow:hidden; }
#chid_dummyDIV {position:absolute; top: 2400px; left:0%; width:1%; height:1600px; background: none; display:block; overflow:hidden;} 
#mdg_dummyDIV {position:absolute; top: 2000px; left:0%; width:1%; height:3000px; background: none; display:block; overflow:hidden; }
#legend {position: absolute; top:4.5%; left:10%; width: 38%; height: 3%; border: 1px none black; background:white; text-align:center;}
#localities {position: absolute; top:7.5%; left: 10%; width: 5%; height: auto; border:1px none black;  font-family:"Calibri","sans-serif"; font-weight: normal; padding:1px 1px;}
#mundaring_district {position: absolute; top:7.5%; 	left: 17%;	width: 25.5%;	height:auto;	padding:1px 15px;	z-index: 10;	border:1px none black;	background:white;}
#map_mdg {position: absolute;	top:4.5%;	left: 44%;	width: 40%;	height:auto;	padding:0px,0px; border:1px none black;	background:white;	text-align:center;}
 
/*//////////////////////////////////////////////////////////////////////////////
BEGINNING OF MEDIA QUERIES FOR MOBILE-FRIENDLY RENDITIONS
/////////////////////////////////////////////////////////////////////////////*/ 
 
 /* Galaxy S4, S5 and Note3  */
@media screen and (device-width: 360px)and (device-height: 640px) and (-webkit-device-pixel-ratio: 3)and (orientation: portrait) {
 	#Bail_box {position: absolute; top: 1%; left:-29%; width: 90%; height: auto; border: 3px solid black; background:white; text-align:center;}
	p.normal {font-size:12pt;  font-family:"Calibri","sans-serif"; font-weight:normal; text-align:justify;	line-height:1.5; padding: 1px 5px;}
	p.sub-heading {font-size:12pt; font-style:italic; font-family:"Calibri","sans-serif"; font-weight:normal; line-height:0.1; text-align:left;}
	p.centa {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:1.5; }
	h1 {font-size:18pt; font-family:"Calibri","sans-serif"; font-weight:bold;}
	h2	{font-size:16pt; font-family:"Calibri","sans-serif"; font-weight:bold; text-align:center;}
	@keyframes fadein {from {opacity:1;}to {opacity:1;}}
	@-moz-keyframes fadein { /* Firefox */from {opacity:1;}to {opacity:1;}}
	@-webkit-keyframes fadein { /* Safari and Chrome */from {opacity:1;}to {opacity:1;}}
	@-o-keyframes fadein { /* Opera */from {opacity:1;}to {opacity: 1;}}
}
 
 
 /* Galaxy S6,S7  */
@media screen and (device-width: 360px)and (device-height: 640px)and (-webkit-device-pixel-ratio: 4)and (orientation: portrait) {
   	#Bail_box {position: absolute; top: 1%; left:-29%; width: 90%; height: auto; border: 3px solid black; background:white; text-align:center;}
	p.normal {font-size:12pt;  font-family:"Calibri","sans-serif"; font-weight:normal; text-align:justify;	line-height:1.5; padding: 1px 5px;}
	p.sub-heading {font-size:12pt; font-style:italic; font-family:"Calibri","sans-serif"; font-weight:normal; line-height:0.1; text-align:left;}
	p.centa {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:1.5; }
	h1 {font-size:18pt; font-family:"Calibri","sans-serif"; font-weight:bold;}
	h2	{font-size:16pt; font-family:"Calibri","sans-serif"; font-weight:bold; text-align:center;}
	@keyframes fadein {from {opacity:1;}to {opacity:1;}}
	@-moz-keyframes fadein { /* Firefox */from {opacity:1;}to {opacity:1;}}
	@-webkit-keyframes fadein { /* Safari and Chrome */from {opacity:1;}to {opacity:1;}}
	@-o-keyframes fadein { /* Opera */from {opacity:1;}to {opacity: 1;}}
}

/* iPhone 6, 7 & 8  */	
@media only screen and (max-device-width : 667px) and (-webkit-device-pixel-ratio: 2) and (orientation : portrait) {
	#Bail_box {position: absolute; top: 1%; left:-29%; width: 90%; height: auto; border: 3px solid black; background:white; text-align:center;}
	p.normal {font-size:12pt;  font-family:"Calibri","sans-serif"; font-weight:normal; text-align:justify;	line-height:1.5; padding: 1px 5px;}
	p.sub-heading {font-size:12pt; font-style:italic; font-family:"Calibri","sans-serif"; font-weight:normal; line-height:0.1; text-align:left;}
	p.centa {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:1.5; }
	h1 {font-size:18pt; font-family:"Calibri","sans-serif"; font-weight:bold;}
	h2	{font-size:16pt; font-family:"Calibri","sans-serif"; font-weight:bold; text-align:center;}
	@keyframes fadein {from {opacity:1;}to {opacity:1;}}
	@-moz-keyframes fadein { /* Firefox */from {opacity:1;}to {opacity:1;}}
	@-webkit-keyframes fadein { /* Safari and Chrome */from {opacity:1;}to {opacity:1;}}
	@-o-keyframes fadein { /* Opera */from {opacity:1;}to {opacity: 1;}}
}	

/* iPhone 6, 7 ,8 Plus  */	
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) {
	#Bail_box {position: absolute; top: 1%; left:-29%; width: 90%; height: auto; border: 3px solid black; background:white; text-align:center;}
	p.normal {font-size:12pt;  font-family:"Calibri","sans-serif"; font-weight:normal; text-align:justify;	line-height:1.5; padding: 1px 5px;}
	p.sub-heading {font-size:12pt; font-style:italic; font-family:"Calibri","sans-serif"; font-weight:normal; line-height:0.1; text-align:left;}
	p.centa {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:1.5; }
	h1 {font-size:18pt; font-family:"Calibri","sans-serif"; font-weight:bold;}
	h2	{font-size:16pt; font-family:"Calibri","sans-serif"; font-weight:bold; text-align:center;}
	@keyframes fadein {from {opacity:1;}to {opacity:1;}}
	@-moz-keyframes fadein { /* Firefox */from {opacity:1;}to {opacity:1;}}
	@-webkit-keyframes fadein { /* Safari and Chrome */from {opacity:1;}to {opacity:1;}}
	@-o-keyframes fadein { /* Opera */from {opacity:1;}to {opacity: 1;}}
}
/* iPads (all)  */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	#Bail_box {position: absolute; top: 1%; left:-29%; width: 90%; height: auto; border: 3px solid black; background:white; text-align:center;}
	p.normal {font-size:12pt;  font-family:"Calibri","sans-serif"; font-weight:normal; text-align:justify;	line-height:1.5; padding: 1px 5px;}
	p.sub-heading {font-size:12pt; font-style:italic; font-family:"Calibri","sans-serif"; font-weight:normal; line-height:0.1; text-align:left;}
	p.centa {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:1.5; }
	h1 {font-size:18pt; font-family:"Calibri","sans-serif"; font-weight:bold;}
	h2	{font-size:16pt; font-family:"Calibri","sans-serif"; font-weight:bold; text-align:center;}
	@keyframes fadein {from {opacity:1;}to {opacity:1;}}
	@-moz-keyframes fadein { /* Firefox */from {opacity:1;}to {opacity:1;}}
	@-webkit-keyframes fadein { /* Safari and Chrome */from {opacity:1;}to {opacity:1;}}
	@-o-keyframes fadein { /* Opera */from {opacity:1;}to {opacity: 1;}}
}