/* reset */
* {
	border: none;
	margin: 0;
	padding: 0;
}


/* set up general rules */
html, body {
	background-color: #E7ECEF;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	width: 100%;
}

html {
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 100%;
}

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

a:hover {
	text-decoration: underline;
}

button {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 0.95em;
	height: 25px;
	width: 70px;
}

button:hover {
	cursor: pointer;
}


/* app container */
#app {
	display: flex;
	flex-flow: row wrap;
	width: 100%;
}


/* title bar */
#title-bar {
	align-items: center;
	background-color: #004C8C;
	color: white;
	display: flex;
	height: 40px;
	justify-content: space-between;
	width: 100%;
}

	.title-bar-item {
		margin: 0 15px;
	}


/* main app parts: editor and reader; */
.big-box {
	background-color: white;
	box-shadow: 0 2px 5px #858889;
	flex: 1;
	font-size: 1em;
	height: 800px;
	margin: 10px;
	min-width: 480px;
}


/* editor box items */
#editor-button-row {
	display: flex;
	font-size: 0.9em;
	justify-content: flex-end;
	margin: 0 10px 0 100px;
	position: relative;
	top: 7px;
	z-index: 100;
}

	.editor-button-row-button {
		background-color: #0277bd;
		box-shadow: 0 2px 5px #888;
		color: white;
		margin: 0 3px;
	}

#editor {
	height: 100%;
	font-size: 1em;
	position: relative;
	bottom: 25px;
	width: 100%;
}


/* JSON reader container*/
#reader-box {
	display: flex;
	flex-direction: column;
}

	/* path bar */
	#reader-path-bar-holder {
		align-items: center;
		display: flex;
		height: 40px;
	}

		#reader-path-bar {
			align-items: center;
			box-shadow: 0 2px 5px #888;
			display: flex;
			flex: 1;
			height: 25px;
			margin: 0 10px;
		}

			.reader-path-bar-item {
				height: 100%;
				padding: 0 10px;
			}

			#reader-path-bar-label {
				align-items: center;
				display: flex;
				border-right: 1px solid #CCC;
			}

			#reader-path-bar-input {
				color: #455a64;
				flex: 1;
				font-family: "Roboto Mono", monospace;
				font-size: 0.9em;
			}

			#reader-path-bar-copy {
				background-color: white;
				border-left: 1px solid #CCC;
			}

	/* the JSON reader itself */
	#json-reader {
		height: 100%;
		overflow: auto;
		width: 100%;
	}

		#json-reader-error {
			font-family: "Roboto Mono", monospace;
			font-size: 0.9em;
			height: 200px;
			margin: 0 0 0 10px;
			width: 90%;
		}

			.json-reader-error-part {
				margin: 10px 0 0 0;
			}

				#json-reader-error-message {
					color: #B91400;
				}

			.json-reader-tree-subtree {
				margin: 0 0 0 25px;
				min-width: 400px;
			}

			.json-reader-tree-property {
				align-items: center;
				background-color: white;
				border-bottom: 1px solid #DDD;
				color: #0277bd;
				display: flex;
				overflow: auto;
				padding: 10px 4px;
			}

			.json-reader-tree-property:hover {
				cursor: pointer;
			}

				.json-reader-tree-property-arrow {
					font-size: 0.5em;
					margin: 0 5px 0 0;
				}

				.json-reader-tree-property-value {
					color: #455A64;
					padding: 0 10px 0 25px;
				}

				.json-reader-tree-property-selected {
					background-color: #C1D5E0;
				}


/* footer */
footer {
	align-items: center;
	background-color: #004C8C;
	color: white;
	display: flex;
	height: 25px;
	width: 100%;
}

	#footer-credit {
		margin: 0 0 0 10px;
	}