html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

body { 
	background-color:#fff; 
	font-family: "Verdana", "Georgia", Sans-Serif; 
	font-size: 16px; 
	margin:0; 
}

button {
	font-size: 1em;
	color:#000;
}

input {
	font-size: 1em;
}

a:link, a:visited,a:active { 
	color:#000; 
	text-decoration:none;
}

a:hover { 
	text-decoration:underline; 
}

#logo {
	margin: 0;
	width:60%;
}

#logo img {
	margin: 0;
	width: 100%;
	cursor: pointer;
	image-rendering: -moz-crisp-edges; 
	image-rendering: -o-crisp-edges; 
	image-rendering: -webkit-optimize-contrast; 
	image-rendering: crisp-edges; 
	-ms-interpolation-mode: nearest-neighbor; 
}

#title { 
	margin: 1vw;  
	color: #444; 
	text-shadow: 0 1px 0 #eee; 
	font-size:1em;
}

#title h2 { 
	font-size: 1.25em; 
	margin: 0; 
}

#title p { 
	margin:0;
}

#options {
	margin:1vw; 
	padding:1vw; 
	border:1px solid #bbb; 
	border-radius:1em;
	clear:both;
	font-size:1em;
	flex-flow:row wrap;
}

.opts {
	display:none;
}

.recopts {
	margin: 1vw; 
	width: -webkit-fill-available; 	
	display: flex;
    align-items: center;
}

.rec {
	/*border: 1px solid #eee;
    background: #fff;
    padding: 0.75vw;*/
	display:flex;
	align-items:center; 
}

.rec:hover {
	/*opacity: 0.8;*/
}

#recbox {
	margin:0; 
	padding:0; 
	margin-right:0.5em; 
	height:1.25em;
	width:1.25em;
	cursor: pointer;
}

#reclbl {
	cursor: pointer;
}

.tip {
	margin:0 2vw;
	font-style:italic;
}

.flex {
	display:flex;
}

.btn {
	border: none;
	outline: none;
	padding: 2vw 0vw;
	background-color: #eee;
	cursor: pointer;
	margin:1vw;
	text-align: center;
	font-weight:bold;
	align-items: center;
	justify-content: space-around;
	flex:1 25vw;
}

.tbtn {
	border: none;
	outline: none;
	padding: 2vw 0vw;
	background-color: #eee;
	cursor: pointer;
	margin:1vw;
	text-align: center;
	font-weight:bold;
	align-items: center;
	display:block;
}

.btn:hover {
	background-color: #ddd;
}

.btn.active {
	background-color: #444;
	color: white;
}

.or {
	color:#444; 
	padding-left:1vw;
	font-size:1em;
	position:relative;
}

.break {
	flex-basis: 100%;
	height: 0;
}

.blank {
	border: none;
	outline: none;
	padding: 0;
	margin: 1vw;
	background-color:#bbb;
	flex:1 25vw;
	align-items: center;
	justify-content: space-around;
	height:0;
}

#filter {
	width: -webkit-fill-available;
	padding: 12px 20px 12px 40px;
	border: 1px solid #ddd;
	text-align: left;
}

#db_table {
	border-collapse: collapse;
	width: 100%;
}

#db_table th, #db_table td {
	text-align: left;
	padding: 1vw;
	display:block;
	border:0;
}

#db_table tr td:first-child {
	color:#fff;
}

#db_table tr td:nth-child(2) {
	font-weight:bold;
}

#db_table tr td:nth-child(3) {
	color:#444;
}

#db_table tr td:nth-child(4) {
	font-size: 0.9em;
	color:#777;
	display:block;
	font-style: italic;
}

#db_table td img {
	max-width:200px;
	width: 35%;
	margin: 0;
	display:block;
}

.header {
	display:none;
	clear:both;
}

.filterDiv {
	background-color: #fff;
	border-bottom: 1px solid #ddd;
	color: #000;
	margin: 0;
	padding:0;
	display: none;
}

.label {
	background-color: #4b71a8;;
	font-weight:bold;
	font-size:1.25em;
	text-transform: uppercase;
	color:#fff;
}

.label > td:not(:first-child) {
	display:none !important;
}

.label > td {
	float:none !important;
	padding:0.5vw !important;
}

#empty > td:not(:nth-child(2)){
	display:none !important;
}

.cathead { 
	font-weight: bold;
}

.show {
	display: block;
}

.catbox {
	display: block;
	margin:2vw 1vw;
}

.catbut_sp {
	flex:0;
	text-align:right;
	display:none;
}

.catbut:link, .catbut:visited, .catbut:active {
	border: none;
	outline: none;
	background-color: #214478;
	color:#fff;
	cursor: pointer;
	text-align: center;
	font-weight:bold;
	align-items: center;
	justify-content: space-around;
	flex:1;
	margin:0.25vw;
	padding:2vw 0.5vw;
	display:block;
}
	
.catbut:hover {
	text-decoration:none;
	opacity: 0.5;
}

@media only screen and (min-width: 1000px) {
	body {
		font-size:14px;
	}
	
	#head {
		display:flex;
	}
	
	#logo {
		margin: 1vw 0 0 1vw;
		/*min-width:300px; */
		flex:1;
	}
	
	#title { 
		margin: 2vw 2vw 1vw; 
		float:left; 
		flex:3;
	}
	
	#headspace {
		flex:0;
	}
	
	.btn {
		margin:0.25vw;
		padding: 0.75vw 0vw;
		flex:1 8.5vw;
	}
	
	.blank {
		margin: 0.25vw;
		padding: 0;
		flex:1 8.5vw;
	}
	
	#db_table {
		border-collapse: collapse;
		width: 100%;
	}

	#db_table tr td:first-child {
		flex:15;
	}

	#db_table tr td:nth-child(2) {
		font-weight:bold;
		flex:15;
	}

	#db_table tr td:nth-child(3) {
		color:#444;
		flex:55;
	}

	#db_table tr td:nth-child(4) {
		font-size: 0.9em;
		color:#777;
		flex:15;
	}

	#db_table td img {
		width: 100%;	
		margin: 0 auto;
	}
	
	.label {
		background-color: #4b71a8;
		font-weight:bold;
		font-size:1.25em;
		text-transform: uppercase;
	}

	.show {
		display: flex;
	}
	
	.catbox {
		display:flex;
		margin:0;
	}
	
	.catbut_sp {
		flex:1;
		margin: 0.5vw 1vw 0;
		padding: 0.75vw 0;
		overflow: visible;
		height:auto;
		display:block;
	}
	
	.catbut:link,.catbut:visited,.catbut:hover,.catbut:active { 
		margin: 0.5vw 1vw 0;
		padding: 0.75vw 0;
	}
	
	.recopts {
		margin: 0.25vw 0.25vw 1vw;
	}
	
	.rec {
		/*padding: 0.75vw;*/
	}
	
}