mapsed.css

/*
 * Core styles (you always need these)
*/
	.mapsed-container {
		width: 100%;
		min-width: 200px;
		max-width: 350px;
		font-family: "Calibri", "Arial";
		color: #000;
		/* Fixes problem with scrollbars appearing the first time a tooltip is used on a marker */
		line-height: 1; 
	}
	
	.mapsed-container {
		width: 98%;
		margin: 3px;
	}

/*
 * ToolTip styles (you probably always need these)
*/
	.mapsed-container h1, .mapsed-help h3 {
		font-family: Calibri, Arial;
		font-size: medium;
		background-color: #eee;
		color: #333;
		border-radius: 5px;
		padding-left: 5px;
	}
	.mapsed-container h1 {
		margin-top: 0px;
		margin-bottom: 10px;
	}
	.mapsed-view h1 {
		cursor: help;
	}

.mapsed-toolbar-container {
	display: flex;
	flex-direction: column;
	/* 10px mimics Google's toolbars */
	left: 10px !important;
}

.mapsed-searchbar-container {
	display: flex;
	justify-content: flex-start;
	width: 70%;
	/* Something overrides these styles (expect the google maps api), hence the !important declarations */
	position: absolute !important;
	/* 10px mimics Google's toolbars */
	left: 10px !important;
	top: 10px !important;
}
	.mapsed-searchbox     { width: 83%; }
	.mapsed-search-button { width:  7%;  margin-left: 0.5rem; }
	.mapsed-more-button   { width: 10%;  margin-left: 0.25rem; }

/* container for address details, phone, etc */
.mapsed-left {
	vertical-align: top;
}

		.mapsed-left address {
			font-size: small;
			margin-bottom: 10px;
		}
		
		.mapsed-left a {
			font-size: small;
			color: #428bca;
		}
		.mapsed-left a:hover, .mapsed-left a:focus {
			color: #2a6496;
			text-decoration: underline;
		}

	.mapsed-photo {
		/* Give a bit of space between the elements */
		padding-left: 10px !important;
	}
	.mapsed-photo, .mapsed-add-info {
		/* where the photo and additional info appears */
		margin: 0;
		padding: 0;
		vertical-align: top;
	}
	
	.mapsed-photo img {
		/* In case there's a "select" button underneath the photo image*/
		margin-bottom: 10px;	
		float: right;		
	}
	
	.mapsed-add-info {
		/* Give a bit of space between the elements */
		padding-left: 10px;
		white-space: nowrap;
	}
	
	/* container for address data entry */
	.mapsed-address-entry {
		/* edit dialog needs to be a bit bigger */
		min-width: 300px;
	}
		.mapsed-address-entry ul {
			list-style-type: none;
			margin: 0 5px 0 5px;
			padding: 0;
		}
		.mapsed-address-entry ul li {
			margin: 5px 0px;
		}
		.mapsed-address-entry .mapsed-save-button {
		}
		.mapsed-address-entry label {
			width: 100%;
			display: inline-block;
			float: left;
		}
		
		.mapsed-address-entry label input {
			display: inline-block;
			width: 70%;	
			float: right;
			color: #333;
			background-color: #fff;
			border: solid 1px #ddd;
			border-radius: 2px;
		}
		.mapsed-address-entry label, .mapsed-address-entry label input {
			/* force vertical alignment */
			height: 20px;
			line-height: 20px;
			margin-bottom: 5px;
		}

	.mapsed-view {
		/* Ensures stuff doesn't wrap around, which looks horrible when it does */
		white-space: nowrap;
	}
	.mapsed-view .mapsed-website, .mapsed-view .mapsed-url {
		
	}

		
/*
* Search styles (see "showSearch" property)
*/
	input.mapsed-searchbox {
		background-color: #fff;
		padding: 0 11px 0 13px;
		font-family: "Calibri", "Arial";
		font-size: 15px;
		font-weight: 300;
		text-overflow: ellipsis;

		line-height: 3;
		border: 1px solid #fff;
		outline: none;
		border-radius: 2px 0 0 2px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);		
		box-sizing: border-box;
		-moz-box-sizing: border-box;
	}
	input.mapsed-searchbox:focus {
		border-color: #4d90fe;
		background-color: #fff;
	}		

	
/*
* Select styles, see "showSelect" property.
*/
	.mapsed-select-container {
		clear: both;
	}
	button.mapsed-select-button {

	}


/*
* Custom map control styles
* Mimics style of Google icons
*/
.mapsed-control-button {
	border-color: rgba(0, 0, 0, 0.14902);
	border: solid 1px #888;
	border-radius: 2px;
	background-color: #fff;
	box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
	padding: 3px 6px;
	font-family: Calibri, Arial;
	font-size: 16px;
	color: #000;
	font-family: Roboto;
	text-decoration: none;
	font-weight: 400;
	line-height: 12px;

	margin-right: 3px;
	cursor: pointer;
}

.mapsed-toolbar-button {
	font-size: 2rem;
	padding: 1rem 0.5rem;
}

.gm-style-mtc > div {
	/* Map/Satellite */
	font-size: 12px !important;
	padding: 3px 6px !important;
}


:hover.mapsed-control-button {
	background-color: #ddd;
}

/*
	Dialog styles
*/
.mapsed-buttons td:first-child {
	padding-top: 10px;
	/* we did play with putting these on the right, but the mobile view doesn't show them .... sometimes! */
}

.mapsed-action-buttons {
	float: left;
}
	button.mapsed-select-button,
	button.mapsed-edit-button,
	button.mapsed-save-button,
	button.mapsed-delete-button,
	button.mapsed-search-button, button.mapsed-more-button {
		color: #fff;
		padding: 5px 7px;
		font-weight: bold;
		background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
		background-color: #4d90fe;
		border: none;
		border-radius: 2px;
		box-shadow: 0 2px 6px rgba(0,0,0,0.3);
		cursor: pointer;
	}

.mapsed-paging-buttons {
	float: right;
}
.mapsed-paging-buttons::after {
	clear: both;
}
	button.mapsed-prev-marker {
		/* A little gap between the main & pager buttons */
	}
	button.mapsed-prev-marker,
	button.mapsed-next-marker {
		cursor: pointer;
	}

.mapsed-error {
	color: #880000;
	margin-left: 10px;
}

button.mapsed-search-button, button.mapsed-more-button {
	/* search button is a little bit different to the other button controls */
}
button.mapsed-more-button[disabled] {
	background-image: -webkit-linear-gradient(top,#f5f9ff,#e9e9e9);
	background-color: #d8d8d8;
	color: silver;
	cursor: auto;	/*so it doesn't look clickable*/
}
button.mapsed-geo-button {
	color: #B60000;
	cursor: pointer;
}
button.mapsed-geo-button.is-active {
	color: #0024B6;
	font-weight: 300;
}
button.mapsed-select-button, 
button.mapsed-edit-button, 
button.mapsed-save-button, 
button.mapsed-delete-button {
	margin-right: 2px;
}

/*
* Full window styles (just for making the generated div overlay)
*/
	.mapsed-full-window {
		position: fixed !important;
		top: 0; bottom: 0;
		left: 0; right: 0;
		/* Google places predictive results are on z-index 1000, so 1 below so they can appear */
		z-index: 999;
	}
	
/*
* Help dialog styles
*/
	.mapsed-help {
		margin: 0;
		padding: 5px;
		background: #fff;
		border: solid 1px #ddd;
		border-radius: 2px;
		box-shadow: 2px 2px 2px #aaa;
		min-width: 250px;
		color: #000;
		cursor: pointer;
	}
	.mapsed-help {
		position: absolute;
		z-index: 999;
		top: 20%;
		left: 20%;
		width: 60%;
	}

	.mapsed-help  h3 {
		margin: 0;
	}
	
	.mapsed-help ol {
		padding-left: 25px;
	}
	.mapsed-help ol li, .mapsed-help ul li {
		color: #000;
		background-color: #fff;
		margin: initial;
		font-size: small;
	}
	.mapsed-help ol li {
		list-style-type: decimal;
	}
	.mapsed-help ul li {
		list-style-type: disc;
	}
	.mapsed-help-button.open {
		background-color: #ccc;
	}
	
	/* modal message support */
	.mapsed-modal {
		position: absolute;
		top: 20%;
		left: 20%;
		width: 60%;
		z-index: 2000;
		height: auto;
		font-family: "Calibri", "Arial";
		display: none;
		background: #e74c3c;
		border-radius: 5px;
		color: #fff;
	}
		.mapsed-modal {
		}
			.mapsed-modal > div {
				margin: 10px;
			}
			.mapsed-modal h3 {
				text-align: center;
				padding: 10px;
				margin: 0;
				background-color: #BD4236;
				font-weight: 300;
				font-size: x-large;
				opacity: 0.8;
				border-radius: 5px 5px 0 0;
			}			
			.mapsed-modal-message {			
			}
			.mapsed-modal-button-bar {
				margin-top: 20px;
			}
			.mapsed-modal-button-bar::after {
				clear: both;
				content: " ";
			}
				.mapsed-modal-button-bar .prompt {
					float: left;
					margin: 0;
				}	
				.mapsed-modal-buttons {
					display: block;
					float: right;
					margin-bottom: 20px;
				}
					.mapsed-modal button {
						padding: 5px 10px;
						background: #c0392b;
						border: none;
						color: #fff;
						letter-spacing: 1px;
						text-transform: uppercase;
						border-radius: 2px;
						cursor: pointer;
						opacity: 1;
					}
					.mapsed-modal button:hover {
						background-color: #A5281B;
					}

/* button positions - important is required as it gets overridden by Google Maps API */
input.mapsed-searchbox, button.mapsed-search-button, button.mapsed-more-button {
}
button.mapsed-geo-button {
	
}
input.mapsed-searchbox {
}
button.mapsed-search-button {
}
button.mapsed-more-button {
}
.mapsed-control-button {
	top: 5px !important;
}


	/* mobile overrides */
	@media 
		/* Smartphones (portrait) ----------- */
		only screen 
		and (min-device-width : 320px)
		and (max-device-width : 480px) {

		.mapsed-searchbar-container {
			width: 101%; /* HACK: Seems we have to set 101% so it uses the full row :( */
		
			/* 
				Something overrides these styles in desktop (expect the google maps api), 
				so we have to have !important against them (see further up) which means we have to undo
				our own hack to ensure the mobile view is _glued_ to the top.
			*/
			left: 0 !important;
			top: 0 !important;
		}
			.mapsed-searchbox     { width: 60%; }
			.mapsed-search-button { width: 20%; }
			.mapsed-more-button   { width: 20%; }

		.mapsed-toolbar-button {
			font-size: 1.5rem;
			padding: 1rem 0.5rem;
		}

		td.mapsed-photo {
			/*
				Photo takes up too much room on mobile version
				Better for the content to be more readable.
			*/
			display: none !important;
		}

		.gm-style-mtc > div {
		}

		/* container for address data entry */
		.mapsed-address-entry {
			/* reset back for mobile */
			min-width: initial;
		}


		.mapsed-help {
			top: 20%;
			left: 15%;
			width: 70%;
		}

		.mapsed-help li {
			margin-left: 1% !important;
		}
		.mapsed-help p, .mapsed-help li {
			font-size: 15px !important;
			line-height: 1.2;
		}
		.mapsed-help h3 {
			font-size: 20px !important;
		}

		.mapsed-modal {
			top: 20%;
			left: 15%;
			width: 70%;
		}

	}