@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,700italic,500,300italic);

body {
	position: relative;
	margin: 0;
	padding: 0;
	font-family: Roboto;
}

img {
	border: none;
}

input, textarea {
	font-family: Roboto;
}

textarea {
	display: block
}

html.map { height: 100%; }
html.map body { position: relative; height: 100%; margin: 0; padding: 0 }

.header {
	height: 120px;
	padding-left: 5px;
	padding-right: 5px;
	background-color: white;
	box-shadow: 0px 1px 3px #ccc;
	overflow: hidden;
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

.header img.logo {
	width: 250px;
}

/* Layout and text */

h1 {
	color: #00BEE7;
	font-weight: 300;
	clear: both;
}

h2 {
	color: #00BEE7;
	font-weight: 300;
	margin-top: 2em;
	font-size: 15pt;
}

a {
	text-decoration: none;
	color: blue;
}

#page {
	background-color: white;
	width: 80%;
	
	margin: 2em auto;
	padding: 2em 0em;
}

p, li, dt, dd {
	font-size: 14pt;
	font-weight: 300;
}

p.warning {
	font-weight: bold;
	color: red;
	text-align: center;
}

ul.dashes li:before{ content:'—'; position:relative; left:-5px;}
ul.dashes li{ text-indent:-5px; list-style: none }

/* Contact links at top of page */

.contact {
	font-family: Roboto;
	font-size: 1.5em;
	color: #4D5451;

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-webkit-box-pack: center;
	-moz-box-pack: center;
	-webkit-justify-content: flex-end;
	-ms-flex-pack: center;
	justify-content: flex-end;

	-webkit-box-align: center;
	-moz-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	
	height: 120px;
	padding-right: 1em;
	
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.contact div.text {
	padding-left: 8pt;
	font-size: 0.8em;
	min-width: 5em;
	white-space: nowrap;
}
.contact div.help.text {
	text-align: right;
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	min-width: 6em;
}

.contact .help small {
	white-space: nowrap;
}

.contact .fa {
	font-size: 2.0em;
}

.contact .skype {
	color: #12A5F4;
}

.contact .skype.text {
	font-size: 1.4em;
}

.contact i {
	display: absolute;
}

.contact .vertical {
	border-left: 1px solid #ccc;
	height: 60%;
	margin: 1em;
}

.contact > a {
	display: inherit;
}

.contact a {
	color: #4D5451;
	-webkit-transition: all 0.1s ease;
	-moz-transition: all 0.1s ease;
	transition: all 0.1s ease;
}

.contact a:hover {
	-webkit-transform: scale(1.1, 1.1);
	-moz-transform: scale(1.1, 1.1);
	transform: scale(1.1, 1.1);
	color: #4D5451;
}

/* Forms */

form.basic fieldset {
	margin: 1rem 0 2rem;
	border: 2px solid #ccc;
	padding: 10px;
	
	min-height: 40px;
}

form.basic legend {
	float: left;
	margin-bottom: 1rem;
}
form.basic legend + * {
	clear: left;
}

form.basic dl {
	padding: 0px;
	margin: 0px;
	overflow: auto;
}

form.basic dt {
	margin-top: 0;
	
	clear: both;
	font-size: 12pt;
	display: block;
	float: left;
	text-align: right;
	width: 36%;
}

form.basic fieldset > h3 {
	clear: both;
	font-size: 14pt;
	text-align: right;
	width: 36%;
}

form.basic dd {
	width: 60%;
	
	margin: 0 15px 15px 0;
	padding: 0px;
	font-size: 12pt;
	
	float: right;
}

form.basic dt small {
	margin-bottom: 6px;
	color: #666;
}

form.basic dd input, form.basic dd textarea {
	margin: 0px;
}

form.basic dd select {
	margin-top: 4px;
}

form.basic dd input:not([type=button]):not([type=checkbox]):not([type=radio]):not([type=submit]) {
	width: 40%;
}

form.basic dd textarea {
	width: 80%;
	height: 100px;
}

form.basic fieldset.footer {
	text-align: right;
	padding: 0 10px 0px 0px;
	
	background: none;
	border: none;
}

form.basic dd label.error {
	display: block;
	color: red;
}

form.editor {
}

form.editor fieldset {
	/* padding: 0; */
	margin: 10pt 0;
	
	position: relative;
}

form.editor fieldset legend {
	position: absolute;
	top: 0; left: 0; right: 0;
	
	width: 100%;
	box-sizing: border-box;
	
	padding: 5pt;
	
	margin-bottom: 15pt;
}

form.editor fieldset dl, form.editor fieldset p, form.editor fieldset ul {
	padding-top: 10pt;
}

form.editor fieldset legend + * {
	margin-top: 24pt;
}

form.editor fieldset dl + dl {
	margin-top: 20pt;
}

input:invalid, textarea:invalid, .sidebar input:invalid, .sidebar textarea:invalid {
	background-color: #fee !important;
}

form.editor dd table {
	background-color: white;
	border: 1px solid black;
	width: 100%;
	
	font-size: 80%;
}

form.editor dd table td {
	padding: 5pt 10pt 5pt 10pt;
}

form.editor dd table td.handle {
	width: 5em;
}

form.editor dd table td.item {
	
}

/* Orignally map.css */

*{box-sizing: border-box;}

.sidebar {
	position: absolute;
	font-family: Roboto;
	font-size: 11pt;
	background-color: rgba(77, 84, 81, 0.84);
	
	z-index: 1000;
	
	top: 245px; bottom: 0px; width: 300px; right: 0;
	color: white;
	
	overflow: auto;
}

.sidebar > h2, .sidebar > p {
	margin-left: 1em;
	margin-right: 1em;
}

.sidebar form fieldset {
	margin: auto;
	border: none;
	padding: 10px 0;
	min-height: 40px;
}

.sidebar dt, .sidebar dd {
	font-size: 12.5pt;
}

.sidebar form dl {
	padding: 0px;
	margin: 0px;
}

.sidebar form dt {
	margin: 0;
	
	clear: both;
	display: block;
	float: left;
	text-align: right;
}

.sidebar form dd {
	margin: 0px 1em 15px 40%;
	padding: 0px;
}

.sidebar form fieldset dd.invalid {
	color: rgb(255, 100, 100);
	width: 100%;
	text-align: center;
	display: none;
	padding-top: 0;
	margin: 0;
}

.sidebar form dd input, .sidebar form dd textarea {
	margin: 0px;
}

.sidebar form dd label.error {
	display: block;
	color: red;
}

.sidebar fieldset {
	border: 0 !important;
}

.sidebar input[type=text], .sidebar input[type=number], .sidebar textarea, .sidebar output {
	border: 0;
	background-color: rgba(255, 255, 255, 0.85);
	color: #4D5451;
}

.sidebar fieldset.numerics input,
.sidebar fieldset.numerics output {
	width: 100%;
	
	font-size: 12pt;
	padding: 5px;
	
	text-align: right;
}

.sidebar fieldset.numerics output {
	display: block;
	background: rgba(255, 255, 255, 0.1);
	color: white;
}

.sidebar fieldset.numerics output:before {
	content: '.';
	visibility: hidden;
}

.sidebar fieldset.text dt, .sidebar fieldset.text dd { font-size: 14pt; }


.sidebar fieldset.text dt {
	width: 100%;
	text-align: left;
	
	padding: 5px 1em;
}

.sidebar fieldset.text dd {
	text-align: center;
	padding: 5px 1em;
	margin: 0;
}

.sidebar fieldset.text input {
	width: 100%;
	padding: 5px;
	font-size: 14pt;
}

.sidebar fieldset.text textarea {
	height: 4em !important;
	width: 100%;
	padding: 2px;
}

.sidebar fieldset.numerics dt {
	width: 50%;
	padding-top: 4px;
}

.sidebar fieldset.numerics dd {
	margin-left: 55%;
}

.sidebar fieldset dl.dates dt {
	width: 40%;
	padding: 2px 5px;
}

.sidebar fieldset dl.dates dd {
	margin-left: 45%;
}

.sidebar fieldset dl.dates select[name=starts_at],
.sidebar fieldset dl.dates select[name=ends_at] {
	width: 100%;
	
	font-size: 12pt;
	margin: 2px 0px;
}

.sidebar fieldset.numerics dd.datetime {
	margin: -1em 1em 1em 1em;
	font-size: small;
	text-align: right;
	
	display: none;
}

.sidebar .discount_row {
	display: flex
}
.sidebar .discount_row input.range {
	flex: 1;
}
.sidebar .discount_row input.text {
	width: 3em;
	padding: 5px 0;
	text-align: center;
	margin-left: 3px;
}

.sidebar fieldset.footer {
	margin: 1em;
	padding: 0;
}

.sidebar fieldset.footer input {
	width: 100%;
	background-color: #9ACA3C;
	border: 0;
	padding: 1em;
	font-size: 16pt;
	color: transparent;
	
	background: #9ACA3C url(/_static/business/confirm.svg) no-repeat center;
}

.sidebar .flash {
	margin: 1em;
	padding: 1em;
	color: #f99;
	text-align: center;
	font-weight: bold;
}

.sidebar dl.vouchers, .sidebar > p {
	margin: 2em 1em;
	list-style: none;
}

.sidebar dl.vouchers dt {
	background-color: #4D5451;
	margin: 0.2em;
	color: white;
	padding: 0.5em;
	text-align: center;
}

.sidebar dl.vouchers dd {
	background-color: rgba(255, 255, 255, 0.85);
	margin: 0.2em;
	color: #4D5451;
	padding: 1em 0.75em;
}

.sidebar p {
	text-align: center;
	font-size: 11pt;
}

.sidebar a {
	color: white;
	text-decoration: underline;
}

.sidebar dl.vouchers dd {
	text-align: center;
}

.sidebar dl.vouchers dd .code, .sidebar dl.vouchers dd .status {
	width: 48%;
	display: inline-block;
}

.sidebar dl.vouchers dd .status {
	text-align: right;
}

.sidebar dl.vouchers dd .claimed {
	color: green;
}

.sidebar dl.vouchers dd .cancelled {
	color: red;
}

.error {
	background: red;
	color: white;
	font-size: 1.1rem;
	margin: 0;
	padding: 1.5rem 0.5rem;
}
.sidebar .error {
	text-align: center;
}
.sidebar .error a {
	color: white;
	text-decoration: underline;
}

#map-canvas { height: 100% }

div.map {
	position: absolute;
	top: 160px; bottom: 0px; left: 0; right: 0px
}

/* Comments */

dl.comments dt {
	margin-top: 2em;
	font-weight: bold;
}

dl.comments dd {
	font-weight: 300;
}

/* Tables */

#page a.button i.fa-minus-circle { color: #900; }
#page a.button:hover i.fa-minus-circle { color: #f00; }
#page a.button i.fa-plus-circle { color: #090; }
#page a.button:hover i.fa-plus-circle { color: #0d0; }
#page a.button i.fa-edit { color: #009; }
#page a.button:hover i.fa-edit { color: #00f; }

table.listing {
	border-collapse: collapse;
	width: 100%;
	
	font-size: 11pt;
	
	border: 1px solid #aaa;
	background-color: rgba(10, 100, 200, 0.02);
}

table.listing thead th {
	border-bottom: 1px solid #aaa;
}

table.listing td {
	padding: 5pt;
}

table.listing th {
	padding: 5pt;
	font-weight: normal;
}

table.listing .actions {
	width: 22pt;
}

table.listing .admin-only {
	color: red;
}

table.listing tbody th {
	background-color: rgba(10, 100, 200, 0.04);
}

table.listing tbody td.actions {
	text-align: center;
}

table.listing tbody .description {
	background-color: white;
}

table.listing tbody .description {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

table.listing thead {
	background: fixed url(/_static/table_background.png);
}

table.listing .date, table.listing .number {
	width: 80px;
	text-align: center;
}

table.listing .for {
	text-align: center;
}

table.listing .total, table.listing .subtotal, table.listing .price, table.listing .quantity, table.listing .tax_rate, table.listing .credit, table.listing .debit {
	text-align: right;
	width: 12%;
	border-left: 1px dashed #ccc;
}

table.listing tfoot {
	border-top: 1px solid #ccc;
	background-color: rgba(0, 80, 200, 0.08);
}

table.listing tfoot td {
	text-align: center;
}

table.listing tbody tr:hover {
	background-color: rgba(0, 80, 200, 0.08);
}

div.toolbar {
	float: right;
	margin-top: -16pt;
	margin-right: -16pt;
	
	padding-bottom: 4pt;
	padding-left: 4pt;
	
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-bottom-left-radius: 4pt;
}

div.toolbar a.button {
	display: inline-block;
	
	padding: 2pt 6pt;
}

/* Fix some chosen defaults */
form.basic .chosen-container-multi .chosen-choices li.search-choice {
	line-height: inherit;
	font-size: inherit;
}

form.basic .chosen-container .chosen-results li {
	line-height: inherit;
	font-size: inherit;
}

form.basic .chosen-container-multi .chosen-choices li.search-field input[type=text] {
	font-size: 10pt;
}

form.basic fieldset dt small {
	display: block;
}

.ui-tooltip {
	position: fixed !important;
	right: 315px;
	left: auto !important;
	background: #666;
	color: white;
	border: none;
	padding: 0;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}
.ui-tooltip-content {
    position: relative;
    padding: 1em;
}
.ui-tooltip-content::after {
    content: '';
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
}
.ui-tooltip-content::after {
    top: 50%;
    right: -10px;
    margin-top: -9px;
    border-color: transparent #666;
    border-width: 10px 0 10px 10px;
}

.action-button {
	display: inline-block;
	background: #4D5451;
	color: white;
	padding: 5px 10px;
	border: 1px solid #344;
	border-radius: 5px;
	font-weight: 300;
	cursor: pointer;
}

/* tabs */
.ui-tabs {
	padding: 0;
	margin: 1rem 0;
	text-align: center;
	line-height: 2.5rem;
	font-size: 0;
}
.ui-tabs > * {
	display: inline-block;
	line-height: 2rem;
	height: 2rem;
	padding: 0 1rem;
	border: 1px solid #ccc;
	background: #eee;
	list-style: none;
	cursor: pointer;
	font-size: 1rem;
	margin-left: -1px;
	font-weight: 300;
	color: black;
}
.ui-tabs > *:first-child {
	border-radius: 4px 0 0 4px;
	margin-left: 0;
}
.ui-tabs > *:last-child {
	border-radius: 0 4px 4px 0;
}
.ui-tabs .active {
	border-color: #1e69de;
	background: #1e69de;
	color: white;
}

/* products */
.poi-products {
	display: flex;
	align-items: center;
	justify-content: center;
}
.poi-product:before{
	content: "";
	display: block;
	padding-top: 30%; /* initial ratio */
}
.poi-product {
	position: relative;
	width: 100%;
	
	margin-bottom: 1rem;
	
	background-size: 100%;
	background-position: 50% 50%;
}
.poi-product .edit {
	position: absolute;
	right: 0;
	top: 0;
	padding: 1vw;
	background-color: rgba(0, 0, 0, 0.5);
}
.poi-product .details {
	display: absolute;
	padding: 1vw;
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	bottom: 0;
}
.poi-product p {
	font-size: 2vw;
}
.poi-product a {
	color: white;
}
.poi-product .details big {
	font-size: 5vw;
}
.poi-product .price {
	position: absolute;
	white-space: nowrap;
	
	right: 0;
	bottom: 0;
	
	padding: 1vw;
	
	color: white;
}
.poi-product .price b {
	font-weight: normal;
	font-size: 3vw;
}
/* Image picker */
img.image_picker_image {
	width: 100%;
}
.image_picker_selector li {
	display: inline-block;
	width: 40%;
}
.image_picker_selector div {
	display: flex; /* Fix issue where whitespace in the HTML caused a larger bottom "padding" */
}

.marker-cluster {
	background-clip: padding-box;
}
.marker-cluster div {
	width: 30px;
	height: 30px;
	background: white;
	text-align: center;
	border-radius: 15px;
	font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.marker-cluster span {
	line-height: 30px;
}

/* garage parking calendar */
.calendar { border-spacing: 3px; border-collapse: separate; }
.calendar a { display: block; color: inherit; }
.calendar a:hover { display: block; color: blue; }
.calendar td, .calendar th { text-align: center; }
.calendar th { padding: 0.25rem 0.5rem; }
.calendar td { padding: 3px; position: relative; }
.calendar .date { font-size: 0.8rem; white-space: nowrap; margin-bottom: 1rem; }
.calendar td { background: #eee; width: 14.3%; height: 6rem; }
.calendar td.today { background: white; font-weight: bold; }
.calendar td.past, .calendar td.no_spaces { background: #ddd; color: #aaa; border: none !important; }
.calendar td.fully_booked { border: 3px solid #1e69de; padding: 0; }
.calendar .fully_booked_banner { background: #1e69de; color: white; font-weight: normal; font-size: 0.6rem; position: absolute; top: 0; left: 0; right: 0; padding: 0.2rem 0; }
.calendar .past .fully_booked_banner { background: #888; }
.calendar td.some_bookings { border: 3px solid #1e69de; padding: 0; }
.calendar small { font-size: 0.6rem; margin-left: 0.25rem; }

@media all and (max-width: 1200px) {
	.header, .header .contact { height: 100px; }
	.header img.logo { width: 200px; margin-top: 2px; }
	.header .contact { font-size: 1.35em; }
	.header .contact .vertical { margin: 0.75em; }
	.bar { padding-left: 10px !important; }
	div.map { top: 140px; }
	.sidebar { top: 225px; }
}
@media all and (max-width: 1000px) {
	.header, .header .contact { height: 85px; }
	.header img.logo { width: 180px; margin-top: 0; }
	.header .contact { font-size: 1.3em; }
	.header .contact .fa { font-size: 1.8em; }
	.bar .arrow { display: block !important; }
	.bar { height: 73px !important; }
	.bar .wrapper-dropdown-5 { margin-bottom: 5px; }
	div.map { top: 158px; }
	.sidebar { top: 209px; }
}
@media all and (max-width: 940px) {
	.header img.logo { width: 170px; margin-top: 2px; }
	.header .contact { font-size: 1.25em; padding-right: 0.5em; }
	.header .contact .fa { font-size: 1.5em; line-height: 1.4em; }
	.header .contact .vertical { margin: 0.5em; }
}
@media all and (max-width: 800px) {
	.header .contact { font-size: 1.15em; padding-right: 0; }
}