cooking.css

/* 基本設定 */

html {
	overflow-y: scroll;
}

body {
	background-color: #FFFFFF;
	width: 100%;
	margin: 0px;
	padding: 0px;
}

header {
	align-items: center;
	background-color: #6cbdff;
	background-image: url("./image/sora.jpg");
	padding: 2px 4px;
	margin: 0px;
	position: fixed;
	top: 0px;
	z-index: 1000;
	height: calc(82px - 8px);
	width: calc(100% - 8px);
}

article {
	width: 100%;
	max-width: 900px;
	padding: 0px;
	margin: 82px auto 0px auto;
}

footer {
	margin: 4px 2px 24px 2px;
	padding: 2px 6px;
	width: calc(100% - 14px);
	text-align: right;
	font-size: 12px;
	color: rgb(31, 31, 31);
	display: block;
}

h2 {
	font-size: 16px;
	border-left: #FF8080 4px solid;
	border-top: #AABBFF 0px solid;
	border-right: #AABBFF 1px solid;
	border-bottom: #AABBFF 1px solid;
	padding: 2px 4px;
	margin: 2px 4px 2px 4px;
	background-color: #cce0ff;
}

h3 {
	font-size: 16px;
	border-left: #FF8080 4px solid;
	border-top: 0px;
	border-right: 0px;
	border-bottom: 0px;
	padding: 2px 4px;
	margin: 2px 4px 2px 4px;
}

hr {
	border-width: 1px 0px 0px 0px;
	border-style: dashed;
	border-color: #AABBFF;
	height: 1px;
	margin: 10px 2px;
}

img.logo {
	margin: 2px;
	width: 200px;
}

img.Icon {
	width: 48px;
	height: 48px;
}

img.float {
	float: left;
	margin-right: 4px;
}

input {
	vertical-align: middle;
	margin: 1px;
	padding: 1px;
}

a {
	cursor: pointer;
	color: #474fb3;
	font-weight: bold;
	text-decoration: none;
}

a:hover, a:active {
	color: #656ffc;
	text-decoration: underline;
}

/* Table周り */

table {
	table-layout: fixed;
	width: calc(100% - 5px);
	font-size: 14px;
	empty-cells: show;
	border: 0px;
	margin: 2px;
	background: rgb(243, 243, 243);
	border: solid 2px rgb(201, 201, 201);
	border-collapse: collapse;
}

table th {
	font-weight: bold;
	line-height: 120%;
	text-align: center;
	word-break: keep-all;
	padding: 2px;
	background: rgb(230, 230, 238);
	border: solid 2px rgb(201, 201, 201);
}

table col.s10 {
	width: 10%;
}

table col.s15 {
	width: 15%;
}

table col.s20 {
	width: 20%;
}

table col.s30 {
	width: 30%;
}

table col.s40 {
	width: 40%;
}

table col.s50 {
	width: 50%;
}

table col.s55 {
	width: 55%;
}

table col.s60 {
	width: 60%;
}

table col.s70 {
	width: 70%;
}

table col.s80 {
	width: 80%;
}

table col.s90 {
	width: 90%;
}

table td {
	padding: 2px;
	border: solid 2px rgb(201, 201, 201);
}

table td.icon {
	text-align: center;
	margin: 0px;
	padding: 4px 2px 0px 2px;
}

table td.Rank, table td.Volume, table td.Recovery, table td.Fatigue {
	text-align: center;
}

span.get {
	color: green;
	font-size: 12px;
	margin: 0px 2px 2px 2px;
}

span.recipe {
	font-size: 12px;
	margin: 2px;
}

span.nobr {
	white-space: nowrap;
}

div.title {
	margin: 0px auto;
	width: 100%;
	max-width: 900px;
}

div.filter {
	height: 28px;
	width: calc(100% - 8px);
	margin: 0px 4px;
	padding: 0px;
}

input.search {
	height: 100%;
	width: calc(40% - 8px);
	border-radius: 2px;
	margin: 0px 4px 0px 0px;
	padding: 0px;
}

button.clear, button.back {
	height: 100%;
	width: calc(15% - 12px);
	border-radius: 2px;
	margin: 0px 6px 0px 0px;
	padding: 0px;
	background-color: rgb(238, 238, 238);
}

select.sort {
	height: 100%;
	width: calc(30% - 2px);
	border-radius: 2px;
	margin: 0px;
	padding: 0px;
}