/* <!-- */
	/* General styles */
	html, body {
		margin:0;
		padding:0;
		border:0;			/* This removes the border around the viewport in old versions of IE */
		width:100%;
		background:#fff;
		font-family: 'Roboto', sans-serif;
		color:#666 !important;
		font-size:11pt;
		height:100%;
		overflow-x:hidden;
		overflow-y:hidden;
	}
	img{
		max-width:100%;
		display:block;
	}
	h1,
	h2{
		font-weight:600;
	}
	h5{
		margin-bottom:0 !important;
	}
	p{
		max-width:600px;
		padding-right:10px;
	}
	a{
		text-decoration:none;
		color:#039be5;
	}
	a:hover{
		text-decoration:none;
		color:#039be5;
	}
	a.btn{
		color:#fff;
		cursor: pointer;
	}
	a.btn:hover{
		color:#fff;
		cursor: pointer;
	}
	.spanlink{
		text-decoration:none;
		color:#039be5;
		cursor: pointer;
	}
	.btn,
	input[type="submit"],
	input[type="submit"]>buttontext,
	input[type="button"],
	input[type="button"]>buttontext{
		color:#fff;
		cursor: pointer;
	}
	.imgbtn{
		text-decoration: none;
		text-align: center;
		letter-spacing: .5px;
		-webkit-transition: background-color .2s ease-out;
		transition: background-color .2s ease-out;
		cursor: pointer;
		outline: 0;
		border: none;
		margin: 0;
		border-radius: 2px;
		display: inline-block;
		height: 30px;
		line-height: 36px;
		padding: 3px 6px;
		vertical-align: middle;
		-webkit-tap-highlight-color: transparent;
		-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
		box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
	}
	.imgbtn.selected{
		background:#039be5;
	}
	.invis{
		display:none;
	}
	.clear{
		clear:both;
	}
	.clear::after {
	   content: " ";
	   display: block;
	   height: 0;
	   clear: both;
	}
	.caption{
		font-style: italic;
		color:#ccc;
		font-size:10pt;
	}
	.oncolor{
		color:#039be5;
	}
	.offcolor{
		color:#999;
	}
	.success{
		background:#8abd4f;
	}
	.error{
		background:#f63b3b;
	}
	.errortext{
		color:#f63b3b;
	}
	.half{
		width:47%;
	}
	#nav{
		top:0;
		left:0;
		position:fixed;
		width:40px;
		height:100%;
		min-height:100%;
		background:#CCC;
		float:left;
		z-index:1002;
	}
	#nav>a,
	#actions>a{
		transform:rotate(90deg);
		transform-origin:center, center;
		white-space:nowrap;
		display:block;
		color:#fff;
		text-decoration:none;
		font-weight:bold;
		text-transform:uppercase;
		text-align:center;
	}
	#nav>a{
		margin:30px 0 60px 0;
	}
	#nav a:hover,
	#actions>a:hover{
		color:#039be5;
	}
	#nav a.active,
	#actions>a.active{
		color:#039be5;
	}
	#nav span{
		padding-right:15px;
	}
	#nav span .active{
		color:#039be5;
	}
	#nav span:hover{
		color:#039be5;
	}
	#actions{
		position:absolute;
		top:0;
		left:40px;
		width:40px;
		height:100%;
		background:#bbb;
		z-index:1002;
	}
	#actions>a{
		margin:30px 0 80px 0;
	}
	.info{
		display:inline-block;
		position:relative;
		margin-left:8px;
	}
	.info>span{
		visibility: hidden;
		width: 200px;
		background-color: #fff;
		color: #666;
		padding: 5px 10px;
		border-top:5px solid #039be5;
		position: absolute;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		z-index:99999;
	}
	.info:hover>span{
		visibility: visible;
	}
	#myrating{
		font-size:9pt;
		color:#999;
	}

	.placegrid{
		display:grid;
		grid-template-columns:40px 45% 70px auto 210px;
		grid-template-rows: 100%;
		overflow-y: scroll;
	}
	.placeSearchgrid{
		display:grid;
		overflow-y: scroll;
	}
	.usergrid{
		display:grid;
		grid-template-columns:40px 45% auto 210px;
		grid-template-rows: 100%;
		overflow-y: scroll;
	}
	#uploadArea{
		background:#ddd;
		text-align:center;
		margin:5px 10px 5px 10px;
		width:40px;
		height:40px;
		border:5px dotted #039be5;
		float:left;
	}
	#uploadArea::after{
		content: "+";
		color:#fff;
		font-weight:bold;
		font-size:24pt;
		line-height:22pt;
	}
	.thumb{
		width:60px;
		float:left;
		text-align:center;
	}
	.thumb img{
		padding:5px 10px 0 10px;
	}
	.thumb.owner img{
		margin-bottom:-20px;
	}
	*[contenteditable="true"]{
		background:#ebf8ff;
		outline:2px solid transparent;
		padding:8px;
		min-height:40px;
	}
	.smallinfobox *[contenteditable="true"]{
		margin-bottom: 8px;
	}
	/* Large Screens */
	@media(min-width: 901px) {
		.usergrid{
			grid-template-columns:40px 45% auto 210px;
			grid-template-rows: 100% auto;
		}
		.placegrid{
			grid-template-columns:40px 45% 60px auto 210px;
			grid-template-rows: 100% auto;
		}
		.placeSearchgrid{
			grid-template-columns:40px 45% auto;
			grid-template-rows: 44px auto;
		}
		#searchmap,
		#placemap{
			position:fixed !important;
			height:100vh;
			top:0;
			left:40px;
			width:calc(45% - 7px);
			grid-column-start:2;
			grid-column-end:3;
			grid-row-start:1;
			grid-row-end:2;
		}
		#leftcontent{
			grid-column-start:2;
			grid-column-end:3;
			grid-row-start:1;
			grid-row-end:3;
			box-shadow: 0px 0 70px #ccc;
			z-index:2;
		}
		#rightcontent{
			grid-column-start:3;
			grid-column-end:5;
			grid-row-start:1;
			grid-row-end:3;
		}
		#maptop{
			grid-column-start:3;
			grid-column-end:4;
			grid-row-start:1;
			grid-row-end:2;
		}
		#placeinfo{
			grid-column-start:4;
			grid-column-end:5;
			grid-row-start:1;
			grid-row-end:3;
		}
		#useractivity{
			grid-column-start:3;
			grid-column-end:4;
			grid-row-start:1;
			grid-row-end:3;
		}
		#searchResults{
			grid-column-start:3;
			grid-column-end:4;
			grid-row-start:2;
			grid-row-end:3;
		}
		#maplinks{
			position:fixed;
			width:calc(45% - 17px);
		}
		#infobar{
			grid-column-start:5;
			grid-column-end:6;
			grid-row-start:1;
			grid-row-end:3;
		}
		#userinfobar{
			grid-column-start:4;
			grid-column-end:5;
			grid-row-start:1;
			grid-row-end:3;
		}
		#images_container{
			width:60px;
			grid-column-start:3;
			grid-column-end:4;
			grid-row-start:1;
			grid-row-end:3;
		}
	}
	/* Small Screens */
	@media(max-width: 900px) {
		.placegrid,
		.usergrid{
			grid-template-columns:40px auto;
			grid-template-rows: 80% 50px auto auto;
		}
		.placeSearchgrid{
			grid-template-columns:40px auto;
			grid-template-rows: 44px 70% 44px auto;
		}
		#maptop{
			grid-column-start:2;
			grid-column-end:3;
			grid-row-start:1;
			grid-row-end:2;
		}
		#searchmap,
		#leftcontent{
			position:relative;
			grid-column-start:2;
			grid-column-end:3;
			grid-row-start:2;
			grid-row-end:3;
		}
		#placemap{
			position:relative;
			grid-column-start:2;
			grid-column-end:3;
			grid-row-start:1;
			grid-row-end:2;
		}
		#placeinfo,
		#useractivity{
			grid-column-start:2;
			grid-column-end:3;
			grid-row-start:4;
			grid-row-end:5;
		}
		#searchResults,
		#rightcontent{
			grid-column-start:2;
			grid-column-end:3;
			grid-row-start:3;
			grid-row-end:4;
		}

		#images_container{
			height:50px;
			grid-column-start:2;
			grid-column-end:3;
			grid-row-start:2;
			grid-row-end:3;
			overflow-x:scroll;
		}
		#maplinks{
			position:relative;
			top:calc(100% - 55px);
			width:calc(100vw - 65px);
		}
		#infobar,
		#userinfobar{
			grid-column-start:2;
			grid-column-end:3;
			grid-row-start:3;
			grid-row-end:4;
		}
		#infobar > section{
			float:left;
		}
	}
	#rightcontent{
		background:#f6f6f6;
		z-index:1;
	}
	#leftcontent .block,
	#rightcontent .block{
		margin:40px auto;
		max-width:600px;
	}
	#leftcontent .block h2,
	#rightcontent .block h2{
		color:#ff7800;
	}
	.prettyheader{
		color:#fff;
		height:220px;
		position:relative;
		background-size:cover;
	}
	.prettyheader>h2{
		position:absolute;
		bottom:-11px;
		left:20px;
		margin:0;
		font-weight:900;
		text-transform:uppercase;
	}
	#searchmap,
	#placemap{
		z-index:1000;
		padding:0;
		margin:0;
		grid-column-start:2;
		grid-column-end:3
	}
	#maptop{
		height:44px;
		padding:8px;
		background:#ccc;
	}
	#searchResults,
	#placeinfo,
	#useractivity{
		margin:0;
		overflow:visible;
		background:rgba(255, 255, 255, 0.9);
	}
	.resultExpl{
		float:left;
		width:60px;
	}
	h2.bigtitle{
		margin: 0 0 -16px 0;
		font-weight: 900;
		text-transform: uppercase;
	}
	#userSearchResults>.entry{
		padding:8px 20px;
	}
	.subentry:first-child{
		padding: 0 0 8px 0;
	}
	.subentry:last-child{
		padding: 8px 0 0 0;
	}
	.subentry{
		padding:8px 0;
	}
	#placeinfo,
	.padcontent,
	.userstats{
		padding:5px 10px;
	}
	.userstats{
		background:#039be5;
		color:#fff;
	}
	#images_container{
		background:#f6f6f6;
		text-align:center;
		overflow:visible;
	}
	#infobar,
	#userinfobar{
		background:#f6f6f6;
	}
	#maplinks{
		z-index:1001;
		left:40px;
		bottom:5px;
		height:56px;
		padding:8px 0;
		text-align:right;
	}
	#footer{
		color:#aaa;
		font-size:9pt;
		text-align:center;
	}
	.comment,
	.addComment{
		background:#fafafa;
		border:1px solid #eee;
		padding:10px;
		margin:8px 0;
	}
	.comment h4,
	.addComment h4{
		margin:0;
		font-size:16pt;
		font-weight:600;
	}
	.addComment{
		margin-top:16px;
	}
	.author{
		font-size:9pt;
		color:#aaa;
		margin-bottom:8px;
	}
	#signin,
	.popup{
		display:none;
		position:fixed;
		z-index:9999999999999999;
		background:rgba(0, 0, 0, 0.8);
		top:0;
		left:0;
		width:100%;
		height:100%;
	}
	.popup h2,
	#signin h2{
		margin:0;
	}
	.signinCentered,
	.popupCentered{
		width:500px;
		margin:5% auto;
		padding:20px;
		background:#fff;
		border-radius: 4px;
		border-top:solid 5px #039be5;
	}
	#searchtext{
		width:calc(100% - 210px);
		float:left;
		margin-right:8px;
		height:28px;
		background:#bbb;
		border-bottom:0;
		border-radius:2px;
		padding-left:5px;
		-moz-box-shadow:    inset 3px 3px 14px -10px #000000;
		-webkit-box-shadow: inset 3px 3px 14px -10px #000000;
		box-shadow:         inset 3px 3px 14px -10px #000000;
		color:#fff;
	}
	.searchbarbutton,
	.btn.waves-input-wrapper{
		height:28px !important;
		line-height:28px !important;
	}
	.formrequired,
	.formoptional{
		padding:10px;
		border:solid 1px;
		margin-bottom:10px;
	}
	.formrequired{
		border-color:#039be5;
		background:rgba(3,155,229,0.1);
		border-radius: 4px;
	}
	.formoptional{
		border-color:#eee;
		background:#fafafa;
	}
	/************** Table Replacement **************/
	.placeResults{
		display:grid;
		grid-template-columns:7fr 2fr 2fr;
	}
	.placeResults.loggedin{
		display:grid;
		grid-template-columns:7fr 2fr 2fr 1fr;
	}
	.placeResults > div{
		padding:3px;
	}
	.placeResults.loggedout > div:nth-child(8n+8),
	.placeResults.loggedout > div:nth-child(8n+9),
	.placeResults.loggedout > div:nth-child(8n+10),
	.placeResults.loggedout > div:nth-child(8n+11) {
		background-color: #f5f5f5;
	}

	.placeResults.loggedin > div:nth-child(10n+10),
	.placeResults.loggedin > div:nth-child(10n+11),
	.placeResults.loggedin > div:nth-child(10n+12),
	.placeResults.loggedin > div:nth-child(10n+13),
	.placeResults.loggedin > div:nth-child(10n+14) {
		background-color: #f5f5f5;
	}
	.placeResults.loggedout > div:nth-child(4n+4){
		padding-left:20px;
	}
	.placeResults.loggedin > div:nth-child(5n+5){
		padding-left:20px;
	}
	.placeResults.loggedout > div:nth-child(4n+4),
	.placeResults.loggedout > div:nth-child(4n+5){
		padding-top:10px;
	}
	.placeResults.loggedin > div:nth-child(5n+5),
	.placeResults.loggedin > div:nth-child(5n+6),
	.placeResults.loggedin > div:nth-child(5n+7){
		padding-top:10px;
	}
	.placeResults.loggedout > div:nth-child(4n+6) {
		padding-bottom:10px;
		padding-left:20px;
	}
	.placeResults.loggedin > div:nth-child(5n+8) {
		padding-bottom:10px;
		padding-left:20px;
	}
	.placeResults > .tableHeading{
		font-size:11pt;
		color:#fff;
		padding:8px;
	}
	.tableHeading > a{
		color:#fff;
	}
	.tableHeading.input-field{
		margin:0;
		padding-left:10px;
	}
	.tableHeading.input-field > div > input{
		height:1.3rem;
		font-weight:bold;
		font-size:11pt;
		font-family:"Roboto", sans-serif;
		color:#fff;
		border-bottom:none;
		margin:3px 0 0 0;
	}
	.ratingBox{
		text-align:center;
		font-weight:bold;
		padding-bottom:0 !important;
	}
	.ratingEmpty{
		color:#ddd !important;
	}
	.ratingrow{
		height:8px;
		padding:0 !important;
	}
	.ratingval{
		background:#dbf3ff;
		height:8px;
		padding:0 !important;
		overflow:visible;
		white-space: nowrap;
		border-right:8px solid #ff7800;
	}
	.ratingrow>.btn{
		height:20px;
		padding:0;
		color:#039be5;
		line-height: 20px;
		background:transparent;
		width:10%;
		float:left;
	}
	#placeinfo .ratingrow{
		background:#f6f6f6;
		margin:0 -10px;
		height:20px;
	}
	#placeinfo .ratingval{
		height:20px;
	}
	.placeResults.loggedout > .resultSummary,
	.placeResults.loggedout > .ratingrow{
		grid-column-start:1;
		grid-column-end:4;
	}
	.placeResults.loggedin > .resultSummary,
	.placeResults.loggedin > .ratingrow{
		grid-column-start:1;
		grid-column-end:5;
	}
	.placeResults > .resultTitle{
		grid-column-start:1;
		grid-column-end:3;
	}
	.separator {
	    display: flex;
	    align-items: center;
	    text-align: center;
		color:#ccc;
		font-size:9pt;
		padding:0 !important;
	}
	.separator::before, .separator::after {
	    content: '';
	    flex: 1;
	    border-bottom: 1px solid #ccc;
	}
	.separator::before {
	    margin-right: .25em;
		padding:0;
	}
	.separator::after {
	    margin-left: .25em;
		padding:0;
	}
	.rowpadding{
		padding:5px 0;
	}
	.quickpadding{
		padding:8px 20px;
	}

/*//////////////////////////////////////////////////////////////////////////////////////
		style for places
//////////////////////////////////////////////////////////////////////////////////////*/

	.resultrow{
		background:#eee;
	}
	.resultTitle{
		font-weight:600;
	}
	.order,
	.orderingby{
		background:#ccc;
	}
	.orderby{
		background:#ccc url(../images/orderby.png) left no-repeat;
	}
	.orderingbydown{
		background:#ccc url(../images/orderbyDown.png) left no-repeat;
	}
	.orderingbyup{
		background:#ccc url(../images/orderbyUp.png) left no-repeat;
	}

	.orderby a, .orderingbyup a, .orderingbydown a{
		font-weight:bold;
		color:#fff;
		padding-left:23px !important;
		cursor:pointer;
	}
	#searchmessage{
		grid-column-start:1;
		grid-column-end:3;
		padding:20px;
	}
	#prevnext{
		grid-column-start:1;
		text-align:center;
		padding-top:10px;
	}
	#prevnext.loggedout{
		grid-column-end:3;
	}
	#prevnext.loggedin{
		grid-column-end:4;
	}
	#prevnext a{
		margin:1px;
		text-decoration:none;
	}
	#placetitle{
		font-size:21pt;
		text-decoration:none;
		font-weight:bold;
		text-transform:uppercase;
		margin:16px 0;
	}
	.ql-toolbar{
		margin-top:8px;
	}
	.ql-editor p:not(:first-child){
		margin-top:1em;
	}
	#rating{
		padding:2px 0 10px 0;
	}
	.smallinfobox{
		border-top:5px solid #ccc;
		width:210px;
		padding:8px;
		margin: 0 0 15px 0;
	}
	.largeinfobox{
		border-top:5px solid #ccc;
		width:210px;
		padding:5px 8px;
	}
	.subheading{
		font-size:30px;
		letter-spacing:-2px;
		font-weight:bold;
		color:#ddd;
		text-transform:uppercase;
		position: relative;
		line-height:20px;
		margin:0;
	}
	.smallinfobox .subheading{
		top: -7px;
		left: -6px;
	}
	.smallinfobox span{
		display:block;
		padding-bottom:8px;
	}
	.subsubheading{
		margin:0;
		font-size:11pt;
		font-weight:bold;
		color:#ff7800;
	}
	article .subsubheading{
		color:#039be5;
	}
	.unsaved{
		outline-color:#ff7800;
		background:#ffeed6;
	}
	.saving{
		outline-color: #ffeed6;
		pointer-events: none;
    	animation-name: savingAnim;
		animation-duration: 1.5s;
		animation-delay: 0;
		animation-timing-function: ease-out;
  		animation-direction: alternate;
  		animation-iteration-count: infinite;
		/*background: #039be5;*/
	}
	@keyframes savingAnim {
		0%, 100%{
			opacity: 0.7;
			background:#ff7800;
		}
		50%{
			opacity: 0.2;
		}
	}

	/* --> */

	.nomargin{
		margin:0 !important;
	}
	.nopad{
		padding:0 !important;
	}
	.menu-button{
		display:none;
	}

select.browser-default{
	display:block !important;
	position:relative !important;
	width:100% !important;
	pointer-events: auto !important;
	height:2rem !important;
	opacity:1 !important;
}
*[contenteditable="true"]:hover{
	background:#dbf3ff;
	outline:2px solid #039be5;
}
*[contenteditable="true"]:focus{
	background:#dbf3ff;
	outline:2px solid #039be5;
}
#placetitle[contenteditable="true"]{
	min-height:50px;
}
#savebutton,
.buttonrow{
	padding:10px 0;
}

select.browser-default.placeadmin{
	padding:0 !important;
	height:25px !important;
	width:calc(100% - 30px) !important;
}

.btn.plus,
.btn.minus,
.btn.deleteimg,
.btn.square,
#images_container .btn{
	width:25px;
	height:25px;
	padding:0;
	line-height:25px;
	font-weight:bold;
}
.btn.small{
	height:25px;
	line-height:12pt;
}
#addplacebutton{
	position: absolute;
	bottom: 8px;
	left: 8px;
	margin:0 !important;
}
.btn.plus,
.btn.minus{
	float:right;
}
#images_container .btn{
	font-weight:bold;
}
#images_container .btn.prevnext{
	margin-top:5px;
	height:20px;
	line-height:20px;
}
#rating > .btn{
	padding:0;
	width:25px;
	height:25px;
	margin-right:2px;
	background:#eee;
}
.signinCentered .btn.login{
	width:calc(70% - 3px);
}
.signinCentered .btn.cancel{
	width:calc(30% - 3px);
}
.btn.cancel{
	background:#ccc;
}
#placetype div{
	padding:2px 0;
}
.loader{
	text-align:center;
	width:100%;
}
.loader img{
	margin:0 auto;
}