/* ==================================================================================== */
/*                                    LEAFLET CUSTOM                                    */
/*              For maps. v0.7.3. From http://leafletjs.com/download.html               */
/* Place AFTER style-leaflet-code.css, so these customizations override Leaflet default */
/* ==================================================================================== */

/* ==================================================================================== */
/*                                    MAP (LEAFLET)                                     */
/* ==================================================================================== */

/* ==== MAP AREA ==== */

.map-area, .locate .map-area {
	background-color:lightsteelblue;
	background-size: cover;
	background-position: center center;
    background-repeat: no-repeat;
    width:100%;
	height:0;
	}

.map-area.square, .map-area.a1x1 {		/* Note that style-locate.css has .locate .map-area.square */
	padding: 50% 0;
	}

.map-area.rect, .map-area.a3x2 {		/* Note that style-locate.css has .locate .map-area */	
	padding: 33.33% 0;
	}
	
/* ==== LEAFLET CONTROLS ==== My changes to Leaflet and plugins */

.leaflet-control-container .fullscreen-icon {
	background:white;
	 background-size: 26px 26px;
	}

.leaflet-control-layers-toggle,
.leaflet-retina .leaflet-control-layers-toggle {
	width: 26px;
	height: 26px;
	background:none;
	text-decoration:none;
	border-bottom:none;
	}

.leaflet-control-container .fullscreen-icon:before,	/* Replace provided icons with Font Awesome icons */
.leaflet-control-layers-toggle:before {
	color:#222;
	display:block;
	text-align:center;
	font-family: 'FontAwesome';
	font-style: normal;
	font-weight: normal;
	line-height: 16px;
	font-size:18px;
	padding-top:6px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\f013";	/* cog / settings */	
	}

.leaflet-control-container .fullscreen-icon:before {
	content: "\f065";	/* expand */
	content: "\f0b2";	/* arrows-alt */
	}

.leaflet-control-layers-expanded:before {
	content:"Maps";
	font-weight:bold;
	margin-bottom: .2em;
	display:block;
	}

.leaflet-control-layers-group label {
	padding-left: 0;
	}

.leaflet-control-layers-selector {
	margin-left: .5em;
	}


/* ==== LEAFLET MAP MARKERS ==== */

.leaflet-marker-icon {	/* Moves the entire marker icon set */
	/*
	position:relative;
	top:0px;
	left:0px;
	*/
	}

/* ==== MAP PIN ====*/

.map-pin {	/* red circle */
	width:12px;
	height:12px;
	border-radius:6px;
	background:red;
	position:relative;
	top:-6px;
	left:-6px;
	}

/* ==== MAP MARKER FOR TARGET ==== */

.map-target, .map-pointer {
	width:24vw;
	height:24vw;
	margin:-12vw 0 0 -12vw;
	background-image:url('images/photosecrets/map-icon-target-440x440.png');
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	}
	
.map-pointer {
	background-image:url('images/photosecrets/map-icon-pointer-440x440.png');
	}

/* ==== MAP MARKER FOR PHOTO (LIKE PANORAMIO) ==== */

.map-photo {
	position:absolute;
	display:block;
	/* Do not put z-index here as voids z-index of children */
	}

.map-photo-small {
	position:absolute;
	display:block;
	width:12vw;
	height:12vw;
	margin:-6vw 0 0 -6vw;
	border:1px solid white;
	background-color:lightsteelblue;
	background-size:cover;
	background-position:center;
	background-repeat:none;
	box-sizing:border-box;
	box-shadow:0 0 4px rgba(0,0,0,.5);
	z-index:1;
	/* Setting z-index in CSS has no effect; 
	Leaflet sets z_index based on y coordinate. 
	Cannot set z_index, but can set a z_index OFFSET in pixels. 
	See https://github.com/Leaflet/Leaflet/issues/5560	*/
	}

.map-photo-small.rank0,
.map-photo-small.rank1,
.map-photo-small.rank2,
.map-photo-small.rank3,
.map-photo-small.rank4,
.map-photo-small.rank5,
.map-photo-small.rank6,
.map-photo-small.rank7,
.map-photo-small.rank8,
.map-photo-small.rank9,
.map-photo-small.rank10,
.map-photo-small.rank11,
.map-photo-small.rank12,
.map-photo-small.rank13,
.map-photo-small.rank14,
.map-photo-small.rank15,
.map-photo-small.rank16,
.map-photo-small.rank17 {
	width:20vw;
	height:20vw;
	margin:-10vw 0 0 -10vw;
	z-index:19;
	}

.map-photo-small.rank18 {
	width:18vw;
	height:18vw;
	margin:-9vw 0 0 -9vw;
	z-index:12;
	}

.map-photo-small.rank19 {
	width:16vw;
	height:16vw;
	margin:-8vw 0 0 -8vw;
	z-index:11;
	}

.map-photo-small.rank20 {
	width:14vw;
	height:14vw;
	margin:-7vw 0 0 -7vw;
	z-index:10;
	}


@media (min-width:600px) {

.map-target, .map-pointer {
	width:100px;
	height:100px;
	margin:-50px 0 0 -50px;
	}

.map-photo-small {
	width:80px;		/* default */
	height:80px;
	box-shadow:0 0 6px rgba(0,0,0,.5);
	z-index:1;
	}

.map-photo-small.rank0,
.map-photo-small.rank1,
.map-photo-small.rank2,
.map-photo-small.rank3,
.map-photo-small.rank4,
.map-photo-small.rank5,
.map-photo-small.rank6,
.map-photo-small.rank7,
.map-photo-small.rank8,
.map-photo-small.rank9,
.map-photo-small.rank10,
.map-photo-small.rank11 {
	width:120px;
	height:120px;
	margin:-60px 0 0 -60px;
	z-index:19;
	}

.map-photo-small.rank12 {
	width:112px;
	height:112px;
	margin:-56px 0 0 -56px;
	z-index:18;
	}

.map-photo-small.rank13 {
	width:104px;
	height:104px;
	margin:-52px 0 0 -52px;
	z-index:17;
	}

.map-photo-small.rank14 {
	width:96px;
	height:96px;
	margin:-48px 0 0 -48px;
	z-index:16;
	}

.map-photo-small.rank15 {
	width:88px;
	height:88px;
	margin:-44px 0 0 -44px;
	z-index:15;
	}

.map-photo-small.rank16 {
	width:80px;
	height:80px;
	margin:-40px 0 0 -40px;
	z-index:14;
	}

.map-photo-small.rank17 {
	width:72px;
	height:72px;
	margin:-36px 0 0 -36px;
	z-index:13;
	}

.map-photo-small.rank18 {
	width:64px;
	height:64px;
	margin:-32px 0 0 -32px;
	z-index:12;
	}

.map-photo-small.rank19 {
	width:56px;
	height:56px;
	margin:-28px 0 0 -28px;
	z-index:11;
	}

.map-photo-small.rank20 {
	width:48px;
	height:48px;
	margin:-24px 0 0 -24px;
	z-index:10;
	}

.map-photo-small {
	width:20px;
	height:20px;
	margin:-10px 0 0 -10px;
	}

}

@media (min-width:790px) {
.map-photo-small.rank0,
.map-photo-small.rank1,
.map-photo-small.rank2,
.map-photo-small.rank3,
.map-photo-small.rank4,
.map-photo-small.rank5,
.map-photo-small.rank6,
.map-photo-small.rank7,
.map-photo-small.rank8,
.map-photo-small.rank9,
.map-photo-small.rank10,
.map-photo-small.rank11 {
	width:156px;
	height:156px;
	margin:-78px 0 0 -78px;
	z-index:19;
	}

.map-photo-small.rank12 {
	width:144px;
	height:144px;
	margin:-72px 0 0 -72px;
	z-index:18;
	}

.map-photo-small.rank13 {
	width:132px;
	height:132px;
	margin:-66px 0 0 -66px;
	z-index:17;
	}

.map-photo-small.rank14 {
	width:120px;
	height:120px;
	margin:-60px 0 0 -60px;
	z-index:16;
	}

.map-photo-small.rank15 {
	width:108px;
	height:108px;
	margin:-54px 0 0 -54px;
	z-index:15;
	}

.map-photo-small.rank16 {
	width:96px;
	height:96px;
	margin:-48px 0 0 -48px;
	z-index:14;
	}

.map-photo-small.rank17 {
	width:84px;
	height:84px;
	margin:-42px 0 0 -42px;
	z-index:13;
	}

.map-photo-small.rank18 {
	width:72px;
	height:72px;
	margin:-36px 0 0 -36px;
	z-index:12;
	}

.map-photo-small.rank19 {
	width:60px;
	height:60px;
	margin:-30px 0 0 -30px;
	z-index:11;
	}

.map-photo-small.rank20 {
	width:48px;
	height:48px;
	margin:-24px 0 0 -24px;
	z-index:10;
	}

.map-photo-small {
	width:24px;
	height:24px;
	margin:-12px 0 0 -12px;
	}
}

.map-photo-large {		/* .map-photo-big { */
	position:absolute;
	top:-53px;
	left:-53px;
	width:100px;
	height:100px;		
	background-size:cover;
	background-position:center;
	background-repeat:none;
	border:3px solid white;
	border-bottom-width:24px;
	box-shadow:0 0 6px rgba(0,0,0,.7);
	visibility:hidden;
	cursor:pointer;
	z-index:40;
	}

.map-photo-large p {
	position:absolute;
	font-family:'Source Sans Pro',arial;
	display:block;
	width:100%;
	top:95px;
	font-size:8px;
	text-align:center;
	color:black;
	text-decoration:none;
	}

@media (min-width:400px) {
.map-photo-large {
	top:-83px;
	left:-83px;
	width:160px;
	height:160px;		
	border:4px solid white;
	border-bottom-width:33px;
	}

.map-photo-large p {
	top:155px;
	font-size:10px;
	}
}

@media (min-width:600px) {
.map-photo-large {
	top:-103px;
	left:-103px;
	width:200px;
	height:200px;		
	border:6px solid white;
	border-bottom-width:33px;
	}

.map-photo-large p {
	top:195px;
	font-size:12px;
	}
}


.map-photo.show .map-photo-large,
.map-photo:hover .map-photo-large {
	visibility:visible;
	}

/* ==== END OF MAP MARKER FOR PHOTO (LIKE PANORAMIO) ==== */

/* MousePosition. From https://github.com/ardhi/Leaflet.MousePosition */
.leaflet-container .leaflet-control-mouseposition {
	background-color: rgba(255, 255, 255, 0.7);
	box-shadow: 0 0 5px #bbb;
	padding: 0 5px;
	margin:0;
	color: #333;
	font: 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}

/* ==================================  FOR MAPCLICK  ================================== */
.map-edit {
	cursor:crosshair;
	cursor:nw-resize;
	}

#map-cursor-box {
	margin:24px 0 12px 0;
	text-align:center;
	line-height:26px;
	}

#map-cursor-box div, #map-cursor-box input {
	display:inline-block;
	height:24px;
	width:40%;
	border:1px solid #aaa;
	vertical-align:middle;
	padding-left:1%;
	text-align:left;
	}

#map-cursor-target, #ps_meta_box_map_from_input {
	margin-right:2%;
	}

#map-cursor-instructions, #ps_meta_box_map_from_input {
	height:24px;
	margin-bottom:6px;
	}

/* Need this for little iMac	
.map-target {
	background-image:url('/images/photosecrets/map-icon-target-440x440.png');
	}
	
.map-pointer {
	background-image:url('/images/photosecrets/map-icon-pointer-440x440.png');
	}
*/

/* Map area on top of Locations page */
/* Later could change these dimensions based on browser width */

.map-area.top {height:0;padding:33.33% 0;}

/* ===================================  END OF MAP  =================================== */