.handheld div {
	display: inline-block;
	width: 42%;
	vertical-align: top;
	padding-left: 1em;
}

.handheld div.ios {
	float: right;
}

.handheld ol {
	font-size: 0.8em;
}

.saving {
	animation: background-fade 300ms forwards;
}

@keyframes background-fade {
	99.9% {
		background: #006400;
	}
	100% {
	}
}

.hide_cost #rrp_input:hover,
.hide_cost #rrp_input:focus {
	color: #ccc;
}

.hide_cost #rrp_input {
	color: #0A0A0A;
}

.help_settings {
	color: #AAA;
	text-align: center;
	margin-bottom: 1.25em;
}

.about h2 {
	color: #CCC;
	border-bottom-color: #111;
	margin-top: 1.2em;
}

.about {
	color: #ccc;
	font-size: 1.2em;
	/*padding: 1em;*/
}

.help .popup {
	z-index: 999;
	opacity: 0.95;
	display: block;
	min-width: 250px;
	background: #050505;
	border: 2px solid #333;
	border-radius: 0.5em;
	padding: 0.5em;
	color: #aaa;
	display: none;
}

.help .popup .header {
	text-transform: uppercase;
	font-weight: bold;
	color: #ccc;
	padding-left: 0.25em;
	padding-bottom: 0.25em;
	width: 100%;
	border-bottom: 2px solid #333;
	margin-bottom: 0.25em;
}

.help .popup .close {
	position: absolute;
	top: 0.25em;
	right: 0.5em;
	color: #ccc;
}

.help .popup .text {
	padding: 0.5em;
}

.help .close,
.help .open {
	color: #666;
	cursor: pointer;
}
.help .popup,
.help .open {
	position: absolute;
}
.help .popup {
	right: 1.5em;
}
.help .open {
	right: 1em;
	background: #000;
	width: 1.1em;
	height: 1.1em;
	text-align: center;
	border-radius: 0.25em;
	color: #999;
}

html {
	position: relative;
	background: linear-gradient(0deg, #090909, #101010);
}


body {
	max-width: 500px;
	margin: 0px auto 0px auto;
	padding: 1em 1em 100px 1em;	/* bottom padding for back arrow space */
	background: #1f1f1f;
	color: #666;
	border-right: 8px solid #000;
	border-left: 8px solid #000;
	position: relative;
}

.site_header {
	color: #ddd;
	font-size: 1.75em;
	line-height: 2em;
}

.settings_menu {
	text-align: center;
}
.settings_menu li {
	display: inline-block;
	padding: 0.25em 0.75em;
	background: #111;
	border-left: 2px solid #666;
}
.settings_menu li:last-child {
	border-right: 2px solid #666;
}
.settings_menu li:hover {
	background: #000;
}

.clone {
	display: none !important;	
	background: #f00;
}

.error {
	background: #f00 !important;
}

.plus {
	border: 2px solid #666;
}
.minus, .plus {
	min-width: 1em !important;
	width: 2em !important;
}

a {
	color: #aaa;
	text-decoration: none;
	border-bottom: 1px solid #555;
}

a.last_updated {
	color: #666;
}

a:hover {
	border-bottom: 1px solid #aaa;
}

.debug {
	background: #300;
	color: #fff! important;
}

.settings .mark_up input {
	float: none !important;
}

.settings td {
	text-align: center !important;
}

.settings .mark_up input,
.settings .interface input,
.settings .interface select,
.settings .price input,
.settings .price select {
	float: left;
	min-width: 8em;
	width: 5em;
}

.settings label {
	width: 10em;
	text-align: right;
	padding-right: 1em;
	float: left;
	clear: left;
}

table {
	text-align: center;
	background: #444;
	border-collapse: collapse;
	border-radius: 0.25em;
	border-style: hidden;
	box-shadow: 0 0 0 2px #000;
	width: 100%;
}

.markups {
	position: absolute;
	top: 1em;
	left: 20em;
}

.footer {
	margin-top: 0.5em;
	color: #666;
}

table th,
table td {
	border: 1px solid #000;
	color: #aaa;
}

.settings table th,
.settings table td {
	padding: 0.3em 0.5em !important;
}

table th {
	background: #000;
}

.title {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

* {
	margin: 0px;
	padding: 0px;
}

#size_diff {
	position: fixed;
	left: 50%;
	font-size: 1.3em;
	margin-top: 0.1em;
}

#size_diff b {
	font-size: 1.1em;
}

.settings_menu,
fieldset {
	margin-top: 1.5em;
	/*	margin-bottom: 1em;*/
	color: #ccc;
	border: 2px solid #666;
	border-radius: 0.25em;
	background: #333;
}

fieldset {
	padding: 0.5em 1em;
	margin-top: 0.75em;
}

legend {
	background-color: #222;
	padding: 0.15em 1em;
	color: #ccc;
	font-weight: bold;
	border-radius: 0.15em;
	border: 2px solid #666;
	position: relative;
	bottom: 0.25em;
}

h2 {
	text-transform: uppercase;
	color: #BBB;
	border-bottom: 4px solid #444;
	margin-bottom: 0.5em;
	padding-left: 1em;
}

select, input {
	background-color: #111;
	border-radius: 0.25em;
	padding: 0.25em;
	border: 0px;
	color: #aaa;
	background: #111111;
}


.settings_buttons {
	text-align: center;
	margin-bottom: 0.5em;
}

.settings_buttons input {
	margin: 0.25em;
	padding: 0em 1em;
	text-transform: uppercase;
	border: 2px solid #000;
	height: 3em;
}

input:not([type="button"]){
	padding-left: 0.5em;
}

.settings .interface select,
.settings .interface input,
.settings .price select,
.settings .price input {
	margin-bottom: 0.25em;
}

/* extra little gap */
.settings .price #rrp_output_currency,
.settings .price #rrp_shipping_amount,
.settings .price #rrp_round_to_nearest,
.settings .price #shipping_amount {
	margin-bottom: 1em;
}

.from_to_symbol {
	vertical-align: top;
	font-size: 2em;
}

.section select,
.section input {
	/*width: 100% !important;*/
	color: #ccc;
	background: #000;
	border: none;
	margin: 0em 0.1em;
	padding: 0.2em 0.5em;
	/*font-size: 1em;*/
	font-size: 2em;
}

.section option:checked {
	font-weight: bold;
}

.section input {
	text-align: right;
}

input.perc {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100%' width='100%'><text x='85%' y='65%' fill='grey' font-size='0.85em' font-family='arial'>%</text></svg>") !important;

}

#size_imperial {
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100%' width='100%'><text x='90%' y='60%' fill='white' font-family='arial'>▼</text></svg>") !important;
}

#size_metric,
#size_imperial,
#rrp_input,
#rrp_output {
	display: block;
	font-size: 3em;
	margin: 0 auto 0 auto;
	display: block;
	font-size: 3em;
	width: 100%;
	text-align: left;
}

#rrp_output {
	color: #ccc;
}

.rrp #rrp_input_currency,
.rrp #rrp_output_currency {
	padding-right: 1em;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100%' width='100%'><text x='80%' y='60%' fill='white' font-family='arial'>▼</text></svg>") !important;

}

#rrp_rate {
	display: none;
}

.show_markup #rrp_rate {
	display: block;
	position: absolute;
	right: 0.5em;
	font-size: 2em;
	color: #050505;
	padding-top: 0.1em;
}

#rrp_output,
#rrp_input {
	margin-bottom: 0.25em;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100%' width='100%'><text x='5%' y='60%' fill='gray' font-size='1em' font-family='arial'>$</text></svg>");
	background-repeat: no-repeat;
	background-position: center left;
	padding-left: 1em;
}

#size_metric {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100%' width='100%'><text x='88%' y='55%' fill='gray' font-size='1em' font-family='arial'>mm</text></svg>");
	background-repeat: no-repeat;
	background-position: center right;
	padding-right: 2.2em;
}

.section .input {
	text-align: center;
}

.settings_section {
	margin-top: 1em;
	margin-bottom: 1em;
}

.settings_section .help {
	padding-bottom: 0.1em;
}

.section {
	margin-bottom: 1.5em;
	/*padding: 0em 1em;*/
}
.input,
.output {
	margin-left: auto;
	margin-right: auto;
	/*	margin: 0 auto 0 auto;*/
}
.input {
	padding-bottom: 0.25em;
	/*border-bottom: 2px solid #333;*/
	margin-bottom: 0.1em;
}

.output {
	padding-top: 0.25em;
	/*	border-top: 2px solid #333;*/
}


/* icons */
.icon_about {
	position: absolute;
	left: 1em;
}

.icon_about,
.icon_calc,
.icon_settings {
	position: absolute;
	bottom: 1em;
}

.icon {
	cursor: pointer;
	width: 4em;
	height: 4em;
	background-repeat: no-repeat no-repeat;
	background-position: center center;
	background-size: cover;
}

.icon_calc {
	left: 50%;
	right: 50%;
	margin-left: -28px;	 /* offset */
	background-image: url('data:image/svg+xml,%3Csvg width="20" height="20" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath style="fill:gray;stroke-width:.117262;fill-opacity:1" d="M-5.316-15.287c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10-4.477-10-10-10z" transform="translate(15.316 15.287)"/%3E%3Cpath d="M5.926 2.982h7.613c.565 0 1.02.475 1.02 1.065v11.906c0 .59-.455 1.064-1.02 1.064H5.926c-.566 0-1.022-.475-1.022-1.064V4.047c0-.59.456-1.065 1.022-1.065zm1.148 1.555c-.395 0-.71.33-.71.742v1.68c0 .411.315.744.71.744h5.314c.395 0 .713-.333.713-.744v-1.68a.726.726 0 0 0-.713-.742Zm.107 4.342c-1 .001-.999 1.502.002 1.501 1-.001.999-1.502-.002-1.501Zm2.592 0c-1 .001-.999 1.502.002 1.501 1-.001.999-1.502-.002-1.501Zm2.592 0c-1 .001-.999 1.502.002 1.501 1-.001.999-1.502-.002-1.501zM7.181 11.47c-1.001.001-1 1.503.002 1.502 1.001-.001 1-1.503-.002-1.502Zm2.592 0c-1.001.001-1 1.503.002 1.502 1.001-.001 1-1.503-.002-1.502zm2.592 0c-1.001.001-1 1.503.002 1.502 1.001-.001 1-1.503-.002-1.502zm-5.184 2.592c-1.001.001-1 1.503.002 1.502 1.001-.001 1-1.503-.002-1.502zm2.592 0c-1.001.002-.998 1.504.003 1.502 1.001-.001 1-1.503-.002-1.502zm2.592 0c-1.001.001-1 1.503.002 1.502 1.001-.001 1-1.503-.002-1.502z" style="fill:%23000;stroke-width:.117262"/%3E%3C/svg%3E');
}


.icon_back {
	position: fixed;
	left: 50%;
	margin-left: 185px;
	bottom: 1em;
	z-index: 1000;		/* always on top */
	background-image: url('data:image/svg+xml,%3Csvg width="20" height="20" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath style="fill:gray;fill-opacity:1;stroke-width:.117262" d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10z"/%3E%3Cpath d="m10.04 2.051 1.852 1.85-4.81 4.81h10.824v2.62H7.123l4.77 4.769-1.852 1.85-7.948-7.946.004-.004-.004-.004 7.948-7.945Z" style="fill:%23000;fill-opacity:1;stroke-width:.117262"/%3E%3C/svg%3E');
}

.icon_about {
	background-image: url('data:image/svg+xml,%3Csvg width="20" height="20" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath style="fill:gray;stroke-width:.117262;fill-opacity:1" d="M-5.316-15.287c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10-4.477-10-10-10z" transform="translate(15.316 15.287)"/%3E%3Cpath d="M10.053 3.074c2.964 0 4.482 1.991 4.482 4.363 0 2.372-1.21 2.562-2.254 3.274-.522.284-.877.949-.853 1.47 0 .38-.118.641-.426.618H9.08c-.332 0-.569-.476-.569-.737 0-1.589.118-1.943.948-2.75.854-.782 2.134-1.092 2.158-1.922-.024-.687-.426-1.54-1.707-1.588-.759-.07-1.186.188-1.992 1.303-.261.285-.64.499-.924.285l-1.281-.949c-.214-.237-.356-.615-.143-.947 1.186-1.779 2.11-2.42 4.483-2.42Zm-.024 10.293c.972 0 1.78.807 1.78 1.78.023.995-.831 1.802-1.78 1.778-1.02 0-1.756-.854-1.78-1.779 0-.972.808-1.78 1.78-1.78z" style="fill:%23000;stroke-width:.117262"/%3E%3C/svg%3E');
}


.icon_settings {
	right: 1em;
	background-image: url('data:image/svg+xml,%3Csvg width="20" height="20" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath style="fill:gray;stroke-width:.117262;fill-opacity:1" d="M-5.316-15.287c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10-4.477-10-10-10z" transform="translate(15.316 15.287)"/%3E%3Cpath d="M8.6 3h2.8c.17 0 .32.129.35.289L12 5.15c.43.17.83.41 1.19.69l1.74-.71c.16-.06.34-.001.43.159l1.4 2.422c.09.15.05.339-.08.449l-1.481 1.16c.03.22.05.45.05.68 0 .23-.02.46-.05.68l1.48 1.16c.13.11.17.289.08.449l-1.399 2.422a.353.353 0 0 1-.43.148l-1.74-.7c-.36.28-.76.51-1.19.69l-.25 1.85c-.03.17-.179.3-.349.3h-2.8c-.17 0-.32-.13-.35-.3l-.25-1.85c-.44-.18-.83-.41-1.19-.69l-1.74.7a.353.353 0 0 1-.43-.148l-1.4-2.422a.35.35 0 0 1 .08-.45l1.48-1.16c-.03-.22-.05-.45-.05-.68 0-.23.02-.459.05-.679l-1.48-1.16a.352.352 0 0 1-.08-.45l1.4-2.421c.09-.16.27-.218.43-.158l1.74.709c.36-.28.75-.52 1.19-.69l.25-1.861c.03-.16.18-.29.35-.29zM10 8c-1.11 0-2 .89-2 2 0 1.782 2.154 2.674 3.414 1.414C12.674 10.154 11.782 8 10 8Z" style="fill:%23000;stroke-width:.117262"/%3E%3C/svg%3E');
}


/* calculator */
#calc {
	box-shadow: 0 0 0 4px #000;	/* border */
}

#calc input {
	font-size:  2em;
	min-width: 2.5em;
	max-width: 10em;
}

#calc td {
	padding: 0.75em 0.5em;
}

#calc #result {
	background: #000;
}