body { font: 16px/135% Arial, sans-serif; color: #000; font-style: normal; font-weight: normal; background: #e8e8e8; overflow: auto; overflow-y: scroll; }
h1 { font-size: 1.8em; line-height: 1.2em; color: #666; margin: 20px 0 40px 0; }
h1 span { color: #018990; font-weight: normal; font-size: 0.875em; }
h1 .small { color: #000; font-size: 0.625em; }
h2 { margin-top: 30px; }

#article { margin: auto; padding: 0 20px 50px 10px; max-width: 1000px; background-color: #e8e8e8; }
#demo { margin-top: 100px; }

footer { width: 100%; height: 40px; margin: 40px 20px 20px 0; font-size: 0.8125em; border-top: #ccc 1px solid; }
footer div.info { float: right; padding: 20px 40px 0 0; }

.right { float: right; }
.hide { display: none !important; }

.row { display: flex; flex-wrap: wrap; justify-content: space-between; }
.col { box-sizing: border-box; flex-grow: 0; flex-shrink: 0; }

.links { height: 20px; margin: 5px 60px 0 10px; }
.github { margin: 3px 0 0 0; float: right; }
a.github-link svg { width: 24px; }

.test-link { position: relative; float: right; margin: 3px 0 0 0; }
.links a { color: #0485BC; padding-left: 20px; }

a.test-results { margin-right: 60px; }

#convert { font-size: 0.875em; padding: 2px 30px; margin: 0 0 20px 0; background: #cdcdcd; border: #b0b0b0 1px solid; border-radius: 4px; cursor: pointer; }
#convert:hover { background: #c0c0c0; }
#clear-css, #clear-html { padding: 2px 8px; margin: 0 0 20px 20px; background: #cdcdcd; border: #b0b0b0 1px solid; border-radius: 4px; cursor: pointer; }
#clear-css:hover, #clear-html:hover { background: #c0c0c0; }
#axis { padding: 1px 5px; margin: 0 0 20px 20px; cursor: pointer; }

#selector-history { padding: 1px 5px; font-family: Consolas, monospace; font-size: 0.875em; margin: 0 0 20px 0; max-width: 250px; cursor: pointer; }

.label-saved, .label-axis, .label-console, .label-library { padding: 10px; margin: 11px 0 0 0; }
.label-console, .label-library { cursor: pointer; }

div.buttons { float: left; position: fixed; margin: 20% 0 0 20px; }
div.up-btn, div.down-btn { position: absolute; width: 24px; height: 32px; border: transparent 1px solid; border-radius: 3px; opacity: 0.7; cursor: pointer; }
div.up-btn { top: 40px; background: url(img/up.png) no-repeat; background-size: 1.5em; }
div.down-btn { top: 80px; background: url(img/down.png) no-repeat; background-size: 1.5em; }
div.up-btn:hover, div.down-btn:hover { border: #44bbaa 1px solid; opacity: 1; }
div.up-btn:hover { background: url(img/up2.png); background-size: 1.5em; }
div.down-btn:hover { background: url(img/down2.png); background-size: 1.5em; }

details>summary { width: 7em; cursor: pointer; }
option[title] { background: #f8f8f8; }

table { border-collapse: collapse; border-spacing: 0; margin: 5px 0 20px 0; background-color: #fafafa; }
table tbody { border-bottom: #bbb 1px solid; border-top: #bbb 1px solid; }
table thead th { padding: 5px 5px 5px 16px; color: #000; font-size: 1em; border: 1px solid #bbb; font-weight: normal; background-color: #ddd; vertical-align: middle; text-align: left; min-width: 100px; }
tr.group { background-color: #ececec; }
table thead { background: #ddd; }
table td { border: 1px solid #bbb; color: #000; padding: 5px 10px; overflow: visible; vertical-align: middle; }
table td.css { max-width: 250px; }
td.name { font-size: 0.75em; color: #000; width: 150px; }

code { color: #000; background-color: #fafafa; margin: 0; padding: 0; line-height: 1.3; }
code.css { width: 100%; font-size: 0.875em; color: #007AAE; display: inline-block; }
code.css:hover { text-decoration: underline; cursor: pointer; }
code.css.visited { color: red; }
code.xpath { width: 100%; font-size: 0.875em; color: #000; display: inline-block; }

#css-box, #xpath-box {
	font-family: Consolas, monospace;
	font-size: 1em;
	color: #007aae;
	background: #f0f0f0;
	border: #ccc 1px solid;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.07), 0 3px 1px -2px rgba(0, 0, 0, 0.05);
	border-radius: 3px;
	font-size: 14px;
	font-weight: 400;
	min-height: 50px;
	max-height: 200px;
	letter-spacing: normal;
	line-height: 20px;
	margin: 0 0 20px 0;
	padding: 10px;
}

.results { margin-top: 20px; }
#xpath-box { color: #000; padding-right: 30px; }
#message-box { color: #f00; background-color: #f0f0f0; font-size: 1em; padding: 10px; width: 98%; border: #ccc 1px solid; white-space: pre-wrap; }

.row.html-panel { margin: 10px 20px 5px 14px; }
#html-box { color: #000; background-color: #f0f0f0; font-size: 1em; padding: 10px; border: #ccc 1px solid; max-height: 400px; overflow-y: scroll; }
#run-xpath, #run-css { font-size: 0.875em; padding: 1px 15px; background: #d0d0d0; border: #a8a8a8 1px solid; border-radius: 4px; cursor: pointer; }
#run-xpath { float: left; margin: 0 0 10px 0; }
#run-css { float: left; margin: 0 0 10px 30px; }

#html-list { float: left; padding: 1px 5px; font-family: Consolas, monospace; font-size: 0.875em; margin: 0 0 10px 0; max-width: 250px; cursor: pointer; }
.label-html-list { float: left; margin: 0 30px 10px 10px; }
#clear-html { float: right; padding: 1px 8px; margin: -36px 0 10px 0; }

#copy-code { position: relative; float: right; padding: 12px; margin: 12px 12px -38px 12px; background: url(img/copy.png) center center no-repeat; opacity: 0.5; cursor: pointer; }
/*#copy-code { position: relative; float: right; padding: 12px; margin: 0; background: url(img/copy.png) center center no-repeat; opacity: 0.6; cursor: pointer; }*/
#copy-code:hover { opacity: 1; }

.letters { margin: 0; }
.uppercase, .lowercase { width: 750px; margin-right: 20px; }
#uppercase, #lowercase { font-size: 1em; padding: 5px; width: 100%; height: 20px; background-color: #f8f8f8; border: #ccc 1px solid; }
#to-lowercase, #to-uppercase { position: relative; float: right; margin-top: 17px; height: 20px; left: 10px; bottom: 10px; cursor: pointer; }

.console { margin: 0; float: right; }
#console-use { margin: 0; cursor: pointer; }

.table>summary { width: 300px; }

.errors { color: #d85100; }
.errors b { color: #444; }

@media only screen and (max-width: 1260px) {
	div.buttons { display: none; }
	#article { padding-right: 10px; }
	.uppercase, .lowercase { width: 700px; }
}

@media only screen and (max-width: 980px) {
	.console { display: none; }
	.uppercase, .lowercase { width: 550px; }
}

@media screen and (max-width: 800px) {
	td:nth-of-type(3) { display: none; }
	#axis { margin-left: 20px; }
	.uppercase, .lowercase { width: 420px; }
}

@media only screen and (max-width: 600px) {
	#article { padding: 0 5px 50px 5px; }
	#run-css { margin-left: 10px; }
	#to-lowercase, #to-uppercase { display: none; }
	#uppercase, #lowercase { width: 100%; }
	.uppercase, .lowercase { width: 400px; }
}

@media only screen and (max-width: 500px) {
	#convert { padding: 2px 10px; }
}