/* contextmenu */
.PinMenu .leaflet-popup-content
{
	margin: 1px;
}
.PinMenu > div
{
	background-color: rgb(240,240,240);
	border-style: solid;
	border-radius: 0;
	border-width : 1px;
	z-index: 9999;
}
.PinMenu-EditPinButton,
.PinMenu-DeletePinButton,
.PinMenu-CancelPinButton
{
	text-align: center;
	width: 150px;
	display: block;
	border-style: solid;
	border-top-color: lightgray;
	border-left-color: lightgray;
	border-bottom-color: darkgray;
	border-right-color: darkgray;
	border-top-width: 1px;
	border-left-width: 1px;
	border-bottom-width : 1px;
	border-right-width : 1px;
	padding-top: 2px;
	padding-left: 2px;
	padding-bottom: 2px;
	padding-right: 2px; 
	margin-bottom: 3px;
	background: linear-gradient(lightgray, white);
}
.PinMenu-EditPinButton:hover,
.PinMenu-DeletePinButton:hover,
.PinMenu-CancelPinButton:hover
{
	color:	black;
	border-color: black;
	border-top-width: 1px;
	border-left-width: 1px;
	border-bottom-width : 2px;
	border-right-width : 2px;
	padding-top: 2px;
	padding-left: 2px;
	padding-bottom: 1px;
	padding-right: 1px; 
	background: linear-gradient(white,lightgray);
}
.PinMenu > div.leaflet-popup-tip-container
{
	visibility: hidden;
}

/* edit dialog */

.PinEditDialog > div
{
	background-color: rgb(240,240,240);
	border-radius: 0;
	border-style: solid;
	border-width : 1px;
	z-index: 9999;
	width: 50em;
}
.PinEditDialog > div.leaflet-popup-tip-container
{
	visibility: hidden;
}
div.PinEditDialog-MainDiv
{
	text-align: center;
	font-weight: bold;
	font-size: large;
}
div.PinEditDialog-MainDiv > div
{
	text-align: left;
	font-weight: normal;
	font-size: medium;
	padding: 0.3em;
}

div.PinEditDialog-MainDiv > div > label
{
	display: block;
}

#cyPinEditDialog-TextArea,
#cyPinEditDialog-AddressInput,
#cyPinEditDialog-UrlInput,
#cyPinEditDialog-PhoneInput,
#cyPinEditDialog-DistanceInput,
#cyPinEditDialog-CategorySelect
{
	width: 100%;
}
div.PinEditDialog-PhoneDiv
{
	width: calc(35% - 0.6em);
}
div.PinEditDialog-DistanceDiv
{
	width: calc(15% - 0.6em);
}
div.PinEditDialog-CategoryDiv
{
	width: calc(50% - 0.6em)
}
div.PinEditDialog-PhoneDiv,
div.PinEditDialog-DistanceDiv,
div.PinEditDialog-CategoryDiv
{
	display: inline-block;
}
div.PinEditDialog-MainDiv > div.PinEditDialog-ButtonsDiv
{
	text-align: center;
}
.PinEditDialog-OkButton,
.PinEditDialog-CancelButton
{
	width: 8em;
}

#cyPinEditDialog-openFileDiv
{
	position: relative;
}

#cyPinEditDialog-openFileInput
{
	opacity: 0;
	position: relative;
	margin-bottom: 3px;
}

#cyPinEditDialog-openFileFakeDiv
{
	position: absolute;
	top: 0px; 
	left: opx;
}

@media screen and (min-width: 1px) and (max-width: 600px)
{
	.PinEditDialog > div
	{
		width: 100%;
	}
	div.PinEditDialog-MainDiv > div
	{
		text-align: left;
		padding: 0.1em;
		font-weight: normal;
		font-size: medium;
	}
	div.PinEditDialog-PhoneDiv,
	div.PinEditDialog-DistanceDiv,
	div.PinEditDialog-CategoryDiv
	{
		display: block;
	}
	.PinEditDialog-OkButton,
	.PinEditDialog-CancelButton
	{
		margin-top: 1em;
	}	
}

/* control */

.PinControl-MainDiv
{
	background-color: gainsboro;
	width: auto;
	height : auto;	
}
.PinControl-Pins
{
	width: auto;
	min-width: 20em;
	max-width: 35em;
	height: auto;
	max-height: 400px;
	overflow: auto;
	background-color : white;
	border-style : solid;
	border-width : 0.1em;
	margin: 0.5em;
}
.PinControl-Buttons
{
	background-color : white;
	border-style : solid;
	border-width : 0.1em;
	margin: 0.5em;
	text-align: center;
}
.PinControl-Pin
{
	padding: 1em;
	border-bottom-style: solid;
	border-bottom-width: 0.01em;
}
.PinControl-Pin:hover
{
	background-color : 	lightblue;
}
.PinControl-Category{
	display: inline-block;
	font-weight: bold;
	margin-left: 1em;
	font-size: 125%;
}
#PinControl-HideButton
{
	background-image : url('L.Marker.Pin.img/control/hide.png');
}
#PinControl-ShowButton
{
	background-image : url('L.Marker.Pin.img/control/show.png');
}

#PinControl-ZoomBoundsButton
{
	background-image : url('L.Marker.Pin.img/control/zoombounds.png');
}
#PinControl-ArrowTopLeftButton
{
	background-image : url('L.Marker.Pin.img/control/ArrowTopLeft.png');
}
#PinControl-ArrowTopRightButton
{
	background-image : url('L.Marker.Pin.img/control/ArrowTopRight.png');
}
#PinControl-ArrowBottomLeftButton
{
	background-image : url('L.Marker.Pin.img/control/ArrowBottomLeft.png');
}
#PinControl-ArrowBottomRightButton
{
	background-image : url('L.Marker.Pin.img/control/ArrowBottomRight.png');
}
#PinControl-ArrowTopButton
{
	background-image : url('L.Marker.Pin.img/control/ArrowTop.png');
}
#PinControl-ArrowBottomButton
{
	background-image : url('L.Marker.Pin.img/control/ArrowBottom.png');
}
.PinControl-Button
{
	background-repeat : no-repeat;
	height: 34px;
	width: 34px;
    display: inline-block;
	border-style: solid;
	border-top-width : 1px;
	border-left-width : 1px;
	border-bottom-width : 3px;
	border-right-width : 3px;
	border-color : gainsboro;
	padding: 1px;
	margin: 3px;
	border-radius: 3px;
}
.PinControl-Button:hover
{
	border-color : black;
}
.PinControl-Button:active
{
	border-top-width : 3px;
	border-left-width : 3px;
	border-bottom-width : 1px;
	border-right-width : 1px;
	border-color : black;
}

/* Pins for default categories */

.Pin-Icon 
{
	background-repeat : no-repeat;
	height: 40px;
	width: 40px;
    display: inline-block;
	vertical-align: top;
}
.Pin-Category-0001
{
	background-image : url('L.Marker.Pin.img/categories/0001.png');
}
.Pin-Category-0002
{
	background-image : url('L.Marker.Pin.img/categories/0002.png');
}
.Pin-Category-0003
{
	background-image : url('L.Marker.Pin.img/categories/0003.png');
}
.Pin-Category-0004
{
	background-image : url('L.Marker.Pin.img/categories/0004.png');
}
.Pin-Category-0005
{
	background-image : url('L.Marker.Pin.img/categories/0005.png');
}
.Pin-Category-0006
{
	background-image : url('L.Marker.Pin.img/categories/0006.png');
}
.Pin-Category-0007
{
	background-image : url('L.Marker.Pin.img/categories/0007.png');
}
.Pin-Category-0008
{
	background-image : url('L.Marker.Pin.img/categories/0008.png');
}
.Pin-Category-0009
{
	background-image : url('L.Marker.Pin.img/categories/0009.png');
}
.Pin-Category-0010
{
	background-image : url('L.Marker.Pin.img/categories/0010.png');
}
.Pin-Category-0011
{
	background-image : url('L.Marker.Pin.img/categories/0011.png');
}
.Pin-Category-0012
{
	background-image : url('L.Marker.Pin.img/categories/0012.png');
}
.Pin-Category-0013
{
	background-image : url('L.Marker.Pin.img/categories/0013.png');
}
.Pin-Category-0014
{
	background-image : url('L.Marker.Pin.img/categories/0014.png');
}
.Pin-Category-0015
{
	background-image : url('L.Marker.Pin.img/categories/0015.png');
}
.Pin-Category-0016
{
	background-image : url('L.Marker.Pin.img/categories/0016.png');
}
.Pin-Category-0017
{
	background-image : url('L.Marker.Pin.img/categories/0017.png');
}
.Pin-Category-0018
{
	background-image : url('L.Marker.Pin.img/categories/0018.png');
}
.Pin-Category-0019
{
	background-image : url('L.Marker.Pin.img/categories/0019.png');
}
.Pin-Category-0020
{
	background-image : url('L.Marker.Pin.img/categories/0020.png');
}
.Pin-Category-0021
{
	background-image : url('L.Marker.Pin.img/categories/0021.png');
}
.Pin-Category-0022
{
	background-image : url('L.Marker.Pin.img/categories/0022.png');
}
.Pin-Category-0023
{
	background-image : url('L.Marker.Pin.img/categories/0023.png');
}
.Pin-Category-0024
{
	background-image : url('L.Marker.Pin.img/categories/0024.png');
}
.Pin-Category-0025
{
	background-image : url('L.Marker.Pin.img/categories/0025.png');
}
.Pin-Category-0026
{
	background-image : url('L.Marker.Pin.img/categories/0026.png');
}
.Pin-Category-0027
{
	background-image : url('L.Marker.Pin.img/categories/0027.png');
}
.Pin-Category-0028
{
	background-image : url('L.Marker.Pin.img/categories/0028.png');
}
.Pin-Category-0029
{
	background-image : url('L.Marker.Pin.img/categories/0029.png');
}
.Pin-Category-0030
{
	background-image : url('L.Marker.Pin.img/categories/0030.png');
}
.Pin-Category-0031
{
	background-image : url('L.Marker.Pin.img/categories/0031.png');
}
.Pin-Category-0032
{
	background-image : url('L.Marker.Pin.img/categories/0032.png');
}
.Pin-Category-0033
{
	background-image : url('L.Marker.Pin.img/categories/0033.png');
}
.Pin-Category-0034
{
	background-image : url('L.Marker.Pin.img/categories/0034.png');
}
.Pin-Category-0035
{
	background-image : url('L.Marker.Pin.img/categories/0035.png');
}
.Pin-Category-0036
{
	background-image : url('L.Marker.Pin.img/categories/0036.png');
}
.Pin-Category-0037
{
	background-image : url('L.Marker.Pin.img/categories/0037.png');
}