mobile.css

@font-face {
	font-family: 'Roboto Mono';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto Mono'), local('RobotoMono-Regular'), url('robotomono.woff') format('woff');
}
body {
	background: #fff;
}
main {
	margin: 1em;
	line-height: 1.5;
	background: #fff;
}
header {
	margin: 2em 0 0;
}
ul#notice {
	margin: 2em 0 0 0;
	padding: 0 0 0 1em;
	height: 6em;
	overflow-y: scroll;
	border-top: 3px double #769; 
}
ul#notice li {
	text-indent: -0.5em;
}
ul#notice li:before {
	content: '\00bb';
	display: inline-block;
	text-align: center;
	width: 0.5em;
}
a#reset {
	display: none;
}
a#clearCart {
	border-radius: 0 4px 4px 0;
}
article {
	margin: 0 0 2em 0;
	height: 6em;
	overflow-y: scroll;
	border-top: 1px dashed #769; 
	border-bottom: 3px double #769; 
}
form {
	margin: 2em 0 0;
}
time {
	font-family: 'Roboto Mono';
	font-size: 90%;
	letter-spacing: -1px;
	line-height: 1.667;
}
p {
	margin: 0;
}
nav {
	margin-top: -1.667em; 
}
nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
nav ul li {
	display: inline-block;
	margin: 0 4px 0 0;
}
nav ul li:last-child {
	margin: 0;
}
nav ul li a {
	display: inline-block;
	color: #658;
	border: 1px solid #769;
	border-radius: 4px;
	padding: 0 3px;
	width: 1em;
	height: 1.5em;
	overflow: hidden;
}
nav ul li.active a {
	background: #769;
	color: #fff;
	border: 1px solid #658;
	border-radius: 4px;
	padding: 0 3px;
}
span#inventoryCount {
	display: inline-block;
	line-height: 1.111;
	font-family: 'Roboto Mono';
	font-size: 90%;
	letter-spacing: -1px;
}
input[type='text'] {
	width: 3em;
}
input#tag1, input#tag2 {
	width: 5em;
}
.tagContainer label:nth-child(2) {
	border-radius: 0 4px 4px 0;
	margin: 0 4px 0 0;
}
.tagContainer input:last-child {
	border-radius: 4px !important;
	margin: 0 0 0 5px;
}
.subcategory input {
	display: none;
}
.subcategory label {
	display: inline-block;
	margin: 0 2px 3px 0;
	padding: 0 2px;
	color: #658;
	border: 1px solid #769;
	border-radius: 4px;
	font-size: 90%;
	transition: color 0.2s, background 0.2s;
}
.subcategory input:checked + label {
	background: #769;
	border: 1px solid #658;
	color: #fff;
}
.nosubcategory {
	display: none;
}
.thead {
	display: none;
}
.tr {
	clear: both;
	position: relative;
	padding: 0.5em 0;
}
.td {
	display: inline-block;
}
.item {
	margin: 0 4px 0 0;
	display: inline-block;
	padding: 1px 4px;
	background: #999;
	color: #fff;
	border-radius: 4px;
	transition: background 0.2s;
}
.own .item {
	background: #769;
}
.item:hover {
	color: #fff;
}
.nameChosen, .id, .star, .category {
	margin: 0 4px 0 0;
	padding: 1px 4px;
	float: left;
	color: #fff;
	background: #98a;
	border-radius: 4px;
}
.score, .id, .star, .tooltip {
	padding: 1px 4px 1px 3px;
	font-family: 'Roboto Mono', 'PingHei';
	font-size: 90%;
	line-height: 1.667;
	letter-spacing: -1px;
}
.nameChosen {
	background: #769;
}
.score {
	padding: 0;
	float: right;
}
.score a {
	display: inline-block;
	padding: 0 3px;
	color: #658;
	border: 1px solid #769;
	border-radius: 4px;
}
.tooltip {
	margin: 0 4px 0 0;
	padding: 1px 2px 1px 1px;
	display: inline-block;
	color: #fff;
	background: #79f;
	border-radius: 4px;
	transition: background 0.2s;
}
.tooltip:before {
	content: '★';
}
.tooltip.show {
	background: #48f;
}
.tooltip.show:after {
	content: attr(data-content);
	padding: 0.25em 0.5em;
	position: absolute;
	top: 2.7em;
	left: 0em;
	color: #fff;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 4px;
	z-index: 1;
	opacity: 1;
}
.deps .tooltip {
	background: #f77;
}
.deps .tooltip.show {
	background: #f55;
}
.rating {
	margin: 0 4px 0 0;
	float: left;
}
.tag {
	margin: 0 0 0 8px;
	float: left;
	color: #658;
}
.source {
	clear: left;
	padding: 1px 4px 1px 3px;
	color: #fff;
	background: #98a;
	border-radius: 4px;
	font-family: 'Roboto Mono', 'PingHei';
	font-size: 90%;
	line-height: 1.667;
	letter-spacing: -1px;
}
.td[data-tooltip]:before {
	display: inline-block;
	content: attr(data-tooltip);
	padding: 0 1px 0 0;
	font-weight: normal;
}
.td:nth-child(6), .td:nth-child(7) {
	clear: left;
}
.void, .totalScore .td:not(.score) {
	display: none;
}
.totalScore {
	padding: 2.5em 0 0 0;
}
.totalScore .score {
	display: inline-block;
	padding: 1px 4px;
	color: #fff;
	background: #98a;
	border-radius: 4px;
}
#clothes {
	margin: 2em 0;
}
#clothes .category {
	display: none;
}
#shoppingCart .tbody .tr:not(.totalScore):first-child {
	padding: 2.5em 0 0 0;
}
#shoppingCart .id, #shoppingCart .star, #shoppingCart .source {
	display: none;
}