@import "hot-threads.css";
@font-face {
	font-family: 'Font Awesome';
	src: url('../font/fontawesome-webfont.eot');
	src: url('../font/fontawesome-webfont.woff') format('woff'),
	url('../font/fontawesome-webfont.ttf') format('truetype'),
	url('../font/fontawesome-webfont.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

html {
	background-color:#f0e0d6;
}

body {
	margin:0;
	padding:16px 0 0 0;
	background-color:#ffe;
	color:#800;
	line-height:1;
}

a {
	color:#44e;
	text-decoration:none;
}

a:hover {
	color:#d00;
}

a img {
	border:none;
}

.hide {
	display:none !important;
}

.clear {
	clear:both;
	height:1px;
	overflow:hidden;
}

.wf-button {
	cursor:pointer;
	font-family:'Font Awesome';
	font-weight:normal;
	text-shadow:none;
}

.text-field {
	display:block;
	margin:0;
	padding:4px;
	width:100%;
	border:1px solid silver;
	border-radius:3px;
	background-color:#fff;
	color:#333;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

.text-field:focus {
	border:1px solid #08c;
}

/*
 * base
 */

.container {
	margin:0 auto 0 auto;
	max-width:1024px;
}

.content {
	display:table;
	width:100%;
}
.content .list, .content .tags {
	display:table-cell;
	vertical-align:top;
}

.content .list {
}

.content .tags {
	width:33%;
}

@media screen and (max-width:1024px) {
	.container {
		margin:8px;
	}
	.content {
		display:block;
		width:100%;
		border-top:1px solid silver;
	}
	.content .list, .content .tags {
		display:block;
		width:100%;
	}
}

/*
 * registerer
 */

.header {
	display:table;
	width:100%;
	background-position:center top;
	background-repeat:no-repeat;
}

.header a {
	color:#fff;
}

.description {
	display:table-cell;
	padding:8px;
	font-size:x-small;
	color:#fff;
	line-height:1.25;
	text-shadow:0 0 3px #000, -1px 0 3px #000, 0 -1px 3px #000, 1px 0 3px #000, 1px 1px 3px #000;
}

.description > div {
	font-size:large;
	font-weight:bold;
}

.registerer {
	display:table-cell;
	width:45%;
	height:600px;
	padding:0 16px 0 0;
	vertical-align:middle;
}

.registerer-form {
	margin:0;
	padding:0;
}

.registerer .url, .registerer .tags {
	margin:0 0 4px 0;
	box-shadow:0 1px 2px 1px rgba(0,0,0,0.25);
}

.registerer .submit {
	width:30%;
}

/*
 * tag header
 */

.tag-header {
	margin:0 2em 8px 0;
}

.tag-header > :first-child {
	display:table;
	margin:0 0 16px 0;
	padding:4px 4px 2px 4px;
	font-size:small;
	color:#800;
	border-radius:0 0 3px 3px;
	box-shadow:0 1px 1px 1px rgba(0,0,0,0.25);
}

.tag-header > :last-child {
	padding:0 0 2px 0;
	font-size:xx-large;
	text-align:center;
	border-bottom:4px solid #800;
}

/*
 * list header
 */

.list-header {
	margin:16px 2em 0 0;
	border:1px solid #ea8;
	border-radius:4px;
	background-color:#ffe;
}

.tag-header + .list-header {
	margin-top:0;
}

.list-header-inner {
	display:table;
	width:100%;
	font-size:small;
}

.list-header-inner > div.item {
	display:table-cell;
	vertical-align:middle;
	padding:12px 8px 12px 8px;
}

.list-header-inner > div.item-last {
	text-align:right;
}

div.list-header-form {
	margin:-16px 0 0 0;
}

div.list-header-form > div:first-child {
	margin:0 56px 0 auto;
	width:0px;
	height:0px;
	border-style:solid;
	border-width:8px;
	border-color:#ffe #ffe #f0e0d6 #ffe;
}

form.list-header-form {
	margin:0 8px 8px 8px;
	padding:8px;
	background-color:#f0e0d6;
	border-radius:4px;
	font-size:small;
}

form.list-header-form table {
	width:100%;
	border-collapse:collapse;
	margin:0;
}

form.list-header-form td {
	padding:0 32px 0 0;
	vertical-align:top;
	white-space:nowrap;
}

form.list-header-form td:last-child {
	padding-right:0;
}

form.list-header-form tr.horz td {
	padding-top:4px;
	vertical-align:middle;
	text-align:right;
}

form.list-header-form a {
	display:block;
	margin:4px 0 0 0;
}

form.list-header-form label {
	display:block;
	margin:4px 0 0 0;
}

#thread-filter-desc {
	font-size:x-small;
}

/*
 * thread list navigator
 */

.list-nav {
	margin:20px 2em 20px 0;
	text-align:center;
}

@media screen and (max-width:1024px) {
	.list-nav {
		margin-right:0;
	}
}

.list-nav a {
	display:inline-block;
	margin:0 0 0 -1px;
	padding:4px 8px 4px 8px;
	background-color:#fff;
	color:#800;
	border:1px solid silver;
	font-size:medium;
	font-weight:bold;
	white-space:nowrap;
}
.list-nav span {
	display:inline-block;
	margin:0 0 0 -1px;
	padding:4px 8px 4px 8px;
	background-color:#ffe;
	color:#888;
	border:1px solid silver;
	font-size:medium;
	font-weight:bold;
	white-space:nowrap;
}
.list-nav a:first-child,
.list-nav span:first-child {
	border-radius:4px 0 0 4px;
}
.list-nav a:last-child,
.list-nav span:last-child {
	border-radius:0 4px 4px 0;
}
.list-nav a:hover {
	background-color:#eee;
}
.list-nav span.disabled {
}
.list-nav span.current {
	background-color:#c44;
	color:#fff;
	border-color:silver;
}
.list-nav span.ellipsis {
	border-style:none solid none solid;
}

/*
 * thread list
 */

.list-body {
	margin:0 2em 0 0;
}

.list .warn {
	margin:4em 2em 4em 0;
	text-align:center;
	font-weight:bold;
	color:#f00;
}

@media screen and (max-width:1024px) {
	.list-body {
		margin-right:0;
	}
}

.a-thread {
	margin:0 0 8px 0;
	display:table;
	width:100%;
	border-bottom:1px solid #ddd;
}

.list-nav + .list-body .a-thread:first-child {
	border-top:1px solid #ddd;
}

.a-thread > div {
	display:table-cell;
	vertical-align:top;
	padding:0 0 8px 0;
}

.a-thread > div:first-child {
	width:10px;
}

.a-thread > div:first-child > div {
	display:table;
	width:66px;
	height:52px;
}

.a-thread > div:first-child > div a {
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	background-color:#333;
	border:1px solid #333;
}

.a-thread > div:first-child > div img {
	display:block;
	margin:0 auto 0 auto;
	max-width:64px;
	max-height:50px;
}

.a-thread > div:first-child > div canvas {
	display:block;
	margin:0 auto 0 auto;
}

.a-thread > div:last-child {
	padding:0 0 0 8px;
	color:#ccc;
}

.a-thread:first-child > div {
	padding-top:8px;
}

.a-thread .basename {
	font-weight:bold;
}

.a-thread .replies {
	font-size:xx-small;
	color:#888;
}

.a-thread .replies b {
	padding:0 2px 0 0;
	font-size:small;
	color:#800;
}

.a-thread > div:last-child img {
	vertical-align:bottom;
}

.a-thread .registered-date {
	float:right;
	font-size:x-small;
	color:#888;
}

.a-thread > div:last-child > div:last-child {
	margin:8px 0 0 0;
}

.a-thread > div:last-child > div:last-child a {
	display:inline-block;
	margin:0 0 2px 0;
	padding:3px 4px 2px 4px;
	border:1px solid #789922;
	border-radius:3px;
	background-color:#789922;
	color:#fff;
	white-space:nowrap;
	font-size:small;
	line-height:1;
}

.a-thread > div:last-child > div:last-child a.add-tag {
	border:1px dashed #ea8;
	background-color:transparent;
	color:#800;
}

.a-thread > div:last-child > div:last-child a.add-tag.editable {
	background-color:#ea8;
}

.a-thread > div:last-child > div:last-child a:hover,
.a-thread > div:last-child > div:last-child a.editable:hover {
	background-color:#d00;
	border-color:#d00;
	color:#fff;
}

.add-tag-container {
	margin:0 0 4px 0;
	padding:4px;
	border:1px solid #ea8;
	border-radius:4px;
	background-color:#ffe;
	color:#800;
	font-size:small;
}

.add-tag-container table {
	width:100%;
	border-collapse:collapse;
}

.add-tag-container td {
	padding:0;
	vertical-align:middle;
}

.add-tag-container tr:not(:first-child) td {
	padding-top:4px;
}

.add-tag-container td:first-child {
	width:1%;
	padding-right:8px;
	white-space:nowrap;
}

.add-tag-container tr:last-child td:last-child {
	width:1%;
	padding-left:4px;
	white-space:nowrap;
}

.add-tag-container .add-tag-text {
}

.del-tag-container {
	border:1px solid #ea8;
	border-radius:4px;
	padding:4px;
	background-color:#ffe;
	color:#800;
	border-radius:3px;
}

.del-tag-container > div:first-child {
	margin:0 0 4px 0;
	font-weight:bold;
}

.del-tag-container .del-tag-item {
	padding:8px 0 8px 0;
	border-top:1px solid silver;
}

.del-tag-item span {
	font-size:small;
	background-color:#789922;
	border:1px solid #789922;
	color:#fff;
	padding:0 4px 0 4px;
	border-radius:3px;
	line-height:2;
	white-space:nowrap;
}

.del-tag-item input:checked + span {
	background-color:#789922;
	border-color:#789922;
	color:#fff;
}

.del-tag-container input:not(:checked) + span {
	background-color:#eee;
	border-color:#eee;
	color:#888;
}

.del-tag-item input:not(:checked) + span:after {
	margin:0 0 0 4px;
	content:"(登録から外されます)";
	color:#d00;
	font-size:x-small;
}

/*
 * hot threads
 */

.hot-threads {
	margin:64px 2em 0 0;
}

@media screen and (max-width:1024px) {
	.hot-threads {
		margin:64px 0 64px 0;
		padding:8px;
	}
}

/*
 * advertise frame
 */

div.ad-frame {
	margin:2em 2em 0 0;
}

iframe.ad-frame {
	border:none;
	display:block;
	margin:0;
	width:100%;
	height:480px;
}

/*
 * side bar (tags navigator)
 */

.tags-ad {
	margin:16px 0 8px 0;
	text-align:center;
	line-height:1;
	font-size:x-small;
}

.tag-filter {
	margin:16px 0 0 0;
}

.tag-filter-form {
	display:table;
	width:100%;
	margin:0;
	padding:0;
}

.tag-filter-form > div {
	display:table-cell;
	vertical-align:middle;
}

.tag-filter-form > div:last-child {
	width:3%;
	padding:0 0 0 2px;
	white-space:nowrap;
}

.tag-filter-form .tag-filter-text {
	display:block;
	width:100%;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	font-size:small;
	line-height:1;
	padding:4px;
	border:1px solid silver;
	border-radius:4px;
}

.tag-filter-form .tag-filter-text:focus {
	border:1px solid #08c;
}

.tag-filter-form .submit {
	padding:4px;
}

/*
 * side bar (tags list)
 */

.tags-list {
	background-color:#f0e0d6;
	margin:8px 0 0 0;
	padding:8px;
	border-radius:4px;
	box-shadow:1px 1px 4px 4px rgba(0,0,0,0.3);
}

.tags-sort-nav {
	margin:0 0 1em 0;
	font-size:x-small;
}

.tags-sort-nav ul {
	display:inline;
	margin:0;
	padding:0;
}

.tags-sort-nav li {
	display:inline;
	list-style:none;
	margin:0;
	padding:0;
	font-size:small;
}

.tags-sort-nav li + li:before {
	content:" | ";
}

.tags-sort-nav a.selected {
	background-color:#800;
	color:#fff;
	border-radius:2px;
	font-weight:bold;
	padding:2px 4px 1px 4px;
}

.tags-body {
	margin:0;
}

.tags-body.viewed {
	margin-bottom:0.5em;
	padding-bottom:0.5em;
	border-bottom:1px dashed #ea8;
}

.tags-body li {
	line-height:1.25;
}

@media screen and (max-width:1024px) {
	.tags-body li {
		display:inline;
	}
}

.tags-body li.viewed {
	font-size:large;
	font-weight:bold;
}

.tags-body li span {
	margin:0 0 0 4px;
	font-size:small;
}

.tags-list .warn {
	text-align:center;
	font-weight:bold;
	color:#f00;
}

/*
 * overlay
 */

.overlay {
	position:fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
}

.light {
	background-color:rgba(0,0,0,0.01);
}

.dark {
	background-color:rgba(0,0,0,0.5);
}

/*
 * register dialog
 */

.dialog {
	position:fixed;
	left:25%;
	top:25%;
	right:25%;
	bottom:25%;
	border:4px solid #ccc;
	border-radius:8px;
	/*background-color:rgba(255,255,238,0.75);*/
	background-color:rgba(0,0,0,0.9);
	padding:8px;
	box-shadow:0 2px 8px 8px rgba(0,0,0,0.5);
}

.dialog .dialog-title {
	padding:0 0 8px 0;
	color:#ccc;
	font-size:large;
	font-weight:bold;
}

.dialog .dialog-content {
	overflow-y:auto;
	color:#ea8;
}

.dialog .dialog-bottom {
	padding:8px 0 0 0;
	text-align:right;
}

.dialog .dialog-bottom a {
	display:inline-block;
	margin:0 8px 0 0;
	padding:2px;
	min-width:100px;
	border:1px solid #ccc;
	border-radius:4px;
	color:#ccc;
	text-align:center;
	cursor:pointer;
}

.dialog .dialog-bottom a:hover {
	border-color:#fff;
	background-color:#fff;
	color:#000;
}

.dialog-content .error {
	margin:3em;
	color:#f80;
	font-size:x-large;
	font-weight:bold;
	text-align:center;
}

.dialog-content .thread {
	background-color:#ffe;
	color:#800;
	padding:8px;
}

.dialog-content .thread div {
	margin:1em 0 0 0;
}

.dialog-content .thread img {
	margin:0 8px 8px 0;
	max-width:100px;
	max-height:100px;
	float:left;
}

.dialog-content .thread .clear {
	clear:both;
}

.dialog-content .tags {
	clear:both;
	margin:8px 0 0 0;
	color:silver;
}

.dialog-content .tags > span {
	display:inline-block;
	margin:0 16px 0 0;
}

.dialog-content .tags > span > span:first-child {
	display:inline-block;
	margin:0 2px 0 0;
	padding:2px 4px 2px 4px;
	background-color:#789922;
	color:#fff;
	font-weight:bold;
	border-radius:2px;
}

.dialog-content .tags > span > span:last-child {
	font-size:small;
}

/*
 * tag completion popup
 */

.complete-popup {
	position:absolute;
	border:1px solid silver;
	background-color:#fff;
	color:#333;
	padding:4px;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	box-shadow:0 2px 2px 2px rgba(0,0,0,0.5);
}

.complete-popup-inner {
	max-height:100px;
	overflow-y:auto;
	padding:0 0 8px 0;
}

.complete-popup-inner > span {
	display:inline-block;
	margin:0 16px 2px 0;
}

.complete-popup-inner > span > span:first-child {
	display:inline-block;
	margin:0 2px 0 0;
	padding:2px 4px 2px 4px;
	background-color:#789922;
	color:#fff;
	font-weight:bold;
	border-radius:2px;
}

.complete-popup-inner > span.selected > span:first-child {
	background-color:#d00;
}

.complete-popup-inner > span > span:last-child {
	font-size:x-small;
}

.complete-popup-bottom {
	margin:0 -4px -4px -4px;
	padding:8px 0 8px 0;
	border-top:1px solid silver;
	background-color:#eee;
	font-size:x-small;
	text-align:right;
}

.complete-popup-bottom > span {
	margin:0 8px 0 0;
	white-space:nowrap;
}

.complete-popup-bottom > span > span:first-child {
	margin:0 2px 0 0;
	padding:0 2px 0 2px;
	border-radius:2px;
	background-color:#333;
	color:#fff;
	font-size:small;
	font-weight:bold;
}

/*
 * footer
 */

.footer {
	margin:16px 0 0 0;
	border-top:1px solid silver;
	background-color:#f0e0d6;
}

.footer .footer-inner {
	max-width:1024px;
	min-height:200px;
	margin:8px auto 0 auto;
	font-size:x-small;
	background:url(../image/bg-dat.png) right center no-repeat;
}

.footer-inner ul.notice {
	margin:0 0 0 auto;
}

.footer-inner ul.notice li {
	margin:0 0 4px 0;
}

.footer-inner ul.links {
	width:50%;
	margin:24px 0 0 2em;
	padding:8px 0 0 0;
	border-top:1px solid #ea8;
}

.footer-inner ul.links li {
	display:inline-block;
	margin:0 1em 0 0;
	padding:3px;
	list-style:none;
	font-size:small;
	font-weight:bold;
}

.footer-inner .mail:before {
	color:#00f;
	content:"akahuku+tatelog@gmail.com";
}

/* vim:set ts=4 sw=4 fenc=UTF-8 ff=unix ft=css : */