/*****************/
	/** CAMP STYLES **/
	/*****************/
	.campImage {
		position: absolute;
		right: 40px;
		top: 30px;
		border-radius: 2px;
		transform: rotate(2deg);
		height: 140px;
		width: 140px;
		background:rgba(73, 71, 69, 0.52);
		background-size: cover;
		background-position: 50% 50%;
		border: 6px solid #e8e2c6;
		box-shadow: 0 2px 5px -2px black;
		color: black;
		background-size:cover;
		background-position:50% 50%;
	}
	.campImage:before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-image: linear-gradient(to bottom right,rgba(255, 255, 255, 0),rgb(167, 130, 101));
		opacity: .6;
	}
	#campName {
		border-radius: 3px;
		text-shadow: 0px 1px 0px rgba(255,255,255,.5);
		color: #0e0e0e;
		text-align: center;
		background: url(/silphRoad/img/plank.jpg);
		background-size: 100% 100%;
		position: relative;
		margin-left: 60px;
		margin-right: 200px;
		margin-top: 0;
		border-top-right-radius: 10px;
		border-top-left-radius: 15px;
		box-shadow: 0 8px 9px -3px rgba(0, 0, 0, 0.8);
		overflow: hidden;
	}
	#campName h1, #beaconTitle h1 {
		margin:0;
		padding: 12px 6px 4px;
		font-size: 28px;
		font-family: 'nexa rust sans';
		letter-spacing: 0.1em;	
	}
	#campName:before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-image: linear-gradient(to bottom right,rgba(113, 64, 32, 0.68),rgba(90, 44, 12, 0.66));
		opacity: .6;
	}
	#campAddress {
		font-family: 'texgyreadventorbold';
		font-size: 16px;
		letter-spacing: 0.05em;
		text-shadow: 0 2px 5px black, 0 2px 5px black, 0 2px 5px black;
		color: #bca58b;
		background: rgba(0, 0, 0, 0.55);
		box-shadow: 1px 2px 5px 2px black inset;
		display: inline-block;
		padding: 0 7px;
		border-radius: 3px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.52);
	}
	
	#campEntry .campDetails:before, #beaconDetails .beaconDetails:before {
		background: url(<?=$this->webroot?>img/woodenSignTop.jpg);
		height: 1.5vh;
		background-size: cover;
		background-repeat: no-repeat;
		width: 100%;
		position: absolute;
		top: 10px;
		content:" ";
		left: 0;
	}
	
	#campEntry .campDetails:after, #beaconDetails .campDetails:after {
		background: url(<?=$this->webroot?>img/woodenSignBottom.jpg);
		height: 1.5vh;
		background-size: cover;
		background-repeat: no-repeat;
		width: 100%;
		position: absolute;
		bottom: 10px;
		content:" ";
		left: 0;
	}
	
	.currentOutpostDeets { flex:1; }
	.outpostNavWrap { flex:1; }
	
	.outpostNavWrap .btn span {
		width: calc(100% - 59px);
		color: #676767;
		font-size: 10px;
		font-family: texGyreAdventorBold;
		line-height: 1.1em;
		display: inline-block;
		white-space: initial;
		text-align: left;
		margin-top: 7px;
	}

	.outpostNavWrap .btn {
		padding: 6px 10px;
		display: block;
		height: 50px;
		border-color: transparent;
		border-right: .5px solid rgba(0, 0, 0, 0.51);
		background: #faf9f8;
	}

	.outpostNavWrap .btn img {
		float: left;
	}
	.outpostNavWrap .btn:hover span {
		color: #FFF;
	}
	
	.outpostNavWrap .btn:active, 
	.outpostNavWrap .btn:hover, 
	.outpostNavWrap .btn:focus, 
	.outpostNavWrap .btn.active {
		background: #E4C049;
		color: white;
		text-shadow: none;
	}
	
	#outpost_map .map-marker.camp > div { display:none; }
	
	#beaconDetailsBtnWrap .smallBtn {
		z-index: 2;
		height: 44px;
		display: inline-block;
		font-size: 15px;
		line-height: 34px;
		padding: 4px 5px;
		float: left;
		width: 90px;
	}	
	#beaconDetailsBtnWrap .btn-primary {
		background: #e65822;
		z-index: 2;
		padding: 5px 0px 5px;
		width: calc(100% - 146px);
		max-width: 270px;
		font-size: 18px;
		height: 45px;
		line-height: 22px;
		text-shadow: 0 0 7px #b74e27;
		border:1px solid transparent;
	}
	#beaconDetailsBtnWrap .btn-primary:hover {
		color: white;
		background: #e3b021;
	}

	
	#beaconDetailsBtnWrap .btn-primary.disabled {
		background: #61a763;
		color: white;
		opacity: 1;
	}

	.currentOutpostDeets .topic {
		padding: 10px 10px 7px;
		min-height: 20px;
		background: white;
		position: relative;
		border-radius: 1px;
		margin: 0px 0 3px;
		cursor: pointer;
	}
	.currentBeaconDeets .topic {
		padding: 2px 2px 0;
		position: relative;
		border-radius: 1px;
		margin: 0px 0 0px;
		cursor: default;
		text-align: left;
	}
	.currentOutpostDeets .topic > .body,
	.currentBeaconDeets .topic > .body {
		display: flex;
		line-height: 1.2em;
		font-size:13px
	}
	.currentOutpostDeets .topic.collapsed .replies {
		display: none;
	}
	.currentOutpostDeets .topic.collapsed > .body {
		line-height: 40px;
		font-weight: bold;
		color: #666;
	}

	.currentOutpostDeets .topic.collapsed > .body p {
		margin: 0;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	
	.topic .reply {
		margin-top: 0px;
		margin-left: 40px;
		font-size: 12.5px;
		font-weight: normal;
		line-height: 1.2em;
	}
	
	.reply > .body { display: flex; }
	.remark > .body { display: flex; }
	.topic .remark { margin-top: 0px; margin-left: 45px; }
	.topic p { margin: 0; background:white; border-radius:2px; padding:8px 5px 2px;word-break:break-word; }
	
	#beaconMessageEditorWrap { position:relative; }
	
	#composerTextarea {
		border-top: 1px dashed #d6cdc9;
		text-align: left;
		font-size: 15px;
		padding: 10px 60px 5px 40px;
		line-height: 17px;
		width: 100%;
		overflow: auto;
		margin-top: 0px;
		min-height: 40px;
		vertical-align: middle;
		display: flex;
		flex-direction: column;
		justify-content: center;
		max-height: 250px;
		background: rgba(255, 255, 255, 0.95);
	}
	#composerTextarea:empty::before {
		content: attr(placeholder);
		color: #9aa2ab;
		display: block;
		margin-top: -1px;
		margin-left: 1px;
		pointer-events: none;
	}
	#composerTextarea:focus {
		background: white;
		outline: none;
	}

	#beacon_map .mapboxgl-control-container > div { 
		bottom: 35px;
		margin-right: -5px;
		opacity: .5;
	}
	
	@media screen and (max-width:620px) {
		.topic .reply { margin-left: 30px; }
		.topic .remark { margin-left: 15px; }

		#beacon_map .mapboxgl-ctrl-bottom-right {
			bottom: 35px;
			margin-right: -5px;
			opacity: .5;
		}
		
		#beaconDetailsBtnWrap .smallBtn {
			height: 35px;
			font-size: 14px;
			line-height: 24px;
			padding: 4px 5px;
			width: 64px;
		}	
		#beaconDetailsBtnWrap .btn-primary {
			padding: 5px 0px 5px;width: calc(100% - 146px);max-width: 270px;font-size: 15px;height: 35px;line-height: 22px;
		}

	}